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-17 23:41:54 +08:00
parent b965de6cdf
commit dec8cbfe0d
7 changed files with 313 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
templates/assets/js/heo.js
View File

@ -85,6 +85,23 @@ var heo = {
} }
}, },
categoriesBarActive: function() {
document.querySelector("#category-bar") && $(".category-bar-item").removeClass("select");
var e = window.location.pathname;
if ("/" == (e = decodeURIComponent(e)))
document.querySelector("#category-bar") && document.getElementById("category-bar-home").classList.add("select");
else {
if (/\/categories\/.*?/.test(e)) {
var t = e.split("/")[2];
if (document.querySelector("#category-bar")) {
var o = document.getElementById(t);
o && (o.classList.add("select"),
o.style.order = "-1")
}
}
}
},
// 页脚友链 // 页脚友链
addFriendLinksInFooter: function () { addFriendLinksInFooter: function () {
var footerRandomFriendsBtn = document.getElementById("footer-random-friends-btn"); var footerRandomFriendsBtn = document.getElementById("footer-random-friends-btn");
@ -462,9 +479,15 @@ var heo = {
$htmlDom.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on") $htmlDom.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
}, },
toPage: function() { toPage: function() {
var e, t = document.querySelectorAll(".page-number"), o = parseInt(t[t.length - 1].innerHTML), n = document.getElementById("toPageText"), a = parseInt(n.value); var e = document.querySelectorAll(".page-number")
!isNaN(a) && a > 0 && "0" !== ("" + a)[0] && a <= o && (e = 1 === a ? "/" : "/page/" + a, , t = parseInt(e[e.length - 1].innerHTML)
document.getElementById("toPageButton").href = e) , o = document.getElementById("toPageText")
, n = parseInt(o.value);
if (!isNaN(n) && n > 0 && "0" !== ("" + n)[0] && n <= t) {
var a, l = window.location.href.replace(/\/page\/\d$/, "");
a = 1 === n ? l : l + (l.endsWith("/") ? "" : "/") + "page/" + n,
document.getElementById("toPageButton").href = a
}
}, },
changeSayHelloText: function() { changeSayHelloText: function() {
const greetings = GLOBAL_CONFIG.helloText.length == 0 ? ["🤖️ 数码科技爱好者", "🔍 分享与热心帮助", "🏠 智能家居小能手", "🔨 设计开发一条龙", "🤝 专修交互与设计", "🏃 脚踏实地行动派", "🧱 团队小组发动机", "💢 壮汉人狠话不多"] : GLOBAL_CONFIG.helloText const greetings = GLOBAL_CONFIG.helloText.length == 0 ? ["🤖️ 数码科技爱好者", "🔍 分享与热心帮助", "🏠 智能家居小能手", "🔨 设计开发一条龙", "🤝 专修交互与设计", "🏃 脚踏实地行动派", "🧱 团队小组发动机", "💢 壮汉人狠话不多"] : GLOBAL_CONFIG.helloText

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

@ -590,6 +590,7 @@ function initBlog() {
heo.initIndexEssay(), heo.initIndexEssay(),
heo.reflashEssayWaterFall(), heo.reflashEssayWaterFall(),
heo.darkModeStatus(), heo.darkModeStatus(),
heo.categoriesBarActive(),
heo.initThemeColor(), heo.initThemeColor(),
heo.topCategoriesBarScroll(), heo.topCategoriesBarScroll(),
//隐藏加载动画 //隐藏加载动画

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

@ -1599,10 +1599,6 @@ blockquote footer cite::before {
color: rgb(255, 87, 34); color: rgb(255, 87, 34);
} }
#recent-posts > .recent-post-item:not(:first-child) {
margin-top: 1rem;
}
#recent-posts > .recent-post-item { #recent-posts > .recent-post-item {
display: flex; display: flex;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
@ -1630,14 +1626,6 @@ blockquote footer cite::before {
transform: scale(1.1); transform: scale(1.1);
} }
#recent-posts > .recent-post-item .left_radius {
border-radius: 5px 0px 0px 8px;
}
#recent-posts > .recent-post-item .right_radius {
border-radius: 5px 0px 0px 8px;
}
#recent-posts > .recent-post-item.ads-wrap { #recent-posts > .recent-post-item.ads-wrap {
display: block !important; display: block !important;
height: auto !important; height: auto !important;
@ -1657,6 +1645,12 @@ blockquote footer cite::before {
object-fit: cover; object-fit: cover;
} }
#recent-posts>.recent-post-item.col1.alternate .left_radius, #recent-posts>.recent-post-item.col1.alternate .right_radius {
width:75%;
display: flex;
height: 220px
}
#recent-posts > .recent-post-item .post_cover img.post_bg:hover { #recent-posts > .recent-post-item .post_cover img.post_bg:hover {
transform: scale(1.1); transform: scale(1.1);
} }
@ -8372,17 +8366,16 @@ a.categoryButton:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
#category-bar { #category-bar {
border-radius: 0; border-radius:0;
background: var(--heo-background); background: var(--heo-background);
margin-bottom: 0rem; margin-bottom: 0;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 60px;
z-index: 1; z-index: 1;
padding: 0rem 1rem 0rem 16px; padding: 0;
height: 50px; height: 50px;
margin-top: 0; margin-top: 0;
align-items: center; align-items: center
} }
} }
@ -8400,6 +8393,7 @@ a.categoryButton:hover {
display: flex; display: flex;
white-space: nowrap; white-space: nowrap;
align-items: center; align-items: center;
margin-bottom: 4px
} }
.category-in-bar-tips { .category-in-bar-tips {
@ -8409,7 +8403,11 @@ a.categoryButton:hover {
.category-bar-items { .category-bar-items {
white-space: nowrap; white-space: nowrap;
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden;
display: flex; display: flex;
border-radius: 8px;
align-items: center;
height: 30px
} }
.category-in-bar .category-in-bar-tips { .category-in-bar .category-in-bar-tips {
@ -8427,14 +8425,17 @@ a.categoryButton:hover {
.category-bar-item a { .category-bar-item a {
padding: 0.1rem 0.5rem; padding: 0.1rem 0.5rem;
margin: 0 4px; margin-right: 6px;
font-weight: bold; font-weight: 700;
border-radius: 8px; border-radius: 8px;
display: flex;
align-items: center;
height: 30px
} }
.category-bar-item:hover a { .category-bar-item:hover a {
background: var(--heo-theme); background: var(--heo-theme);
color: var(--heo-white); color: var(--heo-card-bg);
} }
.category-bar-item.select a { .category-bar-item.select a {
@ -8684,10 +8685,6 @@ li {
@media screen and (min-width: 1300px) { @media screen and (min-width: 1300px) {
#recent-posts .recent-post-item.pinned-post-item .recent-post-info-top {
padding-top: 16px;
}
.recent-post-item .recent-post-info .recent-post-info-top .article-title { .recent-post-item .recent-post-info .recent-post-info-top .article-title {
font-size: 20px; font-size: 20px;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -9086,26 +9083,10 @@ ins.adsbygoogle {
box-shadow: var(--heo-shadow-main); box-shadow: var(--heo-shadow-main);
} }
#recent-posts > .recent-post-item .right_radius {
border-top-left-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 12px;
}
@media screen and (min-width: 1300px) {
#recent-posts > .recent-post-item .right_radius {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
#recent-posts .recent-post-item:hover { #recent-posts .recent-post-item:hover {
border: none; border:var(--style-border-always);
box-shadow: none; box-shadow: none
} }
} }
@ -9114,20 +9095,15 @@ ins.adsbygoogle {
#recent-posts > .recent-post-item .right_radius, #recent-posts > .recent-post-item .right_radius,
#recent-posts > .recent-post-item .left_radius { #recent-posts > .recent-post-item .left_radius {
border-top-left-radius: 12px; width:75%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 12px;
width: 75%;
display: flex; display: flex;
height: 200px; height: 220px
} }
#recent-posts > .recent-post-item:hover .post_cover img.post_bg { #recent-posts > .recent-post-item:hover .post_cover img.post_bg {
transform: scale(1.03); transform: scale(1.03);
transition: 0.3s ease-in-out; transition: .3s ease-in-out;
filter: brightness(0.85); filter: brightness(.85)
border-radius: 12px 0 0 12px;
} }
#recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg { #recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg {
@ -9138,8 +9114,9 @@ ins.adsbygoogle {
min-width: 100%; min-width: 100%;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
transition: 0.3s ease-in-out; transition: .3s ease-in-out;
min-height: 100%; min-height: 100%;
user-select: none
} }
#recent-posts > .recent-post-item:hover > .recent-post-info { #recent-posts > .recent-post-item:hover > .recent-post-info {
@ -9152,23 +9129,32 @@ ins.adsbygoogle {
} }
} }
@media screen and (max-width: 375px) {
#recent-posts>.recent-post-item .left_radius,#recent-posts>.recent-post-item .right_radius {
height:170px
}
}
#recent-posts > .recent-post-item:hover .post_cover img.post_bg { #recent-posts > .recent-post-item:hover .post_cover img.post_bg {
transform: scale(1.03); transform: scale(1);
transition: 0.3s ease-in-out; transition: 0s ease-in-out;
filter: brightness(0.85); filter: brightness(1)
border-radius: 12px 0 0 12px; }
@media screen and (min-width: 1200px) {
#recent-posts>.recent-post-item:hover .post_cover img.post_bg {
transform:scale(1.03);
transition: .3s ease-in-out;
filter: brightness(.85)
}
} }
@media screen and (min-width: 1300px) { @media screen and (min-width: 1300px) {
#recent-posts > .recent-post-item .right_radius, #recent-posts > .recent-post-item .right_radius,
#recent-posts > .recent-post-item .left_radius { #recent-posts > .recent-post-item .left_radius {
border-top-left-radius: 12px; width:100%;
border-top-right-radius: 12px; display: flex
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
width: 100%;
display: flex;
} }
} }
@ -9404,12 +9390,14 @@ span.recent-post-top-text {
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
} }
#recent-posts > .recent-post-item:not(:first-child) { #recent-posts > .recent-post-item {
margin-top: 0.5rem; margin-top: .5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin-top: 1rem;
animation: slide-in .6s .4s backwards; animation: slide-in .6s .4s backwards;
will-change: transform
} }
/* 图片在左侧 */ /* 图片在左侧 */
@ -9437,40 +9425,45 @@ span.recent-post-top-text {
flex-direction: column; flex-direction: column;
} }
#recent-posts > .recent-post-item:not(:first-child) { #recent-posts > .recent-post-item {
/*width: calc(50% - 0.5rem);*/ width: calc(50% - 0.5rem);
margin-top: 0.25rem; margin-top: 0.25rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
box-shadow: var(--heo-shadow-border); box-shadow: var(--heo-shadow-border);
clip-path: inset(0 0 0 0 round 12px); clip-path: inset(0 0 0 0 round 12px);
} }
#recent-posts > .recent-post-item:not(:first-child):active { #category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
transform: scale(0.97); margin-top: .5rem;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
margin-top: 1rem;
animation: slide-in .6s .4s backwards;
will-change: transform;
width: calc(100% / 2 - .5rem);
margin-top: .25rem;
margin-bottom: .75rem;
box-shadow: var(--heo-shadow-border)
} }
/* 设置分列 */ /* 设置分列 */
/* 1 列：左右排列 */ /* 1 列：左右排列 */
#recent-posts > .recent-post-item.col1 { #recent-posts > .recent-post-item.col1,#category #recent-posts .recent-post-item.col1,#tag #recent-posts .recent-post-item.col1 {
width: calc(100% - .5rem); width: calc(100% - .5rem);
} }
/* 2 列 */ /* 2 列 */
#recent-posts > .recent-post-item.col2 { #recent-posts > .recent-post-item.col2,#category #recent-posts .recent-post-item.col2,#tag #recent-posts .recent-post-item.col2 {
width: calc(100% / 2 - .5rem); width: calc(100% / 2 - .5rem);
} }
/* 3 列 */ /* 3 列 */
#recent-posts > .recent-post-item.col3 { #recent-posts > .recent-post-item.col3,#category #recent-posts .recent-post-item.col3,#tag #recent-posts .recent-post-item.col3 {
width: calc(100% / 3 - .5rem); width: calc(100% / 3 - .5rem);
} }
/* 4 列 */
#recent-posts > .recent-post-item.col4 {
width: calc(100% / 4 - .5rem);
}
#category-bar { #category-bar {
margin-bottom: .75rem; margin-bottom: .75rem;
box-shadow: var(--heo-shadow-border); box-shadow: var(--heo-shadow-border);
@ -9488,9 +9481,13 @@ span.recent-post-top-text {
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
align-content: flex-start; align-content: flex-start;
-webkit-user-select: none
} }
} }
#recent-posts {
position: relative
}
/* 主页卡片手机端美化 */ /* 主页卡片手机端美化 */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -9498,15 +9495,23 @@ span.recent-post-top-text {
border-radius: 0; border-radius: 0;
} }
#recent-posts > .recent-post-item:not(:first-child) { #recent-posts>.recent-post-item {
margin: 1.5rem 1rem; margin: 1.5rem 0;
border-radius: 12px; border-radius: 12px;
margin-top: 0.5rem; margin-top: .5rem;
border: var(--style-border-always); border: var(--style-border-always);
box-shadow: var(--heo-shadow-border); box-shadow: var(--heo-shadow-border);
display: block; display: block;
position: relative; position: relative;
clip-path: inset(0 0 0 0 round 12px); clip-path: inset(0 0 0 0 round 12px)
}
#recent-posts {
padding: 0 1rem
}
#category #recent-posts,#tag #recent-posts {
padding: 0
} }
#recent-posts .recent-post-item .post_cover { #recent-posts .recent-post-item .post_cover {
@ -9521,6 +9526,14 @@ span.recent-post-top-text {
padding: 0.5rem 20px; padding: 0.5rem 20px;
} }
a.article-meta__categories {
left: 12px!important;
top: 12px!important;
border-radius: 4px!important;
padding: 2px 9px!important;
font-size: 12px
}
#bbTimeList { #bbTimeList {
margin-bottom: 0rem; margin-bottom: 0rem;
} }
@ -9552,7 +9565,9 @@ span.recent-post-top-text {
right: 0; right: 0;
} }
#rightside {
display: none
}
/* 背景 */ /* 背景 */
#web_bg { #web_bg {
@ -9575,43 +9590,14 @@ span.recent-post-top-text {
transform: scale(1); transform: scale(1);
} }
#recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap,
#recent-posts > .recent-post-item > .recent-post-info > .content, #recent-posts>.recent-post-item>.recent-post-info>.article-title,
#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap { #recent-posts>.recent-post-item>.recent-post-info>.content {
padding: 0 20px !important; padding: 0 20px!important
} }
} }
/* 主页文章封面左侧显示 */
/* #recent-posts>.recent-post-item .right_radius{
order: 0;
border-radius: 8px 0 0 8px;
} */
/* 主页文章卡片尺寸变化 */
/* #recent-posts > div:nth-child(1){
height: 22em;
}
#recent-posts > div:nth-child(1) > div.recent-post-info > div.content{
height: 120px;
margin-top: 20px!important;
}
#recent-posts > div:nth-child(4){
height: 22em;
}
#recent-posts > div:nth-child(4) > div.recent-post-info > div.content{
height: 120px;
margin-top: 20px!important;
}
#recent-posts > div:nth-child(8){
height: 22em;
}
#recent-posts > div:nth-child(8) > div.recent-post-info > div.content{
height: 120px;
margin-top: 20px!important;
} */
/* 文章卡片标题 */ /* 文章卡片标题 */
#recent-posts > .recent-post-item > .recent-post-info > .article-title { #recent-posts > .recent-post-item > .recent-post-info > .article-title {
line-height: 1.4; line-height: 1.4;
@ -9754,12 +9740,14 @@ span.recent-post-top-text {
} }
/* 文章标签置底 */ /* 文章标签置底 */
#recent-posts > .recent-post-item > .recent-post-info { #recent-posts > .recent-post-item > .recent-post-info {
height: 174px; height: 174px;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
padding: 0;
display: inline-block;
overflow: hidden
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -9783,15 +9771,15 @@ span.recent-post-top-text {
} }
@media screen and (min-width: 1300px) { @media screen and (min-width: 1300px) {
#recent-posts > .recent-post-item:hover > .recent-post-info > .article-meta-wrap { #recent-posts > .recent-post-item.top:hover > .recent-post-info > .article-meta-wrap {
bottom: 30px; bottom: 30px;
} }
#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-meta-wrap { #recent-posts > .recent-post-item.top.post-card-large:hover > .recent-post-info > .article-meta-wrap {
bottom: 30px; bottom: 20px;
} }
#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap { #recent-posts > .recent-post-item.top > .recent-post-info > .article-meta-wrap {
bottom: 30px; bottom: 30px;
} }
} }

