anian/halo-theme-pix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

适配日记簿

Browse Source
This commit is contained in:
anian
2026-03-10 17:21:05 +08:00
parent af82232813
commit 6810791637
46 changed files with 28829 additions and 25659 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/photos.html
+63 -21
View File
@@ -1,44 +1,81 @@
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${title + ' - ' + site.title})}">
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${title + ' - ' + site.title})}">
<th:block th:fragment="content">
<div class="page_main uk-width-2-3@m">
<th:block th:replace="~{modules/header}"/>
<th:block th:replace="~{modules/header}" />
<div id="pjax-container">
<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>
<a href="/photos"
th:classappend="${#lists.isEmpty(param.group) ? 'active' : ''}">全部<span></span></a>
<!-- 修改：href 改为 data-href，并添加一个通用 class 如 'cat-link' -->
<a th:attr="data-href=@{/photos}"
th:classappend="${#lists.isEmpty(param.group) ? 'active' : ''}" class="cat-link">
全部<span></span>
</a>
</li>
<th:block th:each="group : ${groups}">
<li>
<a th:href="@{|/photos?group=${group.metadata.name}|}"
th:classappend="${#lists.contains(param.group, group.metadata.name) ? 'active' : ''}"
th:text="${group.spec.displayName}"><span></span>
<!-- 修改：这里也改为 data-href -->
<a th:attr="data-href=@{|/photos?group=${group.metadata.name}|}"
th:classappend="${#lists.contains(param.group, group.metadata.name) ? 'active' : ''}"
th:text="${group.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(photos.items)}" class="gallery-photos page" >
<div th:unless="${#lists.isEmpty(photos.items)}" class="gallery-photos page">
<div th:each="photo : ${photos.items}" class="gallery-photo">
<span th:with="img = ${ not #strings.isEmpty(photo.spec.cover) ? photo.spec.cover : photo.spec.url}"
th:href="${img}" data-fancybox="gallery" class="fancybox"
th:data-thumb="${img}">
<img class="photo-img" loading='lazy' th:src="${img}">
</span>
<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(photos.items)}">
<th:block th:replace="~{macro/tpl/content-none}"/>
<th:block th:replace="~{macro/tpl/content-none}" />
</th:block>
</div>
<!-- 分页 -->
<th:block th:if="${photos.hasPrevious()} or ${photos.hasNext()}">
<div id="p_pagination">
<div class="post-paging" th:if="${photos.hasNext()}">
@@ -46,19 +83,24 @@
</div>
</div>
</th:block>
</div>
</div>
</div>
<!-- 瀑布流自适应 -->
<script>
window.onresize = () => {
var galleryPhotos = document.querySelectorAll('.gallery-photos .gallery-photo');
if(galleryPhotos.length>0) {
waterfall('.gallery-photos');
}
};
window.onresize = () => {
const galleryPhotos = document.querySelectorAll('.gallery-photos .gallery-photo');
if (galleryPhotos.length > 0) {
waterfall('.gallery-photos');
}
};
</script>
<th:block th:replace="~{modules/footer-main}"/>
<th:block th:replace="~{modules/footer-main}" />
</div>
</th:block>
</html>