feat: add bilibili diagram echarts and improve style

archetypes/default.md

 ---
-title: "{{ replace .Name "-" " " | title }}"
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
 date: {{ .Date }}
+lastmod: {{ .Date }}
 draft: true
-description:
-categories:
- -
-featured_image:
-author: ""
+description: ""
+tags: []
+categories: []
+
+featured_image: ""
+
+comment: true
+toc: false
+autoCollapseToc: true
+math: false
 ---
\ No newline at end of file

assets/css/_core/_base.scss

-/** Font **/
-/* Lato */
 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
 
-/* Montserrat */
-@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
-
-/* Roboto */
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
-
 html {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
+  font-family: "Lato", -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 {

assets/css/_core/_media.scss

@@ -3,6 +3,10 @@
     display: none;
   }
 
+  .post-toc {
+    display: none;
+  }
+
   .navbar-mobile {
     display: block !important;
     position: fixed;
@@ -141,7 +145,15 @@
 
 /* iPads (portrait and landscape) ----------- */
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  .post-warp {
+    max-width: 560px !important;
+  }
+
+  .post-toc {
+    margin-left: 580px !important;
+  }
+}
 
 /* Desktops and laptops ----------- */
 

assets/css/_mermaid/class.scss

+g.classGroup text {
+  fill: $nodeBorder;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 10px;
+}
+
+g.classGroup rect {
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+}
+
+g.classGroup line {
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+.classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: $nodeBkg;
+  opacity: 0.5;
+}
+
+.classLabel .label {
+  fill: $nodeBorder;
+  font-size: 10px;
+}
+
+.relation {
+  stroke: $nodeBorder;
+  stroke-width: 1;
+  fill: none;
+}
+
+@mixin composition {
+  fill: $nodeBorder;
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+#compositionStart {
+  @include composition;
+}
+
+#compositionEnd {
+  @include composition;
+}
+
+@mixin aggregation {
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+#aggregationStart {
+  @include aggregation;
+}
+
+#aggregationEnd {
+  @include aggregation;
+}
+
+#dependencyStart {
+  @include composition;
+}
+
+#dependencyEnd {
+  @include composition;
+}
+
+#extensionStart {
+  @include composition;
+}
+
+#extensionEnd {
+  @include composition;
+}

assets/css/_mermaid/dark/index.scss

+$mainBkg: #BDD5EA;
+$secondBkg: #6D6D65;
+$mainContrastColor: lightgrey;
+$darkTextColor: #323D47;
+$lineColor: $mainContrastColor;
+$border1: #81B1DB;
+$border2: rgba(255, 255, 255, 0.25);
+$arrowheadColor: $mainContrastColor;
+
+/* Flowchart variables */
+
+$nodeBkg: $mainBkg;
+$nodeBorder: purple;
+$clusterBkg: $secondBkg;
+$clusterBorder: $border2;
+$defaultLinkColor: $lineColor;
+$titleColor: #F9FFFE;
+$edgeLabelBackground: #e8e8e8;
+
+/* Sequence Diagram variables */
+
+$actorBorder: $border1;
+$actorBkg: $mainBkg;
+$actorTextColor: black;
+$actorLineColor: $mainContrastColor;
+$signalColor: $mainContrastColor;
+$signalTextColor: $mainContrastColor;
+$labelBoxBkgColor: $actorBkg;
+$labelBoxBorderColor: $actorBorder;
+$labelTextColor: $darkTextColor;
+$loopTextColor: $mainContrastColor;
+$noteBorderColor: $border2;
+$noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
+$sequenceNumberColor: white;
+
+/* Gantt chart variables */
+
+$sectionBkgColor: rgba(255, 255, 255, 0.3);
+$altSectionBkgColor: white;
+$sectionBkgColor2: #EAE8B9;
+$taskBorderColor: rgba(255, 255, 255, 0.5);
+$taskBkgColor: $mainBkg;
+$taskTextColor: $darkTextColor;
+$taskTextLightColor: $mainContrastColor;
+$taskTextOutsideColor: $taskTextLightColor;
+$taskTextClickableColor: #003163;
+$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
+$activeTaskBkgColor: #81B1DB;
+$gridColor: $mainContrastColor;
+$doneTaskBkgColor: $mainContrastColor;
+$doneTaskBorderColor: grey;
+$critBorderColor: #E83737;
+$critBkgColor: #E83737;
+$taskTextDarkColor: $darkTextColor;
+$todayLineColor: #DB5757;
+
+@import '../mermaid';

assets/css/_mermaid/default/index.scss

