Merge branch 'dev'

assets/css/_page/_post.scss

@@ -344,6 +344,10 @@
   @import "../_partial/_post/admonition";
 
   .mermaid {
+    width: 100%;
+    margin: 3% auto;
+    text-align: center;
+
     @import "../_mermaid/neutral/index";
 
     .dark-theme & {
@@ -364,6 +368,7 @@
     height: 0;
     padding-bottom: 75%;
     margin: 3% auto;
+    text-align: center;
 
     iframe {
       position: absolute;

assets/css/_partial/_post/_code.scss

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

assets/css/_variables.scss

@@ -19,8 +19,8 @@ $global-font-secondary-color-dark: #87878d !default;
 
 $global-link-color: #161209 !default;
 $global-link-color-dark: #a9a9b3 !default;
-$global-link-hover-color:#2d96bd !default;
+$global-link-hover-color: #2d96bd !default;
-$global-link-hover-color-dark:#fff !default;
+$global-link-hover-color-dark: #fff !default;
 
 $global-border-color: #dcdcdc !default;
 $global-border-color-dark: #4a4b50 !default;
@@ -39,12 +39,12 @@ $pagination-link-active-color: #000 !default;
 $pagination-link-active-color-dark: #fff !default;
 
 // Color of the table background.
-$table-background-color: white !default;
+$table-background-color: #fff !default;
-$table-background-color-dark: #272C34 !default;
+$table-background-color-dark: #272c34 !default;
 
 // Color of the table thead.
 $table-thead-color: #EDEDED !default;
-$table-thead-color-dark: #20252B !default;
+$table-thead-color-dark: #20252b !default;
 
 // ========== Code ========== //
 // Color of the code.

assets/css/lib/aplayer/Aplayer.dark.scss

@@ -0,0 +1,114 @@
+.aplayer {
+  .dark-theme & {
+    background: #212121;
+
+    &.aplayer-withlist {
+      .aplayer-info {
+        border-bottom-color: #5c5c5c;
+      }
+    }
+
+    &.aplayer-fixed {
+      .aplayer-list {
+        border-color: #5c5c5c;
+      }
+    }
+
+    .aplayer-body {
+      background-color: #212121;
+    }
+
+    .aplayer-info {
+      border-top-color: #212121;
+    }
+
+    .aplayer-info {
+      .aplayer-music {
+        .aplayer-title {
+          color: #fff;
+        }
+
+        .aplayer-author {
+          color: #fff;
+        }
+      }
+
+      .aplayer-controller {
+        .aplayer-time {
+          color: #eee;
+
+          .aplayer-icon {
+            path {
+              fill: #eee;
+            }
+          }
+        }
+      }
+    }
+
+    .aplayer-list {
+      background-color: #212121;
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #999;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background-color: #bbb;
+      }
+
+      li {
+        color: #fff;
+        border-top-color: #666;
+
+        &:hover {
+          background: #4e4e4e;
+        }
+
+        &.aplayer-list-light {
+          background: #6c6c6c;
+        }
+
+        .aplayer-list-index {
+          color: #ddd;
+        }
+
+        .aplayer-list-author {
+          color: #ddd;
+        }
+      }
+    }
+
+    .aplayer-lrc {
+      text-shadow: -1px -1px 0 #666;
+
+      &:before {
+        background: -moz-linear-gradient(top, rgba(33,33,33,1) 0%, rgba(255,255,255,0) 100%);
+        background: -webkit-linear-gradient(top, rgba(33,33,33,1) 0%,rgba(255,255,255,0) 100%);
+        background: linear-gradient(to bottom, rgba(33,33,33,1) 0%,rgba(255,255,255,0) 100%);
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 );
+      }
+
+      &:after {
+        background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(33,33,33,0.8) 100%);
+        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(33,33,33,0.8) 100%);
+        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(33,33,33,0.8) 100%);
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 );
+      }
+
+      p {
+        color: #fff;
+      }
+    }
+
+    .aplayer-miniswitcher {
+      background: #484848;
+
+      .aplayer-icon {
+        path {
+          fill: #eee;
+        }
+      }
+    }
+  }
+}

assets/css/style.scss

@@ -1,4 +1,3 @@
-@import "_custom";
 @import "_variables";
 
 @import "_core/normalize";
