Refactor

src/pages/category.astro

@@ -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">&larr; 较新</a
+    >
+    <span
+      class="pagination__info"
+      th:text="|${posts.page} / ${posts.totalPages}|"></span>
+    <a
+      th:if="${posts.hasNext()}"
+      th:href="@{${posts.nextUrl}}"
+      class="pagination__next">较旧 &rarr;</a
+    >
+  </nav>
+</Layout>