139
templates/category.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" <html lang="en" xmlns:th="http://www.thymeleaf.org"
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category',title = ${'分类' + ': ' + category.spec.displayName + ' | ' + site.title}, head = ~{::head})}" > th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category',title = ${'分类' + ': ' + category.spec.displayName + ' | ' + site.title}, head = ~{::head})}">
<th:block th:fragment="head"> <th:block th:fragment="head">
<th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '分类', <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '分类',
_permalink = ${category.status.permalink}, _permalink = ${category.status.permalink},
@ -16,60 +16,101 @@
</header> </header>
<main class="layout" id="content-inner"> <main class="layout" id="content-inner">
<div id="category"> <div id="category">
<div class="category-in-bar"> <div id="category-bar">
<div class="category-in-bar-tips">分类</div> <div class="category-bar-items" id="category-bar-items">
<div id="category-bar"> <div class="category-bar-item" id="category-bar-home">
<div class="category-bar-items" id="category-bar-items"> <a href="/">首页</a>
<div class="category-bar-item" id="category-bar-home"> </div>
<a href="/">首页</a> <div class="category-bar-item"
</div> th:classappend="${category.metadata.name == categoryItem.metadata.name} ? ' select'"
<div class="category-bar-item" th:each="categoryItem : ${categoryFinder.listAll()}"
th:classappend="${category.metadata.name == categoryItem.metadata.name} ? ' select'" th:id="${categoryItem.spec.slug}">
th:each="categoryItem : ${categoryFinder.listAll()}" <a th:href="@{${categoryItem.status.permalink}}"
th:id="${categoryItem.spec.displayName}"> th:text="${categoryItem.spec.displayName}"></a>
<a th:href="@{${categoryItem.status.permalink}}" </div>
th:text="${categoryItem.spec.displayName}"></a> </div>
<!-- 跳转到分类页 -->
<a class="category-bar-more" href="/categories">更多</a>
</div>
<div class="recent-posts category_ui" id="recent-posts"
th:with='postItems=${posts.items},
postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'>
<!-- card，需要添加在没有图片时使用随机图片 -->
<div class="recent-post-item" th:classappend="${theme.config.layout.post.cols} + ' ' +
${theme.config.layout.post.postLocation} + ' ' +
(${iStat.even} ? 'even' : 'odd') + ' ' +
(${post.spec.pinned} ? 'pinned-post-item' : '')"
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'"
th:each="post,iStat : ${postItems}">
<div class="post_cover left_radius">
<a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
<img class="post_bg"
th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}'
th:alt="${post.spec.title}" th:data-lazy-src="${ isLazyload ? img : ''}"
th:src="${isLazyload ? loadingImg : img}">
</a>
</div>
<div class="recent-post-info">
<div class="recent-post-info-top">
<div class="recent-post-info-top-tips">
<!-- 类别非空时 -->
<th:block th:if="${not #lists.isEmpty(post.categories)}">
<span th:each="category : ${post.categories}"
th:href="@{${category.status.permalink}}"
th:text="${category.spec.displayName}"
th:title="${category.spec.displayName}" class="original"></span>
</th:block>
<!-- <span class="lastestpost">最新</span>-->
<a class="unvisited-post" th:href="@{${post.status.permalink}}"
th:title="${post.spec.title}" data-pjax-state="">未读</a>
</div>
<a class="article-title" th:attr="title=${post.spec.title}"
th:href="@{${post.status.permalink}}" th:text="${post.spec.title}">
</a>
<div class="content" th:text="${post.status.excerpt}"></div>
</div> </div>
</div>
<!-- 跳转到分类页 --> <div class="article-meta-wrap">
<a class="category-bar-more" href="/categories">更多</a> <!-- tag -->
</div> <th:block th:if="${not #lists.isEmpty(post.tags)}">
</div> <span class="article-meta tags">
<div class="article-sort-title" th:text="${category.spec.displayName}"></div> <a class="article-meta__tags" event.cancelbubble
<div class="article-sort"> onclick="window.event.cancelBubble=!0" th:each="tag : ${post.tags}"
<!-- TODO 按照年份分组 需要 halo 提供归档数据--> th:href="@{${tag.status.permalink}}" th:title="${tag.spec.displayName}">
<!--<div class="article-sort-item year">2022</div>--> <span
<div class="article-sort-item" th:each="post : ${posts.items}" class="tags-punctuation">[[${#strings.trim(tag.spec.displayName)}]]</span>
th:with='postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'> </a>
<a class="article-sort-item-img" th:href="@{${post.status.permalink}}" </span>
th:title="${post.spec.title}"> </th:block>
<img th:alt="${post.spec.title}" <!-- 创建时间 -->
th:src="${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}"> <span class="post-meta-date"
</a> th:with="days=${(new java.util.Date().getTime()-post.spec.publishTime.toEpochMilli())/86400000}">
<div class="article-sort-item-info"> <i class="far fa-calendar-alt"></i>
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i> <time style="display: inline;" th:datetime="${post.spec.publishTime}"
<time class="post-meta-date-created" th:if="${days > 30}"
th:attr="datetime=${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}" th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
th:title="'创建于' + ${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}"> </time>
</time> <time style="display: inline;" th:datetime="${post.spec.publishTime}"
</div> th:if="${days <= 30 && days > 0}" th:text="${days}+天前"
<a class="article-sort-item-title" onclick="window.event.cancelBubble=!0" th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
th:href="@{${post.status.permalink}}" th:text="${post.spec.title}" </time>
th:title="${post.spec.title}"></a> <time style="display: inline;" th:datetime="${post.spec.publishTime}"
<div class="article-sort-item-tags"> th:if="${days == 0}" th:text="最近"
<a class="article-meta__tags" th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
th:each="tag : ${post.tags}" th:href="@{${tag.status.permalink}}"> </time>
<span class="tags-punctuation">[[${tag.spec.displayName}]]</span> </span>
</a>
<span class="article-meta__link">•</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 分页 -->
<div
th:replace="~{modules/widgets/page :: page(${'/categories/'+category.spec.slug},${posts},false)}">
</div>
</div> </div>
<!-- 分页 -->
<div th:replace="~{modules/widgets/page :: page(${'/categories/'+category.spec.slug},${posts},false)}"></div>
</div> </div>
<!-- sidebar --> <!-- sidebar -->
<div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.categoryWidgets})}"></div> <div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.categoryWidgets})}"></div>

