Merge branch 'release'

2022-07-03 10:42:36 +08:00
parent 846f44bf0d c4d725f08b
commit 4a0c767064
58 changed files with 1321 additions and 1063 deletions
--- a/assets/css/_common/components/third-party/utterances.scss
+++ b/assets/css/_common/components/third-party/utterances.scss
@@ -1,5 +1,7 @@
-@if $utterances_enable {
-  .utterances {
-    max-width: unset;
-  }
-}
+// TODO maybe use for next time
+// @if $utterances_enable {
+//   .utterances {
+//     max-width: unset;
+//     min-height: 300px;
+//   }
+// }
--- a/assets/css/_common/outline/footer/index.scss
+++ b/assets/css/_common/outline/footer/index.scss
@@ -21,6 +21,14 @@
  @include flex-column();
  @include main-container();

+  @include mobile() {
+    font-size: $font-size-smaller;
+  }
+  
+  @include mobile-small() {
+    font-size: $font-size-smallest;
+  }
+
  @if $footer_vendors_enable {
    .vendors-list {
      a {
@@ -30,6 +38,19 @@
      img {
        display: inline-block;
      }
+      
+      $footer_vendors_imgs_len: length($footer_vendors_imgs_width);
+      @if ($footer_vendors_imgs_len>0) {
+        @for $i from 1 through $footer_vendors_imgs_len {
+          a:nth-child(#{$i}) img {
+            width: #{nth($footer_vendors_imgs_width, $i)}px;
+
+            @include mobile() {
+              width: #{nth($footer_vendors_imgs_width, $i)-10}px;
+            }
+          }
+        }
+      }      
    }
  }
 }
@@ -40,24 +61,6 @@
  }
 }

-@keyframes icon-animate {
-  0%, 100% {
-    transform: scale(1);
-  }
-
-  10%, 30% {
-    transform: scale(.9);
-  }
-
-  20%, 40%, 60%, 80% {
-    transform: scale(1.1);
-  }
-
-  50%, 70% {
-    transform: scale(1.1);
-  }
-}
-
 .languages {
  display: inline-block;
  font-size: $font-size-large;
@@ -83,7 +86,7 @@
  margin: 0 5px;

  @if $footer_icon_animated {
-    animation: icon-animate 1.33s ease-in-out infinite;
+    animation: beat 1.33s ease-in-out infinite;
  }
 }

