mirror of
https://github.com/halo-dev/theme-earth.git
synced 2026-01-13 07:03:50 +08:00
为了提升代码的可维护性和一致性,将 tags.html、categories.html 和 archives.html 中的自定义分页逻辑替换为统一的分页模块。这样可以减少重复代码,并简化未来的维护工作。
83 lines
4.3 KiB
HTML
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>
|