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

Merge pull request #410 from chengzhongxue/main 

文章阅读建议添加样式,自定义的文章右上角的推荐文章修改成可选择文章,图库增加样式
This commit is contained in:
困困鱼 2023-08-12 01:48:40 +08:00 committed by GitHub
parent 66d1ed345c a1d71f2079
commit 709945de16
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 476 additions and 769 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
settings.yaml
View File

@ -373,17 +373,13 @@ spec:
name: recommendPostCustom
label: 自定义文章
help: 建议设置六篇文章
value: [ ]
max: 6
children:
- $formkit: url
name: url
label: 链接
- $formkit: text
name: title
label: 标题
- $formkit: attachment
name: cover
label: 封面地址
- $formkit: postSelect
name: post
label: 文章
value: ""
validation: required
- group: layout
label: 布局
@ -1371,11 +1367,15 @@ spec:
label: 声明内容
placeholder: '本文是原创文章，采用 <a target="_blank" href="/cc">CC BY-NC-ND 4.0</a> 协议，完整转载请注明来自 <a href="/" target="_blank" >程序员小航</a>'
help: 支持 HTML 语法
- $formkit: number
- $formkit: select
name: recommendQuantity
label: 阅读建议
value: 4
help: 文章数量
value: six
options:
- value: two
label: 两篇
- value: six
label: 六篇
- group: categories
label: 分类
@ -1507,25 +1507,39 @@ spec:
- group: photos
label: 图库
formSchema:
- $formkit: select
name: photosStyle
id: photosStyle
key: photosStyle
label: 样式
value: default
options:
- value: default
label: 默认
- value: one
label: 样式一
- $formkit: attachment
if: $get(photosStyle).value == 'default'
name: backgroundImg
label: 背景图
value: https://liuzhihang.com/upload/moments.png
placeholder: 请输入图片地址
- $formkit: text
if: $get(photosStyle).value == 'default'
name: smallTitle
key: smallTitle
label: 小标题
value: 相册集
- $formkit: text
name: bigTitle
key: bigTitle
label: 大标题
value: 这里是我的相册集哦😯
- $formkit: text
if: $get(photosStyle).value == 'default'
name: detail
label: 描述
value: 每一张照片都是一次美好的记忆。
- group: todo
label: 待办清单
formSchema:
@ -1944,7 +1958,6 @@ spec:
value: <div class="author-content-item-tips">心路历程</div> <span class="author-content-item-title">为什么建站？</span> <br>创建这个站的时候，想要就是能够有一个自己能够<b>积累知识、积累兴趣</b>的地方。和他人分享，会让这些成为积累和沉淀。如果能够帮助到更多的人，帮助更多人解决问题，那一定是非常棒的事情。<br> 分享这件事我从很早就开始了，起初做的微信公众号，现在做的网站。因为我比较喜欢研究数码和软件，想要探究在互联网上的事物是如何被创造和发展。网络给我带来了非常多的知识和眼界，我也想力所能及的分享一些我生活的琐碎知识。<br>与大多数垂直类的技术博客不同，这里的种类会非常的繁杂，有<b>技能的教程干货</b>、有<b>生活上的吐槽和妙招</b>、有<b>话题上的思考和想法</b>。一般我研究什么、发现了什么都会分享在这里。<br> 这些就是创造这个小站的本意，<b>也是我分享生活的方式</b>。有幸能和你相遇在这里，相信我们能共同留下一段美好记忆。</p>
help: 支持 HTML 语法
- group: aboutReward
label: 关于（打赏）
formSchema:

39
templates/album.html
View File

