chore: update docs and style (#269)

2026-08-31 10:42:41 +00:00 · 2020-04-28 01:38:22 +08:00
parent b46c81053f
commit 6805d695f6
69 changed files with 540 additions and 454 deletions
@@ -1,6 +1,7 @@
 # Hugo default output directory
 public/
 /exampleSite/resources/
+/resources/_gen/assets/scss/temp

 node_modules/
 build/
@@ -9,7 +9,7 @@ English README | [简体中文说明](https://github.com/dillonzq/LoveIt/blob/ma

 > **LoveIt** is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/).

-It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) and [KeepIt Theme](https://github.com/liuzc/LeaveIt/).
+It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/liuzc/LeaveIt).

 Since the three themes have a similar look, if you have questions about their differences,
 read [Why choose LoveIt](#why-choose-loveit) so that you can choose the one that works best for you.
@@ -9,7 +9,7 @@

 > [LoveIt](https://github.com/dillonzq/LoveIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。

-它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。
+它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt)。

 由于三个主题外观的相似性，如果你对于它们的不同之处有疑问，请阅读 [为什么选择 LoveIt](#为什么选择-LoveIt)，以便你能选择最适合你的一个。

@@ -24,7 +24,7 @@ html {
 ::selection {
  background-color: $selection-color;

-  .dark & {
+  [theme=dark] & {
    background-color: $selection-color-dark;
  }
 }
@@ -35,7 +35,7 @@ body {
  overflow-wrap: break-word;
  scrollbar-color: auto;

-  &.dark {
+  &[theme=dark] {
    color: $global-font-color-dark;
    background-color: $global-background-color-dark;
  }
@@ -2,14 +2,6 @@
  .page {
    width: 56%;
  }
-
-  #header-desktop .header-wrapper {
-    padding: 0 8vw;
-  }
-
-  .search-dropdown.desktop {
-    right: 8vw;
-  }
 }

@media only screen and (max-width: 1200px) {
@@ -18,11 +10,11 @@
  }

  #header-desktop .header-wrapper {
-    padding: 0 4vw;
+    padding-right: 1rem;
  }

  .search-dropdown.desktop {
-    right: 4vw;
+    right: 1rem;
  }
 }

@@ -38,6 +30,10 @@
  .page {
    width: 80%;
  }
+
+  #header-desktop .header-wrapper {
+    padding-left: 1rem;
+  }
 }

