Refactor
This commit is contained in:
Ryan Wang
@@ -0,0 +1,65 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout pageTitle="归档">
|
||||
<Fragment slot="head">
|
||||
<title th:text="|归档 - ${site.title}|"></title>
|
||||
</Fragment>
|
||||
|
||||
<section class="archive-list" aria-label="Archive list">
|
||||
<th:block th:each="archive : ${archives.items}">
|
||||
<th:block th:each="month : ${archive.months}">
|
||||
<div class="archive-group">
|
||||
<h2
|
||||
class="archive-group__year"
|
||||
th:text="|${archive.year} · ${month.month}|"
|
||||
>
|
||||
</h2>
|
||||
<ul class="archive-group__items">
|
||||
<li th:each="post : ${month.posts}" class="archive-entry">
|
||||
<span
|
||||
class="archive-entry__date"
|
||||
th:text="${#dates.format(post.spec.publishTime, 'MM/dd')}"
|
||||
></span>
|
||||
<div>
|
||||
<h3 class="archive-entry__title">
|
||||
<a
|
||||
th:href="@{${post.status.permalink}}"
|
||||
th:text="${post.spec.title}"></a>
|
||||
</h3>
|
||||
<p
|
||||
class="archive-entry__summary"
|
||||
th:text="${post.status.excerpt}"
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
<div th:if="${archives.total == 0}" class="archive-empty">暂无文章。</div>
|
||||
</section>
|
||||
|
||||
<nav
|
||||
th:if="${archives.totalPages gt 1}"
|
||||
class="pagination"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<a
|
||||
th:if="${archives.hasPrevious()}"
|
||||
th:href="@{${archives.prevUrl}}"
|
||||
class="pagination__prev">← 较新</a
|
||||
>
|
||||
<span
|
||||
class="pagination__info"
|
||||
th:text="|${archives.page} / ${archives.totalPages}|"></span>
|
||||
<a
|
||||
th:if="${archives.hasNext()}"
|
||||
th:href="@{${archives.nextUrl}}"
|
||||
class="pagination__next">较旧 →</a
|
||||
>
|
||||
</nav>
|
||||
</Layout>
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout pageTitle="分类">
|
||||
<Fragment slot="head">
|
||||
<title th:text="|分类 - ${site.title}|"></title>
|
||||
</Fragment>
|
||||
|
||||
<nav class="taxonomy-list" aria-label="Category list">
|
||||
<div
|
||||
th:each="category : ${categories}"
|
||||
class="taxonomy-list__item"
|
||||
>
|
||||
<a
|
||||
class="taxonomy-list__link"
|
||||
th:href="@{${category.status.permalink}}"
|
||||
th:text="${category.spec.displayName}"
|
||||
>
|
||||
</a>
|
||||
<span class="taxonomy-list__count" th:text="|${category.postCount} 篇|">
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
</Layout>
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Fragment slot="head">
|
||||
<title th:text="|${category.spec.displayName} - ${site.title}|"></title>
|
||||
</Fragment>
|
||||
|
||||
<div class="page-heading">
|
||||
<h1 th:text="${category.spec.displayName}"></h1>
|
||||
<p class="page-meta">
|
||||
<span th:text="|${posts.total} 篇文章|"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="post-feed__list" role="list">
|
||||
<li th:each="post : ${posts.items}" class="post-feed__item">
|
||||
<a class="post-feed__link" th:href="@{${post.status.permalink}}">
|
||||
<div class="post-feed__body">
|
||||
<p
|
||||
class="post-feed__date"
|
||||
th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
|
||||
>
|
||||
</p>
|
||||
<h2 class="post-feed__title" th:text="${post.spec.title}"></h2>
|
||||
<p class="post-feed__excerpt" th:text="${post.status.excerpt}"></p>
|
||||
</div>
|
||||
<img
|
||||
th:unless="${#strings.isEmpty(post.spec.cover)}"
|
||||
class="post-feed__image"
|
||||
th:src="${post.spec.cover}"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div th:if="${posts.total == 0}" class="feed-empty">暂无文章。</div>
|
||||
|
||||
<nav
|
||||
th:if="${posts.totalPages gt 1}"
|
||||
class="pagination"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<a
|
||||
th:if="${posts.hasPrevious()}"
|
||||
th:href="@{${posts.prevUrl}}"
|
||||
class="pagination__prev">← 较新</a
|
||||
>
|
||||
<span
|
||||
class="pagination__info"
|
||||
th:text="|${posts.page} / ${posts.totalPages}|"></span>
|
||||
<a
|
||||
th:if="${posts.hasNext()}"
|
||||
th:href="@{${posts.nextUrl}}"
|
||||
class="pagination__next">较旧 →</a
|
||||
>
|
||||
</nav>
|
||||
</Layout>
|
||||
+44
-90
@@ -1,95 +1,49 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import PostCard from "../components/PostCard.vue"
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
Check out the <code>src/pages</code> directory to get started.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card href="https://docs.astro.build/" title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs." />
|
||||
<Card href="https://astro.build/integrations/" title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries." />
|
||||
<Card href="https://astro.build/themes/" title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes." />
|
||||
<Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" />
|
||||
</ul>
|
||||
<ul class="list-decimal list-inside">
|
||||
<li th:text="#{foo}"></li>
|
||||
<li th:text="#{bar}"></li>
|
||||
<li th:text="#{hello('Ryan Wang')}"></li>
|
||||
</ul>
|
||||
<PostCard client:visible />
|
||||
<p th:each="post : ${postFinder.list(1, 10)}">
|
||||
<span th:text="${post.name}">Onions</span>
|
||||
</p>
|
||||
</main>
|
||||
<Layout>
|
||||
<Fragment slot="head">
|
||||
<title th:text="${site.title}"></title>
|
||||
</Fragment>
|
||||
<ul class="post-feed__list" role="list">
|
||||
<li th:each="post : ${posts.items}" class="post-feed__item">
|
||||
<a class="post-feed__link" th:href="@{${post.status.permalink}}">
|
||||
<div class="post-feed__body">
|
||||
<p
|
||||
class="post-feed__date"
|
||||
th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
|
||||
>
|
||||
</p>
|
||||
<h2 class="post-feed__title" th:text="${post.spec.title}"></h2>
|
||||
<p class="post-feed__excerpt" th:text="${post.status.excerpt}"></p>
|
||||
</div>
|
||||
<img
|
||||
th:unless="${#strings.isEmpty(post.spec.cover)}"
|
||||
class="post-feed__image"
|
||||
th:src="${post.spec.cover}"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<nav
|
||||
th:if="${posts.totalPages gt 1}"
|
||||
class="pagination"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<a
|
||||
th:if="${posts.hasPrevious()}"
|
||||
th:href="@{${posts.prevUrl}}"
|
||||
class="pagination__prev">← 较新</a
|
||||
>
|
||||
<span
|
||||
class="pagination__info"
|
||||
th:text="|${posts.page} / ${posts.totalPages}|"></span>
|
||||
<a
|
||||
th:if="${posts.hasNext()}"
|
||||
th:href="@{${posts.nextUrl}}"
|
||||
class="pagination__next">较旧 →</a
|
||||
>
|
||||
</nav>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
font-weight: 900;
|
||||
background-image: var(--astro-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 100% 200%;
|
||||
background-position-y: 100%;
|
||||
border-radius: 0.4rem;
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
background-position-y: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position-y: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
background: #4f39fa;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
border: 0.1em solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
padding: 0.15em 0.25em;
|
||||
}
|
||||
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
|
||||
const links = [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Ryan Wang's Blog",
|
||||
"url": "https://ryanc.cc/",
|
||||
"logo": "https://ryanc.cc/avatar",
|
||||
"description": "Hello Halo",
|
||||
"team": "",
|
||||
"priority": 0
|
||||
},
|
||||
{
|
||||
"id": 40,
|
||||
"name": "guqing's blog",
|
||||
"url": "https://www.guqing.xyz/",
|
||||
"logo": "https://www.guqing.xyz/avatar",
|
||||
"description": "毕生所求无它，爱与自由而已",
|
||||
"team": "",
|
||||
"priority": 0
|
||||
},
|
||||
{
|
||||
"id": 104,
|
||||
"name": "JohnNiang's Blog",
|
||||
"url": "https://johnniang.me",
|
||||
"logo": "https://johnniang.me/avatar",
|
||||
"description": "Core contributor of Halo organization.",
|
||||
"team": "",
|
||||
"priority": 0
|
||||
},
|
||||
{
|
||||
"id": 152,
|
||||
"name": "烟霞志",
|
||||
"url": "https://simplestark.com",
|
||||
"logo": "https://simplestark.com/avatar",
|
||||
"description": "空有烟霞之志，叹无水云之身。",
|
||||
"team": "",
|
||||
"priority": 0
|
||||
},
|
||||
]
|
||||
---
|
||||
|
||||
<Layout title="Links">
|
||||
<main>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
|
||||
|
||||
{links.map((data) => <a href={data.url} th:href="#{data.url}" target="_blank">
|
||||
<div
|
||||
class="relative rounded border border-gray-300 bg-white px-5 py-4 shadow-sm hover:shadow flex items-center space-x-3 hover:border-gray-400">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-12 w-12 rounded-full" th:src="#{data.logo}" th:alt="#{data.name}" src={data.logo}
|
||||
alt={data.name}>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900 truncate" th:text="#{data.name}">{data.name}</p>
|
||||
<p class="text-sm text-gray-500 truncate" th:text="#{data.description}">{data.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>)}
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
max-width: 70ch;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout contentClass="prose">
|
||||
<Fragment slot="head">
|
||||
<title th:text="|${singlePage.spec.title} - ${site.title}|"></title>
|
||||
</Fragment>
|
||||
|
||||
<div class="page-heading">
|
||||
<h1 th:text="${singlePage.spec.title}"></h1>
|
||||
<p class="page-meta">
|
||||
<span
|
||||
th:text="${#dates.format(singlePage.spec.publishTime, 'yyyy-MM-dd')}"
|
||||
></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div th:utext="${singlePage.content.content}"></div>
|
||||
|
||||
<halo:comment
|
||||
group="content.halo.run"
|
||||
kind="SinglePage"
|
||||
th:attr="name=${singlePage.metadata.name}"></halo:comment>
|
||||
</Layout>
|
||||
+22
-10
@@ -1,14 +1,26 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import PostCard from "../components/PostCard.vue"
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const now = dayjs()
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Post Page.">
|
||||
<time>{now}</time>
|
||||
<main>
|
||||
<PostCard client:visible />
|
||||
</main>
|
||||
</Layout>
|
||||
<Layout contentClass="prose">
|
||||
<Fragment slot="head">
|
||||
<title th:text="|${post.spec.title} - ${site.title}|"></title>
|
||||
</Fragment>
|
||||
|
||||
<div class="page-heading">
|
||||
<h1 th:text="${post.spec.title}"></h1>
|
||||
<p class="page-meta">
|
||||
<span th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
|
||||
></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<th:block th:utext="${post.content.content}"></th:block>
|
||||
|
||||
<halo:comment
|
||||
group="content.halo.run"
|
||||
kind="Post"
|
||||
th:attr="name=${post.metadata.name}"
|
||||
>
|
||||
</halo:comment>
|
||||
</Layout>
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Fragment slot="head">
|
||||
<title th:text="|${tag.spec.displayName} - ${site.title}|"></title>
|
||||
</Fragment>
|
||||
|
||||
<div class="page-heading">
|
||||
<h1 th:text="${tag.spec.displayName}"></h1>
|
||||
<p class="page-meta">
|
||||
<span th:text="|${posts.total} 篇文章|"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="post-feed__list" role="list">
|
||||
<li th:each="post : ${posts.items}" class="post-feed__item">
|
||||
<a class="post-feed__link" th:href="@{${post.status.permalink}}">
|
||||
<div class="post-feed__body">
|
||||
<p
|
||||
class="post-feed__date"
|
||||
th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
|
||||
>
|
||||
</p>
|
||||
<h2 class="post-feed__title" th:text="${post.spec.title}"></h2>
|
||||
<p class="post-feed__excerpt" th:text="${post.status.excerpt}"></p>
|
||||
</div>
|
||||
<img
|
||||
th:unless="${#strings.isEmpty(post.spec.cover)}"
|
||||
class="post-feed__image"
|
||||
th:src="${post.spec.cover}"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div th:if="${posts.total == 0}" class="feed-empty">暂无文章。</div>
|
||||
|
||||
<nav
|
||||
th:if="${posts.totalPages gt 1}"
|
||||
class="pagination"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<a
|
||||
th:if="${posts.hasPrevious()}"
|
||||
th:href="@{${posts.prevUrl}}"
|
||||
class="pagination__prev">← 较新</a
|
||||
>
|
||||
<span
|
||||
class="pagination__info"
|
||||
th:text="|${posts.page} / ${posts.totalPages}|"></span>
|
||||
<a
|
||||
th:if="${posts.hasNext()}"
|
||||
th:href="@{${posts.nextUrl}}"
|
||||
class="pagination__next">较旧 →</a
|
||||
>
|
||||
</nav>
|
||||
</Layout>
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout pageTitle="标签">
|
||||
<Fragment slot="head">
|
||||
<title th:text="|标签 - ${site.title}|"></title>
|
||||
</Fragment>
|
||||
|
||||
<div class="tag-cloud" role="list" aria-label="Tag list">
|
||||
<a
|
||||
th:each="tag : ${tags}"
|
||||
class="tag-pill"
|
||||
role="listitem"
|
||||
th:href="@{${tag.status.permalink}}"
|
||||
>
|
||||
<span th:text="${tag.spec.displayName}"></span>
|
||||
<span class="tag-pill__count" th:text="${tag.postCount}"></span>
|
||||
</a>
|
||||
</div>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user