修复标签页和分类页高亮问题

chengzhongxue · Nov 19, 2022 · 6285174 · 6285174
1 parent d40cf2f
commit 6285174
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 57 deletions.
diff --git a/templates/assets/js/heo.js b/templates/assets/js/heo.js
@@ -89,57 +89,57 @@ var heo = {
 
     // 标签页面
     //分类条
-    tagPageActive: function () {
-        var urlinfo = window.location.pathname;
-        urlinfo = decodeURIComponent(urlinfo)
-        // console.log(urlinfo);
-        // 验证是否是分类链接
-        var pattern = /\/tags\/.*?\//;
-        var patbool = pattern.test(urlinfo);
-        // console.log(patbool);
-        // 获取当前的分类
-        if (patbool) {
-            var valuegroup = urlinfo.split("/");
-            // console.log(valuegroup[2]);
-            // 获取当前分类
-            var nowCategorie = valuegroup[2];
-            if (document.querySelector('#tag-page-tags')) {
-                $('a').removeClass('select')
-                document.getElementById(nowCategorie).classList.add("select");
-            }
-        }
-    },
+    // tagPageActive: function () {
+    //     var urlinfo = window.location.pathname;
+    //     urlinfo = decodeURIComponent(urlinfo)
+    //     // console.log(urlinfo);
+    //     // 验证是否是分类链接
+    //     var pattern = /\/tags\/.*?\//;
+    //     var patbool = pattern.test(urlinfo);
+    //     // console.log(patbool);
+    //     // 获取当前的分类
+    //     if (patbool) {
+    //         var valuegroup = urlinfo.split("/");
+    //         // console.log(valuegroup[2]);
+    //         // 获取当前分类
+    //         var nowCategorie = valuegroup[2];
+    //         if (document.querySelector('#tag-page-tags')) {
+    //             $('a').removeClass('select')
+    //             document.getElementById(nowCategorie).classList.add("select");
+    //         }
+    //     }
+    // },
 
     //分类条
-    categoriesBarActive: function () {
-        if (document.querySelector('#category-bar')) {
-            $(".category-bar-item").removeClass("select")
-        }
-        var urlinfo = window.location.pathname;
-        urlinfo = decodeURIComponent(urlinfo);
-        // console.log(urlinfo);
-        //判断是否是首页
-        if (urlinfo == '/') {
-            if (document.querySelector('#category-bar')) {
-                document.getElementById('category-bar-home').classList.add("select");
-            }
-        } else {
-            // 验证是否是分类链接
-            var pattern = /\/categories\/.*?\//;
-            var patbool = pattern.test(urlinfo);
-            // console.log(patbool);
-            // 获取当前的分类
-            if (patbool) {
-                var valuegroup = urlinfo.split("/");
-                // console.log(valuegroup[2]);
-                // 获取当前分类
-                var nowCategorie = valuegroup[2];
-                if (document.querySelector('#category-bar')) {
-                    document.getElementById(nowCategorie).classList.add("select");
-                }
-            }
-        }
-    },
+    // categoriesBarActive: function () {
+    //     if (document.querySelector('#category-bar')) {
+    //         $(".category-bar-item").removeClass("select")
+    //     }
+    //     var urlinfo = window.location.pathname;
+    //     urlinfo = decodeURIComponent(urlinfo);
+    //     // console.log(urlinfo);
+    //     //判断是否是首页
+    //     if (urlinfo == '/') {
+    //         if (document.querySelector('#category-bar')) {
+    //             document.getElementById('category-bar-home').classList.add("select");
+    //         }
+    //     } else {
+    //         // 验证是否是分类链接
+    //         var pattern = /\/categories\/.*?\//;
+    //         var patbool = pattern.test(urlinfo);
+    //         // console.log(patbool);
+    //         // 获取当前的分类
+    //         if (patbool) {
+    //             var valuegroup = urlinfo.split("/");
+    //             // console.log(valuegroup[2]);
+    //             // 获取当前分类
+    //             var nowCategorie = valuegroup[2];
+    //             if (document.querySelector('#category-bar')) {
+    //                 document.getElementById(nowCategorie).classList.add("select");
+    //             }
+    //         }
+    //     }
+    // },
 
     // 页脚友链
     addFriendLinksInFooter: function () {

diff --git a/templates/assets/zhheo/blogex.js b/templates/assets/zhheo/blogex.js
@@ -779,10 +779,10 @@ document.addEventListener('load', function () {
     heo.reflashEssayWaterFall()
     heo.addMediumInEssay()
     heo.darkModeStatus()
-    heo.categoriesBarActive()
+    // heo.categoriesBarActive()
     heo.initThemeColor()
     heo.hideLoading()
-    heo.tagPageActive()
+    // heo.tagPageActive()
 })
 window.onscroll = function () {
     percent();

diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html
@@ -110,7 +110,7 @@
         heo.reflashEssayWaterFall();
         heo.addMediumInEssay();
         heo.darkModeStatus();
-        heo.categoriesBarActive();
+        // heo.categoriesBarActive();
         heo.initThemeColor();
 
     </script>

diff --git a/templates/tag.html b/templates/tag.html
@@ -11,11 +11,12 @@
             <div id="tag">
                 <div id="tag-page-tags" th:with="tags = ${tagFinder.listAll()}">
                     <a style="font-size:1em;color:#3c228c"
-                       th:each="tag : ${tags}"
-                       th:href="@{${tag.status.permalink}}"
-                       th:id="${tag.spec.displayName}">
-                        <span class="tags-punctuation">#</span> [[${tag.spec.displayName}]]
-                        <span class="tagsPageCount" th:text="${tag.status.postCount}"></span>
+                       th:classappend="${tag.metadata.name == tagItem.metadata.name} ? 'select'"
+                       th:each="tagItem : ${tags}"
+                       th:href="@{${tagItem.status.permalink}}"
+                       th:id="${tagItem.spec.displayName}">
+                        <span class="tags-punctuation">#</span> [[${tagItem.spec.displayName}]]
+                        <span class="tagsPageCount" th:text="${tagItem.status.postCount}"></span>
                     </a>
                 </div>
                 <div class="article-sort-title" th:text="${tag.spec.displayName}"></div>