@ -12,19 +12,18 @@
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<div id="album">
<th:div th:replace="~{macro/author-content :: author-content(background = ${theme.config.photos.backgroundImg},
<div id="album" th:if="${#strings.equals(theme.config.photos.photosStyle, 'default')}">
<div th:replace="~{macro/author-content :: author-content(background = ${theme.config.photos.backgroundImg},
smallTitle = ${theme.config.photos.smallTitle},
bigTitle = ${theme.config.photos.bigTitle},
detail = ${theme.config.photos.detail},
buttonUrl = '',
buttonTitle = '')}" />
buttonTitle = '')}"></div>
<div class="card-album">
<th:block th:each="group : ${photoFinder.groupBy()}">
<div class="card" th:onclick="go([[${group.metadata.name}]])">
<img class="card_cover entered loaded"
th:src="${#annotations.get(group, 'cover')}">
<img class="card_cover entered loaded" th:src="${#annotations.get(group, 'cover')}">
<div class="card__content">
<p class="card__category" th:text="${group.spec.displayName}"></p>
<h3 class="card__heading" th:text="${#annotations.get(group, 'description')}"></h3>
@ -36,12 +35,38 @@
</th:block>
</div>
</div>
<div class="gallery-groups" th:if="${#strings.equals(theme.config.photos.photosStyle, 'one')}">
<h2 style="text-align:center;">[[${theme.config.photos.bigTitle}]]</h2>
<div class="gallery-group-main">
<th:block th:each="group : ${photoFinder.groupBy()}">
<figure class="gallery-group"><img class="gallery-group-img no-lightbox"
th:src="${#annotations.get(group, 'cover')}" alt="Group Image Gallery">
<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>
</figcaption>
</figure>
</th:block>
</div>
</div>
<script>
const go = (photo_group_name)=>{
window.location.href='/photos?photo_group_name='+photo_group_name
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);
padding: 1rem 2rem;
border-radius: 12px;
background: var(--heo-card-bg);
border: var(--style-border);
width: 100%;
align-self: flex-start;
animation: slide-in 0.6s 0.1s backwards;
}
:root {
--album-background-dark: #2d3548;
--album-text-light: rgba(255, 255, 255, 0.6);

69
templates/assets/css/related-posts-six.css Normal file
View File

@ -0,0 +1,69 @@
/* 相关推荐 */
.relatedPosts-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.relatedPosts>.relatedPosts-list>div {
background: #363636;
transition: 0.3s;
cursor: pointer;
overflow: hidden;
}
.relatedPosts>.relatedPosts-list>div {
position: relative;
display: inline-block;
overflow: hidden;
margin: 3px;
width: calc(33.333% - 6px);
height: 200px;
/* background: var(--heo-main); */
vertical-align: bottom;
}
.relatedPosts>.relatedPosts-list .cover {
width: 100%;
height: 100%;
opacity: 0.4;
transition: all 0.6s ease 0s;
object-fit: cover;
}
.relatedPosts>.relatedPosts-list .content {
position: absolute;
top: 50%;
padding: 0px 1rem;
width: 100%;
transform: translate(0px, -50%);
}
.relatedPosts>.relatedPosts-list .content .date {
color: var(--heo-fontcolor);
}
.relatedPosts>.relatedPosts-list .content .date {
color: var(--light-grey);
font-size: 90%;
}
.relatedPosts>.relatedPosts-list .content .title {
color: var(--white);
-webkit-line-clamp: 2;
}
.relatedPosts>.relatedPosts-list .content .title {
color: var(--heo-fontcolor);
font-weight: bold;
line-height: 1.5;
-webkit-line-clamp: 4;
font-size: 0.9rem;
text-align: center;
}
.relatedPosts > .relatedPosts-list > div:hover .cover {
opacity: 0.8;
transform: scale(1.1);
}

91
templates/assets/css/related-posts-two.css Normal file
View File

@ -0,0 +1,91 @@
.relatedPosts-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
}
.relatedPosts>.relatedPosts-list>div {
position: relative;
display: inline-block;
overflow: hidden;
margin: 3px;
width: calc(33.333% - 6px);
height: 200px;
background: var(--heo-main);
vertical-align: bottom;
}
.relatedPosts>.relatedPosts-list>div {
background: var(--heo-secondbg);
border: var(--style-border);
transition: .3s;
cursor: pointer;
overflow: hidden;
width: 100%;
margin-bottom: 8px
}
.relatedPosts>.relatedPosts-list>div:hover {
background: var(--heo-main)
}
@media screen and (max-width: 768px) {
.relatedPosts {
display: none
}
.relatedPosts>.relatedPosts-list>div {
border-radius: 4px
}
}
.relatedPosts>.relatedPosts-list>div:hover a .title {
color: var(--heo-white)
}
.relatedPosts>.relatedPosts-list .content .title {
color: var(--heo-white);
-webkit-line-clamp: 2;
margin-right: auto;
}
.relatedPosts>.relatedPosts-list .content .title {
color: var(--heo-fontcolor);
font-weight: 700;
line-height: 1.5;
-webkit-line-clamp: 4;
font-size: .9rem;
text-align: left;
overflow: hidden
}
.relatedPosts>.relatedPosts-list .content {
padding: 0 1rem;
width: 100%;
}
.is-center {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: row;
align-items: center;
}
.relatedPosts>.relatedPosts-list .content .date {
color: var(--heo-fontcolor);
display: none
}
.relatedPosts>.relatedPosts-list .cover {
width: 360px;
min-width: 45%;
height: 100%;
transition: all .6s ease 0s;
object-fit: cover;
filter: brightness(.9);
max-width: 45%;
}

16
templates/assets/libs/aplayer/music.css
View File

@ -34,21 +34,21 @@ body {
display: block;
}
body#htmlType-music .music-mask{
body[data-type=music] .music-mask{
display: none;
}
body#htmlType-music #web_bg {
body[data-type=music] #web_bg {
display: none;
}
body#htmlType-music #page {
body[data-type=music] #page {
min-height: calc(0px)
}
@media screen and (max-width: 768px) {
body#htmlType-music .page .layout#content-inner {
body[data-type=music] .page .layout#content-inner {
background: 0 0!important;
}
body#htmlType-music #page-header.not-top-img:not(.nav-fixed) #nav{
body[data-type=music] #page-header.not-top-img:not(.nav-fixed) #nav{
background: 0 0!important;
}
}
@ -60,8 +60,8 @@ body#htmlType-music #page {
}
body#htmlType-music #footer,
body#htmlType-music #nav-music {
body[data-type=music] #footer,
body[data-type=music] #nav-music {
display: none;
}
@ -574,7 +574,7 @@ body#htmlType-music #nav-music {
right: 25px;
top: -90px
}
body#htmlType-music .music-mask{
body[data-type=music] .music-mask{
position: fixed;
z-index: 10;
display: none;

0
templates/assets/zhheo/heo-fcircle3.css → templates/assets/libs/fcircle/heo-fcircle3.css
View File

0
templates/assets/zhheo/heo-fcircle3mini.js → templates/assets/libs/fcircle/heo-fcircle3mini.js
View File

0
templates/assets/zhheo/commentBarrage.css → templates/assets/libs/twikoo/commentBarrage.css
View File

0
templates/assets/zhheo/commentBarrage.min.css → templates/assets/libs/twikoo/commentBarrage.min.css vendored
View File

10
templates/assets/zhheo/blogex.js
View File

@ -637,9 +637,17 @@ function checkUrlAndAddHideBanner() {
}
}
function setBodyDataType(){
var body = document.body;
var att = document.createAttribute("data-type");
att.value = GLOBAL_CONFIG.htmlType;
body.setAttributeNode(att);
}
function initBlog() {
heo.initIndexEssay(),
checkUrlAndAddHideBanner()
checkUrlAndAddHideBanner(),
setBodyDataType()
}
// 如果当前页有评论就执行函数

166
templates/assets/zhheo/commentBarrage.js
View File

