feat: fontawesome, admonition and faster

assets/css/_core/base.scss → assets/css/_core/_base.scss

@@ -9,34 +9,36 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
 
 html {
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    &::-webkit-scrollbar-thumb {
-      height: 40px;
-      background-color: #eee;
-      border-radius: 16px;
-      &:hover {
-        background-color: #ddd;
-      }
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
+
+  /* scrollbar, only support webkit */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: 40px;
+    background-color: #eee;
+    border-radius: 16px;
+
+    &:hover {
+      background-color: #C2C2C2;
     }
+  }
 }
 
 ::selection {
   background: rgba(0, 149, 255, 0.1);
 }
 
-html {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
-}
-
 body {
-  font-size: 11pt;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 2em;
-  background-color: $light-background-color;
-  color: $light-font-color;
+  line-height: 26px;
+  background-color: $global-background-color;
+  color: $global-font-color;
+
   &:before {
     content: "";
     background-repeat: no-repeat;
@@ -57,73 +59,25 @@ body {
   }
 
   &.dark-theme {
-    background-color: $dark-background-color;
-    color: $dark-font-color;
+    color: $global-font-color-dark;
+    background-color: $global-background-color-dark;
   }
 }
 
 a {
-  color: $light-global-link-color;
-  text-decoration: none;
-  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
-  &:hover {
-    color: $light-global-link-hover-color;
-    text-decoration: none;
-    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
-  }
-
-  .dark-theme & {
-  color: $dark-global-link-color;
+  color: $global-link-color;
   text-decoration: none;
   transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
 
   &:hover {
-    color: $dark-global-link-hover-color;
-    text-decoration: none;
-    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
-  }
+    color: $global-link-hover-color;
   }
-}
-
-blockquote {
-  font-size: 1rem;
-  display: block;
-  border-width: 1px 0;
-  border-style: solid;
-  border-color: $light-border-color;
-  padding: 1.5em 1.2em 0.5em 1.2em;
-  margin: 0 0 2em 0;
-  position: relative;
-
-  &:before {
-    content: '\201C';
-    position: absolute;
-    top: 0em;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 3rem;
-    height: 2rem;
-    font: 6em/1.08em 'PT Sans', sans-serif;
-    color: $light-post-link-color;
-    text-align: center;
 
-    .dark-theme & {
-      color: $dark-post-link-color;
-    }
-  }
-  &:after {
-    content: "#blockquote" attr(cite);
-    display: block;
-    text-align: right;
-    font-size: 0.875em;
-    color: $light-post-link-color;
+  .dark-theme & {
+    color: $global-link-color-dark;
 
-    .dark-theme & {
-      color: $dark-post-link-color;
+    &:hover {
+      color: $global-link-hover-color-dark;
     }
   }
-
-  .dark-theme & {
-    border-color: $dark-border-color;
-  }
 }

assets/css/_core/layout.scss → assets/css/_core/_layout.scss

@@ -3,7 +3,7 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 98vh;
   width: 100%;
 }
 
@@ -24,17 +24,18 @@
 .main {
   flex: 1 0 auto;
 }
-.container{
+
+.container {
   padding-left: 1em;
   padding-right: 1em;
 }
 
 .footer {
-  height: 4rem;
+  height: 2rem;
   width: 100%;
   text-align: center;
-  line-height: 4rem;
-  padding-top: 2em;
+  line-height: 1.2rem;
+  padding-top: 1.6em;
 }
 
 .notfound {

assets/css/_core/media.scss → assets/css/_core/_media.scss

@@ -8,27 +8,28 @@
     position: fixed;
     width: 100%;
     z-index: 100;
-    transition: all 0.6s ease 0s;
+    transition: all 0.3s ease 0s;
 
     .container {
       padding: 0;
       margin: 0;
-      height: 5em;
-      line-height: 5.5em;
-      background: $light-background-color;
+      height: 4.5em;
+      line-height: 4.5em;
+      background: $global-background-color;
 
       .navbar-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
+        font-size: 18px;
         padding-right: 1em;
         padding-left: 1em;
         box-sizing: border-box;
 
         .menu-toggle {
           cursor: pointer;
-          line-height: 5.5em;
+          line-height: 4.5em;
 
           span {
             display: block;
@@ -38,12 +39,12 @@
             -webkit-border-radius: 3px;
             -moz-border-radius: 3px;
             border-radius: 3px;
-            -webkit-transition: .25s margin .25s, .25s transform;
-            -moz-transition: .25s margin .25s, .25s transform;
-            transition: .25s margin .25s, .25s transform;
+            -webkit-transition: .2s margin .2s, .2s transform;
+            -moz-transition: .2s margin .2s, .2s transform;
+            transition: .2s margin .2s, .2s transform;
 
             .dark-theme & {
-              background: $dark-font-color;
+              background: $global-font-color-dark;
             }
           }
 
@@ -57,9 +58,9 @@
 
           &.active {
             span {
-              -webkit-transition: .25s margin, .25s transform .25s;
-              -moz-transition: .25s margin, .25s transform .25s;
-              transition: .25s margin, .25s transform .25s;
+              -webkit-transition: .2s margin, .2s transform .2s;
+              -moz-transition: .2s margin, .2s transform .2s;
+              transition: .2s margin, .2s transform .2s;
             }
 
             span:nth-child(1) {
@@ -85,10 +86,8 @@
 
       .menu {
         text-align: center;
-        background: #ffffff;
-        border-top: 2px solid #000000;
-        padding-top: 1em;
-        padding-bottom: 1em;
+        background: $global-background-color;
+        border-top: 2px solid $global-font-color;
         display: none;
         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
 
@@ -102,13 +101,13 @@
         }
 
         .dark-theme & {
-          background: $dark-background-color;
-          border-top: 2px solid $dark-font-secondary-color;
+          background: $global-background-color-dark;
+          border-top: 2px solid $global-font-color-dark;
         }
       }
 
       .dark-theme & {
-        background: $dark-background-color !important;
+        background: $global-background-color-dark !important;
       }
     }
   }

assets/css/_iconfont.scss

-@font-face {font-family: "iconfont";
-  src: url('../fonts/iconfont/iconfont.eot'); /* IE9 */
-  src: url('../fonts/iconfont/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/iconfont/iconfont.woff2') format('woff2'),
-  url('../fonts/iconfont/iconfont.woff') format('woff'),
-  url('../fonts/iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('../fonts/iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-weibo:before {
-  content: "\e6c4";
-}
-
-.icon-codepen:before {
-  content: "\ea79";
-}
-
-.icon-spotify:before {
-  content: "\ebf4";
-}
-
-.icon-reddit:before {
-  content: "\e761";
-}
-
-.icon-dajiantou:before {
-  content: "\e642";
-}
-
-.icon-xiaojiantou:before {
-  content: "\e666";
-}
-
-.icon-deviantart:before {
-  content: "\e6c6";
-}
-
-.icon-dribbble:before {
-  content: "\e6d8";
-}
-
-.icon-zhihu:before {
-  content: "\e6ba";
-}
-
-.icon-wordpress:before {
-  content: "\e848";
-}
-
-.icon-twitter:before {
-  content: "\eb2a";
-}
-
-.icon-whatsapp:before {
-  content: "\eb92";
-}
-
-.icon-facebook:before {
-  content: "\e638";
-}
-
-.icon-gitlab:before {
-  content: "\e719";
-}
-
-.icon-medium:before {
-  content: "\e783";
-}
-
-.icon-steam:before {
-  content: "\e811";
-}
-
-.icon-jsfiddle:before {
-  content: "\e752";
-}
-
-.icon-soundcloud:before {
-  content: "\e81d";
-}
-
-.icon-ycombinator:before {
-  content: "\eb32";
-}
-
-.icon-linkedin:before {
-  content: "\e696";
-}
-
-.icon-pinterest:before {
-  content: "\e697";
-}
-
-.icon-500px:before {
-  content: "\e607";
-}
-
-.icon-bitbucket:before {
-  content: "\e645";
-}
-
-.icon-instagram:before {
-  content: "\e6b6";
-}
-
-.icon-slideshare:before {
-  content: "\e6fd";
-}
-
-.icon-twitch:before {
-  content: "\e72a";
-}
-
-.icon-vine:before {
-  content: "\e735";
-}
-
-.icon-xing:before {
-  content: "\e741";
-}
-
-.icon-snapchat:before {
-  content: "\e8b2";
-}
-
-.icon-douban:before {
-  content: "\e688";
-}
-
-.icon-github:before {
-  content: "\e691";
-}
-
-.icon-t:before {
-  content: "\e601";
-}
-
-.icon-mail:before {
-  content: "\e622";
-}
-
-.icon-behance:before {
-  content: "\e621";
-}
-
-.icon-POP_lastfm:before {
-  content: "\e681";
-}
-
-.icon-odnoklassniki:before {
-  content: "\e624";
-}
-
-.icon-strava:before {
-  content: "\e627";
-}
-
-.icon-goodreads:before {
-  content: "\e62a";
-}
-
-.icon-kickstarter:before {
-  content: "\e644";
-}
-
-.icon-bandcamp:before {
-  content: "\e64b";
-}
-
-.icon-flickr:before {
-  content: "\e660";
-}
-
-.icon-keybase:before {
-  content: "\e665";
-}
-
-.icon-paypal:before {
-  content: "\e667";
-}
-
-.icon-mastodon:before {
-  content: "\e94a";
-}
-
-.icon-folder:before {
-  content: "\e7d1";
-}
-
-.icon-skype:before {
-  content: "\e87d";
-}
-
-.icon-icon-tag:before {
-  content: "\e632";
-}
-
-.icon-sun:before {
-  content: "\e684";
-}
-
-.icon-timer:before {
-  content: "\e664";
-}
-
-.icon-researchgate:before {
-  content: "\e693";
-}
-
-.icon-angellist:before {
-  content: "\f163";
-}
-
-.icon-mix:before {
-  content: "\f1f5";
-}
-
-.icon-patreon:before {
-  content: "\f209";
-}
-
-.icon-quora:before {
-  content: "\f218";
-}
-
-.icon-stack-overflow:before {
-  content: "\f239";
-}
-
-.icon-telegram-plane:before {
-  content: "\f246";
-}
-
-.icon-tumblr:before {
-  content: "\f24a";
-}
-
-.icon-vk:before {
-  content: "\f25e";
-}
-
-.icon-youtube:before {
-  content: "\e765";
-}
-
-.icon-Googlescholar:before {
-  content: "\e736";
-}
-
-.icon-foursquare:before {
-  content: "\e8ed";
-}
-

assets/css/_page/home.scss → assets/css/_page/_home.scss

@@ -52,7 +52,7 @@ h2.description {
     }
   }
 
-  .iconfont {
-    font-size: 2em;
+  i {
+    font-size: 1.4em;
   }
 }

assets/css/_page/home_post.scss → assets/css/_page/_home_post.scss

@@ -28,14 +28,14 @@
           color: rgba(85, 85, 85, 0.52941) !important;
 
           .dark-theme & {
-            color: $dark-font-secondary-color !important;
+            color: $global-font-secondary-color-dark !important;
           }
 
           &:hover {
-            color: $light-font-secondary-color !important;
+            color: $global-font-secondary-color !important;
 
             .dark-theme & {
-              color: $dark-font-secondary-color !important;
+              color: $global-font-secondary-color-dark !important;
             }
           }
         }
@@ -47,14 +47,14 @@
             color: rgba(85, 85, 85, 0.52941) !important;
 
             .dark-theme & {
-              color: $dark-font-secondary-color !important;
+              color: $global-font-secondary-color-dark !important;
             }
 
             &:hover {
-              color: $light-font-secondary-color !important;
+              color: $global-font-secondary-color !important;
 
               .dark-theme & {
-                color: $dark-font-secondary-color !important;
+                color: $global-font-secondary-color-dark !important;
               }
             }
           }

assets/css/_page/post.scss → assets/css/_page/_post.scss

@@ -7,42 +7,44 @@
   margin: 0 auto;
   padding-top: 2rem;
 
-  .post-header h1 {
-    margin: 0 !important;
-  }
-
-  .post-title {
-    font-size: 2em;
-    line-height: 1.5em;
+  .post-header {
+    .post-title {
+      margin: 0 !important;
+      font-size: 2em;
+      line-height: 1.5em;
+    }
   }
 
   .post-meta {
+    font-size: 14px;
     color: rgba(85, 85, 85, 0.52941) !important;
 
+    > span {
+      display: inline-block;
+    }
+
     .dark-theme & {
-      color: $dark-font-secondary-color !important;
+      color: $global-font-secondary-color-dark !important;
     }
 
     a {
-      color: $light-post-link-color;
+      color: $post-link-color;
 
       .dark-theme & {
-        color: $dark-post-link-color;
+        color: $post-link-color-dark;
       }
 
       &:hover {
-        color: $light-post-link-hover-color;
+        color: $post-link-hover-color;
 
         .dark-theme & {
-          color: $dark-post-link-hover-color;
+          color: $post-link-hover-color-dark;
         }
       }
     }
   }
 
   .post-content {
-    padding-top: 1rem;
-
     h2,
     h3,
     h4,
@@ -55,36 +57,36 @@
     h2::before {
       content: "#";
       margin-right: 5px;
-      color: $light-post-link-color;
+      color: $post-link-color;
 
       .dark-theme & {
-        color: $dark-post-link-color;
+        color: $post-link-color-dark;
       }
     }
 
     h3::before {
       content: "|";
       margin-right: 5px;
-      color: $light-post-link-color;
+      color: $post-link-color;
 
       .dark-theme & {
-        color: $dark-post-link-color;
+        color: $post-link-color-dark;
       }
     }
 
     a {
-      color: $light-post-link-color;
+      color: $post-link-color;
 
       .dark-theme & {
-        color: $dark-post-link-color;
+        color: $post-link-color-dark;
       }
     }
 
     a:hover {
-      color: $light-post-link-hover-color;
+      color: $post-link-hover-color;
 
       .dark-theme &:hover {
-        color: $dark-post-link-hover-color;
+        color: $post-link-hover-color-dark;
         font-weight: bold;
       }
     }
@@ -145,7 +147,51 @@
       margin: 0 !important;
     }
 
-    @import "../_partial/post/code.scss";
+    blockquote {
+      font-size: 1rem;
+      display: block;
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: $global-border-color;
+      padding: 1.5em 1.2em 0.5em 1.2em;
+      margin: 0 0 2em 0;
+      position: relative;
+
+      &:before {
+        content: '\201C';
+        position: absolute;
+        top: 0em;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 3rem;
+        height: 2rem;
+        font: 6em/1.08em 'PT Sans', sans-serif;
+        color: $post-link-color;
+        text-align: center;
+
+        .dark-theme & {
+          color: $post-link-color-dark;
+        }
+      }
+      &:after {
+        content: "#blockquote" attr(cite);
+        display: block;
+        text-align: right;
+        font-size: 0.875em;
+        color: $post-link-color;
+
+        .dark-theme & {
+          color: $post-link-color-dark;
+        }
+      }
+
+      .dark-theme & {
+        border-color: $global-border-color-dark;
+      }
+    }
+
+    @import "../_partial/_post/code";
+    @import "../_partial/_post/admonition";
 
     .typeit {
       .code {
@@ -192,22 +238,6 @@
         }
       }
     }
-
-    .align-center {
-      text-align: center;
-    }
-
-    .align-right {
-      text-align: right;
-    }
-
-    .align-left {
-      text-align: left;
-    }
-
-    .float-right {
-      float: right;
-    }
   }
 
   p {
@@ -215,18 +245,18 @@
     margin: .5em 0 .5em 0;
   }
 
-  .post-copyright {
+  .post-info {
     margin-top: 5rem;
-    border-top: 1px solid $light-border-color;
-    border-bottom: 1px solid $light-border-color;
+    border-top: 1px solid $global-border-color;
+    border-bottom: 1px solid $global-border-color;
 
-    .copyright-item {
+    .post-info-item {
       margin: 5px 0;
     }
 
     .dark-theme & {
-      border-top: 1px solid $dark-border-color;
-      border-bottom: 1px solid $dark-border-color;
+      border-top: 1px solid $global-border-color-dark;
+      border-bottom: 1px solid $global-border-color-dark;
     }
   }
 
@@ -234,11 +264,9 @@
     padding: 1rem 0 1rem;
     display: flex;
     justify-content: space-between;
-
   }
 
   .post-nav {
-
     &:before,
     &:after {
       content: " ";
@@ -272,11 +300,27 @@
     }
   }
 
-  .tag:not(:last-child) a::after {
-    content: " / ";
-  }
-
   .post-comment {
     padding: 3em 0;
   }
+
+  .align-left {
+    text-align: left;
+  }
+
+  .align-center {
+    text-align: center;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+
+  .float-left {
+    float: left;
+  }
+
+  .float-right {
+    float: right;
+  }
 }

assets/css/_page/tags.scss → assets/css/_page/_tags.scss

@@ -13,19 +13,19 @@
     &:active,
     &:focus,
     &:hover {
-      color: $light-global-link-hover-color;
+      color: $global-link-hover-color;
       transform: scale(1.1);
 
       .dark-theme & {
-        color: $dark-global-link-hover-color;
+        color: $global-link-hover-color-dark;
       }
     }
 
     small {
-      color: $light-font-secondary-color;
+      color: $global-font-secondary-color;
 
       .dark-theme & {
-        color: $dark-global-link-hover-color;
+        color: $global-link-hover-color-dark;
       }
     }
   }

assets/css/_page/terms.scss → assets/css/_page/_terms.scss

@@ -41,17 +41,17 @@
     max-width: 95%;
 
     &:hover {
-      color: $light-global-link-hover-color;
+      color: $global-link-hover-color;
       background-color: transparent;
     }
 
     .dark-theme & {
-      color: $dark-global-link-color;
+      color: $global-link-color-dark;
       text-decoration: none;
       transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
 
       &:hover {
-        color: $dark-global-link-hover-color;
+        color: $global-link-hover-color-dark;
         text-decoration: none;
         transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
       }
@@ -61,10 +61,10 @@
   .archive-item-date {
     float: right;
     text-align: right;
-    color: $light-font-secondary-color;
+    color: $global-font-secondary-color;
 
     .dark-theme & {
-      color: $dark-font-secondary-color;
+      color: $global-font-secondary-color-dark;
     }
   }
 

assets/css/_partial/footer.scss → assets/css/_partial/_footer.scss

@@ -21,7 +21,7 @@
   text-shadow: 0 1px 0 #333;
   font-weight: bold;
   padding: 17px 16px;
-  border: 1px solid $light-border-color;
+  border: 1px solid $global-border-color;
   background: #222;
   &:hover {
     background: #000;
@@ -44,6 +44,6 @@
   }
 
   .dark-theme &{
-    border: 1px solid $dark-border-color;
+    border: 1px solid $global-border-color-dark;
   }
 }

assets/css/_partial/navbar.scss → assets/css/_partial/_navbar.scss

@@ -6,7 +6,6 @@
   }
 }
 
-
 .navbar .menu a {
 
   padding: 0 8px;
@@ -14,10 +13,10 @@
 
 .navbar .menu .active {
   font-weight: 900;
-  color: $light-navbar-active-color;
+  color: $navbar-active-color;
 
   .dark-theme & {
-    color: $dark-navbar-active-color;
+    color: $navbar-active-color-dark;
   }
 }
 
@@ -26,3 +25,5 @@
 
   background-color: transparent;
 }
+
+

assets/css/_partial/pagination.scss → assets/css/_partial/_pagination.scss

@@ -32,11 +32,11 @@
     }
 
     &:hover a {
-      color: $light-pagination-link-active-color;
+      color: $pagination-link-active-color;
     }
 
     .dark-theme &:hover a {
-      color: $dark-pagination-link-active-color;
+      color: $pagination-link-active-color-dark;
     }
 
     &:before,
