Files
theme-earth/templates/archives.html
Anye eb209f3155 Refactor paginations
为了提升代码的可维护性和一致性,将 tags.html、categories.html 和 archives.html 中的自定义分页逻辑替换为统一的分页模块。这样可以减少重复代码,并简化未来的维护工作。
2025-08-04 14:20:54 +08:00

83 lines
4.3 KiB
HTML

<!doctype html>
<html
xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layout :: html(title = |#{page.archives.title} - ${site.title}|, hero = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = '')}"
>
<th:block th:fragment="content">
<div class="rounded-xl bg-white p-4 dark:bg-slate-800">
<h1 class="mb-6 text-2xl font-medium dark:text-slate-50" th:text="#{page.archives.title}"></h1>
<div class="flex flex-col gap-4">
<th:block th:each="archive : ${archives.items}">
<th:block th:each="month : ${archive.months}">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 sm:col-span-3">
<h2
class="sticky top-20 mt-2 text-lg font-medium dark:text-slate-50"
th:text="#{page.archives.date(${archive.year},${month.month})}"
></h2>
</div>
<div class="col-span-12 sm:col-span-9">
<th:block th:each="post : ${month.posts}">
<div
class="my-2 rounded-xl border border-gray-300 bg-white shadow-sm hover:border-gray-400 hover:shadow dark:border-slate-600 dark:bg-slate-700 dark:hover:border-slate-700"
>
<div class="relative flex flex-col gap-2 p-4">
<div class="flex min-w-0 flex-wrap items-center justify-between gap-4">
<div class="col-span-7 flex flex-nowrap truncate">
<a
th:href="${post.status.permalink}"
class="truncate text-xl font-medium text-gray-900 hover:text-gray-500 hover:underline dark:text-slate-50 dark:hover:text-white"
th:text="${post.spec.title}"
></a>
</div>
<div class="col-span-3 col-start-11">
<p
class="truncate text-sm text-gray-600 dark:text-slate-100"
th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
></p>
</div>
</div>
<div
th:if="${not #lists.isEmpty(post.categories)} or ${not #lists.isEmpty(post.tags)}"
class="flex flex-wrap items-center gap-2"
>
<a
th:if="${#lists.size(post.categories)} gt 0"
th:href="@{${post.categories[0].status.permalink}}"
th:title="${post.categories[0].spec.displayName}"
th:text="${post.categories[0].spec.displayName}"
class="mr-1 text-sm font-medium text-gray-800 hover:text-gray-900 dark:text-slate-500 dark:hover:text-slate-600"
>
</a>
<a
th:each="tag : ${post.tags}"
th:href="@{${tag.status.permalink}}"
th:title="${tag.spec.displayName}"
th:text="|#${tag.spec.displayName}|"
class="cursor-pointer text-sm italic text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-500"
>
</a>
</div>
<div class="line-clamp-2 text-sm font-light dark:text-slate-200">
<th:block th:text="${post.status.excerpt}"></th:block>
</div>
</div>
</div>
</th:block>
</div>
</div>
</th:block>
</th:block>
</div>
<div th:if="${archives.total == 0}" class="mt-6 flex items-center justify-center">
<span class="text-sm font-light text-gray-600" th:text="#{common.noPosts}"></span>
</div>
<th:block
th:replace="~{modules/pagination :: pagination(context = '/archives/', prevUrl = ${archives.prevUrl}, nextUrl = ${archives.nextUrl}, totalPages = ${archives.totalPages}, page = ${archives.page}, hasPrevious = ${archives.hasPrevious()}, hasNext = ${archives.hasNext()})}"
/>
</div>
</th:block>
</html>