6
templates/modules/post-list.html
View File

@ -9,10 +9,10 @@
<div class="recent-post-item" <div class="recent-post-item"
th:classappend="${theme.config.layout.post.cols} + ' ' + th:classappend="${theme.config.layout.post.cols} + ' ' +
${theme.config.layout.post.postLocation} + ' ' + ${theme.config.layout.post.postLocation} + ' ' +
(${iStat.even} ? 'even' : 'odd') + (${iStat.even} ? 'even' : 'odd') + ' ' +
(${post.spec.pinned} ? 'pinned-post-item' : '')" (${post.spec.pinned} ? 'pinned-post-item' : '')"
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'"
th:each="post,iStat : ${postItems}"> th:each="post,iStat : ${postItems}">
<div class="post_cover left_radius"> <div class="post_cover left_radius">
<a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}"> <a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
<img class="post_bg" <img class="post_bg"
@ -32,7 +32,7 @@
th:text="${category.spec.displayName}" th:title="${category.spec.displayName}" th:text="${category.spec.displayName}" th:title="${category.spec.displayName}"
class="original"></span> class="original"></span>
</th:block> </th:block>
<!-- <span class="lastestpost">最新</span>--> <!-- <span class="lastestpost">最新</span>-->
<a class="unvisited-post" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}" <a class="unvisited-post" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}"
data-pjax-state="">未读</a> data-pjax-state="">未读</a>
</div> </div>

