feat: tidy style and layout

assets/css/_core/_base.scss

@@ -11,11 +11,11 @@ html {
 
   &::-webkit-scrollbar-thumb {
     height: 40px;
-    background-color: #eee;
+    background-color: #87878D;
     border-radius: 16px;
 
     &:hover {
-      background-color: #C2C2C2;
+      background-color: #A9A9B3;
     }
   }
 }
@@ -73,11 +73,3 @@ a {
     }
   }
 }
-
-.navbar {
-  background-color: $navbar-background-color;
-
-  .dark-theme & {
-    background-color: $navbar-background-color-dark;
-  }
-}

assets/css/_core/_layout.scss

@@ -1,5 +1,4 @@
-  /** Layout **/
-
+/** Layout **/
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -7,24 +6,6 @@
   width: 100%;
 }
 
-.navbar {
-  display: block !important;
-  position: fixed;
-  width: 100%;
-  z-index: 100;
-  height: 4rem;
-  line-height: 4rem;
-
-  .container {
-    width: auto;
-    max-width: 1200px;
-    text-align: center;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
 .main {
   flex: 1 0 auto;
 }

assets/css/_core/_media.scss

@@ -1,192 +1,49 @@
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
-  .navbar {
-    display: none !important;
-  }
-
-  .post-toc {
-    display: none !important;
-  }
-
-  .navbar-mobile {
-    display: block !important;
-    position: fixed !important;
-    width: 100% !important;
-    z-index: 100 !important;
-    transition: all 0.3s ease 0s !important;
-
-    .container {
-      padding: 0 !important;
-      margin: 0 !important;
-      height: 4.5em !important;
-      line-height: 4.5em !important;
-      background: $global-background-color !important;
-
-      .navbar-header {
-        display: flex !important;
-        justify-content: space-between !important;
-        align-items: center !important;
-        width: 100% !important;
-        font-size: 18px !important;
-        padding-right: 1em !important;
-        padding-left: 1em !important;
-        box-sizing: border-box !important;
-
-        .menu-toggle {
-          cursor: pointer !important;
-          line-height: 4.5em !important;
-
-          span {
-            display: block !important;
-            background: #000 !important;
-            width: 36px !important;
-            height: 2px !important;
-            -webkit-border-radius: 3px !important;
-            -moz-border-radius: 3px !important;
-            border-radius: 3px !important;
-            -webkit-transition: .2s margin .2s, .2s transform !important;
-            -moz-transition: .2s margin .2s, .2s transform !important;
-            transition: .2s margin .2s, .2s transform !important;
-
-            .dark-theme & {
-              background: $global-font-color-dark !important;
-            }
-          }
-
-          span:nth-child(1) {
-            margin-bottom: 8px !important;
-          }
-
-          span:nth-child(3) {
-            margin-top: 8px !important;
-          }
-
-          &.active {
-            span {
-              -webkit-transition: .2s margin, .2s transform .2s !important;
-              -moz-transition: .2s margin, .2s transform .2s !important;
-              transition: .2s margin, .2s transform .2s !important;
-            }
-
-            span:nth-child(1) {
-              -moz-transform: rotate(45deg) translate(4px, 6px) !important;
-              -ms-transform: rotate(45deg) translate(4px, 6px) !important;
-              -webkit-transform: rotate(45deg) translate(4px, 6px) !important;
-              transform: rotate(45deg) translate(4px, 6px) !important;
-            }
-
-            span:nth-child(2) {
-              opacity: 0
-            }
-
-            span:nth-child(3) {
-              -moz-transform: rotate(-45deg) translate(8px, -10px) !important;
-              -ms-transform: rotate(-45deg) translate(8px, -10px) !important;
-              -webkit-transform: rotate(-45deg) translate(8px, -10px) !important;
-              transform: rotate(-45deg) translate(8px, -10px) !important;
-            }
-          }
-        }
-      }
-
-      .menu {
-        text-align: center !important;
-        background: $global-background-color !important;
-        border-top: 2px solid $global-font-color !important;
-        display: none !important;
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
-
-        a {
-          display: block !important;
-          line-height: 2.5em !important;
-        }
-
-        &.active {
-          display: block !important;
-        }
-
-        .dark-theme & {
-          background: $global-background-color-dark !important;
-          border-top: 2px solid $global-font-color-dark !important;
-        }
-      }
-
-      .dark-theme & {
-        background: $global-background-color-dark !important;
-      }
-    }
-  }
-
-  #dynamic-to-top {
-    display: none !important;
-  }
-
+/* iPads (landscape) ----------- */
+@media only screen and (max-width: 1300px) {
   .post-warp {
-    .categories-card {
-      .card-item {
-        width: 95% !important;
-      }
+    max-width: 560px;
+
+    .post-toc {
+      margin-left: 580px;
     }
   }
 }
 
 /* iPads (portrait) ----------- */
-
-@media only screen and (min-width: 768px) {
+@media only screen and (max-width: 1080px) {
   .post-warp {
-    max-width: 600px !important;
-  }
+    max-width: 80%;
 
-  .navbar-mobile {
-    display: none !important;
-  }
+    .post-toc {
+      display: none;
+    }
 
-  .post-toc {
-    display: none !important;
-  }
-
-  .post-toc-mobile {
-    display: block !important;
+    .post-toc-mobile {
+      display: block;
+    }
   }
 }
 
-/* iPads (landscape) ----------- */
-
-@media only screen and (min-width: 1080px) {
-  .post-warp {
-    max-width: 560px !important;
-  }
-
-  .post-toc {
-    display: block !important;
-    margin-left: 580px !important;
+@media only screen and (max-width: 400px) {
+  .navbar {
+    display: none;
   }
 
   .navbar-mobile {
-    display: none !important;
+    display: block;
   }
 
-  .post-toc-mobile {
-    display: none !important;
-  }
-}
-
-/* Desktops and laptops ----------- */
-
-@media only screen and (min-width: 1300px) {
   .post-warp {
-    max-width: 780px !important;
+    max-width: 100%;
+
+    .categories-card {
+      .card-item {
+        width: 95%;
+      }
+    }
   }
 
-  .post-toc {
-    display: block !important;
-    margin-left: 800px !important;
-  }
-
-  .navbar-mobile {
-    display: none !important;
-  }
-
-  .post-toc-mobile {
+  .dynamic-to-top {
     display: none !important;
   }
 }

assets/css/_custom.scss

@@ -2,10 +2,3 @@
 // Custom style
 // ==============================
 // You can override the variables in _variables.scss to customize the style
-
-.since {
-  padding: 30px;
-  text-align:center;
-  font-size: 30px;
-  line-height: 50px;
-}

assets/css/_page/_home.scss

@@ -1,13 +1,13 @@
 /** Home **/
-.intro {
+.home-intro {
   transform: translateY(25vh);
   text-align: center;
 
-  .avatar {
-    padding: 10px;
+  .home-avatar {
+    padding: 0.6rem;
 
     img {
-      width: 128px;
+      width: 8rem;
       height: auto;
       display: inline-block;
       -webkit-border-radius: 100%;
@@ -23,35 +23,35 @@
 
       &:hover {
         position: relative;
-        -webkit-transform: translateY(-0.75em);
-        -moz-transform: translateY(-0.75em);
-        -ms-transform: translateY(-0.75em);
-        -o-transform: translateY(-0.75em);
-        transform: translateY(-0.75em);
+        -webkit-transform: translateY(-0.75rem);
+        -moz-transform: translateY(-0.75rem);
+        -ms-transform: translateY(-0.75rem);
+        -o-transform: translateY(-0.75rem);
+        transform: translateY(-0.75rem);
         cursor: pointer;
       }
     }
   }
-}
 
-h2.description {
-  font-size: 1em;
-  font-weight: normal;
-  padding: 5px;
-}
+  .home-description {
+    font-size: 1rem;
+    font-weight: normal;
+    padding: .4rem;
+  }
 
-.social-links {
-  a {
+  .home-social-links {
+    padding-top: .6rem;
 
-    padding: 0 5px;
+    a {
+      padding: 0 .4rem;
 
-    &:hover {
+      &:hover {
+        background-color: transparent;
+      }
+    }
 
-      background-color: transparent;
+    i {
+      font-size: 1.4rem;
     }
   }
-
-  i {
-    font-size: 1.4em;
-  }
 }

assets/css/_page/_index.scss

@@ -14,9 +14,16 @@
 .archive {
   .post-title {
     text-align: right;
-    padding-bottom: 2em;
+    padding-bottom: 2rem;
   }
 
   @import "_terms";
   @import "_tags";
+}
+
+.single {
+  .post-title {
+    text-align: right;
+    padding-bottom: 2rem;
+  }
 }

assets/css/_page/_post.scss

@@ -1,10 +1,8 @@
 /** Post **/
-.post-header {
-  .post-title {
-    margin: 0 !important;
-    font-size: 2rem;
-    line-height: 3rem;
-  }
+.post-title {
+  margin: 0 !important;
+  font-size: 2rem;
+  line-height: 3rem;
 }
 
 .post-meta {
@@ -42,9 +40,18 @@
 
 .post-featured-image {
   padding-top: .6rem;
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+    overflow: hidden;
+  }
 }
 
 .post-toc {
+  display: block;
   position: absolute;
   width: 240px;
   max-width: 300px;
@@ -90,6 +97,7 @@
 }
 
 .post-toc-mobile {
+  display: none;
   padding-top: .8rem;
 
   details {
@@ -147,14 +155,6 @@
   }
 }
 
-.featured_image {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
 .post-content {
   a.post-title-target:target {
     display: block;
@@ -192,6 +192,12 @@
     }
   }
 
+  p {
+    font-size: 1em;
+    margin: .5em 0 .5em 0;
+    text-align: justify;
+  }
+
   a {
     color: $post-link-color;
 
@@ -343,6 +349,8 @@
   }
 
   .echarts {
+    width: 100%;
+    height: 30rem;
     margin: 3% auto;
     text-align: center;
   }
@@ -443,12 +451,26 @@
       }
     }
   }
-}
 
-p {
-  font-size: 1em;
-  margin: .5em 0 .5em 0;
-  text-align: justify;
+  .align-left {
+    text-align: left;
+  }
+
+  .align-center {
+    text-align: center;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+
+  .float-left {
+    float: left;
+  }
+
+  .float-right {
+    float: right;
+  }
 }
 
 .post-footer {
@@ -547,24 +569,4 @@ p {
 
 .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/_posts.scss

@@ -1,19 +1,18 @@
-.intro {
+.home-intro {
   transform: translateY(0);
-  padding: 2em 0 2em 0;
+  padding: 2rem 0 2rem 0;
 
-  .avatar {
+  .home-avatar {
     img {
-      width: 96px;
+      width: 6rem;
     }
   }
 }
 
 .post {
-  padding-top: 0.8em;
-  padding-bottom: 0.8em;
+  padding-top: 1rem;
+  padding-bottom: .8rem;
   color: $global-font-color;
-  border-top: 1px dashed $global-border-color;
   border-bottom: 1px dashed $global-border-color;
 
   .dark-theme & {
@@ -25,7 +24,7 @@
     width: 100%;
     padding: 30% 0 0;
     position: relative;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
 
     img {
       position: absolute;
@@ -36,11 +35,11 @@
   }
 
   .post-list-title {
-    font-size: 1.6em;
+    font-size: 1.6rem;
   }
 
   .post-meta {
-    font-size: 14px !important;
+    font-size: .875rem !important;
     a {
       color: $global-font-secondary-color !important;
 
@@ -59,10 +58,10 @@
   }
 
   .post-content {
-    padding-top: .2em;
-    font-size: 0.9em;
+    padding-top: .2rem;
+    font-size: .9rem;
     width: 100%;
-    max-height: 108px;
+    max-height: 6.8rem;
     overflow: hidden;
 
     h2,
@@ -70,25 +69,25 @@
     h4,
     h5,
     h6 {
-      font-size: 1em;
-      line-height: 1em;
-      padding-top: .3em;
-      padding-bottom: .3em;
+      font-size: 1rem;
+      line-height: 1rem;
+      padding-top: .3rem;
+      padding-bottom: .3rem;
     }
 
     p {
     margin: 0;
-    padding-top: .3em;
-    padding-bottom: .3em;
+    padding-top: .3rem;
+    padding-bottom: .3rem;
     }
   }
 
   .post-footer {
-    margin-top: 0.5em;
+    margin-top: .5rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 14px !important;
+    font-size: .875rem !important;
 
     a {
       color: $post-link-color !important;

assets/css/_page/_terms.scss

@@ -4,23 +4,23 @@
 
 .categories-card {
   margin: 0 auto;
-  margin-top: 3em;
+  margin-top: 3rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 0 2.5em;
-  line-height: 1.6em;
+  padding: 0 2.5rem;
+  line-height: 1.6rem;
 
   .card-item {
-    font-size: 14px;
+    font-size: .875rem;
     text-align: left;
     width: 45%;
     display: flex;
     align-items: flex-start;
-    margin-top: 2em;
-    min-height: 10em;
+    margin-top: 2rem;
+    min-height: 10rem;
     padding: 0 2%;
     position: relative;
 
@@ -78,6 +78,6 @@
 
   span {
     float: right;
-    padding-right: 1em;
+    padding-right: 1rem;
   }
 }

assets/css/_partial/_footer.scss

@@ -1,26 +1,25 @@
 /**Footer**/
-
 .copyright {
-  font-size: 14px;
+  font-size: .875rem;
 }
 
-#dynamic-to-top {
+.dynamic-to-top {
   display: none;
   overflow: hidden;
   width: auto;
   z-index: 90;
   position: fixed;
-  bottom: 2em;
-  right: 2em;
+  bottom: 2rem;
+  right: 2rem;
   top: auto;
   left: auto;
   font-family: sans-serif;
-  font-size: 1em;
+  font-size: 1rem;
   color: #fff;
   text-decoration: none;
   text-shadow: 0 1px 0 #333;
   font-weight: bold;
-  padding: 17px 16px;
+  padding: 1rem 1rem;
   border: 1px solid $global-border-color;
   background: #222;
   &:hover {
@@ -38,8 +37,8 @@
   span {
     display: block;
     overflow: hidden;
-    width: 14px;
-    height: 12px;
+    width: .875rem;
+    height: .75rem;
     background: url('data:image/png;base64,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') no-repeat center center;
   }
 

assets/css/_partial/_navbar.scss

@@ -1,27 +1,152 @@
-.header-logo a {
-  padding: 0;
-
-  i {
-    line-height: 2em;
-  }
-}
-
-.navbar .menu a {
-
-  padding: 0 8px;
-}
-
-.navbar .menu .active {
-  font-weight: 900;
-  color: $navbar-active-color;
+.navbar {
+  display: block;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+  height: 4rem;
+  line-height: 4rem;
+  background-color: $navbar-background-color;
 
   .dark-theme & {
-    color: $navbar-active-color-dark;
+    background-color: $navbar-background-color-dark;
+  }
+
+  .navbar-container {
+    width: auto;
+    max-width: 1200px;
+    text-align: center;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+
+    .navbar-header a {
+      padding: 0 8px;
+
+      i {
+        line-height: 2em;
+      }
+    }
+
+    .navbar-menu a {
+      padding: 0 8px;
+
+      &.active {
+        font-weight: 900;
+        color: $navbar-active-color;
+
+        .dark-theme & {
+          color: $navbar-active-color-dark;
+        }
+      }
+    }
   }
 }
 
-.navbar-header a:hover,
-.navbar .menu a:hover {
+.navbar-mobile {
+  display: none;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+  transition: all 0.3s ease 0s;
 
-  background-color: transparent;
+  .navbar-container {
+    padding: 0;
+    margin: 0;
+    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: 4.5em;
+
+        span {
+          display: block;
+          background: #000;
+          width: 36px;
+          height: 2px;
+          -webkit-border-radius: 3px;
+          -moz-border-radius: 3px;
+          border-radius: 3px;
+          -webkit-transition: .2s margin .2s, .2s transform;
+          -moz-transition: .2s margin .2s, .2s transform;
+          transition: .2s margin .2s, .2s transform;
+
+          .dark-theme & {
+            background: $global-font-color-dark;
+          }
+        }
+
+        span:nth-child(1) {
+          margin-bottom: 8px;
+        }
+
+        span:nth-child(3) {
+          margin-top: 8px;
+        }
+
+        &.active {
+          span {
+            -webkit-transition: .2s margin, .2s transform .2s;
+            -moz-transition: .2s margin, .2s transform .2s;
+            transition: .2s margin, .2s transform .2s;
+          }
+
+          span:nth-child(1) {
+            -moz-transform: rotate(45deg) translate(4px, 6px);
+            -ms-transform: rotate(45deg) translate(4px, 6px);
+            -webkit-transform: rotate(45deg) translate(4px, 6px);
+            transform: rotate(45deg) translate(4px, 6px);
+          }
+
+          span:nth-child(2) {
+            opacity: 0
+          }
+
+          span:nth-child(3) {
+            -moz-transform: rotate(-45deg) translate(8px, -10px);
+            -ms-transform: rotate(-45deg) translate(8px, -10px);
+            -webkit-transform: rotate(-45deg) translate(8px, -10px);
+            transform: rotate(-45deg) translate(8px, -10px);
+          }
+        }
+      }
+    }
+
+    .navbar-menu {
+      text-align: center;
+      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);
+
+      a {
+        display: block;
+        line-height: 2.5em;
+      }
+
+      &.active {
+        display: block;
+      }
+
+      .dark-theme & {
+        background: $global-background-color-dark;
+        border-top: 2px solid $global-font-color-dark;
+      }
+    }
+
+    .dark-theme & {
+      background: $global-background-color-dark;
+    }
+  }
 }

assets/css/_partial/_pagination.scss

@@ -1,5 +1,4 @@
   /** pagination **/
-
 .pagination {
   display: flex;
   flex-direction: row;
@@ -7,13 +6,13 @@
   list-style: none;
   white-space: nowrap;
   width: 100%;
-  padding-top: 1em;
+  padding-top: 1rem;
 
   a {
     -webkit-font-smoothing: antialiased;
-    font-size: 0.8em;
+    font-size: .8rem;
     color: #bfbfbf;
-    letter-spacing: 0.1em;
+    letter-spacing: .1rem;
     font-weight: 700;
     padding: 5px 5px;
     text-decoration: none;

assets/css/lib/VERSION

@@ -1,4 +1,5 @@
 fontawesome-free@5.10.1
 gittalk@1.5.0
 katex@0.11.0
-aplayer@1.10.1
+aplayer@1.10.1
+animate.css@3.7.2

assets/js/blog.js

@@ -5,8 +5,8 @@ jQuery(function($) {
     var _Blog = window._Blog || {};
 
     _Blog.toggleMobileMenu = function() {
-        $('.menu-toggle').on('click', () => {
-            $('.menu-toggle').toggleClass('active');
+        $('#menu-toggle').on('click', () => {
+            $('#menu-toggle').toggleClass('active');
             $('#mobile-menu').toggleClass('active');
         });
     };
@@ -32,29 +32,48 @@ jQuery(function($) {
 
     _Blog.dynamicToTop = function() {
         const min = 300;
-        const speed = 300;
-        const fade_in = 600;
-        const fade_out = 400;
         var $toTop = $('#dynamic-to-top');
-        $toTop.click(function() {
-          $('html, body').stop().animate({
-            scrollTop: 0
-          }, speed, 'linear');
-          return false;
-        });
         $(window).scroll(function() {
-          var scrollTop = $(window).scrollTop();
-          if (typeof document.body.style.maxHeight === 'undefined') {
-            $toTop.css({
-              'position': 'absolute',
-              'top': scrollTop + $(window).height() - 20,
-            });
-          }
-          if (scrollTop > min) {
-            $toTop.fadeIn(fade_in);
-          } else {
-            $toTop.fadeOut(fade_out);
-          }
+            var scrollTop = $(window).scrollTop();
+            if (typeof document.body.style.maxHeight === 'undefined') {
+                $toTop.css({
+                    'position': 'absolute',
+                    'top': scrollTop + $(window).height() - 20,
+                });
+            }
+            if (scrollTop > min) {
+                (function fadeIn(el, display){
+                    display = display || "block";
+                    if (el.style.display !== display) {
+                        el.style.opacity = 0;
+                        el.style.display = display;
+                        (function fade() {
+                            var val = parseFloat(el.style.opacity);
+                            if (!((val += .1) > 1)) {
+                                el.style.opacity = val;
+                                requestAnimationFrame(fade);
+                            }
+                        })();
+                    }
+                })(document.getElementById('dynamic-to-top'));
+            } else {
+                (function fadeOut(el){
+                    if (el.style.display !== "none") {
+                        el.style.opacity = 1;
+                        (function fade() {
+                            if ((el.style.opacity -= .1) < 0) {
+                                el.style.display = "none";
+                            } else {
+                                requestAnimationFrame(fade);
+                            }
+                        })();
+                    }
+                })(document.getElementById('dynamic-to-top'));
+            }
+        });
+        new SmoothScroll('#dynamic-to-top', {
+            speed: 300,
+            speedAsDuration: true,
         });
     };
 
@@ -106,10 +125,10 @@ jQuery(function($) {
     };
 
     _Blog._initToc = function() {
-        const $toc = $('.post-toc');
+        const $toc = $('#post-toc');
         if ($toc.length && $toc.css('display') !== 'none') {
             const SPACING = 100;
-            const $footer = $('.post-footer');
+            const $footer = $('#post-footer');
             const minTop = $toc.position().top;;
             const mainTop = $('main').position().top;
             const minScrollTop = minTop + mainTop - SPACING;
@@ -212,25 +231,28 @@ jQuery(function($) {
             }
             echartsArr = [];
             Object.keys(echartsMap).forEach(function(id) {
-                let myChart = echarts.init(document.getElementById(id), isDark ? 'dark' : 'light');
+                let myChart = echarts.init(document.getElementById(id), window.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
                 myChart.setOption(echartsMap[id]);
                 echartsArr.push(myChart);
             });
+            window.addEventListener("resize", function() {
+                this.setTimeout(function(){
+                    for (let i = 0; i < echartsArr.length; i++) {
+                        echartsArr[i].resize();
+                    }
+                }, 0);
+            }, false);
         }
     }
 
     _Blog.countdown = function() {
         if (window.countdownMap) {
             Object.keys(countdownMap).forEach(function(id) {
-              $(`#${id}`).countdown(countdownMap[id], {elapse: true})
-                .on('update.countdown', function(event) {
-                  var $this = $(this).html(event.strftime(''
-                    + '<span>%D</span> 天 <br />'
-                    + '<span>%H</span> 时 '
-                    + '<span>%M</span> 分 '
-                    + '<span>%S</span> 秒'));
-              });
-          });
+                $(`#${id}`).countdown(countdownMap[id]['date'], {elapse: true})
+                    .on('update.countdown', function(event) {
+                    $(this).html(event.strftime(countdownMap[id]['pattern']));
+                });
+            });
         }
     };
 

assets/js/lib/VERSION

@@ -8,4 +8,5 @@ echarts@4.2.1
 typeit@6.0.3
 jquery-countdown@2.2.0
 aplayer@1.10.1
-meting@2.0.1
+meting@2.0.1
+smooth-scroll@16.1.0

assets/js/lib/echarts/macarons.js

@@ -0,0 +1,217 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ];
+
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#008acd'
+            }
+        },
+
+        visualMap: {
+            itemWidth: 15,
+            color: ['#5ab1ef','#e0ffff']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            axisPointer : {
+                type : 'line',
+                lineStyle : {
+                    color: '#008acd'
+                },
+                crossStyle: {
+                    color: '#008acd'
+                },
+                shadowStyle : {
+                    color: 'rgba(200,200,200,0.2)'
+                }
+            }
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#efefff',
+            fillerColor: 'rgba(182,162,222,0.2)',
+            handleColor: '#008acd'
+        },
+
+        grid: {
+            borderColor: '#eee'
+        },
+
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitArea : {
+                show : true,
+                areaStyle : {
+                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        timeline : {
+            lineStyle : {
+                color : '#008acd'
+            },
+            controlStyle : {
+                normal : { color : '#008acd'},
+                emphasis : { color : '#008acd'}
+            },
+            symbol : 'emptyCircle',
+            symbolSize : 3
+        },
+
+        line: {
+            smooth : true,
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#d87a80',
+                    color0: '#2ec7c9',
+                    lineStyle: {
+                        color: '#d87a80',
+                        color0: '#2ec7c9'
+                    }
+                }
+            }
+        },
+
+        scatter: {
+            symbol: 'circle',
+            symbolSize: 4
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#d87a80'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderColor: '#eee',
+                    areaColor: '#ddd'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        gauge : {
+            axisLine: {
+                lineStyle: {
+                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
+                    width: 10
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length :15,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length :22,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer : {
+                width : 5
+            }
+        }
+    };
+
+    echarts.registerTheme('macarons', theme);
+}));

i18n/en.toml

@@ -7,6 +7,9 @@ other = "Posts"
 # === Post ===
 
 # === Taxonomy ===
+[all]
+other = "All "
+
 [tag]
 other = "Tag"
 
@@ -69,6 +72,18 @@ other = "Home"
 
 [readmore]
 other = "Read More"
+
+[day]
+other = "d"
+
+[hour]
+other = "hr"
+
+[minute]
+other = "min"
+
+[second]
+other = "sec"
 # === posts/single.html ===
 
 # === 404.html ===
@@ -78,6 +93,3 @@ other = "Page not found"
 [backToHome]
 other = "Back to Home"
 # === 404.html ===
-
-[all]
-other = "All "

i18n/zh.toml

@@ -7,6 +7,9 @@ other = "文章"
 # === Post ===
 
 # === Taxonomy ===
+[all]
+other = "所有"
+
 [tag]
 other = "标签"
 
@@ -72,6 +75,18 @@ other = "主页"
 
 [readmore]
 other = "阅读全文"
+
+[day]
+other = "天"
+
+[hour]
+other = "时"
+
+[minute]
+other = "分"
+
+[second]
+other = "秒"
 # === posts/single.html ===
 
 # === 404.html ===
@@ -81,6 +96,3 @@ other = "页面没找到"
 [backToHome]
 other = "回到主页"
 # === 404.html ===
-
-[all]
-other = "所有"

layouts/_default/baseof.html

@@ -1,26 +1,29 @@
+{{ if ne .Site.Params.version "5.x" -}}
+  {{ errorf "\n\nThere are two possible situations that led to this error:\n  1. You haven't copied the config.toml yet. See https://github.com/dillonzq/LoveIt#installation \n  2. You have an incompatible update. See https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n\n有两种可能的情况会导致这个错误发生:\n  1. 你还没有复制 config.toml 参考 https://github.com/dillonzq/LoveIt#installation \n  2. 你进行了一次不兼容的更新 参考 https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n" -}}
+{{ end -}}
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
-        {{ partial "head.html" . }}
+        {{- partial "head.html" . }}
     </head>
     <body>
         <script>
-            var isDark = (window.localStorage && window.localStorage.getItem('theme')) === 'dark';
-            if (isDark) document.body.classList.add('dark-theme');
+            window.isDark = (window.localStorage && window.localStorage.getItem('theme')) === 'dark';
+            window.isDark && document.body.classList.add('dark-theme');
         </script>
         <div class="wrapper">
-            {{ partial "header.html" . }}
+            {{ partial "header.html" . -}}
             <main class="main">
                 <div class="container">
-                    {{ block "content" . }}{{ end }}
+                    {{ block "content" . }}{{ end -}}
                 </div>
             </main>
-            {{ partial "footer.html" . }}
-            {{ partial "scripts.html" . }}
+            {{ partial "footer.html" . -}}
+            {{ partial "scripts.html" . -}}
         </div>
-        <a href="#" id="dynamic-to-top"><span>&nbsp;</span></a>
+        <a href="#" class="dynamic-to-top" id="dynamic-to-top"><span>&nbsp;</span></a>
     </body>
 </html>

layouts/_default/section.html

@@ -1,11 +1,12 @@
-{{ define "title" }}{{ T .Section | default (humanize .Section) }} | {{ .Site.Title }}{{ end -}}
+{{ define "title" }}{{ T "all" }}{{ T .Section | default (humanize .Section) }} | {{ .Site.Title }}{{ end -}}
 
 {{ define "content" -}}
     {{ $data := .Data -}}
     <div class="post-warp archive">
-        <h2 class="post-title">
+        <h2 class="post-title animated pulse faster">
             {{ printf "%s%s" (T "all") (T .Section | default (humanize .Section)) }}
         </h2>
+
         {{- range (.Paginate (.Pages.GroupByDate "2006")).PageGroups -}}
             <h3>{{ .Key }}</h3>
             {{- range .Pages -}}

layouts/_default/single.html

@@ -1,10 +1,8 @@
 {{ define "title" }}{{ .Title }} | {{ .Site.Title }}{{ end }}
 
 {{ define "content" }}
-    <div class="post-warp">
-        <header class="post-header">
-            <div class="align-right"><h1 class="post-title">{{ .Title }}</h1></div>
-        </header>
+    <div class="post-warp single">
+        <h1 class="post-title animated pulse faster">{{ .Title }}</h1>
         <div class="post-content">
             {{ .Content }}
         </div>

layouts/_default/single.md

@@ -1 +1,3 @@
+# {{ .Title }}
+
 {{ .RawContent }}

layouts/_default/summary.html

@@ -13,11 +13,10 @@
         </div>
     {{ end }}
     <!-- end featured_image-->
-    <header class="post-header">
-        <h1 class="post-title post-list-title" itemprop="name headline">
-            <a href="{{ .Permalink }}">{{ .Title }}</a>
-        </h1>
-    </header>
+    <h1 class="post-title post-list-title" itemprop="name headline">
+        <a href="{{ .Permalink }}">{{ .Title }}</a>
+    </h1>
+
     <div class="post-meta">
         <a class="author" href="{{.Site.BaseURL }}" rel="author"><i class="fas fa-user-circle"></i>&nbsp;{{ $author }}&nbsp;</a>
         {{ T "publish" }}<span class="post-time">&nbsp;<time datetime={{ $publish_date }}>{{ $publish_date }}</time>&nbsp;</span>

layouts/partials/head.html

@@ -1,26 +1,26 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="robots" content="noodp" />
-{{ with .Site.Params.google_verification }}
+{{ with .Site.Params.google_verification -}}
     <meta name="google-site-verification" content="{{ . }}" />
-{{ end }}
-{{ with .Site.Params.bing_verification }}
+{{ end -}}
+{{ with .Site.Params.bing_verification -}}
     <meta name="msvalidate.01" content="{{ . }}" />
-{{end}}
-{{ with .Site.Params.yandex_verification }}
+{{ end -}}
+{{ with .Site.Params.yandex_verification -}}
     <meta name="yandex-verification" content="{{ . }}" />
-{{ end }}
-{{ with .Site.Params.pinterest_verification }}
+{{ end -}}
+{{ with .Site.Params.pinterest_verification -}}
     <meta name="p:domain_verify" content="{{ . }}" />
-{{ end }}
-{{ with .Site.Params.baidu_verification }}
+{{ end -}}
+{{ with .Site.Params.baidu_verification -}}
     <meta name=”baidu-site-verification” content="{{ . }}" />
-{{ end }}
-{{ if .PrevInSection }}
-    <link rel="prev" href="{{.PrevInSection.Permalink}}" />
-{{ end }}
-{{ if .NextInSection}}
+{{ end -}}
+{{ if .PrevInSection -}}
+    <link rel="prev" href="{{ .PrevInSection.Permalink }}" />
+{{ end -}}
+{{ if .NextInSection -}}
     <link rel="next" href="{{ .NextInSection.Permalink }}" />
-{{end}}
+{{ end -}}
 <link rel="canonical" href="{{ .Permalink }}" />
 <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -30,20 +30,26 @@
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 <meta name="msapplication-TileColor" content="#da532c">
 <meta name="theme-color" content="#ffffff">
-{{- with .OutputFormats.Get "RSS" -}}
-    <link rel="alternate" href="{{ .RelPermalink }}" type="application/rss+xml" title="{{ site.Title }}">
-    <link rel="feed" href="{{ .RelPermalink }}" type="application/rss+xml" title="{{ site.Title }}">
-{{- end -}}
+{{ with .OutputFormats.Get "RSS" -}}
+    <link rel="alternate" href="{{ .RelPermalink }}" type="application/rss+xml" title="{{ $.Site.Title }}">
+    <link rel="feed" href="{{ .RelPermalink }}" type="application/rss+xml" title="{{ $.Site.Title }}">
+{{ end -}}
 
-{{- template "_internal/twitter_cards.html" . -}}
+{{ template "_internal/twitter_cards.html" . -}}
 
-{{- partial "seo_schema.html" . -}}
+{{ partial "seo.html" . -}}
 
-{{- $res := resources.Get "css/style.scss" | resources.ToCSS | resources.Minify -}}
+{{ $res := resources.Get "css/style.scss" | resources.ToCSS | resources.Minify -}}
 <link rel="stylesheet" href="{{ $res.RelPermalink }}">
-{{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.fontawesome_free_css }}
+{{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.fontawesome_free_css -}}
     {{ .Site.Params.cdn.fontawesome_free_css | safeHTML }}
-{{ else }}
-    {{- $res := resources.Get "css/lib/fontawesome-free/all.min.css" | resources.Minify | resources.Fingerprint "sha512" -}}
+{{ else -}}
+    {{ $res := resources.Get "css/lib/fontawesome-free/all.min.css" | resources.Minify -}}
+    <link rel="stylesheet" href="{{ $res.RelPermalink }}">
+{{ end }}
+{{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.animate_css -}}
+    {{ .Site.Params.cdn.animate_css | safeHTML }}
+{{ else -}}
+    {{ $res := resources.Get "css/lib/animate/animate.min.css" | resources.Minify -}}
     <link rel="stylesheet" href="{{ $res.RelPermalink }}">
 {{ end }}

layouts/partials/header.html

@@ -1,10 +1,9 @@
 <nav class="navbar">
-    <div class="container">
-        <div class="navbar-header header-logo">
+    <div class="navbar-container">
+        <div class="navbar-header">
             <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
         </div>
-
-        <div class="menu navbar-right">
+        <div class="navbar-menu">
             {{ $currentPage := . }}
             {{ range .Site.Menus.main }}
                 <a class="menu-item{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) | or (eq $currentPage.RelPermalink .URL) }} active{{ end }}" href="{{ .URL | absLangURL }}" title="{{ .Title }}">{{ .Name }}</a>
@@ -13,19 +12,18 @@
         </div>
     </div>
 </nav>
-<nav class="navbar-mobile" id="nav-mobile" style="display: none">
-     <div class="container">
+<nav class="navbar-mobile">
+     <div class="navbar-container">
         <div class="navbar-header">
-            <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">
+            <div><a href="javascript:void(0);" class="theme-switch"><i class="fas fa-adjust fa-rotate-180"></i></a>&nbsp;&nbsp;<a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a></div>
+            <div class="menu-toggle" id="menu-toggle">
                 <span></span><span></span><span></span>
             </div>
         </div>
-
-        <div class="menu" id="mobile-menu">
+        <div class="navbar-menu" id="mobile-menu">
             {{ $currentPage := . }}
             {{ 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>
+                <a class="menu-item" href="{{ .URL | absLangURL }}" title="{{ .Title }}">{{ .Name }}</a>
             {{ end }}
         </div>
     </div>

layouts/partials/home/profile.html

@@ -1,4 +1,4 @@
-<div class="intro">
+<div class="home-intro">
     {{ $avatar := "" }}
     {{ if .Site.Params.gravatar.email }}
         {{ $avatar = (printf "https://www.gravatar.com/avatar/%s?s=240&d=mp" (md5 .Site.Params.gravatar.email)) }}
@@ -6,7 +6,7 @@
         {{ $avatar = .Site.Params.avatar }}
     {{ end }}
     {{ if $avatar }}
-        <div class="avatar">
+        <div class="home-avatar">
             <a href="/posts/">
                 <img src={{ $avatar }} alt="avatar">
             </a>
@@ -14,7 +14,7 @@
     {{ end }}
 
     {{ with .Site.Params.subtitle }}
-        <h2 class="description">
+        <h2 class="home-description">
             {{ $id := md5 . | printf "tp-%s" }}
             <div id={{ printf "r%s" $id }} hidden=true>{{ . | safeHTML }}</div>
             <div id={{ $id }} class="typeit"></div>
@@ -26,7 +26,7 @@
         </h2>
     {{ end }}
 
-    <div class="social-links">
+    <div class="home-social-links">
         {{ partial "home/social.html" . }}
     </div>
 </div>

layouts/partials/post/footer.html

@@ -1,5 +1,5 @@
 {{ $modify_date := .Lastmod.Format (.Site.Params.dateFormatToUse | default "2006-01-02") -}}
-<div class="post-footer">
+<div class="post-footer" id="post-footer">
     <div class="post-info">
         <div class="post-info-line">
             <div class="post-info-mod">

layouts/partials/scripts.html

@@ -3,7 +3,7 @@
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.jquery_js }}
     {{ $jquery = .Site.Params.cdn.jquery_js }}
 {{ else }}
-    {{ $res := resources.Get "js/lib/jquery/jquery.min.js" | resources.Minify }}
+    {{ $res := resources.Get "js/lib/jquery/jquery.slim.min.js" | resources.Minify }}
     {{ $jquery = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
 <!-- lazysizes https://github.com/aFarkas/lazysizes -->
@@ -34,26 +34,34 @@
     {{ $katex_auto_render_js = .Site.Params.cdn.katex_auto_render_js }}
 {{ else }}
     {{ $res := resources.Get "js/lib/katex/auto-render.min.js" | resources.Minify }}
-    {{ $katex_auto_render_js = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
+    {{ $katex_auto_render_js = printf "<script defer src=\"%s\" onload=\"renderMathInElement(document.body);\"></script>" $res.RelPermalink }}
 {{ end }}
 {{ $katex := delimit (slice $katex_css $katex_js $katex_auto_render_js) "" }}
 <!-- mermaid https://github.com/knsv/mermaid -->
-{{ $diagram := "" }}
+{{ $mermaid := "" }}
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.mermaid_js }}
-    {{ $diagram = .Site.Params.cdn.mermaid_js }}
+    {{ $mermaid = .Site.Params.cdn.mermaid_js }}
 {{ else }}
     {{ $res := resources.Get "js/lib/mermaid/mermaid.min.js" | resources.Minify }}
-    {{ $diagram = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
+    {{ $mermaid = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
-{{ $diagram = delimit (slice $diagram "<script>mermaid.initialize({startOnLoad: true, theme: null,});</script>") "" }}
+{{ $mermaid = delimit (slice $mermaid "<script>mermaid.initialize({startOnLoad: true, theme: null,});</script>") "" }}
 <!-- ECharts https://github.com/apache/incubator-echarts -->
-{{ $echarts := "" }}
+{{ $echarts_js := "" }}
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.echarts_js }}
-    {{ $echarts = .Site.Params.cdn.echarts_js }}
+    {{ $echarts_js = .Site.Params.cdn.echarts_js }}
 {{ else }}
     {{ $res := resources.Get "js/lib/echarts/echarts.min.js" | resources.Minify }}
-    {{ $echarts = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
+    {{ $echarts_js = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
+{{ $echarts_macarons_js := "" }}
+{{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.echarts_macarons_js }}
+    {{ $echarts_macarons_js = .Site.Params.cdn.echarts_macarons_js }}
+{{ else }}
+    {{ $res := resources.Get "js/lib/echarts/macarons.js" | resources.Minify }}
+    {{ $echarts_macarons_js = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
+{{ end }}
+{{ $echarts := delimit (slice $echarts_js $echarts_macarons_js) "" }}
 <!-- TypeIt https://github.com/alexmacarthur/typeit -->
 {{ $typeit := "" }}
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.typeit_js }}
@@ -70,7 +78,7 @@
     {{ $res := resources.Get "js/lib/jquery-countdown/jquery.countdown.min.js" | resources.Minify }}
     {{ $countdown = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
-<!-- MetingJS https://github.com/metowolf/MetingJS -->
+<!-- APlayer https://github.com/MoePlayer/APlayer -->
 {{ $aplayer_css := "" }}
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.aplayer_css }}
     {{ $aplayer_css = .Site.Params.cdn.aplayer_css }}
@@ -85,31 +93,44 @@
     {{ $res := resources.Get "js/lib/aplayer/APlayer.min.js" | resources.Minify }}
     {{ $aplayer_js = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
-{{ $meting_js := "" }}
+{{ $aplayer := delimit (slice $aplayer_css $aplayer_js) "" }}
+<!-- MetingJS https://github.com/metowolf/MetingJS -->
+{{ $meting := "" }}
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.meting_js }}
-    {{ $meting_js = .Site.Params.cdn.meting_js }}
+    {{ $meting = .Site.Params.cdn.meting_js }}
 {{ else }}
     {{ $res := resources.Get "js/lib/meting/Meting.min.js" | resources.Minify }}
-    {{ $meting_js = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
+    {{ $meting = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
+{{ end }}
+<!-- Smooth Scroll https://github.com/cferdinandi/smooth-scroll -->
+{{ $smooth_scroll := "" }}
+{{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.smooth_scroll_js }}
+    {{ $smooth_scroll = .Site.Params.cdn.smooth_scroll_js }}
+{{ else }}
+    {{ $res := resources.Get "js/lib/smooth-scroll/smooth-scroll.polyfills.min.js" | resources.Minify }}
+    {{ $smooth_scroll = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
-{{ $metingjs := delimit (slice $aplayer_css $aplayer_js $meting_js) "" }}
 
 {{ $jquery | safeHTML }}
 {{ $lazysizes | safeHTML }}
+{{ $smooth_scroll | safeHTML }}
 
 {{ if .IsPage }}
-    {{ if .Scratch.Get "diagram" }}
-        {{ $diagram | safeHTML }}
+    {{/*  dev feature */}}
+    {{ if .Params.dev }}
+        {{ with .Scratch.Get "echartsMap" }}
+            {{ $echarts | safeHTML }}
+            {{ $echartsMap := . }}
+            <script>window.echartsMap = {
+                {{ range $key, $var := $echartsMap }}
+                    {{ $key }}: {{ $var | safeJS }},
+                {{ end }}
+            };window.echartsArr=[];</script>
+        {{ end }}
     {{ end }}
 
-    {{ with .Scratch.Get "echartsMap" }}
-        {{ $echarts | safeHTML }}
-        {{ $echartsMap := . }}
-        <script>var echartsMap = {
-            {{ range $key, $var := $echartsMap }}
-                {{ $key }}: {{ $var | safeJS }},
-            {{ end }}
-        };var echartsArr=[];</script>
+    {{ if .Scratch.Get "diagram" }}
+        {{ $mermaid | safeHTML }}
     {{ end }}
 
     {{ if or .Params.math .Site.Params.math }}
@@ -117,12 +138,13 @@
     {{ end }}
 
     {{ if .Scratch.Get "music" }}
-        {{ $metingjs | safeHTML }}
+        {{ $aplayer | safeHTML }}
+        {{ $meting | safeHTML }}
     {{ end }}
 
     {{ with .Scratch.Get "countdownMap" }}
         {{ $countdown | safeHTML }}
-        <script>var countdownMap = {{ . | jsonify | safeJS }};</script>
+        <script>window.countdownMap = {{ . | jsonify | safeJS }};</script>
     {{ end }}
 {{ end }}
 
@@ -133,7 +155,7 @@
     {{ range $key, $val := $typeitMap }}
         {{ $typeitArr = $typeitArr | append (slice $val) }}
     {{ end }}
-    <script>var typeitArr = {{ $typeitArr | jsonify | safeJS }};</script>
+    <script>window.typeitArr = {{ $typeitArr | jsonify | safeJS }};</script>
 {{ end }}
 
 {{ $res := resources.Get "/js/blog.js" | resources.Minify }}

layouts/partials/seo.html

@@ -1,17 +1,17 @@
-{{ if .IsHome }}
+{{ if .IsHome -}}
     <script type="application/ld+json">
     {
     "@context": "http://schema.org",
     "@type": "WebSite",
     "url": "{{ .Site.BaseURL }}",
-    {{ if .Site.Author.name }}
+    {{ with .Site.Author.name }}
         "author": {
             "@type": "Person",
-            "name": "{{ .Site.Author.name }}"
+            "name": "{{ . }}"
         },
     {{ end }}
-    {{ if .Site.Params.description }}
-        "description": "{{ .Site.Params.description }}",
+    {{ with .Site.Params.description }}
+        "description": "{{ . }}",
     {{ end }}
     {{ with .Site.Params.image }}
         "image": "{{ .url | absURL }}",
@@ -25,8 +25,7 @@
     "name": "{{ .Site.Title }}"
     }
     </script>
-
-{{ else if .IsPage }}
+{{ else if .IsPage -}}
     <script type="application/ld+json">
     {
     "@context": "http://schema.org",
@@ -80,13 +79,13 @@
             }
         },
     {{ end }}
-    {{ if .Site.Author.Name }}
+    {{ with .Site.Author.Name }}
         "author": {
             "@type": "Person",
-            "name": "{{ .Site.Author.Name }}"
+            "name": "{{ . }}"
         },
     {{ end }}
     "description": "{{ .Description }}"
     }
     </script>
-{{ end }}
+{{ end }}

layouts/posts/single.html

@@ -8,9 +8,7 @@
     {{ end }}
 
     <article class="post-warp">
-        <header class="post-header">
-            <h1 class="post-title">{{ .Title }}</h1>
-        </header>
+        <h1 class="post-title animated flipInX">{{ .Title }}</h1>
 
         <div class="post-meta">
             <div class="post-meta-main">
@@ -41,7 +39,7 @@
 
         {{ with .Params.featured_image }}
             <div class="post-featured-image">
-                <img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
+                <img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="lazyload">
             </div>
         {{ end }}
 

layouts/shortcodes/countdown.html

@@ -1,16 +1,12 @@
-{{ if .Get "id" -}}
-    {{ $id := .Get "id" -}}
-    {{ if .Get "date" -}}
-        {{ $date := .Get "date" -}}
-        {{ with .Page.Scratch.Get "countdownMap" -}}
-            {{ .Page.Scratch.Set "countdownMap" (dict $id $date | merge .) -}}
-        {{ else -}}
-            {{ .Page.Scratch.Set "countdownMap" (dict $id $date) -}}
-        {{ end -}}
-        {{ with .Get "class" -}}
-            <div id={{ $id }} class="{{ . }}"></div>
-        {{- else -}}
-            <div id={{ $id }}></div>
-        {{- end -}}
+{{ if .Get "date" -}}
+    {{ $date := .Get "date" }}
+    {{ $id := delimit (split (md5 $date) "" | shuffle) "" | printf "cd-%s" -}}
+    {{ $defaultPattern := printf "%%D %s %%H %s %%M %s %%S %s" (T "day") (T "hour") (T "minute") (T "second") }}
+    {{ $new := dict $id (dict "date" $date "pattern" (.Get "pattern" | default $defaultPattern)) }}
+    {{ with .Page.Scratch.Get "countdownMap" -}}
+        {{ .Page.Scratch.Set "countdownMap" (merge . $new) -}}
+    {{ else -}}
+        {{ .Page.Scratch.Set "countdownMap" $new -}}
     {{ end -}}
-{{ end }}
+    <div id="{{ $id }}"></div>
+{{ end -}}

layouts/shortcodes/echarts.html

@@ -7,8 +7,4 @@
     {{ $echartsMap = dict $id .Inner -}}
 {{ end -}}
 {{ .Page.Scratch.Set "echartsMap" $echartsMap -}}
-{{ if .IsNamedParams }}
-    <div class="echarts" id="{{ $id }}" style="width: {{ .Get "width" }}; height: {{ .Get "height" }};"></div>
-{{ else }}
-    <div class="echarts" id="{{ $id }}" style="width: {{ .Get 0 }}; height: {{ .Get 1 }};"></div>
-{{ end }}
+<div class="echarts" id="{{ $id }}"></div>

layouts/taxonomy/list.html

@@ -2,7 +2,7 @@
 
 {{ define "content" }}
     <div class="post-warp archive">
-        <h2 class="post-title">
+        <h2 class="post-title animated pulse faster">
             {{ $taxonomy := .Data.Singular }}
             {{ if eq $taxonomy "category" }}
                 <i class="far fa-folder-open"></i>&nbsp;{{ .Title }}
@@ -12,6 +12,7 @@
                 {{ printf "%s - %s" (T $taxonomy | default  (humanize $taxonomy)) .Title }}
             {{ end }}
         </h2>
+
         {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
             <h3>{{ .Key }}</h3>
             {{ range .Pages }}

layouts/taxonomy/terms.html

@@ -1,4 +1,4 @@
-{{ define "title" }}{{ T .Data.Plural | default (humanize .Data.Plural) }} | {{ .Site.Title }}{{ end }}
+{{ define "title" }}{{ T "all" }}{{ T .Data.Plural | default (humanize .Data.Plural) }} | {{ .Site.Title }}{{ end }}
 
 {{ define "content" }}
     {{ $taxonomies := .Data.Plural }}
@@ -6,7 +6,7 @@
     {{ $type := .Type }}
 
     <div class="post-warp archive">
-        <h2 class="post-title">
+        <h2 class="post-title animated pulse faster">
             {{- printf "%s%s" (T "all") (T $taxonomies | default (humanize $taxonomies)) -}}
         </h2>