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

Merge pull request #514 from chengzhongxue/main 

优化瞬间页面，优化图库页面
This commit is contained in:
困困鱼 2023-10-09 22:59:54 +08:00 committed by GitHub
parent 0db71a0b4d 6b4d5a71c4
commit 4b06bfc92a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 90 additions and 47 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">
<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"
th:src="${isLazyload ? loadingImg : #annotations.get(group, 'cover')}"
th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
@ -50,17 +50,12 @@
<figcaption>
<div class="gallery-group-name">[[${group.spec.displayName}]]</div>
<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>
</figure>
</th:block>
</div>
</div>
<script>
const go = (photo_group_name) => {
window.location.href = '/photos?photo_group_name=' + photo_group_name
}
</script>
<style>
.gallery-groups {
box-shadow: var(--heo-shadow-border);

22
templates/assets/zhheo/zhheoblog.css
View File

@ -14527,12 +14527,32 @@ div#heo-footer-bar .footer-bar-description {
width: 100%;
line-height: 1.38;
border-radius: 12px;
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
text-align: justify;
}
#bber .bber-content .datacont p {
margin-bottom: 0.5rem;
}
/* 标签 */
#bber .bber-content .datacont a.tag {
background-image: none!important;
background-color: #f2f2f2!important;
color: #999!important;
border-radius: 4px;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 2px 5px;
}
#bber .bber-content .datacont a.tag:before {
content: "#";
}
/* 设备 */
#bber > section > ul > li > div .datafrom {
order: 2;

58
templates/moments.html
View File

@ -8,7 +8,7 @@
<!-- 头部导航栏 -->
<header class="not-top-img" id="page-header">
<nav th:replace="~{modules/nav :: nav(title = ${title})}"></nav>
<nav th:replace="~{modules/nav :: nav(title = '瞬间')}"></nav>
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
@ -17,32 +17,34 @@
bigTitle = ${theme.config.moment.bigTitle},
detail = ${theme.config.moment.detail},
buttonUrl = ${theme.config.moment.buttonUrl},
buttonTitle = ${theme.config.moment.buttonTitle})}" ></div>
buttonTitle = ${theme.config.moment.buttonTitle})}"></div>
<div id="bber">
<section class="timeline page-1">
<ul class="list" id="waterfall" th:with="moments = ${momentFinder.list(1, 30)}">
<ul class="list" id="waterfall">
<li class="item" th:each="moment : ${moments.items}"
th:with="content=${moment.spec.content}">
<div class="bber-content">
<p class="datacont" th:if="${not #strings.isEmpty(content.html)}"
th:utext="${content.html}"></p>
<div class="datacont" th:if="${not #strings.isEmpty(content.html)}"
th:utext="${content.html}">
</div>
<th:block th:if="${not #lists.isEmpty(content.medium)}">
<div class="bber-container-img"
th:if="${#strings.contains(content.medium,'PHOTO')}">
<img th:each="momentItem : ${content.medium}"
th:if="${momentItem.type.name == 'PHOTO'}"
th:src="${isLazyload ? loadingImg : momentItem.url}"
th:data-lazy-src="${ isLazyload ? momentItem.url : ''}" title="瞬间配图">
<div class="bber-content-noimg"></div>
<div class="bber-content-noimg"></div>
<div class="bber-content-noimg"></div>
</div>
<div th:each="momentItem : ${content.medium}" class="bber-music"
th:if="${momentItem.type.name == 'VIDEO'}">
<video th:src="${momentItem.url}"></video>
</div>
</th:block>
</div>
<th:block th:if="${not #lists.isEmpty(content.medium)}">
<div class="bber-container-img" th:if="${#strings.contains(content.medium,'PHOTO')}">
<img th:each="momentItem : ${content.medium}"
th:if="${momentItem.type.name == 'PHOTO'}"
th:src="${isLazyload ? loadingImg : momentItem.url}"
th:data-lazy-src="${ isLazyload ? momentItem.url : ''}"
title="瞬间配图">
<div class="bber-content-noimg"></div>
<div class="bber-content-noimg"></div>
<div class="bber-content-noimg"></div>
</div>
<div th:each="momentItem : ${content.medium}" class="bber-music" th:if="${momentItem.type.name == 'VIDEO'}">
<video th:src="${momentItem.url}"></video>
</div>
</th:block>
<hr>
<div class="bber-bottom">
<div class="bber-info">
@ -51,9 +53,9 @@
th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}"></time>
</div>
</div>
<a class="bber-reply"
th:onclick="rightMenuCommentText([[${content.html}]]);"
data-pjax-state=""> <i class="haofont hao-icon-message" style="font-size: 17px;"></i>
<a class="bber-reply" th:onclick="rightMenuCommentText([[${content.html}]]);"
data-pjax-state=""> <i class="haofont hao-icon-message"
style="font-size: 17px;"></i>
</a>
</div>
</li>
@ -63,13 +65,12 @@
</div>
<div id="bber-tips" style="color: var(--heo-secondtext);">- 只展示最近30条短文 -</div>
<script>heo.reflashEssayWaterFall();</script>
<hr/>
<hr />
<!--/* 评论组件 */-->
<th:block
th:replace="~{modules/comment :: comment(group = 'content.halo.run',
<th:block th:replace="~{modules/comment :: comment(group = 'content.halo.run',
kind = 'SinglePage',
name = 'moments',
allowComment = true)}"/>
allowComment = true)}" />
</div>
@ -78,7 +79,8 @@
<!-- 底部 -->
<footer th:replace="~{modules/footer :: footer}"></footer>
<!-- 卡片顶部气泡效果 -->
<script th:if="${theme.config.other.bubbleEnable}" async data-pjax th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
<script th:if="${theme.config.other.bubbleEnable}" async data-pjax
th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
</div>
</th:block>

48
templates/photos.html
View File

@ -7,24 +7,27 @@
<div class="page" id="body-wrap">
<!-- 头部导航栏 -->
<header class="not-top-img" id="page-header">
<nav th:replace="~{modules/nav :: nav(title = ${title})}"></nav>
<nav th:replace="~{modules/nav :: nav(title = '图库')}"></nav>
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<th:block th:if="${#strings.equals(theme.config.photos.photosStyle, 'default')}">
<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')}">
<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" text="相册集"></div>
<div class="author-content-item-tips">相册集</div>
<span class="author-content-item-title" th:text="${group.spec.displayName}"></span>
<div class="content-bottom">
<div class="tips" th:text="${description}"></div>
</div>
<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>
<span class="banner-button-text" th:text="返回"></span>
</a>
@ -33,13 +36,33 @@
</div>
</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">
<section class="page-1 loadings">
<div class="type-gallery ">
<div class="gallery">
<div class="fj-gallery-item"
th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div>
<div class="fj-gallery-item" th:each="photo : ${photos.items}">
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">
[[${photo.spec.displayName}]]</div>
<img th:src="${photo.spec.url}" th:alt="${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')}">
<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}]]
</h1>
<h1 style="margin: 8px 0px 20px" th:if="${#strings.isEmpty(param.group) }">
全部
</h1>
</th:block>
<div id="article-container">
<section class="page-1 loadings">
<div class="type-gallery ">
<div class="gallery">
<div class="fj-gallery-item"
th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div>
<div class="fj-gallery-item" th:each="photo : ${photos.items}">
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">
[[${photo.spec.displayName}]]</div>
<img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
th:title="${photo.spec.description}">