Extract post list into reusable fragment
Add public/fragments/post-list.html containing the shared post list markup, and update src/pages/category.astro and src/pages/index.astro to replace the in-file duplicate list with <th:block th:replace="~{fragments/post-list}"></th:block>. This removes duplicated template code and centralizes the post list for easier maintenance; existing empty-feed and pagination logic remain unchanged.
This commit is contained in:
@@ -0,0 +1,19 @@
|
|||||||
|
<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>
|
||||||
@@ -14,26 +14,8 @@ import Layout from "../layouts/Layout.astro";
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="post-feed__list" role="list">
|
|
||||||
<li th:each="post : ${posts.items}" class="post-feed__item">
|
<th:block th:replace="~{fragments/post-list}"></th:block>
|
||||||
<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>
|
<div th:if="${posts.total == 0}" class="feed-empty">暂无文章。</div>
|
||||||
|
|
||||||
|
|||||||
+2
-20
@@ -6,26 +6,8 @@ import Layout from "../layouts/Layout.astro";
|
|||||||
<Fragment slot="head">
|
<Fragment slot="head">
|
||||||
<title th:text="${site.title}"></title>
|
<title th:text="${site.title}"></title>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
<ul class="post-feed__list" role="list">
|
|
||||||
<li th:each="post : ${posts.items}" class="post-feed__item">
|
<th:block th:replace="~{fragments/post-list}"></th:block>
|
||||||
<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
|
<nav
|
||||||
th:if="${posts.totalPages gt 1}"
|
th:if="${posts.totalPages gt 1}"
|
||||||
|
|||||||
Reference in New Issue
Block a user