From dec8cbfe0daf42b66db3f86d58fc97a2f492452a Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <1152958806@qq.com> Date: Tue, 17 Oct 2023 23:41:54 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=87=E7=AD=BE=EF=BC=8C?= =?UTF-8?q?=E5=88=86=E7=B1=BB=EF=BC=8C=E9=A6=96=E9=A1=B5=20=E6=96=87?= =?UTF-8?q?=E7=AB=A0=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/assets/js/heo.js | 29 +++- templates/assets/zhheo/blogex.js | 1 + templates/assets/zhheo/zhheoblog.css | 226 +++++++++++++-------------- templates/category.html | 139 ++++++++++------ templates/modules/post-list.html | 6 +- templates/modules/widgets/page.html | 32 ++-- templates/tag.html | 96 +++++++++--- 7 files changed, 313 insertions(+), 216 deletions(-) diff --git a/templates/assets/js/heo.js b/templates/assets/js/heo.js index c9795c84..aba709ba 100644 --- a/templates/assets/js/heo.js +++ b/templates/assets/js/heo.js @@ -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 () { 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") }, toPage: function() { - var e, t = document.querySelectorAll(".page-number"), o = parseInt(t[t.length - 1].innerHTML), n = document.getElementById("toPageText"), a = parseInt(n.value); - !isNaN(a) && a > 0 && "0" !== ("" + a)[0] && a <= o && (e = 1 === a ? "/" : "/page/" + a, - document.getElementById("toPageButton").href = e) + var e = document.querySelectorAll(".page-number") + , t = parseInt(e[e.length - 1].innerHTML) + , 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() { const greetings = GLOBAL_CONFIG.helloText.length == 0 ? ["🤖️ 数码科技爱好者", "🔍 分享与热心帮助", "🏠 智能家居小能手", "🔨 设计开发一条龙", "🤝 专修交互与设计", "🏃 脚踏实地行动派", "🧱 团队小组发动机", "💢 壮汉人狠话不多"] : GLOBAL_CONFIG.helloText diff --git a/templates/assets/zhheo/blogex.js b/templates/assets/zhheo/blogex.js index 27416fc9..f97bc485 100644 --- a/templates/assets/zhheo/blogex.js +++ b/templates/assets/zhheo/blogex.js @@ -590,6 +590,7 @@ function initBlog() { heo.initIndexEssay(), heo.reflashEssayWaterFall(), heo.darkModeStatus(), + heo.categoriesBarActive(), heo.initThemeColor(), heo.topCategoriesBarScroll(), //隐藏加载动画 diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css index c3c7dacc..e874548b 100644 --- a/templates/assets/zhheo/zhheoblog.css +++ b/templates/assets/zhheo/zhheoblog.css @@ -1599,10 +1599,6 @@ blockquote footer cite::before { color: rgb(255, 87, 34); } -#recent-posts > .recent-post-item:not(:first-child) { - margin-top: 1rem; -} - #recent-posts > .recent-post-item { display: flex; -webkit-box-orient: horizontal; @@ -1630,14 +1626,6 @@ blockquote footer cite::before { 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 { display: block !important; height: auto !important; @@ -1657,6 +1645,12 @@ blockquote footer cite::before { 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 { transform: scale(1.1); } @@ -8372,17 +8366,16 @@ a.categoryButton:hover { @media screen and (max-width: 768px) { #category-bar { - border-radius: 0; + border-radius:0; background: var(--heo-background); - margin-bottom: 0rem; + margin-bottom: 0; position: -webkit-sticky; position: sticky; - top: 60px; z-index: 1; - padding: 0rem 1rem 0rem 16px; + padding: 0; height: 50px; margin-top: 0; - align-items: center; + align-items: center } } @@ -8400,6 +8393,7 @@ a.categoryButton:hover { display: flex; white-space: nowrap; align-items: center; + margin-bottom: 4px } .category-in-bar-tips { @@ -8409,7 +8403,11 @@ a.categoryButton:hover { .category-bar-items { white-space: nowrap; overflow-x: scroll; + overflow-y: hidden; display: flex; + border-radius: 8px; + align-items: center; + height: 30px } .category-in-bar .category-in-bar-tips { @@ -8427,14 +8425,17 @@ a.categoryButton:hover { .category-bar-item a { padding: 0.1rem 0.5rem; - margin: 0 4px; - font-weight: bold; + margin-right: 6px; + font-weight: 700; border-radius: 8px; + display: flex; + align-items: center; + height: 30px } .category-bar-item:hover a { background: var(--heo-theme); - color: var(--heo-white); + color: var(--heo-card-bg); } .category-bar-item.select a { @@ -8684,10 +8685,6 @@ li { @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 { font-size: 20px; -webkit-line-clamp: 2; @@ -9086,26 +9083,10 @@ ins.adsbygoogle { 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) { #recent-posts .recent-post-item:hover { - border: none; - box-shadow: none; + border:var(--style-border-always); + box-shadow: none } } @@ -9114,20 +9095,15 @@ ins.adsbygoogle { #recent-posts > .recent-post-item .right_radius, #recent-posts > .recent-post-item .left_radius { - border-top-left-radius: 12px; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; - border-bottom-left-radius: 12px; - width: 75%; + width:75%; display: flex; - height: 200px; + height: 220px } #recent-posts > .recent-post-item:hover .post_cover img.post_bg { transform: scale(1.03); - transition: 0.3s ease-in-out; - filter: brightness(0.85); - border-radius: 12px 0 0 12px; + transition: .3s ease-in-out; + filter: brightness(.85) } #recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg { @@ -9138,8 +9114,9 @@ ins.adsbygoogle { min-width: 100%; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; - transition: 0.3s ease-in-out; + transition: .3s ease-in-out; min-height: 100%; + user-select: none } #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 { - transform: scale(1.03); - transition: 0.3s ease-in-out; - filter: brightness(0.85); - border-radius: 12px 0 0 12px; + transform: scale(1); + transition: 0s ease-in-out; + filter: brightness(1) +} + +@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) { #recent-posts > .recent-post-item .right_radius, #recent-posts > .recent-post-item .left_radius { - border-top-left-radius: 12px; - border-top-right-radius: 12px; - border-bottom-right-radius: 0px; - border-bottom-left-radius: 0px; - width: 100%; - display: flex; + width:100%; + display: flex } } @@ -9404,12 +9390,14 @@ span.recent-post-top-text { transition: all 0.3s ease 0s; } -#recent-posts > .recent-post-item:not(:first-child) { - margin-top: 0.5rem; +#recent-posts > .recent-post-item { + margin-top: .5rem; margin-bottom: 1rem; position: relative; overflow: hidden; + margin-top: 1rem; animation: slide-in .6s .4s backwards; + will-change: transform } /* 图片在左侧 */ @@ -9437,40 +9425,45 @@ span.recent-post-top-text { flex-direction: column; } - #recent-posts > .recent-post-item:not(:first-child) { - /*width: calc(50% - 0.5rem);*/ + #recent-posts > .recent-post-item { + width: calc(50% - 0.5rem); margin-top: 0.25rem; margin-bottom: 0.75rem; box-shadow: var(--heo-shadow-border); clip-path: inset(0 0 0 0 round 12px); } - #recent-posts > .recent-post-item:not(:first-child):active { - transform: scale(0.97); + #category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item { + 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 列：左右排列 */ - #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); } /* 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); } /* 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); } - /* 4 列 */ - #recent-posts > .recent-post-item.col4 { - width: calc(100% / 4 - .5rem); - } - #category-bar { margin-bottom: .75rem; box-shadow: var(--heo-shadow-border); @@ -9488,9 +9481,13 @@ span.recent-post-top-text { justify-content: space-between; align-items: flex-start; align-content: flex-start; + -webkit-user-select: none } } +#recent-posts { + position: relative +} /* 主页卡片手机端美化 */ @media screen and (max-width: 768px) { @@ -9498,15 +9495,23 @@ span.recent-post-top-text { border-radius: 0; } - #recent-posts > .recent-post-item:not(:first-child) { - margin: 1.5rem 1rem; + #recent-posts>.recent-post-item { + margin: 1.5rem 0; border-radius: 12px; - margin-top: 0.5rem; + margin-top: .5rem; border: var(--style-border-always); box-shadow: var(--heo-shadow-border); display: block; 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 { @@ -9521,6 +9526,14 @@ span.recent-post-top-text { 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 { margin-bottom: 0rem; } @@ -9552,7 +9565,9 @@ span.recent-post-top-text { right: 0; } - + #rightside { + display: none + } /* 背景 */ #web_bg { @@ -9575,43 +9590,14 @@ span.recent-post-top-text { transform: scale(1); } - #recent-posts > .recent-post-item > .recent-post-info > .article-title, - #recent-posts > .recent-post-item > .recent-post-info > .content, - #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap { - padding: 0 20px !important; + #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap, + #recent-posts>.recent-post-item>.recent-post-info>.article-title, + #recent-posts>.recent-post-item>.recent-post-info>.content { + 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 { line-height: 1.4; @@ -9754,12 +9740,14 @@ span.recent-post-top-text { } /* 文章标签置底 */ - #recent-posts > .recent-post-item > .recent-post-info { height: 174px; width: 100%; cursor: pointer; position: relative; + padding: 0; + display: inline-block; + overflow: hidden } @media screen and (max-width: 768px) { @@ -9783,15 +9771,15 @@ span.recent-post-top-text { } @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; } - #recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-meta-wrap { - bottom: 30px; + #recent-posts > .recent-post-item.top.post-card-large:hover > .recent-post-info > .article-meta-wrap { + 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; } } diff --git a/templates/category.html b/templates/category.html index 2afaba10..befcf3b1 100644 --- a/templates/category.html +++ b/templates/category.html @@ -1,6 +1,6 @@ + th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category',title = ${'分类' + ': ' + category.spec.displayName + ' | ' + site.title}, head = ~{::head})}">
-
-
分类
-
-
-
- 首页 -
-
- +
+
+
+ 首页 +
+
+ +
+
+ + 更多 +
+
+ +
+ +
+ + + +
+
+
+
+ + + + + + 未读 +
+ + +
-
- - 更多 -
-
-
-
- - -
- - - -
-
- -
- -
- - [[${tag.spec.displayName}]] - - • + +
+ + + + + [[${#strings.trim(tag.spec.displayName)}]] + + + + + + + + + +
+ +
+
+
- -
diff --git a/templates/modules/post-list.html b/templates/modules/post-list.html index 0ca62934..1e5df13d 100644 --- a/templates/modules/post-list.html +++ b/templates/modules/post-list.html @@ -9,10 +9,10 @@
-
- + 未读
diff --git a/templates/modules/widgets/page.html b/templates/modules/widgets/page.html index 6e827d99..1d47a43a 100644 --- a/templates/modules/widgets/page.html +++ b/templates/modules/widgets/page.html @@ -12,7 +12,7 @@ - + … @@ -49,7 +49,7 @@
下页
 -
+
@@ -57,21 +57,21 @@
+ + +
- - diff --git a/templates/tag.html b/templates/tag.html index cf5e475e..20f3429c 100644 --- a/templates/tag.html +++ b/templates/tag.html @@ -26,38 +26,82 @@
-
-
- -
- - - -
-
- -
- +