diff --git a/.gitignore b/.gitignore
index 7c578ae..79be2e0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,9 @@ exampleSite/content/**/
 # Exclude special files in data folder
 !exampleSite/data
 
+# Exclude special files in layouts folder
+!exampleSite/layouts
+
 # Exclude special files in static folder
 !exampleSite/static
 
diff --git a/VERSION b/VERSION
index ef8d756..8089590 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-4.2.0
\ No newline at end of file
+4.3.0
diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss
index 391f348..5415074 100644
--- a/assets/css/_colors.scss
+++ b/assets/css/_colors.scss
@@ -29,48 +29,44 @@
   color-scheme: light;
 }
 
-@if $darkmode {
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --body-bg-color: #{$body-bg-color-dark};
-      --content-bg-color: #{$content-bg-color-dark};
-      --card-bg-color: #{$card-bg-color-dark};
-      --text-color: #{$text-color-dark};
-      --blockquote-color: #{$blockquote-color-dark};
-      --link-color: #{$link-color-dark};
-      --link-hover-color: #{$link-hover-color-dark};
-      --brand-color: #{$brand-color-dark};
-      --brand-hover-color: #{$brand-hover-color-dark};
-      --table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
-      --table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
-      --menu-item-bg-color: #{$menu-item-bg-color-dark};
-      --theme-color: #{$theme-color-dark};
+:root[data-theme="dark"] {
+  --body-bg-color: #{$body-bg-color-dark};
+  --content-bg-color: #{$content-bg-color-dark};
+  --card-bg-color: #{$card-bg-color-dark};
+  --text-color: #{$text-color-dark};
+  --blockquote-color: #{$blockquote-color-dark};
+  --link-color: #{$link-color-dark};
+  --link-hover-color: #{$link-hover-color-dark};
+  --brand-color: #{$brand-color-dark};
+  --brand-hover-color: #{$brand-hover-color-dark};
+  --table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
+  --table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
+  --menu-item-bg-color: #{$menu-item-bg-color-dark};
+  --theme-color: #{$theme-color-dark};
 
-      --btn-default-bg: #{$btn-default-bg-dark};
-      --btn-default-color: #{$btn-default-color-dark};
-      --btn-default-border-color: #{$btn-default-border-color-dark};
-      --btn-default-hover-bg: #{$btn-default-hover-bg-dark};
-      --btn-default-hover-color: #{$btn-default-hover-color-dark};
-      --btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
+  --btn-default-bg: #{$btn-default-bg-dark};
+  --btn-default-color: #{$btn-default-color-dark};
+  --btn-default-border-color: #{$btn-default-border-color-dark};
+  --btn-default-hover-bg: #{$btn-default-hover-bg-dark};
+  --btn-default-hover-color: #{$btn-default-hover-color-dark};
+  --btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
 
-      --highlight-background: #{$highlight-background-dark};
-      --highlight-foreground: #{$highlight-foreground-dark};
-      --highlight-gutter-background: #{$highlight-gutter-background-dark};
-      --highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
+  --highlight-background: #{$highlight-background-dark};
+  --highlight-foreground: #{$highlight-foreground-dark};
+  --highlight-gutter-background: #{$highlight-gutter-background-dark};
+  --highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
 
-      color-scheme: dark;
-    }
+  color-scheme: dark;
+}
 
-    img {
-      opacity: .75;
+img[data-theme="dark"] {
+  opacity: .75;
 
-      &:hover {
-        opacity: .9;
-      }
-    }
-
-    iframe {
-      color-scheme: light;
-    }
+  &:hover {
+    opacity: .9;
   }
 }
+
+iframe[data-theme="dark"] {
+  color-scheme: light;
+}
diff --git a/assets/css/_common/components/index.scss b/assets/css/_common/components/index.scss
index 77f5cd3..ca8bf6a 100644
--- a/assets/css/_common/components/index.scss
+++ b/assets/css/_common/components/index.scss
@@ -12,7 +12,7 @@
   z-index: $zindex-5;
 }
 
-@import 'back-to-top';
+@import 'tool-buttons';
 @import 'reading-progress';
 
 @import 'post';
diff --git a/assets/css/_common/components/post/index.scss b/assets/css/_common/components/post/index.scss
index 0b065ff..179fc44 100644
--- a/assets/css/_common/components/post/index.scss
+++ b/assets/css/_common/components/post/index.scss
@@ -42,6 +42,32 @@
   }
 }
 
+.autonumber {
+  h2 {
+    counter-reset: h3;
+    &:before{
+      counter-increment: h2; 
+      content: counter(h2) ". ";
+    }
+  }
+
+  h3 {
+    counter-reset: h4;
+    &:before{
+      counter-increment: h3; 
+      content: counter(h2) ". " counter(h3) ". ";
+    }
+  }
+
+  h4 {
+    counter-reset: h5;
+    &:before{
+      counter-increment: h4; 
+      content: counter(h2) "." counter(h3) "." counter(h4) ". ";
+    }
+  }
+} 
+
 @import 'post-collapse';
 @import 'post-body';
 @import 'post-gallery';
diff --git a/assets/css/_common/components/post/post-header.scss b/assets/css/_common/components/post/post-header.scss
index d185c4c..d899968 100644
--- a/assets/css/_common/components/post/post-header.scss
+++ b/assets/css/_common/components/post/post-header.scss
@@ -113,9 +113,3 @@
   flex-basis: 100%;
   height: 0;
 }
-
-@if $busuanzi_post_views {
-  #busuanzi_container_page_pv {
-    display: inline-block;
-  }
-}
diff --git a/assets/css/_common/components/third-party/index.scss b/assets/css/_common/components/third-party/index.scss
index d6b6a2a..c254fdb 100644
--- a/assets/css/_common/components/third-party/index.scss
+++ b/assets/css/_common/components/third-party/index.scss
@@ -3,10 +3,10 @@
 @import 'utterances';
 @import 'search';
 @import 'related-posts';
-@import 'math';
 @import 'gitter';
 @import 'livere';
 @import 'waline';