32
templates/modules/widgets/page.html
View File

@ -12,7 +12,7 @@
<!-- 页码按钮 --> <!-- 页码按钮 -->
<th:block th:if="${pageInfo.page > 3}"> <th:block th:if="${pageInfo.page > 3}">
<a class="page-number" th:href="${paths}" th:text="1" onclick="scrollToPost()"></a> <a class="page-number" th:href="${paths}" th:text="1" onclick="scrollToPost()></a>
<span class="space" th:if="${pageInfo.page != 4}">…</span> <span class="space" th:if="${pageInfo.page != 4}">…</span>
</th:block> </th:block>
@ -49,7 +49,7 @@
<div class="pagination_tips_next">下页</div> <div class="pagination_tips_next">下页</div>
<i class="haofont hao-icon-chevron-right fa-fw"></i> <i class="haofont hao-icon-chevron-right fa-fw"></i>
</a> </a>
<div th:if="${pageInfo.totalPages > 1 && isIndex}" class="toPageGroup"> <div th:if="${pageInfo.totalPages > 1}" class="toPageGroup">
<input id="toPageText" maxlength="3" title="跳转到指定页面" <input id="toPageText" maxlength="3" title="跳转到指定页面"
oninput="value=value.replace(/[^0-9]/g,'')" oninput="value=value.replace(/[^0-9]/g,'')"
onkeyup="if (this.value === '0') this.value = ''"> onkeyup="if (this.value === '0') this.value = ''">
@ -57,21 +57,21 @@
</a> </a>
</div> </div>
<script th:if="${theme.config.top.above.enable_above}">
function scrollToPost() {
if (document.querySelector(".pl-container")) {
setTimeout(() => {
btf.scrollToDest(window.innerHeight, 500);
}, 1000)
}
}
</script>
<script th:unless="${theme.config.top.above.enable_above}">
function scrollToPost() {
}
</script>
</div> </div>
<script th:if="${theme.config.top.above.enable_above}">
function scrollToPost(){
setTimeout(()=>{
btf.scrollToDest(window.innerHeight, 500);
},1000)
}
</script>
<script th:unless="${theme.config.top.above.enable_above}">
function scrollToPost(){
setTimeout(()=>{
btf.scrollToDest(0, 500);
},1000)
}
</script>
</nav> </nav>
</html> </html>

