优化部分样式

templates/archives.html

@@ -17,7 +17,7 @@
         <main class="layout" id="content-inner">
             <!-- archive -->
             <div id="archive">
-                <div class="article-sort-title">文章 - [[${siteStatsFinder.getStats().post}]]</div>
+                <div class="article-sort-title">文章<sup>[[${siteStatsFinder.getStats().post}]]</sup></div>
                 <div class="article-sort" th:each="archive : ${archives.items}"
                      th:with='postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'>
                     <div class="article-sort-item year" th:text="${archive.year}"></div>

templates/assets/js/heo.js

@@ -72,6 +72,19 @@ var heo = {
             $("#cookies-window").hide())
     },
 
+    tagPageActive: function() {
+        var e = window.location.pathname;
+        if (/\/tags\/.*?/.test(e = decodeURIComponent(e))) {
+            var t = e.split("/")[2];
+            if (document.querySelector("#tag-page-tags")) {
+                $("a").removeClass("select");
+                var o = document.getElementById(t);
+                o && (o.classList.add("select"),
+                    o.style.order = "-1")
+            }
+        }
+    },
+
     // 页脚友链
     addFriendLinksInFooter: function () {
         var footerRandomFriendsBtn = document.getElementById("footer-random-friends-btn");

templates/assets/zhheo/blogex.js

@@ -594,6 +594,7 @@ function initBlog() {
     heo.topCategoriesBarScroll(),
     //隐藏加载动画
     GLOBAL_CONFIG.loadingBox &&  heo.hideLoading(),
+    heo.tagPageActive(),
     initObserver(),
     checkUrlAndAddHideBanner()
 

templates/assets/zhheo/commentBarrage.css

@@ -64,13 +64,20 @@
 }
 
 .comment-barrage-item .comment-barrage-close:hover {
-    color: var(--heo-main);
+    color: var(--heo-lighttext);
 }
 
-.comment-barrage-item .comment-barrage-close .heofont {
+.comment-barrage-item .comment-barrage-close .haofont {
+    color: var(--heo-fontcolor);
+    transition: all 0.3s ease 0s;
     font-size: 18px !important;
 }
 
+.comment-barrage-item .comment-barrage-close:hover .haofont {
+    color: var(--heo-lighttext);
+}
+
+
 .comment-barrage-item pre {
     display: none;
 }

templates/assets/zhheo/zhheoblog.css

@@ -1227,11 +1227,6 @@ blockquote footer cite::before {
     -webkit-line-clamp: 2;
 }
 
-.article-sort-item-title:hover {
-    color: rgb(48, 122, 246);
-    transform: translateX(10px);
-}
-
 .article-sort-item-img {
     overflow: hidden;
     width: 80px;
@@ -6181,7 +6176,7 @@ a {
 }
 
 a:hover {
-    color: var(--heo-hovertext);
+    color: var(--heo-lighttext);
 }
 
 /* 分割线 */
@@ -10486,7 +10481,19 @@ a.extend.prev {
     border: var(--style-border);
     width: calc(100% - 300px);
     align-self: flex-start;
-    animation: slide-in 0.6s 0.1s backwards;
+    animation: slide-in .6s .1s backwards;
+    position: relative;
+    overflow: hidden
+}
+
+#tag {
+    padding: 3rem 2rem 1rem 2rem
+}
+
+@media screen and (min-width: 1300px) {
+    #tag {
+        padding:4rem 2rem 1rem 2rem;
+    }
 }
 
 #page {
@@ -11012,8 +11019,8 @@ span.post-meta-position {
 
 /* 文章tab样式 */
 #article-container ul > li:not(.tab):before {
-    border: 0.21em solid var(--heo-lighttext);
+    border: 0.21em solid var(--heo-main);
-    background: var(--heo-lighttext);
+    background: var(--heo-main);
 }
 
 #article-container ol,
@@ -13333,10 +13340,6 @@ span.tagsPageCount {
 }
 
 
-#post .tag_share .post-meta__tags:hover span.tagsPageCount {
-    color: var(--heo-lighttext);
-}
-
 #tag #tag-page-tags a.select .tagsPageCount {
     background: var(--heo-card-bg);
     color: var(--heo-lighttext);
