优化阅读体验、前台编辑、播放器等

templates/macro/home-photos.html

@@ -0,0 +1,87 @@
+<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:if="${photoPage.hasNext()}"
+                        th:with="_page = ${photoPage.page+1}">
+                        <a th:if="${#strings.isEmpty(tag)}"
+                            th:data="@{/photos(page=${_page})}"
+                            th:text="${theme.config.base_set.site_page}"></a>
+                        <a th:unless="${#strings.isEmpty(tag)}"
+                            th:data="@{/photos(tag=${tag},page=${_page})}"
+                            th:text="${theme.config.base_set.site_page}"></a>
+                    </div>
+                </div>
+            </th:block>
+
+        </div>
+    </div>
+</th:block>