+$mainBkg: #ECECFF;
+$secondBkg: #ffffde;
+$lineColor: #333333;
+$border1: #CCCCFF;
+$border2: #aaaa33;
+$arrowheadColor: #333333;
+
+/* Flowchart variables */
+
+$nodeBkg: $mainBkg;
+$nodeBorder: #9370DB;
+$clusterBkg: $secondBkg;
+$clusterBorder: $border2;
+$defaultLinkColor: $lineColor;
+$titleColor: #333;
+$edgeLabelBackground: #e8e8e8;
+
+/* Sequence Diagram variables */
+
+$actorBorder: $border1;
+$actorBkg: $mainBkg;
+$actorTextColor: black;
+$actorLineColor: grey;
+$signalColor: #333;
+$signalTextColor: #333;
+$labelBoxBkgColor: $actorBkg;
+$labelBoxBorderColor: $actorBorder;
+$labelTextColor: $actorTextColor;
+$loopTextColor: $actorTextColor;
+$noteBorderColor: $border2;
+$noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
+$sequenceNumberColor: white;
+
+/* Gantt chart variables */
+
+$sectionBkgColor: rgba(102, 102, 255, 0.49);
+$altSectionBkgColor: white;
+$sectionBkgColor2: #fff400;
+$taskBorderColor: #534fbc;
+$taskBkgColor: #8a90dd;
+$taskTextLightColor: white;
+$taskTextColor: $taskTextLightColor;
+$taskTextDarkColor: black;
+$taskTextOutsideColor: $taskTextDarkColor;
+$taskTextClickableColor: #003163;
+$activeTaskBorderColor: #534fbc;
+$activeTaskBkgColor: #bfc7ff;
+$gridColor: lightgrey;
+$doneTaskBkgColor: lightgrey;
+$doneTaskBorderColor: grey;
+$critBorderColor: #ff8888;
+$critBkgColor: red;
+$todayLineColor: red;
+
+@import '../mermaid';

assets/css/_mermaid/flowchart.scss

+.label {
+  font-family: 'trebuchet ms', verdana, arial;
+  color: #333;
+}
+
+.label text {
+  fill: #333;
+}
+
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon {
+  fill: $mainBkg;
+  stroke: $nodeBorder;
+  stroke-width: 1px;
+}
+
+.node.clickable {
+  cursor: pointer;
+}
+
+.arrowheadPath {
+  fill: $arrowheadColor;
+}
+
+.edgePath .path {
+  stroke: $lineColor;
+  stroke-width: 1.5px;
+}
+
+.edgeLabel {
+  background-color: $edgeLabelBackground;
+}
+
+.cluster rect {
+  fill: $secondBkg;
+  stroke: $clusterBorder;
+  stroke-width: 1px;
+}
+
+.cluster text {
+  fill: $titleColor;
+}
+
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 12px;
+  background: $secondBkg;
+  border: 1px solid $border2;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 100;
+}

assets/css/_mermaid/forest/index.scss

+$mainBkg: #cde498;
+$secondBkg: #cdffb2;
+$lineColor: #1a3318;
+$lineColor: green;
+$border1: #13540c;
+$border2: #6eaa49;
+$arrowheadColor: green;
+
+/* Flowchart variables */
+
+$nodeBkg: $mainBkg;
+$nodeBorder: $border1;
+$clusterBkg: $secondBkg;
+$clusterBorder: $border2;
+$defaultLinkColor: $lineColor;
+$titleColor: #333;
+$edgeLabelBackground: #e8e8e8;
+
+/* Sequence Diagram variables */
+
+$actorBorder: $border1;
+$actorBkg: $mainBkg;
+$actorTextColor: black;
+$actorLineColor: grey;
+$signalColor: #333;
+$signalTextColor: #333;
+$labelBoxBkgColor: $actorBkg;
+$labelBoxBorderColor: #326932;
+$labelTextColor: $actorTextColor;
+$loopTextColor: $actorTextColor;
+$noteBorderColor: $border2;
+$noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
+$sequenceNumberColor: white;
+
+/* Gantt chart variables */
+
+$sectionBkgColor: #6eaa49;
+$altSectionBkgColor: white;
+$sectionBkgColor2: #6eaa49;
+$taskBorderColor: $border1;
+$taskBkgColor: #487e3a;
+$taskTextLightColor: white;
+$taskTextColor: $taskTextLightColor;
+$taskTextDarkColor: black;
+$taskTextOutsideColor: $taskTextDarkColor;
+$taskTextClickableColor: #003163;
+$activeTaskBorderColor: $taskBorderColor;
+$activeTaskBkgColor: $mainBkg;
+$gridColor: lightgrey;
+$doneTaskBkgColor: lightgrey;
+$doneTaskBorderColor: grey;
+$critBorderColor: #ff8888;
+$critBkgColor: red;
+$todayLineColor: red;
+
+@import '../mermaid';

assets/css/_mermaid/gantt.scss