+@import 'mermaid';
 
 .use-motion .animated {
   // Fix issue #48 #55
diff --git a/assets/css/_common/components/third-party/math.scss b/assets/css/_common/components/third-party/math.scss
deleted file mode 100644
index 46883b2..0000000
--- a/assets/css/_common/components/third-party/math.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@if $math_mathjax_enable {
-  mjx-container[jax='CHTML'][display='true'], .has-jax {
-    overflow: auto hidden;
-  }
-
-  mjx-container[display='true'] + br {
-    display: none;
-  }
-}
diff --git a/assets/css/_common/components/third-party/mermaid.scss b/assets/css/_common/components/third-party/mermaid.scss
new file mode 100644
index 0000000..7512808
--- /dev/null
+++ b/assets/css/_common/components/third-party/mermaid.scss
@@ -0,0 +1,3 @@
+.post-block .post-body .mermaid {
+  background: var(--highlight-foreground);
+}
\ No newline at end of file
diff --git a/assets/css/_common/components/third-party/search.scss b/assets/css/_common/components/third-party/search.scss
index e88eec0..d9a3e6a 100644
--- a/assets/css/_common/components/third-party/search.scss
+++ b/assets/css/_common/components/third-party/search.scss
@@ -13,7 +13,7 @@
     transition: visibility .4s, background .4s;
     visibility: hidden;
     width: 100%;
-    z-index: $zindex-4;
+    z-index: $zindex-4; 
 
     .search-active & {
       background: rgba(0, 0, 0, .3);
diff --git a/assets/css/_common/components/back-to-top.scss b/assets/css/_common/components/tool-buttons.scss
similarity index 51%
rename from assets/css/_common/components/back-to-top.scss
rename to assets/css/_common/components/tool-buttons.scss
index e777bcf..ae29f0b 100644
--- a/assets/css/_common/components/back-to-top.scss
+++ b/assets/css/_common/components/tool-buttons.scss
@@ -1,6 +1,48 @@
+.tool-buttons {
+
+  @include sidebar-toggle();
+  background: none;
+  bottom: 55px;
+  filter: alpha(opacity=0);
+  font-size: 12px;
+
+  .button {
+    display: block;
+    margin-bottom: 5px;
+    width: 36px;
+    height: 36px;
+    border-radius: 5px;
+    background-color: $tool-btn-bg;
+    color: $tool-btn-color;
+    text-align: center;
+    font-size: $font-size-larger;
+    line-height: 35px;
+    padding: 0;
+    outline: 0;
+    border: none;
+    text-transform: none;
+    cursor: pointer;
+    opacity: $tool-btn-opacity;
+    touch-action: manipulation;
+
+    &:hover {
+      color: $tool-btn-hover-fore-color;
+      opacity: $tool-btn-opacity-hover;
+    }
+  }
+
+  .goto-comments {
+      display: none;
+  }
+
+  .goto-comments-on {
+    display: block;
+  }
+}
+
 @if $back2top_enable {
   .back-to-top {
-    font-size: $b2t-font-size;
+    font-size: $font-size-smaller;
 
     @if not $back2top_scrollpercent {
       span {
diff --git a/assets/css/_common/outline/footer/index.scss b/assets/css/_common/outline/footer/index.scss
index 4bfdcd2..03cf5c6 100644
--- a/assets/css/_common/outline/footer/index.scss
+++ b/assets/css/_common/outline/footer/index.scss
@@ -29,6 +29,16 @@
     font-size: $font-size-smallest;
   }
 
+  .google-translate {
+    display: flex;
+    justify-content: center;
+
+    i {
+      font-size: $font-size-larger;
+      margin: auto 0;
+    }
+  }
+
   @if $footer_vendors_enable {
     .vendors-list {
       a {
@@ -97,16 +107,3 @@
     vertical-align: middle;
   }
 }
-
-.busuanzi-count {
-  @if $busuanzi_visitors {
-    #busuanzi_container_site_uv {
-      display: none;
-    }
-  }
-  @if $busuanzi_views {
-    #busuanzi_container_site_pv {
-      display: none;
-    }
-  }
-}
diff --git a/assets/css/_common/outline/header/menu.scss b/assets/css/_common/outline/header/menu.scss
index 495a7dd..01f4093 100644
--- a/assets/css/_common/outline/header/menu.scss
+++ b/assets/css/_common/outline/header/menu.scss
@@ -33,6 +33,8 @@
 
   .fa, .fab, .far, .fas {
     margin-right: 8px;
+    width: 16px;
+    text-align: center;
   }
 
   .badge {
diff --git a/assets/css/_common/outline/sidebar/index.scss b/assets/css/_common/outline/sidebar/index.scss
index 0fe80e5..da01454 100644
--- a/assets/css/_common/outline/sidebar/index.scss
+++ b/assets/css/_common/outline/sidebar/index.scss
@@ -1,4 +1,4 @@
-.sidebar-inner {
+.sidebar-inner, .sidebar-card-widget {
   color: $grey-dark;
   // Init Sidebar & TOC inner dimensions on all pages and for all schemes.
   $offset : if(($scheme == 'Pisces') or ($scheme == 'Gemini'), $sidebar-offset, $sidebar-padding);
@@ -39,3 +39,4 @@
 @import 'sidebar-toggle';
 @import 'sidebar-toc';
 @import 'site-state';
+@import 'sidebar-card-widget';
diff --git a/assets/css/_common/outline/sidebar/sidebar-card-widget.scss b/assets/css/_common/outline/sidebar/sidebar-card-widget.scss
new file mode 100644
index 0000000..0757a43
--- /dev/null
+++ b/assets/css/_common/outline/sidebar/sidebar-card-widget.scss
@@ -0,0 +1,60 @@
+.sidebar-card-widget {
+  background: var(--content-bg-color);
+  @if ($scheme == 'Pisces') or ($scheme == 'Gemini'){
+    border-radius: $border-radius;
+    box-shadow: $box-shadow;
+  }
+  box-sizing: border-box;
+  color: var(--text-color);
+  margin-top: $sidebar-offset;
+
+  .item-headline {
+    text-align: left;
+    font-size: $font-size-small;
+    font-weight: bold;
+
+    span {
+      margin-left: 8px;
+    }
+  }
+
+  .siteinfo {
+    font-size: $font-size-small;
+    text-align: left;
+
+    .siteinfo-item {
+      display: flex;
+      -webkit-box-align: center;
+      align-items: center;
+      padding: 2px 10px 0;
+
+      i {
+        width: 16px;
+        height: 16px;
+        text-align: center;
+        margin-right: 4px;
+      }
+
+
+      div:first-child {
+        -webkit-box-flex: 1;
+        -moz-box-flex: 1;
+        -o-box-flex: 1;
+        box-flex: 1;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        padding-right: 20px;
+      }
+    }
+  }
+}
+
+.back-to-top-card {
+  margin: 0;
+  padding: 0;
+
+  div:first-child {
+    margin: 0;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/_common/outline/sidebar/sidebar-toc.scss b/assets/css/_common/outline/sidebar/sidebar-toc.scss
index cca699b..c8e373f 100644
--- a/assets/css/_common/outline/sidebar/sidebar-toc.scss
+++ b/assets/css/_common/outline/sidebar/sidebar-toc.scss
@@ -1,62 +1,67 @@
-@if $toc_enable {
-  .post-toc {
-    font-size: $font-size-small;
-    padding: 0 8px;
 
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0 2px 5px 10px;
-      text-align: left;
+.post-toc {
+  font-size: $font-size-small;
+  padding: 0 8px;
+  
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0 2px 5px 10px;
+    text-align: left;
+    counter-reset: item;
 
-      > li {
-        padding-left: 0;
+    > li {
+      padding-left: 0;
+    }
+
+    a {
+      transition: all $transition-ease;
+
+      &:before {
+        content: counters(item, ".") ". "; 
+        counter-increment: item;
       }
+    }
+  }
 
-      a {
-        transition: all $transition-ease;
+  .nav-item {
+    line-height: 1.8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @if not $toc_wrap {
+      white-space: nowrap;
+    }
+  }
+
+  .nav {
+    .nav-child {
+      display: if($toc_expand_all, block, none);
+    }
+
+    .active > .nav-child {
+      display: block;
+    }
+
+    .active-current > .nav-child {
+      display: block;
+
+      > .nav-item {
+        display: block;
       }
     }
 
-    .nav-item {
-      line-height: 1.8;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      @if not $toc_wrap {
-        white-space: nowrap;
-      }
+    .active > a {
+      border-bottom-color: $sidebar-highlight;
+      color: $sidebar-highlight;
     }
 
-    .nav {
-      .nav-child {
-        display: if($toc_expand_all, block, none);
-      }
+    .active-current > a {
+      color: $sidebar-highlight;
 
-      .active > .nav-child {
-        display: block;
-      }
-
-      .active-current > .nav-child {
-        display: block;
-
-        > .nav-item {
-          display: block;
-        }
-      }
-
-      .active > a {
-        border-bottom-color: $sidebar-highlight;
+      &:hover {
         color: $sidebar-highlight;
       }
-
-      .active-current > a {
-        color: $sidebar-highlight;
-
-        &:hover {
-          color: $sidebar-highlight;
-        }
-      }
     }
   }
 }
diff --git a/assets/css/_common/scaffolding/highlight/copy-code.scss b/assets/css/_common/scaffolding/highlight/copy-code.scss
index cdc2f93..d30c876 100644
--- a/assets/css/_common/scaffolding/highlight/copy-code.scss
+++ b/assets/css/_common/scaffolding/highlight/copy-code.scss
@@ -11,6 +11,7 @@
 
   pre {
     position: relative;
+    overflow-x: auto;
   }
 
   table tbody tr {
diff --git a/assets/css/_common/scaffolding/normalize.scss b/assets/css/_common/scaffolding/normalize.scss
index beb43cf..4882b21 100644
--- a/assets/css/_common/scaffolding/normalize.scss
+++ b/assets/css/_common/scaffolding/normalize.scss
@@ -17,6 +17,7 @@ html {
  */
 body {
   margin: 0;
+  counter-reset: h2;
 }
 
 /**
diff --git a/assets/css/_variables/base.scss b/assets/css/_variables/base.scss
index 492bc72..f6d9045 100644
--- a/assets/css/_variables/base.scss
+++ b/assets/css/_variables/base.scss
@@ -283,6 +283,13 @@ $site-state-item-name-color           : inherit;
 
 // Components
 // --------------------------------------------------
+// Tool buttons
+$tool-btn-bg               : $black-deep;
+$tool-btn-color            : white;
+$tool-btn-hover-fore-color : $orange;
+$tool-btn-opacity          : .8;
+$tool-btn-opacity-hover    : 1;
+
 // Back to top
 $b2t-opacity                  : .8;
 $b2t-opacity-hover            : 1;
diff --git a/assets/css/gemini/style.css b/assets/css/gemini/style.css
deleted file mode 100644
index 8fd9dfe..0000000
--- a/assets/css/gemini/style.css
+++ /dev/null
@@ -1,176 +0,0 @@
-/** User-defined style. **/
-{{ $P := .Site.Params -}}
-
-{{- with $P.sidebar -}}
-{{- $width := (int (math.Max .width 240)) -}}
-{{- $offset := (int (math.Max .offset 12)) -}}
-{{- $padding := (int (math.Max .padding 18)) -}}
-{{- $positPad := (add $width $offset) }}
-.main {
-{{ if eq .position "right" }}
-  flex-direction: row-reverse;
-{{- end }}
-}
-.header-inner {
-  width: {{ $width }}px;
-}
-.main-inner {
-  width: calc(100% - {{ $positPad }}px);
-}
-.sidebar {
-  width: {{ $width }}px;
-  visibility: inherit;
-}
-.sidebar-inner {
-  padding: {{ $padding }}px 10px;
-}
-.footer-inner {
-  padding-{{ .position }}: {{ $positPad }}px;
-}
-{{- end }}
-
-.site-author-image {
-{{- if $P.avatar.rounded }}
-  border-radius:50%;
-{{- end }}
-{{- if $P.avatar.rotated }}
-  transition: transform 1s ease-out;
-{{- end }}
-}
-
-.site-author-image:hover {
-  transform: rotateZ(360deg);
-}
-
-.site-state-item {
-  border-left: 1px solid #eee;
-}
-.site-state-item:first-child {
-  border-left: none;
-}
-
-.rss-link {
-  border-top: 1px dotted #ccc;
-  border-bottom: 1px dotted #ccc;
-  text-align: center;
-  margin: 10px 0 0 0;
-}
-
-.rss-link a {
-  display: block;
-  color: #fc6423;
-  border-bottom: none;
-}
-
-.rss-link a:hover {
-  animation-name: wobble-vertical;
-  animation-duration: 2s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: 1;
-}
-
-.rss-link a:hover > i {
-  -webkit-transform: scaleY(-1);
-  transform: scaleY(-1);
-}
-
-.links-of-social a {
-  font-size: 0.8125em;
-}
-.links-of-social .fa,
-.links-of-social .fab,
-.links-of-social .far,
-.links-of-social .fas {
-  margin-right: 2px;
-}
-.links-of-social {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.links-of-social-item {
-  margin: 5px 0 0;
-{{- if and $P.socialIcons.enable (not $P.socialIcons.iconsOnly) }}
-  width: 50%;
-{{- end }}
-}
-.links-of-social-item a {
-  box-sizing: border-box;
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  padding: 0 5px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.links-of-social-item a {
-  border-bottom: 0;
-  border-radius: 4px;
-  display: block;
-}
-.links-of-social-item a:hover {
-  background: var(--body-bg-color);
-}
-
-.cc-license {
-{{ if eq $P.creativeCommons.size "big" }}
-  margin-top: 10px;
-{{ else }}
-  margin-top: 5px;
-{{- end }}
-}
-
-.back-to-top {
-  bottom: 30px;
-}
-
-.posts-expand .post-meta-container {
-  margin: 10px auto;
-}
-
-.post-meta-item-icon {
-  margin: 0 0 0 -5px;
-}
-
-:not(.post-meta-break) + .post-meta-item::before {
-    content: '|';
-    margin: 0 0.3em;
-}
-
-.post-meta-catg:not(:last-child)::after {
-  content: ';';
-  margin: 0px;
-}
-
-.posts-expand .post-header {
-  margin: 0;
-}
-
-.posts-expand .post-body {
-  margin: 28px 0;
-}
-
-.post-footer-btn {
-  text-align: center;
-}
-
-.beian img {
-  display: inline-block;
-  margin: 0 3px;
-  vertical-align: middle;
-}
-
-.with-love {
-{{- with $P.footer.icon.color }}
-  color: {{ $P.footer.icon.color  }};
-{{- end }}
-{{- if $P.footer.icon.animated }}
-  animation: icon-animate 1.33s ease-in-out infinite;
-{{- end }}
-}
-
-/* Font Awesome */
-.fa-spin {
-  -webkit-animation: fa-spin .8s infinite linear;
-  animation: fa-spin .8s infinite linear;
-} 
diff --git a/assets/css/gt.scss b/assets/css/gt.scss
new file mode 100644
index 0000000..65d3251
--- /dev/null
+++ b/assets/css/gt.scss
@@ -0,0 +1,892 @@
+:root {
+  --gt-blue: #2640b2;
+  --gt-border: #d1d5db;
+}
+
+@keyframes "goog-te-spinner-rotator" {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+@keyframes "goog-te-spinner-dash" {
+  0% {
+    stroke-dashoffset: 187;
+  }
+  50% {
+    stroke-dashoffset: 46.75;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 187;
+    transform: rotate(450deg);
+  }
+}
+.goog-te-banner-frame {
+  left: 0px;
+  top: 0px;
+  height: 39px;
+  width: 100%;
+  z-index: 10000001;
+  position: fixed;
+  border: none;
+  border-bottom: 1px solid #6b90da;
+  margin: 0;
+  box-shadow: 0 0 8px 1px #999999;
+  _position: absolute;
+}
+.goog-te-menu-frame {
+  z-index: 10000002;
+  position: fixed;
+  box-shadow: 0.5rem 0.875rem 2.375rem rgba(39, 44, 49, 0.06), 0.0625rem 0.1875rem 0.5rem rgba(39, 44, 49, 0.03);
+  _position: absolute;
+}
+.goog-te-ftab-frame {
+  z-index: 10000000;
+  border: none;
+  margin: 0;
+}
+.goog-te-gadget {
+  font-family: arial;
+  font-size: 11px;
+  color: #666;
+  white-space: nowrap;
+  display: inline-flex;
+  img {
+    vertical-align: middle;
+    border: none;
+    display: inline-block;
+  }
+  .goog-te-combo {
+    margin: 4px 0;
+  }
+
+  div:first-child {
+    margin: 0 10px;
+  }
+}
+.goog-te-gadget-simple {
+  background-color: #fff;
+  border-left: 1px solid #d5d5d5;
+  border-top: 1px solid #9b9b9b;
+  border-bottom: 1px solid #e8e8e8;
+  border-right: 1px solid #d5d5d5;
+  font-size: 10pt;
+  display: inline-block;
+  padding-top: 1px;
+  padding-bottom: 2px;
+  cursor: pointer;
+  zoom: 1;
+  *display: inline;
+  .goog-te-menu-value {
+    color: #000;
+    span {
+      text-decoration: none;
+    }
+  }
+}
+.goog-te-gadget-icon {
+  margin-left: 2px;
+  margin-right: 2px;
+  width: 19px;
+  height: 19px;
+  border: none;
+  vertical-align: middle;
+}
+.goog-te-combo {
+  margin-left: 4px;
+  margin-right: 4px;
+  vertical-align: baseline;
+  *vertical-align: middle;
+  font-family: arial;
+  font-size: 10pt;
+}
+.goog-logo-link {
+  font-size: 12px;
+  font-weight: bold;
+  color: #444;
+  text-decoration: none;
+  margin: 0 5px;
+  border-bottom: 0;
+  &:link {
+    font-size: 12px;
+    font-weight: bold;
+    color: #444;
+    text-decoration: none;
+  }
+  &:visited {
+    font-size: 12px;
+    font-weight: bold;
+    color: #444;
+    text-decoration: none;
+  }
+  &:hover {
+    font-size: 12px;
+    font-weight: bold;
+    color: #444;
+    text-decoration: none;
+  }
+  &:active {
+    font-size: 12px;
+    font-weight: bold;
+    color: #444;
+    text-decoration: none;
+  }
+}
+.goog-te-banner {
+  .goog-logo-link {
+    display: block;
+    margin: 0px 10px;
+    padding-top: 2px;
+    padding-left: 4px;
+  }
+  * {
+    font-family: arial;
+    font-size: 10pt;
+  }
+  margin: 0;
+  background-color: #fff;
+  overflow: hidden;
+  img {
+    border: none;
+  }
+  table {
+    tbody {
+      tr {
+        td {
+          &:nth-child(2) {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+.goog-close-link {
+  display: block;
+  margin: 0px 10px;
+}
+.goog-te-ftab {
+  * {
+    font-family: arial;
+    font-size: 10pt;
+  }
+  margin: 0px;
+  background-color: #fff;
+  white-space: nowrap;
+}
+.goog-te-menu {
+  * {
+    font-family: arial;
+    font-size: 10pt;
+  }
+  background-color: #ffffff;
+  text-decoration: none;
+  border: 2px solid #c3d9ff;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.goog-te-menu2 {
+  * {
+    font-family: arial;
+    font-size: 10pt;
+  }
+  background-color: #ffffff;
+  text-decoration: none;
+  overflow: hidden;
+  padding: 4px;
+  border: 1px solid var(--gt-border);
+  border-radius: 4px;
+}
+.goog-te-balloon {
+  * {
+    font-family: arial;
+    font-size: 10pt;
+  }
+  background-color: #ffffff;
+  overflow: hidden;
+  padding: 8px;
+  border: none;
+  border-radius: 10px;
+  img {
+    border: none;
+  }
+}
+.goog-te-banner-content {
+  color: #000;
+  img {
+    vertical-align: middle;
+  }
+}
+.goog-te-banner-info {
+  color: #666;
+  vertical-align: top;
+  margin-top: 0px;
+  font-size: 7pt;
+}
+.goog-te-banner-margin {
+  width: 8px;
+}
+.goog-te-button {
+  div {
+    border: 1px solid var(--gt-border);
+    height: 20px;
+  }
+  button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    height: 20px;
+    overflow: hidden;
+    margin: 0;
+    vertical-align: top;
+    white-space: nowrap;
+    &:active {
+      background: none repeat scroll 0 0 #cccccc;
+    }
+  }
+}
+.goog-te-ftab-link {
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 10pt;
+  border: 1px outset #888;
+  padding: 6px 10px;
+  white-space: nowrap;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  img {
+    margin-left: 2px;
+    margin-right: 2px;
+    width: 19px;
+    height: 19px;
+    border: none;
+    vertical-align: middle;
+  }
+  span {
+    text-decoration: underline;
+    margin-left: 2px;
+    margin-right: 2px;
+    vertical-align: middle;
+  }
+}
+.goog-float-top {
+  .goog-te-ftab-link {
+    padding: 2px 2px;
+    border-top-width: 0px;
+  }
+}
+.goog-float-bottom {
+  .goog-te-ftab-link {
+    padding: 2px 2px;
+    border-bottom-width: 0px;
+  }
+}
+.goog-te-menu-value {
+  text-decoration: none;
+  color: var(--gt-blue);
+  white-space: nowrap;
+  margin-left: 4px;
+  margin-right: 4px;
+  span {
+    text-decoration: underline;
+    &::after {
+      content: "▼";
+    }
+  }
+  img {
+    margin-left: 2px;
+    margin-right: 2px;
+    display: none;
+  }
+}
+.goog-te-menu-item {
+  padding: 3px;
+  text-decoration: none;
+  color: var(--gt-blue);
+  background: #ffffff;
+  &:link {
+    color: var(--gt-blue);
+    background: #ffffff;
+  }
+  &:visited {
+    color: #551a8b;
+  }
+  &:hover {
+    background: #c3d9ff;
+  }
+  &:active {
+    color: var(--gt-blue);
+  }
+}
+.goog-te-menu2-colpad {
+  width: 16px;
+}
+.goog-te-menu2-separator {
+  margin: 6px 0;
+  height: 1px;
+  background-color: var(--gt-border);
+  overflow: hidden;
+}
+.goog-te-menu2-item {
+  div {
+    padding: 4px;
+    color: var(--gt-blue);
+    background: #ffffff;
+  }
+  .indicator {
+    display: none;
+  }
+  text-decoration: none;
+  &:link {
+    div {
+      color: var(--gt-blue);
+      background: #ffffff;
+    }
+  }
+  &:visited {
+    div {
+      color: var(--gt-blue);
+      background: #ffffff;
+    }
+  }
+  &:active {
+    div {
+      color: var(--gt-blue);
+      background: #ffffff;
+    }
+  }
+  &:hover {
+    div {
+      color: #ffffff;
+      background: #3366cc;
+      border-radius: 2px;
+    }
+  }
+}
+.goog-te-menu2-item-selected {
+  div {
+    padding: 4px;
+    color: #000;
+    font-weight: bold;
+  }
+  .indicator {
+    display: auto;
+  }
+  .text {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+  text-decoration: none;
+  &:link {
+    div {
+      color: #000;
+      font-weight: bold;
+    }
+  }
+  &:visited {
+    div {
+      color: #000;
+      font-weight: bold;
+    }
+  }
+  &:hover {
+    div {
+      color: #000;
+      font-weight: bold;
+    }
+  }
+  &:active {
+    div {
+      color: #000;
+      font-weight: bold;
+    }
+  }
+}
+.goog-te-balloon-frame {
+  background-color: #ffffff;
+  border: 1px solid #6b90da;
+  box-shadow: 0.5rem 0.875rem 2.375rem rgba(39, 44, 49, 0.06), 0.0625rem 0.1875rem 0.5rem rgba(39, 44, 49, 0.03);
+  border-radius: 8px;
+}
+.goog-te-balloon-text {
+  margin-top: 6px;
+}
+.goog-te-balloon-zippy {
+  margin-top: 6px;
+  white-space: nowrap;
+  * {
+    vertical-align: middle;
+  }
+  .minus {
+    background-image: url(//www.google.com/images/zippy_minus_sm.gif);
+  }
+  .plus {
+    background-image: url(//www.google.com/images/zippy_plus_sm.gif);
+  }
+  span {
+    color: #00c;
+    text-decoration: underline;
+    cursor: pointer;
+    margin: 0 4px;
+  }
+}
+.goog-te-balloon-form {
+  margin: 6px 0 0 0;
+  form {
+    margin: 0;
+    textarea {
+      margin-bottom: 4px;
+      width: 100%;
+    }
+  }
+}
+.goog-te-balloon-footer {
+  margin: 6px 0 4px 0;
+}
+.goog-te-spinner-pos {
+  z-index: 1000;
+  position: fixed;
+  transition-delay: 0.6s;
+  left: -1000px;
+  top: -1000px;
+}
+.goog-te-spinner-animation {
+  background: #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 104px;
+  height: 104px;
+  border-radius: 50px;
+  background: #fff url(//www.gstatic.com/images/branding/product/2x/translate_24dp.png) 50% 50% no-repeat;
+  transition: all 0.6s ease-in-out;
+  transform: scale(0.4);
+  opacity: 0;
+}
+.goog-te-spinner-animation-show {
+  transform: scale(0.5);
+  opacity: 1;
+}
+.goog-te-spinner {
+  margin: 2px 0 0 2px;
+  animation: goog-te-spinner-rotator 1.4s linear infinite;
+}
+.goog-te-spinner-path {
+  stroke-dasharray: 187;
+  stroke-dashoffset: 0;
+  stroke: #4285f4;
+  transform-origin: center;
+  animation: goog-te-spinner-dash 1.4s ease-in-out infinite;
+}
+#goog-gt-tt {
+  color: #222;
+  background-color: #ffffff;
+  border: 1px solid #eee;
+  box-shadow: 0 4px 16px rgba(0,0,0,.2);
+  display: none;
+  font-family: arial;
+  font-size: 10pt;
+  width: 420px;
+  padding: 12px;
+  position: absolute;
+  z-index: 10000;
+  .original-text {
+    clear: both;
+    font-size: 10pt;
+    position: relative;
+    text-align: justify;
+    width: 100%;
+  }
+  .title {
+    color: #999;
+    font-family: arial,sans-serif;
+    margin: 4px 0;
+    text-align: left;
+  }
+  .close-button {
+    display: none;
+  }
+  .logo {
+    float: left;
+    margin: 0px;
+  }
+  .activity-links {
+    display: inline-block;
+  }
+  .started-activity-container {
+    display: none;
+    width: 100%;
+  }
+  .activity-root {
+    margin-top: 20px;
+  }
+  .left {
+    float: left;
+  }
+  .right {
+    float: right;
+  }
+  .bottom {
+    min-height: 15px;
+    position: relative;
+    height: 1%;
+  }
+  .status-message {
+    background: linear-gradient(top,#29910d 0%,#20af0e 100%);
+    background: #29910d;
+    border-radius: 4px;
+    box-shadow: inset 0px 2px 2px #1e6609;
+    color: white;
+    font-size: 9pt;
+    font-weight: bolder;
+    margin-top: 12px;
+    padding: 6px;
+    text-shadow: 1px 1px 1px #1e6609;
+  }
+  .activity-link {
+    color: #1155cc;
+    cursor: pointer;
+    font-family: arial;
+    font-size: 11px;
+    margin-right: 15px;
+    text-decoration: none;
+  }
+  textarea {
+    font-family: arial;
+    resize: vertical;
+    width: 100%;
+    margin-bottom: 10px;
+    border-radius: 1px;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid silver;
+    font-size: 13px;
+    height: auto;
+    overflow-y: auto;
+    padding: 1px;
+    &:focus {
+      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
+      border: 1px solid #4d90fe;
+      outline: none;
+    }
+  }
+  .activity-cancel {
+    margin-right: 10px;
+  }
+  .translate-form {
+    min-height: 25px;
+    vertical-align: middle;
+    padding-top: 8px;
+    .activity-form {
+      margin-bottom: 5px;
+      margin-bottom: 0px;
+      input {
+        display: inline-block;
+        min-width: 54px;
+        *min-width: 70px;
+        border: 1px solid #dcdcdc;
+        border: 1px solid rgba(0,0,0,0.1);
+        text-align: center;
+        color: #444;
+        font-size: 11px;
+        font-weight: bold;
+        height: 27px;
+        outline: 0;
+        padding: 0 8px;
+        vertical-align: middle;
+        line-height: 27px;
+        margin: 0 16px 0 0;
+        box-shadow: 0 1px 2px rgba(0,0,0,.1);
+        border-radius: 2px;
+        transition: all 0.218s;
+        background-color: #f5f5f5;
+        background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        cursor: default;
+        &:hover {
+          border: 1px solid #c6c6c6;
+          color: #222;
+          transition: all 0.0s;
+          background-color: #f8f8f8;
+          background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
+          border-color: #3079ed;
+        }
+        &:active {
+          border: 1px solid #c6c6c6;
+          color: #333;
+          background-color: #f6f6f6;
+          background-image: linear-gradient(top,#f6f6f6,#f1f1f1);
+          border-color: #3079ed;
+        }
+        &:focus {
+          #goog-gt-tt {
+            .translate-form {
+              .activity-form {
+                input.focus {
+                  #goog-gt-tt {
+                    .translate-form {
+                      .activity-form {
+                        input {
+                          &:active {
+                            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+          &:active {
+            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
+          }
+          outline: none;
+          border: 1px solid #4d90fe;
+          z-index: 4 !important;
+          border-color: #3079ed;
+        }
+        &.focus {
+          &:active {
+            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
+          }
+        }
+      }
+      input.focus {
+        outline: none;
+        border: 1px solid #4d90fe;
+        z-index: 4 !important;
+        border-color: #3079ed;
+      }
+      input.selected {
+        background-color: #eeeeee;
+        background-image: linear-gradient(top,#eeeeee,#e0e0e0);
+        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+        border: 1px solid #ccc;
+        color: #333;
+      }
+      input.activity-submit {
+        color: white;
+        border-color: #3079ed;
+        background-color: #4d90fe;
+        background-image: linear-gradient(top,#4d90fe,#4787ed);
+        &:hover {
+          #goog-gt-tt {
+            .translate-form {
+              .activity-form {
+                input.activity-submit {
+                  &:focus {
+                    border-color: #3079ed;
+                    background-color: #357ae8;
+                    background-image: linear-gradient(top,#4d90fe,#357ae8);
+                  }
+                }
+              }
+            }
+          }
+          box-shadow: inset 0 0 0 1px #fff,0px 1px 1px rgba(0,0,0,0.1);
+          border-color: #3079ed;
+        }
+        &:focus {
+          border-color: #3079ed;
+        }
+        &:active {
+          border-color: #3079ed;
+        }
+      }
+      input.activity-submit.focus {
+        #goog-gt-tt {
+          .translate-form {
+            .activity-form {
+              input.activity-submit {
+                &:active {
+                  border-color: #3079ed;
+                  background-color: #357ae8;
+                  background-image: linear-gradient(top,#4d90fe,#357ae8);
+                }
+              }
+            }
+          }
+        }
+        border-color: #3079ed;
+      }
+    }
+  }
+  .gray {
+    color: #999;
+    font-family: arial,sans-serif;
+  }
+  .alt-helper-text {
+    color: #999;
+    font-size: 11px;
+    font-family: arial,sans-serif;
+    margin: 15px 0px 5px 0px;
+  }
+  .alt-error-text {
+    color: #800;
+    display: none;
+    font-size: 9pt;
+  }
+  .alt-menu.goog-menu {
+    background: #ffffff;
+    border: 1px solid #dddddd;
+    box-shadow: 0px 2px 4px #99a;
+    min-width: 0;
+    outline: none;
+    padding: 0;
+    position: absolute;
+    z-index: 2000;
+  }
+  .alt-menu {
+    .goog-menuitem {
+      cursor: pointer;
+      padding: 2px 5px 5px;
+      margin-right: 0px;
+      border-style: none;
+      h1 {
+        font-size: 100%;
+        font-weight: bold;
+        margin: 4px 0px;
+      }
+      strong {
+        color: #345aad;
+      }
+    }
+    div.goog-menuitem {
+      &:hover {
+        background: #ddd;
+      }
+    }
+  }
+  .goog-submenu-arrow {
+    text-align: right;
+    position: absolute;
+    right: 0;
+    left: auto;
+  }
+  .goog-menuitem-rtl {
+    .goog-submenu-arrow {
+      text-align: left;
+      position: absolute;
+      left: 0;
+      right: auto;
+    }
+  }
+  .gt-hl-text {
+    background-color: #f1ea00;
+    border-radius: 4px;
+    box-shadow: rgba(0,0,0,.5) 3px 3px 4px;
+    box-sizing: border-box;
+    color: #f1ea00;
+    cursor: pointer;
+    margin: -2px -2px -2px -3px;
+    padding: 2px 2px 2px 3px;
+    position: relative;
+  }
+  .trans-target-highlight {
+    background-color: #f1ea00;
+    border-radius: 4px;
+    box-shadow: rgba(0,0,0,.5) 3px 3px 4px;
+    box-sizing: border-box;
+    color: #f1ea00;
+    cursor: pointer;
+    margin: -2px -2px -2px -3px;
+    padding: 2px 2px 2px 3px;
+    position: relative;
+    color: #222;
+  }
+  .gt-hl-layer {
+    color: white;
+    position: absolute !important;
+  }
+  .trans-target {
+    background-color: #c9d7f1;
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: rgba(0,0,0,.5) 3px 3px 4px;
+    box-sizing: border-box;
+    cursor: pointer;
+    margin: -2px -2px -2px -3px;
+    padding: 2px 2px 3px 3px;
+    position: relative;
+    .trans-target-highlight {
+      background-color: #c9d7f1;
+      border-radius: 4px 4px 0px 0px;
+      box-shadow: rgba(0,0,0,.5) 3px 3px 4px;
+      box-sizing: border-box;
+      cursor: pointer;
+      margin: -2px -2px -2px -3px;
+      padding: 2px 2px 3px 3px;
+      position: relative;
+    }
+  }
+  .trans-edit {
+    background-color: transparent;
+    border: 1px solid #4d90fe;
+    border-radius: 0em;
+    margin: -2px;
+    padding: 1px;
+  }
+  .gt-trans-highlight-l {
+    border-left: 2px solid red;
+    margin-left: -2px;
+  }
+  .gt-trans-highlight-r {
+    border-right: 2px solid red;
+    margin-right: -2px;
+  }
+  #alt-input {
+    padding: 2px;
+  }
+  #alt-input-text {
+    font-size: 11px;
+    padding: 2px 2px 3px;
+    margin: 0;
+    background-color: #fff;
+    color: #333;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    display: inline-block;
+    vertical-align: top;
+    height: 21px;
+    box-sizing: border-box;
+    &:hover {
+      border: 1px solid #b9b9b9;
+      border-top: 1px solid #a0a0a0;
+      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    }
+    &:focus {
+      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
+      outline: none;
+      border: 1px solid #4d90fe;
+    }
+  }
+  #alt-input-submit {
+    font-size: 11px;
+    padding: 2px 6px 3px;
+    margin: 0 0 0 2px;
+    height: 21px;
+  }
+}
+div#goog-gt-tt {
+  padding: 10px 14px;
+}
+.gt-hl-layer {
+  clear: both;
+  font-size: 10pt;
+  position: relative;
+  text-align: justify;
+  width: 100%;
+}
+.goog-text-highlight {
+  background-color: #c9d7f1;
+  box-shadow: 2px 2px 4px #9999aa;
+  box-sizing: border-box;
+  position: relative;
+}
\ No newline at end of file
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 78c46c2..0907ec5 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -33,11 +33,6 @@ $footer_vendors_enable      : {{ isset $P.footer "vendors" }};
 {{ printf "$footer_vendors_imgs_width:%s;" (delimit (after 1 $width) ", ") }}
 {{ end }}
 
-// Counter
-$busuanzi_visitors          : {{ $P.busuanzi.visitors }};
-$busuanzi_views             : {{ $P.busuanzi.views }};
-$busuanzi_post_views        : {{ $P.busuanzi.postViews }};
-
 // Font
 $font_enable                : {{ $P.font.enable }};
 $font_global_size           : {{ default $P.font.global.size 1 }};
@@ -70,7 +65,7 @@ $back2top_sidebar           : {{ $P.backTop.sidebar }};
 $avatar_rotated             : {{ $P.avatar.rotated }};
 $avatar_rounded             : {{ $P.avatar.rounded }};
 $avatar_rounded             : {{ $P.avatar.rounded }};
-$site_state                 : {{ $P.siteState }};
+$site_state                 : {{ $P.siteState.basic }};
 $social_icons_only          : {{ $P.socialIcons.iconsOnly }};
 $social_icons_transition    : {{ $P.socialIcons.transition }};
 $links_settings_layout      : {{ $P.linksSets.layout }};
@@ -112,7 +107,6 @@ $reading_progress_position  : {{ $P.readingProgress.position }};
 $reading_progress_reversed  : {{ $P.readingProgress.reversed }};
 
 // Thirdparty
-$math_mathjax_enable        : {{ $P.math.mathjax.enable }};
 // TODO
 //$related_posts_enable       : {{ $P.relatedPosts.enable }};
 $related_posts_enable       : false;
diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js
index cad11e4..9c66eb1 100644
--- a/assets/js/next-boot.js
+++ b/assets/js/next-boot.js
@@ -2,6 +2,10 @@
 
 NexT.boot = {};
 
+NexT.boot.activeThemeMode = function(){
+  NexT.utils.activeThemeMode();
+};
+
 NexT.boot.registerEvents = function() {
 
   NexT.utils.registerScrollPercent();
@@ -33,15 +37,20 @@ NexT.boot.registerEvents = function() {
 
 NexT.boot.refresh = function() {
 
+  NexT.utils.calSiteInfo();
+  NexT.utils.regSwitchThemeBtn();
+
   if (!NexT.CONFIG.page.isPage) return;
  
   NexT.utils.registerSidebarTOC();
+
   NexT.utils.replacePostCRLink();
   NexT.utils.registerCopyCode();
   NexT.utils.registerPostReward();
   if(NexT.CONFIG.page.comments) {    
     NexT.utils.initCommontesDispaly();
     NexT.utils.registerCommonSwitch();
+    NexT.utils.domAddClass('#goto-comments', 'goto-comments-on');
   } else {
     NexT.utils.hideCommontes();
   }
@@ -79,6 +88,7 @@ NexT.boot.motion = function() {
 };
 
 document.addEventListener('DOMContentLoaded', () => {
+  NexT.boot.activeThemeMode();
   NexT.boot.registerEvents();
   NexT.boot.motion();
   NexT.boot.refresh();
diff --git a/assets/js/third-party/comments/waline.js b/assets/js/third-party/comments/waline.js
index 8153566..2ac0c23 100644
--- a/assets/js/third-party/comments/waline.js
+++ b/assets/js/third-party/comments/waline.js
@@ -40,7 +40,7 @@ document.addEventListener('DOMContentLoaded', () => {
         requiredMeta  : requiredmeta,
         serverURL     : serverurl,
         lang          : NexT.CONFIG.lang,
-        dark          : "auto"
+        dark          : 'html[data-theme="dark"]'
       });
 
       NexT.utils.hiddeLodingCmp(element);
diff --git a/assets/js/third-party/others/google-translate.js b/assets/js/third-party/others/google-translate.js
new file mode 100644
index 0000000..7dc5149
--- /dev/null
+++ b/assets/js/third-party/others/google-translate.js
@@ -0,0 +1,173 @@
+(function () {
+    var gtConstEvalStartTime = new Date();
+    var h = this || self,
+        l = /^[\w+/_-]+[=]{0,2}$/,
+        m = null;
+    function n(a) {
+        return (a = a.querySelector && a.querySelector("script[nonce]")) && (a = a.nonce || a.getAttribute("nonce")) &&
+            l.test(a) ? a : ""
+    }
+    function p(a, b) {
+        function c() {}
+        c.prototype = b.prototype;
+        a.i = b.prototype;
+        a.prototype = new c;
+        a.prototype.constructor = a;
+        a.h = function (g, f, k) {
+            for (var e = Array(arguments.length - 2), d = 2; d < arguments.length; d++) e[d - 2] = arguments[d];
+            return b.prototype[f].apply(g, e)
+        }
+    }
+    function q(a) {
+        return a
+    };
+    function r(a) {
+        if (Error.captureStackTrace) Error.captureStackTrace(this, r);
+        else {
+            var b = Error().stack;
+            b && (this.stack = b)
+        }
+        a && (this.message = String(a))
+    }
+    p(r, Error);
+    r.prototype.name = "CustomError";
+    function u(a, b) {
+        a = a.split("%s");
+        for (var c = "", g = a.length - 1, f = 0; f < g; f++) c += a[f] + (f < b.length ? b[f] : "%s");
+        r.call(this, c + a[g])
+    }
+    p(u, r);
+    u.prototype.name = "AssertionError";
+    function v(a, b) {
+        throw new u("Failure" + (a ? ": " + a : ""), Array.prototype.slice.call(arguments, 1));
+    };
+    var w;
+    function x(a, b) {
+        this.g = b === y ? a : ""
+    }
+    x.prototype.toString = function () {
+        return this.g + ""
+    };
+    var y = {};
+    function z(a) {
+        var b = document.getElementsByTagName("head")[0];
+        b || (b = document.body.parentNode.appendChild(document.createElement("head")));
+        b.appendChild(a)
+    }
+    function _loadJs(a) {
+        var b = document;
+        var c = "SCRIPT";
+        "application/xhtml+xml" === b.contentType && (c = c.toLowerCase());
+        c = b.createElement(c);
+        c.type = "text/javascript";
+        c.charset = "UTF-8";
+        if (void 0 === w) {
+            b = null;
+            var g = h.trustedTypes;
+            if (g && g.createPolicy) {
+                try {
+                    b = g.createPolicy("goog#html", {
+                        createHTML: q,
+                        createScript: q,
+                        createScriptURL: q
+                    })
+                } catch (t) {
+                    h.console && h.console.error(t.message)
+                }
+                w = b
+            } else w = b
+        }
+        a = (b = w) ? b.createScriptURL(a) : a;
+        a = new x(a, y);
+        a: {
+            try {
+                var f = c && c.ownerDocument,
+                    k = f && (f.defaultView || f.parentWindow);
+                k = k || h;
+                if (k.Element && k.Location) {
+                    var e = k;
+                    break a
+                }
+            } catch (t) {}
+            e = null
+        }
+        if (e && "undefined" != typeof e.HTMLScriptElement && (!c || !(c instanceof e.HTMLScriptElement) && (c instanceof e
+                .Location || c instanceof e.Element))) {
+            e = typeof c;
+            if ("object" == e && null != c || "function" == e) try {
+                var d = c.constructor.displayName || c.constructor.name || Object.prototype.toString.call(c)
+            } catch (t) {
+                d = "<object could not be stringified>"
+            } else d = void 0 === c ? "undefined" : null === c ? "null" : typeof c;
+            v("Argument is not a %s (or a non-Element, non-Location mock); got: %s",
+                "HTMLScriptElement", d)
+        }
+        a instanceof x && a.constructor === x ? d = a.g : (d = typeof a, v(
+            "expected object of type TrustedResourceUrl, got '" + a + "' of type " + ("object" != d ? d : a ?
+                Array.isArray(a) ? "array" : d : "null")), d = "type_error:TrustedResourceUrl");
+        c.src = d;
+        (d = c.ownerDocument && c.ownerDocument.defaultView) && d != h ? d = n(d.document) : (null === m && (m = n(
+            h.document)), d = m);
+        d && c.setAttribute("nonce", d);
+        z(c)
+    }
+    function _loadCss(a) {
+        var b = document.createElement("link");
+        b.type = "text/css";
+        b.rel = "stylesheet";
+        b.charset = "UTF-8";
+        b.href = a;
+        z(b)
+    }
+    function _isNS(a) {
+        a = a.split(".");
+        for (var b = window, c = 0; c < a.length; ++c)
+            if (!(b = b[a[c]])) return !1;
+        return !0
+    }
+    function _setupNS(a) {
+        a = a.split(".");
+        for (var b = window, c = 0; c < a.length; ++c) b.hasOwnProperty ? b.hasOwnProperty(a[c]) ? b = b[a[c]] : b =
+            b[a[c]] = {} : b = b[a[c]] || (b[a[c]] = {});
+        return b
+    }
+    window.addEventListener && "undefined" == typeof document.readyState && window.addEventListener(
+        "DOMContentLoaded",
+        function () {
+            document.readyState = "complete"
+        }, !1);
+    if (_isNS('google.translate.Element')) {
+        return
+    }(function () {
+        var c = _setupNS('google.translate._const');
+        c._cest = gtConstEvalStartTime;
+        gtConstEvalStartTime = undefined;
+        c._cl = navigator.language || navigator.userLanguage;
+        c._cuc = 'googleTranslateElementInit';
+        c._cac = '';
+        c._cam = '';
+        c._ctkk = '449649.3822363247';
+        var h = 'translate.googleapis.com';
+        var s = (true ? 'https' : window.location.protocol == 'https:' ? 'https' : 'http') + '://';
+        var b = s + h;
+        c._pah = h;
+        c._pas = s;
+        // c._pbi = b + '/translate_static/img/te_bk.gif';
+        c._pbi = '';
+        c._pci = b + '/translate_static/img/te_ctrl3.gif';
+        c._pli = b + '/translate_static/img/loading.gif';
+        c._plla = h + '/translate_a/l';
+        c._pmi = b + '/translate_static/img/mini_google.png';
+        c._ps = window.translateelement_styles;
+        c._puh = 'translate.google.cn';
+        _loadCss(c._ps);
+        _loadJs(b + `/translate_static/js/element/main_${navigator.language || navigator.userLanguage}.js`);
+    })();
+})();
+
+function googleTranslateElementInit(){
+  new google.translate.TranslateElement({
+    includedLanguages: 'zh-CN,zh-TW,en,ru',
+    autoDisplay:false
+  },'google_translate_element');
+}
\ No newline at end of file
diff --git a/assets/js/utils.js b/assets/js/utils.js
index 9c083a1..fcf0f3a 100644
--- a/assets/js/utils.js
+++ b/assets/js/utils.js
@@ -23,6 +23,216 @@ HTMLElement.prototype.wrap = function(wrapper) {
 
 NexT.utils = {
 
+  regSwitchThemeBtn: function() {
+    const switchThemeBtn = document.getElementById('switch-theme');
+    if (!switchThemeBtn) return;
+    switchThemeBtn.addEventListener('click', () => {
+      const colorTheme = document.documentElement.getAttribute('data-theme');
+      NexT.utils.toggleDarkMode(!(colorTheme == 'dark'));
+
+    });    
+  },
+
+  activeThemeMode: function() {
+
+    const useDark = window.matchMedia("(prefers-color-scheme: dark)");
+    let darkModeState = useDark.matches;
+    const localState = NexT.utils.getLocalStorage('theme');
+    if (localState == 'light') {
+      darkModeState = false;
+    }
+    NexT.utils.toggleDarkMode(darkModeState);
+
+    useDark.addListener(function(evt) {
+      toggleDarkMode(evt.matches);
+    });
+  },
+
+  toggleDarkMode: function(state) {
+    if(state) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+      NexT.utils.setLocalStorage('theme', 'dark', 2);
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light');
+      NexT.utils.setLocalStorage('theme', 'light', 2);
+    }
+
+    const theme = state ? 'dark' : 'light';
+    NexT.utils.toggleGiscusDarkMode(theme);
+  },
+
+  toggleGiscusDarkMode: function(theme) {
+    const iframe = document.querySelector('iframe.giscus-frame');
+    if (iframe) {
+      const config = { setConfig: { theme: theme } };
+      iframe.contentWindow.postMessage({ giscus: config }, 'https://giscus.app');
+    }
+  },
+
+  setLocalStorage: function(key, value, ttl) {
+    if (ttl === 0) return;
+    const now = new Date();
+    const expiryDay = ttl * 86400000;
+    const item = {
+      value: value,
+      expiry: now.getTime() + expiryDay
+    };
+    localStorage.setItem(key, JSON.stringify(item));
+  },
+
+  getLocalStorage: function(key) {
+    const itemStr = localStorage.getItem(key);
+    if (!itemStr) {
+      return undefined;
+    }
+
+    const item = JSON.parse(itemStr);
+    const now = new Date();
+
+    if (now.getTime() > item.expiry) {
+      localStorage.removeItem(key);
+      return undefined;
+    }
+    return item.value;
+  },
+
+  domAddClass: function(selector, cls) {
+    const doms = document.querySelectorAll(selector);
+    if (doms) {
+      doms.forEach(dom => {
+        dom.classList.add(cls);
+      });
+    }
+  },
+
+  calSiteInfo: function() {
+    const runtimeCount = document.getElementById('runTimes');
+    if (runtimeCount) {
+      const publishDate = runtimeCount.getAttribute('data-publishDate');
+      const runTimes = NexT.utils.diffDate(publishDate, 2);
+      runtimeCount.innerText = runTimes;
+    }
+
+    const wordsCount = document.getElementById('wordsCount');
+    if (wordsCount) {
+      const words = wordsCount.getAttribute('data-count');
+      wordsCount.innerText = NexT.utils.numberFormat(words);
+    }
+
+    const readTimes = document.getElementById('readTimes');
+    if (readTimes) {
+      const times = readTimes.getAttribute('data-times');
+      
+      const hour = 60;
+      const day = hour * 24;
+
+      const daysCount = parseInt(times / day);
+      const hoursCount = parseInt(times / hour);
+
+      let timesLabel;
+      if (daysCount >= 1) {
+        timesLabel = daysCount + NexT.CONFIG.i18n.ds_days + parseInt((times - daysCount * day)/hour) + NexT.CONFIG.i18n.ds_hours;
+      } else if (hoursCount >= 1) {
+        timesLabel = hoursCount + NexT.CONFIG.i18n.ds_hours + (times - hoursCount * hour) + NexT.CONFIG.i18n.ds_mins;
+      } else {
+        timesLabel = times + NexT.CONFIG.i18n.ds_mins;
+      }
+
+      readTimes.innerText = timesLabel;
+    }
+
+    const lastPushDate = document.getElementById('last-push-date');
+    if (lastPushDate) {
+      const pushDateVal = NexT.utils.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1);
+      lastPushDate.innerText = pushDateVal;
+    }
+
+    const statisWidget = document.querySelectorAll('#la-siteinfo-widget span');
+    if (statisWidget.length > 0) {
+      const valIds = [0,2,4,6];
+      const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv']
+      for (var i in valIds) {
+        let pv = NexT.utils.numberFormat(statisWidget[valIds[i]].innerText);
+        document.getElementById(domIds[i]).innerText = pv;
+      }
+    }
+
+    setTimeout(()=>{ NexT.utils.fmtBusuanzi(); }, 500);
+  },
+
+  fmtBusuanzi: function() {
+    const bszUV = document.getElementById('busuanzi_value_site_uv');
+    if (bszUV) {
+      bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
+    }
+    const bszPV = document.getElementById('busuanzi_value_site_pv');
+    if (bszPV) {
+      bszPV.innerText = NexT.utils.numberFormat(bszPV.innerText);
+    }
+  },
+
+  numberFormat: function(number) {
+    let result;
+    if (number.indexOf(',') > 0) {
+      number = number.replaceAll(",", "");
+    }
+    
+    if (number > 10000) {
+      result = (number / 10000.0).toFixed(2) + ' w';
+    } else if (number > 1000) {
+      result = (number / 1000.0).toFixed(2) + ' k';
+    } else {
+      result = number;
+    }
+    return result;
+  },
+
+  diffDate: function(date, mode = 0) {
+    const dateNow = new Date();
+    const datePost = new Date(date);
+    const dateDiff = dateNow.getTime() - datePost.getTime();
+    const minute = 1000 * 60;
+    const hour = minute * 60;
+    const day = hour * 24;
+    const month = day * 30;
+    const year = month * 12;
+
+    let result;
+    if (mode == 1) {
+      const monthCount = dateDiff / month;
+      const dayCount = dateDiff / day;
+      const hourCount = dateDiff / hour;
+      const minuteCount = dateDiff / minute;
+
+      if (monthCount > 12) {
+        result = datePost.toLocaleDateString().replace(/\//g, '-');
+      } else if (monthCount >= 1) {
+        result = parseInt(monthCount) + NexT.CONFIG.i18n.ds_month;
+      } else if (dayCount >= 1) {
+        result = parseInt(dayCount) + NexT.CONFIG.i18n.ds_day;
+      } else if (hourCount >= 1) {
+        result = parseInt(hourCount) + NexT.CONFIG.i18n.ds_hour;
+      } else if (minuteCount >= 1) {
+        result = parseInt(minuteCount) + NexT.CONFIG.i18n.ds_min;
+      } else {
+        result = NexT.CONFIG.i18n.ds_just;
+      }
+    } else if (mode == 2) {      
+      const yearCount = parseInt(dateDiff / year);
+      if (yearCount >= 1) {
+        const dayCount = parseInt((dateDiff - (yearCount * year))/day);
+        result = yearCount + NexT.CONFIG.i18n.ds_years + dayCount + NexT.CONFIG.i18n.ds_days;
+      } else {
+        const dayCount = parseInt(dateDiff/day);
+        result = dayCount + NexT.CONFIG.i18n.ds_days;
+      }      
+    } else {
+      result = parseInt(dateDiff / day);
+    }
+
+    return result;
+  },
+
   checkDOMExist: function(selector) {
     return document.querySelector(selector) != null;
   },
@@ -148,8 +358,10 @@ NexT.utils = {
         const contentHeight = document.body.scrollHeight - window.innerHeight;
         const scrollPercent = contentHeight > 0 ? Math.min(100 * window.scrollY / contentHeight, 100) : 0;
         if (backToTop) {
-          backToTop.classList.toggle('back-to-top-on', Math.round(scrollPercent) >= 5);
-          backToTop.querySelector('span').innerText = Math.round(scrollPercent) + '%';
+          const scrollPercentRound = Math.round(scrollPercent)
+          const isShow = scrollPercentRound >= 5;          
+          backToTop.classList.toggle('back-to-top-on', isShow);
+          backToTop.querySelector('span').innerText = scrollPercentRound + '%';
         }
         if (readingProgressBar) {
           readingProgressBar.style.setProperty('--progress', scrollPercent.toFixed(2) + '%');
diff --git a/data/config.yaml b/data/config.yaml
index ee220a7..8e21e48 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -1,4 +1,3 @@
 # Hugo NexT theme's custom config
-# 
 
-version: 4.2.0
\ No newline at end of file
+version: 4.3.0
\ No newline at end of file
diff --git a/data/resources.yaml b/data/resources.yaml
index f039b4c..e05d100 100644
--- a/data/resources.yaml
+++ b/data/resources.yaml
@@ -10,10 +10,6 @@ js:
   - name: animejs
     version: 3.2.1
     file: lib/anime.min.js
-  # TODO
-  #- name: mathjax
-  #  version: 3.2.0
-  #  file: es5/tex-mml-chtml.js
 
 # CSS 资源
 # CSS Resources
@@ -33,6 +29,10 @@ css:
 # Site analytics engine
 analytics:
   la: https://sdk.51.la/js-sdk-pro.min.js
+  laWidget: https://v6-widget.51.la/v6/laId/quote.js?theme=0&col=true&f=12&display=0,0,0,1,0,1,1,1
+  baidu: https://hm.baidu.com/hm.js?
+  google: https://www.googletagmanager.com/gtag/js?id=
+  busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
 
 # 文章分享
 # Share
@@ -44,12 +44,12 @@ addthis:
 waline:
   js:
     name: '@waline/client'
-    version: 2.6.1
+    version: 2.6.3
     file: dist/waline.js
     alias: waline
   css:
     name: '@waline/client'
-    version: 2.6.1
+    version: 2.6.3
     file: dist/waline.css
     alias: waline
 
@@ -81,4 +81,33 @@ algolia:
 instant:
   name: instantsearch.js
   version: 4.40.5
-  file: dist/instantsearch.production.min.js
\ No newline at end of file
+  file: dist/instantsearch.production.min.js
+
+plugins:
+  # 数学公式渲染
+  mathjax:
+    js:
+      - name: mathjax
+        version: 3.2.0
+        file: es5/tex-mml-chtml.js
+  katex:
+    js:
+      - name: katex
+        version: 0.16.0
+        file: dist/katex.min.js
+      - name: auto-render
+        alias2: katex
+        version: 0.16.0
+        file: dist/contrib/auto-render.min.js
+    css:
+      - name: katex
+        version: 0.16.0
+        file: dist/katex.min.css
+  # 画图渲染
+  mermaid:
+    js:
+      - name: mermaid
+        version: 9.1.7
+        file: dist/mermaid.min.js
+
+
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index e832f90..c16e35d 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -39,21 +39,28 @@ markup:
     renderer:
       unsafe: true
   highlight:
+    # codeFences: true
+    # lineNos: true
+    # lineNumbersInTable: true
+    # noClasses: true
+    # # 高亮代码的样式名称，可选：monokai | emacs | api | dracula | friendly
+    # # 更多的样式：https://xyproto.github.io/splash/docs/all.html
+    # # Highlight style: monokai | emacs | api | dracula | friendly
+    # # More: https://xyproto.github.io/splash/docs/all.html 
+    # style: "monokai"
+    anchorLineNos: true
     codeFences: true
-    lineNos: true
-    lineNumbersInTable: true
+    guessSyntax: true
+    hl_Lines: ""
+    hl_inline: false
+    lineAnchors: ""
+    lineNoStart: 1
+    lineNos: false
+    lineNumbersInTable: false
     noClasses: true
-    # 高亮代码的样式名称，可选：monokai | emacs | api | dracula | friendly
-    # 更多的样式：https://xyproto.github.io/splash/docs/all.html
-    # Highlight style: monokai | emacs | api | dracula | friendly
-    # More: https://xyproto.github.io/splash/docs/all.html 
-    style: "monokai"
-  tableOfContents:
-    # 开始/结束标题级别：1-6
-    # Heading title level of start or end: 1-6
-    startLevel: 1
-    endLevel: 3
-    ordered: false
+    noHl: false
+    style: monokai
+    tabWidth: 2
 
 # 站点文章导航文件
 # Site map of all articles
@@ -91,6 +98,10 @@ outputs:
 # Enable robots with support crawler scan
 enableRobotsTXT: true
 
+# 强制输出时压缩文件
+# Compress all files when output
+minify:
+
 #--------------------------------------
 # 菜单配置说明
 # identifier ： 唯一标识不可重复
@@ -183,6 +194,13 @@ params:
   # Custom Logo (Warning: Only support scheme Mist)
   customLogo: #/imgs/hugo_next_logo.png
 
+  # 用户自定义文件配置
+  # Define custom file paths.
+  # customFilePath:
+  #   sidebar: custom_sidebar.html
+  #   footer: custom_footer.html
+  #   style: /css/custom_style.css
+
   # 知识共享国际许可 4.0
   # 更多信息： https://creativecommons.org/about/cclicenses/
   # Creative Commons 4.0 International License.
@@ -272,10 +290,18 @@ params:
     # 开启头像随鼠标转动动画
     # If true, the avatar will be rotated with the cursor.
     rotated: true
-
-  # 是否在侧边栏显示文章、分类、标签信息
-  # Posts / Categories / Tags in sidebar.
-  siteState: true
+  siteState: 
+    # 是否在侧边栏显示文章、分类、标签信息
+    # Posts / Categories / Tags in sidebar.
+    basic: true
+    # 站点访问信息
+    # Site information
+    statistic: 
+      enable: true
+      # 组件类型，可选值为： 51la, busuanzi
+      # 使用51la时需要注册账号：https://invite.51.la/1NUfGTS1?target=V6
+      # Plguin value is: 51la, busuzazi
+      plugin: busuanzi
 
   # 社交链接地址
   # 用法： `Key: 名称 || 链接地址 || 图标`
@@ -357,6 +383,9 @@ params:
   # Footer Settings
   # ---------------------------------------------------------------
   footer:
+    # 启动谷歌翻译功能
+    # Enable google translate in footer
+    translate: true
     # 站点开始年份，默认为当下时间的年份
     # Specify the year when the site was setup. 
     # If not defined, current year will be used.
@@ -693,27 +722,11 @@ params:
   # Third Party Plugins & Services Settings
   # ---------------------------------------------------------------
 
-  # TODO
-  # 数学公式渲染支持（暂时未实现）
-  # Math Formulas Render Support
-  # Warning: Please install / uninstall the relevant renderer according to the documentation.
-  # See: https://theme-next.js.org/docs/third-party-services/math-equations
-  # Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
-  math:
-    # Default (false) will load mathjax / katex script on demand.
-    # That is it only render those page which has `mathjax: true` in front-matter.
-    # If you set it to true, it will load mathjax / katex script EVERY PAGE.
-    every_page: false
-
-    mathjax:
-      enable: false
-      # Available values: none | ams | all
-      tags: none
-
-    katex:
-      enable: false
-      # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
-      copy_tex: false
+  # 数学公式渲染支持，可选值： mathjax, katex
+  # 注意这里全局配置，意味着所有页面都会加载数学公式脚本
+  # Math Formulas Render Support, options: mathjax, katex
+  # Warning: It's global settings then will load scripts in every page.
+  #math: mathjax
 
   # TODO
   # FancyBox is a tool that offers a nice and elegant way 
@@ -762,7 +775,7 @@ params:
   comments:
     # 开启评论组件
     # If true, will show comment component in post end.
-    enable: true   
+    enable: false   
     # 设置默认使用的评论插件
     # 可选值：livere | waline | utterances | artalk | giscus
     # Choose a comment system to be displayed by default.
@@ -903,18 +916,20 @@ params:
     # 更多信息请参考：https://invite.51.la/1NUfGTS1?target=V6
     # 51La Analytics
     # See: https://invite.51.la/1NUfGTS1?target=V6 
-    laId: #<anaytics_id> 
-
-  # TODO
-  # Show Views / Visitors of the website / page with busuanzi.
-  # For more information: http://ibruce.info/2015/04/04/busuanzi/
-  busuanzi:
-    visitors: false
-    visitorsIcon: fa fa-user
-    views: false
-    viewsIcon: fa fa-eye
-    postViews: false
-    postViewsIcon: far fa-eye
+    #laId: #<anaytics_id> 
+    # 百度统计
+    # Baidu Analytics
+    #baidu: #<anaytics_id>
+    # 谷歌统计
+    # Google Analytics
+    #google: #<anaytics_id>
+    # 不蒜子统计
+    # Show Views / Visitors of the website / page with busuanzi.
+    # For more information: http://ibruce.info/2015/04/04/busuanzi/
+    busuanzi:
+      visitorsIcon: fa fa-user
+      viewsIcon: fa fa-eye
+      postViews: true
 
 
   # ---------------------------------------------------------------
@@ -940,7 +955,7 @@ params:
     enable: true
     # 搜索索引文件路径
     # Indexes file path for search
-    path: searchindexes.xml
+    path: /searchindexes.xml
     # 是立即搜索当输入关键字时，可选值： auto | manual
     # If auto, trigger search by changing input.
     # If manual, trigger search by pressing enter key or search button.
diff --git a/exampleSite/content/flinks.md b/exampleSite/content/flinks.md
index 525f67e..1f53a44 100644
--- a/exampleSite/content/flinks.md
+++ b/exampleSite/content/flinks.md
@@ -4,13 +4,11 @@ type: flinks
 url: flinks.html
 ---
 
-如想要交换友情链接，请在评论区留下你的站点信息，格式参考如下：
+如想交换本站友情链接，请在评论区留下你的站点信息，格式参考如下：
 
-{{< note success no-icon >}}
-
- **名称：** NexT 主题 <br/>
- **说明：** 保持简单的易用性和强大的功能。 <br/>
- **站标：** https://hugo-next.eu.org/imgs/hugo_next_avatar.png <br/>
- **网址：** https://hugo-next.eu.org <br/>
-
-{{< /note >}}
\ No newline at end of file
+```yaml
+- name: Hugo-NexT
+  desc: Hugo NexT 官方预览网站。
+  avatar: https://hugo-next.eu.org/imgs/hugo_next_avatar.png
+  link: https://hugo-next.eu.org
+```
\ No newline at end of file
diff --git a/exampleSite/content/post/custom-files.md b/exampleSite/content/post/custom-files.md
new file mode 100644
index 0000000..b491936
--- /dev/null
+++ b/exampleSite/content/post/custom-files.md
@@ -0,0 +1,82 @@
+---
+title: "支持用户自定义设计"
+description: "用户可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。"
+keywords: "custom,files,layout"
+
+date: 2022-09-10T21:02:32+08:00
+lastmod: 2022-09-10T21:02:32+08:00
+
+categories:
+  - 示例
+tags:
+  - 自定义
+  - 个性化
+  - 布局
+
+url: "post/custom-files.html"
+toc: true
+---
+
+对于熟悉前端开发的用户来说，可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。其中布局方面主要是支持左侧边栏的站点概览部分，以及站点底部2个位置，但样式的重置可以是整个站点的任意位置。
+
+<!--more-->
+
+## 打开配置参数
+
+首先要明确在配置文件的 `params` 区域中有配置如下参数：
+
+```yaml
+customFilePath:
+  sidebar: custom_sidebar.html
+  footer: custom_footer.html
+  style: /css/custom_style.css
+```
+
+{{< note warning >}}
+
+**注意：** `sidebar` 和 `footer` 的文件命名不可以与它们的参数名称相同，不然会影响系统默认的布局设计，切记！！！ :smile:
+
+{{< /note >}}
+
+然后在站点的根目录下创建 `layouts/partials` 2个目录，用于存放自定布局设计文件，另外在站点根目录下创建 `statics/css` 2个目录，用于存放自定义 CSS 样式文件。一切就绪后，就可以参考如下的步骤，完成自己的设计想法。
+
+## 侧边栏设计
+
+在前面创建 `partials` 目录中新一个后缀名为 `html` 的文件，可以在里面书写你所想表达的设计或内容，比如引入一些第三方组件内容。示例如下：
+
+```html
+<div class="mydefined animated" itemprop="custom">
+  <span>支持自定义CSS和Sidebar布局啦💄💄💄</span>
+</div>
+```
+
+再把该文件的路径配置到相应的参数中，效果请查看左侧边栏底部的效果。
+
+## 底部设计
+
+在前面创建 `partials` 目录中新一个后缀名为 `html` 的文件，可以在里面书写你所想表达的设计或内容，比如引入一些第三方组件内容。示例如下：
+
+```html
+<div class="custom-footer">
+Website source code <a href="https://github.com/hugo-next/hugo-theme-next/tree/develop/exampleSite/layouts/partials/custom-footer.html" target="_blank">here</a>
+</div>
+```
+
+再把该文件的路径配置到相应的参数中，效果请查看站点底部的效果。
+
+
+## 自定义样式
+
+在前面创建 `css` 目录中新一个后缀名为 `css` 的文件，然后可以在里面把站点的样式进行重定义，或是增加一些自己定义的样式设计，在写文章时进行引用，示例如下：
+
+```html
+.custom-head5 {
+  font-size: 1.2em;
+  color: #ed6c24;
+  font-weight: bold;
+}
+```
+
+再把该文件的路径配置到相应的参数中，效果参考如下：
+
+<span class="custom-head5">我是自定义的标题样式效果!!!</span>
diff --git a/exampleSite/content/post/emoji-support.md b/exampleSite/content/post/emoji-support.md
index b0ab583..a9dce83 100644
--- a/exampleSite/content/post/emoji-support.md
+++ b/exampleSite/content/post/emoji-support.md
@@ -12,7 +12,6 @@ tags:
  - 表情
  - emoji
 
-toc: false
 url: "post/emoji-support.html"
 ---
 
diff --git a/exampleSite/content/post/external-link.md b/exampleSite/content/post/external-link.md
index 1d64e82..77fcc7b 100644
--- a/exampleSite/content/post/external-link.md
+++ b/exampleSite/content/post/external-link.md
@@ -25,11 +25,11 @@ weight: 1
 
 
 
-# 用户指南
+## 用户指南
 
 设置 NexT 主题很容易。只需遵循文档，就可快速创建您的个人网站！
 
-# 反馈
+## 反馈
 
 - 访问 Awesome NexT 列表，与其他用户分享插件和教程。
 - 加入我们的 Gitter 聊天。
diff --git a/exampleSite/content/post/hello-world.md b/exampleSite/content/post/hello-world.md
index a7fdcff..dbf641f 100644
--- a/exampleSite/content/post/hello-world.md
+++ b/exampleSite/content/post/hello-world.md
@@ -12,6 +12,7 @@ tags:
  - 开始
 
 url: post/hello-world.html
+toc: true
 weight: 2
 ---
 
diff --git a/exampleSite/content/post/math-formula.md b/exampleSite/content/post/math-formula.md
new file mode 100644
index 0000000..ac0f252
--- /dev/null
+++ b/exampleSite/content/post/math-formula.md
@@ -0,0 +1,227 @@
+---
+title: "数学公式渲染"
+description: "主题支持mathjs和katex两种不同插件的数学公式渲染方案。"
+keywords: "math,formula"
+
+date: 2022-09-11T10:16:02+08:00
+lastmod: 2022-09-11T10:16:02+08:00
+
+categories:
+  - 示例
+tags:
+  - 数学公式
+  - mathjax
+  - katex
+
+
+url: "post/math-formula.html"
+math: mathjax
+---
+
+本主题支持 `mathjax` 和 `katex` 两种不的方案支持数学公式的渲染，可根据自已的需求进行选择。
+
+<!--more-->
+
+接下的示例中，将使用 [MathJax](https://www.mathjax.org/) 方案来展示渲染效果。
+
+{{< note info >}}
+
+- 使用 `hugo new` 命令创建一篇新的文章
+- 可以全局启用数据公式渲染，请在项目配置参数 `math: katex` 或 `math: mathjax`
+- 或是将该参数配置到需要显示数学公式的页面头部（减少不必要的加载消耗）
+
+{{< /note >}}
+
+**注意：** 使用[支持的TeX功能](https://docs.mathjax.org/en/latest/input/tex/index.html)的联机参考资料。
+
+### 例子
+
+
+## 重复的分数
+$$
+\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
+$$
+
+
+## 总和记号
+$$
+\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
+$$
+
+
+## 几何级数之和
+我把接下来的两个例子分成了几行，这样它在手机上表现得更好。这就是为什么它们包含 `\displaystyle`。
+
+$$
+\displaystyle\sum_{i=1}^{k+1}i
+$$
+
+$$
+\displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)
+$$
+
+$$
+\displaystyle= \frac{k(k+1)}{2}+k+1
+$$
+
+$$
+\displaystyle= \frac{k(k+1)+2(k+1)}{2}
+$$
+
+$$
+\displaystyle= \frac{(k+1)(k+2)}{2}
+$$
+
+$$
+\displaystyle= \frac{(k+1)((k+1)+1)}{2}
+$$
+
+## 乘记号
+$$
+\displaystyle 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \displaystyle\text{ for }\lvert q\rvert < 1.
+$$
+
+
+## 随文数式
+这是一些线性数学: $$ k_{n+1} = n^2 + k_n^2 - k_{n-1} $$ ， 然后是更多的文本。
+
+
+## 希腊字母
+$$
+\Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega
+\alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi \ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi
+$$
+
+
+## 箭头
+$$
+\gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow
+$$
+
+$$
+\Leftarrow\ \Rightarrow\ \leftrightarrow\ \Leftrightarrow\ \mapsto\ \hookleftarrow
+\leftharpoonup\ \leftharpoondown\ \rightleftharpoons\ \longleftarrow\ \Longleftarrow\ \longrightarrow
+$$
+
+$$
+\Longrightarrow\ \longleftrightarrow\ \Longleftrightarrow\ \longmapsto\ \hookrightarrow\ \rightharpoonup
+$$
+
+$$
+\rightharpoondown\ \leadsto\ \nearrow\ \searrow\ \swarrow\ \nwarrow
+$$
+
+
+## 符号
+$$
+\surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes\ \oslash\ \circledcirc\ \boxdot\ \bigtriangleup
+$$
+
+$$
+\bigtriangledown\ \dagger\ \diamond\ \star\ \triangleleft\ \triangleright\ \angle\ \infty\ \prime\ \triangle
+$$
+
+
+## 微积分学
+$$
+\int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx
+$$
+
+$$
+f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}
+$$
+
+$$
+\oint \vec{F} \cdot d\vec{s}=0
+$$
+
+
+## 洛伦茨方程
+$$
+\begin{aligned} \dot{x} & = \sigma(y-x) \\\\ \dot{y} & = \rho x - y - xz \\\\ \dot{z} & = -\beta z + xy \end{aligned}
+$$
+
+
+## 交叉乘积
+这在KaTeX中是可行的，但在这种环境中馏分的分离不是很好。
+
+$$
+\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}
+$$
+
+这里有一个解决方案:使用“mfrac”类(在MathJax情况下没有区别)的额外类使分数更小:
+
+$$
+\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}
+$$
+
+
+## 强调
+$$
+\hat{x}\ \vec{x}\ \ddot{x}
+$$
+
+
+## 有弹性的括号
+$$
+\left(\frac{x^2}{y^3}\right)
+$$
+
+
+## 评估范围
+$$
+\left.\frac{x^3}{3}\right|_0^1
+$$
+
+
+## 诊断标准
+$$
+f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\\\ 3n+1, & \text{if } n\text{ is odd} \end{cases}
+$$
+
+
+## 麦克斯韦方程组
+$$
+\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}
+$$
+
+
+## 统计学
+固定词组：
+
+$$
+\frac{n!}{k!(n-k)!} = {^n}C_k
+{n \choose k}
+$$
+
+## 分数在分数
+$$
+\frac{\frac{1}{x}+\frac{1}{y}}{y-z}
+$$
+
+
+## ｎ次方根
+$$
+\sqrt[n]{1+x+x^2+x^3+\ldots}
+$$
+
+
+## 矩阵
+$$
+\begin{pmatrix} a_{11} & a_{12} & a_{13}\\\\ a_{21} & a_{22} & a_{23}\\\\ a_{31} & a_{32} & a_{33} \end{pmatrix}
+\begin{bmatrix} 0 & \cdots & 0 \\\\ \vdots & \ddots & \vdots \\\\ 0 & \cdots & 0 \end{bmatrix}
+$$
+
+
+## 标点符号
+$$
+f(x) = \sqrt{1+x} \quad (x \ge -1)
+f(x) \sim x^2 \quad (x\to\infty)
+$$
+
+现在用标点符号:
+
+$$
+f(x) = \sqrt{1+x}, \quad x \ge -1
+f(x) \sim x^2, \quad x\to\infty
+$$
\ No newline at end of file
diff --git a/exampleSite/content/post/mermaid-charts.md b/exampleSite/content/post/mermaid-charts.md
new file mode 100644
index 0000000..9f4e44c
--- /dev/null
+++ b/exampleSite/content/post/mermaid-charts.md
@@ -0,0 +1,195 @@
+---
+title: "Mermaid支持流程图"
+description: "mermaid-flow-chart"
+keywords: "mermaid,flow,chart"
+
+date: 2022-09-18T20:58:13+08:00
+lastmod: 2022-09-18T20:58:13+08:00
+
+categories:
+  - 示例
+tags:
+  - 流程图
+  - 时序图
+
+url: "post/mermaid-charts.html"
+mermaid: true
+toc: true
+---
+
+
+本主题已支持 `Mermaid` 实现以纯文本的方式绘制流程图、序列图、甘特图、状态图、关系图行等等，随着 `Mermaid` 也在逐步发展，后续还会有各种各样的图被引入进来，更多的类型及使用方式可关注其官方网站：[https://mermaid-js.github.io/](https://mermaid-js.github.io/)。
+
+<!--more-->
+
+## 使用说明
+
+{{< note info >}}
+
+- 通过 `hugo new` 命令创建一篇新的文章
+- 在文章头部配置 `mermaid: true`
+- 使用短代码书写各种类型的图，自带2个参数： align（对齐） 和 bc（背景色），可参考如下使用示例
+
+{{< /note >}}
+
+## 流程图
+
+```shell
+{{</* mermaid align="left" */>}}
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+{{</* /mermaid */>}}
+```
+
+{{< mermaid align="left" >}}
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+{{< /mermaid >}}
+
+## 时序图
+
+```shell
+{{</* mermaid bc="#eee"  */>}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+{{</* /mermaid */>}}
+```
+
+{{< mermaid bc="#eee" >}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+{{< /mermaid >}}
+
+## 类图
+
+```shell
+{{</* mermaid */>}}
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+{{< /mermaid >}}
+
+## 甘特图
+
+```shell
+{{</* mermaid */>}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+{{< /mermaid >}}
+
+## 实体关系图
+
+```shell
+{{</* mermaid */>}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{< /mermaid >}}
+
+## 用户旅程
+
+```shell
+{{</* mermaid */>}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{< /mermaid >}}
diff --git a/exampleSite/content/post/shortcodes.md b/exampleSite/content/post/shortcodes.md
index c6be592..013cf9c 100644
--- a/exampleSite/content/post/shortcodes.md
+++ b/exampleSite/content/post/shortcodes.md
@@ -18,7 +18,7 @@ url: "post/shortcodes.html"
 
 <!--more-->
 
-# 块引用
+## 块引用
 
 在引用一些经典名言名句时，可以采用此短语，语法参考如下：
 
@@ -42,7 +42,7 @@ url: "post/shortcodes.html"
 
 {{< /quote >}}
 
-# 信息块
+## 信息块
 
 支持 `default`，`info`，`success`，`warning`，`danger` 等五种不同效果的展示，语法参考如下：
 
diff --git a/exampleSite/content/post/syntax-highlighting.md b/exampleSite/content/post/syntax-highlighting.md
index bbedc6f..e370982 100644
--- a/exampleSite/content/post/syntax-highlighting.md
+++ b/exampleSite/content/post/syntax-highlighting.md
@@ -22,9 +22,9 @@ Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用
 
 <!--more-->
 
-# 编程语言
+## 编程语言
 
-## GO
+### GO
 
 {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
 
@@ -41,7 +41,7 @@ func GetTitleFunc(style string) func(s string) string {
 
 {{< / highlight >}}
 
-## Java
+### Java
 
 ```java
 import javax.swing.JFrame;  //Importing class JFrame
@@ -58,13 +58,13 @@ public class HelloWorld {
 }
 ```
 
-## Python
+### Python
 
 ``` python
 print "Hello, world!"
 ```
 
-## Git 对比
+### Git 对比
 
 ``` diff {hl_lines=[4,"6-7"]， linenos=true}
 *** /path/to/original ''timestamp''
@@ -92,9 +92,9 @@ It is important to spell
 +new line
 ```
 
-# 文件
+## 文件
 
-## Make 文件
+### Make 文件
 
 ``` makefile {linenos=false}
 CC=gcc
@@ -104,7 +104,7 @@ hellomake: hellomake.o hellofunc.o
      $(CC) -o hellomake hellomake.o hellofunc.o -I.
 ```
 
-## Markdown 文档
+### Markdown 文档
 
 ``` markdown
 **bold**
@@ -112,9 +112,9 @@ hellomake: hellomake.o hellofunc.o
 [link](www.example.com)
 ```
 
-# 数据内容
+## 数据内容
 
-## JSON 数据
+### JSON 数据
 
 ``` json
 {"employees":[
@@ -122,7 +122,7 @@ hellomake: hellomake.o hellofunc.o
 ]}
 ```
 
-## XML 内容
+### XML 内容
 
 ``` xml
 <employees>
@@ -132,7 +132,7 @@ hellomake: hellomake.o hellofunc.o
 </employees>
 ```
 
-## SQL 查询
+### SQL 查询
 
 {{< highlight sql >}}
 
diff --git a/exampleSite/content/post/table-of-content.md b/exampleSite/content/post/table-of-content.md
index 884653c..ee9637d 100644
--- a/exampleSite/content/post/table-of-content.md
+++ b/exampleSite/content/post/table-of-content.md
@@ -23,38 +23,38 @@ url: post/table-of-content.html
 
 ![禇老](https://wfqqreader-1252317822.image.myqcloud.com/cover/568/814568/t6_814568.jpg)
 
-# 早年的故事
+## 早年的故事
 
-## 起始
+### 起始
 
 2014年的春天，在云南省华宁县和宜良县的交界处，一座名叫矣则的小山村里，一处已经有上百年历史的古旧四合院宅子被拆掉。村委会正带领村民们进行“美丽乡村”的建设，一年以后，旧有村居将再也看不到，代之而起的是钢筋混凝土的新式民居。就像10年、20年前中国大小城市的改造一样，这个群山围绕的小村子也开始陷入“工地模式”。
 
-### 童年浪花
+#### 童年浪花
 
 在江河边长大的孩子几乎都有一个当仁不让的特长：善水。褚时健也不例外，他不仅从小就在南盘江和花鱼塘里扑腾出了上佳的游泳技术，五六岁已经可以一个猛子扎出老远，而且从七八岁就可以在南盘江和河滩上的鱼塘里捉鱼了。
 
-## 少年故事
+### 少年故事
 
 褚时健在乡村自由自在生活的十多年，其实正是中国社会风雨飘摇的十多年。特别是1937年卢沟桥事变后，日本人发动全面侵华战争，短短两三年间，中国的大部分国土相继沦陷
 
-# 激情的青春十年
+## 激情的青春十年
 
-## 当上了游击队员
+### 当上了游击队员
 
 1948年夏天，褚时健回乡，在禄丰车站小学做了一名老师，同时也和褚时仁、褚时杰一起继续保持与共产党组织的联系，做一些传递情报的工作
 
-### 战火纷飞
+#### 战火纷飞
 
 因为战斗力相较悬殊，所以游击队只能是靠打一枪换一个地方的办法，专找敌人薄弱的地方攻击，但更多时候，都是在防御和转移阵地。
 
-# 生活的断层
+## 生活的断层
 
-## 跌入生活底层
+### 跌入生活底层
 
 “反右”运动中被打倒的人在“右派”身份确定后，只有一条路可走：下放到农场。农场名副其实，就是干农活儿的地方，必须过和农民一样的生活。
 
-# 尾声
+## 尾声
 
-## 岁月像一条河
+### 岁月像一条河
 
 2015年，是褚时健和马静芬结婚60周年，被称为“钻石婚”的纪念年份。这简直是一份人生的奖赏,在中国离婚率愈益升高的当下，60年的婚姻，几乎就像一个前世之梦。一个甲子的相伴相随，褚时健和马静芬共同经历了国家和个人的各种风浪，共同面对过生死。他们两人已经不仅是夫妻，更是一对战友。尽管马静芬偶尔会对褚时健年轻时候的粗心抱怨上两句，但说到最后，她会说一句：“没有我就没有他，没有他也就没有我。”
\ No newline at end of file
diff --git a/exampleSite/data/flinks.yaml b/exampleSite/data/flinks.yaml
index 3a43c14..78d1b96 100644
--- a/exampleSite/data/flinks.yaml
+++ b/exampleSite/data/flinks.yaml
@@ -16,7 +16,7 @@
 
     - name: 凡梦星尘空间站
       desc: 再平凡的人也有属于他的梦想！
-      avatar: https://lisenhui.cn/img/avatar.png
+      avatar: https://lisenhui.cn/imgs/avatar.png
       link: https://lisenhui.cn
 
     
diff --git a/exampleSite/layouts/partials/custom_footer.html b/exampleSite/layouts/partials/custom_footer.html
new file mode 100644
index 0000000..dfd4a6f
--- /dev/null
+++ b/exampleSite/layouts/partials/custom_footer.html
@@ -0,0 +1,3 @@
+<div class="custom-footer">
+Website source code <a href="https://github.com/hugo-next/hugo-theme-next/blob/develop/exampleSite/layouts/partials/custom_footer.html" target="_blank">here</a>
+</div>
\ No newline at end of file
diff --git a/exampleSite/layouts/partials/custom_sidebar.html b/exampleSite/layouts/partials/custom_sidebar.html
new file mode 100644
index 0000000..e8f747e
--- /dev/null
+++ b/exampleSite/layouts/partials/custom_sidebar.html
@@ -0,0 +1,3 @@
+<div class="mydefined animated" itemprop="custom">
+  <span>支持自定义CSS和Sidebar布局啦💄💄💄</span>
+</div>
\ No newline at end of file
diff --git a/exampleSite/static/css/custom_style.css b/exampleSite/static/css/custom_style.css
new file mode 100644
index 0000000..881b2d2
--- /dev/null
+++ b/exampleSite/static/css/custom_style.css
@@ -0,0 +1,16 @@
+/** Custom style defined file **/
+
+.mydefined {
+  font-size: 0.65em;
+  color: #ed6c24;
+}
+
+.custom-footer {
+  color: #ed6c24;
+}
+
+.custom-head5 {
+  font-size: 1.2em;
+  color: #ed6c24;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 65f0158..fc9971c 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -45,8 +45,6 @@ RSSLable:
   other: "RSS Subscribe"
 CCLinkTitle:
   other: "Creative Commons"
-BackTopLabel:
-  other: "Top"
 
 TagsCounterTitle:
   zero: No tags
@@ -134,10 +132,18 @@ RewardBitcoin:
 PostCommentTitle:
   other: Comments
 
-VisitorsLabel:
-  other: Total Visitors
-PageViewsLabel:
-  other: Total Page Views
+SiteInfoItems:
+  title: "Web Status"
+  runTimes: "Running:"
+  words: "Words:"
+  readTimes: "ReadTime:"
+  visitors: "Visitors:"
+  pageViews: "Views:"
+  todayViews: "Today Views:"
+  yesterdayViews: "Yesterday Views:"
+  monthViews: "Month Views:"
+  totalViews: "Total Views"
+  lastUpdate: "Last Update:"
 
 FooterPowerby:
   other: "Power by %s"
@@ -149,4 +155,21 @@ SearchEmpty:
 SearchHits:
   hits: "${hits} results found"
 SearchHitsTime:
-  other: "${hits} results found in ${time} ms"
\ No newline at end of file
+  other: "${hits} results found in ${time} ms"
+
+DateSuffix:
+  years: " Year "
+  days: " Day "
+  hours: " Hour "
+  mins: " Min"
+  month: " Month Ago"
+  day: " Day Ago"
+  hour: " Hour Ago"
+  min: " Min Ago"
+  just: "Just"
+
+ToolBtns:
+  comment: "Go to Comment"
+  theme: "Change Theme"
+  lang: "Multilingual translation"
+  backTop: "Back to Top"
\ No newline at end of file
diff --git a/i18n/zh-cn.yaml b/i18n/zh-cn.yaml
index a0b30be..8a77470 100644
--- a/i18n/zh-cn.yaml
+++ b/i18n/zh-cn.yaml
@@ -46,8 +46,6 @@ RSSLable:
   other: RSS 订阅
 CCLinkTitle:
   other: 共享知识
-BackTopLabel:
-  other: 返回顶部
 
 TagsCounterTitle:
   zero: 暂无标签
@@ -135,10 +133,18 @@ RewardBitcoin:
 PostCommentTitle:
   other: 评论交流
 
-VisitorsLabel:
-  other: 总访客量
-PageViewsLabel:
-  other: 总访问量
+SiteInfoItems:
+  title: "网站资讯"
+  runTimes: "已运行："
+  words: "总字数："
+  readTimes: "阅读约："
+  visitors: "总访客数："
+  pageViews: "页面浏览："
+  todayViews: "今日访问："
+  yesterdayViews: "昨日访问："
+  monthViews: "本月访问："
+  totalViews: "总访问量："
+  lastUpdate: "最后更新于："
 
 FooterPowerby:
   other: 由 %s 强力驱动
@@ -150,4 +156,21 @@ SearchEmpty:
 SearchHits:
   hits: "找到 ${hits} 个搜索结果"
 SearchHitsTime:
-  other: "找到 ${hits} 个搜索结果（用时 ${time} 毫秒）"
\ No newline at end of file
+  other: "找到 ${hits} 个搜索结果（用时 ${time} 毫秒）"
+
+DateSuffix:
+  years: " 年 "
+  days: " 天 "
+  hours: " 小时 "
+  mins: " 分钟"
+  month: " 个月前"
+  day: " 天前"
+  hour: " 小时前"
+  min: " 分钟前"
+  just: "刚刚"
+
+ToolBtns:
+  comment: "直达评论"
+  theme: "深浅模式切换"
+  lang: "多语言翻译"
+  backTop: "返回顶部"
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 9c7c917..7606f8a 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -40,7 +40,7 @@
     </div>
   </footer>
 
-  {{- partialCached "scripts.html" . }}
+  {{- partial "scripts.html" . }}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ea48856..dd56d01 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,3 +1,2 @@
 {{ $paginator := .Paginator.Pages.GroupByDate "2006" }}
-{{ partial "list.html" $paginator }}
-
+{{ partial "list.html" $paginator }}
\ No newline at end of file
diff --git a/layouts/_default/list.localindexes.xml b/layouts/_default/list.localindexes.xml
index ea75b7b..90fdce2 100644
--- a/layouts/_default/list.localindexes.xml
+++ b/layouts/_default/list.localindexes.xml
@@ -3,7 +3,7 @@
   {{range where .Site.RegularPages "Kind" "page"}}
   <entry>
     <title>{{ .Title }}</title>
-    <url>{{ .Permalink }}</url>
+    <url>{{ .RelPermalink | relLangURL }}</url>
     <categories>
       {{- range .Params.categories }}<category>{{ . }}</category>{{- end }}
     </categories>
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index a4b5e10..8506b31 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -24,7 +24,7 @@
         <ul class="category-list">
           {{- range $name, $items := $cats }}
           <li class="category-list-item">
-            <a class="category-list-link" href="{{ "/categories/" | relLangURL }}{{ $name | urlize | lower  }}" data-pjax-state="">{{ $name }}</a>
+            <a class="category-list-link" href="{{ "/categories/" | relLangURL }}{{ $name | urlize | lower  }}" data-pjax-state="">{{ .Page.Title }}</a>
             <span class="category-list-count">{{ len $items }}</span>
           </li>
           {{- end }}
@@ -41,7 +41,7 @@
       <div class="tag-cloud-tags">
         {{ $randNums := (seq 10) }}
         {{- range $name, $items := $tags }}
-        <a class="tag-cloud-{{ index (shuffle $randNums) 0 }}" href="{{ "/tags/" | relLangURL }}{{ $name | urlize | lower  }}">{{ $name }}
+        <a class="tag-cloud-{{ index (shuffle $randNums) 0 }}" href="{{ "/tags/" | relLangURL }}{{ $name | urlize | lower  }}">{{ .Page.Title }}
           <span class="tag-list-count">
             <sup>({{ len $items }})</sup>
           </span>
@@ -52,4 +52,4 @@
     {{- end }}
 </div>
 </div>
-{{- end }}
\ No newline at end of file
+{{- end }}
diff --git a/layouts/flinks/single.html b/layouts/flinks/single.html
index cbe325d..5206c7b 100644
--- a/layouts/flinks/single.html
+++ b/layouts/flinks/single.html
@@ -3,6 +3,7 @@
 {{- define "main_inner_class" }}flinks posts-expand{{- end }}
 
 {{ define "main" }}
+
 <div class="flinks-block">
 <h1 class="flinks-block-title">{{ .Title }}</h1>
 <div class="flinks-lists">
@@ -30,5 +31,4 @@
 <div class="flinks-page-desc">{{ .Content }}</div>
 </div>
 
-
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/_funs/cal_siteinfo.html b/layouts/partials/_funs/cal_siteinfo.html
new file mode 100644
index 0000000..b1fe5ab
--- /dev/null
+++ b/layouts/partials/_funs/cal_siteinfo.html
@@ -0,0 +1,16 @@
+{{ $scratch := newScratch }}
+{{ $pages := (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections).ByLastmod.Reverse }}
+
+{{ range $pages }}
+  {{ $scratch.Add "totalWords" .WordCount }}
+  {{ $scratch.Add "totalTimes" .ReadingTime }}
+{{ end }}
+
+{{ range first 1 $pages }}
+  {{ $scratch.Set "first" (time.Format .Site.Params.timeFormat .Date) }}
+{{ end }}
+{{ range last 1 $pages }}
+  {{ $scratch.Set "last" (time.Format .Site.Params.timeFormat .Date) }}
+{{ end }}
+
+{{ return $scratch }}
\ No newline at end of file
diff --git a/layouts/partials/_funs/get_res.html b/layouts/partials/_funs/get_res.html
new file mode 100644
index 0000000..c49a386
--- /dev/null
+++ b/layouts/partials/_funs/get_res.html
@@ -0,0 +1,21 @@
+{{/* Use to get resources path with vendor */}}
+
+{{ $fmt := "%s/%s@%s/%s" }}
+
+{{ $npm := .res.name }}
+{{ with .res.alias2 }}
+  {{ $npm = . }}
+{{ end }}   
+{{- $file := .res.file }}
+
+{{- if eq .vendor "cdnjs" }}
+  {{- with .res.alias }}
+    {{- $npm = . }}
+  {{- end }}   
+  {{- $file = replaceRE `(dist|lib|source\/js)\/` "" .res.file }}
+  {{- $fmt = "%s/%s/%s/%s" }}
+{{- end }}
+
+{{ $pluginRes := printf $fmt .router $npm .res.version $file }}
+
+{{ return $pluginRes }}
\ No newline at end of file
diff --git a/layouts/partials/_thirdparty/analytics/51la.html b/layouts/partials/_thirdparty/analytics/51la.html
index 07e9221..63d0886 100644
--- a/layouts/partials/_thirdparty/analytics/51la.html
+++ b/layouts/partials/_thirdparty/analytics/51la.html
@@ -12,6 +12,6 @@
     {{ end }}
     }
 
-  document.head.appendChild(script);
-});
+    document.head.appendChild(script);
+  });
 </script>
diff --git a/layouts/partials/_thirdparty/analytics/baidu.html b/layouts/partials/_thirdparty/analytics/baidu.html
new file mode 100644
index 0000000..7795e0c
--- /dev/null
+++ b/layouts/partials/_thirdparty/analytics/baidu.html
@@ -0,0 +1,11 @@
+<script type="text/javascript">
+  document.addEventListener('DOMContentLoaded', () => {
+    var script = document.createElement('script');
+      
+    script.charset = "UTF-8";
+    script.src     = "{{ .Site.Data.resources.analytics.baidu }}{{ .Site.Params.analytics.baidu }}";
+    script.async   = "true"
+
+    document.head.appendChild(script);
+  });
+</script>
\ No newline at end of file
diff --git a/layouts/partials/_thirdparty/analytics/busuanzi.html b/layouts/partials/_thirdparty/analytics/busuanzi.html
new file mode 100644
index 0000000..2bdda46
--- /dev/null
+++ b/layouts/partials/_thirdparty/analytics/busuanzi.html
@@ -0,0 +1,11 @@
+<script type="text/javascript">
+  document.addEventListener('DOMContentLoaded', () => {
+    var script = document.createElement('script');
+      
+    script.charset = "UTF-8";
+    script.src     = "{{ .Site.Data.resources.analytics.busuanzi }}";
+    script.async   = "true"
+
+    document.head.appendChild(script);
+  });
+</script>
diff --git a/layouts/partials/_thirdparty/analytics/google.html b/layouts/partials/_thirdparty/analytics/google.html
new file mode 100644
index 0000000..103dd4c
--- /dev/null
+++ b/layouts/partials/_thirdparty/analytics/google.html
@@ -0,0 +1,18 @@
+<script type="text/javascript">
+  document.addEventListener('DOMContentLoaded', () => {
+    var script = document.createElement('script');
+      
+    script.charset = "UTF-8";
+    script.src     = "{{ .Site.Data.resources.analytics.google }}{{ .Site.Params.analytics.google }}";
+    script.async   = "true"
+    script.onload = function() {
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', '{{ .Site.Params.analytics.google }} ');
+    }
+
+    document.head.appendChild(script);
+  });
+</script>
\ No newline at end of file
diff --git a/layouts/partials/_thirdparty/others/math.html b/layouts/partials/_thirdparty/others/math.html
new file mode 100644
index 0000000..e1eb956
--- /dev/null
+++ b/layouts/partials/_thirdparty/others/math.html
@@ -0,0 +1,28 @@
+<!-- Load math render scripts -->
+{{ $math := .Params.math | default .Site.Params.math }}
+{{- partial "scripts/plugins.html" (dict "vendor" (.Scratch.Get "vendor") "router" (.Scratch.Get "router") "res" .Site.Data.resources.plugins "index" $math) }}
+{{ if eq $math "katex" }}
+  <script type="text/javascript">
+      document.addEventListener("DOMContentLoaded", function() {
+          renderMathInElement(document.body, {
+            delimiters: [
+                {left: '$$', right: '$$', display: true},
+                {left: '$', right: '$', display: false},
+                {left: '\\(', right: '\\)', display: false},
+                {left: '\\[', right: '\\]', display: true}
+            ],
+            
+            throwOnError : false
+          });
+      });
+  </script>
+{{ end }}
+{{ if eq $math "mathjax" }}
+  <script type="text/javascript">
+    window.MathJax = {
+      tex: {
+        inlineMath: [["$", "$"]],
+      }
+    };
+  </script>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/_thirdparty/others/mermaid.html b/layouts/partials/_thirdparty/others/mermaid.html
new file mode 100644
index 0000000..bd61ca9
--- /dev/null
+++ b/layouts/partials/_thirdparty/others/mermaid.html
@@ -0,0 +1,15 @@
+{{- partial "scripts/plugins.html" (dict "vendor" (.Scratch.Get "vendor") "router" (.Scratch.Get "router") "res" .Site.Data.resources.plugins "index" "mermaid") }}
+
+<script type="text/javascript">
+  document.addEventListener('DOMContentLoaded', () => {
+    mermaid.initialize({
+      sequence: { 
+        showSequenceNumbers: true,
+        actorMargin: 50, 
+        diagramMarginX:10, 
+        diagramMarginY:10
+      }
+    });
+  });
+</script>
+
diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html
index 89315f4..e6e9ed5 100644
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
@@ -5,7 +5,7 @@
 {{- $fc := .active }}
 {{- $sc := "" }}
 {{- $sn := "" }}
-<div class="post-comments">
+<div id="comments" class="post-comments">
   <div class="comment-head">
     <div class="comment-headline">
       <i class="fas fa-comments fa-fw"></i>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 631952d..5f989c2 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,10 @@
 {{- $ft := .Site.Params.footer }}
+{{ if $ft.translate }}
+<div class="google-translate">
+  <i class="fa fa-language"></i>
+  <div id="google_translate_element"></div>
+</div>
+{{ end }}
 <div class="copyright">
   &copy;
   <span itemprop="copyrightYear">
@@ -18,36 +24,6 @@
   </span>
   <span class="author" itemprop="copyrightHolder">{{ $ft.copyright | default .Site.Params.author }}</span>
 </div>
-{{/* TODO
-<!--
-{{- if config.symbols_count_time.total_symbols or config.symbols_count_time.total_time }}
-<div class="wordcount">
-  {{- if config.symbols_count_time.total_symbols }}
-  <span class="post-meta-item">
-    <span class="post-meta-item-icon">
-      <i class="fa fa-chart-line"></i>
-    </span>
-    {{- if .Site.Params.symbols_count_time.item_text_total }}
-    <span>{{ __('symbols_count_time.count_total') + __('symbol.colon') }}</span>
-    {{- end }}
-    <span title="{{ __('symbols_count_time.count_total') }}">{{ symbolsCountTotal(site) }}</span>
-  </span>
-  {{- end }}
-  {{- if config.symbols_count_time.total_time }}
-  <span class="post-meta-item">
-    <span class="post-meta-item-icon">
-      <i class="fa fa-coffee"></i>
-    </span>
-    {{- if .Site.Params.symbols_count_time.item_text_total }}
-    <span>{{ __('symbols_count_time.time_total') }} &asymp;</span>
-    {{- end }}
-    <span title="{{ __('symbols_count_time.time_total') }}">{{ symbolsTimeTotal(site, config.symbols_count_time.awl, config.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}</span>
-  </span>
-  {{- end }}
-</div>
-{{- end }}
--->
-*/}}
 {{- with .Site.Params.busuanzi }}
 {{- if .enable }}
 <div class="busuanzi-count">
@@ -76,7 +52,7 @@
 {{- end }}
 {{- if $ft.powered }}
 <div class="powered-by">
-  {{ $pb := printf "<a href='https://gohugo.io' target='_blank'>Hugo</a> &amp; <a href='https://github.com/hugo-next/hugo-theme-next' target='_blank'>Hugo NexT.%s</a>" .Site.Params.scheme }}
+  {{ $pb := printf "<a href='https://gohugo.io' title='%s' target='_blank'>Hugo</a> &amp; <a href='https://github.com/hugo-next/hugo-theme-next' title='%s' target='_blank'>Hugo NexT.%s</a>" hugo.Version .Site.Data.config.version .Site.Params.scheme }}
   {{- printf (T "FooterPowerby") $pb | safeHTML }}
 </div>
 {{- end }}
@@ -105,3 +81,8 @@
 </div>
 {{- end }} 
 {{- end }}
+
+{{- $custom := .Scratch.Get "footer" }}
+{{- if $custom }}
+  {{ partialCached $custom . }}
+{{- end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index aac885c..f9f3662 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -3,7 +3,7 @@
 {{- partial "head/twitter.html" . }}
 {{- partial "head/googleplus.html" . }}
 {{- partial "head/facebook.html" . }}
-{{- partial "head/verify.html" . }}
+{{- partialCached "head/verify.html" . }}
 {{- partialCached "head/style.html" . }}
 {{- partial "head/config.html" . }}
 {{- partialCached "head/analytics.html" . }}
diff --git a/layouts/partials/head/analytics.html b/layouts/partials/head/analytics.html
index 37a5b2f..63301bb 100644
--- a/layouts/partials/head/analytics.html
+++ b/layouts/partials/head/analytics.html
@@ -1,3 +1,12 @@
 {{- if isset .Site.Params.analytics "laid" }}
   {{ partial "_thirdparty/analytics/51la.html" . }}  
 {{- end }}
+{{- if isset .Site.Params.analytics "baidu" }}
+  {{ partial "_thirdparty/analytics/baidu.html" . }}  
+{{- end }}
+{{- if isset .Site.Params.analytics "google" }}
+  {{ partial "_thirdparty/analytics/google.html" . }}  
+{{- end }}
+{{- if isset .Site.Params.analytics "busuanzi" }}
+  {{ partial "_thirdparty/analytics/busuanzi.html" . }}  
+{{- end }}
diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html
deleted file mode 100644
index d9e8298..0000000
--- a/layouts/partials/head/css.html
+++ /dev/null
@@ -1,19 +0,0 @@
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
-  <!-- NexT theme css style -->
-{{- $scssVars := resources.Get "css/_sitevars.scss"}}
-{{- $scssVars = $scssVars | resources.ExecuteAsTemplate "sitevars.scss" . }}
-{{- $scssMain := resources.Get "css/main.scss" }}
-{{- $scss := slice $scssVars $scssMain | resources.Concat "css/main.scss" }}
-{{- $css := $scss | toCSS (dict "targetPath" "/css/main_new.css" "outputStyle" "expanded") }}
-  <link rel="stylesheet" href="{{ $css.RelPermalink }}">
-{{- $scheme := lower .Site.Params.scheme }}
-{{- $styleScheme := (printf "css/%s/style.css" $scheme) }}
-  <link rel="stylesheet" href="/css/{{ $scheme }}/main.css">
-{{- $style := resources.Get $styleScheme | resources.ExecuteAsTemplate $styleScheme . }}
-  <link rel="stylesheet" href="{{ $style.RelPermalink }}">  
-  <link rel="stylesheet" href="/css/hover.css">
-
-
-
-
diff --git a/layouts/partials/head/style.html b/layouts/partials/head/style.html
index c793eed..c91bd20 100644
--- a/layouts/partials/head/style.html
+++ b/layouts/partials/head/style.html
@@ -2,19 +2,10 @@
 {{- $cssRes := .Site.Data.resources.css }}
 {{- $vendor := .Site.Params.vendors.plugins }}
 {{- $router := .Scratch.Get "router" }}
-{{ $cssFmt := "%s/%s@%s/%s" }}
+
 {{- range $css := $cssRes }}
-  {{- $npm := $css.name }}
-  {{- $file := $css.file }}
-  {{- if eq $vendor "cdnjs" }}
-    {{- with $css.alias }}
-      {{- $npm = . }}
-    {{- end }}   
-    {{- $file = replaceRE `(dist|lib|source\/js)\/` "" $css.file }}
-    {{- $cssFmt = "%s/%s/%s/%s" }}
-  {{- end }}
-  {{- $pluginCSS := printf $cssFmt $router $npm $css.version $file }}
-  <link type="text/css" rel="stylesheet" href="{{ $pluginCSS }}" /> 
+  {{ $pluginCss := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
+  <link type="text/css" rel="stylesheet" href="{{ $pluginCss }}" /> 
 {{- end }}
 
 <!-- Main Style file -->
@@ -24,7 +15,7 @@
 {{- if hugo.IsProduction }}
 {{- $css = $css | minify | fingerprint }}
 {{- end }}
-  <link rel="stylesheet" href="{{ $css.RelPermalink }}">
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
 {{- if .IsPage }}
   <style type="text/css">
     .post-footer, .flinks-list-footer hr:after {
@@ -32,4 +23,9 @@
     }
   </style>
 {{- end }}
+
+{{- $custom := .Scratch.Get "style" }}
+{{- if $custom }}
+<link rel="stylesheet" type="text/css" href="{{ $custom }}">
+{{- end }}
   
\ No newline at end of file
diff --git a/layouts/partials/init.html b/layouts/partials/init.html
index 22f8872..30c88bf 100644
--- a/layouts/partials/init.html
+++ b/layouts/partials/init.html
@@ -20,6 +20,7 @@
 
 {{ $vendor := .Site.Params.vendors.plugins }}
 {{ $router := index .Site.Data.resources.vendors $vendor }}
+{{ $globalVars.Set "vendor" $vendor }}
 {{ $globalVars.Set "router" $router }}
 
 {{ $config := dict
@@ -40,6 +41,15 @@
     "empty"       (T "SearchEmpty")
     "hits_time"   (T "SearchHitsTime")
     "hits"        (T "SearchHits")
+    "ds_years"    (T "DateSuffix.years")
+    "ds_days"     (T "DateSuffix.days")
+    "ds_hours"    (T "DateSuffix.hours")
+    "ds_mins"     (T "DateSuffix.mins")
+    "ds_month"    (T "DateSuffix.month")
+    "ds_day"      (T "DateSuffix.day")
+    "ds_hour"     (T "DateSuffix.hour")
+    "ds_min"      (T "DateSuffix.min")
+    "ds_just"     (T "DateSuffix.just")
   )
 }}
 
@@ -106,4 +116,10 @@
 
 {{ $globalVars.Set "config" $config }}
 
+{{ with .Site.Params.customFilePath }}
+  {{ range $k, $v := . }}
+    {{ $globalVars.Set $k $v }}
+  {{ end }}
+{{ end }}
+
 {{ return $globalVars.Values }}
diff --git a/layouts/partials/menus.html b/layouts/partials/menus.html
deleted file mode 100644
index b330003..0000000
--- a/layouts/partials/menus.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<ul class="main-menu menu">
-  {{- $curP := . }}
-  {{- range .Site.Menus.main }}
-  {{ $active := or ($curP.IsMenuCurrent "main" .) ($curP.HasMenuCurrent "main" .) }}
-  {{ $active = or $active (eq .URL "/")}}
-  <li class="menu-item menu-item-{{ .Identifier }}">
-    <a href="{{ .URL }}" class="hvr-icon-pulse{{if $active }} menu-item-active{{ end }}" rel="section">
-      <i class="fa fa-{{ .Pre }} hvr-icon"></i>{{- .Name }}
-    </a>
-  </li>
-  {{- end }}
-</ul>
\ No newline at end of file
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index a005bf4..d18cc16 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -18,7 +18,8 @@
     <header class="post-header">
       {{ partial "post/header.html" (dict "ctx" .ctx "IsHome" .IsHome) }}
     </header>
-    <div class="post-body" itemprop="articleBody">
+    {{ $tocEnable := .ctx.Params.toc | default .ctx.Site.Params.toc.enable }}
+    <div class="post-body {{ if and $tocEnable .ctx.Site.Params.toc.number }} autonumber {{ end }}" itemprop="articleBody">
       {{ partial "post/body.html" (dict "ctx" .ctx "IsHome" .IsHome) }}
     </div>
     <footer class="post-footer">
diff --git a/layouts/partials/post/header_meta/views.html b/layouts/partials/post/header_meta/views.html
index 21dfbb1..303d74c 100644
--- a/layouts/partials/post/header_meta/views.html
+++ b/layouts/partials/post/header_meta/views.html
@@ -1,12 +1,12 @@
-{{- $pageViewCls := "" }}
+{{- $pageViewId := "" }}
 {{- if .Site.Params.leancloudVisitors.enable }}
-{{- $pageViewCls = "leancloud-visitors-count" }}  
+{{- $pageViewId = "leancloud-visitors-count" }}  
 {{- end }}
 {{- if .Site.Params.waline.pageView }}
-{{- $pageViewCls = "waline-pageview-count" }}
+{{- $pageViewId = "waline-pageview-count" }}
 {{- end }}
-{{- if .Site.Params.busuanzi.postViews }}
-{{- $pageViewCls = "busuanzi_value_page_pv" }}
+{{- if .Site.Params.analytics.busuanzi.postViews }}
+{{- $pageViewId = "busuanzi_value_page_pv" }}
 {{- end }}
 <span class="post-meta-item" title="{{ T "PostViews" }}">
   <span class="post-meta-item-icon">
@@ -15,5 +15,5 @@
   <span class="post-meta-item-text">
   {{ print (T "PostViews") (T "SymbolColon") }}
   </span>
-  <span class="{{ $pageViewCls }}" data-path="{{ .RelPermalink | relLangURL }}"><i class="fa fa-sync fa-spin"></i></span>
+  <span id="{{ $pageViewId }}" data-path="{{ .RelPermalink | relLangURL }}"><i class="fa fa-sync fa-spin"></i></span>
 </span>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 4015bd1..e75e74a 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,80 +1,15 @@
-<!-- Plugin scripts files -->
-{{- $jsRes := .Site.Data.resources.js }}
-{{- $vendor := .Site.Params.vendors.plugins }}
-{{- $router := .Scratch.Get "router" }}
-{{ $jsFmt := "%s/%s@%s/%s" }}
-{{- range $js := $jsRes }}
-  {{- $npm := $js.name }}
-  {{- $file := $js.file }}
-  {{- if eq $vendor "cdnjs" }}
-    {{- with $js.alias }}
-      {{- $npm = . }}
-    {{- end }}   
-    {{- $file = replaceRE `(dist|lib|source\/js)\/` "" $js.file }}
-    {{- $jsFmt = "%s/%s/%s/%s" }}
-  {{- end }}
-  {{- $pluginJS := printf $jsFmt $router $npm $js.version $file }}
-  <script type="text/javascript" src="{{ $pluginJS }}" defer></script>
-{{- end }}
+{{ partialCached "scripts/global.html" . }}
 
-<script class="next-config" data-name="main" type="application/json">{{- .Scratch.Get "config" -}}</script>
+{{ if or .Params.math .Site.Params.math }}
+  {{ partialCached "_thirdparty/others/math.html" . }}
+{{ end }}
 
-{{- $config := resources.Get "js/config.js" }}
-{{- $motion := resources.Get "js/motion.js" }}
-{{- $boot := resources.Get "js/next-boot.js" }}
-{{- $utils := resources.Get "js/utils.js" }}
-{{- $nextjs := (slice $config $utils $boot ) }}
-{{- if .Site.Params.motion.enable }}
-{{ $motionjs := resources.Get "js/motion.js" }}
-{{ $nextjs = $nextjs | append $motionjs }}
-{{- end }}
-{{- if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }}
-{{ $musejs := resources.Get "js/schemes/muse.js" }}
-{{ $nextjs = $nextjs | append $musejs }}
-{{- end }}
-{{- if .Site.Params.bookmark.enable }}
-{{- $bookmarkjs := resources.Get "js/bookmark.js" }}
-{{- $nextjs = $nextjs | append $bookmarkjs }}
-{{- end }}
-{{- if .Site.Params.pjax }}
-{{- $pjaxjs := resources.Get "js/pjax.js" }}
-{{- $nextjs = $nextjs | append $pjaxjs }}
-{{- end }}
-{{- if isset .Site.Params "addthisid" }}
-{{- $addthisjs := resources.Get "js/third-party/share/addthis.js" }}
-{{- $nextjs = $nextjs | append $addthisjs }}
-{{- end }}
-{{- if isset .Site.Params "waline" }}
-{{- $walinejs := resources.Get "js/third-party/comments/waline.js" }}
-{{- $nextjs = $nextjs | append $walinejs }}
-{{- end }}
-{{- if isset .Site.Params "giscus" }}
-{{- $giscusjs := resources.Get "js/third-party/comments/giscus.js" }}
-{{- $nextjs = $nextjs | append $giscusjs }}
-{{- end }}
-{{- if isset .Site.Params "livere" }}
-{{- $liverejs := resources.Get "js/third-party/comments/livere.js" }}
-{{- $nextjs = $nextjs | append $liverejs }}
-{{- end }}
-{{- if isset .Site.Params "artalk" }}
-{{- $artalkjs := resources.Get "js/third-party/comments/artalk.js" }}
-{{- $nextjs = $nextjs | append $artalkjs }}
-{{- end }}
-{{- if isset .Site.Params "utterances" }}
-{{- $utterancesjs := resources.Get "js/third-party/comments/utterances.js" }}
-{{- $nextjs = $nextjs | append $utterancesjs }}
-{{- end }}
-{{- if .Site.Params.localSearch.enable }}
-{{- $search := resources.Get "js/third-party/search/local.js" }}
-{{- $nextjs = $nextjs | append $search }}
+{{ if .Params.mermaid }}
+  {{ partialCached "_thirdparty/others/mermaid.html" . }}
 {{ end }}
-{{- if .Site.Params.algoliaSearch.enable }}
-{{- $search := resources.Get "js/third-party/search/algolia.js" }}
-{{- $nextjs = $nextjs | append $search }}
-{{ end }}
-{{- $nextjs = $nextjs | resources.Concat "js/main.js"}}
-{{ if hugo.IsProduction }}
-{{- $nextjs = $nextjs | minify | fingerprint }}
-{{ end }}
-<script type="text/javascript" src="{{ $nextjs.RelPermalink }}" defer></script>
+
+
+
+
+
 
diff --git a/layouts/partials/scripts/global.html b/layouts/partials/scripts/global.html
new file mode 100644
index 0000000..b1f70b5
--- /dev/null
+++ b/layouts/partials/scripts/global.html
@@ -0,0 +1,79 @@
+{{- $jsRes := .Site.Data.resources.js }}
+{{- $vendor := .Site.Params.vendors.plugins }}
+{{- $router := .Scratch.Get "router" }}
+{{- range $jsRes }} 
+  {{ $pluginJS := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
+  <script type="text/javascript" src="{{ $pluginJS }}" defer></script>
+{{- end }}
+
+<script class="next-config" data-name="main" type="application/json">{{- .Scratch.Get "config" -}}</script>
+
+{{- $config := resources.Get "js/config.js" }}
+{{- $motion := resources.Get "js/motion.js" }}
+{{- $boot := resources.Get "js/next-boot.js" }}
+{{- $utils := resources.Get "js/utils.js" }}
+{{- $nextjs := (slice $config $utils $boot ) }}
+{{- if .Site.Params.motion.enable }}
+{{ $motionjs := resources.Get "js/motion.js" }}
+{{ $nextjs = $nextjs | append $motionjs }}
+{{- end }}
+{{- if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }}
+{{ $musejs := resources.Get "js/schemes/muse.js" }}
+{{ $nextjs = $nextjs | append $musejs }}
+{{- end }}
+{{- if .Site.Params.bookmark.enable }}
+{{- $bookmarkjs := resources.Get "js/bookmark.js" }}
+{{- $nextjs = $nextjs | append $bookmarkjs }}
+{{- end }}
+{{- if .Site.Params.pjax }}
+{{- $pjaxjs := resources.Get "js/pjax.js" }}
+{{- $nextjs = $nextjs | append $pjaxjs }}
+{{- end }}
+{{- if isset .Site.Params "addthisid" }}
+{{- $addthisjs := resources.Get "js/third-party/share/addthis.js" }}
+{{- $nextjs = $nextjs | append $addthisjs }}
+{{- end }}
+{{- if isset .Site.Params "waline" }}
+{{- $walinejs := resources.Get "js/third-party/comments/waline.js" }}
+{{- $nextjs = $nextjs | append $walinejs }}
+{{- end }}
+{{- if isset .Site.Params "giscus" }}
+{{- $giscusjs := resources.Get "js/third-party/comments/giscus.js" }}
+{{- $nextjs = $nextjs | append $giscusjs }}
+{{- end }}
+{{- if isset .Site.Params "livere" }}
+{{- $liverejs := resources.Get "js/third-party/comments/livere.js" }}
+{{- $nextjs = $nextjs | append $liverejs }}
+{{- end }}
+{{- if isset .Site.Params "artalk" }}
+{{- $artalkjs := resources.Get "js/third-party/comments/artalk.js" }}
+{{- $nextjs = $nextjs | append $artalkjs }}
+{{- end }}
+{{- if isset .Site.Params "utterances" }}
+{{- $utterancesjs := resources.Get "js/third-party/comments/utterances.js" }}
+{{- $nextjs = $nextjs | append $utterancesjs }}
+{{- end }}
+{{- if .Site.Params.localSearch.enable }}
+{{- $search := resources.Get "js/third-party/search/local.js" }}
+{{- $nextjs = $nextjs | append $search }}
+{{ end }}
+{{- if .Site.Params.algoliaSearch.enable }}
+{{- $search := resources.Get "js/third-party/search/algolia.js" }}
+{{- $nextjs = $nextjs | append $search }}
+{{ end }}
+{{ if .Site.Params.footer.translate }}
+{{- $gt := resources.Get "js/third-party/others/google-translate.js" }}
+{{- $nextjs = $nextjs | append $gt }}  
+
+{{ $gtCss := resources.Get "css/gt.scss" }}
+{{ $style := $gtCss | resources.ToCSS | minify }}
+<script type="text/javascript">
+  window.translateelement_styles = "{{- $style.RelPermalink -}}";
+</script>
+{{ end }}
+{{- $nextjs = $nextjs | resources.Concat "js/main.js"}}
+{{ if hugo.IsProduction }}
+{{- $nextjs = $nextjs | minify | fingerprint }}
+{{ end }}
+
+<script type="text/javascript" src="{{ $nextjs.RelPermalink }}" defer></script>
\ No newline at end of file
diff --git a/layouts/partials/scripts/plugins.html b/layouts/partials/scripts/plugins.html
new file mode 100644
index 0000000..ddb791a
--- /dev/null
+++ b/layouts/partials/scripts/plugins.html
@@ -0,0 +1,17 @@
+
+{{- $vendor := .vendor }}
+{{- $router := .router }}
+{{- $res := (index .res .index)  }}
+{{- $cssRes := $res.css }}
+{{ if $cssRes }}
+  {{ range $cssRes }}
+    {{ $css := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
+    <link type="text/css" rel="stylesheet" href="{{ $css }}"/>
+  {{ end }}
+{{ end }}
+{{- $jsRes := $res.js }}
+{{ range $jsRes }}
+  {{ $js := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
+  <script type="text/javascript" src="{{ $js }}"></script>
+{{ end }}
+
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index f08c579..83c493c 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -4,8 +4,8 @@
   <span class="toggle-line"></span>
 </div>
 <aside class="sidebar">
-  {{- $toc := and (isset .Params "toc") .Params.toc }}
-  <div class="sidebar-inner {{ if $toc }}sidebar-nav-active sidebar-toc-active{{ else }}sidebar-overview-active{{ end }}">
+  {{ $tocEnable := .Params.toc | default .Site.Params.toc.enable }}
+  <div class="sidebar-inner {{ if $tocEnable }}sidebar-nav-active sidebar-toc-active{{ else }}sidebar-overview-active{{ end }}">
     <ul class="sidebar-nav">
       <li class="sidebar-nav-toc">
         {{ T "TableOfContents" }}
@@ -17,21 +17,34 @@
     <div class="sidebar-panel-container">
       <!--noindex-->
       <div class="post-toc-wrap sidebar-panel">
-        {{- if $toc }}
+        {{- if $tocEnable }}
         <div class="post-toc animated">{{ .TableOfContents }}</div>
         {{- end }}
       </div>
       <!--/noindex-->
       <div class="site-overview-wrap sidebar-panel">
-        {{ partial "sidebar/overview" . }}
+        {{- partialCached "sidebar/overview.html" . -}}
+        
+        {{- $custom := .Scratch.Get "sidebar" }}
+        {{- if $custom }}
+          {{ partialCached $custom . }}
+        {{- end }}
       </div>
     </div>
-    {{- if and .Site.Params.backTop.enable .Site.Params.backTop.sidebar }}
+   
+  </div>
+
+  {{- if .Site.Params.siteState.statistic.enable }}
+    {{- partial "sidebar/siteinfo.html" . }}
+  {{- end }}
+
+  {{- if and .Site.Params.backTop.enable .Site.Params.backTop.sidebar }}
+  <div class="sidebar-card-widget back-to-top-card">
     <div class="back-to-top animated" role="button" aria-label="{{ T "BackTop" }}">
       <i class="fa fa-arrow-up"></i>
       <span>0%</span>
     </div>
-    {{- end }}
   </div>
+  {{- end }}
 </aside>
-<div class="sidebar-dimmer"></div>
\ No newline at end of file
+<div class="sidebar-dimmer"></div>
diff --git a/layouts/partials/sidebar/navtoc.html b/layouts/partials/sidebar/navtoc.html
deleted file mode 100644
index fef5fdb..0000000
--- a/layouts/partials/sidebar/navtoc.html
+++ /dev/null
@@ -1 +0,0 @@
-{{ .TableOfContents }}
\ No newline at end of file
diff --git a/layouts/partials/sidebar/overview.html b/layouts/partials/sidebar/overview.html
index 978ec5d..7ff0a29 100644
--- a/layouts/partials/sidebar/overview.html
+++ b/layouts/partials/sidebar/overview.html
@@ -8,7 +8,7 @@
   <div class="site-description" itemprop="description">{{ .Site.Params.description }}</div>
 </div>
 
-{{- if .Site.Params.siteState }}
+{{- if .Site.Params.siteState.basic }}
 <div class="site-state-wrap site-overview-item animated">
   <nav class="site-state">
     <div class="site-state-item site-state-posts">
diff --git a/layouts/partials/sidebar/siteinfo.html b/layouts/partials/sidebar/siteinfo.html
new file mode 100644
index 0000000..65aa8f4
--- /dev/null
+++ b/layouts/partials/sidebar/siteinfo.html
@@ -0,0 +1,70 @@
+{{ $scratch := partialCached "_funs/cal_siteinfo.html" . }}
+<div class="sidebar-card-widget">
+  <div class="item-headline">
+    <i class="fas fa-chart-line"></i>
+    <span>{{ T "SiteInfoItems.title" }}</span>
+  </div>
+  <div class="siteinfo">
+    <div class="siteinfo-item">
+      <div class="item-name"><i class="fa-solid fa-calendar-check"></i>{{ T "SiteInfoItems.runTimes" }}</div>
+      <div class="item-count" id="runTimes" data-publishdate="{{ $scratch.Get "last" }}"></div>
+    </div>
+    {{- if eq .Site.Params.siteState.statistic.plugin "busuanzi" }}
+      {{- with .Site.Params.analytics.busuanzi }}
+      <div class="siteinfo-item">
+        <div class="item-name">
+          <i class="fas {{ .visitorsIcon }}"></i>{{ T "SiteInfoItems.visitors" }}
+        </div>
+        <div class="item-count" id="busuanzi_value_site_uv"></div>
+      </div>
+      <div class="siteinfo-item">
+        <div class="item-name">
+          <i class="fas {{ .viewsIcon }}"></i>{{ T "SiteInfoItems.pageViews" }}
+        </div>
+        <div class="item-count" id="busuanzi_value_site_pv"></div>
+      </div>
+      {{- end }}  
+    {{- end }}    
+    {{- if eq .Site.Params.siteState.statistic.plugin "51la" }}
+    <div id="la-siteinfo-widget" style="display: none;">
+      <script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="{{ replace .Site.Data.resources.analytics.laWidget "laId" .Site.Params.analytics.laId }}"></script>
+    </div>
+    <div class="siteinfo-item">
+      <div class="item-name">
+        <i class="fa fa-user-plus"></i>{{ T "SiteInfoItems.todayViews" }}
+      </div>
+      <div class="item-count" id="today_site_pv"></div>
+    </div>
+    <div class="siteinfo-item">
+      <div class="item-name">
+        <i class="fa fa-user-clock"></i>{{ T "SiteInfoItems.yesterdayViews" }}
+      </div>
+      <div class="item-count" id="yesterday_site_pv"></div>
+    </div>
+    <div class="siteinfo-item">
+      <div class="item-name">
+        <i class="fa fa-arrows-down-to-people"></i>{{ T "SiteInfoItems.monthViews" }}
+      </div>
+      <div class="item-count" id="month_site_pv"></div>
+    </div>
+    <div class="siteinfo-item">
+      <div class="item-name">
+        <i class="fa fa-users"></i>{{ T "SiteInfoItems.totalViews" }}
+      </div>
+      <div class="item-count" id="total_site_pv"></div>
+    </div>
+    {{- end }}
+    <div class="siteinfo-item">
+      <div class="item-name"><i class="fa fa-font"></i>{{ T "SiteInfoItems.words" }}</div>
+      <div class="item-count" id="wordsCount" data-count="{{ $scratch.Get "totalWords" }}"></div>
+    </div>
+    <div class="siteinfo-item">
+      <div class="item-name"><i class="fa fa-mug-hot"></i>{{ T "SiteInfoItems.readTimes" }}</div>
+      <div class="item-count" id="readTimes" data-times="{{ $scratch.Get "totalTimes" }}"></div>
+    </div>
+    <div class="siteinfo-item">
+      <div class="item-name"><i class="fa fa-clock-rotate-left"></i>{{ T "SiteInfoItems.lastUpdate" }}</div>
+      <div class="item-count" id="last-push-date" data-lastpushdate="{{ $scratch.Get "first" }}"></div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/widgets.html b/layouts/partials/widgets.html
index 1bdf4ef..37ac5c5 100644
--- a/layouts/partials/widgets.html
+++ b/layouts/partials/widgets.html
@@ -1,9 +1,22 @@
-{{- if and .Site.Params.backTop.enable (not .Site.Params.backTop.sidebar) }}
-  <div class="back-to-top" role="button" aria-label="{{ T "BackTopLabel" }}">
+<div class="tool-buttons" >
+  <a id="goto-comments" class="button goto-comments" href="#comments"  title="{{ T "ToolBtns.comment" }}">
+    <i class="fas fa-comments"></i>
+  </a> 
+  <div id="switch-theme" class="button" title="{{ T "ToolBtns.theme" }}">
+    <i class="fas fa-adjust"></i>
+  </div> 
+  {{ if .Site.Params.footer.translate }}
+  <a class="button" href="#google_translate_element"  title="{{ T "ToolBtns.lang" }}">
+    <i class="fas fa-globe"></i>
+  </a> 
+  {{ end }}
+  {{- if and .Site.Params.backTop.enable (not .Site.Params.backTop.sidebar) }}
+  <div class="back-to-top" role="button" title="{{ T "ToolBtns.backTop" }}">
     <i class="fa fa-arrow-up"></i>
     <span>0%</span>
   </div>
-{{- end }}
+{{- end }} 
+</div>
 
 {{- if .Site.Params.readingProgress.enable }}
   <div class="reading-progress-bar"></div>
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..d6aa690
--- /dev/null
+++ b/layouts/shortcodes/mermaid.html
@@ -0,0 +1,3 @@
+<div class="mermaid" align="{{ .Get "align" | default "center" }}"  {{  with .Get "bc" }} style="background: {{ . }}" {{ end }}> 
+  {{ safeHTML .Inner }}
+</div>
\ No newline at end of file