fix(toc): fix toc link bug

pogor-dev · Feb 21, 2020 · a4116f1 · a4116f1
1 parent 41a14bc
commit a4116f1
Show file tree

Hide file tree

Showing 12 changed files with 183 additions and 177 deletions.
diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
@@ -1,6 +1,7 @@
 html {
   font-family: $global-font-family;
   font-size: 16px;
+  width:100%;
 }
 
 /* scrollbar, only support webkit */

diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
@@ -2,8 +2,7 @@
   .page {
     max-width: 780px;
 
-    .post-toc {
-      width: 300px;
+    #toc-auto {
       margin-left: 800px;
     }
   }
@@ -13,8 +12,7 @@
   .page {
     max-width: 680px;
 
-    .post-toc {
-      width: 240px;
+    #toc-auto {
       margin-left: 700px;
     }
   }
@@ -24,8 +22,7 @@
   .page {
     max-width: 560px;
 
-    .post-toc {
-      width: 180px;
+    #toc-auto {
       margin-left: 580px;
     }
   }
@@ -41,11 +38,11 @@
   .page {
     max-width: 80%;
 
-    .post-toc {
+    #toc-auto {
       display: none;
     }
 
-    .post-toc-mobile {
+    #toc-static {
       display: block;
     }
   }

diff --git a/assets/css/_partial/_single/_toc.scss b/assets/css/_partial/_single/_toc.scss
@@ -1,25 +1,25 @@
-.post-toc {
+#toc-auto {
   display: block;
   position: absolute;
-  width: 360px;
+  width: 100%;
   margin-left: 1000px;
   padding: 0 .8rem;
   border-left: 1px solid $global-border-color;
   overflow-wrap: break-word;
   box-sizing: border-box;
-  top: $post-toc-top;
+  top: if($header-normal-mode-desktop, 7rem, 12rem);
 
   .dark-theme & {
     border-left: 1px solid $global-border-color-dark;
   }
 
-  .post-toc-title {
+  .toc-title {
     font-weight: 400;
     margin: .8rem 0;
     text-transform: uppercase;
   }
 
-  .post-toc-content {
+  .toc-content {
     &.always-active ul {
       display: block;
     }
@@ -73,13 +73,13 @@
   }
 }
 
-.post-toc-mobile {
+#toc-static {
   display: none;
   padding-top: .8rem;
 
   details {
     summary {
-      .post-toc-title {
+      .toc-title {
         display: block;
         display: flex;
         justify-content: space-between;
@@ -110,7 +110,7 @@
     }
   }
 
-  .post-toc-content {
+  .toc-content {
     border: 2px solid $code-background-color;
 
     >nav>ul {

diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -62,9 +62,6 @@ $header-position-mobile: if($header-normal-mode-mobile, static, fixed) !default;
 $page-padding-top-desktop: if($header-normal-mode-desktop, 1rem, 6rem) !default;
 $page-padding-top-mobile: if($header-normal-mode-mobile, 1rem, 6rem) !default;
 
-// Top of the post toc
-$post-toc-top: if($header-normal-mode-desktop, 7rem, 12rem) !default;
-
 // Color of the hover header item
 $header-hover-color: #161209 !default;
 $header-hover-color-dark: #fff !default;

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -59,7 +59,7 @@ themesDir = "../.."
         pre = '<i class="fas fa-language fa-fw"></i>'
         name = ""
         title = "简体中文"
-        url = "zh"
+        url = "/zh/"
         weight = 5
       [languages.en.params]
         # LoveIt theme version

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -28,7 +28,7 @@
                     {{- .Site.Title -}}
                 </a>
             </div>
-            <div class="menu-toggle" id="menu-toggle">
+            <div class="menu-toggle" id="menu-toggle-mobile">
                 <span></span><span></span><span></span>
             </div>
         </div>

diff --git a/layouts/partials/script.html b/layouts/partials/script.html
@@ -162,7 +162,6 @@
                     {{- $key }}: {{ $var | safeJS -}},
                 {{- end -}}
             };
-            window.echartsArr = [];
         </script>
     {{- end -}}
 {{- end -}}

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -47,28 +47,24 @@ <h1 class="single-title animated flipInX">{{ .Title }}</h1>
 
         {{- /* TOC */ -}}
         {{- if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}}
-            <aside class="post-toc" id="post-toc">
-                <h2 class="post-toc-title">{{ T "toc" }}</h2>
+            <div class="toc-auto" id="toc-auto">
+                <h2 class="toc-title">{{ T "toc" }}</h2>
                 {{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default true }}
-                <div class="post-toc-content{{ if not (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false)) }} always-active{{ end }}">
-                    {{- .TableOfContents -}}
-                </div>
-            </aside>
-            <aside class="post-toc-mobile" id="post-toc-mobile">
+                <div class="toc-content{{ if not (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false)) }} always-active{{ end }}" id="toc-content-auto"></div>
+            </div>
+            <div class="toc-static" id="toc-static">
                 <details>
                     <summary>
-                        <div class="post-toc-title">
+                        <div class="toc-title">
                             <span>{{ T "toc" }}</span>
                             <span><i class="details icon fas fa-angle-down"></i></span>
                         </div>
                     </summary>
-                    <div class="post-toc-content">
-                        {{- $toc := .TableOfContents -}}
-                        {{- $toc = replaceRE `id="TableOfContents"` `id="TableOfContentsMobile"` $toc -}}
-                        {{- $toc | safeHTML -}}
+                    <div class="toc-content" id="toc-content-static">
+                        {{- .TableOfContents -}}
                     </div>
                 </details>
-            </aside>
+            </div>
         {{- end -}}
 
         {{- /* Content */ -}}

diff --git a/resources/_gen/assets/scss/css/style.template.scss_b8ba9a60a151126bfcde1421dc0b972d.content b/resources/_gen/assets/scss/css/style.template.scss_b8ba9a60a151126bfcde1421dc0b972d.content