+/** Section styling */
+
+.section {
+  stroke: none;
+  opacity: 0.2;
+}
+
+.section0 {
+  fill: $sectionBkgColor;
+}
+
+.section2 {
+  fill: $sectionBkgColor2;
+}
+
+.section1,
+.section3 {
+  fill: $altSectionBkgColor;
+  opacity: 0.2;
+}
+
+.sectionTitle0 {
+  fill: $titleColor;
+}
+
+.sectionTitle1 {
+  fill: $titleColor;
+}
+
+.sectionTitle2 {
+  fill: $titleColor;
+}
+
+.sectionTitle3 {
+  fill: $titleColor;
+}
+
+.sectionTitle {
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px;
+}
+
+
+/* Grid and axis */
+
+.grid .tick {
+  stroke: $gridColor;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+
+.grid path {
+  stroke-width: 0;
+}
+
+
+/* Today line */
+
+.today {
+  fill: none;
+  stroke: $todayLineColor;
+  stroke-width: 2px;
+}
+
+
+/* Task styling */
+
+/* Default task */
+
+.task {
+  stroke-width: 2;
+}
+
+.taskText {
+  text-anchor: middle;
+  font-size: 11px;
+}
+
+.taskTextOutsideRight {
+  fill: $taskTextDarkColor;
+  text-anchor: start;
+  font-size: 11px;
+}
+
+.taskTextOutsideLeft {
+  fill: $taskTextDarkColor;
+  text-anchor: end;
+  font-size: 11px;
+}
+
+/* Special case clickable */
+.task.clickable {
+  cursor: pointer;
+}
+.taskText.clickable {
+  cursor: pointer;
+  fill: $taskTextClickableColor !important;
+  font-weight: bold;
+}
+
+.taskTextOutsideLeft.clickable {
+  cursor: pointer;
+  fill: $taskTextClickableColor !important;
+  font-weight: bold;
+}
+
+.taskTextOutsideRight.clickable {
+  cursor: pointer;
+  fill: $taskTextClickableColor !important;
+  font-weight: bold;
+}
+
+/* Specific task settings for the sections*/
+
+.taskText0,
+.taskText1,
+.taskText2,
+.taskText3 {
+  fill: $taskTextColor;
+}
+
+.task0,
+.task1,
+.task2,
+.task3 {
+  fill: $taskBkgColor;
+  stroke: $taskBorderColor;
+}
+
+.taskTextOutside0,
+.taskTextOutside2
+{
+  fill: $taskTextOutsideColor;
+}
+
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: $taskTextOutsideColor;
+}
+
+
+/* Active task */
+
+.active0,
+.active1,
+.active2,
+.active3 {
+  fill: $activeTaskBkgColor;
+  stroke: $activeTaskBorderColor;
+}
+
+.activeText0,
+.activeText1,
+.activeText2,
+.activeText3 {
+  fill: $taskTextDarkColor !important;
+}
+
+
+/* Completed task */
+
+.done0,
+.done1,
+.done2,
+.done3 {
+  stroke: $doneTaskBorderColor;
+  fill: $doneTaskBkgColor;
+  stroke-width: 2;
+}
+
+.doneText0,
+.doneText1,
+.doneText2,
+.doneText3 {
+  fill: $taskTextDarkColor !important;
+}
+
+
+/* Tasks on the critical line */
+
+.crit0,
+.crit1,
+.crit2,
+.crit3 {
+  stroke: $critBorderColor;
+  fill: $critBkgColor;
+  stroke-width: 2;
+}
+
+.activeCrit0,
+.activeCrit1,
+.activeCrit2,
+.activeCrit3 {
+  stroke: $critBorderColor;
+  fill: $activeTaskBkgColor;
+  stroke-width: 2;
+}
+
+.doneCrit0,
+.doneCrit1,
+.doneCrit2,
+.doneCrit3 {
+  stroke: $critBorderColor;
+  fill: $doneTaskBkgColor;
+  stroke-width: 2;
+  cursor: pointer;
+  shape-rendering: crispEdges;
+}
+
+.milestone {
+  transform: rotate(45deg) scale(0.8,0.8);
+}
+
+.milestoneText {
+  font-style: italic;
+}
+.doneCritText0,
+.doneCritText1,
+.doneCritText2,
+.doneCritText3 {
+  fill: $taskTextDarkColor !important;
+}
+
+.activeCritText0,
+.activeCritText1,
+.activeCritText2,
+.activeCritText3 {
+  fill: $taskTextDarkColor !important;
+}
+
+.titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: $taskTextDarkColor;
+}

assets/css/_mermaid/git.scss

+.commit-id,
+.commit-msg,
+.branch-label {
+  fill: lightgrey;
+  color: lightgrey;
+}

assets/css/_mermaid/mermaid.scss

+@import 'flowchart';
+@import 'sequence';
+@import 'gantt';
+@import 'class';
+@import 'git';

assets/css/_mermaid/neutral/index.scss

+$mainBkg: #eee;
+$contrast: #26a;
+$secondBkg: lighten($contrast, 55%);
+$lineColor: #666;
+$border1: #999;
+$border2: $contrast;
+$note: #ffa;
+$text: #333;
+$critical: #d42;
+$done: #bbb;
+$arrowheadColor: #333333;
+
+/* Flowchart variables */
+
+$nodeBkg: $mainBkg;
+$nodeBorder: $border1;
+$clusterBkg: $secondBkg;
+$clusterBorder: $border2;
+$defaultLinkColor: $lineColor;
+$titleColor: $text;
+$edgeLabelBackground: white;
+
+/* Sequence Diagram variables */
+
+$actorBorder: $border1;
+$actorBkg: $mainBkg;
+$actorTextColor: $text;
+$actorLineColor: $lineColor;
+$signalColor: $text;
+$signalTextColor: $text;
+$labelBoxBkgColor: $actorBkg;
+$labelBoxBorderColor: $actorBorder;
+$labelTextColor: $text;
+$loopTextColor: $text;
+$noteBorderColor: darken($note, 60%);
+$noteBkgColor: $note;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
+$sequenceNumberColor: white;
+
+/* Gantt chart variables */
+
+$sectionBkgColor: lighten($contrast, 30%);
+$altSectionBkgColor: white;
+$sectionBkgColor2: lighten($contrast, 30%);
+$taskBorderColor: darken($contrast, 10%);
+$taskBkgColor: $contrast;
+$taskTextLightColor: white;
+$taskTextColor: $taskTextLightColor;
+$taskTextDarkColor: $text;
+$taskTextOutsideColor: $taskTextDarkColor;
+$taskTextClickableColor: #003163;
+$activeTaskBorderColor: $taskBorderColor;
+$activeTaskBkgColor: $mainBkg;
+$gridColor: lighten($border1, 30%);
+$doneTaskBkgColor: $done;
+$doneTaskBorderColor: $lineColor;
+$critBkgColor: $critical;
+$critBorderColor: darken($critBkgColor, 10%);
+$todayLineColor: $critBkgColor;
+
+@import '../mermaid';