--- a/assets/css/_common/scaffolding/animation/hover.scss
+++ b/assets/css/_common/scaffolding/animation/hover.scss
@@ -0,0 +1,176 @@
+/** Animation for link hover style */
+
+@keyframes wobble-vertical {
+  16.65% {
+    transform: translateX(8px);
+  }
+
+  33.3% {
+    transform: translateX(-6px);
+  }
+
+  49.95% {
+    transform: translateX(4px);
+  }
+
+  66.6% {
+    transform: translateX(-2px);
+  }
+
+  83.25% {
+    transform: translateX(1px);
+  }
+
+  100% {
+      transform: translateX(0);
+  }
+}
+
+/* Icon Pulse */
+@-webkit-keyframes hvr-icon-pulse {
+  25% {
+    -webkit-transform: scale(1.3);
+    transform: scale(1.3);
+  }
+  75% {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+  }
+}
+@keyframes hvr-icon-pulse {
+  25% {
+    -webkit-transform: scale(1.3);
+    transform: scale(1.3);
+  }
+  75% {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+  }
+}
+.hvr-icon-pulse {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+.hvr-icon-pulse .hvr-icon {
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon {
+  -webkit-animation-name: hvr-icon-pulse;
+  animation-name: hvr-icon-pulse;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+/* Bounce To Right */
+.hvr-bounce-to-right {
+  background: var(--btn-default-bg);
+  border: 2px solid var(--btn-default-border-color);
+  border-radius: 2px;
+  color: var(--btn-default-color);
+  display: inline-block;
+  font-size: 0.875em;
+  line-height: 2;
+  padding: 0 20px;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  position: relative;
+  -webkit-transition-property: color;
+  transition-property: color;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+}
+.hvr-bounce-to-right:before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--btn-default-hover-bg);
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transform-origin: 0 50%;
+  transform-origin: 0 50%;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
+  background: var(--btn-default-bg);
+  border-color: var(--btn-default-hover-border-color);
+  color: var(--btn-default-hover-color);
+}
+.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
+  -webkit-transform: scaleX(1);
+  transform: scaleX(1);
+  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
+  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
+}
+
+/* Shutter Out Horizontal */
+.hvr-shutter-out-horizontal {
+  background: var(--btn-default-bg);
+  border: 2px solid var(--btn-default-border-color);
+  border-radius: 2px;
+  color: var(--btn-default-color);
+  display: inline-block;
+  font-size: 0.875em;
+  line-height: 2;
+  padding: 0 20px;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  position: relative;
+  -webkit-transition-property: color;
+  transition-property: color;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.hvr-shutter-out-horizontal:before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--btn-default-hover-bg);
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transform-origin: 50%;
+  transform-origin: 50%;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
+  background: var(--btn-default-bg);
+  border-color: var(--btn-default-hover-border-color);
+  color: var(--btn-default-hover-color);
+}
+.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
+  -webkit-transform: scaleX(1);
+  transform: scaleX(1);
+}
--- a/assets/css/_common/scaffolding/animation/icon.scss
+++ b/assets/css/_common/scaffolding/animation/icon.scss
@@ -0,0 +1,17 @@
+@keyframes beat {
+  0%, 100% {
+    transform: scale(1);
+  }
+
+  10%, 30% {
+    transform: scale(.9);
+  }
+
+  20%, 40%, 60%, 80% {
+    transform: scale(1.1);
+  }
+
+  50%, 70% {
+    transform: scale(1.1);
+  }
+}
--- a/assets/css/_common/scaffolding/animation/index.scss
+++ b/assets/css/_common/scaffolding/animation/index.scss
@@ -0,0 +1,3 @@
+@import 'icon';
+@import 'show';
+@import 'hover';
--- a/assets/css/_common/scaffolding/animation/show.scss
+++ b/assets/css/_common/scaffolding/animation/show.scss
@@ -0,0 +1,65 @@
+// tabshow animation
+@-moz-keyframes tabshow {
+  0% {
+    -webkit-transform: translateY(15px);
+    -moz-transform: translateY(15px);
+    -o-transform: translateY(15px);
+    -ms-transform: translateY(15px);
+    transform: translateY(15px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -o-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes tabshow {
+  0% {
+    -webkit-transform: translateY(15px);
+    -moz-transform: translateY(15px);
+    -o-transform: translateY(15px);
+    -ms-transform: translateY(15px);
+    transform: translateY(15px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -o-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@-o-keyframes tabshow {
+  0% {
+    -webkit-transform: translateY(15px);
+    -moz-transform: translateY(15px);
+    -o-transform: translateY(15px);
+    -ms-transform: translateY(15px);
+    transform: translateY(15px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -o-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@keyframes tabshow {
+  0% {
+    -webkit-transform: translateY(15px);
+    -moz-transform: translateY(15px);
+    -o-transform: translateY(15px);
+    -ms-transform: translateY(15px);
+    transform: translateY(15px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -o-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
--- a/assets/css/_common/scaffolding/comments.scss
+++ b/assets/css/_common/scaffolding/comments.scss
@@ -43,8 +43,32 @@
    margin-top: 60px;
  }

+  min-height: 300px;
  overflow: hidden;

+  .comment-loading {
+    @if $sidebar_position == 'right' {
+      padding-right: $sidebar-desktop + $sidebar-offset;
+    } @else {
+      padding-left: $sidebar-desktop + $sidebar-offset;
+    }
+    
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 100px;
+    text-align: center;
+    font-size: 2em;
+
+    @include tablet-mobile() {
+      padding-left: 0;
+      padding-right: 0;
+      width: auto;
+    }
+  }
+
  .comment-head {
    margin-bottom: 20px;

@@ -53,6 +77,9 @@
      vertical-align: middle;
      font-weight: 700;
      font-size: 1.4em;
+      @include mobile-small() {
+        font-size: $font-size-smaller;
+      }
    }

    @if $two_comments_enable {
@@ -61,16 +88,16 @@
        float: right;
        margin: 2px auto;
        padding: 4px 16px;
+        @include mobile-small() {
+          font-size: $font-size-smaller;
+          padding: 4px;
+        }
        width: max-content;
        border-radius: 8px;
-        background: #eee;
+        background: var(--card-bg-color);

        .first-comment {
          color: $first_comment_color;
-
-          @if $two_comments_actived==$first_comment_name {
-            font-weight: bold;
-          }
        }

        .second-comment {
@@ -82,11 +109,12 @@
        }

        $switch_btn_bg_color: $first_comment_color;
+        $switch_btn_move_bc: $second_comment_color;

        .switch-btn {
          position: relative;
          display: inline-block;
-          margin: -4px 8px 0;
+          margin: 5px;
          width: 42px;
          height: 22px;
          border-radius: 34px;
@@ -100,6 +128,7 @@

          @if $two_comments_actived==$second_comment_name {
            $switch_btn_bg_color: $second_comment_color;
+            $switch_btn_move_bc: $first_comment_color;
          }

          background-color: $switch_btn_bg_color;
@@ -120,7 +149,11 @@
            transition: .4s
          }

-          &.move:before {
+          &.move {
+            background-color: $switch_btn_move_bc;
+          }
+
+          &.move:before {            
            -webkit-transform: translateX(20px);
            -moz-transform: translateX(20px);
            -o-transform: translateX(20px);
@@ -129,6 +162,7 @@
          }
        }
      }
+
    }
  }

--- a/assets/css/_common/scaffolding/highlight/copy-code.scss
+++ b/assets/css/_common/scaffolding/highlight/copy-code.scss
@@ -1,40 +1,57 @@
-.highlight:hover .copy-btn, pre:hover .copy-btn {
-  opacity: 1;
-}

-.copy-btn {
-  color: $black-dim;
-  cursor: pointer;
-  line-height: 1.6;
-  opacity: 0;
-  padding: 2px 6px;
-  position: absolute;
-  transition: opacity $transition-ease;
+.highlight {

-  @if $codeblock_copy_btn_style == 'flat' {
-    background: white;
-    border: 0;
-    font-size: $font-size-smaller;
-    right: 0;
-    top: 0;
-  } @else if $codeblock_copy_btn_style == 'mac' {
-    color: var(--highlight-foreground);
-    font-size: 14px;
-    right: 0;
-    top: 2px;
-  } @else {
-    background-color: $gainsboro;
-    background-image: linear-gradient(#fcfcfc, $gainsboro);
-    border: 1px solid #d5d5d5;
-    border-radius: 3px;
-    font-size: $font-size-smaller;
-    right: 4px;
-    top: 8px;
+  background: var(--highlight-background);
+
+  .table-container, pre {
+    position: relative;
+  }
+
+  .table-container table tbody tr {
+    background: none;
  }
 }

-@if $codeblock_copy_btn_style == 'mac' {
-  figure.highlight {
+@if $codeblock_copy_btn_enable {
+
+  .highlight:hover .copy-btn, pre:hover .copy-btn {
+    opacity: 1;
+  }
+
+  .copy-btn {
+    color: $black-dim;
+    cursor: pointer;
+    line-height: 1.6;
+    opacity: 0;
+    padding: 2px 6px;
+    position: absolute;
+    right: 8px;
+    top: 4px;
+    transition: opacity $transition-ease;
+    background: var(--highlight-background);
+
+    @if $codeblock_style == 'flat' {
+      background: white;
+      border: 0;
+      font-size: $font-size-smaller;
+      
+    } @else if $codeblock_style == 'mac' {
+      color: var(--highlight-foreground);
+      font-size: 14px;
+      border-radius: 3px;
+    } @else {
+      background-color: $gainsboro;
+      background-image: linear-gradient(#fcfcfc, $gainsboro);
+      border: 1px solid #d5d5d5;
+      border-radius: 3px;
+      font-size: $font-size-smaller;
+      
+    }
+  }
+}
+
+@if $codeblock_style == 'mac' {
+  .highlight {
    border-radius: 5px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
    padding-top: 30px;
@@ -46,10 +63,10 @@
    &::before {
      background: #fc625d;
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
-      left: 12px;
      margin-top: -20px;
+      margin-left: 10px;
      position: absolute;
      @include round-icon(12px);
    }
  }
-}
+}
--- a/assets/css/_common/scaffolding/highlight/index.scss
+++ b/assets/css/_common/scaffolding/highlight/index.scss
@@ -1,58 +1,25 @@
-// Use `@use` to fix issue #67
-// TODO find way to import file by dynmatic
-// @import '(theme.highlight.enable && theme.highlight.light.file) ? theme.highlight.light.file : null';
-// @import '(theme.prism.enable && theme.prism.light) ? theme.prism.light : null';
-// @import '(theme.prism.enable && theme.prism.number) ? theme.prism.number : null';
+@import 'copy-code';

-/* @media (prefers-color-scheme: dark) {
-  @import '(theme.darkmode && theme.highlight.enable && theme.highlight.dark.file) ? theme.highlight.dark.file : null';
-  @import '(theme.darkmode && theme.prism.enable && theme.prism.dark) ? theme.prism.dark : null';
-} */
-
-// @import 'theme.codeblock.copy_button.enable ? "copy-code" : null';
-
-// Placeholder: %code-inline %code-block
 %code-inline {
  background: var(--highlight-background);
  color: var(--highlight-foreground);
 }

-%code-block {
-  @extend %code-inline;
-  line-height: $line-height-code-block;
-  margin: 0 auto 20px;
+pre {
+  padding: 10px;
+  margin: 0;
 }

-%figcaption {
-  background: var(--highlight-gutter-background);
-  color: var(--highlight-foreground);
-  display: flow-root;
-  font-size: $table-font-size;
-  line-height: 1.2;
-  padding: .5em;
-
-  a {
-    color: var(--highlight-foreground);
-    float: right;
-
-    &:hover {
-      border-bottom-color: var(--highlight-foreground);
-    }
-  }
+p > code, li > code {
+  @extend %code-inline;
+  border-radius: 3px;
+  padding: 3px 6px;
 }

 pre, code {
  font-family: $code-font-family;
-  color: #fff;
 }

-code {
-  @extend %code-inline;
-  border-radius: 3px;
-  font-size: $table-font-size;
-  padding: 2px 4px;
-  @include word-wrap();
-}

 kbd {
  @extend %code-inline;
@@ -62,82 +29,4 @@ kbd {
  font-family: inherit;
  padding: .1em .3em;
  white-space: nowrap;
-  color: #fff;
-}
-
-// `highlight.line_number: false` and `highlight.wrap: false`
-// in Hexo config generates code.highlight elements
-figure.highlight {
-  @extend %code-block;
-  position: relative;
-
-  pre {
-    border: 0;
-    margin: 0;
-    padding: 10px 0;
-  }
-
-  table {
-    border: 0;
-    margin: 0;
-    width: auto;
-  }
-
-  td {
-    border: 0;
-    padding: 0;
-  }
-
-  figcaption {
-    @extend %figcaption;
-  }
-
-  .gutter {
-    @include disable-user-select();
-
-    pre {
-      background: var(--highlight-gutter-background);
-      color: var(--highlight-gutter-foreground);
-      padding-left: 10px;
-      padding-right: 10px;
-      text-align: right;
-    }
-  }
-
-  .code pre {
-    padding-left: 10px;
-    width: 100%;
-  }
-
-  // See https://github.com/next-theme/hexo-theme-next/discussions/410
-  .marked {
-    background: rgba(0, 0, 0, .3);
-  }
-}
-
-// See https://github.com/hexojs/hexo-util/pull/229
-pre .caption, pre figcaption {
-  @extend %figcaption;
-  margin-bottom: 10px;
-}
-
-.gist table {
-  width: auto;
-
-  td {
-    border: 0;
-  }
-}
-
-pre {
-  @extend %code-block;
-  overflow: auto;
-  padding: 10px;
-  position: relative;
-
-  code {
-    background: none;
-    padding: 0;
-    text-shadow: none;
-  }
-}
+}
--- a/assets/css/_common/scaffolding/index.scss
+++ b/assets/css/_common/scaffolding/index.scss
@@ -11,3 +11,4 @@
@import 'pagination';
@import 'comments';
@import 'fontawesome';
+@import 'animation';
--- a/assets/css/_mixins.scss
+++ b/assets/css/_mixins.scss
@@ -64,7 +64,7 @@
 }

@mixin sidebar-inline-links-item() {
-  margin: 5px 0 0;
+  margin: 5px 0;

  a {
    box-sizing: border-box;
--- a/assets/css/_schemes/Pisces/_sidebar.scss
+++ b/assets/css/_schemes/Pisces/_sidebar.scss
@@ -75,7 +75,7 @@
  @if $links_settings_layout == 'inline' {
    display: inline-block;
    max-width: 100%;
-    @include sidebar-inline-links-item();
+    margin: 5px;
  }
 }

@@ -83,7 +83,7 @@
  // Only when back2top.sidebar is true, apply the following styles
  .back-to-top {
    background: var(--body-bg-color);
-    margin: 8px - $sidebar-offset -10px -18px;
+    margin: 8px -#{$sidebar-offset} -10px -18px;

    &.back-to-top-on {
      margin-top: 16px;
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -1,136 +1,150 @@
-// CSS Style Guide: https://codeguide.co/#css
+// CSS Style Guide          : https://codeguide.co/#css
 // All variables from site's config content.
 {{- $P := .Site.Params }}
 // Base
-$scheme: {{ $P.scheme }};
-$darkmode: {{ $P.darkmode }};
+$scheme                     : {{ $P.scheme }};
+$darkmode                   : {{ $P.darkmode }};

-$body_scrollbar_overlay: {{ $P.bodyScrollbar.overlay }};
-$body_scrollbar_stable: {{ $P.bodyScrollbar.stable }};
-$mermaid_enable: {{ $P.mermaid.enable }};
-$mobile_layout_economy: {{ $P.mobileLayoutEconomy }};
-$theme_color_dark: {{ $P.themeColor.dark }};
-$theme_color_light: {{ $P.themeColor.light }};
+$body_scrollbar_overlay     : {{ $P.bodyScrollbar.overlay }};
+$body_scrollbar_stable      : {{ $P.bodyScrollbar.stable }};
+$mermaid_enable             : {{ $P.mermaid.enable }};
+$mobile_layout_economy      : {{ $P.mobileLayoutEconomy }};
+$theme_color_dark           : {{ $P.themeColor.dark }};
+$theme_color_light          : {{ $P.themeColor.light }};

 // Header
-$bookmark_color: {{ $P.bookmark.color }};
-$bookmark_enable: {{ $P.bookmark.enable }};
-$github_banner_enable: {{ $P.githubBanner.enable }};
-$menu_settings_badges: {{ $P.menuSets.badges }};
+$bookmark_color             : {{ $P.bookmark.color }};
+$bookmark_enable            : {{ $P.bookmark.enable }};
+$github_banner_enable       : {{ $P.githubBanner.enable }};
+$menu_settings_badges       : {{ $P.menuSets.badges }};

 // Footer
-$footer_icon_color: {{ $P.footer.icon.color }};
-$footer_icon_animated: {{ $P.footer.icon.animated }};
-$footer_beian_enable: {{ $P.footer.beian.enable }};
-$footer_vendors_enable: {{ isset $P.footer "vendors" }};
+$footer_icon_color          : {{ $P.footer.icon.color }};
+$footer_icon_animated       : {{ $P.footer.icon.animated }};
+$footer_beian_enable        : {{ $P.footer.beian.enable }};
+$footer_vendors_enable      : {{ isset $P.footer "vendors" }};
+{{ with $P.footer.vendors }}
+{{ $width := slice "start" }}
+{{ range .list }}
+{{ if .image }}
+{{ $width = $width | append .image.width }}
+{{ end }}
+{{ end }}
+{{ printf "$footer_vendors_imgs_width:%s;" (delimit (after 1 $width) ", ") }}
+{{ end }}

 // Counter
-$busuanzi_enable: {{ $P.busuanzi.enable }};
-$busuanzi_visitors: {{ $P.busuanzi.visitors }};
-$busuanzi_views: {{ $P.busuanzi.views }};
-$busuanzi_post_views: {{ $P.busuanzi.postViews }};
+$busuanzi_enable            : {{ $P.busuanzi.enable }};
+$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 }};
-$font_headings_size: {{ default $P.font.headings.size 1.625 }};
-$font_title_size: {{ default $P.font.title.size 1.375 }};
+$font_enable                : {{ $P.font.enable }};
+$font_global_size           : {{ default $P.font.global.size 1 }};
+$font_headings_size         : {{ default $P.font.headings.size 1.625 }};
+$font_title_size            : {{ default $P.font.title.size 1.375 }};

 // Code & Code blocks
 // TODO find the configure variable
-$highlight_dark_background: #000;
-$highlight_dark_foreground: #222;
-$highlight_light_background: #000;
-$highlight_light_foreground: #222;
+$highlight_dark_background  : #1c1b1b;
+$highlight_dark_foreground  : #fff;
+$highlight_light_background : #565656;
+$highlight_light_foreground : #fff;

-$codeblock_copy_btn_style: {{ $P.codeblock.copyBtn.style }};
+$codeblock_copy_btn_enable   : {{ $P.codeblock.copyBtn }};
+$codeblock_style             : {{ $P.codeblock.style }};

 // Sidebar
-$sidebar_offset: {{ $P.sidebar.offset }};
-$sidebar_padding: {{ $P.sidebar.padding }};
-$sidebar_position: {{ $P.sidebar.position }};
-$sidebar_width: {{ $P.sidebar.width }};
+$sidebar_offset             : {{ $P.sidebar.offset }};
+$sidebar_padding            : {{ $P.sidebar.padding }};
+$sidebar_position           : {{ $P.sidebar.position }};
+$sidebar_width              : {{ $P.sidebar.width }};

-$motion_enable: {{ $P.motion.enable }};
-$motion_transition_sidebar: {{ $P.motion.transition.sidebar }};
+$motion_enable              : {{ $P.motion.enable }};
+$motion_transition_sidebar  : {{ $P.motion.transition.sidebar }};

-$back2top_enable: {{ $P.backTop.enable }};
-$back2top_scrollpercent: {{ $P.backTop.scrollpercent }};
-$back2top_sidebar: {{ $P.backTop.sidebar }};
+$back2top_enable            : {{ $P.backTop.enable }};
+$back2top_scrollpercent     : {{ $P.backTop.scrollpercent }};
+$back2top_sidebar           : {{ $P.backTop.sidebar }};

-$avatar_rotated: {{ $P.avatar.rotated }};
-$avatar_rounded: {{ $P.avatar.rounded }};
-$avatar_rounded: {{ $P.avatar.rounded }};
-$site_state: {{ $P.siteState }};
-$social_icons_only: {{ $P.socialIcons.iconsOnly }};
-$social_icons_transition: {{ $P.socialIcons.transition }};
-$links_settings_layout: {{ $P.linksSets.layout }};
-$toc_enable: {{ $P.toc.enable }};
-$toc_expand_all: {{ $P.toc.expandAll }};
-$toc_wrap: {{ $P.toc.wrap }};
+$avatar_rotated             : {{ $P.avatar.rotated }};
+$avatar_rounded             : {{ $P.avatar.rounded }};
+$avatar_rounded             : {{ $P.avatar.rounded }};
+$site_state                 : {{ $P.siteState }};
+$social_icons_only          : {{ $P.socialIcons.iconsOnly }};
+$social_icons_transition    : {{ $P.socialIcons.transition }};
+$links_settings_layout      : {{ $P.linksSets.layout }};
+$toc_enable                 : {{ $P.toc.enable }};
+$toc_expand_all             : {{ $P.toc.expandAll }};
+$toc_wrap                   : {{ $P.toc.wrap }};

 // Posts
-$creative_commons_post: {{ $P.creativeCommons.post }};
-$follow_me: {{ isset $P "followme" }};
-$motion_trans_coll_header: {{ $P.motion.transition.collHeader }};
-$motion_trans_post_block: {{ $P.motion.transition.postBlock }};
-$motion_trans_post_body: {{ $P.motion.transition.postBody }};
-$motion_trans_post_header: {{ $P.motion.transition.postHeader }};
-$post_edit_enable: {{ $P.postEdit.enable }};
-$post_meta_item_text: {{ $P.postMeta.itemText }};
-$reward_settings_animation: {{ $P.rewardSets.animation }};
-$post_end_tag_icon: {{ $P.postFooter.tagIcon }};
+$creative_commons_post      : {{ $P.creativeCommons.post }};
+$follow_me                  : {{ isset $P "followme" }};
+$motion_trans_coll_header   : {{ $P.motion.transition.collHeader }};
+$motion_trans_post_block    : {{ $P.motion.transition.postBlock }};
+$motion_trans_post_body     : {{ $P.motion.transition.postBody }};
+$motion_trans_post_header   : {{ $P.motion.transition.postHeader }};
+$post_edit_enable           : {{ $P.postEdit.enable }};
+$post_meta_item_text        : {{ $P.postMeta.itemText }};
+$reward_settings_animation  : {{ $P.rewardSets.animation }};
+$post_end_tag_icon          : {{ $P.postFooter.tagIcon }};

 // TODO find the paramters
-$text_align_desktop: justify;
-$text_align_mobile: justify;
+$text_align_desktop         : {{ $P.textAlign.desktop }};
+$text_align_mobile          : {{ $P.textAlign.mobile }};

 // Note
-$note_icons: {{ $P.note.icons }};
-$note_light_bg_offset: {{ $P.note.lightBgOffset }};
-$note_style: {{ $P.note.style }};
+$note_icons                 : {{ $P.note.icons }};
+$note_light_bg_offset       : {{ $P.note.lightBgOffset }};
+$note_style                 : {{ $P.note.style }};

 // Tabs
-$tabs_transition_labels: {{ $P.tabs.transition.labels }};
-$tabs_transition_tabs: {{ $P.tabs.transition.tabs }};
+$tabs_transition_labels     : {{ $P.tabs.transition.labels }};
+$tabs_transition_tabs       : {{ $P.tabs.transition.tabs }};

 // Reading progress bar
-$reading_progress_start: {{ $P.readingProgress.start }}; 
-$reading_progress_color: {{ $P.readingProgress.color }}; 
-$reading_progress_enable: {{ $P.readingProgress.enable }}; 
-$reading_progress_height: {{ $P.readingProgress.height }}; 
-$reading_progress_position: {{ $P.readingProgress.position }}; 
-$reading_progress_reversed: {{ $P.readingProgress.reversed }}; 
+$reading_progress_start     : {{ $P.readingProgress.start }};
+$reading_progress_color     : {{ $P.readingProgress.color }};
+$reading_progress_enable    : {{ $P.readingProgress.enable }};
+$reading_progress_height    : {{ $P.readingProgress.height }};
+$reading_progress_position  : {{ $P.readingProgress.position }};
+$reading_progress_reversed  : {{ $P.readingProgress.reversed }};

 // Thirdparty
-$math_mathjax_enable: {{ $P.math.mathjax.enable }};
-$related_posts_enable: {{ $P.relatedPosts.enable }};
-$pdf_enable: {{ $P.pdf.enable }};
-$pdf_height: {{ $P.pdf.height }};
+$math_mathjax_enable        : {{ $P.math.mathjax.enable }};
+// TODO
+//$related_posts_enable       : {{ $P.relatedPosts.enable }};
+$related_posts_enable       : false;
+$pdf_enable                 : {{ $P.pdf.enable }};
+$pdf_height                 : {{ $P.pdf.height }};

 // Search engine
-$algolia_search_enable: {{ $P.algoliaSearch.enable }};
-$local_search_enable: {{ $P.localSearch.enable }};
+$algolia_search_enable      : {{ $P.algoliaSearch.enable }};
+$local_search_enable        : {{ $P.localSearch.enable }};

 // Online IM
-$gitalk_enable: {{ $P.gitalk.enable }};
-$gitter_enable: {{ $P.gitter.enable }};
+//$gitalk_enable              : {{ $P.gitalk.enable }};
+$gitalk_enable              : false;
+$gitter_enable              : {{ $P.gitter.enable }};

 // Comment
-$disqusjs_enable: {{ $P.disqusjs.enable }};
-$livere_enable: {{ $P.livere.enable }};
-$utterances_enable: {{ $P.utterances.enable }};
-$waline_enable: {{ $P.waline.enable }};
+//$disqusjs_enable            : {{ $P.disqusjs.enable }};
+$disqusjs_enable            : false;
+$livere_enable              : {{ isset $P.livere "uid" }};
+$utterances_enable          : {{ isset $P.utterances "utterances" }};
+$waline_enable              : {{ isset $P.waline "serverurl" }};
 {{- with .Site.Params.comments }}
-{{ $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }}
-$two_comments_enable: {{ $tce }};
+{{- $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }}
+$two_comments_enable        : {{ $tce }};
 {{- if $tce }}
-{{- $sortNav := sort .nav "weight" }}
-$two_comments_actived: {{ .active }};
-$first_comment_color: {{ (index $sortNav 0).color }};
-$first_comment_name: {{ lower (index $sortNav 0).name }};
-$second_comment_color: {{ (index $sortNav 1).color }};
-$second_comment_name: {{ lower (index $sortNav 1).name }};
+{{- $sortNav  := sort .nav "weight" }}
+$two_comments_actived       : {{ .active }};
+$first_comment_color        : {{ (index $sortNav 0).color }};
+$first_comment_name         : {{ lower (index $sortNav 0).name }};
+$second_comment_color       : {{ (index $sortNav 1).color }};
+$second_comment_name        : {{ lower (index $sortNav 1).name }};
 {{- end }}
 {{- end }}

--- a/assets/js/config.js
+++ b/assets/js/config.js
@@ -1,66 +1,51 @@
 if (!window.NexT) window.NexT = {};

 (function() {
-  const className = 'next-config';

-  const staticConfig = {};
-  let variableConfig = {};
-
-  const parse = text => JSON.parse(text || '{}');
-
-  const update = name => {
-    const targetEle = document.querySelector(`.${className}[data-name="${name}"]`);
-    if (!targetEle) return;
-    const parsedConfig = parse(targetEle.text);
-    if (name === 'main') {
-      Object.assign(staticConfig, parsedConfig);
-    } else {
-      variableConfig[name] = parsedConfig;
+  const siteConfig = {
+    "hostname"   : "{{ .Site.BaseURL }}",
+    "root"       : "/",
+    "images"     : "{{ .Site.Params.images }}",
+    "scheme"     : "{{ .Site.Params.scheme }}",
+    "darkmode"   : {{ .Site.Params.darkmode }},
+    "version"    : "{{ .Site.Data.config.version }}",
+    "sidebar"    : {{ .Site.Params.sidebar | jsonify }},
+    "copybtn"    : {{ .Site.Params.codeblock.copyBtn }},
+    "bookmark"   : {{ .Site.Params.bookmark | jsonify }},
+    "comments"   : {{ .Site.Params.comments | jsonify }},
+    "lazyload"   : {{ .Site.Params.lazyload }},
+    "pangu"      : {{ .Site.Params.pangu }},
+    "stickytabs" : {{ .Site.Params.tabs.sticky }},
+    "motion"     : {{ .Site.Params.motion | jsonify }},
+    // TODO Find prismjs 
+    //"prism"    : "",
+    "i18n"       : {
+      "placeholder"  : "",
+      "empty"        : "${query}",
+      "hits_time"    : "'${hits}', '${time}'",
+      "hits"         : "${hits}"
+    },
+    {{- if .Site.Params.algoliaSearch.enable }}
+    // TODO
+    "algolia"    : {
+      "appID"        : "",
+      "apiKey"       : "",
+      "indexName"    : "",
+      "hits"         : ""
    }
+    {{- end }}
+    {{- if .Site.Params.localSearch.enable }}
+    // TODO
+    "path"       : "/search.json",
+    "localsearch": {{ .Site.Params.localSearch | jsonify }},
+    {{- end }}
+    "lang"       : "{{ .Site.LanguageCode }}",
+    "permalink"  : "{{ .Page.Permalink | absURL }}",
+    "title"      : "{{ .Page.Title }}",
+    "isHome"     : {{ .IsHome }},
+    "isPage"     : {{ .IsPage }}
  };
+  
+  window.CONFIG = new Proxy(siteConfig, {});

-  update('main');
-
-  window.CONFIG = new Proxy({}, {
-    get(overrideConfig, name) {
-      let existing;
-      if (name in staticConfig) {
-        existing = staticConfig[name];
-      } else {
-        if (!(name in variableConfig)) update(name);
-        existing = variableConfig[name];
-      }
-
-      // For unset override and mixable existing
-      if (!(name in overrideConfig) && typeof existing === 'object') {
-        // Get ready to mix.
-        overrideConfig[name] = {};
-      }
-
-      if (name in overrideConfig) {
-        const override = overrideConfig[name];
-
-        // When mixable
-        if (typeof override === 'object' && typeof existing === 'object') {
-          // Mix, proxy changes to the override.
-          return new Proxy({ ...existing, ...override }, {
-            set(target, prop, value) {
-              target[prop] = value;
-              override[prop] = value;
-              return true;
-            }
-          });
-        }
-
-        return override;
-      }
-
-      // Only when not mixable and override hasn't been set.
-      return existing;
-    }
-  });
-
-  document.addEventListener('pjax:success', () => {
-    variableConfig = {};
-  });
-})();
+})();
--- a/assets/js/motion.js
+++ b/assets/js/motion.js
@@ -82,7 +82,7 @@ NexT.motion.middleWares = {

  postList: function() {
    const sequence = [];
-    const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
+    const { postblock, postheader, postbody, collheader } = CONFIG.motion.transition;

    function animate(animation, selector) {
      if (!animation) return;
@@ -95,10 +95,10 @@ NexT.motion.middleWares = {
      });
    }

-    animate(post_block, '.post-block, .pagination, .comments');
-    animate(coll_header, '.collection-header');
-    animate(post_header, '.post-header');
-    animate(post_body, '.post-body');
+    animate(postblock, '.post-block, .pagination, .post-comments');
+    animate(collheader, '.collection-header');
+    animate(postheader, '.post-header');
+    animate(postbody, '.post-body');

    return sequence;
  },
--- a/assets/js/next-boot.js
+++ b/assets/js/next-boot.js
@@ -37,20 +37,22 @@ NexT.boot.refresh = function() {
   * Register JS handlers by condition option.
   * Need to add config option in Front-End at 'scripts/helpers/next-config.js' file.
   */
-  CONFIG.prism && window.Prism.highlightAll();
+  //CONFIG.prism && window.Prism.highlightAll();
  /*CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img', {
    background: 'var(--content-bg-color)'
  });*/
  CONFIG.lazyload && window.lozad('.post-body img').observe();
  CONFIG.pangu && window.pangu.spacingPage();

-  CONFIG.exturl && NexT.utils.registerExtURL();
-  NexT.utils.registerCopyCode();
+  CONFIG.isPage && NexT.utils.replacePostCRLink();
+  CONFIG.isPage && CONFIG.copybtn && NexT.utils.registerCopyCode();
  NexT.utils.registerTabsTag();
  /*NexT.utils.registerActiveMenuItem();
  NexT.utils.registerLangSelect();*/
-  NexT.utils.registerSidebarTOC();
-  NexT.utils.registerPostReward();
+  CONFIG.isPage && NexT.utils.registerSidebarTOC();
+  CONFIG.isPage && NexT.utils.registerPostReward();
+  CONFIG.isPage && NexT.utils.initCommontesDispaly();
+  CONFIG.isPage && NexT.utils.registerCommonSwitch();
  NexT.utils.wrapTableWithBox();
  NexT.utils.registerVideoIframe();
 };
--- a/assets/js/utils.js
+++ b/assets/js/utils.js
@@ -23,35 +23,29 @@ HTMLElement.prototype.wrap = function(wrapper) {

 NexT.utils = {

-  registerExtURL: function() {
-    document.querySelectorAll('span.exturl').forEach(element => {
-      const link = document.createElement('a');
-      // https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings
-      link.href = decodeURIComponent(atob(element.dataset.url).split('').map(c => {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-      }).join(''));
-      link.rel = 'noopener external nofollow noreferrer';
-      link.target = '_blank';
-      link.className = element.className;
-      link.title = element.title;
-      link.innerHTML = element.innerHTML;
-      element.parentNode.replaceChild(link, element);
-    });
+  replacePostCRLink: function() {
+    if (CONFIG.hostname.startsWith('http')) return;
+    // Try to support mutli domain without base URL sets.
+    let href = window.location.href;
+    if (href.indexOf('#')>-1){
+      href = href.split('#')[0];
+    }
+    let postLink = document.getElementById('post-cr-link');
+    if (!postLink) return;
+    postLink.text = href;
+    postLink.href = href;
  },

  /**
   * One-click copy code support.
   */
  registerCopyCode: function() {
-    let figure = document.querySelectorAll('figure.highlight');
-    if (figure.length === 0) figure = document.querySelectorAll('pre:not(.mermaid)');
+    let figure = document.querySelectorAll('.highlight pre');
+    if (figure.length === 0 || !CONFIG.copybtn) return;
    figure.forEach(element => {
-      element.querySelectorAll('.code .line span').forEach(span => {
-        span.classList.forEach(name => {
-          span.classList.replace(name, `hljs-${name}`);
-        });
-      });
-      if (!CONFIG.copycode) return;
+      let cn = element.querySelector('code').className;
+      // TODO seems hard code need find other ways fixed it.
+      if (cn == '') return;
      element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
      const button = element.querySelector('.copy-btn');
      button.addEventListener('click', () => {
@@ -259,6 +253,31 @@ NexT.utils = {
    });
  },

+  initCommontesDispaly: function(){
+    const comms = document.querySelectorAll('.comment-wrap > div');
+    if (comms.length<=1) return;
+    comms.forEach(function(item){
+      var dis = window.getComputedStyle(item, null).display;
+      item.style.display = dis;
+    });
+  },
+
+  registerCommonSwitch: function() {
+    const button = document.querySelector('.comment-switch .switch-btn');
+    if (!button) return;
+    const comms = document.querySelectorAll('.comment-wrap > div');
+    button.addEventListener('click', () => {
+      button.classList.toggle('move');
+      comms.forEach(function(item){        
+        if (item.style.display === 'none') {
+          item.style.cssText = "display: block; animation: tabshow .8s";
+        } else {
+          item.style.cssText = "display: none;"
+        }
+      });
+    });
+  },
+
  activateNavByIndex: function(index) {
    const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
    if (!target || target.classList.contains('active-current')) return;
@@ -287,7 +306,7 @@ NexT.utils = {
    if (window.innerWidth < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
    // Expand sidebar on post detail page by default, when post has a toc.
    const hasTOC = document.querySelector('.post-toc');
-    let display = CONFIG.page.sidebar;
+    let display = CONFIG.sidebar;
    if (typeof display !== 'boolean') {
      // There's no definition sidebar in the page front-matter.
      display = CONFIG.sidebar.display === 'always' || (CONFIG.sidebar.display === 'post' && hasTOC);