@@ -45,14 +45,14 @@
       content: "";
       width: 0;
       height: 3px;
-      background: $light-pagination-link-active-color;
+      background: $pagination-link-active-color;
       transition: 0.3s;
       bottom: 0px;
     }
 
     .dark-theme &:before,
     .dark-theme &:after {
-      background: $dark-pagination-link-active-color;
+      background: $pagination-link-active-color-dark;
     }
 
     &:before .active,
@@ -78,11 +78,11 @@
 
     &.active {
       a {
-        color: $light-pagination-link-active-color;
+        color: $pagination-link-active-color;
       }
 
       .dark-theme & a {
-        color: $dark-pagination-link-active-color;
+        color: $pagination-link-active-color-dark;
       }
 
       &:before,

assets/css/_partial/_post/_admonition.scss

+.admonition {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
+      0 1px 5px 0 rgba(0,0,0,.12),
+      0 3px 1px -2px rgba(0,0,0,.2);
+  position: relative;
+  margin: .9765em 0;
+  padding: 0 .75rem;
+  border-left: .25rem solid #448aff;
+  border-radius: .125rem;
+  overflow: auto;
+
+  .admonition-title {
+    margin: 0 -0.75rem;
+    padding: .5rem .75rem .5rem 2.5rem;
+    border-bottom: .1rem solid rgba(68,138,255,.1);
+    background-color: rgba(68,138,255,.1);
+    font-weight: 700;
+  }
+
+  i.icon {
+    font-size: 16px;
+    cursor: auto;
+    position: absolute;
+    left: .75rem;
+    top: .75rem;
+  }
+
+  &.note {
+    border-left-color: #448aff;
+
+    i.icon {
+      color: #448aff;
+    }
+  }
+
+  &.abstract {
+    border-left-color: #00b0ff;
+
+    .admonition-title {
+      background-color: rgba(0,176,255,.1);
+    }
+
+    i.icon {
+      color: #00b0ff;
+    }
+  }
+
+  &.info {
+    border-left-color: #00b8d4;
+
+    .admonition-title {
+      background-color: rgba(0,184,212,.1);
+    }
+
+    i.icon {
+      color: #00b8d4;
+    }
+  }
+
+  &.tip {
+    border-left-color: #00bfa5;
+
+    .admonition-title {
+      background-color: rgba(0,191,165,.1);
+    }
+
+    i.icon {
+      color: #00bfa5;
+    }
+  }
+
+  &.success {
+    border-left-color: #00c853;
+
+    .admonition-title {
+      background-color: rgba(0,200,83,.1);
+    }
+
+    i.icon {
+      color: #00c853;
+    }
+  }
+
+  &.question {
+    border-left-color: #64dd17;
+
+    .admonition-title {
+      background-color: rgba(100,221,23,.1);
+    }
+
+    i.icon {
+      color: #64dd17;
+    }
+  }
+
+  &.warning {
+    border-left-color: #ff9100;
+
+    .admonition-title {
+      background-color: rgba(255,145,0,.1);
+    }
+
+    i.icon {
+      color: #ff9100;
+    }
+  }
+
+  &.failure {
+    border-left-color: #ff5252;
+
+    .admonition-title {
+      background-color: rgba(255,82,82,.1);
+    }
+
+    i.icon {
+      color: #ff5252;
+    }
+  }
+
+  &.danger {
+    border-left-color: #ff1744;
+
+    .admonition-title {
+      background-color: rgba(255,23,68,.1);
+    }
+
+    i.icon {
+      color: #ff1744;
+    }
+  }
+
+  &.bug {
+    border-left-color: #f50057;
+
+    .admonition-title {
+      background-color: rgba(245,0,87,.1);
+    }
+
+    i.icon {
+      color: #f50057;
+    }
+  }
+
+  &.example {
+    border-left-color: #651fff;
+
+    .admonition-title {
+      background-color: rgba(101,31,255,.1);
+    }
+
+    i.icon {
+      color: #651fff;
+    }
+  }
+
+  &.quote {
+    border-left-color: #9e9e9e;
+
+    .admonition-title {
+      background-color: hsla(0,0%,62%,.1);
+    }
+
+    i.icon {
+      color: #9e9e9e;
+    }
+  }
+
+  &:last-child {
+    margin-bottom: .75rem;
+  }
+}
+
+details.admonition {
+  summary {
+    display: block;
+    outline: none;
+    cursor: pointer;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    i.details {
+      position: absolute;
+      top: .75rem;
+      right: .75rem;
+      color: $global-font-color;
+
+      .dark-theme & {
+        color: $global-font-color-dark;
+      }
+    }
+  }
+}
+
+details.admonition[open] {
+  i.details {
+    transform: rotate(180deg);
+  }
+}

assets/css/_partial/post/code.scss → assets/css/_partial/_post/_code.scss

@@ -13,11 +13,11 @@ pre {
 code {
   padding: 3px 5px;
   border-radius: 4px;
-  color: $l-code-color;
+  color: $code-color;
   background: $l-code-background;
 
   .dark-theme & {
-    color: $d-code-color;
+    color: $code-color-dark;
     background: $d-code-background;
   }
 }
@@ -26,7 +26,7 @@ p > code {
   background: darken($l-code-background, 3%);
 
   .dark-theme & {
-    color: $d-code-color;
+    color: $code-color-dark;
     background: darken($d-code-background, 3%);
   }
 }
@@ -55,7 +55,7 @@ p > code {
       padding: 2px 7px;
       font-size: $code-font-size;
       font-weight: bold;
-      color: darken($gray, 10%);
+      color: darken($code-info-color, 10%);
       background: darken($l-code-background, 3%);
       content: 'Code';
 
@@ -107,7 +107,7 @@ p > code {
     }
   }
 
-  /* LineNumbersTable */  .lnt { color: $gray; }
+  /* LineNumbersTable */  .lnt { color: $code-info-color; }
   /* LineHighlight */  .hl { display: block; width: 100%; background-color: #ffffcc }
   /* P */ .chroma .p { color: #A9A9B3 }
 
@@ -186,59 +186,59 @@ p > code {
     background: $d-code-background;
 
     /* Keyword */ .chroma .k { color: #D371E3 }
-  /* KeywordConstant */ .chroma .kc { color: #D371E3 }
-  /* KeywordDeclaration */ .chroma .kd { color: #D371E3 }
-  /* KeywordNamespace */ .chroma .kn { color: #D371E3 }
-  /* KeywordPseudo */ .chroma .kp { color: #D371E3 }
-  /* KeywordReserved */ .chroma .kr { color: #D371E3 }
-  /* KeywordType */ .chroma .kt { color: #8be9fd }
-  /* NameAttribute */ .chroma .na { color: #41B1F5 }
-  /* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
-  /* NameClass */ .chroma .nc { color: #E5BF78 }
-  /* NameFunction */ .chroma .nf { color: #19B8C0 }
-  /* NameX */ .chroma .nx { color: #F16473 }
-  /* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
-  /* NameTag */ .chroma .nt { color: #D371E3 }
-  /* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
-  /* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
-  /* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
-  /* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
-  /* LiteralString */ .chroma .s { color: #8BC56F }
-  /* LiteralStringAffix */ .chroma .sa { color: #8BC56F }
-  /* LiteralStringBacktick */ .chroma .sb { color: #8BC56F }
-  /* LiteralStringChar */ .chroma .sc { color: #8BC56F }
-  /* LiteralStringDelimiter */ .chroma .dl { color: #8BC56F }
-  /* LiteralStringDoc */ .chroma .sd { color: #8BC56F }
-  /* LiteralStringDouble */ .chroma .s2 { color: #8BC56F }
-  /* LiteralStringEscape */ .chroma .se { color: #8BC56F }
-  /* LiteralStringHeredoc */ .chroma .sh { color: #8BC56F }
-  /* LiteralStringInterpol */ .chroma .si { color: #8BC56F }
-  /* LiteralStringOther */ .chroma .sx { color: #8BC56F }
-  /* LiteralStringRegex */ .chroma .sr { color: #8BC56F }
-  /* LiteralStringSingle */ .chroma .s1 { color: #8BC56F }
-  /* LiteralStringSymbol */ .chroma .ss { color: #8BC56F }
-  /* LiteralNumber */ .chroma .m { color: #bd93f9 }
-  /* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
-  /* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
-  /* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
-  /* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
-  /* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
-  /* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
-  /* Operator */ .chroma .o { color: #D371E3 }
-  /* OperatorWord */ .chroma .ow { color: #D371E3 }
-  /* Comment */ .chroma .c { color: #7E848F }
-  /* CommentHashbang */ .chroma .ch { color: #7E848F }
-  /* CommentMultiline */ .chroma .cm { color: #7E848F }
-  /* CommentSingle */ .chroma .c1 { color: #7E848F }
-  /* CommentSpecial */ .chroma .cs { color: #7E848F }
-  /* CommentPreproc */ .chroma .cp { color: #D371E3 }
-  /* CommentPreprocFile */ .chroma .cpf { color: #D371E3 }
-  /* GenericDeleted */ .chroma .gd { color: #8b080b }
-  /* GenericEmph */ .chroma .ge { text-decoration: underline }
-  /* GenericHeading */ .chroma .gh { font-weight: bold }
-  /* GenericInserted */ .chroma .gi { font-weight: bold }
-  /* GenericOutput */ .chroma .go { color: #44475a }
-  /* GenericSubheading */ .chroma .gu { font-weight: bold }
-  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
+    /* KeywordConstant */ .chroma .kc { color: #D371E3 }
+    /* KeywordDeclaration */ .chroma .kd { color: #D371E3 }
+    /* KeywordNamespace */ .chroma .kn { color: #D371E3 }
+    /* KeywordPseudo */ .chroma .kp { color: #D371E3 }
+    /* KeywordReserved */ .chroma .kr { color: #D371E3 }
+    /* KeywordType */ .chroma .kt { color: #8be9fd }
+    /* NameAttribute */ .chroma .na { color: #41B1F5 }
+    /* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
+    /* NameClass */ .chroma .nc { color: #E5BF78 }
+    /* NameFunction */ .chroma .nf { color: #19B8C0 }
+    /* NameX */ .chroma .nx { color: #F16473 }
+    /* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
+    /* NameTag */ .chroma .nt { color: #D371E3 }
+    /* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
+    /* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
+    /* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
+    /* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
+    /* LiteralString */ .chroma .s { color: #8BC56F }
+    /* LiteralStringAffix */ .chroma .sa { color: #8BC56F }
+    /* LiteralStringBacktick */ .chroma .sb { color: #8BC56F }
+    /* LiteralStringChar */ .chroma .sc { color: #8BC56F }
+    /* LiteralStringDelimiter */ .chroma .dl { color: #8BC56F }
+    /* LiteralStringDoc */ .chroma .sd { color: #8BC56F }
+    /* LiteralStringDouble */ .chroma .s2 { color: #8BC56F }
+    /* LiteralStringEscape */ .chroma .se { color: #8BC56F }
+    /* LiteralStringHeredoc */ .chroma .sh { color: #8BC56F }
+    /* LiteralStringInterpol */ .chroma .si { color: #8BC56F }
+    /* LiteralStringOther */ .chroma .sx { color: #8BC56F }
+    /* LiteralStringRegex */ .chroma .sr { color: #8BC56F }
+    /* LiteralStringSingle */ .chroma .s1 { color: #8BC56F }
+    /* LiteralStringSymbol */ .chroma .ss { color: #8BC56F }
+    /* LiteralNumber */ .chroma .m { color: #bd93f9 }
+    /* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
+    /* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
+    /* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
+    /* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
+    /* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
+    /* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
+    /* Operator */ .chroma .o { color: #D371E3 }
+    /* OperatorWord */ .chroma .ow { color: #D371E3 }
+    /* Comment */ .chroma .c { color: #7E848F }
+    /* CommentHashbang */ .chroma .ch { color: #7E848F }
+    /* CommentMultiline */ .chroma .cm { color: #7E848F }
+    /* CommentSingle */ .chroma .c1 { color: #7E848F }
+    /* CommentSpecial */ .chroma .cs { color: #7E848F }
+    /* CommentPreproc */ .chroma .cp { color: #D371E3 }
+    /* CommentPreprocFile */ .chroma .cpf { color: #D371E3 }
+    /* GenericDeleted */ .chroma .gd { color: #8b080b }
+    /* GenericEmph */ .chroma .ge { text-decoration: underline }
+    /* GenericHeading */ .chroma .gh { font-weight: bold }
+    /* GenericInserted */ .chroma .gi { font-weight: bold }
+    /* GenericOutput */ .chroma .go { color: #44475a }
+    /* GenericSubheading */ .chroma .gu { font-weight: bold }
+    /* GenericUnderline */ .chroma .gl { text-decoration: underline }
   }
 }

assets/css/_variables.scss

-/** light theme **/
+// ==============================
+// Variables
+// ==============================
 
-$light-background-color: #fff;
+// ========== Global ========== //
+// Background color of the body
+$global-background-color: #fff !default;
+$global-background-color-dark: #292a2d !default;
 
-$light-font-color: #161209;
-$light-font-secondary-color: #a9a9b3;
+// Text color of the body.
+$global-font-color: #161209 !default;
+$global-font-color-dark: #a9a9b3 !default;
 
-$light-navbar-active-color: #161209;
+$global-font-secondary-color: #a9a9b3 !default;
+$global-font-secondary-color-dark: #87878d !default;
 
-$light-global-link-color: #161209;
-$light-global-link-hover-color:#2d96bd;
+$global-link-color: #161209 !default;
+$global-link-color-dark: #a9a9b3 !default;
+$global-link-hover-color:#2d96bd !default;
+$global-link-hover-color-dark:#fff !default;
 
-$light-post-link-color: #2d96bd;
-$light-post-link-hover-color:#ef3982;
+$global-border-color: #dcdcdc !default;
+$global-border-color-dark: #4a4b50 !default;
 
-$light-pagination-link-color : #2d96bd;
-$light-pagination-link-active-color: #000;
+$navbar-active-color: #161209 !default;
+$navbar-active-color-dark: #fff !default;
 
-$light-border-color: #dcdcdc;
+$post-link-color: #2d96bd !default;
+$post-link-color-dark: #eee !default;
+$post-link-hover-color: #ef3982 !default;
+$post-link-hover-color-dark: #fff !default;
 
-/** dark theme **/
-
-$dark-background-color: #292a2d;
-
-$dark-font-color: #a9a9b3;
-$dark-font-secondary-color: #87878d;
-
-$dark-navbar-active-color: #fff;
-
-$dark-global-link-color: #a9a9b3;
-$dark-global-link-hover-color:#fff;
-
-$dark-post-link-color: #eee;
-$dark-post-link-hover-color:#fff;
-
-$dark-pagination-link-color : #a9a9b3;
-$dark-pagination-link-active-color: #fff;
-
-$dark-border-color: #4a4b50;
-
-// ========== Color ========== //
-$black: #0a0a0a !default;
-$white: #fefefe !default;
-$light-gray: #e6e6e6 !default;
-$gray: #cacaca !default;
-$dark-gray: #8a8a8a !default;
+$pagination-link-color: #2d96bd !default;
+$pagination-link-color-dark: #a9a9b3 !default;
+$pagination-link-active-color: #000 !default;
+$pagination-link-active-color-dark: #fff !default;
 
 // ========== Code ========== //
 // Color of the code.
-$l-code-color: #E74C3C !default;
-$d-code-color: #E5BF78 !default;
+$code-color: #E74C3C !default;
+$code-color-dark: #E5BF78 !default;
+
+$code-info-color: #cacaca !default;
 
 // Font size of code.
-$code-font-size: 13px !default;
+$code-font-size: 14px !default;
 
 // Font family of the code.
-$code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono",
- "Bitstream Vera Sans Mono", "Courier New", monospace !default;
-
-// Color of code highlight, solarized.
-$code-highlight-color: (
-  comment: #93a1a1,
-  keyword: #859900,
-  number: #2aa198,
-  title: #268bd2,
-  attribute: #b58900,
-  symbol: #cb4b16,
-  built_in: #dc322f,
-  formula: #eee8d5
-) !default;
+$code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace !default;
 
 // Code type list.
 $code-type-list: (
@@ -94,7 +73,6 @@ $code-type-list: (
   language-ruby: "Ruby",
   language-sql: "SQL",
   language-shell: "Shell",
-
   language-erlang: "Erlang",
   language-go: "Go",
   language-go-html-template: "Go HTML Template",

assets/css/style.scss

+@import "_custom";
 @import "_variables";
 
-@import "_iconfont";
-
 @import "_core/normalize";
 @import "_core/base";
 @import "_core/layout";
@@ -17,4 +16,3 @@
 @import "_partial/pagination";
 
 @import "_core/media";
-@import "_custom";

assets/js/main.js

@@ -44,7 +44,7 @@ jQuery(function($) {
 
     _Blog.countdown = function() {
         if (window.countdownMap) {
-            for (let id in countdownMap) {
+            Object.keys(countdownMap).forEach(function(id) {
               $(id).countdown(countdownMap[id], {elapse: true})
                 .on('update.countdown', function(event) {
                   var $this = $(this).html(event.strftime(''
@@ -53,35 +53,29 @@ jQuery(function($) {
                     + '<span>%M</span> 分 '
                     + '<span>%S</span> 秒'));
               });
-          }
+          });
         }
     };
 
     _Blog.typeit = function() {
-        if (window.typeitMap) {
-            for (let id in typeitMap) {
-                if (Array.isArray(typeitMap[id])) {
-                    const group = typeitMap[id];
-                    (function typeone (i) {
-                        if (i === group.length - 1) {
-                            new TypeIt(`#${group[i]}`, {
-                                strings: document.getElementById(`r${group[i]}`).innerHTML,
-                            }).go();
-                            return;
-                        }
-                        let instance = new TypeIt(`#${group[i]}`, {
+        if (window.typeitArr) {
+            for (let i = 0; i < typeitArr.length; i++) {
+                const group = typeitArr[i];
+                (function typeone (i) {
+                    if (i === group.length - 1) {
+                        new TypeIt(`#${group[i]}`, {
                             strings: document.getElementById(`r${group[i]}`).innerHTML,
-                            afterComplete: () => {
-                                instance.destroy();
-                                typeone(i + 1);
-                            },
                         }).go();
-                    })(0);
-                } else {
-                    new TypeIt(`#${id}`, {
-                        strings: document.getElementById(`r${id}`).innerHTML,
+                        return;
+                    }
+                    let instance = new TypeIt(`#${group[i]}`, {
+                        strings: document.getElementById(`r${group[i]}`).innerHTML,
+                        afterComplete: () => {
+                            instance.destroy();
+                            typeone(i + 1);
+                        },
                     }).go();
-                }
+                })(0);
             }
         }
     };

i18n/en.toml

@@ -34,8 +34,8 @@ other = "Theme - "
 # === partials/footer.html ===
 
 # === posts/single.html ===
-[wrote]
-other = "wrote on"
+[included]
+other = "included in"
 
 [wordCount]
 other = "about {{ .Count }} words"
@@ -43,6 +43,9 @@ other = "about {{ .Count }} words"
 [readingTime]
 other = "{{ .Count }} min"
 
+[pageviews]
+other = "<span class=leancloud-visitors-count></span> pageviews"
+
 [author]
 other = "Author"
 

i18n/zh.toml

@@ -34,14 +34,17 @@ other = "主题 - "
 # === partials/footer.html ===
 
 # === posts/single.html ===
-[wrote]
-other = "创作于"
+[included]
+other = "收录于"
 
 [wordCount]
 other = "约 {{ .Count }} 字"
 
 [readingTime]
-other = "预计阅读  {{ .Count }} 分钟"
+other = "预计阅读 {{ .Count }} 分钟"
+
+[pageviews]
+other = "<span class=leancloud-visitors-count></span> 次阅读"
 
 [author]
 other = "作者"

layouts/_default/baseof.html

@@ -7,6 +7,7 @@
         {{ partial "head.html" . }}
         {{ $style := resources.Get "css/style.scss" | resources.ToCSS | resources.Minify}}
         <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">
     </head>
     <body class="">
         <div class="wrapper">

layouts/_default/single.html

@@ -2,7 +2,9 @@
 
 {{ define "content" }}
     <div class="post-warp">
-        <h2 class="post-title" style="text-align:right;padding-bottom:2em">{{ .Title }}</h2>
+        <header class="post-header">
+            <div class="align-right"><h1 class="post-title">{{ .Title }}</h1></div>
+        </header>
         <div class="post-content">
             {{ .Content }}
         </div>

layouts/index.atom.xml

 <feed xmlns="http://www.w3.org/2005/Atom">
-  {{ if .IsHome }}
-    <title>{{ .Title }}</title>
-  {{ else }}
-    <title>{{ .Title }} - {{ .Site.Title }}</title>
-  {{ end }}
-  <link href="{{ .Permalink }}index.xml" rel="self"/>
-  <link href="{{ .Permalink }}"/>{{ if not .Date.IsZero }}
-  <updated>{{ .Date.Format "02-01-2006T15:04:05-07:00" | safeHTML }}</updated>{{ end }}
-  <id>{{ .Permalink }}</id>
-  <author>
-    {{ with .Site.Author.name }}
-        <name>{{ . }}</name>
+    {{ if .IsHome }}
+        <title>{{ .Title }}</title>
+    {{ else }}
+        <title>{{ .Title }} - {{ .Site.Title }}</title>
     {{ end }}
-    {{ with $.Site.Author.email }}
-      <email>{{ . }}</email>
-    {{ end }}
-  </author>
-  <generator>Hugo -- gohugo.io</generator>{{ range first 15 (where .Data.Pages "Type" "in" .Site.Params.mainSections) }}
-  <entry>
-    {{ `<title type="html"><![CDATA[` | safeHTML }}{{ .Title }}]]></title>
+    <link href="{{ .Permalink }}index.xml" rel="self"/>
     <link href="{{ .Permalink }}"/>
+    {{ if not .Date.IsZero }}
+        <updated>{{ .Date.Format "02-01-2006T15:04:05-07:00" | safeHTML }}</updated>
+    {{ end }}
     <id>{{ .Permalink }}</id>
-    {{ with .Site.Author.Name }}
-      <author>
-        <name>{{ . }}</name>
-      </author>
+    <author>
+        {{ with .Site.Author.name }}
+            <name>{{ . }}</name>
+        {{ end }}
+        {{ with $.Site.Author.email }}
+            <email>{{ . }}</email>
+        {{ end }}
+    </author>
+    <generator>Hugo -- gohugo.io</generator>
+    {{ range first 15 (where .Data.Pages "Type" "in" .Site.Params.mainSections) }}
+        <entry>
+            {{ `<title type="html"><![CDATA[` | safeHTML }}{{ .Title }}]]></title>
+            <link href="{{ .Permalink }}"/>
+            <id>{{ .Permalink }}</id>
+            {{ with .Site.Author.name }}
+                <author>
+                    <name>{{ . }}</name>
+                </author>
+            {{ end }}
+            <published>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published>
+            <updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
+            {{ `<content type="html"><![CDATA[` | safeHTML }}{{ .Content }}]]></content>
+        </entry>
     {{ end }}
-    <published>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published>
-    <updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
-    {{ `<content type="html"><![CDATA[` | safeHTML }}{{ .Content }}]]></content>
-  </entry>{{ end }}
 </feed>

layouts/partials/comments.html

@@ -5,14 +5,14 @@
         <script type="text/javascript">
             (function() {
                 // Don't ever inject Disqus on localhost--it creates unwanted
-                // discussions from 'localhost:1313' on your Disqus account...
+                // discussions from "localhost:1313" on your Disqus account...
                 if (window.location.hostname == "localhost")
                     return;
 
-                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-                var disqus_shortname = '{{ .Site.DisqusShortname }}';
-                dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+                var dsq = document.createElement("script"); dsq.type = "text/javascript"; dsq.async = true;
+                var disqus_shortname = "{{ .Site.DisqusShortname }}";
+                dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
+                (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(dsq);
             })();
         </script>
         <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
@@ -26,40 +26,36 @@
         <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js" crossorigin="anonymous"></script>
         <script type="text/javascript">
             var gitalk = new Gitalk({
-                id: '{{ .Date }}',
-                title: '{{ .Title }}',
-                clientID: '{{ .Site.Params.gitalk.clientId }}',
-                clientSecret: '{{ .Site.Params.gitalk.clientSecret }}',
-                repo: '{{ .Site.Params.gitalk.repo }}',
-                owner: '{{ .Site.Params.gitalk.owner }}',
-                admin: ['{{ .Site.Params.gitalk.owner }}'],
+                id: "{{ .Date }}",
+                title: "{{ .Title }}",
+                clientID: "{{ .Site.Params.gitalk.clientId }}",
+                clientSecret: "{{ .Site.Params.gitalk.clientSecret }}",
+                repo: "{{ .Site.Params.gitalk.repo }}",
+                owner: "{{ .Site.Params.gitalk.owner }}",
+                admin: ["{{ .Site.Params.gitalk.owner }}"],
                 body: decodeURI(location.href)
             });
-            gitalk.render('gitalk-container');
+            gitalk.render("gitalk-container");
         </script>
         <noscript>Please enable JavaScript to view the <a href="https://github.com/gitalk/gitalk">comments powered by gitalk.</a></noscript>
     {{- end -}}
 
     <!-- valine -->
     {{- if .Site.Params.valine.enable -}}
-        <span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
-            <span class="post-meta-item-text"> pm </span>
-            <span class="leancloud-visitors-count">1000000</span>
-            <p></p>
-        </span>
         <div id="vcomments"></div>
-        <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
-        <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@3.15.0/dist/av-min.js" integrity="sha256-xqGr0QtLwtP4tJtUSfG2p6aJLuh5xL0m6MLLzFL7978=" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/valine@1.3.9/dist/Valine.min.js" integrity="sha256-CE75dgk/gvtViCxLFAPDiz2mQC6jvytsjETgypmFdDU=" crossorigin="anonymous"></script>
         <script type="text/javascript">
             new Valine({
-                el: '#vcomments',
-                appId: '{{ .Site.Params.valine.appId }}',
-                appKey: '{{ .Site.Params.valine.appKey }}',
-                notify: '{{ .Site.Params.valine.notify }}',
-                verify: '{{ .Site.Params.valine.verify }}',
-                avatar: '{{ .Site.Params.valine.avatar }}',
-                placeholder: '{{ .Site.Params.valine.placeholder }}',
-                visitor: '{{ .Site.Params.valine.visitor }}',
+                el: "#vcomments",
+                appId: "{{ .Site.Params.valine.appId }}",
+                appKey: "{{ .Site.Params.valine.appKey }}",
+                meta: ["nick", "mail"],
+                notify: "{{ .Site.Params.valine.notify }}",
+                verify: "{{ .Site.Params.valine.verify }}",
+                avatar: "{{ .Site.Params.valine.avatar }}",
+                placeholder: "{{ .Site.Params.valine.placeholder }}",
+                visitor: "{{ .Site.Params.valine.visitor }}",
             });
         </script>
     {{- end -}}

layouts/partials/footer.html

 <footer class="footer">
     <div class="copyright">
+        <span>{{ (printf (T "powered") `<a href="https://gohugo.io/" target="_blank" rel="external nofollow noopener noreffer">Hugo</a>`) | safeHTML }} | {{ T "theme" }}<a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="external nofollow noopener noreffer">LoveIt</a></span>
+        <br />
         &copy;
-        {{ with .Site.Params.since }}
+        {{- with .Site.Params.since -}}
             <span itemprop="copyrightYear">{{ if lt . now.Year }}{{ . }} - {{ end }}{{ now.Year }}</span>
-        {{ else }}
+        {{- else -}}
             <span itemprop="copyrightYear">{{ now.Year }}</span>
-        {{ end }}
-        {{ with .Site.Author.Name }}
-            <span class="author" itemprop="copyrightHolder"><a href="{{ .Site.BaseURL }}">{{ . }}</a> | </span>
-        {{ end }}
-        <span>{{ (printf (T "powered") `<a href="https://gohugo.io/" target="_blank" rel="external nofollow noopener noreffer">Hugo</a>`) | safeHTML }} | {{ T "theme" }}<a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="external nofollow noopener noreffer">LoveIt</a></span>
-    </div>
+        {{- end -}}
+        {{- with .Site.Author.name -}}
+            <span class="author" itemprop="copyrightHolder">&nbsp;<a href="{{ $.Site.BaseURL }}">{{ . }}</a></span>
+        {{- end -}}
+        {{- with .Site.Params.icp -}}
+            <span class="icp">&nbsp;|&nbsp;{{ . | safeHTML }}</span>
+        {{- end -}}
+        {{- with .Site.Params.license -}}
+            <span class="license">&nbsp;|&nbsp;{{ . | safeHTML }}</span>
+        {{- end -}}
+        </div>
 </footer>

layouts/partials/header.html

@@ -9,7 +9,7 @@
             {{ range .Site.Menus.main }}
                 <a class="menu-item{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{ end }}" href="{{ .URL | absLangURL }}" title="{{ .Title }}">{{ .Name }}</a>
             {{ end }}
-            <a href="javascript:void(0);" class="theme-switch"><i class="iconfont icon-sun"></i></a>&nbsp;
+            <a href="javascript:void(0);" class="theme-switch"><i class="fas fa-adjust fa-rotate-180"></i></a>&nbsp;
         </div>
     </div>
 </nav>
@@ -17,7 +17,7 @@
 <nav class="navbar-mobile" id="nav-mobile" style="display: none">
      <div class="container">
         <div class="navbar-header">
-            <div>  <a href="javascript:void(0);" class="theme-switch"><i class="iconfont icon-sun"></i></a>&nbsp;<a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a></div>
+            <div><a href="javascript:void(0);" class="theme-switch"><i class="fas fa-adjust fa-rotate-180"></i></a>&nbsp;<a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a></div>
             <div class="menu-toggle">
                 <span></span><span></span><span></span>
             </div>

layouts/partials/home/profile.html

 <div class="intro">
     {{ $avatar := "" }}
-    {{ if or .Params.gravatar.Email (and .Site.Params.gravatar.Email (ne .Params.gravatar.Email false)) }}
+    {{ if .Site.Params.gravatar.email }}
         {{ $avatar = (printf "https://www.gravatar.com/avatar/%s?s=240&d=mp" (md5 .Site.Params.gravatar.email)) }}
     {{ else if .Site.Params.avatar }}
         {{ $avatar = .Site.Params.avatar }}
@@ -18,10 +18,11 @@
             {{ $id := md5 . | printf "tp-%s" }}
             <div id={{ printf "r%s" $id }} hidden=true>{{ . | safeHTML }}</div>
             <div id={{ $id }} class="typeit"></div>
-            <script>
-                var typeitMap = window.typeitMap || {};
-                typeitMap["{{ $id }}"] = true;
-            </script>
+            {{ with $.Scratch.Get "typeitMap" }}
+                {{ $.Scratch.Set "typeitMap" (dict $id (slice $id) | merge .) }}
+            {{ else }}
+                {{ $.Scratch.Set "typeitMap" (dict $id (slice $id)) }}
+            {{ end }}
         </h2>
     {{ end }}
 

layouts/partials/home/social.html

 {{ with .Site.Params.Social.Github }}
-    <a href="https://github.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-github"></i></a>
+    <a href="https://github.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-github"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.LinkedIn }}
-    <a href="https://linkedin.com/in/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-linkedin"></i></a>
+    <a href="https://linkedin.com/in/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-linkedin"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Twitter }}
-    <a href="https://twitter.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-twitter"></i></a>
+    <a href="https://twitter.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-twitter"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Instagram }}
-    <a href="https://www.instagram.com/{{.}}/" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-instagram"></i></a>
+    <a href="https://www.instagram.com/{{.}}/" rel="me noopener noreffer" target="_blank"><i class="fab fa-instagram"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Email}}
-    <a href="mailto:{{.}}" rel="me noopener noreffer"><i class="iconfont icon-mail" target="_blank"></i></a>
+    <a href="mailto:{{.}}" rel="me noopener noreffer"><i class="fas fa-envelope" target="_blank"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Facebook}}
-    <a href="https://facebook.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-facebook"></i></a>
+    <a href="https://facebook.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-facebook"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Telegram}}
-    <a href="https://t.me/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-telegram-plane"></i></a>
+    <a href="https://t.me/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-telegram-plane"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Medium}}
-    <a href="https://medium.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-medium"></i></a>
+    <a href="https://medium.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-medium"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Gitlab}}
-    <a href="https://gitlab.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-gitlab"></i></a>
+    <a href="https://gitlab.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-gitlab"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Youtubelegacy}}
-    <a href="https://www.youtube.com/user/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-youtube"></i></a>
+    <a href="https://www.youtube.com/user/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-youtube"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Youtubecustom}}
-    <a href="https://www.youtube.com/c/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-youtube"></i></a>
+    <a href="https://www.youtube.com/c/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-youtube"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Youtubechannel}}
-    <a href="https://www.youtube.com/channel/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-youtube"></i></a>
+    <a href="https://www.youtube.com/channel/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-youtube"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Tumblr}}
-    <a href="https://{{.}}.tumblr.com" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-tumblr"></i></a>
+    <a href="https://{{.}}.tumblr.com" rel="me noopener noreffer" target="_blank"><i class="fab fa-tumblr"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Quora}}
-    <a href="https://www.quora.com/profile/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-quora"></i></a>
+    <a href="https://www.quora.com/profile/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-quora"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Keybase}}
-    <a href="https://keybase.io/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-keybase"></i></a>
+    <a href="https://keybase.io/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-keybase"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Pinterest}}
-    <a href="https://www.pinterest.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-pinterest"></i></a>
+    <a href="https://www.pinterest.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-pinterest"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Reddit}}
-    <a href="https://www.reddit.com/user/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-reddit"></i></a>
+    <a href="https://www.reddit.com/user/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-reddit"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Codepen}}
-    <a href="https://codepen.io/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-codepen"></i></a>
+    <a href="https://codepen.io/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-codepen"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Bitbucket}}
-    <a href="https://bitbucket.org/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-bitbucket"></i></a>
+    <a href="https://bitbucket.org/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-bitbucket"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Stackoverflow}}
-    <a href="https://stackoverflow.com/users/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-stack-overflow"></i></a>
+    <a href="https://stackoverflow.com/users/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-stack-overflow"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Weibo}}
-    <a href="https://weibo.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-weibo"></i></a>
+    <a href="https://weibo.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-weibo"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Odnoklassniki}}
-    <a href="https://ok.ru/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-odnoklassniki"></i></a>
+    <a href="https://ok.ru/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-odnoklassniki"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.VKontakte}}
-    <a href="https://vk.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-vk"></i></a>
+    <a href="https://vk.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-vk"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Flickr}}
-    <a href="https://www.flickr.com/photos/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-flickr"></i></a>
+    <a href="https://www.flickr.com/photos/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-flickr"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Xing}}
-    <a href="https://www.xing.com/profile/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-xing"></i></a>
+    <a href="https://www.xing.com/profile/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-xing"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Snapchat}}
-    <a href="https://www.snapchat.com/add/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-snapchat"></i></a>
+    <a href="https://www.snapchat.com/add/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-snapchat"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Soundcloud}}
-    <a href="https://soundcloud.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-soundcloud"></i></a>
+    <a href="https://soundcloud.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-soundcloud"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Spotify}}
-    <a href="https://open.spotify.com/user/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-spotify"></i></a>
+    <a href="https://open.spotify.com/user/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-spotify"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Bandcamp}}
-    <a href="https://{{.}}.bandcamp.com/" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-bandcamp"></i></a>
+    <a href="https://{{.}}.bandcamp.com/" rel="me noopener noreffer" target="_blank"><i class="fab fa-bandcamp"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Paypal}}
-    <a href="https://paypal.me/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-paypal"></i></a>
+    <a href="https://paypal.me/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-paypal"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Fivehundredpx}}
-    <a href="https://500px.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-500px"></i></a>
+    <a href="https://500px.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-500px"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Mix}}
-    <a href="https://mix.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-mix"></i></a>
+    <a href="https://mix.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-mix"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Goodreads}}
-    <a href="https://www.goodreads.com/user/show/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-goodreads"></i></a>
+    <a href="https://www.goodreads.com/user/show/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-goodreads"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Lastfm}}
-    <a href="https://www.last.fm/user/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-POP_lastfm"></i></a>
+    <a href="https://www.last.fm/user/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-POP_lastfm"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Foursquare}}
-    <a href="https://foursquare.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-foursquare"></i></a>
+    <a href="https://foursquare.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-foursquare"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Hackernews}}
-    <a href="https://news.ycombinator.com/user?id={{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-ycombinator"></i></a>
+    <a href="https://news.ycombinator.com/user?id={{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-ycombinator"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Kickstarter}}
-    <a href="https://kickstarter.com/profile/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-kickstarter"></i></a>
+    <a href="https://kickstarter.com/profile/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-kickstarter"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Patreon}}
-    <a href="https://patreon.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-patreon"></i></a>
+    <a href="https://patreon.com/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-patreon"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Steam}}
-    <a href="https://steamcommunity.com/id/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-steam"></i></a>
+    <a href="https://steamcommunity.com/id/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-steam"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Twitch}}
-    <a href="https://www.twitch.tv/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-twitch"></i></a>
+    <a href="https://www.twitch.tv/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-twitch"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Strava}}
-    <a href="https://www.strava.com/athletes/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-strava"></i></a>
+    <a href="https://www.strava.com/athletes/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-strava"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Skype}}
-    <a href="skype:{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-skype"></i></a>
+    <a href="skype:{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-skype"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Whatsapp}}
-    <a href="https://wa.me/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-whatsapp"></i></a>
+    <a href="https://wa.me/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-whatsapp"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Zhihu}}
-    <a href="https://www.zhihu.com/people/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-zhihu"></i></a>
-{{ end }}
-{{ with .Site.Params.Social.Douban}}
-    <a href="https://www.douban.com/people/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-douban"></i></a>
+    <a href="https://www.zhihu.com/people/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-zhihu"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Angellist}}
-    <a href="https://angel.co/{{.}}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-angellist"></i></a>
+    <a href="https://angel.co/{{.}}" rel="me noopener noreffer" target="_blank"><i class="fab fa-angellist"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Slideshare}}
-    <a href="https://slideshare.com/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-slideshare"></i></a>
+    <a href="https://slideshare.com/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="fab fa-slideshare"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Jsfiddle}}
-    <a href="https://jsfiddle.com/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-jsfiddle"></i></a>
+    <a href="https://jsfiddle.com/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="fab fa-jsfiddle"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Deviantart}}
-    <a href="https://{{ . }}.deviantart.com/" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-deviantart"></i></a>
+    <a href="https://{{ . }}.deviantart.com/" rel="me noopener noreffer" target="_blank"><i class="fab fa-deviantart"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Behance}}
-    <a href="https://behance.net/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-behance"></i></a>
+    <a href="https://behance.net/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="fab fa-behance"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Dribble}}
-    <a href="https://dribbble.com/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-dribbble"></i></a>
+    <a href="https://dribbble.com/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="fab fa-dribbble"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Wordpress}}
-    <a href="https://{{ . }}.wordpress.com" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-wordpress"></i></a>
+    <a href="https://{{ . }}.wordpress.com" rel="me noopener noreffer" target="_blank"><i class="fab fa-wordpress"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Vine}}
-    <a href="https://vine.co/" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-vine"></i></a>
+    <a href="https://vine.co/" rel="me noopener noreffer" target="_blank"><i class="fab fa-vine"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Googlescholar}}
-    <a href="https://scholar.google.com/citations?{{ . }}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-Googlescholar"></i></a>
+    <a href="https://scholar.google.com/citations?{{ . }}" rel="me noopener noreffer" target="_blank"><i class="fab fa-Googlescholar"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Researchgate}}
-    <a href="https://www.researchgate.net/profile/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-researchgate"></i></a>
+    <a href="https://www.researchgate.net/profile/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="fab fa-researchgate"></i></a>
 {{ end }}
 {{ with .Site.Params.Social.Mastodon}}
