88 lines
3.7 KiB
HTML
88 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||
|
||
<th:block th:with="postItems=${posts.items}" th:fragment="post-list">
|
||
|
||
<!-- card，需要添加在没有图片时使用随机图片 -->
|
||
<div class="recent-post-item lastestpost-item" th:each="post : ${postItems}">
|
||
<div class="post_cover left_radius">
|
||
<a th:attr="title=${post.spec.title}" th:href="${post.status.permalink}">
|
||
<img class="post_bg" th:alt="${post.spec.title}" th:attr="data-lazy-src=${post.spec.cover}">
|
||
</a>
|
||
</div>
|
||
<!-- 类别非空时 -->
|
||
<th:block th:if="${not #lists.isEmpty(post.categories)}">
|
||
<a class="article-meta__categories"
|
||
th:each="category : ${post.categories}"
|
||
th:href="${category.status.permalink}"
|
||
th:text="${category.spec.displayName}"
|
||
th:title="${category.spec.displayName}">
|
||
</a>
|
||
</th:block>
|
||
<div class="recent-post-info">
|
||
<div class="recent-post-info-top">
|
||
<span class="lastestpost">最新文章</span>
|
||
<a class="article-title"
|
||
th:attr="title=${post.spec.title}"
|
||
th:href="${post.status.permalink}"
|
||
th:text="${post.spec.title}">
|
||
</a>
|
||
<div class="content" th:text="${post.status.excerpt}"></div>
|
||
</div>
|
||
|
||
|
||
<div class="article-meta-wrap">
|
||
<!-- tag -->
|
||
<th:block th:if="${not #lists.isEmpty(post.tags)}">
|
||
<span class="article-meta tags">
|
||
<a class="article-meta__tags" event.cancelbubble
|
||
onclick="window.event.cancelBubble=!0"
|
||
th:each="tag : ${post.tags}"
|
||
th:href="${tag.status.permalink}"
|
||
th:text="${tag.spec.displayName}"
|
||
th:title="${tag.spec.displayName}">
|
||
<span class="tags-punctuation">#</span>
|
||
</a>
|
||
</span>
|
||
</th:block>
|
||
<!-- 创建时间 -->
|
||
<span class="post-meta-date">
|
||
<i class="far fa-calendar-alt"></i>
|
||
<span class="article-meta-label">创建</span>
|
||
<time th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
|
||
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
|
||
</time>
|
||
</span>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div th:if="${posts.hasPrevious() || posts.hasNext()}">
|
||
|
||
|
||
<div class="pagination">
|
||
|
||
<!-- 上一页 -->
|
||
<a class="extend prev" data-pjax-state="" rel="prev" th:href="${posts.prevUrl}"
|
||
th:if="${posts.hasPrevious()}">
|
||
<i class="fas fa-chevron-left fa-fw"></i>
|
||
<div class="pagination_tips_prev">上页</div>
|
||
</a>
|
||
|
||
<span class="text-sm" th:text="${posts.page} +'/'+ ${posts.total}"></span>
|
||
|
||
<!-- 下一页 -->
|
||
<a class="extend next" data-pjax-state="" rel="next"
|
||
th:href="${posts.nextUrl}"
|
||
th:if="${posts.hasNext()}">
|
||
<div class="pagination_tips_next">下页</div>
|
||
<i class="fas fa-chevron-right fa-fw"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</th:block>
|
||
</html> |