96
templates/tag.html
View File

@ -26,38 +26,82 @@
<span class="tagsPageCount" th:text="${tagItem.status.visiblePostCount}"></span> <span class="tagsPageCount" th:text="${tagItem.status.visiblePostCount}"></span>
</a> </a>
</div> </div>
<div class="article-sort-title" th:text="${tag.spec.displayName}"></div> <div class="recent-posts" id="recent-posts"
<div class="article-sort" th:with="postItems=${posts.items}"> th:with='postItems=${posts.items},
<!--<div class="article-sort-item year">2022</div>--> postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'>
<div class="article-sort-item" th:each="post : ${postItems}" <!-- card，需要添加在没有图片时使用随机图片 -->
th:with='postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'> <div class="recent-post-item" th:classappend="${theme.config.layout.post.cols} + ' ' +
<a class="article-sort-item-img" th:href="@{${post.status.permalink}}" ${theme.config.layout.post.postLocation} + ' ' +
th:title="${post.spec.title}"> (${iStat.even} ? 'even' : 'odd') + ' ' +
<img loading="lazy" th:alt="${post.status.excerpt}" (${post.spec.pinned} ? 'pinned-post-item' : '')"
th:src="${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}"> th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'"
</a> th:each="post,iStat : ${postItems}">
<div class="article-sort-item-info">
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i> <div class="post_cover left_radius">
<time th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}" <a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> <img class="post_bg"
</time> th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}'
</div> th:alt="${post.spec.title}" th:data-lazy-src="${ isLazyload ? img : ''}"
<a class="article-sort-item-title" onclick="window.event.cancelBubble=!0" th:src="${isLazyload ? loadingImg : img}">
th:href="@{${post.status.permalink}}"
th:text="${post.spec.title}" th:title="${post.spec.title}">
</a> </a>
<div class="article-sort-item-tags"> </div>
<a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0" <div class="recent-post-info">
th:each="tag : ${post.tags}" th:href="@{${tag.status.permalink}}"> <div class="recent-post-info-top">
<span class="tags-punctuation">[[${tag.spec.displayName}]]</span> <div class="recent-post-info-top-tips">
<!-- 类别非空时 -->
<th:block th:if="${not #lists.isEmpty(post.categories)}">
<span th:each="category : ${post.categories}"
th:href="@{${category.status.permalink}}"
th:text="${category.spec.displayName}"
th:title="${category.spec.displayName}" class="original"></span>
</th:block>
<!-- <span class="lastestpost">最新</span>-->
<a class="unvisited-post" th:href="@{${post.status.permalink}}"
th:title="${post.spec.title}" data-pjax-state="">未读</a>
</div>
<a class="article-title" th:attr="title=${post.spec.title}"
th:href="@{${post.status.permalink}}" th:text="${post.spec.title}">
</a> </a>
<span class="article-meta__link">•</span> <div class="content" th:text="${post.status.excerpt}"></div>
</div>
<div class="article-meta-wrap">
<!-- tag -->
<th:block th:if="${not #lists.isEmpty(post.tags)}">
<span class="article-meta tags">
<a class="article-meta__tags" event.cancelbubble
onclick="window.event.cancelBubble=!0" th:each="tag : ${post.tags}"
th:href="@{${tag.status.permalink}}" th:title="${tag.spec.displayName}">
<span
class="tags-punctuation">[[${#strings.trim(tag.spec.displayName)}]]</span>
</a>
</span>
</th:block>
<!-- 创建时间 -->
<span class="post-meta-date"
th:with="days=${(new java.util.Date().getTime()-post.spec.publishTime.toEpochMilli())/86400000}">
<i class="far fa-calendar-alt"></i>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days > 30}"
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days <= 30 && days > 0}" th:text="${days}+天前"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days == 0}" th:text="最近"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 分页 -->
<div th:replace="~{modules/widgets/page :: page(${'/tags/'+tag.spec.slug},${posts},false)}"></div>
</div> </div>
<!-- 分页 -->
<div th:replace="~{modules/widgets/page :: page(${'/tags/'+tag.spec.slug},${posts},false)}"></div>
</div> </div>
<!-- sidebar --> <!-- sidebar -->
<div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.tagWidgets})}"></div> <div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.tagWidgets})}"></div>