@@ -12,3 +11,5 @@
 @import "_partial/pagination";
 
 @import "_core/media";
+
+@import "_custom";

assets/js/blog.js

@@ -33,7 +33,7 @@ jQuery(function($) {
     _Blog.dynamicToTop = function() {
         const min = 300;
         var $toTop = $('#dynamic-to-top');
-        $(window).scroll(function() {
+        $(window).scroll(() => {
             var scrollTop = $(window).scrollTop();
             if (typeof document.body.style.maxHeight === 'undefined') {
                 $toTop.css({
@@ -103,7 +103,6 @@ jQuery(function($) {
             && (temp = newTocList.children[0].children[0]).tagName === 'UL') {
             newTocList = temp;
         }
-
         if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
     };
 
@@ -220,19 +219,33 @@ jQuery(function($) {
         }
     };
 
+    _Blog.mermaid = function() {
+        if (window.mermaidMap) {
+            const mermaidAPI = mermaid.mermaidAPI
+            Object.keys(mermaidMap).forEach((id) => {
+                const element = document.getElementById(id);
+                mermaidAPI.render("d" + id, mermaidMap[id], (svgCode) => {
+                    element.innerHTML = svgCode;
+                    const svg = element.firstChild;
+                    svg.style.width = "100%"
+                }, element);
+            });
+        }
+    }
+
     _Blog.echarts = function() {
         if (window.echartsMap) {
             for (let i = 0; i < echartsArr.length; i++) {
                 echartsArr[i].dispose();
             }
             echartsArr = [];
-            Object.keys(echartsMap).forEach(function(id) {
+            Object.keys(echartsMap).forEach((id) => {
                 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(){
+                this.setTimeout(() => {
                     for (let i = 0; i < echartsArr.length; i++) {
                         echartsArr[i].resize();
                     }
@@ -256,15 +269,16 @@ jQuery(function($) {
         if (window.typeitArr) {
             for (let i = 0; i < typeitArr.length; i++) {
                 const group = typeitArr[i];
-                (function typeone (i) {
+                (function typeone(i) {
+                    const content = document.getElementById(`r${group[i]}`).innerHTML;
                     if (i === group.length - 1) {
                         new TypeIt(`#${group[i]}`, {
-                            strings: document.getElementById(`r${group[i]}`).innerHTML,
+                            strings: content,
                         }).go();
                         return;
                     }
                     let instance = new TypeIt(`#${group[i]}`, {
-                        strings: document.getElementById(`r${group[i]}`).innerHTML,
+                        strings: content,
                         afterComplete: () => {
                             instance.destroy();
                             typeone(i + 1);
@@ -275,13 +289,14 @@ jQuery(function($) {
         }
     };
 
-    $(document).ready(function() {
+    $(document).ready(() => {
         _Blog.toggleMobileMenu();
         _Blog.toggleTheme();
         _Blog.changeTitle();
         _Blog.dynamicToTop();
         _Blog.chroma();
         _Blog.responsiveTable();
+        _Blog.mermaid();
         _Blog.echarts();
         _Blog.countdown();
         _Blog.typeit();

assets/js/lib/VERSION

@@ -5,7 +5,7 @@ lazysizes@5.1.2
 katex@0.11.1
 mermaid@8.4.2
 echarts@4.5.0
-typeit@6.1.1
+typeit@6.0.3
 jquery-countdown@2.2.0
 aplayer@1.10.1
 meting@2.0.1

exampleSite/zh/content/posts/test.md

@@ -1,299 +0,0 @@
----
-title: "Test Page"
-date: 2019-08-04T22:49:56+08:00
-lastmod: 2019-08-17T22:41:56+08:00
-draft: true
-description: "This is a test page."
-show_in_homepage: true
-show_description: false
-
-tags: []
-categories: []
-
-featured_image: ""
-featured_image_preview: ""
-
-comment: false
-toc: true
-autoCollapseToc: true
-math: true
-dev: true
----
-
-## This is a test page
-
-Test all features in development[^link test].
-
-[^link test]: https://www.google.com/
-
-<!--more-->
-
-## Test ECharts
-
-{{< echarts height="500px" >}}
-{
-    title : {
-        text: '某站点用户访问来源',
-        subtext: '纯属虚构',
-        x:'center'
-    },
-    tooltip : {
-        trigger: 'item',
-        formatter: "{a} <br/>{b} : {c} ({d}%)"
-    },
-    legend: {
-        orient: 'vertical',
-        left: 'left',
-        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
-    },
-    series : [
-        {
-            name: '访问来源',
-            type: 'pie',
-            radius : '55%',
-            center: ['50%', '60%'],
-            data:[
-                {value:335, name:'直接访问'},
-                {value:310, name:'邮件营销'},
-                {value:234, name:'联盟广告'},
-                {value:135, name:'视频广告'},
-                {value:1548, name:'搜索引擎'}
-            ],
-            itemStyle: {
-                emphasis: {
-                    shadowBlur: 10,
-                    shadowOffsetX: 0,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-            }
-        }
-    ]
-}
-{{< /echarts >}}
-
-## Test Ruby
-
-人最重要的特点是会思考，建站初衷无非是保存思维的电子快照。
-当然各种文档工具亦或是简单的文本编辑器也能随时记录点滴，
-选择建个人网站无非是想满足 [技术爱好者]^(Technology enthusiast) 的偏执。
-
-## Test Music
-
-## Test Toc
-
-Toc
-
-### Toc1
-
-Toc
-
-#### Toc 1-1
-
-Toc
-
-#### Toc 1-2
-
-Toc
-
-#### Toc 1-3
-
-Toc
-
-### Toc2
-
-Toc
-
-#### Toc 2-1
-
-Toc
-
-#### Toc 2-2
-
-Toc
-
-### Toc3
-
-Toc
-
-## Test Table
-
-| Tables        | Are           | Cool  |
-| :------------ |:-------------:| -----:|
-| col 3 is      | right-aligned | $1600 |
-| col 2 is      | centered      |   $12 |
-| zebra stripes | are neat      |    $1 |
-
-## Test Diagram
-
-{{< diagram >}}
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->John: Hello John, how are you?
-    loop Healthcheck
-        John->John: Fight against hypochondria
-    end
-    Note right of John: Rational
-    John-->Alice: Great!
-    John->Bob: How about you?
-    Bob-->John: Jolly good!
-{{< /diagram >}}
-
-## Test kbd
-
-<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>
-
-## Test Mixed Lists
-
-Mixed Lists
-
-- item 1
-  * [X] item A
-  * [ ] item B
-    more text
-    1. item a
-    2. itemb
-    3. item c
-  * [X] item C
-- item 2
-- item 3
-
-Really Mixed Lists
-
-- item 1
-  * [X] item A
-  - item B
-    more text
-    1. item a
-    + itemb
-    + [ ] item c
-  1. item C
-1. item 2
-- [X] item 3
-
-## Test fa (Font Awesome)
-
-:(fab fa-weixin fa-2x):
-
-## Test Footnote
-
-This is a footnote[^1]
-
-[^1]: This is a footnote
-
-## Test Admonition
-
-{{% admonition quote %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition quote "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition example "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition bug "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition danger "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition failure "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition warning "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition question "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition success "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition tip "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition info "I'm title!" true %}}
-**biu biu biu.**
-{{% /admonition %}}
-
-{{% admonition note "I'm title!" false %}}
-**biu biu biu.**
-{{% /admonition %}}
-
-{{% admonition type="abstract" title="Test Admonition" %}}
-This is a Admonition.
-{{% /admonition %}}
-
-## Test Highlight
-
-`ls` 命令
-
-```go
-// You can edit this code!
-// Click here and start typing.
-package main
-
-import "fmt"
-
-func main() {
-  fmt.Println("Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界")
-}
-```
-
-- This is a list that contains multiple code blocks.
-
-  - Here is an indented block
-
-    ```Code
-    This will still be parsed
-    as a normal indented code block.
-    ```
-
-  - Here is a fenced code block:
-
-    ```Code
-    This will still be parsed
-    as a fenced code block.
-    ```
-
-    > ```Code
-    > Blockquotes?
-    > Not a problem!
-    > ```
-
-## Test Typeit
-
-{{< typeit group="test" tag="h3" >}}
-Here is a story about love...
-{{< /typeit >}}
-
-{{< typeit group="test" code="java" >}}
-u.accepted(); // [2018/01/05](/since/) special
-
-int a = 1;
-{{< /typeit >}}
-
-## Test Img
-
-![Gif](https://static.dillonzq.com/images/20190817130904-U6cPUk.jpg "Title")
-
-## Test Align
-
-{{% align-right %}}
-**Test Text**
-{{% /align-right %}}
-
-## Test Katex
-
-$$ c = \pm\sqrt{a^2 + b^2} $$

layouts/partials/scripts.html

@@ -54,7 +54,8 @@
     {{ $res := resources.Get "js/lib/mermaid/mermaid.min.js" | resources.Minify }}
     {{ $mermaid = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
-{{ $mermaid = delimit (slice $mermaid "<script>mermaid.initialize({startOnLoad: true, theme: null,});</script>") "" }}
+{{ $mermaidInit := "<script>mermaid.initialize({startOnLoad: false, theme: null});</script>" }}
+{{ $mermaid = delimit (slice $mermaid $mermaidInit) "" }}
 <!-- ECharts https://github.com/apache/incubator-echarts -->
 {{ $echarts_js := "" }}
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.echarts_js }}
@@ -76,7 +77,7 @@
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.typeit_js }}
     {{ $typeit = .Site.Params.cdn.typeit_js }}
 {{ else }}
-    {{ $res := resources.Get "js/lib/typeit/typeit.modern.min.js" | resources.Minify }}
+    {{ $res := resources.Get "js/lib/typeit/typeit.min.js" | resources.Minify }}
     {{ $typeit = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
 <!-- jQuery.countdown https://github.com/hilios/jQuery.countdown -->
@@ -95,6 +96,8 @@
     {{ $res := resources.Get "css/lib/aplayer/APlayer.min.css" | resources.Minify }}
     {{ $aplayer_css = printf "<link rel=\"stylesheet\" href=\"%s\">" $res.RelPermalink }}
 {{ end }}
+{{ $res := resources.Get "css/lib/aplayer/APlayer.dark.scss" | resources.ToCSS | resources.Minify }}
+{{ $aplayer_dark_css := printf "<link rel=\"stylesheet\" href=\"%s\">" $res.RelPermalink }}
 {{ $aplayer_js := "" }}
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.aplayer_js }}
     {{ $aplayer_js = .Site.Params.cdn.aplayer_js }}
@@ -102,7 +105,7 @@
     {{ $res := resources.Get "js/lib/aplayer/APlayer.min.js" | resources.Minify }}
     {{ $aplayer_js = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
-{{ $aplayer := delimit (slice $aplayer_css $aplayer_js) "" }}
+{{ $aplayer := delimit (slice $aplayer_css $aplayer_dark_css $aplayer_js) "" }}
 <!-- MetingJS https://github.com/metowolf/MetingJS -->
 {{ $meting := "" }}
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.meting_js }}
@@ -117,21 +120,22 @@
 {{ $smooth_scroll | safeHTML }}
 
 {{ if .IsPage }}
-    {{/*  dev feature */}}
+    {{/* dev feature */}}
     {{ if .Params.dev }}
         {{ with .Scratch.Get "echartsMap" }}
             {{ $echarts | safeHTML }}
-            {{ $echartsMap := . }}
             <script>window.echartsMap = {
-                {{ range $key, $var := $echartsMap }}
+                {{ range $key, $var := . }}
                     {{ $key }}: {{ $var | safeJS }},
                 {{ end }}
             };window.echartsArr=[];</script>
         {{ end }}
     {{ end }}
+    {{/* dev feature */}}
 
-    {{ if .Scratch.Get "diagram" }}
+    {{ with .Scratch.Get "mermaidMap" }}
         {{ $mermaid | safeHTML }}
+        <script>window.mermaidMap = {{ . | jsonify | safeJS }};</script>
     {{ end }}
 
     {{ if or .Params.math .Site.Params.math }}

layouts/shortcodes/align-center.html

@@ -1,4 +0,0 @@
-{{ $_hugo_config := `{ "version": 1 }` -}}
-<div class="align-center">
-    {{- .Inner -}}
-</div>

layouts/shortcodes/align-left.html

@@ -1,4 +0,0 @@
-{{ $_hugo_config := `{ "version": 1 }` -}}
-<div class="align-left">
-    {{- .Inner -}}
-</div>

layouts/shortcodes/align.html

@@ -0,0 +1,5 @@
+{{ $_hugo_config := `{ "version": 1 }` -}}
+<!-- [left, center, right] -->
+<div class={{ .Get 0 | printf "align-%s" }}>
+    {{- .Inner -}}
+</div>

layouts/shortcodes/countdown.html

@@ -1,6 +1,6 @@
 {{ if .Get "date" -}}
     {{ $date := .Get "date" }}
-    {{ $id := delimit (split (md5 $date) "" | shuffle) "" | printf "cd-%s" -}}
+    {{ $id := delimit (split (md5 $date) "" | shuffle) "" | printf "countdown-%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" -}}

layouts/shortcodes/dev/echarts.html

@@ -1,10 +1,10 @@
 <!-- shuffle md5 as id -->
-{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "ec-%s" -}}
+{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "echarts-%s" -}}
 {{ $echartsMap := .Page.Scratch.Get "echartsMap" -}}
 {{ if $echartsMap -}}
-    {{ $echartsMap = dict $id .Inner | merge $echartsMap -}}
+    {{ $echartsMap = .Inner | printf "{%s}" | dict $id | merge $echartsMap -}}
 {{ else -}}
-    {{ $echartsMap = dict $id .Inner -}}
+    {{ $echartsMap = .Inner | printf "{%s}" | dict $id -}}
 {{ end -}}
 {{ .Page.Scratch.Set "echartsMap" $echartsMap -}}
 <div class="echarts" id="{{ $id }}"></div>

layouts/shortcodes/diagram.html

@@ -1,5 +0,0 @@
-{{ $_hugo_config := `{ "version": 1 }` -}}
-{{ .Page.Scratch.Set "diagram" "true" }}
-<div class="mermaid">
-    {{- .Inner -}}
-</div>

layouts/shortcodes/float-right.html

@@ -1,4 +0,0 @@
-{{ $_hugo_config := `{ "version": 1 }` -}}
-<div class="float-right">
-    {{- .Inner -}}
-</div>

layouts/shortcodes/float.html

@@ -1,4 +1,5 @@
 {{ $_hugo_config := `{ "version": 1 }` -}}
-<div class="align-right">
+<!-- [left, right] -->
+<div class={{ .Get 0 | printf "float-%s" }}>
     {{- .Inner -}}
 </div>

layouts/shortcodes/mermaid.html

@@ -0,0 +1,10 @@
+<!-- shuffle md5 as id -->
+{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "mermaid-%s" -}}
+{{ $mermaidMap := .Page.Scratch.Get "mermaidMap" -}}
+{{ if $mermaidMap -}}
+    {{ $mermaidMap = trim .Inner "\n" | dict $id | merge $mermaidMap -}}
+{{ else -}}
+    {{ $mermaidMap = trim .Inner "\n" | dict $id -}}
+{{ end -}}
+{{ .Page.Scratch.Set "mermaidMap" $mermaidMap -}}
+<div class="mermaid" id="{{ $id }}"></div>

layouts/shortcodes/typeit.html

@@ -1,7 +1,7 @@
 <!-- only the trailing newline is retained -->
 {{ $content := replaceRE `(?s)^\n*(.*?)\n*$` "$1\n" .Inner }}
 <!-- shuffle md5 as id -->
-{{ $id := delimit (split (md5 $content) "" | shuffle) "" | printf "tp-%s" }}
+{{ $id := delimit (split (md5 $content) "" | shuffle) "" | printf "typeit-%s" }}
 
 <div class={{ .Get "class" | default "typeit" }}>
     <!-- raw html content -->
@@ -10,7 +10,7 @@
         <div id={{ $id }}></div>
     {{ else if .Get "code" }}
         <!-- highlight code content without line number -->
-        {{ $content = highlight $content (.Get "code") "linenos=" }}
+        {{ $content = highlight $content (.Get "code") "linenos=false" }}
         <!-- delete outer label -->
         {{ $content = replaceRE `<div class="highlight"><pre class="chroma"><code[^<>]*>(?s)(.*)</code></pre></div>` "$1" $content }}
         <!-- parsing markdown links -->