@@ -13436,8 +13439,31 @@ figure.gallery-group:hover .gallery-group-name::after {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin: 0 -0.75rem;
+    margin: 0 -.25rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: .5rem;
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    padding: 1rem 2rem;
+    left: 0;
+    top: 0;
+    max-height: 64px;
+    overflow: hidden;
+    background: var(--heo-card-bg);
+    backdrop-filter: saturate(180%) blur(20px);
+    transition: .1s ease-out
+}
+
+@media screen and (max-width: 768px) {
+    #tag #tag-page-tags {
+        display:none
+    }
+}
+
+#tag #tag-page-tags:hover {
+    max-height: 1000px;
+    transition: .3s ease-out;
+    background: var(--heo-maskbgdeep)
 }
 
 #tag #tag-page-tags a {
@@ -13445,10 +13471,11 @@ figure.gallery-group:hover .gallery-group-name::after {
     margin: 0.25rem 0.25rem;
     line-height: 1.6;
     border-radius: 8px;
-    color: var(--heo-fontcolor) !important;
+    color: var(--heo-fontcolor)!important;
     border: var(--style-border-always);
     display: flex;
     align-items: center;
+    background: var(--heo-card-bg)
 }
 
 #tag #tag-page-tags a.select {
@@ -13491,6 +13518,14 @@ figure.gallery-group:hover .gallery-group-name::after {
     padding-left: 0;
 }
 
+.article-sort-title sup {
+    margin-left: 4px;
+    font-size: 16px;
+    font-weight: 700;
+    opacity: .4;
+    top: -1em
+}
+
 .article-sort-item {
     margin: 0 0 1rem 0rem;
     overflow: hidden;
@@ -13538,7 +13573,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 
 .article-sort-item-title:hover {
     transform: translateX(0px);
-    color: var(--heo-hovertext);
+    color: var(--heo-lighttext);
 }
 
 /* 友情链接页面 */
@@ -13607,7 +13642,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 }
 
 .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
-    color: var(--heo-white);
+    color: var(--heo-card-bg);
 }
 
 /* 友链标题 */
@@ -13631,7 +13666,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 }
 
 .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-name {
-    color: var(--heo-white);
+    color: var(--heo-card-bg)!important;
 }
 
 .flink#article-container .flink-list > .flink-list-item a {
@@ -13749,7 +13784,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 }
 
 .flink#article-container .site-card:hover .info .title {
-    color: var(--heo-white);
+    color: var(--heo-card-bg);
 }
 
 .flink#article-container .site-card:hover .info {
@@ -13772,11 +13807,6 @@ figure.gallery-group:hover .gallery-group-name::after {
     text-align: left;
 }
 
-.flink#article-container .site-card:hover .info .desc {
-    color: var(--heo-white);
-}
-
-
 @media screen and (min-width: 768px) {
     .flink#article-container .site-card:hover .info .desc {
         -webkit-line-clamp: 4;
@@ -13785,7 +13815,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 
 .flink#article-container .site-card:hover .info .desc {
     transition: 0.3s;
-    color: var(--heo-white);
+    color: var(--heo-card-bg);
     width: 100%
 }
 

templates/tag.html

@@ -21,7 +21,7 @@
                        th:classappend="${tag.metadata.name == tagItem.metadata.name} ? 'select'"
                        th:each="tagItem : ${tags}"
                        th:href="@{${tagItem.status.permalink}}"
-                       th:id="${tagItem.spec.displayName}">
+                       th:id="${tagItem.spec.slug}">
                         <span class="tags-punctuation">[[${tagItem.spec.displayName}]]</span>
                         <span class="tagsPageCount" th:text="${tagItem.status.visiblePostCount}"></span>
                     </a>