@ -1,166 +0,0 @@
var commentBarrageConfig = {
//同时最多显示弹幕数
maxBarrage: 1,
//弹幕显示间隔时间ms
barrageTime: 4000,
//twikoo部署地址腾讯云的为环境ID
twikooUrl: "xxxx",
//token获取见上方
accessToken: "xxxx",
pageUrl: window.location.pathname,
barrageTimer: [],
barrageList: [],
barrageIndex: 0,
dom: document.querySelector('.comment-barrage'),
}
var commentInterval = null;
var hoverOnCommentBarrage = false;
$(".comment-barrage").hover(function () {
hoverOnCommentBarrage = true;
//console.log("热评悬浮");
}, function () {
hoverOnCommentBarrage = false;
//console.log("停止悬浮");
});
function initCommentBarrage() {
//console.log("开始创建热评")
var data = JSON.stringify({
"event": "COMMENT_GET",
"commentBarrageConfig.accessToken": commentBarrageConfig.accessToken,
"url": commentBarrageConfig.pageUrl
});
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data);
commentBarrageConfig.dom.innerHTML = '';
}
});
xhr.open("POST", commentBarrageConfig.twikooUrl);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(data);
clearInterval(commentInterval);
commentInterval = null;
commentInterval = setInterval(() => {
if (commentBarrageConfig.barrageList.length && !hoverOnCommentBarrage) {
popCommentBarrage(commentBarrageConfig.barrageList[commentBarrageConfig.barrageIndex]);
commentBarrageConfig.barrageIndex += 1;
commentBarrageConfig.barrageIndex %= commentBarrageConfig.barrageList.length;
}
if ((commentBarrageConfig.barrageTimer.length > (commentBarrageConfig.barrageList.length > commentBarrageConfig.maxBarrage ? commentBarrageConfig.maxBarrage : commentBarrageConfig.barrageList.length)) && !hoverOnCommentBarrage) {
removeCommentBarrage(commentBarrageConfig.barrageTimer.shift())
}
}, commentBarrageConfig.barrageTime)
}
function commentLinkFilter(data) {
data.sort((a, b) => {
return a.created - b.created;
})
let newData = [];
data.forEach(item => {
newData.push(...getCommentReplies(item));
});
return newData;
}
function getCommentReplies(item) {
if (item.replies) {
let replies = [item];
item.replies.forEach(item => {
replies.push(...getCommentReplies(item));
})
return replies;
} else {
return [];
}
}
function popCommentBarrage(data) {
let barrage = document.createElement('div');
let width = commentBarrageConfig.dom.clientWidth;
let height = commentBarrageConfig.dom.clientHeight;
barrage.className = 'comment-barrage-item'
barrage.innerHTML = `
<div class="barrageHead">
<a class="barrageTitle" href="#post-comment">热评</a>
<div class="barrageNick">${data.nick}</div>
<img class="barrageAvatar" src="https://cravatar.cn/avatar/${data.mailMd5}"/>
<a class="comment-barrage-close" href="javascript:heo.switchCommentBarrage()"><i class="haofont hao-icon-xmark"></i></a>
</div>
<a class="barrageContent" href="#${data.id}">${data.comment}</a>
`
commentBarrageConfig.barrageTimer.push(barrage);
commentBarrageConfig.dom.append(barrage);
}
function removeCommentBarrage(barrage) {
barrage.className = 'comment-barrage-item out';
setTimeout(() => {
commentBarrageConfig.dom.removeChild(barrage);
}, 1000)
}
// 自动隐藏
document.addEventListener('scroll', btf.throttle(function () {
//滚动条高度+视窗高度 = 可见区域底部高度
var visibleBottom = window.scrollY + document.documentElement.clientHeight;
//可见区域顶部高度
var visibleTop = window.scrollY;
// 获取翻页按钮容器
var pagination = document.querySelector('.comment-barrage');
// 获取位置监测容器，此处采用评论区
var eventlistner = document.getElementById('post-comment');
if (eventlistner && pagination) {
var centerY = eventlistner.offsetTop + (eventlistner.offsetHeight / 2);
if (document.body.clientWidth > 768) {
if (centerY > visibleBottom) {
pagination.style.bottom = '0';
} else {
pagination.style.bottom = '-200px';
}
}
}
}, 200))
// 自动隐藏
// const commentEntryCallback = (entries) => {
// const commentBarrage = document.querySelector(".comment-barrage");
// const postComment = document.getElementById("post-comment");
// entries.forEach(entry => {
// if (postComment && commentBarrage && document.body.clientWidth > 768) {
// commentBarrage.style.bottom = entry.isIntersecting ? "-200px" : "0";
// }
// });
// };
// 创建IntersectionObserver实例
initCommentBarrage();
if (localStorage.getItem('commentBarrageSwitch') !== 'false') {
$(".comment-barrage").show();
$(".menu-commentBarrage-text").text("关闭热评");
document.querySelector("#consoleCommentBarrage").classList.add("on");
} else {
$(".comment-barrage").hide();
$(".menu-commentBarrage-text").text("显示热评");
document.querySelector("#consoleCommentBarrage").classList.remove("on");
}
document.addEventListener('pjax:send', function () {
clearInterval(commentInterval);
});

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