-    <a href="https://mastodon.social/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-mastodon"></i></a>
-{{ end }}
-{{ with .Site.Params.Social.Thingiverse}}
-    <a href="https://www.thingiverse.com/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="iconfont icon-t"></i></a>
+    <a href="https://mastodon.social/{{ . }}" rel="me noopener noreffer" target="_blank"><i class="fab fa-mastodon"></i></a>
 {{ end }}

layouts/partials/js.html

@@ -32,25 +32,35 @@
 ` }}
 
 {{ $jquery | safeHTML }}
-{{ $typeit | safeHTML }}
 
 {{ if .IsPage }}
-    {{ if .Params.Music }}
+    {{ $lazysizes | safeHTML }}
+    {{ if .Scratch.Get "music" }}
         {{ $metingjs | safeHTML }}
     {{ end }}
-    {{ $countdown | safeHTML }}
-    {{ if or .Params.Math .Site.Params.Math }}
+    {{ if or .Params.math .Site.Params.math }}
         {{ $katex | safeHTML }}
     {{ end }}
-
-    {{ $lazysizes | safeHTML }}
-
     {{ $scripts = $scripts | append $dynamicToTop }}
     {{ $scripts = $scripts | resources.Concat "/js/vendor_post.js" | resources.Minify }}
 {{ else }}
     {{ $scripts = $scripts | resources.Concat "/js/vendor_main.js" | resources.Minify}}
 {{ end }}
 
+{{ $typeitMap := .Scratch.Get "typeitMap" }}
+{{ if $typeitMap }}
+    {{ $typeit | safeHTML }}
+    {{ $typeitArr := slice }}
+    {{ range $key, $val := $typeitMap }}
+        {{ $typeitArr = $typeitArr | append (slice $val) }}
+    {{ end }}
+    <script>var typeitArr = {{ $typeitArr | jsonify | safeJS }};</script>
+{{ end }}
+{{ with .Scratch.Get "countdownMap" }}
+    {{ $countdown | safeHTML }}
+    <script>var countdownMap = {{ . | jsonify | safeJS }};</script>
+{{ end }}
+
 <script src="{{ $scripts.RelPermalink }}" async=""></script>
 
 {{ template "_internal/google_analytics_async.html" . }}

layouts/partials/post/share-links.html

 {{ if or .Params.socialShare (and .Site.Params.socialShare (ne .Params.socialShare false)) }}
 
     {{ if or .Params.Share.Twitter (and .Site.Params.Share.Twitter (ne .Params.Share.Twitter false)) }}
-        <a href="//twitter.com/share?url={{ .Permalink }}&amp;text={{ .Title }}&amp;via={{ .Site.Params.Social.Twitter }}"
-            target="_blank" title="Share on Twitter">
-            <i class="iconfont icon-twitter"></i>
+        <a href="//twitter.com/share?url={{ .Permalink }}&amp;text={{ .Title }}&amp;via={{ .Site.Params.Social.Twitter }}" target="_blank" title="Share on Twitter">
+            <i class="fab fa-twitter"></i>
         </a>
     {{ end }}
 
     {{ if or .Params.Share.Facebook (and .Site.Params.Share.Facebook (ne .Params.Share.Facebook false)) }}
         <a href="//www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" title="Share on Facebook">
-            <i class="iconfont icon-facebook"></i>
+            <i class="fab fa-facebook-square"></i>
         </a>
     {{ end }}
 
     {{ if or .Params.Share.Reddit (and .Site.Params.Share.Reddit (ne .Params.Share.Reddit false)) }}
         <a href="//reddit.com/submit?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" title="Share on Reddit">
-            <i class="iconfont icon-reddit"></i>
+            <i class="fab fa-reddit"></i>
         </a>
     {{ end }}
 
     {{ if or .Params.Share.Linkedin (and .Site.Params.Share.Linkedin (ne .Params.Share.Linkedin false)) }}
-        <a href="//www.linkedin.com/shareArticle?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank"
-            title="Share on LinkedIn">
-            <i class="iconfont icon-linkedin"></i>
+        <a href="//www.linkedin.com/shareArticle?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" title="Share on LinkedIn">
+            <i class="fab fa-linkedin"></i>
         </a>
     {{ end }}
 
     {{ if or .Params.Share.Pinterest (and .Site.Params.Share.Pinterest (ne .Params.Share.Pinterest false)) }}
-        <a href="//www.pinterest.com/pin/create/button/?url={{ .Permalink }}&amp;description={{ .Title }}" target="_blank"
-            title="Share on Pinterest">
-            <i class="iconfont icon-pinterest"></i>
+        <a href="//www.pinterest.com/pin/create/button/?url={{ .Permalink }}&amp;description={{ .Title }}" target="_blank" title="Share on Pinterest">
+            <i class="fab fa-pinterest"></i>
         </a>
     {{ end }}
 
-    {{ if or .Params.Share.HackerNews (and .Site.Params.Share.HackerNews (ne .Params.Share.HackerNews false)) }}
-        <a href="//news.ycombinator.com/submitlink?u={{ .Permalink }}&amp;description={{ .Title }}" target="_blank"
-            title="Share on Hacker News">
-            <i class="iconfont icon-ycombinator"></i>
+    {{ if or .Params.Share.YCombinator (and .Site.Params.Share.YCombinator (ne .Params.Share.YCombinator false)) }}
+        <a href="//news.ycombinator.com/submitlink?u={{ .Permalink }}&amp;description={{ .Title }}" target="_blank" title="Share on Hacker News">
+            <i class="fab fa-y-combinator"></i>
         </a>
     {{ end }}
 
     {{ if or .Params.Share.Mix (and .Site.Params.Share.Mix (ne .Params.Share.Mix false)) }}
         <a href="//mix.com/add?url={{ .Permalink }}&amp;description={{ .Title }}" target="_blank" title="Share on Mix">
-            <i class="iconfont icon-mix"></i>
+            <i class="fab fa-mix"></i>
         </a>
     {{ end }}
 
     {{ if or .Params.Share.Tumblr (and .Site.Params.Share.Tumblr (ne .Params.Share.Tumblr false)) }}
-        <a href="//www.tumblr.com/widgets/share/tool?canonicalUrl={{ .Permalink }}&amp;title={{ .Title }}" target="_blank"
-            title="Share on Tumblr">
-            <i class="iconfont icon-tumblr"></i>
+        <a href="//www.tumblr.com/widgets/share/tool?canonicalUrl={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" title="Share on Tumblr">
+            <i class="fab fa-tumblr"></i>
         </a>
     {{ end }}
 
-    {{ if or .Params.Share.VKontakte (and .Site.Params.Share.VKontakte (ne .Params.Share.VKontakte false)) }}
+    {{ if or .Params.Share.VK (and .Site.Params.Share.VK (ne .Params.Share.VK false)) }}
         <a href="//vk.com/share.php?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" title="Share on VKontakte ">
-            <i class="iconfont icon-vk"></i>
-        </a>
-    {{ end }}
-
-    {{ if or .Params.Share.Douban (and .Site.Params.Share.Douban (ne .Params.Share.Douban false)) }}
-        <a href="//www.douban.com/recommend/?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank"
-            title="Share on Douban ">
-            <i class="iconfont icon-douban"></i>
+            <i class="fab fa-vk"></i>
         </a>
     {{ end }}
 
     {{ if or .Params.Share.Weibo (and .Site.Params.Share.Weibo (ne .Params.Share.Weibo false)) }}
-        <a href="//service.weibo.com/share/share.php?url={{ .Permalink }}&amp;appkey=&amp;title={{ .Title }}" target="_blank"
-            title="Share on Douban ">
-            <i class="iconfont icon-weibo"></i>
+        <a href="//service.weibo.com/share/share.php?url={{ .Permalink }}&amp;appkey=&amp;title={{ .Title }}" target="_blank" title="Share on Weibo">
+            <i class="fab fa-weibo"></i>
         </a>
     {{ end }}
 {{ end }}

layouts/posts/single.html

@@ -3,36 +3,48 @@
 {{ define "content" }}
     {{ $publish_date := .PublishDate.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
     {{ $modify_date := .Lastmod.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
-    {{ $author := .Site.Author.Name }}
+    {{ $author := .Site.Author.name }}
     {{ if isset .Params "author" }}
-       {{ $author = .Site.Author.Name }}
+       {{ $author = .Site.Author.name }}
     {{ end }}
 
     <article class="post-warp">
         <header class="post-header">
             <h1 class="post-title">{{ .Title }}</h1>
-            <div class="post-meta">
+        </header>
+
+        <div class="post-meta">
+            <div class="post-meta-main">
                 <a href="{{.Site.BaseURL }}" rel="author">{{ $author }}</a>
-                {{ T "wrote" }}
-                <span class="post-time"><time datetime={{ $publish_date }}>{{ $publish_date }}</time></span>
-                &nbsp;✎
-                {{ T "wordCount" .WordCount }}
-                <i class="iconfont icon-timer"></i>
-                {{ T "readingTime" .ReadingTime }}
-                &nbsp;
+                {{ T "included" }}
                 {{ with .Params.categories -}}
                     <span class="post-category">
                         {{ range . }}
                             {{- $name := . -}}
                             {{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
-                                <i class="iconfont icon-folder"></i>
+                                <i class="far fa-folder"></i>
                                 <a href="{{ .Permalink }}">{{ $name }}</a>
                             {{ end -}}
                         {{ end }}
                     </span>
                 {{- end }}
             </div>
-        </header>
+            <div class="post-meta-other">
+                <i class="far fa-calendar-alt"></i>
+                <span class="post-time"><time datetime={{ $publish_date }}>{{ $publish_date }}</time></span>
+                <i class="fas fa-pencil-alt"></i>
+                {{ T "wordCount" .WordCount }}
+                <i class="far fa-clock"></i>
+                {{ T "readingTime" .ReadingTime }}
+                {{ if and .Site.Params.valine.enable .Site.Params.valine.visitor }}
+                <span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
+                    <i class="far fa-eye"></i>
+                    {{ T "pageviews" | safeHTML }}
+                </span>
+                {{ end }}
+            </div>
+        </div>
+
         <div class="post-content">
             <!--featured_image-->
             {{ with .Params.featured_image }}
@@ -49,43 +61,30 @@
             {{ $finalContent }}
         </div>
 
-        <div class="post-copyright">
-            <p class="copyright-item">
-                <span>{{ T "author" }}:</span>
-                <span><a href="{{.Site.BaseURL }}" rel="author">{{ $author }}</a></span>
-            </p>
-
-            <p class="copyright-item">
+        <div class="post-info">
+            <p class="post-info-item">
                 <span>{{ T "lastMod" }}:</span>
                 <span>{{ $modify_date }}</span>
             </p>
 
-            <p class="copyright-item">
+            <p class="post-info-item">
                 {{ if and ( $.Param "socialShare" ) (gt (len ($.Param "share")) 0) }}
-                <span>{{ T "share" }}:</span>
-                <span>{{ partial "post/share-links.html" . }}</span>
+                    <span>{{ T "share" }}:</span>
+                    <span>{{ partial "post/share-links.html" . }}</span>
                 {{ end }}
             </p>
-
-            {{ with .Site.Params.license }}
-            <p class="copyright-item">
-                <span>{{ T "license" }}:</span>
-                <span>{{ . | safeHTML }}</span>
-            </p>
-            {{ end }}
         </div>
 
         <div class="post-tags">
-            {{ with .Params.tags }}
             <section>
-                <i class="iconfont icon-icon-tag"></i>{{ T "tag" }}:
-                {{ range . }}
-                <span class="tag">
-                    <a href="{{ "tags/" | absURL }}{{ . | urlize }}/">#{{.}}</a>
-                </span>
+                {{ with .Params.tags }}
+                    {{ range . }}
+                        <span class="tag">
+                            <i class="fas fa-tag"></i><a href="{{ "tags/" | absURL }}{{ . | urlize }}/">&nbsp;{{.}}&nbsp;</a>
+                        </span>
+                    {{ end }}
                 {{ end }}
             </section>
-            {{ end }}
             <section>
                 <span><a href="javascript:window.history.back();">{{ T "back" }}</a></span>
                 |
@@ -95,12 +94,10 @@
 
         <div class="post-nav">
             {{ if .PrevInSection }}
-            <a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i
-                    class="iconfont icon-dajiantou"></i>&nbsp;{{ .PrevInSection.Title}}</a>
+            <a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i class="fas fa-angle-left"></i>&nbsp;{{ .PrevInSection.Title}}</a>
             {{ end }}
             {{ if .NextInSection }}
-            <a href="{{.NextInSection.Permalink}}" class="next" rel="next"
-                title="{{.NextInSection.Title}}">{{.NextInSection.Title}}&nbsp;<i class="iconfont icon-xiaojiantou"></i></a>
+            <a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}}&nbsp;<i class="fas fa-angle-right"></i></a>
             {{ end }}
         </div>
 

layouts/posts/summary.html

@@ -21,7 +21,7 @@
             </span>
             in
             {{ with .Params.categories }}
-                <i class="iconfont icon-folder"></i>
+                <i class="far fa-folder"></i>
                 <span class="post-category">
                     {{ range . }}
                         {{ $name := . }}

layouts/rss.xml

@@ -7,10 +7,8 @@
         {{ with .Site.LanguageCode }}
             <language>{{ . }}</language>
         {{ end }}
-        {{ with .Site.Author.Email }}
+        {{ with .Site.Author.email }}
             <managingEditor>{{ . }}{{ with .Site.Author.name }} ({{ . }}){{ end }}</managingEditor>
-        {{ end }}
-        {{ with .Site.Author.Email }}
             <webMaster>{{ . }}{{ with .Site.Author.name }} ({{ . }}){{ end }}</webMaster>
         {{ end }}
         {{ with .Site.Copyright }}
@@ -25,8 +23,8 @@
                 <title>{{ .Title }}</title>
                 <link>{{ .Permalink }}</link>
                 <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-                {{ with .Site.Author.Email }}
-                    <author>{{ . }}{{ with .Site.Author.Name }} ({{ . }}){{ end }}</author>
+                {{ with .Site.Author.email }}
+                    <author>{{ . }}{{ with .Site.Author.name }} ({{ . }}){{ end }}</author>
                 {{ end }}
                 <guid>{{ .Permalink }}</guid>
                 <description>{{ .Content | html }}</description>

layouts/shortcodes/admonition.html

-{{ if .IsNamedParams }}
-    {{ if eq (.Get "details") "true" }}
-        <details class="admonition {{ .Get "type" }}">
-            {{ with .Get "title" }}<summary class="admonition-title">{{ . }}</summary>{{ end }}
-            {{ .Inner }}
+{{ $_hugo_config := `{ "version": 1 }` -}}
+{{ $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 -}}
+{{ $iconMap  = dict "details" "fas fa-angle-down" | merge $iconMap -}}
+
+{{ if .IsNamedParams -}}
+    {{ $type := .Get "type" }}
+    {{ if eq (.Get "details") "true" -}}
+        <details class="admonition {{ $type }}">
+            {{- with .Get "title" }}<summary class="admonition-title"><i class="icon {{ index $iconMap $type }}"></i>{{ . }}<i class="details {{ index $iconMap "details" }}"></i></summary>{{ end }}
+            {{- .Inner -}}
         </details>
-    {{ else }}
-        <div class="admonition {{ .Get "type" }}">
-            {{- with .Get "title" }}<p class="admonition-title">{{ . }}</p>{{ end }}
-            {{ .Inner }}
+    {{- else -}}
+        <div class="admonition {{ $type }}">
+            {{- with .Get "title" }}<p class="admonition-title"><i class="icon {{ index $iconMap $type }}"></i>{{ . }}</p>{{ end }}
+            {{- .Inner -}}
         </div>
-    {{ end }}
-{{ else }}
+    {{- end -}}
+{{ else -}}
+    {{ $type := .Get 0 }}
     {{ if eq (.Get 2) "true" }}
-        <details class="admonition {{ .Get 0 }}">
-            {{- with .Get 1 }}<summary class="admonition-title">{{ . }}</summary>{{ end }}
-            {{ .Inner }}
+        <details class="admonition {{ $type }}">
+            {{- with .Get 1 }}<summary class="admonition-title"><i class="icon {{ index $iconMap $type }}"></i>{{ . }}<i class="details {{ index $iconMap "details" }}"></i></summary>{{ end }}
+            {{- .Inner -}}
         </details>
-    {{ else }}
-        <div class="admonition {{ .Get 0 }}">
-            {{- with .Get 1 }}<p class="admonition-title">{{ . }}</p>{{ end }}
-            {{ .Inner }}
+    {{- else -}}
+        <div class="admonition {{ $type }}">
+            {{- with .Get 1 }}<p class="admonition-title"><i class="icon {{ index $iconMap $type }}"></i>{{ . }}</p>{{ end }}
+            {{- .Inner -}}
         </div>
-    {{ end }}
-{{ end }}
+    {{- end -}}
+{{ end }}
\ No newline at end of file

layouts/shortcodes/align-center.html

-<div class='align-center'>
-    {{ .Inner }}
-</div>
+{{ $_hugo_config := `{ "version": 1 }` -}}
+<div class="align-center">
+    {{- .Inner -}}
+</div>
\ No newline at end of file

layouts/shortcodes/align-left.html

-<div class='align-left'>
-    {{ .Inner }}
-</div>
+{{ $_hugo_config := `{ "version": 1 }` -}}
+<div class="align-left">
+    {{- .Inner -}}
+</div>
\ No newline at end of file

layouts/shortcodes/align-right.html

-<div class='align-right'>
-    {{ .Inner }}
-</div>
+{{ $_hugo_config := `{ "version": 1 }` -}}
+<div class="align-right">
+    {{- .Inner -}}
+</div>
\ No newline at end of file

layouts/shortcodes/countdown.html

@@ -7,9 +7,11 @@
     {{ end }}
     {{ $id = printf "#%s" $id }}
     {{ with .Get "date" }}
-        <script>
-            var countdownMap = window.countdownMap || {};
-            countdownMap["{{ $id }}"] = {{ . }};
-        </script>
+        {{ $date := . }}
+        {{ with $.Page.Scratch.Get "countdownMap" }}
+            {{ $.Page.Scratch.Set "countdownMap" (dict $id $date | merge .) }}
+        {{ else }}
+            {{ $.Page.Scratch.Set "countdownMap" (dict $id $date) }}
+        {{ end }}
     {{ end }}
 {{ end }}

layouts/shortcodes/fa.html

+{{ if .IsNamedParams -}}
+    <i class="inline-icon {{ .Get "class" }}"></i>
+{{- else -}}
+    <i class="inline-icon {{ .Get 0 }}"></i>
+{{- end }}
\ No newline at end of file

layouts/shortcodes/float-right.html

-<div class='float-right'>
-    {{ .Inner }}
-</div>
+{{ $_hugo_config := `{ "version": 1 }` -}}
+<div class="float-right">
+    {{- .Inner -}}
+</div>
\ No newline at end of file

layouts/shortcodes/music.html

+{{ .Page.Scratch.Set "music" "true" }}
 {{ if .IsNamedParams }}
     <meting-js server={{ .Get "server" }} type={{ .Get "type" }} id={{ .Get "id" }}
     {{ with .Get "autoplay" }}
@@ -18,4 +19,4 @@
     theme="#A9A9B3"></meting-js>
 {{ else }}
     <meting-js server={{ .Get 0 }} type={{ .Get 1 }} id={{ .Get 2 }} theme="#A9A9B3"></meting-js>></meting-js>
-{{ end }}
+{{ end }}
\ No newline at end of file

layouts/shortcodes/typeit.html

@@ -28,15 +28,23 @@
         {{ printf "<%s id=%s></%s>" $tag $id $tag | safeHTML }}
     {{ end }}
 
-    <script>
-        var typeitMap = window.typeitMap || {};
-        {{ with .Get "group" }}
-            if (!typeitMap[{{ . }}]) {
-                typeitMap[{{ . }}] = [];
-            }
-            typeitMap[{{ . }}].push({{ $id }});
+    {{ $typeitMap := .Page.Scratch.Get "typeitMap" }}
+    {{ $group := slice $id }}
+    {{ with .Get "group" }}
+        {{ if $typeitMap }}
+            {{ if index $typeitMap . }}
+                {{ $group = index $typeitMap . | append $id }}
+            {{ end }}
+            {{ $typeitMap = dict . $group | merge $typeitMap }}
         {{ else }}
-            typeitMap[{{ $id }}] = true;
+            {{ $typeitMap = dict . $group }}
         {{ end }}
-    </script>
+    {{ else }}
+        {{ if $typeitMap }}
+            {{ $typeitMap = dict $id $group | merge $typeitMap }}
+        {{ else }}
+            {{ $typeitMap = dict $id $group }}
+        {{ end }}
+    {{ end }}
+    {{ .Page.Scratch.Set "typeitMap" $typeitMap }}
 </div>

layouts/taxonomy/terms.html

@@ -28,7 +28,7 @@
                     <div class="card-item">
                         <div class="categories">
                             <a href="{{ .Permalink }}">
-                                <h3> <i class="iconfont icon-folder" style="padding-right: 3px"></i> {{ $term | humanize}} </h3>
+                                <h3> <i class="far fa-folder"></i> {{ $term | humanize}} </h3>
                             </a>
                             {{ range first 5 $pages }}
                                 <article class="archive-item">