assets/css/_mermaid/sequence.scss

+.actor {
+  stroke: $actorBorder;
+  fill: $actorBkg;
+}
+
+text.actor {
+  fill: $actorTextColor;
+  stroke: none;
+}
+
+.actor-line {
+  stroke: $actorLineColor;
+}
+
+.messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $signalColor;
+}
+
+.messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $signalColor;
+}
+
+#arrowhead {
+  fill: $signalColor;
+}
+
+.sequenceNumber {
+  fill: $sequenceNumberColor;
+}
+
+#sequencenumber {
+  fill: $signalColor;
+}
+
+#crosshead path {
+  fill: $signalColor !important;
+  stroke: $signalColor !important;
+}
+
+.messageText {
+  fill: $signalTextColor;
+  stroke: none;
+}
+
+.labelBox {
+  stroke: $labelBoxBorderColor;
+  fill: $labelBoxBkgColor;
+}
+
+.labelText {
+  fill: $labelTextColor;
+  stroke: none;
+}
+
+.loopText {
+  fill: $loopTextColor;
+  stroke: none;
+}
+
+.loopLine {
+  stroke-width: 2;
+  stroke-dasharray: '2 2';
+  stroke: $labelBoxBorderColor;
+}
+
+.note {
+  //stroke: #decc93;
+  stroke: $noteBorderColor;
+  fill: $noteBkgColor;
+}
+
+.noteText {
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
+}
+
+.activation0 {
+  fill: $activationBkgColor;
+  stroke: $activationBorderColor;
+}
+
+.activation1 {
+  fill: $activationBkgColor;
+  stroke: $activationBorderColor;
+}
+
+.activation2 {
+  fill: $activationBkgColor;
+  stroke: $activationBorderColor;
+}

assets/css/_page/_post.scss

@@ -44,6 +44,51 @@
     }
   }
 
+  .post-toc {
+    position: absolute;
+    width: 200px;
+    max-width: 240px;
+    margin-left: 800px;
+    padding: 10px;
+    border-left: 1px solid $global-border-color;
+    word-wrap: break-word;
+    box-sizing: border-box;
+    top: 120px;
+
+    .post-toc-title {
+      font-weight: 400;
+      text-transform: uppercase;
+    }
+
+    .post-toc-content {
+      &.always-active ul {
+        display: block;
+      }
+
+      >nav>ul {
+        margin: 10px 0;
+      }
+
+      ul {
+        padding-left: 10px;
+        list-style: none;
+
+        ul {
+          padding-left: 20px;
+          display: none;
+        }
+
+        .has-active > ul {
+          display: block;
+        }
+      }
+
+      .toc-link.active {
+        color: $global-link-hover-color;
+      }
+    }
+  }
+
   .post-content {
     h2,
     h3,
@@ -95,25 +140,42 @@
       padding-left: 2em;
     }
 
