优化阅读体验、前台编辑、播放器等
This commit is contained in:
+18
-79
@@ -7,85 +7,24 @@
|
||||
<div class="page_main uk-width-2-3@m">
|
||||
<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 id="pjax-container" th:with="
|
||||
page = ${#lists.isEmpty(param.page) or #strings.isEmpty(param.page[0]) ? 1 : param.page[0]},
|
||||
tag = ${#lists.isEmpty(param.tag) ? null : param.tag[0]},
|
||||
groupParam = ${#lists.isEmpty(param.group) ? null : param.group[0]},
|
||||
requestTag = ${not #strings.isEmpty(tag) ? tag : groupParam}
|
||||
">
|
||||
<th:block th:if="${#strings.isEmpty(requestTag)}">
|
||||
<th:block th:with="photoPage = ${#lists.isEmpty(param.page) ? photos : photoFinder.list(page, photos.size)}">
|
||||
<th:block th:replace="~{macro/home-photos :: home-photos(${photoPage},${groups},null,null)}"></th:block>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
<!-- 分类导航 -->
|
||||
<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="${#lists.isEmpty(param.group) ? 'active' : ''}" class="cat-link">
|
||||
全部<span></span>
|
||||
</a>
|
||||
</li>
|
||||
<th:block th:each="group : ${groups}">
|
||||
<li>
|
||||
<!-- 修改:这里也改为 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:each="photo : ${photos.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(photos.items)}">
|
||||
<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()}">
|
||||
<a th:data="@{${photos.nextUrl}}" th:text="${theme.config.base_set.site_page}"></a>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:unless="${#strings.isEmpty(requestTag)}" th:each="photoGroup : ${groups}">
|
||||
<th:block th:if="${#strings.equals(requestTag, photoGroup.spec.displayName) or #strings.equals(requestTag, photoGroup.metadata.name)}"
|
||||
th:with="photoPage = ${photoFinder.list(page, photos.size, photoGroup.metadata.name)}">
|
||||
<th:block th:replace="~{macro/home-photos :: home-photos(${photoPage},${groups},${photoGroup.spec.displayName},${photoGroup.metadata.name})}"></th:block>
|
||||
</th:block>
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
<!-- 瀑布流自适应 -->
|
||||
@@ -103,4 +42,4 @@
|
||||
|
||||
</th:block>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user