@media only screen and (max-width: 680px) {
@@ -0,0 +1,7 @@
+@mixin details-transition-open {
+  @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+}
+
+@mixin details-transition-close {
+  @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+}
@@ -2,3 +2,4 @@
@import "_link";
@import "_blur";
@import "_summary";
+@import "_details";
@@ -2,7 +2,7 @@
  a {
    color: if($light, $global-link-color, $single-link-color);

-    .dark & {
+    [theme=dark] & {
      color: if($dark, $global-link-color-dark, $single-link-color-dark);
    }

@@ -10,7 +10,7 @@
    &:hover {
      color: if($light, $global-link-hover-color, $single-link-hover-color);

-      .dark & {
+      [theme=dark] & {
        color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
      }
    }
@@ -5,7 +5,7 @@
    color: $global-font-color;
    border-bottom: 1px dashed $global-border-color;

-    .dark & {
+    [theme=dark] & {
      color: $global-font-color-dark;
      border-bottom: 1px dashed $global-border-color-dark;
    }
@@ -47,7 +47,7 @@
      overflow-wrap: break-word;
      color: $global-font-secondary-color;

-      .dark & {
+      [theme=dark] & {
        color: $global-font-secondary-color-dark;
      }

@@ -78,7 +78,7 @@
          margin-right: .3125rem;
          color: $global-link-color;

-          .dark & {
+          [theme=dark] & {
            color: $global-link-color-dark;
          }
        }
@@ -95,7 +95,7 @@
      @include link(true, true);

      b, strong {
-        .dark & {
+        [theme=dark] & {
          color: $global-font-secondary-color-dark;
        }
      }
@@ -56,7 +56,7 @@
          padding: .4rem;
          color: $global-font-secondary-color;

-          .dark & {
+          [theme=dark] & {
            color: $global-font-secondary-color-dark;
          }
        }
@@ -24,7 +24,7 @@
      display: inline-block;
    }

-    .dark & {
+    [theme=dark] & {
      color: $global-font-secondary-color-dark;
    }

@@ -88,7 +88,7 @@
      font-weight: bold;
      margin: 1.2rem 0;

-      .dark & {
+      [theme=dark] & {
        font-weight: bolder;
      }
    }
@@ -103,7 +103,7 @@
        margin-right: .3125rem;
        color: $single-link-color;

-        .dark & {
+        [theme=dark] & {
          color: $single-link-color-dark;
        }
      }
@@ -120,7 +120,7 @@
    b, strong {
      font-weight: bold;

-      .dark & {
+      [theme=dark] & {
        color: #ddd;
      }
    }
@@ -131,18 +131,21 @@
      word-break: break-all;
      word-break: break-word;

-      .dark & b, .dark & strong {
+      [theme=dark] & b, [theme=dark] & strong {
        color: $single-link-color-dark;
      }
    }

-    .dark a:hover b, .dark a:hover strong {
+    [theme=dark] a:hover b, [theme=dark] a:hover strong {
      color: $single-link-hover-color-dark;
    }

-    ul {
+    ul, ol {
      margin: .5rem 0;
-      padding-left: 2rem;
+      padding-left: 2.5rem;
+    }
+
+    ul {
      list-style-type: disc;
    }

@@ -153,7 +156,7 @@
        color: $global-font-secondary-color;
      }

-      .dark & {
+      [theme=dark] & {
        background: $code-background-color-dark;

        rt {
@@ -168,7 +171,7 @@
      &::-webkit-scrollbar {
        background-color: $table-background-color;

-        .dark & {
+        [theme=dark] & {
          background-color: $table-background-color-dark;
        }
      }
@@ -181,14 +184,14 @@
        background: $table-background-color;
        border-collapse: collapse;

-        .dark & {
+        [theme=dark] & {
          background: $table-background-color-dark;
        }

        thead {
          background: $table-thead-color;

-          .dark & {
+          [theme=dark] & {
            background-color: $table-thead-color-dark;
          }
        }
@@ -197,7 +200,7 @@
          padding: .3rem 1rem;
          border: 1px solid darken($table-thead-color, 2%);

-          .dark & {
+          [theme=dark] & {
            border-color: darken($table-thead-color-dark, 2%);
          }
        }
@@ -241,7 +244,7 @@
      padding: .25rem .75rem;
      margin: 1rem 0;

-      .dark & {
+      [theme=dark] & {
        border-left-color: $blockquote-color-dark;
        background-color: rgba($blockquote-color-dark, .2);
      }
@@ -250,7 +253,7 @@
    .footnotes {
      color: $global-font-secondary-color;

-      .dark & {
+      [theme=dark] & {
        color: $global-font-secondary-color-dark;
      }

@@ -273,7 +276,7 @@
      border-top: 1px dashed $global-border-color;
      border-bottom: none;

-      .dark & {
+      [theme=dark] & {
        border-top: 1px dashed $global-border-color-dark;
      }
    }
@@ -290,7 +293,7 @@
      font-family: $code-font-family;
      color: $code-color;

-      .dark & {
+      [theme=dark] & {
        background-color: $global-background-color-dark;
        border: 1px solid $global-border-color-dark;
        border-bottom-color: $global-border-color-dark;
@@ -311,6 +314,7 @@

    .version {
      height: 1.25em;
+      vertical-align: text-bottom;
    }
  }

@@ -19,7 +19,7 @@
    sup {
      color: $global-font-secondary-color;

-      .dark & {
+      [theme=dark] & {
        color: $global-font-secondary-color-dark;
      }
    }
@@ -58,7 +58,7 @@
    background-color: transparent;
  }

-  .dark & {
+  [theme=dark] & {
    color: $global-link-color-dark;

    &:hover {
@@ -72,7 +72,7 @@
  text-align: right;
  color: $global-font-secondary-color;

-  .dark & {
+  [theme=dark] & {
    color: $global-font-secondary-color-dark;
  }
 }
@@ -9,7 +9,7 @@
    color: $global-font-secondary-color;
    @include transition(transform 0.2s ease);

-    .dark & {
+    [theme=dark] & {
      color: $global-font-secondary-color-dark;
    }
  }
@@ -17,17 +17,17 @@
  .details-content {
    max-height: 0;
    overflow-y: hidden;
-    @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+    @include details-transition-open;
  }

  &.open {
    i.details-icon {
-      @include transform(rotate(180deg));
+      @include transform(rotate(90deg));
    }

    .details-content {
      max-height: $MAX_LENGTH;
-      @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+      @include details-transition-close;
    }
  }
 }
@@ -25,7 +25,7 @@
    outline: none;
  }

-  .dark & {
+  [theme=dark] & {
    color: $global-font-secondary-color-dark;
    background: $header-background-color-dark;

@@ -3,7 +3,7 @@ header {
  z-index: 150;
  background-color: $header-background-color;

-  .dark & {
+  [theme=dark] & {
    background-color: $header-background-color-dark;
  }

@@ -66,7 +66,7 @@ header {
    vertical-align: baseline !important;
    @include transition(width 0.3s ease);

-    .dark & {
+    [theme=dark] & {
      background-color: $header-background-color-dark;
    }
  }
@@ -100,7 +100,7 @@ header {
      padding: 0 2rem 0 2rem;
    }

-    .dark & {
+    [theme=dark] & {
      input {
        color: $global-font-color-dark;
        background-color: $search-background-color-dark;
@@ -114,7 +114,7 @@ header {
    .search-button {
      color: $global-font-secondary-color;

-      .dark & {
+      [theme=dark] & {
        color: $global-font-secondary-color-dark;
      }
    }
@@ -140,7 +140,7 @@ header {
  line-height: $header-height;

  .header-wrapper {
-    padding: 0 10vw;
+    padding: 0 2rem 0 10vh;

    .header-title {
      font-size: $header-title-font-size;
@@ -160,7 +160,7 @@ header {
        &.delimiter {
          border-left: 1.5px solid $global-font-color;

-          .dark & {
+          [theme=dark] & {
            border-left-color: $global-border-color-dark;
          }
        }
@@ -178,7 +178,7 @@ header {
        font-weight: 900;
        color: $header-hover-color;

-        .dark & {
+        [theme=dark] & {
          color: $header-hover-color-dark;
        }
      }
@@ -227,7 +227,7 @@ header {
          @include border-radius(3px);
          @include transition(all 0.3s ease-in-out);

-          .dark & {
+          [theme=dark] & {
            background: $global-font-color-dark;
          }
        }
@@ -295,7 +295,7 @@ header {
        display: block;
      }

-      .dark & {
+      [theme=dark] & {
        background: $header-background-color-dark;
        border-top-color: $global-border-color-dark;
      }
@@ -329,7 +329,7 @@ header {
  @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));

  &.desktop {
-    right: 10vw;
+    right: 2rem;
    width: 30rem;
  }

@@ -342,7 +342,7 @@ header {
    right: 0 !important;
    background-color: $global-background-color;

-    .dark & {
+    [theme=dark] & {
      background-color: $global-background-color-dark;
    }

@@ -369,7 +369,7 @@ header {
          text-align: right;
          color: $global-font-secondary-color;

-          .dark & {
+          [theme=dark] & {
            color: $global-font-secondary-color-dark;
          }
        }
@@ -383,7 +383,7 @@ header {
          overflow-wrap: break-word;
          color: $global-font-secondary-color;

-          .dark & {
+          [theme=dark] & {
            color: $global-font-secondary-color-dark;
          }
        }
@@ -392,7 +392,7 @@ header {
          font-style: normal;
          background-color: $selection-color;

-          .dark & {
+          [theme=dark] & {
            background-color: $selection-color-dark;
          }
        }
@@ -400,7 +400,7 @@ header {
        &.cursor {
          background: darken($code-background-color, 5%);

-          .dark & {
+          [theme=dark] & {
            background: lighten($code-background-color-dark, 5%);
          }
        }
@@ -418,7 +418,7 @@ header {
      .search-query {
        font-weight: bold;

-        .dark & {
+        [theme=dark] & {
          color: #ddd;
        }
      }
@@ -430,7 +430,7 @@ header {
      font-size: .8rem;
      color: $global-font-secondary-color;

-      .dark {
+      [theme=dark] {
        color: $global-font-secondary-color-dark;
      }

@@ -32,7 +32,7 @@
      color: $pagination-link-hover-color;
    }

-    .dark &:hover a {
+    [theme=dark] &:hover a {
      color: $pagination-link-hover-color-dark;
    }

@@ -47,8 +47,8 @@
      bottom: 0px;
    }

-    .dark &:before,
-    .dark &:after {
+    [theme=dark] &:before,
+    [theme=dark] &:after {
      background: $pagination-link-hover-color-dark;
    }

@@ -78,7 +78,7 @@
        color: $pagination-link-hover-color;
      }

-      .dark & a {
+      [theme=dark] & a {
        color: $pagination-link-hover-color-dark;
      }

@@ -1,20 +1,21 @@
 .admonition {
  position: relative;
-  margin: .9765em 0;
+  margin: 1rem 0;
  padding: 0 .75rem;
  background-color: map-get($admonition-background-color-map, 'note');
  border-left: .25rem solid map-get($admonition-color-map, 'note');
  overflow: auto;

  .admonition-title {
+    font-weight: bold;
    margin: 0 -0.75rem;
-    padding: .2rem .75rem .2rem 1.8rem;
+    padding: .25rem 1.8rem;
    border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
-    background-color: map-get($admonition-background-color-map, 'note');
+    background-color: opacify(map-get($admonition-background-color-map, 'note'), 0.15);
  }

-  .details-summary.admonition-title:hover {
-    background-color: darken(map-get($admonition-background-color-map, 'note'), 6%);
+  &.open .admonition-title {
+    background-color: map-get($admonition-background-color-map, 'note');
  }

  .admonition-content {
@@ -25,14 +26,14 @@
    font-size: 0.85rem;
    color: map-get($admonition-color-map, 'note');
    position: absolute;
-    left: .6rem;
    top: .6rem;
+    left: .4rem;
  }

  i.details-icon {
    position: absolute;
-    top: .5rem;
-    right: .5rem;
+    top: .6rem;
+    right: .3rem;
  }

  @each $type, $color in $admonition-color-map {
@@ -51,11 +52,11 @@

      .admonition-title {
        border-bottom-color: $color;
-        background-color: $color;
+        background-color: opacify($color, 0.15);
      }

-      .details-summary.admonition-title:hover {
-        background-color: darken($color, 6%);
+      &.open .admonition-title {
+        background-color: $color;
      }
    }
  }
@@ -5,7 +5,7 @@ code {
  color: $code-color;
  padding: 0 .4rem;

-  .dark & {
+  [theme=dark] & {
    color: $code-color-dark;
  }
 }
@@ -20,7 +20,7 @@ pre {
  }

  img {
-    min-height: 1.25em;
+    min-height: 1em;
    max-height: 1.25em;
    vertical-align: text-bottom;
  }
@@ -29,7 +29,7 @@ pre {
 code, pre, .highlight table, .highlight tr, .highlight td {
  background: $code-background-color;

-  .dark & {
+  [theme=dark] & {
    background: $code-background-color-dark;
  }
 }
@@ -67,7 +67,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
    color: $code-info-color;
    background: darken($code-background-color, 8%);

-    .dark & {
+    [theme=dark] & {
      color: $code-info-color-dark;
      background: darken($code-background-color-dark, 6%);
    }
@@ -93,11 +93,15 @@ code, pre, .highlight table, .highlight tr, .highlight td {
    }
  }

+  .lntd:first-child {
+    min-width: 1.6rem;
+    text-align: right;
+  }
+
  .lntd:last-child {
    width: 100%;

    pre {
-      padding-left: .75rem;
      @include max-content(min-width);
    }
  }
@@ -110,7 +114,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
    display: block;
    background-color: darken($code-background-color, 10%);

-    .dark & {
+    [theme=dark] & {
      background-color: darken($code-background-color-dark, 5%);
    }
  }
@@ -118,12 +122,13 @@ code, pre, .highlight table, .highlight tr, .highlight td {
  .ln, .lnt {
    color: $global-font-secondary-color;

-    .dark & {
+    [theme=dark] & {
      color: $global-font-secondary-color-dark;
    }
  }

  .arrow {
+    padding: 0 .2rem;
    @include transition(transform 0.2s ease);
  }

@@ -139,7 +144,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
      cursor: pointer;
      color: $global-link-hover-color;

-      .dark & {
+      [theme=dark] & {
        color: $global-link-hover-color-dark;
      }
    }
@@ -148,21 +153,21 @@ code, pre, .highlight table, .highlight tr, .highlight td {
  .table-wrapper {
    max-height: 0;
    overflow-y: hidden;
-    @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+    @include details-transition-open;
  }

  &.open {
    .code-header {
      background: darken($code-background-color, 3%);

-      .dark & {
+      [theme=dark] & {
        background: darken($code-background-color-dark, 3%);
      }
    }

    .table-wrapper {
      max-height: $MAX_LENGTH;
-      @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+      @include details-transition-close;
    }

    .arrow {
@@ -191,7 +196,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
    .#{$class} { color: $color; }
  }

-  .dark & {
+  [theme=dark] & {
    @each $class, $color in $code-highlight-color-map-dark {
      .#{$class} { color: $color; }
    }
@@ -209,12 +214,12 @@ code, pre, .highlight table, .highlight tr, .highlight td {

    @include link(false, false);

-    .dark & {
+    [theme=dark] & {
      background-color: darken($code-background-color-dark, 5%);
    }
  }

-  .dark & {
+  [theme=dark] & {
    // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
    .highlight {
      background: #141414;
@@ -5,7 +5,7 @@
    border-bottom: 1px solid $global-border-color;
    padding: 1rem 0 0.3rem;

-    .dark & {
+    [theme=dark] & {
      border-bottom: 1px solid $global-border-color-dark;
    }

@@ -17,7 +17,7 @@
        font-size: 0.8em;
        color: $global-font-secondary-color;

-        .dark & {
+        [theme=dark] & {
          color: $global-font-secondary-color-dark;
        }

@@ -28,7 +28,7 @@
        font-size: 0.8em;
        color: $global-font-secondary-color;

-        .dark & {
+        [theme=dark] & {
          color: $global-font-secondary-color-dark;
        }
      }
@@ -1,5 +1,5 @@
 iframe.instagram-media {
-  .dark & {
+  [theme=dark] & {
    border: none !important;
  }
 }
@@ -19,7 +19,7 @@
        margin-right: .5rem;
        color: $single-link-color;

-        .dark & {
+        [theme=dark] & {
          color: $single-link-color-dark;
        }
      }
@@ -37,7 +37,7 @@
      color: $global-font-secondary-color;
    }

-    .dark & {
+    [theme=dark] & {
      background: $code-background-color-dark;

      rt {
@@ -60,8 +60,8 @@

  @include blur;

-  .dark & {
-    border-left: 1px solid $global-border-color-dark;
+  [theme=dark] & {
+    border-left-color: $global-border-color-dark;
  }

  .toc-title {
@@ -91,14 +91,14 @@
      font-weight: bold;
      color: $single-link-color;

-      .dark & {
+      [theme=dark] & {
        color: $single-link-color-dark;
      }

      &::before {
        color: $single-link-hover-color;

-        .dark & {
+        [theme=dark] & {
          color: $single-link-hover-color-dark;
        }
      }
@@ -115,18 +115,10 @@
    justify-content: space-between;
    line-height: 2em;
    padding: 0 .75rem;
-    background: darken($code-background-color, 3%);
+    background: darken($code-background-color, 6%);

-    .dark & {
-      background: darken($code-background-color-dark, 3%);
-    }
-
-    &:hover {
-      background: darken($code-background-color, 6%);
-
-      .dark & {
-        background: darken($code-background-color-dark, 5%);
-      }
+    [theme=dark] & {
+      background: darken($code-background-color-dark, 6%);
    }
  }

@@ -138,8 +130,18 @@
      padding: .4rem 1rem .4rem 1.8rem;
    }

-    .dark & {
+    [theme=dark] & {
      background-color: $code-background-color-dark;
    }
  }
+
+  &.open {
+    .toc-title {
+      background: darken($code-background-color, 3%);
+
+      [theme=dark] & {
+        background: darken($code-background-color-dark, 3%);
+      }
+    }
+  }
 }
@@ -31,7 +31,7 @@ $global-link-hover-color-dark: #fff !default;

 // Color of the border
 $global-border-color: #f0f0f0 !default;
-$global-border-color-dark: #4a4b50 !default;
+$global-border-color-dark: #363636 !default;
 // ========== Global ========== //

 // ========== Scrollbar ========== //
@@ -122,7 +122,7 @@ $code-color-dark: #E5BF78 !default;
 $code-background-color: #f5f5f5 !default;
 $code-background-color-dark: #272C34 !default;

-$code-info-color: #acabab !default;
+$code-info-color: #9c9c9c !default;
 $code-info-color-dark: #b1b0b0 !default;

 // Font size of the code
@@ -356,18 +356,18 @@ $admonition-color-map: (

 // Color map of the admonition background
 $admonition-background-color-map: (
-  'note': rgba(68,138,255,.1),
-  'abstract': rgba(0,176,255,.1),
-  'info': rgba(0,184,212,.1),
-  'tip': rgba(0,191,165,.1),
-  'success': rgba(0,200,83,.1),
-  'question': rgba(100,221,23,.1),
-  'warning': rgba(255,145,0,.1),
-  'failure': rgba(255,82,82,.1),
-  'danger': rgba(255,23,68,.1),
-  'bug': rgba(245,0,87,.1),
-  'example': rgba(101,31,255,.1),
-  'quote': hsla(0,0%,62%,.1),
+  'note': rgba(68, 138, 255, 0.1),
+  'abstract': rgba(0, 176, 255, 0.1),
+  'info': rgba(0, 184, 212, 0.1),
+  'tip': rgba(0, 191, 165, 0.1),
+  'success': rgba(0, 200, 83, 0.1),
+  'question': rgba(100, 221, 23, 0.1),
+  'warning': rgba(255, 145, 0, 0.1),
+  'failure': rgba(255, 82, 82, 0.1),
+  'danger': rgba(255, 23, 68, 0.1),
+  'bug': rgba(245, 0, 87, 0.1),
+  'example': rgba(101, 31, 255, 0.1),
+  'quote': rgba(159, 159, 159, 0.1),
 ) !default;
 // ========== Admonition ========== //

@@ -1,4 +1,4 @@
-.dark .aplayer {
+[theme=dark] .aplayer {
  background: #212121;

  &.aplayer-withlist {
@@ -9,7 +9,7 @@

  @import "themes/neutral/index";

-  .dark & {
+  [theme=dark] & {
    @import "themes/dark/index";
  }
 }
@@ -6,6 +6,14 @@ algoliasearch:
  - Promise
  - Object.entries
  - Object.assign
+TypeIt:
+  - Array.prototype.fill
+  - Array.prototype.find
+  - Array.from
+  - IntersectionObserver
+  - Math.sign
+  - Object.assign
+  - Promise
 theme:
  - Object.values
  - Promise
@@ -0,0 +1,14 @@
+$border-color: #f0f0f0;
+$border-color-dark: #363636;
+
+.v[data-class=v] {
+  .vwrap,
+  .vwrap .vheader .vinput,
+  .vcards .vcard .vh {
+    border-color: $border-color;
+
+    [theme=dark] & {
+      border-color: $border-color-dark;
+    }
+  }
+}
@@ -774,31 +774,31 @@ enableEmoji = true
      enable = true
      Twitter = true
      Facebook = true
-      # Linkedin = true
-      # Whatsapp = true
-      # Pinterest = true
-      # Tumblr = true
-      # HackerNews = true
-      # Reddit = true
-      # VK = true
-      # Buffer = true
-      # Xing = true
+      Linkedin = false
+      Whatsapp = true
+      Pinterest = false
+      Tumblr = false
+      HackerNews = false
+      Reddit = false
+      VK = false
+      Buffer = false
+      Xing = false
      Line = true
-      # Instapaper = true
-      # Pocket = true
-      # Digg = true
-      # Stumbleupon = true
-      # Flipboard = true
+      Instapaper = false
+      Pocket = false
+      Digg = false
+      Stumbleupon = false
+      Flipboard = false
      Weibo = true
-      # Renren = true
-      # Myspace = true
-      # Blogger = true
-      Baidu = true
-      # Odnoklassniki = true
+      Renren = false
+      Myspace = true
+      Blogger = true
+      Baidu = false
+      Odnoklassniki = false
      Evernote = true
-      # Skype = true
-      # Trello = true
-      # Mix = true
+      Skype = false
+      Trello = false
+      Mix = false
    # Comment config
    # 评论系统设置
    [params.page.comment]
@@ -17,9 +17,9 @@ math:
 [![GitHub forks](https://img.shields.io/github/forks/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt/fork)
 {{< /style >}}

-[:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
-
-It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) and [KeepIt Theme](https://github.com/liuzc/LeaveIt/).
+> [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
+>
+> It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/liuzc/LeaveIt).

 ![Hugo Theme LoveIt](/images/Apple-Devices-Preview.png "Hugo Theme LoveIt")

@@ -22,9 +22,9 @@ Sorry, this article has not been completely translated into **French**.
 Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
 {{< /admonition >}}

-[:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
-
-It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) and [KeepIt Theme](https://github.com/liuzc/LeaveIt/).
+> [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
+>
+> It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/liuzc/LeaveIt).

 ![Hugo Theme LoveIt](/images/Apple-Devices-Preview.png "Hugo Theme LoveIt")

@@ -17,9 +17,9 @@ math:
 [![GitHub forks](https://img.shields.io/github/forks/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt/fork)
 {{< /style >}}

-[:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) 是一个由 [Dillon](https://dillonzq.com) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
-
-它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。
+> [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) 是一个由 [Dillon](https://dillonzq.com) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
+>
+> 它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt)。

 ![Hugo 主题 LoveIt](/images/Apple-Devices-Preview.png "Hugo 主题 LoveIt")

@@ -22,7 +22,7 @@ This article offers a sample of basic Markdown syntax that can be used in Hugo c
 {{< admonition >}}
 This article is a shameful copy of the great [Grav original page](http://learn.getgrav.org/content/markdown).

-If you want to know about the extented Markdown syntax of **LoveIt** theme, please read [extended Markdown syntax page](../theme-documentation-content/#extended-markdown-syntax).
+If you want to know about the extented Markdown syntax of **LoveIt** theme, please read [extended Markdown syntax page](../theme-documentation-content#extended-markdown-syntax).
 {{< /admonition >}}

 Let's face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.
@@ -757,5 +757,5 @@ With a reference later in the document defining the URL location:
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"

 {{< admonition tip >}}
-**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes/#image), which provides more features.
+**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes#image), which provides more features.
 {{< /admonition >}}
@@ -27,7 +27,7 @@ Welcome to take the time to propose a translation by [making a PR](https://githu
 {{< admonition >}}
 This article is a shameful copy of the great [Grav original page](http://learn.getgrav.org/content/markdown).

-If you want to know about the extented Markdown syntax of **LoveIt** theme, please read [extended Markdown syntax page](../theme-documentation-content/#extended-markdown-syntax).
+If you want to know about the extented Markdown syntax of **LoveIt** theme, please read [extended Markdown syntax page](../theme-documentation-content#extended-markdown-syntax).
 {{< /admonition >}}

 Let's face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.
@@ -762,5 +762,5 @@ With a reference later in the document defining the URL location:
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"

 {{< admonition tip >}}
-**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes/#image), which provides more features.
+**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes#image), which provides more features.
 {{< /admonition >}}
@@ -22,7 +22,7 @@ lightgallery: true
 {{< admonition >}}
 这篇文章借鉴了一篇很棒的[来自 Grav 的文章](http://learn.getgrav.org/content/markdown).

-如果你想了解 **Loveit** 主题的扩展 Markdown 语法, 请阅读[扩展 Markdown 语法页面](../theme-documentation-content/#extended-markdown-syntax).
+如果你想了解 **Loveit** 主题的扩展 Markdown 语法, 请阅读[扩展 Markdown 语法页面](../theme-documentation-content#extended-markdown-syntax).
 {{< /admonition >}}

 事实上, 编写 Web 内容很麻烦. [WYSIWYG]^(所见即所得) 编辑器帮助减轻了这一任务. 但通常会导致代码太糟, 或更糟糕的是, 网页也会很丑.
@@ -393,13 +393,13 @@ odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac

 ```markdown
 1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
-4. Facilisis in pretium nisl aliquet
-5. Nulla volutpat aliquam velit
-6. Faucibus porta lacus fringilla vel
-7. Aenean sit amet erat nunc
-8. Eget porttitor lorem
+1. Consectetur adipiscing elit
+1. Integer molestie lorem at massa
+1. Facilisis in pretium nisl aliquet
+1. Nulla volutpat aliquam velit
+1. Faucibus porta lacus fringilla vel
+1. Aenean sit amet erat nunc
+1. Eget porttitor lorem
 ```

 呈现的输出效果如下:
@@ -764,5 +764,5 @@ Content for chapter one.
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"

 {{< admonition tip >}}
-**LoveIt** 主题提供了一个包含更多功能的 [图片的 shortcode](../theme-documentation-extended-shortcodes/#image).
+**LoveIt** 主题提供了一个包含更多功能的 [图片的 shortcode](../theme-documentation-extended-shortcodes#image).
 {{< /admonition >}}
@@ -20,9 +20,9 @@ Emoji can be enabled in a Hugo project in a number of ways.

 <!--more-->

-The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
+The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates#inline-shortcodes).

-To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files.
+To enable emoji globally, set `enableEmoji` to `true` in your [site configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files.

 These begin and end with a **colon** and include the **code** of an emoji:

@@ -38,6 +38,12 @@ Gone camping! :tent: Be back soon.

 That is so funny! :joy:

+{{< admonition tip "Enable Twemoji" >}}
+This page enables `twemoji` to make emoji look beautiful everywhere.
+
+Set `twemoji` to `true` in your [front matter](../theme-documentation-content#front-matter) or in the `params.page` part of the [site configuration](https://gohugo.io/getting-started/configuration/) to use :(far fa-grin-tongue-wink fa-fw): Twemoji.
+{{< /admonition >}}
+
 ## Emoji Cheat Sheet

 The following cheat sheet is a useful reference for emoji shorthand codes.
@@ -25,9 +25,9 @@ Sorry, this article has not been completely translated into **French**.
 Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
 {{< /admonition >}}

-The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
+The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates#inline-shortcodes).

-To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files.
+To enable emoji globally, set `enableEmoji` to `true` in your [site configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files.

 These begin and end with a **colon** and include the **code** of an emoji:

@@ -43,6 +43,12 @@ Gone camping! :tent: Be back soon.

 That is so funny! :joy:

+{{< admonition tip "Enable Twemoji" >}}
+This page enables `twemoji` to make emoji look beautiful everywhere.
+
+Set `twemoji` to `true` in your [front matter](../theme-documentation-content#front-matter) or in the `params.page` part of the [site configuration](https://gohugo.io/getting-started/configuration/) to use :(far fa-grin-tongue-wink fa-fw): Twemoji.
+{{< /admonition >}}
+
 ## Emoji Cheat Sheet

 The following cheat sheet is a useful reference for emoji shorthand codes.
@@ -20,9 +20,9 @@ Emoji 可以通过多种方式在 Hugo 项目中启用.

 <!--more-->

-[`emojify`](https://gohugo.io/functions/emojify/) 方法可以直接在模板中调用, 或者使用 [行内 Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
+[`emojify`](https://gohugo.io/functions/emojify/) 方法可以直接在模板中调用, 或者使用[行内 Shortcodes](https://gohugo.io/templates/shortcode-templates#inline-shortcodes).

-要全局使用 emoji, 需要在你的网站 [配置](https://gohugo.io/getting-started/configuration/) 中设置 `enableEmoji` 为 `true`,
+要全局使用 emoji, 需要在你的[网站配置](https://gohugo.io/getting-started/configuration/)中设置 `enableEmoji` 为 `true`,
 然后你就可以直接在文章中输入 emoji 的代码.

 它们以**冒号**开头和结尾，并且包含 emoji 的 **代码**:
@@ -39,6 +39,12 @@ Emoji 可以通过多种方式在 Hugo 项目中启用.

 真开心! :joy:

+{{< admonition tip "使用 Twemoji" >}}
+这个页面使用了 `twemoji` 来使 emoji 具有一致的美观性.
+
+请在文章的[前置参数](../theme-documentation-content#front-matter) 或 [网站配置](../theme-documentation-basics#site-configuration) 的 `params.page` 部分中将 `twemoji` 设置为 `true` 来使用 :(far fa-grin-tongue-wink fa-fw): Twemoji.
+{{< /admonition >}}
+
 ## Emoji 符号清单

 以下清单是 emoji 代码的非常有用的参考.
@@ -29,7 +29,7 @@ Thanks to the simplicity of Hugo, [Hugo](https://gohugo.io/) is the only depende
 Just install latest version of [:(far fa-file-archive fa-fw): Hugo extended (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**).

 {{< admonition note "Why not support earlier versions of Hugo?" >}}
-Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **0.62.0**.
+Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **0.62.0**.
 {{< /admonition >}}

 {{< admonition note "Why need the Hugo extended version?" >}}
@@ -181,9 +181,7 @@ Alternatively, you can use [AWS Amplify](https://gohugo.io/hosting-and-deploymen

 In addition to [Hugo global configuration](https://gohugo.io/overview/configuration/) and [menu configuration](#basic-configuration), **LoveIt** lets you define the following parameters in your site configuration (here is a `config.toml`, whose values are default).

-{{< admonition >}}
-Note that some of these parameters are explained in details in other sections of this documentation.
-{{< /admonition >}}
+Please open the code block below to view the complete sample configuration :(far fa-hand-point-down fa-fw)::

 ```toml
 [params]
@@ -420,44 +418,44 @@ Note that some of these parameters are explained in details in other sections of
      lightStyle = "mapbox://styles/mapbox/light-v9"
      # style for the dark theme
      darkStyle = "mapbox://styles/mapbox/dark-v9"
-      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}}
      navigation = true
-      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}}
      geolocate = true
-      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol" ScaleControl >}}
      scale = true
-      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol" FullscreenControl >}}
      fullscreen = true
    # {{< version 0.2.0 changed >}} social share links in post page
    [params.page.share]
      enable = true
      Twitter = true
      Facebook = true
-      Linkedin = true
+      Linkedin = false
      Whatsapp = true
-      Pinterest = true
-      # Tumblr = true
-      HackerNews = true
-      # Reddit = true
-      # VK = true
-      # Buffer = true
-      # Xing = true
-      # Line = true
-      # Instapaper = true
-      # Pocket = true
-      # Digg = true
-      # Stumbleupon = true
-      # Flipboard = true
-      # Weibo = true
-      # Renren = true
-      # Myspace = true
-      # Blogger = true
-      # Baidu = true
-      # Odnoklassniki = true
-      # Evernote = true
-      # Skype = true
-      # Trello = true
-      # Mix = true
+      Pinterest = false
+      Tumblr = false
+      HackerNews = false
+      Reddit = false
+      VK = false
+      Buffer = false
+      Xing = false
+      Line = true
+      Instapaper = false
+      Pocket = false
+      Digg = false
+      Stumbleupon = false
+      Flipboard = false
+      Weibo = true
+      Renren = false
+      Myspace = true
+      Blogger = true
+      Baidu = false
+      Odnoklassniki = false
+      Evernote = true
+      Skype = false
+      Trello = false
+      Mix = false
    # {{< version 0.2.0 changed >}} Comment config
    [params.page.comment]
      enable = true
@@ -652,7 +650,7 @@ Note that some of these parameters are explained in details in other sections of
  filename = "sitemap.xml"
  priority = 0.5

-# {{< link "https://gohugo.io/content-management/urls/#permalinks" "Permalinks config" >}}
+# {{< link "https://gohugo.io/content-management/urls#permalinks" "Permalinks config" >}}
 [Permalinks]
  # posts = ":year/:month/:filename"
  posts = ":filename"
@@ -688,6 +686,19 @@ Note that some of these parameters are explained in details in other sections of
  taxonomyTerm = ["HTML"]
 ```

+{{< admonition >}}
+Note that some of these parameters are explained in details in other sections of this documentation.
+{{< /admonition >}}
+
+{{< admonition note "Hugo environments" >}}
+Default environments are `development` with `hugo serve` and `production` with `hugo`.
+
+Due to limitations in the local `development` environment,
+the **comment system**, **CDN** and **fingerprint** will not be enabled in the `development` environment.
+
+You could enable these features with `hugo serve -e production`.
+{{< /admonition >}}
+
 {{< admonition tip "Tips about CDN Configuration" >}}
 Full HTML tags or URLs are supported for CDN configuration:

@@ -903,7 +914,7 @@ Be aware that only translated pages are displayed in menu. It’s not replaced w
 {{< /admonition >}}

 {{< admonition tip >}}
-Use [Front Matter parameter](https://gohugo.io/content-management/multilingual/#translate-your-content) to translate urls too.
+Use [Front Matter parameter](https://gohugo.io/content-management/multilingual#translate-your-content) to translate urls too.
 {{< /admonition >}}

 ### 4.3 Overwrite Translation Strings
@@ -949,6 +960,8 @@ Here is the search configuration in your [site configuration](#site-configuratio
 ```

 {{< admonition note "How to choose the type of search engine?" >}}
+The following is a comparison of two search engines:
+
 * `lunr`: simple, no need to synchronize `index.json`, no limit for `contentLength`,
  but high bandwidth and low performance (Especially for Chinese which needs a large segmentit library)
 * `algolia`: high performance and low bandwidth, but need to synchronize `index.json` and limit for `contentLength`
@@ -34,7 +34,7 @@ Thanks to the simplicity of Hugo, [Hugo](https://gohugo.io/) is the only depende
 Just install latest version of [:(far fa-file-archive fa-fw): Hugo extended (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**).

 {{< admonition note "Why not support earlier versions of Hugo?" >}}
-Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **0.62.0**.
+Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **0.62.0**.
 {{< /admonition >}}

 {{< admonition note "Why need the Hugo extended version?" >}}
@@ -186,9 +186,7 @@ Alternatively, you can use [AWS Amplify](https://gohugo.io/hosting-and-deploymen

 In addition to [Hugo global configuration](https://gohugo.io/overview/configuration/) and [menu configuration](#basic-configuration), **LoveIt** lets you define the following parameters in your site configuration (here is a `config.toml`, whose values are default).

-{{< admonition >}}
-Note that some of these parameters are explained in details in other sections of this documentation.
-{{< /admonition >}}
+Please open the code block below to view the complete sample configuration :(far fa-hand-point-down fa-fw)::

 ```toml
 [params]
@@ -425,44 +423,44 @@ Note that some of these parameters are explained in details in other sections of
      lightStyle = "mapbox://styles/mapbox/light-v9"
      # style for the dark theme
      darkStyle = "mapbox://styles/mapbox/dark-v9"
-      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}}
      navigation = true
-      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}}
      geolocate = true
-      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol" ScaleControl >}}
      scale = true
-      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol" FullscreenControl >}}
      fullscreen = true
    # {{< version 0.2.0 changed >}} social share links in post page
    [params.page.share]
      enable = true
      Twitter = true
      Facebook = true
-      Linkedin = true
+      Linkedin = false
      Whatsapp = true
-      Pinterest = true
-      # Tumblr = true
-      HackerNews = true
-      # Reddit = true
-      # VK = true
-      # Buffer = true
-      # Xing = true
-      # Line = true
-      # Instapaper = true
-      # Pocket = true
-      # Digg = true
-      # Stumbleupon = true
-      # Flipboard = true
-      # Weibo = true
-      # Renren = true
-      # Myspace = true
-      # Blogger = true
-      # Baidu = true
-      # Odnoklassniki = true
-      # Evernote = true
-      # Skype = true
-      # Trello = true
-      # Mix = true
+      Pinterest = false
+      Tumblr = false
+      HackerNews = false
+      Reddit = false
+      VK = false
+      Buffer = false
+      Xing = false
+      Line = true
+      Instapaper = false
+      Pocket = false
+      Digg = false
+      Stumbleupon = false
+      Flipboard = false
+      Weibo = true
+      Renren = false
+      Myspace = true
+      Blogger = true
+      Baidu = false
+      Odnoklassniki = false
+      Evernote = true
+      Skype = false
+      Trello = false
+      Mix = false
    # {{< version 0.2.0 changed >}} Comment config
    [params.page.comment]
      enable = true
@@ -657,7 +655,7 @@ Note that some of these parameters are explained in details in other sections of
  filename = "sitemap.xml"
  priority = 0.5

-# {{< link "https://gohugo.io/content-management/urls/#permalinks" "Permalinks config" >}}
+# {{< link "https://gohugo.io/content-management/urls#permalinks" "Permalinks config" >}}
 [Permalinks]
  # posts = ":year/:month/:filename"
  posts = ":filename"
@@ -693,6 +691,19 @@ Note that some of these parameters are explained in details in other sections of
  taxonomyTerm = ["HTML"]
 ```

+{{< admonition >}}
+Note that some of these parameters are explained in details in other sections of this documentation.
+{{< /admonition >}}
+
+{{< admonition note "Hugo environments" >}}
+Default environments are `development` with `hugo serve` and `production` with `hugo`.
+
+Due to limitations in the local `development` environment,
+the **comment system**, **CDN** and **fingerprint** will not be enabled in the `development` environment.
+
+You could enable these features with `hugo serve -e production`.
+{{< /admonition >}}
+
 {{< admonition tip "Tips about CDN Configuration" >}}
 Full HTML tags or URLs are supported for CDN configuration:

@@ -908,7 +919,7 @@ Be aware that only translated pages are displayed in menu. It’s not replaced w
 {{< /admonition >}}

 {{< admonition tip >}}
-Use [Front Matter parameter](https://gohugo.io/content-management/multilingual/#translate-your-content) to translate urls too.
+Use [Front Matter parameter](https://gohugo.io/content-management/multilingual#translate-your-content) to translate urls too.
 {{< /admonition >}}

 ### 4.3 Overwrite Translation Strings
@@ -954,6 +965,8 @@ Here is the search configuration in your [site configuration](#site-configuratio
 ```

 {{< admonition note "How to choose the type of search engine?" >}}
+The following is a comparison of two search engines:
+
 * `lunr`: simple, no need to synchronize `index.json`, no limit for `contentLength`,
  but high bandwidth and low performance (Especially for Chinese which needs a large segmentit library)
 * `algolia`: high performance and low bandwidth, but need to synchronize `index.json` and limit for `contentLength`
@@ -29,7 +29,7 @@ toc:
 直接安装满足你操作系统 (**Windows**, **Linux**, **macOS**) 的最新版本 [:(far fa-file-archive fa-fw): Hugo extended (> 0.62.0)](https://gohugo.io/getting-started/installing/).

 {{< admonition note "为什么不支持早期版本的 Hugo?" >}}
-由于 [Markdown 渲染钩子函数](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks) 在 [Hugo 圣诞节版本](https://gohugo.io/news/0.62.0-relnotes/) 中被引入, 本主题只支持高于 **0.62.0** 的 Hugo 版本.
+由于 [Markdown 渲染钩子函数](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks) 在 [Hugo 圣诞节版本](https://gohugo.io/news/0.62.0-relnotes/) 中被引入, 本主题只支持高于 **0.62.0** 的 Hugo 版本.
 {{< /admonition >}}

 {{< admonition note "为什么需要 Hugo extended 版本?" >}}
@@ -184,9 +184,7 @@ hugo

 除了 [Hugo 全局配置](https://gohugo.io/overview/configuration/) 和 [菜单配置](#basic-configuration) 之外, **LoveIt** 主题还允许您在网站配置中定义以下参数 (这是一个示例 `config.toml`, 其内容为默认值).

-{{< admonition >}}
-请注意, 本文档其他部分将详细解释其中一些参数.
-{{< /admonition >}}
+请打开下面的代码块查看完整的示例配置 :(far fa-hand-point-down fa-fw)::

 ```toml
 [params]
@@ -423,44 +421,44 @@ hugo
      lightStyle = "mapbox://styles/mapbox/light-v9"
      # 深色主题的地图样式
      darkStyle = "mapbox://styles/mapbox/dark-v9"
-      # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
+      # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}}
      navigation = true
-      # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
+      # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}}
      geolocate = true
-      # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
+      # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol" ScaleControl >}}
      scale = true
-      # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
+      # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol" FullscreenControl >}}
      fullscreen = true
    # {{< version 0.2.0 changed >}} 文章页面的分享信息设置
    [params.page.share]
      enable = true
      Twitter = true
      Facebook = true
-      # Linkedin = true
-      # Whatsapp = true
-      # Pinterest = true
-      # Tumblr = true
-      # HackerNews = true
-      # Reddit = true
-      # VK = true
-      # Buffer = true
-      # Xing = true
-      # Line = true
-      # Instapaper = true
-      # Pocket = true
-      # Digg = true
-      # Stumbleupon = true
-      # Flipboard = true
+      Linkedin = false
+      Whatsapp = true
+      Pinterest = false
+      Tumblr = false
+      HackerNews = false
+      Reddit = false
+      VK = false
+      Buffer = false
+      Xing = false
+      Line = true
+      Instapaper = false
+      Pocket = false
+      Digg = false
+      Stumbleupon = false
+      Flipboard = false
      Weibo = true
-      # Renren = true
-      # Myspace = true
-      # Blogger = true
-      # Baidu = true
-      # Odnoklassniki = true
+      Renren = false
+      Myspace = true
+      Blogger = true
+      Baidu = false
+      Odnoklassniki = false
      Evernote = true
-      # Skype = true
-      # Trello = true
-      # Mix = true
+      Skype = false
+      Trello = false
+      Mix = false
    # {{< version 0.2.0 changed >}} 评论系统设置
    [params.page.comment]
      enable = true
@@ -655,7 +653,7 @@ hugo
  filename = "sitemap.xml"
  priority = 0.5

-# {{< link "https://gohugo.io/content-management/urls/#permalinks" "Permalinks 配置" >}}
+# {{< link "https://gohugo.io/content-management/urls#permalinks" "Permalinks 配置" >}}
 [Permalinks]
  # posts = ":year/:month/:filename"
  posts = ":filename"
@@ -691,6 +689,20 @@ hugo
  taxonomyTerm = ["HTML"]
 ```

+{{< admonition >}}
+请注意, 本文档其他部分将详细解释其中一些参数.
+{{< /admonition >}}
+
+{{< admonition note "Hugo 的运行环境" >}}
+`hugo serve` 的默认运行环境是 `development`,
+而 `hugo` 的默认运行环境是 `production`.
+
+由于本地 `development` 环境的限制,
+**评论系统**, **CDN** 和 **fingerprint** 不会在 `development` 环境下启用.
+
+你可以使用 `hugo serve -e production` 命令来开启这些特性.
+{{< /admonition >}}
+
 {{< admonition tip "关于 CDN 配置的技巧" >}}
 在 CDN 的配置中, 完整的 HTML 标签和 URL 都是支持的:

@@ -906,7 +918,7 @@ defaultContentLanguage = "zh-cn"
 {{< /admonition >}}

 {{< admonition tip >}}
-也可以使用 [文章前置参数](https://gohugo.io/content-management/multilingual/#translate-your-content) 来翻译网址.
+也可以使用 [文章前置参数](https://gohugo.io/content-management/multilingual#translate-your-content) 来翻译网址.
 {{< /admonition >}}

 ### 4.3 修改默认的翻译字符串
@@ -953,6 +965,8 @@ defaultContentLanguage = "zh-cn"
 ```

 {{< admonition note "怎样选择搜索引擎的类型?" >}}
+以下是两种搜索引擎的对比:
+
 * `lunr`: 简单, 无需同步 `index.json`, 没有 `contentLength` 的限制, 但占用带宽大且性能低 (特别是中文需要一个较大的分词依赖库)
 * `algolia`: 高性能并且占用带宽低, 但需要同步 `index.json` 且有 `contentLength` 的限制
 {{< /admonition >}}
@@ -30,7 +30,7 @@ Hugo ships with a set of predefined shortcodes that represent very common usage.

 ## figure {#figure}

-[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
+[Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)

 Example `figure` input:

@@ -55,7 +55,7 @@ The HTML looks like this:

 ## gist

-[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
+[Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)

 Example `gist` input:

@@ -75,7 +75,7 @@ The HTML looks like this:

 ## highlight

-[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
+[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)

 Example `highlight` input:

@@ -107,7 +107,7 @@ The rendered output looks like this:

 ## instagram

-[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
+[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)

 Example `instagram` input:

@@ -121,7 +121,7 @@ The rendered output looks like this:

 ## param

-[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
+[Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)

 Example `param` input:

@@ -135,11 +135,11 @@ The rendered output looks like this:

 ## ref and relref {#ref-and-relref}

-[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
+[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)

 ## tweet

-[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
+[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)

 Example `tweet` input:

@@ -153,7 +153,7 @@ The rendered output looks like this:

 ## vimeo

-[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
+[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)

 Example `vimeo` input:

@@ -167,7 +167,7 @@ The rendered output looks like this:

 ## youtube

-[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
+[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)

 Example `youtube` input:

@@ -35,7 +35,7 @@ Hugo ships with a set of predefined shortcodes that represent very common usage.

 ## figure {#figure}

-[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
+[Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)

 Example `figure` input:

@@ -60,7 +60,7 @@ The HTML looks like this:

 ## gist

-[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
+[Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)

 Example `gist` input:

@@ -80,7 +80,7 @@ The HTML looks like this:

 ## highlight

-[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
+[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)

 Example `highlight` input:

@@ -112,7 +112,7 @@ The rendered output looks like this:

 ## instagram

-[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
+[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)

 Example `instagram` input:

@@ -126,7 +126,7 @@ The rendered output looks like this:

 ## param

-[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
+[Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)

 Example `param` input:

@@ -140,11 +140,11 @@ The rendered output looks like this:

 ## ref and relref {#ref-and-relref}

-[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
+[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)

 ## tweet

-[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
+[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)

 Example `tweet` input:

@@ -158,7 +158,7 @@ The rendered output looks like this:

 ## vimeo

-[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
+[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)

 Example `vimeo` input:

@@ -172,7 +172,7 @@ The rendered output looks like this:

 ## youtube

-[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
+[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)

 Example `youtube` input:

@@ -31,7 +31,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见

 ## figure {#figure}

-[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure)
+[`figure` 的文档](https://gohugo.io/content-management/shortcodes#figure)

 一个 `figure` 示例:

@@ -56,7 +56,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见

 ## gist

-[`gist` 的文档](https://gohugo.io/content-management/shortcodes/#gist)
+[`gist` 的文档](https://gohugo.io/content-management/shortcodes#gist)

 一个 `gist` 示例:

@@ -76,7 +76,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见

 ## highlight

-[`highlight` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
+[`highlight` 的文档](https://gohugo.io/content-management/shortcodes#instagram)

 一个 `highlight` 示例:

@@ -108,7 +108,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见

 ## instagram

-[`instagram` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
+[`instagram` 的文档](https://gohugo.io/content-management/shortcodes#instagram)

 一个 `instagram` 示例:

@@ -122,7 +122,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见

 ## param

-[`param` 的文档](https://gohugo.io/content-management/shortcodes/#param)
+[`param` 的文档](https://gohugo.io/content-management/shortcodes#param)

 一个 `param` 示例:

@@ -136,11 +136,11 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见

 ## ref 和 relref {#ref-and-relref}

-[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
+[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes#ref-and-relref)

 ## tweet

-[`tweet` 的文档](https://gohugo.io/content-management/shortcodes/#tweet)
+[`tweet` 的文档](https://gohugo.io/content-management/shortcodes#tweet)

 一个 `tweet` 示例:

@@ -154,7 +154,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见

 ## vimeo

-[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes/#vimeo)
+[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes#vimeo)

 一个 `vimeo` 示例:

@@ -168,7 +168,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见

 ## youtube

-[`youtube` 的文档](https://gohugo.io/content-management/shortcodes/#youtube)
+[`youtube` 的文档](https://gohugo.io/content-management/shortcodes#youtube)

 一个 `youtube` 示例:

@@ -38,7 +38,7 @@ A few suggestions to help you get a good looking site quickly:

 {{< admonition >}}
 **Not all** of the below front matters need to be set in each of your posts.
-It is necessary only if the front matters and the `page` part in your [site configuration](../theme-documentation-basics/#site-configuration) are inconsistent.
+It is necessary only if the front matters and the `page` part in your [site configuration](../theme-documentation-basics#site-configuration) are inconsistent.
 {{< /admonition >}}

 Here is a front matter example:
@@ -92,7 +92,7 @@ comment:

 * **title**: the title for the content.
 * **subtitle**: {{< version 0.2.0 >}} the subtitle for the content.
-* **date**: the datetime assigned to this page, which is usually fetched from the `date` field in front matter, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics/#site-configuration).
+* **date**: the datetime assigned to this page, which is usually fetched from the `date` field in front matter, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics#site-configuration).
 * **lastmod**: the datetime at which the content was last modified.
 * **draft**: if `true`, the content will not be rendered unless the `--buildDrafts`/`-D` flag is passed to the `hugo` command.
 * **author**: the author for the content.
@@ -114,12 +114,12 @@ comment:
 * **fontawesome**: {{< version 0.2.0 >}} if `true`, the content will enable the [Font Awesome extended syntax](#fontawesome).
 * **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file.

-* **toc**: {{< version 0.2.0 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **share**: the same as the `params.page.share` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics/#site-configuration).
+* **toc**: {{< version 0.2.0 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **share**: the same as the `params.page.share` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics#site-configuration).

 ## 3 Content Summaries

@@ -131,9 +131,9 @@ comment:

 By default, Hugo automatically takes the first 70 words of your content as its summary.

-You may customize the summary length by setting `summaryLength` in the [site configuration](../theme-documentation-basics/#site-configuration).
+You may customize the summary length by setting `summaryLength` in the [site configuration](../theme-documentation-basics#site-configuration).

-If you are creating content in a [CJK]^(Chinese/Japanese/Korean) language and want to use Hugo’s automatic summary splitting, set `hasCJKLanguage` to `true` in your [site configuration](../theme-documentation-basics/#site-configuration).
+If you are creating content in a [CJK]^(Chinese/Japanese/Korean) language and want to use Hugo’s automatic summary splitting, set `hasCJKLanguage` to `true` in your [site configuration](../theme-documentation-basics#site-configuration).

 ### Manual Summary Splitting

@@ -184,7 +184,7 @@ This part is shown in the [emoji support page](../emoji-support/).

 **LoveIt** theme supports mathematical formulas based on [$ \KaTeX $](https://katex.org/).

-Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics/#site-configuration)
+Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration)
 and the property `math: true` of the article front matter to enable the automatic rendering of mathematical formulas.

 {{< admonition tip >}}
@@ -220,7 +220,7 @@ The rendered output looks like this:
 $ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)

 {{< admonition tip >}}
-You can add more block and inline delimiters in your [site configuration](../theme-documentation-basics/#site-configuration).
+You can add more block and inline delimiters in your [site configuration](../theme-documentation-basics#site-configuration).
 {{< /admonition >}}

 #### Copy-tex
@@ -229,7 +229,7 @@ You can add more block and inline delimiters in your [site configuration](../the

 By the extension, when selecting and copying $ \KaTeX $ rendered elements, copies their $ \LaTeX $ source to the clipboard.

-Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics/#site-configuration) to enable Copy-tex.
+Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable Copy-tex.

 Select and copy the formula rendered in the previous section, and you can find that the copied content is the LaTeX source code.

@@ -239,7 +239,7 @@ Select and copy the formula rendered in the previous section, and you can find t

 By the extension, you can write beautiful chemical equations easily in the article.

-Set the property `mhchem = true` under `[params.math]` in your [site configuration](../theme-documentation-basics/#site-configuration) to enable mhchem.
+Set the property `mhchem = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable mhchem.

 ```markdown
 $$ \ce{CO2 + C -> 2 CO} $$
@@ -43,7 +43,7 @@ A few suggestions to help you get a good looking site quickly:

 {{< admonition >}}
 **Not all** of the below front matters need to be set in each of your posts.
-It is necessary only if the front matters and the `page` part in your [site configuration](../theme-documentation-basics/#site-configuration) are inconsistent.
+It is necessary only if the front matters and the `page` part in your [site configuration](../theme-documentation-basics#site-configuration) are inconsistent.
 {{< /admonition >}}

 Here is a front matter example:
@@ -97,7 +97,7 @@ comment:

 * **title**: the title for the content.
 * **subtitle**: {{< version 0.2.0 >}} the subtitle for the content.
-* **date**: the datetime assigned to this page, which is usually fetched from the `date` field in front matter, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics/#site-configuration).
+* **date**: the datetime assigned to this page, which is usually fetched from the `date` field in front matter, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics#site-configuration).
 * **lastmod**: the datetime at which the content was last modified.
 * **draft**: if `true`, the content will not be rendered unless the `--buildDrafts`/`-D` flag is passed to the `hugo` command.
 * **author**: the author for the content.
@@ -119,12 +119,12 @@ comment:
 * **fontawesome**: {{< version 0.2.0 >}} if `true`, the content will enable the [Font Awesome extended syntax](#fontawesome).
 * **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file.

-* **toc**: {{< version 0.2.0 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **share**: the same as the `params.page.share` part in the [site configuration](../theme-documentation-basics/#site-configuration).
-* **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics/#site-configuration).
+* **toc**: {{< version 0.2.0 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **share**: the same as the `params.page.share` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics#site-configuration).

 ## 3 Content Summaries

@@ -136,9 +136,9 @@ comment:

 By default, Hugo automatically takes the first 70 words of your content as its summary.

-You may customize the summary length by setting `summaryLength` in the [site configuration](../theme-documentation-basics/#site-configuration).
+You may customize the summary length by setting `summaryLength` in the [site configuration](../theme-documentation-basics#site-configuration).

-If you are creating content in a [CJK]^(Chinese/Japanese/Korean) language and want to use Hugo’s automatic summary splitting, set `hasCJKLanguage` to `true` in your [site configuration](../theme-documentation-basics/#site-configuration).
+If you are creating content in a [CJK]^(Chinese/Japanese/Korean) language and want to use Hugo’s automatic summary splitting, set `hasCJKLanguage` to `true` in your [site configuration](../theme-documentation-basics#site-configuration).

 ### Manual Summary Splitting

@@ -189,7 +189,7 @@ This part is shown in the [emoji support page](../emoji-support/).

 **LoveIt** theme supports mathematical formulas based on [$ \KaTeX $](https://katex.org/).

-Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics/#site-configuration)
+Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration)
 and the property `math: true` of the article front matter to enable the automatic rendering of mathematical formulas.

 {{< admonition tip >}}
@@ -225,7 +225,7 @@ The rendered output looks like this:
 $ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)

 {{< admonition tip >}}
-You can add more block and inline delimiters in your [site configuration](../theme-documentation-basics/#site-configuration).
+You can add more block and inline delimiters in your [site configuration](../theme-documentation-basics#site-configuration).
 {{< /admonition >}}

 #### Copy-tex
@@ -234,7 +234,7 @@ You can add more block and inline delimiters in your [site configuration](../the

 By the extension, when selecting and copying $ \KaTeX $ rendered elements, copies their $ \LaTeX $ source to the clipboard.

-Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics/#site-configuration) to enable Copy-tex.
+Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable Copy-tex.

 Select and copy the formula rendered in the previous section, and you can find that the copied content is the LaTeX source code.

@@ -244,7 +244,7 @@ Select and copy the formula rendered in the previous section, and you can find t

 By the extension, you can write beautiful chemical equations easily in the article.

-Set the property `mhchem = true` under `[params.math]` in your [site configuration](../theme-documentation-basics/#site-configuration) to enable mhchem.
+Set the property `mhchem = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable mhchem.

 ```markdown
 $$ \ce{CO2 + C -> 2 CO} $$
@@ -38,7 +38,7 @@ math:

 {{< admonition >}}
 **不是所有**的以下前置参数都必须在你的每篇文章中设置.
-只有在文章的参数和你的 [网站设置](../theme-documentation-basics/#site-configuration) 中的 `page` 部分不一致时才有必要这么做.
+只有在文章的参数和你的 [网站设置](../theme-documentation-basics#site-configuration) 中的 `page` 部分不一致时才有必要这么做.
 {{< /admonition >}}

 这是一个前置参数例子:
@@ -92,7 +92,7 @@ comment:

 * **title**: 文章标题.
 * **subtitle**: {{< version 0.2.0 >}} 文章副标题.
-* **date**: 这篇文章创建的日期时间. 它通常是从文章的前置参数中的 `date` 字段获取的, 但是也可以在 [网站配置](../theme-documentation-basics/#site-configuration) 中设置.
+* **date**: 这篇文章创建的日期时间. 它通常是从文章的前置参数中的 `date` 字段获取的, 但是也可以在 [网站配置](../theme-documentation-basics#site-configuration) 中设置.
 * **lastmod**: 上次修改内容的日期时间.
 * **draft**: 如果设为 `true`, 除非 `hugo` 命令使用了 `--buildDrafts`/`-D` 参数, 这篇文章不会被渲染.
 * **author**: 文章作者.
@@ -114,12 +114,12 @@ comment:
 * **fontawesome**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章会使用 [Font Awesome 扩展语法](#fontawesome).
 * **linkToMarkdown**: 如果设为 `true`, 内容的页脚将显示指向原始 Markdown 文件的链接.

-* **toc**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.page.toc` 部分相同.
-* **code**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.page.code` 部分相同.
-* **math**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.page.math` 部分相同.
-* **mapbox**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.page.mapbox` 部分相同.
-* **share**: 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.page.share` 部分相同.
-* **comment**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.page.comment` 部分相同.
+* **toc**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.toc` 部分相同.
+* **code**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.code` 部分相同.
+* **math**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.math` 部分相同.
+* **mapbox**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.mapbox` 部分相同.
+* **share**: 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.share` 部分相同.
+* **comment**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.comment` 部分相同.

 ## 3 内容摘要

@@ -131,9 +131,9 @@ comment:

 默认情况下, Hugo 自动将内容的前 70 个单词作为摘要.

-你可以通过在 [网站配置](../theme-documentation-basics/#site-configuration) 中设置 `summaryLength` 来自定义摘要长度.
+你可以通过在 [网站配置](../theme-documentation-basics#site-configuration) 中设置 `summaryLength` 来自定义摘要长度.

-如果您要使用 [CJK]^(中文/日语/韩语) 语言创建内容, 并且想使用 Hugo 的自动摘要拆分功能，请在 [网站配置](../theme-documentation-basics/#site-configuration) 中将 `hasCJKLanguage` 设置为 `true`.
+如果您要使用 [CJK]^(中文/日语/韩语) 语言创建内容, 并且想使用 Hugo 的自动摘要拆分功能，请在 [网站配置](../theme-documentation-basics#site-configuration) 中将 `hasCJKLanguage` 设置为 `true`.

 ### 手动摘要拆分

@@ -184,7 +184,7 @@ comment:

 **LoveIt** 基于 [$ \KaTeX $](https://katex.org/) 提供数学公式的支持.

-在你的 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `[params.math]` 下面设置属性 `enable = true`,
+在你的 [网站配置](../theme-documentation-basics#site-configuration) 中的 `[params.math]` 下面设置属性 `enable = true`,
 并在文章的前置参数中设置属性 `math: true`来启用数学公式的自动渲染.

 {{< admonition tip >}}
@@ -220,7 +220,7 @@ $ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^
 $ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)

 {{< admonition tip >}}
-你可以在 [网站配置](../theme-documentation-basics/#site-configuration) 中自定义公式块和行内公式的分割符.
+你可以在 [网站配置](../theme-documentation-basics#site-configuration) 中自定义公式块和行内公式的分割符.
 {{< /admonition >}}

 #### Copy-tex
@@ -229,7 +229,7 @@ $ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^

 通过这个扩展, 在选择并复制 $ \KaTeX $ 渲染的公式时, 会将其 $ \LaTeX $ 源代码复制到剪贴板.

-在你的 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `[params.math]` 下面设置属性 `copyTex = true` 来启用 Copy-tex.
+在你的 [网站配置](../theme-documentation-basics#site-configuration) 中的 `[params.math]` 下面设置属性 `copyTex = true` 来启用 Copy-tex.

 选择并复制上一节中渲染的公式, 可以发现复制的内容为 LaTeX 源代码.

@@ -239,7 +239,7 @@ $ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^

 通过这个扩展, 你可以在文章中轻松编写漂亮的化学方程式.

-在你的 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `[params.math]` 下面设置属性 `mhchem = true` 来启用 mhchem.
+在你的 [网站配置](../theme-documentation-basics#site-configuration) 中的 `[params.math]` 下面设置属性 `mhchem = true` 来启用 mhchem.

 ```markdown
 $$ \ce{CO2 + C -> 2 CO} $$
@@ -52,7 +52,7 @@ This is a **right-aligned** paragraph.

 {{< version 0.2.0 >}}

-`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax/#links). `link` shortcode can provide some other features and can be used in code blocks.
+`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax#links). `link` shortcode can provide some other features and can be used in code blocks.

 The `link` shortcode has the following named parameters:

@@ -116,7 +116,7 @@ The rendered output looks like this (hover over the link, there should be a tool

 {{< version 0.2.0 changed >}}

-`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
+`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).

 The `image` shortcode has the following named parameters:

@@ -246,25 +246,25 @@ The `admonition` shortcode has the following named parameters:

    Title of the `admonition` banner, default value is the value of **type** parameter.

-* **details** *[optional]* (**third** positional parameter)
+* **open** *[optional]* (**third** positional parameter) {{< version 0.2.0 changed >}}

-    Whether the content will be expandable/collapsible, default value is `false`.
+    Whether the content will be expandable by default, default value is `true`.

 Example `admonition` input:

 ```markdown
-{{</* admonition type=tip title="This is a tip" details=true */>}}
+{{</* admonition type=tip title="This is a tip" open=false */>}}
 A **tip** banner
 {{</* /admonition */>}}
 Or
-{{</* admonition tip "This is a tip" true */>}}
+{{</* admonition tip "This is a tip" false */>}}
 A **tip** banner
 {{</* /admonition */>}}
 ```

 The rendered output looks like this:

-{{< admonition tip "This is a tip" true >}}
+{{< admonition tip "This is a tip" false >}}
 A **tip** banner
 {{< /admonition >}}

@@ -930,27 +930,27 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:

 * **light-style** *[optional]* (**fifth** positional parameter)

-    Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **dark-style** *[optional]* (**sixth** positional parameter)

-    Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **navigation** *[optional]*

-    Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **geolocate** *[optional]*

-    Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **scale** *[optional]*

-    Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **fullscreen** *[optional]*

-    Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **width** *[optional]*

@@ -57,7 +57,7 @@ This is a **right-aligned** paragraph.

 {{< version 0.2.0 >}}

-`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax/#links). `link` shortcode can provide some other features and can be used in code blocks.
+`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax#links). `link` shortcode can provide some other features and can be used in code blocks.

 The `link` shortcode has the following named parameters:

@@ -121,7 +121,7 @@ The rendered output looks like this (hover over the link, there should be a tool

 {{< version 0.2.0 changed >}}

-`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
+`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).

 The `image` shortcode has the following named parameters:

@@ -251,25 +251,25 @@ The `admonition` shortcode has the following named parameters:

    Title of the `admonition` banner, default value is the value of **type** parameter.

-* **details** *[optional]* (**third** positional parameter)
+* **open** *[optional]* (**third** positional parameter) {{< version 0.2.0 changed >}}

-    Whether the content will be expandable/collapsible, default value is `false`.
+    Whether the content will be expandable by default, default value is `true`.

 Example `admonition` input:

 ```markdown
-{{</* admonition type=tip title="This is a tip" details=true */>}}
+{{</* admonition type=tip title="This is a tip" open=false */>}}
 A **tip** banner
 {{</* /admonition */>}}
 Or
-{{</* admonition tip "This is a tip" true */>}}
+{{</* admonition tip "This is a tip" false */>}}
 A **tip** banner
 {{</* /admonition */>}}
 ```

 The rendered output looks like this:

-{{< admonition tip "This is a tip" true >}}
+{{< admonition tip "This is a tip" false >}}
 A **tip** banner
 {{< /admonition >}}

@@ -935,27 +935,27 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:

 * **light-style** *[optional]* (**fifth** positional parameter)

-    Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **dark-style** *[optional]* (**sixth** positional parameter)

-    Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **navigation** *[optional]*

-    Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **geolocate** *[optional]*

-    Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **scale** *[optional]*

-    Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **fullscreen** *[optional]*

-    Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
+    Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).

 * **width** *[optional]*

@@ -54,7 +54,7 @@ This is a **right-aligned** paragraph.

 {{< version 0.2.0 >}}

-`link` shortcode 是 [Markdown 链接语法](../basic-markdown-syntax/#links) 的替代.
+`link` shortcode 是 [Markdown 链接语法](../basic-markdown-syntax#links) 的替代.
 `link` shortcode 可以提供一些其它的功能并且可以在代码块中使用.

 `link` shortcode 有以下命名参数:
@@ -119,7 +119,7 @@ This is a **right-aligned** paragraph.

 {{< version 0.2.0 changed >}}

-`image` shortcode 是 [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
+`image` shortcode 是 [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.

 `image` shortcode 有以下命名参数:

@@ -249,25 +249,25 @@ This is a **right-aligned** paragraph.

    `admonition` 横幅的标题, 默认值是 **type** 参数的值.

-* **details** *[可选]* (**第三个**位置参数)
+* **open** *[可选]* (**第三个**位置参数) {{< version 0.2.0 changed >}}

-    横幅内容是否可展开/可折叠, 默认值是 `false`.
+    横幅内容是否默认展开, 默认值是 `true`.

 一个 `admonition` 示例:

 ```markdown
-{{</* admonition type=tip title="This is a tip" details=true */>}}
+{{</* admonition type=tip title="This is a tip" open=false */>}}
 一个 **技巧** 横幅
 {{</* /admonition */>}}
 或者
-{{</* admonition tip "This is a tip" true */>}}
+{{</* admonition tip "This is a tip" false */>}}
 一个 **技巧** 横幅
 {{</* /admonition */>}}
 ```

 呈现的输出效果如下:

-{{< admonition tip "This is a tip" true >}}
+{{< admonition tip "This is a tip" false >}}
 一个 **技巧** 横幅
 {{< /admonition >}}

@@ -933,27 +933,27 @@ data = [

 * **light-style** *[可选]* (**第五个**位置参数)

-    浅色主题的地图样式, 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
+    浅色主题的地图样式, 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.

 * **dark-style** *[可选]* (**第六个**位置参数)

-    深色主题的地图样式, 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
+    深色主题的地图样式, 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.

 * **navigation** *[可选]*

-    是否添加 [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
+    是否添加 [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.

 * **geolocate** *[可选]*

-    是否添加 [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
+    是否添加 [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.

 * **scale** *[可选]*

-    是否添加 [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
+    是否添加 [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.

 * **fullscreen** *[可选]*

-   是否添加 [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
+   是否添加 [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.

 * **width** *[可选]*

@@ -1,10 +1,12 @@
 {{- $version := "0.2.X" -}}

 {{- /* LoveIt theme version detection */ -}}
-{{- if not .Site.Params.version -}}
-    {{- errorf "\n\nYou haven't configured the LoveIt version param correctly yet. See https://hugoloveit.com/theme-documentation-basics/#basic-configuration \n你还没有正确配置 LoveIt 的版本参数 参考 https://hugoloveit.com/zh-cn/theme-documentation-basics/#basic-configuration \n" -}}
-{{- else if ne .Site.Params.version $version -}}
-    {{- errorf (printf "\n\n%s -> %s:\nYou have an incompatible update. See https://github.com/dillonzq/LoveIt/releases \n你进行了一次不兼容的更新 参考 https://github.com/dillonzq/LoveIt/releases \n" .Site.Params.version $version) -}}
+{{- if eq .Site .Sites.First -}}
+    {{- if not .Site.Params.version -}}
+        {{- errorf "Configuration Error 配置文件错误\n\nYou haven't configured the LoveIt version param correctly yet. See https://hugoloveit.com/theme-documentation-basics/#basic-configuration\n你还没有正确配置 LoveIt 的版本参数. 参考 https://hugoloveit.com/zh-cn/theme-documentation-basics/#basic-configuration\n" -}}
+    {{- else if ne .Site.Params.version $version -}}
+        {{- errorf (printf "Compatibility Error 兼容性错误\n\n%s -> %s:\nYou have an incompatible update. See https://github.com/dillonzq/LoveIt/releases\n你进行了一次不兼容的更新. 参考 https://github.com/dillonzq/LoveIt/releases\n" .Site.Params.version $version) -}}
+    {{- end -}}
 {{- end -}}

 {{- $params := .Params | merge .Site.Params.page -}}
@@ -15,6 +17,8 @@
    {{- .Scratch.Set "fingerprint" .Site.Params.fingerprint -}}
    {{- .Scratch.Set "analytics" .Site.Params.analytics -}}
    {{- .Scratch.Set "comment" $params.comment -}}
+{{- else if eq .Site .Sites.First -}}
+    {{- warnf "\n\nCurrent environment is \"development\". The \"comment system\", \"CDN\" and \"fingerprint\" will be disabled.\n当前运行环境是 \"development\". \"评论系统\", \"CDN\" 和 \"fingerprint\" 不会启用.\n" -}}
 {{- end -}}

 {{- .Scratch.Set "params" $params -}}
@@ -40,7 +44,7 @@
    <body>
        {{- /* Check theme isDark before body rendering */ -}}
        {{- $theme := .Site.Params.defaulttheme -}}
-        <script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('{{ $theme }}' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '{{ $theme }}' === 'dark')) && document.body.classList.add('dark');</script>
+        <script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('{{ $theme }}' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '{{ $theme }}' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div>

@@ -122,7 +122,7 @@
 {{- if (.Scratch.Get "this").mermaid -}}
    {{- $source := $cdn.mermaidJS | default "lib/mermaid/mermaid.min.js" -}}
    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
-    {{- $options := dict "targetPath" "lib/mermaid/mermaid.min.css" -}}
+    {{- $options := dict "targetPath" "lib/mermaid/mermaid.min.css" "enableSourceMap" true -}}
    {{- dict "source" "lib/mermaid/mermaid.scss" "toCSS" $options "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/stylesheet.html" -}}
 {{- end -}}

@@ -149,7 +149,7 @@
    {{- /* APlayer */ -}}
    {{- $source := $cdn.aplayerCSS | default "lib/aplayer/APlayer.min.css" -}}
    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/stylesheet.html" -}}
-    {{- $options := dict "targetPath" "lib/aplayer/dark.min.css" -}}
+    {{- $options := dict "targetPath" "lib/aplayer/dark.min.css" "enableSourceMap" true -}}
    {{- dict "source" "lib/aplayer/dark.scss" "toCSS" $options "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/stylesheet.html" -}}
    {{- $source := $cdn.aplayerJS | default "lib/aplayer/APlayer.min.js" -}}
    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
@@ -172,7 +172,7 @@
 </script>

 {{- /* Polyfill.io */ -}}
-{{- partial "plugin/script.html" (dict "source" "https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.closest%2CrequestAnimationFrame%2CCustomEvent%2CPromise%2CObject.entries%2CObject.assign%2CObject.values%2Cfetch%2CElement.prototype.after") -}}
+{{- partial "plugin/script.html" (dict "source" "https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.closest%2CrequestAnimationFrame%2CCustomEvent%2CPromise%2CObject.entries%2CObject.assign%2CObject.values%2Cfetch%2CElement.prototype.after%2CArray.prototype.fill%2CIntersectionObserver%2CArray.from%2CArray.prototype.find%2CMath.sign") -}}

 {{- range (.Scratch.Get "this").script -}}
    {{- partial "plugin/script.html" . -}}
@@ -31,6 +31,8 @@
        {{- /* Valine Comment System */ -}}
        {{- if $comment.valine.enable -}}
            <div id="valine" class="comment"></div>
+            {{- $options := dict "targetPath" "lib/valine/valine.min.css" -}}
+            {{- dict "source" "lib/valine/valine.scss" "toCSS" $options | dict "scratch" $.Scratch "data" | partial "scratch/stylesheet.html" -}}
            {{- $source := $cdn.valineJS | default "lib/valine/Valine.min.js" -}}
            {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
            {{- $commentConfig = dict "el" "#valine" "appId" $comment.valine.appId "appKey" $comment.valine.appKey "lang" ($comment.valine.lang | default (T "valineLang")) "visitor" $comment.valine.visitor "recordIP" $comment.valine.recordIP "placeholder" ($comment.valine.placeholder | default (T "valinePlaceholder")) | dict "valine" | merge $commentConfig -}}
@@ -37,7 +37,7 @@
 {{- /* style.min.css */ -}}
 {{- $stylesheet := dict "source" "css/style.template.scss" "fingerprint" $fingerprint -}}
 {{- $targetPath := cond .Site.IsMultiLingual (printf "css/style.%s.min.css" .Language.Lang) "css/style.min.css" -}}
-{{- $options := dict "targetPath" $targetPath "includePaths" (slice "config/css") -}}
+{{- $options := dict "targetPath" $targetPath "includePaths" (slice "config/css") "enableSourceMap" true -}}
 {{- $stylesheet = dict "template" "style.scss" "context" . "toCSS" $options | merge $stylesheet -}}
 {{- partial "plugin/stylesheet.html" $stylesheet -}}

@@ -9,7 +9,7 @@
            {{- $res = $res | resources.ExecuteAsTemplate . $.context -}}
        {{- end -}}
        {{- with .toCSS -}}
-            {{- $options := . | merge (dict "outputStyle" "compressed" "enableSourceMap" true) -}}
+            {{- $options := . | merge (dict "outputStyle" "compressed") -}}
            {{- $res = $res | toCSS $options -}}
        {{- end -}}
        {{- if .minify -}}
@@ -70,7 +70,7 @@
            <div class="details toc" id="toc-static">
                <div class="details-summary toc-title">
                    <span>{{ T "contents" }}</span>
-                    <span><i class="details-icon fas fa-angle-down"></i></span>
+                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static">
                    {{- dict "content" .TableOfContents "ruby" $params.ruby "fraction" $params.fraction "fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
@@ -1,59 +1,41 @@
 {{- $inner := .Inner | .Page.RenderString -}}

-{{- $iconMap := dict "note" "fas fa-pencil-alt" -}}
-{{- $iconMap  = dict "abstract" "fas fa-list-ul" | merge $iconMap -}}
-{{- $iconMap  = dict "info" "fas fa-info-circle" | merge $iconMap -}}
-{{- $iconMap  = dict "tip" "fas fa-lightbulb" | merge $iconMap -}}
-{{- $iconMap  = dict "success" "fas fa-check-circle" | merge $iconMap -}}
-{{- $iconMap  = dict "question" "fas fa-question-circle" | merge $iconMap -}}
-{{- $iconMap  = dict "warning" "fas fa-exclamation-triangle" | merge $iconMap -}}
-{{- $iconMap  = dict "failure" "fas fa-times-circle" | merge $iconMap -}}
-{{- $iconMap  = dict "danger" "fas fa-skull-crossbones" | merge $iconMap -}}
-{{- $iconMap  = dict "bug" "fas fa-bug" | merge $iconMap -}}
-{{- $iconMap  = dict "example" "fas fa-list-ol" | merge $iconMap -}}
-{{- $iconMap  = dict "quote" "fas fa-quote-right" | merge $iconMap -}}
-{{- $iconDetails := "fas fa-angle-down" -}}
+{{- $iconMap := dict "note" "fas fa-pencil-alt fa-fw" -}}
+{{- $iconMap  = dict "abstract" "fas fa-list-ul fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "info" "fas fa-info-circle fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "tip" "fas fa-lightbulb fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "success" "fas fa-check-circle fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "question" "fas fa-question-circle fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "warning" "fas fa-exclamation-triangle fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "failure" "fas fa-times-circle fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "danger" "fas fa-skull-crossbones fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "bug" "fas fa-bug fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "example" "fas fa-list-ol fa-fw" | merge $iconMap -}}
+{{- $iconMap  = dict "quote" "fas fa-quote-right fa-fw" | merge $iconMap -}}
+{{- $iconDetails := "fas fa-angle-right fa-fw" -}}

 {{- if .IsNamedParams -}}
    {{- $type := .Get "type" | default "note" -}}
-    {{- if .Get "details" -}}
-        <div class="details admonition {{ $type }}">
-            <div class="details-summary admonition-title">
-                <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
-            </div>
-            <div class="details-content">
-                <div class="admonition-content">
-                    {{- $inner -}}
-                </div>
-            </div>
+    <div class="details admonition {{ $type }}{{ if .Get `open` | ne false }} open{{ end }}">
+        <div class="details-summary admonition-title">
+            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
        </div>
-    {{- else -}}
-        <div class="admonition {{ $type }}">
-            <div class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}</div>
+        <div class="details-content">
            <div class="admonition-content">
                {{- $inner -}}
            </div>
        </div>
-    {{- end -}}
+    </div>
 {{- else -}}
    {{- $type := .Get 0 | default "note" -}}
-    {{- if .Get 2 -}}
-        <div class="details admonition {{ $type }}">
-            <div class="details-summary admonition-title">
-                <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
-            </div>
-            <div class="details-content">
-                <div class="admonition-content">
-                    {{- $inner -}}
-                </div>
-            </div>
+    <div class="details admonition {{ $type }}{{ if .Get 2 | ne false }} open{{ end }}">
+        <div class="details-summary admonition-title">
+            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
        </div>
-    {{- else -}}
-        <div class="admonition {{ $type }}">
-            <div class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}</div>
+        <div class="details-content">
            <div class="admonition-content">
                {{- $inner -}}
            </div>
        </div>
-    {{- end -}}
+    </div>
 {{- end -}}
@@ -2,7 +2,7 @@
 {{- $id := partial "function/id.html" (dict "content" $content) -}}
 {{- $tag := .Get 1 | default "div" -}}
 {{- $style := .Get 0 | printf "#%s{%s}" $id -}}
-{{- $res := resources.FromString "css/shortcode/style.scss" $style -}}
-{{- $res = $res | toCSS (dict "targetPath" "css/shortcode/style.css" "outputStyle" "compressed") -}}
+{{- $res := resources.FromString (printf "temp/%s.scss" $id) $style -}}
+{{- $res = $res | toCSS (dict "targetPath" (printf "temp/%s.css" $id)) -}}
 {{- printf `<%s id="%s">%s</%s>` $tag $id $content $tag | safeHTML -}}
 <style>{{ $res.Content | safeCSS }}</style>
@@ -1 +0,0 @@
-#id-9a5e4c img{height:1.25rem}
@@ -1 +0,0 @@
-{"Target":"css/shortcode/style.css","MediaType":"text/css","Data":{}}
@@ -1,3 +1,3 @@
-.dark .aplayer{background:#212121}.dark .aplayer.aplayer-withlist .aplayer-info{border-bottom-color:#5c5c5c}.dark .aplayer.aplayer-fixed .aplayer-list{border-color:#5c5c5c}.dark .aplayer .aplayer-body{background-color:#212121}.dark .aplayer .aplayer-info{border-top-color:#212121}.dark .aplayer .aplayer-info .aplayer-music .aplayer-title{color:#fff}.dark .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#fff}.dark .aplayer .aplayer-info .aplayer-controller .aplayer-time{color:#eee}.dark .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#eee}.dark .aplayer .aplayer-list{background-color:#212121}.dark .aplayer .aplayer-list::-webkit-scrollbar-thumb{background-color:#999}.dark .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#bbb}.dark .aplayer .aplayer-list li{color:#fff;border-top-color:#666}.dark .aplayer .aplayer-list li:hover{background:#4e4e4e}.dark .aplayer .aplayer-list li.aplayer-list-light{background:#6c6c6c}.dark .aplayer .aplayer-list li .aplayer-list-index{color:#ddd}.dark .aplayer .aplayer-list li .aplayer-list-author{color:#ddd}.dark .aplayer .aplayer-lrc{text-shadow:-1px -1px 0 #666}.dark .aplayer .aplayer-lrc:before{background:-moz-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:-webkit-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:linear-gradient(to bottom, #212121 0%, rgba(33,33,33,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 )}.dark .aplayer .aplayer-lrc:after{background:-moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:-webkit-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:linear-gradient(to bottom, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 )}.dark .aplayer .aplayer-lrc p{color:#fff}.dark .aplayer .aplayer-miniswitcher{background:#484848}.dark .aplayer .aplayer-miniswitcher .aplayer-icon path{fill:#eee}
+[theme=dark] .aplayer{background:#212121}[theme=dark] .aplayer.aplayer-withlist .aplayer-info{border-bottom-color:#5c5c5c}[theme=dark] .aplayer.aplayer-fixed .aplayer-list{border-color:#5c5c5c}[theme=dark] .aplayer .aplayer-body{background-color:#212121}[theme=dark] .aplayer .aplayer-info{border-top-color:#212121}[theme=dark] .aplayer .aplayer-info .aplayer-music .aplayer-title{color:#fff}[theme=dark] .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#fff}[theme=dark] .aplayer .aplayer-info .aplayer-controller .aplayer-time{color:#eee}[theme=dark] .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#eee}[theme=dark] .aplayer .aplayer-list{background-color:#212121}[theme=dark] .aplayer .aplayer-list::-webkit-scrollbar-thumb{background-color:#999}[theme=dark] .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#bbb}[theme=dark] .aplayer .aplayer-list li{color:#fff;border-top-color:#666}[theme=dark] .aplayer .aplayer-list li:hover{background:#4e4e4e}[theme=dark] .aplayer .aplayer-list li.aplayer-list-light{background:#6c6c6c}[theme=dark] .aplayer .aplayer-list li .aplayer-list-index{color:#ddd}[theme=dark] .aplayer .aplayer-list li .aplayer-list-author{color:#ddd}[theme=dark] .aplayer .aplayer-lrc{text-shadow:-1px -1px 0 #666}[theme=dark] .aplayer .aplayer-lrc:before{background:-moz-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:-webkit-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:linear-gradient(to bottom, #212121 0%, rgba(33,33,33,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 )}[theme=dark] .aplayer .aplayer-lrc:after{background:-moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:-webkit-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:linear-gradient(to bottom, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 )}[theme=dark] .aplayer .aplayer-lrc p{color:#fff}[theme=dark] .aplayer .aplayer-miniswitcher{background:#484848}[theme=dark] .aplayer .aplayer-miniswitcher .aplayer-icon path{fill:#eee}

 /*# sourceMappingURL=dark.min.css.map */
@@ -0,0 +1 @@
+.v[data-class=v] .vwrap,.v[data-class=v] .vwrap .vheader .vinput,.v[data-class=v] .vcards .vcard .vh{border-color:#f0f0f0}[theme=dark] .v[data-class=v] .vwrap,[theme=dark] .v[data-class=v] .vwrap .vheader .vinput,[theme=dark] .v[data-class=v] .vcards .vcard .vh{border-color:#363636}
@@ -0,0 +1 @@
+{"Target":"lib/valine/valine.min.css","MediaType":"text/css","Data":{}}
@@ -32,7 +32,7 @@ class Theme {
    constructor() {
        this.config = window.config;
        this.data = this.config.data;
-        this.isDark = document.body.classList.contains('dark');
+        this.isDark = document.body.getAttribute('theme') === 'dark';
        this.util = new Util();
        this.newScrollTop = this.util.getScrollTop();
        this.oldScrollTop = this.newScrollTop;
@@ -80,7 +80,8 @@ class Theme {
    initSwitchTheme() {
        this.util.forEach(document.getElementsByClassName('theme-switch'), $themeSwitch => {
            $themeSwitch.addEventListener('click', () => {
-                document.body.classList.toggle('dark');
+                if (document.body.getAttribute('theme') === 'dark') document.body.setAttribute('theme', 'light');
+                else document.body.setAttribute('theme', 'dark');
                this.isDark = !this.isDark;
                window.localStorage && localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
                for (let event of this.switchThemeEventSet) event();
				`@@ -1 +0,0 @@`
				`{"Target":"css/shortcode/style.css","MediaType":"text/css","Data":{}}`
				`@@ -0,0 +1 @@`
				`.v[data-class=v] .vwrap,.v[data-class=v] .vwrap .vheader .vinput,.v[data-class=v] .vcards .vcard .vh{border-color:#f0f0f0}[theme=dark] .v[data-class=v] .vwrap,[theme=dark] .v[data-class=v] .vwrap .vheader .vinput,[theme=dark] .v[data-class=v] .vcards .vcard .vh{border-color:#363636}`
				`@@ -0,0 +1 @@`
				`{"Target":"lib/valine/valine.min.css","MediaType":"text/css","Data":{}}`