github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化图库页面

This commit is contained in:
1152958806@qq.com 2023-10-09 21:06:53 +08:00
parent 81b2b1a349
commit 6b4d5a71c4
2 changed files with 38 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
templates/album.html
View File

@ -22,7 +22,7 @@
<div class="card-album"> <div class="card-album">
<th:block th:each="group : ${photoFinder.groupBy()}"> <th:block th:each="group : ${photoFinder.groupBy()}">
<div class="card" th:onclick="go([[${group.metadata.name}]])"> <div class="card" th:onclick="pjax.loadUrl([['/photos?group='+${group.metadata.name}]])">
<img class="card_cover" <img class="card_cover"
th:src="${isLazyload ? loadingImg : #annotations.get(group, 'cover')}" th:src="${isLazyload ? loadingImg : #annotations.get(group, 'cover')}"
th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}" th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
@ -50,17 +50,12 @@
<figcaption> <figcaption>
<div class="gallery-group-name">[[${group.spec.displayName}]]</div> <div class="gallery-group-name">[[${group.spec.displayName}]]</div>
<p>[[${#annotations.get(group, 'description')}]]</p><a target="_blank" <p>[[${#annotations.get(group, 'description')}]]</p><a target="_blank"
rel="noopener" th:onclick="go([[${group.metadata.name}]])"></a> rel="noopener" th:onclick="pjax.loadUrl([['/photos?group='+${group.metadata.name}]])"></a>
</figcaption> </figcaption>
</figure> </figure>
</th:block> </th:block>
</div> </div>
</div> </div>
<script>
const go = (photo_group_name) => {
window.location.href = '/photos?photo_group_name=' + photo_group_name
}
</script>
<style> <style>
.gallery-groups { .gallery-groups {
box-shadow: var(--heo-shadow-border); box-shadow: var(--heo-shadow-border);

46
templates/photos.html
View File

@ -13,18 +13,21 @@
<div id="page"> <div id="page">
<th:block th:if="${#strings.equals(theme.config.photos.photosStyle, 'default')}"> <th:block th:if="${#strings.equals(theme.config.photos.photosStyle, 'default')}">
<th:block th:each="group : ${photoFinder.groupBy()}"> <th:block th:each="group : ${photoFinder.groupBy()}">
<th:block th:if="${#strings.equals(group.metadata.name, param.photo_group_name)}" th:with="description = ${#annotations.get(group, 'description')}, <th:block
th:if="${#strings.equals(group.metadata.name, param.group) && not #strings.isEmpty(param.group)}"
th:with="description = ${#annotations.get(group, 'description')},
background = ${#annotations.get(group, 'background')}"> background = ${#annotations.get(group, 'background')}">
<div class="author-content author-content-item essayPage single" <div class="author-content author-content-item essayPage single"
th:style="'background:url('+${background}+') left 28% / cover no-repeat !important;'"> th:style="'background:url('+${background}+') left 28% / cover no-repeat !important;'">
<div class="card-content"> <div class="card-content">
<div class="author-content-item-tips" text="相册集"></div> <div class="author-content-item-tips">相册集</div>
<span class="author-content-item-title" th:text="${group.spec.displayName}"></span> <span class="author-content-item-title" th:text="${group.spec.displayName}"></span>
<div class="content-bottom"> <div class="content-bottom">
<div class="tips" th:text="${description}"></div> <div class="tips" th:text="${description}"></div>
</div> </div>
<div class="banner-button-group"> <div class="banner-button-group">
<a class="banner-button" target="_blank" th:attr="onclick='pjax.loadUrl(\''+ ${theme.config.photos.topLink} +'\')'"> <a class="banner-button" target="_blank"
th:attr="onclick='pjax.loadUrl(\''+ ${theme.config.photos.topLink} +'\')'">
<i class="haofont hao-icon-circle-arrow-right"></i> <i class="haofont hao-icon-circle-arrow-right"></i>
<span class="banner-button-text" th:text="返回"></span> <span class="banner-button-text" th:text="返回"></span>
</a> </a>
@ -33,13 +36,33 @@
</div> </div>
</th:block> </th:block>
</th:block> </th:block>
<th:block th:if="${#strings.isEmpty(param.group)}"
th:with="background = ${theme.config.photos.backgroundImg}">
<div class="author-content author-content-item essayPage single"
th:style="'background:url('+${background}+') left 28% / cover no-repeat !important;'">
<div class="card-content">
<div class="author-content-item-tips">相册集</div>
<span class="author-content-item-title">全部</span>
<div class="content-bottom">
<div class="tips"></div>
</div>
<div class="banner-button-group">
<a class="banner-button" target="_blank"
th:attr="onclick='pjax.loadUrl(\''+ ${theme.config.photos.topLink} +'\')'">
<i class="haofont hao-icon-circle-arrow-right"></i>
<span class="banner-button-text" th:text="返回"></span>
</a>
</div>
</div>
</div>
</th:block>
<div id="article-container"> <div id="article-container">
<section class="page-1 loadings"> <section class="page-1 loadings">
<div class="type-gallery "> <div class="type-gallery ">
<div class="gallery"> <div class="gallery">
<div class="fj-gallery-item" <div class="fj-gallery-item" th:each="photo : ${photos.items}">
th:each="photo : ${photoFinder.listBy(param.photo_group_name)}"> <div th:if="${theme.config.photos.tagEnable}" class="tag-address">
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div> [[${photo.spec.displayName}]]</div>
<img th:src="${photo.spec.url}" th:alt="${photo.spec.description}" <img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
th:title="${photo.spec.description}"> th:title="${photo.spec.description}">
@ -52,17 +75,20 @@
<div class="gallery-groups" th:if="${#strings.equals(theme.config.photos.photosStyle, 'one')}"> <div class="gallery-groups" th:if="${#strings.equals(theme.config.photos.photosStyle, 'one')}">
<th:block th:each="group : ${photoFinder.groupBy()}"> <th:block th:each="group : ${photoFinder.groupBy()}">
<h1 style="margin: 8px 0px 20px" th:if="${#strings.equals(group.metadata.name, param.photo_group_name)}"> <h1 style="margin: 8px 0px 20px" th:if="${#strings.equals(group.metadata.name, param.group) && not #strings.isEmpty(param.group) }">
[[${group.spec.displayName}]] [[${group.spec.displayName}]]
</h1> </h1>
<h1 style="margin: 8px 0px 20px" th:if="${#strings.isEmpty(param.group) }">
全部
</h1>
</th:block> </th:block>
<div id="article-container"> <div id="article-container">
<section class="page-1 loadings"> <section class="page-1 loadings">
<div class="type-gallery "> <div class="type-gallery ">
<div class="gallery"> <div class="gallery">
<div class="fj-gallery-item" <div class="fj-gallery-item" th:each="photo : ${photos.items}">
th:each="photo : ${photoFinder.listBy(param.photo_group_name)}"> <div th:if="${theme.config.photos.tagEnable}" class="tag-address">
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div> [[${photo.spec.displayName}]]</div>
<img th:src="${photo.spec.url}" th:alt="${photo.spec.description}" <img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
th:title="${photo.spec.description}"> th:title="${photo.spec.description}">