theme-quark/templates/category.html
2025-04-14 16:06:38 +00:00

60 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" lang="zh-CN">
<th:block th:replace="~{modules/import}" />
<body>
<th:block th:replace="~{modules/header::goPage('home')}" />
<main>
<div class="main-content">
<article class="blog active" data-page="">
<header>
<th:block th:replace="~{modules/categories_banner}" />
<h2 class="h2 article-title" th:text="${category.spec.displayName}"></h2>
</header>
<section class="blog-posts">
<ul class="blog-posts-list">
<li class="blog-post-item" th:each="post : ${posts.items}">
<a th:href="${post.status.permalink}">
<figure class="blog-banner-box">
<img th:src="${post.spec.cover ?: #theme.assets('/img/hero-bg.jpg')}" alt="" loading="lazy">
</figure>
<div class="blog-content">
<div class="blog-meta">
<p class="blog-category" th:if="${! #strings.isEmpty(post.spec.categories)}"
th:each="category_name : ${post.spec.categories}"
th:with="category = ${categoryFinder.getByName(category_name)}"
th:text="${category.spec.displayName}">
</p>
<span class="dot"></span>
<time th:datetime="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"></time>
</div>
<h3 class="h3 blog-item-title" th:text="${post.spec.title}"></h3>
<p class="blog-text" th:text="${post.status.excerpt}"></p>
</div>
</a>
</li>
</ul>
</section>
</article>
</div>
</main>
<!-- ======= Footer ======= -->
<th:block th:replace="~{modules/footer}" />
<!-- End Footer -->
<script th:src="@{/assets/js/script.js?v={version}(version=${theme.spec.version})}"></script>
<script type="module"
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/5.5.2/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/5.5.2/ioniconshttps://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/5.5.2/ionicons/ionicons.js"></script>
</body>
</html>