-    table {
-      max-width: 100%;
-      margin: 10px 0;
-      border-spacing: 0;
-      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.125);
+    .table-wrapper {
+      overflow-x: auto;
+
+      > table {
+        width: 100%;
+        max-width: 100%;
+        margin: 10px 0;
+        border-spacing: 0;
+        box-shadow: 2px 2px 3px rgba(0,0,0,.125);
+        background: $table-background-color;
+
+        .dark-theme & {
+          background: $table-background-color-dark;
+        }
 
-      th,
-      td {
-        padding: 5px 15px;
-        border: 1px double #ebe9f5;
+        thead {
+          background: $table-thead-color;
+
+          .dark-theme & {
+            background-color: $table-thead-color-dark;
+          }
+        }
+
+        th, td {
+          padding: 5px 15px;
+          border: 1px double $global-border-color;
+
+          .dark-theme & {
+            border: 1px double $global-border-color-dark;
+          }
+        }
       }
     }
 
     figure {
       text-align: center;
-
-      img:hover {
-        cursor: zoom-in;
-      }
     }
 
     .image-caption:not(:empty) {
@@ -136,10 +198,6 @@
       overflow: hidden;
     }
 
-    img[data-action="zoom"] {
-      cursor: zoom-in;
-    }
-
     .featured_image {
       width: 100% !important;
       max-width: 100% !important;
@@ -193,6 +251,70 @@
     @import "../_partial/_post/code";
     @import "../_partial/_post/admonition";
 
+    .mermaid {
+      @import "../_mermaid/neutral/index";
+
+      .dark-theme & {
+        @import "../_mermaid/dark/index";
+      }
+    }
+
+    .echarts {
+      margin: 3% auto;
+      text-align: center;
+    }
+
+    .bilibili {
+      position: relative;
+      width: 100%;
+      height: 0;
+      padding-bottom: 75%;
+      margin: 3% auto;
+
+      iframe {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+      }
+    }
+
+    hr {
+      margin: 1rem 0;
+      position: relative;
+      border-top: 1px dashed $global-border-color;
+      border-bottom: none;
+
+      .dark-theme & {
+        border-top: 1px dashed $global-border-color-dark;
+      }
+    }
+
+    kbd {
+      display: inline-block;
+      padding: .25em;
+      background-color: $global-background-color;
+      border: 1px solid $global-border-color;
+      border-bottom-color: $global-border-color;
+      border-radius: 3px;
+      -webkit-box-shadow: inset 0 -1px 0 $global-border-color;
+      box-shadow: inset 0 -1px 0 $global-border-color;
+      font-size: .8em;
+      line-height: 1.25;
+      font-family: $code-font-family;
+      color: $code-color;
+
+      .dark-theme & {
+        background-color: $global-background-color-dark;
+        border: 1px solid $global-border-color-dark;
+        border-bottom-color: $global-border-color-dark;
+        -webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
+        box-shadow: inset 0 -1px 0 $global-border-color-dark;
+        color: $code-color-dark;
+      }
+    }
+
     .typeit {
       .code {
         padding: 6px;
@@ -246,13 +368,11 @@
   }
 
   .post-info {
-    margin-top: 5rem;
-    border-top: 1px solid $global-border-color;
+    margin-top: 3rem;
     border-bottom: 1px solid $global-border-color;
-
-    .post-info-item {
-      margin: 5px 0;
-    }
+    padding: 1rem 0 0.3rem;
+    display: flex;
+    justify-content: space-between;
 
     .dark-theme & {
       border-top: 1px solid $global-border-color-dark;
@@ -261,7 +381,7 @@
   }
 
   .post-tags {
-    padding: 1rem 0 1rem;
+    padding: 0.3rem 0 1rem;
     display: flex;
     justify-content: space-between;
   }

assets/css/_partial/_post/_code.scss

@@ -3,10 +3,10 @@ pre {
   padding: 7px;
   font-size: $code-font-size;
   font-family: $code-font-family;
-  background: $l-code-background;
+  background: $code-background;
 
   .dark-theme & {
-    background: $d-code-background;
+    background: $code-background-dark;
   }
 }
 
@@ -14,20 +14,20 @@ code {
   padding: 3px 5px;
   border-radius: 4px;
   color: $code-color;
-  background: $l-code-background;
+  background: $code-background;
 
   .dark-theme & {
     color: $code-color-dark;
-    background: $d-code-background;
+    background: $code-background-dark;
   }
 }
 
 p > code {
-  background: darken($l-code-background, 3%);
+  background: darken($code-background, 3%);
 
   .dark-theme & {
     color: $code-color-dark;
-    background: darken($d-code-background, 3%);
+    background: darken($code-background-dark, 3%);
   }
 }
 
@@ -38,7 +38,7 @@ p > code {
   overflow-x: auto;
   box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
   position: relative;
-  background: $l-code-background;
+  background: $code-background;
 
   code {
     padding: 0;
@@ -56,11 +56,11 @@ p > code {
       font-size: $code-font-size;
       font-weight: bold;
       color: darken($code-info-color, 10%);
-      background: darken($l-code-background, 3%);
+      background: darken($code-background, 3%);
       content: 'Code';
 
       .dark-theme & {
-        background: darken($d-code-background, 3%);
+        background: darken($code-background-dark, 3%);
       }
     }
   }
@@ -81,7 +81,7 @@ p > code {
 
       pre {
         margin: 0;
-        padding: 40px 7px 10px;
+        padding: 38px 7px 8px;
       }
     }
 
@@ -90,7 +90,7 @@ p > code {
 
       pre {
         margin: 0;
-        padding: 40px 10px 10px;
+        padding: 38px 10px 8px;
       }
     }
   }
@@ -100,10 +100,10 @@ p > code {
     padding: 0;
     width: 100%;
     border-collapse: collapse;
-    border-color: $l-code-background;
+    border-color: $code-background;
 
     .dark-theme & {
-      border-color: $d-code-background;
+      border-color: $code-background-dark;
     }
   }
 
@@ -183,7 +183,7 @@ p > code {
   /* GenericTraceback */  .gt { color: #d33682 }
 
   .dark-theme & {
-    background: $d-code-background;
+    background: $code-background-dark;
 
     /* Keyword */ .chroma .k { color: #D371E3 }
     /* KeywordConstant */ .chroma .kc { color: #D371E3 }

assets/css/_variables.scss

@@ -35,15 +35,27 @@ $pagination-link-color-dark: #a9a9b3 !default;
 $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-dark: #272C34 !default;
+
+// Color of the table thead.
+$table-thead-color: #EDEDED !default;
+$table-thead-color-dark: #20252B !default;
+
 // ========== Code ========== //
 // Color of the code.
 $code-color: #E74C3C !default;
 $code-color-dark: #E5BF78 !default;
 
+// Color of the code background.
+$code-background: whitesmoke !default;
+$code-background-dark: #272C34 !default;
+
 $code-info-color: #cacaca !default;
 
 // Font size of code.
-$code-font-size: 14px !default;
+$code-font-size: 13px !default;
 
 // Font family of the code.
 $code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace !default;
@@ -94,7 +106,3 @@ $code-type-list: (
   language-toml: "TOML",
   language-diff: "Diff"
 ) !default;
-
-// Color of the code background.
-$l-code-background: #F8F5EC !default;
-$d-code-background: #272C34 !default;

assets/js/main.js

@@ -11,14 +11,14 @@ jQuery(function($) {
         });
     };
 
-    _Blog.toggleTheme = function() {
-        const currentTheme = window.localStorage && window.localStorage.getItem('theme');
-        const isDark = currentTheme === 'dark';
+    _Blog.toggleTheme = function(isDark) {
         $('body').toggleClass('dark-theme', isDark);
         $('.theme-switch').on('click', () => {
             $('body').toggleClass('dark-theme');
-            window.localStorage &&
-                window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', );
+            window.localStorage && window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', );
+            const currentTheme = window.localStorage && window.localStorage.getItem('theme');
+            const isDark = currentTheme === 'dark';
+            this.echarts(isDark);
         });
     };
 
@@ -42,6 +42,143 @@ jQuery(function($) {
         }
     };
 
+    _Blog.responsiveTable = function() {
+        const tables = document.querySelectorAll('.post-content > table');
+        for (let i = 0; i < tables.length; i++) {
+            const table = tables[i];
+            const wrapper = document.createElement('div');
+            wrapper.className = 'table-wrapper';
+            table.parentElement.replaceChild(wrapper, table);
+            wrapper.appendChild(table);
+        }
+    };
+
+    _Blog._initToc = function() {
+        const SPACING = 20;
+        const $toc = $('.post-toc');
+
+        if ($toc.length) {
+            const startTop = $toc.css("top");
+            const minScrollTop = $toc.offset().top - SPACING;
+
+            const tocState = {
+                start: {
+                    'position': 'absolute',
+                    'top': startTop,
+                },
+                process: {
+                    'position': 'fixed',
+                    'top': SPACING,
+                },
+            };
+
+            $(window).scroll(function() {
+            const scrollTop = $(window).scrollTop();
+
+            if (scrollTop < minScrollTop) {
+                $toc.css(tocState.start);
+            } else {
+                $toc.css(tocState.process);
+            }
+            });
+        }
+
+        const HEADERFIX = 30;
+        const $toclink = $('.toc-link');
+        const $headerlink = $('.headerlink');
+        const $tocLinkLis = $('.post-toc-content li');
+
+        const headerlinkTop = $.map($headerlink, function(link) {
+            return $(link).offset().top;
+        });
+
+        const headerLinksOffsetForSearch = $.map(headerlinkTop, function(offset) {
+            return offset - HEADERFIX;
+        });
+
+        const searchActiveTocIndex = function(array, target) {
+            for (let i = 0; i < array.length - 1; i++) {
+                if (target > array[i] && target <= array[i + 1]) return i;
+            }
+            if (target > array[array.length - 1]) return array.length - 1;
+            return 0;
+        };
+
+        const activeIndex = function() {
+            const scrollTop = $(window).scrollTop();
+            const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop);
+
+            $($toclink).removeClass('active');
+            $($tocLinkLis).removeClass('has-active');
+
+            if (activeTocIndex !== -1) {
+                $($toclink[activeTocIndex]).addClass('active');
+                let ancestor = $toclink[activeTocIndex].parentNode;
+                while (ancestor.tagName !== 'NAV') {
+                    $(ancestor).addClass('has-active');
+                    ancestor = ancestor.parentNode.parentNode;
+                }
+            }
+        };
+        activeIndex();
+        $(window).scroll(activeIndex);
+    };
+
+    _Blog.toc = function() {
+        const tocContainer = document.getElementById('post-toc');
+        if (tocContainer !== null) {
+            const toc = document.getElementById('TableOfContents');
+            if (toc === null) {
+            // toc = true, but there are no headings
+            tocContainer.parentNode.removeChild(tocContainer);
+            } else {
+            this._refactorToc(toc);
+            this._linkToc();
+            this._initToc();
+            }
+        }
+    };
+
+    _Blog._refactorToc = function(toc) {
+        // when headings do not start with `h1`
+        const oldTocList = toc.children[0];
+        let newTocList = oldTocList;
+        let temp;
+        while (newTocList.children.length === 1
+            && (temp = newTocList.children[0].children[0]).tagName === 'UL') {
+            newTocList = temp;
+        }
+
+        if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
+    };
+
+    _Blog._linkToc = function() {
+        const links = document.querySelectorAll('#TableOfContents a:first-child');
+        for (let i = 0; i < links.length; i++) links[i].className += ' toc-link';
+
+        for (let num = 1; num <= 6; num++) {
+            const headers = document.querySelectorAll('.post-content>h' + num);
+            for (let i = 0; i < headers.length; i++) {
+                const header = headers[i];
+                header.innerHTML = `<a href="#${header.id}" class="headerlink anchor"><i class="iconfont icon-link"></i></a>${header.innerHTML}`;
+            }
+        }
+    };
+
+    _Blog.echarts = function(isDark) {
+        if (window.echartsMap) {
+            for (let i = 0; i < echartsArr.length; i++) {
+                echartsArr[i].dispose();
+            }
+            echartsArr = [];
+            Object.keys(echartsMap).forEach(function(id) {
+                let myChart = echarts.init(document.getElementById(id), isDark ? 'dark' : 'light');
+                myChart.setOption(echartsMap[id]);
+                echartsArr.push(myChart);
+            });
+        }
+    }
+
     _Blog.countdown = function() {
         if (window.countdownMap) {
             Object.keys(countdownMap).forEach(function(id) {
@@ -81,10 +218,16 @@ jQuery(function($) {
     };
 
     $(document).ready(function() {
+        const currentTheme = window.localStorage && window.localStorage.getItem('theme');
+        const isDark = currentTheme === 'dark';
+
         _Blog.toggleMobileMenu();
-        _Blog.toggleTheme();
+        _Blog.toggleTheme(isDark);
         _Blog.changeTitle();
         _Blog.chroma();
+        _Blog.responsiveTable();
+        _Blog.toc();
+        _Blog.echarts(isDark);
         _Blog.countdown();
         _Blog.typeit();
     });

i18n/en.toml

@@ -34,6 +34,9 @@ other = "Theme - "
 # === partials/footer.html ===
 
 # === posts/single.html ===
+[toc]
+other = "Table of Contents"
+
 [included]
 other = "included in"
 
@@ -50,10 +53,7 @@ other = "<span class=leancloud-visitors-count></span> pageviews"
 other = "Author"
 
 [lastMod]
-other = "Last Modified"
-
-[share]
-other = "Share"
+other = "This article is updated with %s"
 
 [license]
 other = "License"

i18n/zh.toml

@@ -34,6 +34,9 @@ other = "主题 - "
 # === partials/footer.html ===
 
 # === posts/single.html ===
+[toc]
+other = "目录"
+
 [included]
 other = "收录于"
 
@@ -50,10 +53,7 @@ other = "<span class=leancloud-visitors-count></span> 次阅读"
 other = "作者"
 
 [lastMod]
-other = "上次更新"
-
-[share]
-other = "内容分享"
+other = "本文于 %s 更新"
 
 [license]
 other = "许可协议"

layouts/partials/comments.html

-{{ if and .IsPage (ne .Params.comment false) -}}
+{{ if eq (getenv "HUGO_ENV") "production" | and .IsPage | and (ne .Params.comment false) -}}
     <!-- Disqus Comment System-->
     {{- if .Site.DisqusShortname -}}
         <div id="disqus_thread"></div>

layouts/partials/js.html

@@ -14,6 +14,15 @@
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
 ` }}
+<!-- mermaid https://github.com/knsv/mermaid -->
+{{ $diagram := `
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@8.2.3/dist/mermaid.min.js" integrity="sha256-4s3fF5e1iWRLtiV7mRev7n17oALqqDHbWrNqF3/r7jU=" crossorigin="anonymous"></script>
+    <script>mermaid.initialize({startOnLoad: true, theme: null,});</script>
+` }}
+<!-- ECharts https://github.com/apache/incubator-echarts -->
+{{ $echarts := `
+    <script src="https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js" integrity="sha256-XNiBJGZuErA+MsbKwxuTqNMimobZMsVS79SkTUroRz4=" crossorigin="anonymous"></script>
+` }}
 <!-- TypeIt https://github.com/alexmacarthur/typeit -->
 {{ $typeit := `
     <script src="https://cdn.jsdelivr.net/npm/typeit@6.0.3/dist/typeit.min.js" integrity="sha256-jl1b2Wp4cXCUyX8FxPZ8Z0PPIPV3QYNb/jPSLGDej2c=" crossorigin="anonymous"></script>
@@ -35,12 +44,34 @@
 
 {{ if .IsPage }}
     {{ $lazysizes | safeHTML }}
-    {{ if .Scratch.Get "music" }}
-        {{ $metingjs | safeHTML }}
+
+    {{ if .Scratch.Get "diagram" }}
+        {{ $diagram | safeHTML }}
+    {{ end }}
+
+    {{ with .Scratch.Get "echartsMap" }}
+        {{ $echarts | safeHTML }}
+        {{ $echartsMap := . }}
+        <script>var echartsMap = {
+            {{ range $key, $var := $echartsMap }}
+                {{ $key }}: {{ $var | safeJS }},
+            {{ end }}
+        };var echartsArr=[];</script>
     {{ end }}
+
     {{ if or .Params.math .Site.Params.math }}
         {{ $katex | safeHTML }}
     {{ end }}
+
+    {{ if .Scratch.Get "music" }}
+        {{ $metingjs | safeHTML }}
+    {{ end }}
+
+    {{ with .Scratch.Get "countdownMap" }}
+        {{ $countdown | safeHTML }}
+        <script>var countdownMap = {{ . | jsonify | safeJS }};</script>
+    {{ end }}
+
     {{ $scripts = $scripts | append $dynamicToTop }}
     {{ $scripts = $scripts | resources.Concat "/js/vendor_post.js" | resources.Minify }}
 {{ else }}
@@ -56,10 +87,6 @@
     {{ 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>
 

layouts/posts/single.html

@@ -22,33 +22,39 @@
                         {{ range . }}
                             {{- $name := . -}}
                             {{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
-                                <i class="far fa-folder"></i>&nbsp;
-                                <a href="{{ .Permalink }}">{{ $name }}</a>
+                                <i class="far fa-folder"></i>&nbsp;<a href="{{ .Permalink }}">{{ $name }}</a>
                             {{ end -}}
                         {{ end }}
                     </span>
                 {{- end }}
             </div>
+
             <div class="post-meta-other">
-                <i class="far fa-calendar-alt"></i>&nbsp;
-                <span class="post-time"><time datetime={{ $publish_date }}>{{ $publish_date }}</time></span>&nbsp;
-                <i class="fas fa-pencil-alt"></i>&nbsp;
-                {{ T "wordCount" .WordCount }}&nbsp;
-                <i class="far fa-clock"></i>&nbsp;
-                {{ T "readingTime" .ReadingTime }}&nbsp;
-                {{ 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 }}
+                <span class="post-time"><i class="far fa-calendar-alt"></i>&nbsp;<time datetime={{ $publish_date }}>{{ $publish_date }}</time>&nbsp;</span>
+                <i class="fas fa-pencil-alt"></i>&nbsp;{{ T "wordCount" .WordCount }}&nbsp;
+                <i class="far fa-clock"></i>&nbsp;{{ T "readingTime" .ReadingTime }}&nbsp;
+                {{- if  eq (getenv "HUGO_ENV") "production" | and .Site.Params.valine.enable | and .Site.Params.valine.visitor -}}
+                    <span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
+                        <i class="far fa-eye"></i>&nbsp;{{ T "pageviews" | safeHTML }}&nbsp;
+                    </span>
+                {{- end -}}
             </div>
         </div>
 
+        {{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}}
+            <div class="post-toc" id="post-toc">
+                <h2 class="post-toc-title">{{ T "toc" }}</h2>
+                {{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default true }}
+                <div class="post-toc-content{{ if not (or .Params.autoCollapseToc (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false))) }} always-active{{ end }}">
+                    {{.TableOfContents}}
+                </div>
+            </div>
+        {{- end }}
+
         <div class="post-content">
             <!--featured_image-->
             {{ with .Params.featured_image }}
-                <img src="{{ . }}" class="featured_image">
+                <img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
             {{ end }}
             <!-- end featured_image-->
 
@@ -60,45 +66,39 @@
             {{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
             {{ $finalContent }}
         </div>
+        <div class="post-footer">
+            <div class="post-info">
+                <div class="post-info-mod"><span>{{ printf (T "lastMod") $modify_date }}</span></div>
+                <div class="post-info-share">
+                    {{ if and ( $.Param "socialShare" ) (gt (len ($.Param "share")) 0) }}
+                        <span>{{ partial "post/share-links.html" . }}</span>
+                    {{ end }}
+                </div>
+            </div>
 
-        <div class="post-info">
-            <p class="post-info-item">
-                <span>{{ T "lastMod" }}:</span>
-                <span>{{ $modify_date }}</span>
-            </p>
+            <div class="post-tags">
+                <section>
+                    {{ 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>
+                <section>
+                    <span><a href="javascript:window.history.back();">{{ T "back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{ .Site.BaseURL }}">{{ T "home" }}</a></span>
+                </section>
+            </div>
 
-            <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>
+            <div class="post-nav">
+                {{ if .PrevInSection }}
+                <a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i class="fas fa-angle-left"></i>&nbsp;{{ .PrevInSection.Title}}</a>
                 {{ end }}
-            </p>
-        </div>
-
-        <div class="post-tags">
-            <section>
-                {{ with .Params.tags }}
-                    {{ range . }}
-                        <span class="tag">
-                            <i class="fas fa-tag"></i><a href="{{ "tags/" | absURL }}{{ . | urlize }}/">&nbsp;{{.}}&nbsp;</a>
-                        </span>
-                    {{ end }}
+                {{ if .NextInSection }}
+                <a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}}&nbsp;<i class="fas fa-angle-right"></i></a>
                 {{ end }}
-            </section>
-            <section>
-                <span><a href="javascript:window.history.back();">{{ T "back" }}</a></span>
-                |
-                <span><a href="{{ .Site.BaseURL }}">{{ T "home" }}</a></span>
-            </section>
-        </div>
-
-        <div class="post-nav">
-            {{ if .PrevInSection }}
-            <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="fas fa-angle-right"></i></a>
-            {{ end }}
+            </div>
         </div>
 
         <div class="post-comment">

layouts/shortcodes/bilibili.html

+<div class="bilibili">
+    {{- if .IsNamedParams -}}
+        <iframe src="//player.bilibili.com/player.html?aid={{ .Get "aid" }}&cid={{ .Get "cid" }}&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+    {{- else -}}
+        <iframe src="//player.bilibili.com/player.html?aid={{ .Get 0 }}&cid={{ .Get 1 }}&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+    {{- end -}}
+</div>
\ No newline at end of file

layouts/shortcodes/diagram.html

+{{ $_hugo_config := `{ "version": 1 }` -}}
+{{ .Page.Scratch.Set "diagram" "true" }}
+<div class="mermaid">
+    {{- .Inner -}}
+</div>
\ No newline at end of file

layouts/shortcodes/echarts.html

+<!-- shuffle md5 as id -->
+{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "ec-%s" -}}
+{{ $echartsMap := .Page.Scratch.Get "echartsMap" -}}
+{{ if $echartsMap -}}
+    {{ $echartsMap = dict $id .Inner | merge $echartsMap -}}
+{{ else -}}
+    {{ $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 }}
\ No newline at end of file

layouts/shortcodes/music.html

-{{ .Page.Scratch.Set "music" "true" }}
+{{ .Page.Scratch.Set "music" "true" -}}
 {{ if .IsNamedParams }}
     <meting-js server={{ .Get "server" }} type={{ .Get "type" }} id={{ .Get "id" }}
     {{ with .Get "autoplay" }}