当前目录高亮

halo-dev · Feb 15, 2020 · 6c28c6f · 6c28c6f
1 parent 5204a9d
commit 6c28c6f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 12 deletions.
diff --git a/assets/styles/_blocks/header.less b/assets/styles/_blocks/header.less
@@ -104,8 +104,12 @@
   }
 }
 
-@media only screen and (max-width: 767px) {
-  .scroll-menu {
+@media only screen and (max-width: 960px) {
+  //.scroll-menu {
+  //  display: none !important;
+  //}
+
+  .menu-scroll-item, #headerCtrl {
     display: none !important;
   }
 
@@ -143,4 +147,8 @@
   cursor: pointer;
 }
 
+.site-header a.active-current {
+  color: #2474b5;
+}
+
 // 其余样式参考 style.less 第4和第5部分
diff --git a/assets/styles/_core/style.less b/assets/styles/_core/style.less
@@ -2252,8 +2252,11 @@ pre .storage {
 
 .comments-area {
   border-top: 1px solid #d4d3d3;
-  padding-bottom: 45px;
-  padding-top: 45px;
+  padding:30px;
+}
+
+.article-info .comments-area {
+  padding: 30px 0 !important;
 }
 
 #comments-show {

diff --git a/assets/styles/main.css b/assets/styles/main.css
@@ -2153,8 +2153,10 @@ pre .storage {
  */
 .comments-area {
   border-top: 1px solid #d4d3d3;
-  padding-bottom: 45px;
-  padding-top: 45px;
+  padding: 30px;
+}
+.article-info .comments-area {
+  padding: 30px 0 !important;
 }
 #comments-show {
   background: 0;
@@ -3187,8 +3189,9 @@ a.toc-link {
 .icon-menu:after {
   bottom: 5px;
 }
-@media only screen and (max-width: 767px) {
-  .scroll-menu {
+@media only screen and (max-width: 960px) {
+  .menu-scroll-item,
+  #headerCtrl {
     display: none !important;
   }
   .sidebar-toggle {
@@ -3218,6 +3221,9 @@ a.toc-link {
 .fa-search:hover {
   cursor: pointer;
 }
+.site-header a.active-current {
+  color: #2474b5;
+}
 .searchbox {
   display: none;
   perspective: 50em;

diff --git a/module/header.ftl b/module/header.ftl
@@ -33,7 +33,7 @@
     <div id="scrollMenu" style="display: none;" class="scroll-menu header-inner">
         <div class="menu-items">
             <#if settings.header_logoimg?? && settings.header_logoimg!=''>
-                <a href="${context!}" style="margin-right: 0; display: inline-block;height: 100%; line-height: 52px;">
+                <a href="${context!}" style="margin-right: 0; display: inline-block;height: 100%; line-height: 52px;" onfocus="this.blur();">
                     <img src="${settings.header_logoimg}" alt="${options.blog_title!}"
                             <#if settings.header_logo_height?? && settings.header_logo_height != ''>
                                 style=" height: ${settings.header_logo_height} "
@@ -44,7 +44,7 @@
             </#if>
             <@menuTag method="tree">
                 <#list menus?sort_by('priority') as menu>
-                    <a href="${menu.url!}" target="${menu.target!}">${menu.name}</a>
+                    <a href="${menu.url!}" target="${menu.target!}" onfocus="this.blur();" class="menu-scroll-item">${menu.name}</a>
                 </#list>
             </@menuTag>
         </div>

diff --git a/module/script.ftl b/module/script.ftl
@@ -177,6 +177,19 @@
         }
     });
 
+    // 当前目录菜单高亮
+    var nav = document.getElementById("scrollMenu");
+    var links = nav.getElementsByTagName("a");
+    var currenturl = document.location.href;
+    var last = 0;
+    for (var i = 0; i < links.length; i++) {
+        var linkurl = links[i].getAttribute("href");
+        if (currenturl.indexOf(linkurl) !== -1) {
+            last = i;
+        }
+    }
+    $(links[last]).addClass('active-current');
+
 </script>
 
 <#--目录-->

diff --git a/sheet.ftl b/sheet.ftl
@@ -13,7 +13,8 @@
                             <img src="${sheet.thumbnail!}" alt="${sheet.title!}">
                         </div>
                     <#else>
-                        <div class="cover-bg"  style="background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);">
+                        <div class="cover-bg"
+                             style="background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);">
                         </div>
                     </#if>
                     <div class="cover-content">
@@ -26,8 +27,8 @@
                 <div class="sheet-content">
                     ${sheet.formatContent!}
                 </div>
-                <#include "module/footer.ftl">
             </div>
+            <#include "module/footer.ftl">
         </main>
     </div>
     </body>