106 lines
6.1 KiB
HTML
106 lines
6.1 KiB
HTML
<th:block th:fragment="home-photos(photoPage,groups,tag,selectedGroup)">
|
|
<div class="normal_list">
|
|
<div class="normal_list_inner" uk-height-viewport="offset-top: true">
|
|
|
|
<!-- 分类导航 -->
|
|
<div class="photos_cat_nav">
|
|
<ul id="cat_nav_items">
|
|
<li>
|
|
<!-- 修改：href 改为 data-href，并添加一个通用 class 如 'cat-link' -->
|
|
<a th:attr="data-href=@{/photos}"
|
|
th:classappend="${#strings.isEmpty(tag) and #strings.isEmpty(selectedGroup) ? 'active' : ''}"
|
|
class="cat-link">
|
|
全部<span></span>
|
|
</a>
|
|
</li>
|
|
<th:block th:each="photoGroup : ${groups}">
|
|
<li>
|
|
<!-- 修改：这里也改为 data-href -->
|
|
<a th:attr="data-href=@{/photos(tag=${photoGroup.spec.displayName})}"
|
|
th:classappend="${#strings.equals(tag, photoGroup.spec.displayName) or #strings.equals(selectedGroup, photoGroup.metadata.name) ? 'active' : ''}"
|
|
th:text="${photoGroup.spec.displayName}" class="cat-link">
|
|
<span></span>
|
|
</a>
|
|
</li>
|
|
</th:block>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 相册列表 -->
|
|
<div id="photos_item" class="norpost_list">
|
|
<div th:unless="${#lists.isEmpty(photoPage.items)}" class="gallery-photos page">
|
|
|
|
<div th:each="photo : ${photoPage.items}" class="gallery-photo">
|
|
|
|
<th:block th:with="
|
|
img = ${!#strings.isEmpty(photo.spec.cover) ? photo.spec.cover : photo.spec.url},
|
|
isVideo = ${#strings.endsWith(img, '.mp4') or #strings.endsWith(img, '.webm') or #strings.endsWith(img, '.ogg')}
|
|
">
|
|
|
|
<span th:if="${isVideo}" th:href="${img}" data-fancybox="gallery"
|
|
class="fancybox video-fancybox"
|
|
style="position: relative; display: block; cursor: pointer;">
|
|
<video class="photo-img" preload="metadata" muted playsinline>
|
|
<source th:src="${img}" th:type="${#strings.endsWith(img, '.mp4') ? 'video/mp4' :
|
|
(#strings.endsWith(img, '.webm') ? 'video/webm' : 'video/ogg')}" />
|
|
</video>
|
|
<div
|
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;">
|
|
<i class="ri-play-circle-line play-icon"
|
|
style="color: #41b87e; font-size: 40px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;"></i>
|
|
</div>
|
|
</span>
|
|
|
|
<span th:unless="${isVideo}" th:href="${img}" data-fancybox="gallery"
|
|
class="fancybox" th:data-thumb="${img}"
|
|
style="position: relative; display: block;">
|
|
<img class="photo-img" loading="lazy" th:src="${img}" />
|
|
</span>
|
|
|
|
</th:block>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 空数据 -->
|
|
<th:block th:if="${#lists.isEmpty(photoPage.items)}">
|
|
<th:block th:replace="~{macro/tpl/content-none}" />
|
|
</th:block>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<th:block th:if="${photoPage.hasPrevious()} or ${photoPage.hasNext()}">
|
|
<div id="p_pagination">
|
|
<div class="post-paging"
|
|
th:with="_page = ${photoPage.page+1}">
|
|
<a th:if="${photoPage.hasNext() and #strings.isEmpty(tag)}"
|
|
th:data="@{/photos(page=${_page})}"
|
|
th:text="${theme.config.base_set.site_page}"></a>
|
|
<a th:if="${photoPage.hasNext() and not #strings.isEmpty(tag)}"
|
|
th:data="@{/photos(tag=${tag},page=${_page})}"
|
|
th:text="${theme.config.base_set.site_page}"></a>
|
|
<form class="page-jump-form" method="get" action="/photos">
|
|
<span class="page-jump-label">转到</span>
|
|
<input th:if="${not #strings.isEmpty(tag)}" type="hidden" name="tag" th:value="${tag}" />
|
|
<span class="page-jump-input-wrap">
|
|
<button class="page-jump-step page-jump-step-down" type="button"
|
|
title="减少页码" aria-label="减少页码"><i class="ri-subtract-line"
|
|
aria-hidden="true"></i></button>
|
|
<input class="page-jump-input" type="number" name="page" min="1"
|
|
th:max="${photoPage.totalPages}" th:value="${photoPage.page}"
|
|
inputmode="numeric" aria-label="页码" autocomplete="off" required />
|
|
<button class="page-jump-step page-jump-step-up" type="button"
|
|
title="增加页码" aria-label="增加页码"><i class="ri-add-line"
|
|
aria-hidden="true"></i></button>
|
|
</span>
|
|
<span class="page-jump-total">/ [[${photoPage.totalPages}]]</span>
|
|
<button class="page-jump-submit" type="submit" title="跳转到指定页"
|
|
aria-label="跳转到指定页"><i class="ri-arrow-right-line"></i></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</th:block>
|
|
|
|
</div>
|
|
</div>
|
|
</th:block>
|