@ -313,22 +313,6 @@ template {
white-space: nowrap;
}
/*#aside-content .aside-list > .aside-list-item .content > .comment,*/
/*#aside-content .aside-list > .aside-list-item .content > .name,*/
/*#aside-content .aside-list > .aside-list-item .content > .title,*/
/*#error-wrap .error-content .error-info .error_subtitle,*/
/*#post-info .post-title,*/
/*#recent-posts > .recent-post-item > .recent-post-info > .article-title,*/
/*#recent-posts > .recent-post-item > .recent-post-info > .content,*/
/*.article-sort-item-title,*/
/*.limit-more-line,*/
/*.relatedPosts > .relatedPosts-list .content .title,*/
/*figure.gallery-group .gallery-group-name,*/
/*figure.gallery-group p {*/
/* display: -webkit-box;*/
/* overflow: hidden;*/
/* -webkit-box-orient: vertical;*/
/*}*/
#article-container h1::before,
#article-container h2::before,
@ -1068,119 +1052,6 @@ blockquote footer cite::before {
padding: 0px 0.3em;
content: "—";
}
/*#article-container code,*/
/*#article-container pre {*/
/* font-size: var(--global-font-size);*/
/* font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important;*/
/*}*/
/*#article-container code {*/
/* padding: 0.1rem 0.2rem;*/
/* background: rgba(27, 31, 35, 0.05);*/
/* color: rgb(244, 116, 102);*/
/*}*/
/*#article-container pre {*/
/* padding: 10px 20px;*/
/*}*/
/*#article-container pre code {*/
/* padding: 0px;*/
/* background: 0px 0px;*/
/* color: var(--hl-color);*/
/* text-shadow: none;*/
/*}*/
/*#article-container figure.highlight {*/
/* position: relative;*/
/*}*/
/*#article-container figure.highlight pre {*/
/* margin: 0px;*/
/* padding: 8px 0px;*/
/* border: none;*/
/*}*/
/*#article-container figure.highlight .caption,*/
/*#article-container figure.highlight figcaption {*/
/* padding: 0.3rem 0px 0.1rem 0.7rem;*/
/* font-size: var(--global-font-size);*/
/* line-height: 1em;*/
/*}*/
/*#article-container figure.highlight .caption a,*/
/*#article-container figure.highlight figcaption a {*/
/* float: right;*/
/* padding-right: 10px;*/
/* color: var(--hl-color);*/
/*}*/
/*#article-container figure.highlight .caption a:hover,*/
/*#article-container figure.highlight figcaption a:hover {*/
/* border-bottom-color: var(--hl-color);*/
/*}*/
/*#article-container .highlight-tools {*/
/* position: relative;*/
/* display: flex;*/
/* -webkit-box-align: center;*/
/* align-items: center;*/
/* overflow: hidden;*/
/* min-height: 1.2rem;*/
/* height: 2.15em;*/
/* background: var(--hltools-bg);*/
/* color: var(--hltools-color);*/
/* font-size: var(--global-font-size);*/
/*}*/
/*#article-container .highlight-tools.closed + table {*/
/* display: none;*/
/*}*/
/*#article-container .highlight-tools .expand {*/
/* position: absolute;*/
/* padding: 0.4rem 0.7rem;*/
/* cursor: pointer;*/
/* transition: transform 0.3s ease 0s;*/
/*}*/
/*#article-container .highlight-tools .expand + .code-lang {*/
/* left: 1.7rem;*/
/*}*/
/*#article-container .highlight-tools .expand.closed {*/
/* transition: all 0.3s ease 0s;*/
/* transform: rotate(-90deg) !important;*/
/*}*/
/*#article-container .highlight-tools .code-lang {*/
/* position: absolute;*/
/* left: 0.7rem;*/
/* text-transform: uppercase;*/
/* font-weight: 700;*/
/* font-size: 1.15em;*/
/* user-select: none;*/
/*}*/
/*#article-container .highlight-tools .copy-notice {*/
/* position: absolute;*/
/* right: 1.7rem;*/
/* opacity: 0;*/
/* transition: opacity 0.4s ease 0s;*/
/*}*/
/*#article-container .highlight-tools .copy-button {*/
/* position: absolute;*/
/* right: 0.7rem;*/
/* cursor: pointer;*/
/* transition: color 0.2s ease 0s;*/
/*}*/
/*#article-container .highlight-tools .copy-button:hover {*/
/* color: rgb(48, 122, 246);*/
/*}*/
#article-container .gutter {
user-select: none;
}
@ -1192,40 +1063,6 @@ blockquote footer cite::before {
#article-container .gist table td {
border: none;
}
/* 代码块增加边框 */
#article-container pre {
/*border: var(--style-border-always);*/
}
/*#article-container .code-expand-btn {*/
/* position: absolute;*/
/* bottom: 0px;*/
/* z-index: 10;*/
/* width: 100%;*/
/* background: var(--hlexpand-bg);*/
/* text-align: center;*/
/* font-size: var(--global-font-size);*/
/* cursor: pointer;*/
/*}*/
/*#article-container .code-expand-btn i {*/
/* padding: 0.3rem 0px;*/
/* color: var(--hlnumber-color);*/
/* animation: 1.2s ease 0s infinite normal none running code-expand-key;*/
/*}*/
/*#article-container .code-expand-btn.expand-done {*/
/* display: none !important;*/
/*}*/
/*#article-container .code-expand-btn:not(.expand-done) ~ pre,*/
/*#article-container .code-expand-btn:not(.expand-done) ~ table {*/
/* overflow: hidden;*/
/* height: 400px;*/
/*}*/
@-webkit-keyframes code-expand-key {
0% {
opacity: 0.6;
@ -3615,21 +3452,9 @@ ul {
font-size: 1.43em;
}
.relatedPosts > .relatedPosts-list > div {
position: relative;
display: inline-block;
overflow: hidden;
margin: 3px;
width: calc(33.333% - 6px);
height: 200px;
background: var(--heo-main);
vertical-align: bottom;
}
.relatedPosts > .relatedPosts-list > div:hover .cover {
opacity: 0.8;
transform: scale(1.1);
}
@media screen and (max-width: 768px) {
.relatedPosts > .relatedPosts-list > div {
@ -3645,31 +3470,6 @@ ul {
}
}
.relatedPosts > .relatedPosts-list .cover {
width: 100%;
height: 100%;
opacity: 0.4;
transition: all 0.6s ease 0s;
object-fit: cover;
}
.relatedPosts > .relatedPosts-list .content {
position: absolute;
top: 50%;
padding: 0px 1rem;
width: 100%;
transform: translate(0px, -50%);
}
.relatedPosts > .relatedPosts-list .content .date {
color: var(--light-grey);
font-size: 90%;
}
.relatedPosts > .relatedPosts-list .content .title {
color: var(--white);
-webkit-line-clamp: 2;
}
.post-reward {
position: relative;
@ -4265,108 +4065,165 @@ mjx-container[jax="CHTML"][display="true"] {
background: rgb(92, 184, 92);
}
.gallery-group {
width: calc(33.33% - 8px) !important;
}
figure.gallery-group {
position: relative;
float: left;
overflow: hidden;
margin: 0.3rem 0.2rem;
width: calc(50% - 0.4rem);
margin: 6px 4px;
width: calc(50% - 8px);
height: 250px;
border-radius: 5px;
background: rgb(0, 0, 0);
transform: translate3d(0px, 0px, 0px);
border-radius: 8px;
background: #000;
-webkit-transform: translate3d(0, 0, 0)
}
@media screen and (max-width: 600px) {
figure.gallery-group {
width: calc(100% - 0.4rem);
width: calc(100% - 8px)
}
}
figure.gallery-group:hover img {
opacity: 0.4;
transform: translate3d(0px, 0px, 0px);
opacity: .4;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.gallery-group:hover .gallery-group-name::after {
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.gallery-group p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
figure.gallery-group:hover p {
opacity: 1;
-ms-filter: none;
filter: none;
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.gallery-group img {
position: relative;
margin: 0;
max-width: none;
width: calc(100% + 20px);
height: 250px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 0.8;
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
transform: translate3d(-10px, 0px, 0px);
object-fit: cover;
margin: 0px !important;
opacity: .8;
-webkit-transition: all .3s, filter 375ms ease-in .2s;
-moz-transition: all .3s, filter 375ms ease-in .2s;
-o-transition: all .3s, filter 375ms ease-in .2s;
-ms-transition: all .3s, filter 375ms ease-in .2s;
transition: all .3s, filter 375ms ease-in .2s;
-webkit-transform: translate3d(-10px, 0, 0);
-moz-transform: translate3d(-10px, 0, 0);
-o-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
object-fit: cover
}
figure.gallery-group figcaption {
position: absolute;
top: 0px;
left: 0px;
padding: 1.5rem;
top: 0;
left: 0;
padding: 30px;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
color: #fff;
text-transform: uppercase;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden
}
figure.gallery-group figcaption > a {
figure.gallery-group figcaption>a {
position: absolute;
inset: 0px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
opacity: 0;
opacity: 0
}
figure.gallery-group p {
margin: 0px;
padding: 0.4rem 0px 0px;
margin: 0;
padding: 8px 0 0;
letter-spacing: 1px;
font-size: 1.1em;
line-height: 1.5;
opacity: 0;
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
transform: translate3d(100%, 0px, 0px);
-webkit-line-clamp: 4;
-webkit-transition: opacity .35s, -webkit-transform .35s;
-moz-transition: opacity .35s, -moz-transform .35s;
-o-transition: opacity .35s, -o-transform .35s;
-ms-transition: opacity .35s, -ms-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-line-clamp: 4
}
figure.gallery-group .gallery-group-name {
position: relative;
margin: 0px;
padding: 0.4rem 0px;
margin: 0;
padding: 8px 0;
font-weight: 700;
font-size: 1.65em;
line-height: 1.5;
-webkit-line-clamp: 2;
-webkit-line-clamp: 2
}
figure.gallery-group .gallery-group-name::after {
figure.gallery-group .gallery-group-name:after {
position: absolute;
bottom: 0px;
left: 0px;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: rgb(255, 255, 255);
content: "";
transition: transform 0.35s ease 0s;
transform: translate3d(-100%, 0px, 0px);
/* height: 2px; */
background: #fff;
content: '';
-webkit-transition: -webkit-transform .35s;
-moz-transition: -moz-transform .35s;
-o-transition: -o-transform .35s;
-ms-transition: -ms-transform .35s;
transition: transform .35s;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
.gallery-group-main {
overflow: auto;
padding: 0px 0px 0.8rem;
padding: 0 0 16px
}
.justified-gallery {
@ -11599,19 +11456,6 @@ details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) > summary
letter-spacing: 0.6px;
}
/*#article-container code {*/
/* color: var(--heo-white);*/
/* padding: 0.2rem 0.4rem;*/
/* border-radius: 4px;*/
/* margin: 0px 4px;*/
/* background: var(--heo-pink);*/
/* line-height: 2;*/
/* box-shadow: var(--heo-shadow-border);*/
/*}*/
/*#article-container code::selection {*/
/* background: var(--heo-main) !important;*/
/*}*/
/* 文章表格间距 */
.table-wrap {
@ -11813,79 +11657,6 @@ blockquote p {
padding: 0;
}
/* readmore插件 */
/*
[data-theme=dark] #read-more-mask{
background: -webkit-gradient(linear, 0 0%, 0 100%, from(rgba(29, 30, 31, 0)), to(rgb(29, 30, 31)))!important;
}
#read-more-btn{
background: var(--heo-blue)!important;
border: 0px solid var(--heo-white) !important;
color: var(--heo-white) !important;
text-decoration: none!important;
font-weight:bold!important;
border-radius: 8px!important;
}
#read-more-btn:hover{
background: var(--heo-white) !important;
color: var(--heo-blue)!important;
}
#btw-modal {
background: rgb(29, 30, 31)!important;
}
#btw-modal img {
border: 8px solid rgb(0, 0, 0)!important;
border-radius: 8px!important;
}
#btw-modal-header{
margin-top: 0!important;
color: #fff !important;
margin: 2rem 0 1rem 0!important;
}
#btw-modal-header strong{
color: var(--heo-lighttext)!important;
}
#btw-modal-input-code{
background: rgb(29, 30, 31)!important;
margin-bottom: 50px;
}
#btw-submit-btn{
background: rgb(66, 123, 238)!important;
border-radius: 8px!important;
color: #fff !important;
font-weight:bold!important;
}
#btw-submit-btn:hover{
background: #fff !important;
color: rgb(66, 123, 238)!important;
}
#btw-modal-input{
color: #fff!important;
border-radius: 8px!important;
background: rgb(29, 30, 31)!important;
}
#btw-modal-close-btn{
color: rgb(129, 132, 136)!important;
}
#btw-footer{
display: none;
}
#btw-mask{
backdrop-filter: blur(3px);
} */
/* 文章内标题 */
#article-container .headerlink::before {
@ -11928,9 +11699,6 @@ blockquote p {
object-fit: cover;
}
/* #article-container img.error {
content: url(../images/404.gif);
} */
/* 文章视频 */
.doge-inner-player {
@ -11949,14 +11717,6 @@ blockquote p {
transform: rotate(0deg);
}
/* 文章代码框 */
/*figure {*/
/* margin-top: 0.5rem !important;*/
/*}*/
/*#article-container figure.highlight .highlight-tools {*/
/* background: var(--heo-secondbg) !important;*/
/*}*/
#article-container .gutter {
opacity: 0.6;
@ -11966,46 +11726,6 @@ blockquote p {
margin-left: 6px;
}
/*#article-container .highlight-tools .code-lang {*/
/* text-transform: capitalize;*/
/* left: 1.9rem;*/
/*}*/
/*#article-container figure.highlight table::-webkit-scrollbar {*/
/* color: var(--heo-blue);*/
/* background: var(--heo-secondbg);*/
/* height: 8px;*/
/*}*/
/*#article-container figure.highlight table::-webkit-scrollbar-thumb {*/
/* background: var(--heo-gray);*/
/*}*/
/*#article-container figure.highlight table::-webkit-scrollbar-thumb:hover {*/
/* background: var(--heo-main);*/
/*}*/
/* 代码展开图标 */
/*#article-container .code-expand-btn i {*/
/* color: var(--heo-fontcolor);*/
/* font-size: 1rem;*/
/*}*/
/*#article-container .code-expand-btn {*/
/* background-color: var(--heo-mask);*/
/* background: var(--heo-secondbg);*/
/* transition: 0.3s;*/
/* backdrop-filter: saturate(180%) blur(20px);*/
/* -webkit-backdrop-filter: blur(20px);*/
/*}*/
/*#article-container .code-expand-btn:hover {*/
/* background: var(--heo-main);*/
/*}*/
/*#article-container .code-expand-btn:hover i {*/
/* color: var(--heo-white);*/
/*}*/
/* 结尾寄语 */
#readmore-talk {
@ -12485,91 +12205,6 @@ a.reward-main-btn:hover {
background: var(--heo-card-bg);
}
/* @media screen and (min-width: 1300px) {
#post #pagination {
position: fixed;
width: 300px;
bottom: -100px;
right: 20px;
z-index: 1000;
height: fit-content;
transition: cubic-bezier(0.42, 0, 0.3, 1.11) 0.3s;
border: var(--style-border);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
opacity: 0;
z-index: 1002;
}
#post #pagination.show-window {
bottom: 20px;
opacity: 1;
}
#post #pagination:hover {
border: var(--style-border-hover);
}
#pagination .next-post a {
border: none;
height: fit-content;
padding: 0.5rem 0;
}
#pagination.pagination-post {
border-radius: 0;
}
#post #pagination .prev_info,
#pagination .next_info {
font-size: 14.5px;
font-weight: normal;
}
#pagination .pagination-info {
padding: 0.5rem 1rem;
transform: none;
}
#post #pagination {
background: none;
}
.next-post.pull-right,
.prev-post.pull-left,
#pagination .prev-post,
#pagination .next-post {
background: var(--heo-maskbgdeep);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.prev-post.pull-left {
display: none;
}
.next-post.pull-right {
width: 100% !important;
}
#pagination .next-post .pagination-info {
text-align: left;
position: relative;
}
#post #pagination .prev-post .label,
#pagination .next-post .label {
color: var(--heo-fontcolor);
font-weight: bold;
font-size: 13px;
margin-bottom: 0.5rem;
border-bottom: var(--style-border);
line-height: 1;
padding-bottom: 0.5rem;
}
} */
@media screen and (max-width: 768px) {
.prev-post.pull-left {
border-bottom: var(--style-border-always);
@ -12767,18 +12402,6 @@ a.reward-main-btn:hover {
}
/* 相关推荐 */
.relatedPosts-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.relatedPosts > .relatedPosts-list > div {
background: #363636;
transition: 0.3s;
cursor: pointer;
overflow: hidden;
}
.relatedPosts > .relatedPosts-list > div:hover #preimg{
opacity: 1;
@ -12805,19 +12428,6 @@ a.reward-main-btn:hover {
color: var(--heo-white);
}
.relatedPosts > .relatedPosts-list .content .title {
color: var(--heo-fontcolor);
font-weight: bold;
line-height: 1.5;
-webkit-line-clamp: 4;
font-size: 0.9rem;
text-align: center;
}
.relatedPosts > .relatedPosts-list .content .date {
color: var(--heo-fontcolor);
}
/* 分割线 */
#post > hr {
display: none;
@ -13483,10 +13093,6 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
}
/* 文章底部推荐 */
.relatedPosts > .relatedPosts-list > div:hover .cover {
transform: scale(1);
opacity: 0;
}
@media screen and (min-width: 768px) {
#pagination.pagination-post {
@ -14274,9 +13880,6 @@ figure.gallery-group:hover .gallery-group-name::after {
}
}
.gallery-group figcaption p {
line-height: 1.5 !important;
}
/* 超级博主友链 */

4
templates/equipment.html
View File

@ -12,12 +12,12 @@
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<th:div th:replace="~{macro/author-content :: author-content(background = ${theme.config.equipment.backgroundImg},
<div th:replace="~{macro/author-content :: author-content(background = ${theme.config.equipment.backgroundImg},
smallTitle = ${theme.config.equipment.smallTitle},
bigTitle = ${theme.config.equipment.bigTitle},
detail = ${theme.config.equipment.detail},
buttonUrl = '',
buttonTitle = '')}" />
buttonTitle = '')}" ></div>
<div id="equipment" th:if="${not #lists.isEmpty(theme.config.equipment.category_list)}"
th:with="categoryList = ${theme.config.equipment.category_list}">
<th:block th:each="category : ${categoryList}">

4
templates/fcircle.html
View File

@ -12,12 +12,12 @@
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<th:div th:replace="~{macro/author-content :: author-content(background = ${theme.config.fcircle.backgroundImg},
<div th:replace="~{macro/author-content :: author-content(background = ${theme.config.fcircle.backgroundImg},
smallTitle = ${theme.config.fcircle.smallTitle},
bigTitle = ${theme.config.fcircle.bigTitle},
detail = ${theme.config.fcircle.detail},
buttonUrl = ${theme.config.fcircle.buttonUrl},
buttonTitle = ${theme.config.fcircle.buttonTitle})}" />
buttonTitle = ${theme.config.fcircle.buttonTitle})}" ></div>
<!--钓鱼-->
<th:block th:if="${theme.config.fcircle.fcircleRandomFriendsEnable}" >
<div class="title-h2-a">

2
templates/links.html
View File

@ -6,7 +6,7 @@
<div class="page" id="body-wrap">
<header class="not-top-img" id="page-header">
<nav th:replace="~{modules/nav :: nav(title = null)}"></nav>
<link rel="stylesheet" type="text/css" th:href="${assets_link + '/zhheo/heo-fcircle3.css'}">
<link rel="stylesheet" type="text/css" th:href="${assets_link + '/libs/fcircle/heo-fcircle3.css' + theme_version}">
</header>
<main class="layout hide-aside" id="content-inner">

4
templates/macro/author-content.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:div th:fragment="author-content(background, smallTitle, bigTitle, detail,buttonUrl,buttonTitle)"
<div th:fragment="author-content(background, smallTitle, bigTitle, detail,buttonUrl,buttonTitle)"
class="author-content author-content-item essayPage single"
th:style="'background:url('+${background}+') left 28% / cover no-repeat !important;'">
<div class="card-content">
@ -16,6 +16,6 @@
</a>
</div>
</div>
</th:div>
</div>
</html>

2
templates/modules/head.html
View File

@ -21,7 +21,7 @@
<link rel="stylesheet" th:href="${assets_link + '/zhheo/custom.css' + theme_version}">
<link rel="stylesheet" th:href="${assets_link + '/zhheo/commentBarrage.css' + theme_version}">
<link rel="stylesheet" th:href="${assets_link + '/libs/twikoo/commentBarrage.css' + theme_version}">
<style th:if="${theme.config.other.scrollbarLinearGradientEnable}">
*::-webkit-scrollbar-thumb {

2
templates/modules/layouts/layout.html
View File

@ -10,7 +10,7 @@
<title th:text="${site.title}"></title>
</head>
<body th:id="${'htmlType-'+htmlType}">
<body>
<!-- loading 页面 -->
<div th:replace="~{modules/loading-box :: loading-box}"></div>

53
templates/modules/post/relatedPosts.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 阅读建议 -->
<th:block th:fragment="relatedPosts">
<div class="relatedPosts" th:if="${not #lists.isEmpty(post.categories)}">
<div class="headline">
<i class="iconfont icon-robot"></i>
<span>阅读建议</span>
</div>
<!-- 六篇文章 -->
<div th:if="${#strings.equals(theme.config.post.recommendQuantity, 'six')}" class="relatedPosts-list"
th:with="recommandPosts = ${postFinder.listByCategory(1, 7, post.categories.get(0).metadata.name)}">
<!-- 建议阅读，这里可以自定义文章数量，然后遍历展示 -->
<div th:each="recommandPost :${recommandPosts}"
th:if="${not #strings.equals(post.spec.title, recommandPost.spec.title)}">
<a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
<img alt="cover" class="cover" loading="lazy" id="preimg"
th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
<div class="content is-center">
<div class="date" style="color: white"><i class="far fa-calendar-alt fa-fw"></i>
[[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]
</div>
<div class="title" style="color: white" th:text="${recommandPost.spec.title}"></div>
</div>
</a>
</div>
</div>
<!-- 两篇文章 -->
<div th:if="${#strings.equals(theme.config.post.recommendQuantity, 'two')}" class="relatedPosts-list"
th:with="recommandPosts = ${postFinder.listByCategory(1, 3, post.categories.get(0).metadata.name)}">
<div th:each="recommandPost :${recommandPosts}"
th:if="${not #strings.equals(post.spec.title, recommandPost.spec.title)}">
<a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
<img class="cover" alt="cover"
th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
<div class="content is-center">
<div class="date"><i class="far fa-calendar-alt fa-fw"></i>
[[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]</div>
<div class="title" th:text="${recommandPost.spec.title}"></div>
</div>
</a>
</div>
</div>
</div>
<link th:if="${#strings.equals(theme.config.post.recommendQuantity, 'six')}" rel="stylesheet"
th:href="${assets_link + '/css/related-posts-six.css' + theme_version}">
<link th:if="${#strings.equals(theme.config.post.recommendQuantity, 'two')}" rel="stylesheet"
th:href="${assets_link + '/css/related-posts-two.css' + theme_version}">
</th:block>
</html>

36
templates/modules/widgets/top-group.html
View File

@ -31,23 +31,25 @@
<div class="recent-post-item"
th:each="cuscomPost : ${theme.config.top.BannerRight.recommendPostCustom}"
th:if="${#strings.equals(theme.config.top.BannerRight.recommendPost, 'custom')}">
<div class="post_cover">
<a th:href="@{${cuscomPost.url}}" th:title="${cuscomPost.title}">
<span class="recent-post-top-text"
th:attr="onclick='pjax.loadUrl(\''+ @{${cuscomPost.url}} +'\')'">荐</span>
<img class="post_bg" loading="lazy"
th:alt="${cuscomPost.title}"
th:src='${#strings.isEmpty(cuscomPost.cover) ? postRandomImg+","+cuscomPost.title : cuscomPost.cover}'
/>
</a>
</div>
<div class="recent-post-info">
<a class="article-title"
th:href="@{${cuscomPost.url}}"
th:text="${cuscomPost.title}"
th:title="${cuscomPost.title}">
</a>
</div>
<th:block th:with="post = ${postFinder.getByName(cuscomPost.post)}">
<div class="post_cover">
<a th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
<span class="recent-post-top-text"
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'">荐</span>
<img class="post_bg" loading="lazy"
th:alt="${post.spec.title}"
th:src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
/>
</a>
</div>
<div class="recent-post-info">
<a class="article-title"
th:href="@{${post.status.permalink}}"
th:text="${post.spec.title}"
th:title="${post.spec.title}">
</a>
</div>
</th:block>
</div>
<!-- 今日推荐 -->

4
templates/moments.html
View File

@ -12,12 +12,12 @@
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<th:div th:replace="~{macro/author-content :: author-content(background = ${theme.config.moment.backgroundImg},
<div th:replace="~{macro/author-content :: author-content(background = ${theme.config.moment.backgroundImg},
smallTitle = ${theme.config.moment.smallTitle},
bigTitle = ${theme.config.moment.bigTitle},
detail = ${theme.config.moment.detail},
buttonUrl = ${theme.config.moment.buttonUrl},
buttonTitle = ${theme.config.moment.buttonTitle})}" />
buttonTitle = ${theme.config.moment.buttonTitle})}" ></div>
<div id="bber">
<section class="timeline page-1">
<ul class="list" id="waterfall">

2
templates/page_links.html
View File

@ -6,7 +6,7 @@
<div class="page" id="body-wrap">
<header class="not-top-img" id="page-header">
<nav th:replace="~{modules/nav :: nav(title = null)}"></nav>
<link rel="stylesheet" type="text/css" th:href="${assets_link + '/zhheo/heo-fcircle3.css'}">
<link rel="stylesheet" type="text/css" th:href="${assets_link + '/libs/fcircle/heo-fcircle3.css' + theme_version}">
</header>
<main class="layout hide-aside" id="content-inner">

70
templates/photos.html
View File

@ -11,38 +11,68 @@
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<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(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')},
background = ${#annotations.get(group, 'background')}">
<th:div th:replace="~{macro/author-content :: author-content(background = ${background},
<th:div th:replace="~{macro/author-content :: author-content(background = ${background},
smallTitle = '相册集',
bigTitle = ${group.spec.displayName},
detail = ${description},
buttonUrl = '',
buttonTitle = '')}" />
</th:block>
</th:block>
<div id="article-container">
<section class="timeline 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 class="tag-address">[[${photo.spec.displayName}]]</div>
<img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
th:title="${photo.spec.description}">
</th:block>
<div id="article-container">
<section class="timeline 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 class="tag-address">[[${photo.spec.displayName}]]</div>
<img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
th:title="${photo.spec.description}">
</div>
</div>
</div>
</div>
</section>
</section>
</div>
</th:block>
<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)}">
[[${group.spec.displayName}]]
</h1>
</th:block>
<div id="article-container">
<section class="timeline 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 class="tag-address">[[${photo.spec.displayName}]]</div>
<img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
th:title="${photo.spec.description}">
</div>
</div>
</div>
</section>
</div>
</div>
<style>
.gallery-groups {
box-shadow: var(--heo-shadow-border);
padding: 1rem 2rem;
border-radius: 12px;
background: var(--heo-card-bg);
border: var(--style-border);
width: 100%;
align-self: flex-start;
animation: slide-in 0.6s 0.1s backwards;
}
#content-inner .loadings .type-gallery {
opacity: 0

25
templates/post.html
View File

@ -142,29 +142,8 @@
</a>
</div>
</nav>
<div class="relatedPosts" th:if="${not #lists.isEmpty(post.categories)}">
<div class="headline">
<i class="iconfont icon-robot"></i>
<span>阅读建议</span>
</div>
<div class="relatedPosts-list"
th:with="recommandPosts = ${postFinder.listByCategory(1, theme.config.post.recommendQuantity, post.categories.get(0).metadata.name)}">
<!-- 建议阅读，这里可以自定义文章数量，然后遍历展示 -->
<div th:each="recommandPost :${recommandPosts}" th:if="${not #strings.equals(post.spec.title, recommandPost.spec.title)}">
<a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
<img alt="cover" class="cover" loading="lazy" id="preimg"
th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
<div class="content is-center" >
<div class="date" style="color: white"><i class="far fa-calendar-alt fa-fw"></i>
[[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]
</div>
<div class="title" style="color: white" th:text="${recommandPost.spec.title}"></div>
</div>
</a>
</div>
</div>
</div>
<!-- 阅读建议 -->
<th:block th:replace="~{modules/post/relatedPosts :: relatedPosts}">
<hr>
<!--/* 评论组件 */-->
<th:block

4
templates/todolist.html
View File

@ -12,12 +12,12 @@
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<th:div th:replace="~{macro/author-content :: author-content(background = ${theme.config.todo.backgroundImg},
<div th:replace="~{macro/author-content :: author-content(background = ${theme.config.todo.backgroundImg},
smallTitle = ${theme.config.todo.smallTitle},
bigTitle = ${theme.config.todo.bigTitle},
detail = ${theme.config.todo.detail},
buttonUrl = '',
buttonTitle = '')}" />
buttonTitle = '')}" ></div>
<div id="todolist-main" th:if="${not #lists.isEmpty(theme.config.todo.list)}"
th:with="todoList = ${theme.config.todo.list}">