Merge pull request #101 from dillonzq/feature/lightgallery

feat(image): add image lightgallery
2025-01-20 23:57:09 +01:00 · 2020-02-27 20:17:58 +08:00 · 2020-02-27 20:17:58 +08:00 · aaff1514db
commit aaff1514db
parent 411b100edd 61d2bd49b9
218 changed files with 1481 additions and 1004 deletions
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -17,6 +17,7 @@ featuredImagePreview: ""

 toc: false
 autoCollapseToc: true
+lightgallery: true
 math: false
 comment: true
 ---
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@ -75,3 +75,46 @@ a {
    }
  }
 }
+
+#dynamic-to-top {
+  display: none;
+  overflow: hidden;
+  width: auto;
+  z-index: 90;
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  top: auto;
+  left: auto;
+  font-family: sans-serif;
+  font-size: 1rem;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  padding: 1rem 1rem;
+  border: 1px solid $global-border-color;
+  background: #222;
+  outline: none;
+  &:hover {
+    background: #000;
+    cursor: pointer;
+  }
+  &:active {
+    background: #000;
+    outline: none;
+  }
+  &:focus, &:hover {
+    outline: none;
+  }
+  span {
+    display: block;
+    overflow: hidden;
+    width: .875rem;
+    height: .75rem;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAACXBIWXMAAArwAAAK8AFCrDSYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAKVJREFUeNqUz7ENgzAURdErUSXQMgdTZJFIqeg8DFI2YQeEvAEbUJja3y9NEiwCUXIlN/62jww7Saok3Z+r4pckXSRNWpskXb5deClHfeo7ylGrLqnbTmOMs/e+9d63McZ554GOlFLId0IIvXOuAUqgdM41IYQ+P5NSCpjZkitADRTZTwqgznUzWzCzZaMc9dbNbGEYhuuOclQB1OM43gBO/N/5MQAeMwpyB1MtLQAAAABJRU5ErkJggg==') no-repeat center center;
+  }
+
+  .dark-theme &{
+    border: 1px solid $global-border-color-dark;
+  }
+}
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@ -168,26 +168,35 @@

    figure {
      text-align: center;
-    }

-    .image-caption:not(:empty) {
-      min-width: 20%;
-      max-width: 80%;
-      display: inline-block;
-      padding: .625rem;
-      margin: 0 auto;
-      border-bottom: 1px solid #d9d9d9;
-      font-size: .875rem;
-      color: #969696;
-      line-height: 1.7;
+      .image-caption:not(:empty) {
+        min-width: 20%;
+        max-width: 80%;
+        display: inline-block;
+        padding: .625rem;
+        margin: 0 auto;
+        border-bottom: 1px solid #d9d9d9;
+        font-size: .875rem;
+        color: #969696;
+        line-height: 1.7;
+      }
+
+      a.lightgallery:hover img {
+        transform: scale(1.02);
+      }
    }

    img {
      display: block;
-      max-width: 100%;
+      max-width: 96%;
      height: auto;
      margin: 0 auto;
      overflow: hidden;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .lazyloading {
+      object-fit: none;
    }

    blockquote {
--- a/assets/css/_partial/_footer.scss
+++ b/assets/css/_partial/_footer.scss
@ -10,47 +10,3 @@
    }
  }
 }
-
-.dynamic-to-top {
-  display: none;
-  overflow: hidden;
-  width: auto;
-  z-index: 90;
-  position: fixed;
-  bottom: 2rem;
-  right: 2rem;
-  top: auto;
-  left: auto;
-  font-family: sans-serif;
-  font-size: 1rem;
-  color: #fff;
-  text-decoration: none;
-  text-shadow: 0 1px 0 #333;
-  font-weight: bold;
-  padding: 1rem 1rem;
-  border: 1px solid $global-border-color;
-  background: #222;
-  &:hover {
-    background: #000;
-    cursor: pointer;
-  }
-  &:active {
-    background: #000;
-    outline: none;
-  }
-  outline: none;
-  &:focus, &:hover {
-    outline: none;
-  }
-  span {
-    display: block;
-    overflow: hidden;
-    width: .875rem;
-    height: .75rem;
-    background: url('data:image/png;base64,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') no-repeat center center;
-  }
-
-  .dark-theme &{
-    border: 1px solid $global-border-color-dark;
-  }
-}
--- a/assets/css/lib/VERSION
+++ b/assets/css/lib/VERSION
@ -1,8 +0,0 @@
-fontawesome-free@5.11.2
-forkawesome@1.1.7
-gittalk@1.5.0
-katex@0.11.1
-aplayer@1.10.1
-animate.css@3.7.2
-mermaid@8.4.2
-valine@1.3.10
--- a/assets/css/lib/fontawesome-free/all.min.css
+++ b/assets/css/lib/fontawesome-free/all.min.css
--- a/assets/css/mermaid.scss
+++ b/assets/css/mermaid.scss
@ -1,11 +0,0 @@
-.mermaid {
-  width: 100%;
-  margin: 3% auto;
-  text-align: center;
-
-  @import "lib/mermaid/neutral/index";
-
-  .dark-theme & {
-    @import "lib/mermaid/dark/index";
-  }
-}
--- a/assets/js/lib/VERSION
+++ b/assets/js/lib/VERSION
@ -1,11 +0,0 @@
-gitalk@1.5.0
-valine@1.3.10
-lazysizes@5.1.2
-katex@0.11.1
-mermaid@8.4.2
-echarts@4.5.0
-typeit@6.5.1
-aplayer@1.10.1
-meting@2.0.1
-smooth-scroll@16.1.2
-sharer@0.4.0
--- a/assets/js/lib/echarts/echarts.min.js
+++ b/assets/js/lib/echarts/echarts.min.js
--- a/assets/js/lib/gitalk/gitalk.min.js
+++ b/assets/js/lib/gitalk/gitalk.min.js
--- a/assets/js/lib/lazysizes/lazysizes.min.js
+++ b/assets/js/lib/lazysizes/lazysizes.min.js
--- a/assets/js/lib/mermaid/mermaid.min.js
+++ b/assets/js/lib/mermaid/mermaid.min.js
--- a/assets/js/theme.min.js
+++ b/assets/js/theme.min.js
--- a/assets/js/theme.min.js.map
+++ b/assets/js/theme.min.js.map
--- a/assets/lib/VERSION
+++ b/assets/lib/VERSION
@ -0,0 +1,16 @@
+fontawesome-free@5.12.1 https://fontawesome.com/
+forkawesome@1.1.7 https://forkaweso.me/Fork-Awesome/
+animate.css@3.7.2 https://github.com/daneden/animate.css
+smooth-scroll@16.1.2 https://github.com/cferdinandi/smooth-scroll
+sharer@0.4.0 https://github.com/ellisonleao/sharer.js
+lazysizes@5.2.0 https://github.com/aFarkas/lazysizes
+lightgallery@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0 https://github.com/sachinchoolur/lightgallery.js
+typeit@6.5.1 https://github.com/alexmacarthur/typeit
+katex@0.11.1 https://github.com/KaTeX/KaTeX
+mermaid@8.4.8 https://github.com/knsv/mermaid
+aplayer@1.10.1 https://github.com/MoePlayer/APlayer
+meting@2.0.1 https://github.com/metowolf/MetingJS
+echarts@4.6.0 https://echarts.apache.org/
+gitalk@1.6.0 https://github.com/gitalk/gitalk
+valine@1.3.10 https://valine.js.org/
+iconfont https://www.iconfont.cn/
--- a/assets/css/lib/animate/animate.min.css
+++ b/assets/css/lib/animate/animate.min.css
--- a/assets/css/lib/aplayer/APlayer.min.css
+++ b/assets/css/lib/aplayer/APlayer.min.css
--- a/assets/js/lib/aplayer/APlayer.min.js
+++ b/assets/js/lib/aplayer/APlayer.min.js
--- a/assets/css/lib/aplayer/dark.scss
+++ b/assets/css/lib/aplayer/dark.scss
--- a/assets/lib/echarts/echarts.min.js
+++ b/assets/lib/echarts/echarts.min.js
--- a/assets/js/lib/echarts/macarons.js
+++ b/assets/js/lib/echarts/macarons.js
@ -17,19 +17,22 @@
 * under the License.
 */

-(function (root, factory) {
+(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') {
+    } 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) {
+})(this, function(exports, echarts) {
+    var log = function(msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
@ -40,13 +43,28 @@
    }

    var colorPalette = [
-        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
-        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
-        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
-        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+        '#2ec7c9',
+        '#b6a2de',
+        '#5ab1ef',
+        '#ffb980',
+        '#d87a80',
+        '#8d98b3',
+        '#e5cf0d',
+        '#97b552',
+        '#95706d',
+        '#dc69aa',
+        '#07a2a4',
+        '#9a7fd1',
+        '#588dd5',
+        '#f5994e',
+        '#c05050',
+        '#59678c',
+        '#c9ab00',
+        '#7eb00a',
+        '#6f5553',
+        '#c14089'
    ];

-
    var theme = {
        color: colorPalette,

@ -59,7 +77,7 @@

        visualMap: {
            itemWidth: 15,
-            color: ['#5ab1ef','#e0ffff']
+            color: ['#5ab1ef', '#e0ffff']
        },

        toolbox: {
@ -72,15 +90,15 @@

        tooltip: {
            backgroundColor: 'rgba(50,50,50,0.5)',
-            axisPointer : {
-                type : 'line',
-                lineStyle : {
+            axisPointer: {
+                type: 'line',
+                lineStyle: {
                    color: '#008acd'
                },
                crossStyle: {
                    color: '#008acd'
                },
-                shadowStyle : {
+                shadowStyle: {
                    color: 'rgba(200,200,200,0.2)'
                }
            }
@ -115,10 +133,10 @@
                    color: '#008acd'
                }
            },
-            splitArea : {
-                show : true,
-                areaStyle : {
-                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+            splitArea: {
+                show: true,
+                areaStyle: {
+                    color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
                }
            },
            splitLine: {
@ -128,34 +146,37 @@
            }
        },

-        timeline : {
-            lineStyle : {
-                color : '#008acd'
+        timeline: {
+            lineStyle: {
+                color: '#008acd'
            },
-            controlStyle : {
-                normal : { color : '#008acd'},
-                emphasis : { color : '#008acd'}
+            controlStyle: {
+                color: '#008acd',
+                borderColor: '#008acd'
            },
-            symbol : 'emptyCircle',
-            symbolSize : 3
+            symbol: 'emptyCircle',
+            symbolSize: 3
        },

        line: {
-            smooth : true,
+            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 3
        },

        candlestick: {
            itemStyle: {
-                normal: {
-                    color: '#d87a80',
-                    color0: '#2ec7c9',
-                    lineStyle: {
-                        color: '#d87a80',
-                        color0: '#2ec7c9'
-                    }
-                }
+                color: '#d87a80',
+                color0: '#2ec7c9'
+            },
+            lineStyle: {
+                width: 1,
+                color: '#d87a80',
+                color0: '#2ec7c9'
+            },
+            areaStyle: {
+                color: '#2ec7c9',
+                color0: '#b6a2de'
            }
        },

@ -165,53 +186,55 @@
        },

        map: {
-            label: {
-                normal: {
-                    textStyle: {
-                        color: '#d87a80'
-                    }
-                }
-            },
            itemStyle: {
-                normal: {
-                    borderColor: '#eee',
-                    areaColor: '#ddd'
-                },
-                emphasis: {
-                    areaColor: '#fe994e'
-                }
+                color: '#ddd'
+            },
+            areaStyle: {
+                color: '#fe994e'
+            },
+            label: {
+                color: '#d87a80'
            }
        },

        graph: {
-            color: colorPalette
+            itemStyle: {
+                color: '#d87a80'
+            },
+            linkStyle: {
+                color: '#2ec7c9'
+            }
        },

-        gauge : {
+        gauge: {
            axisLine: {
                lineStyle: {
-                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
+                    color: [
+                        [0.2, '#2ec7c9'],
+                        [0.8, '#5ab1ef'],
+                        [1, '#d87a80']
+                    ],
                    width: 10
                }
            },
            axisTick: {
                splitNumber: 10,
-                length :15,
+                length: 15,
                lineStyle: {
                    color: 'auto'
                }
            },
            splitLine: {
-                length :22,
+                length: 22,
                lineStyle: {
                    color: 'auto'
                }
            },
-            pointer : {
-                width : 5
+            pointer: {
+                width: 5
            }
        }
    };

    echarts.registerTheme('macarons', theme);
-}));
+});
--- a/assets/lib/fontawesome-free/all.min.css
+++ b/assets/lib/fontawesome-free/all.min.css
--- a/assets/css/lib/forkawesome/_animated.scss
+++ b/assets/css/lib/forkawesome/_animated.scss
--- a/assets/css/lib/forkawesome/_bordered-pulled.scss
+++ b/assets/css/lib/forkawesome/_bordered-pulled.scss
--- a/assets/css/lib/forkawesome/_core.scss
+++ b/assets/css/lib/forkawesome/_core.scss
--- a/assets/css/lib/forkawesome/_fixed-width.scss
+++ b/assets/css/lib/forkawesome/_fixed-width.scss
--- a/assets/css/lib/forkawesome/_functions.scss
+++ b/assets/css/lib/forkawesome/_functions.scss
--- a/assets/css/lib/forkawesome/_icons.scss
+++ b/assets/css/lib/forkawesome/_icons.scss
--- a/assets/css/lib/forkawesome/_larger.scss
+++ b/assets/css/lib/forkawesome/_larger.scss
--- a/assets/css/lib/forkawesome/_list.scss
+++ b/assets/css/lib/forkawesome/_list.scss
--- a/assets/css/lib/forkawesome/_mixins.scss
+++ b/assets/css/lib/forkawesome/_mixins.scss
--- a/assets/css/lib/forkawesome/_path.scss
+++ b/assets/css/lib/forkawesome/_path.scss
--- a/assets/css/lib/forkawesome/_rotated-flipped.scss
+++ b/assets/css/lib/forkawesome/_rotated-flipped.scss
--- a/assets/css/lib/forkawesome/_screen-reader.scss
+++ b/assets/css/lib/forkawesome/_screen-reader.scss
--- a/assets/css/lib/forkawesome/_stacked.scss
+++ b/assets/css/lib/forkawesome/_stacked.scss
--- a/assets/css/lib/forkawesome/_variables.scss
+++ b/assets/css/lib/forkawesome/_variables.scss
--- a/assets/css/lib/forkawesome/fork-awesome.scss
+++ b/assets/css/lib/forkawesome/fork-awesome.scss
--- a/assets/css/lib/gitalk/gitalk.css
+++ b/assets/css/lib/gitalk/gitalk.css
@ -1145,6 +1145,16 @@
  font-size: 0.875em;
  position: relative;
 }
+.gt-container .gt-comment-block-1 {
+  float: right;
+  height: 1.375em;
+  width: 2em;
+}
+.gt-container .gt-comment-block-2 {
+  float: right;
+  height: 1.375em;
+  width: 4em;
+}
 .gt-container .gt-comment-username {
  font-weight: 500;
  color: #6190e8;
@ -1184,6 +1194,35 @@
 .gt-container .gt-comment-body {
  color: #333 !important;
 }
+.gt-container .gt-comment-body .email-hidden-toggle a {
+  display: inline-block;
+  height: 12px;
+  padding: 0 9px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 6px;
+  color: #444d56;
+  text-decoration: none;
+  vertical-align: middle;
+  background: #dfe2e5;
+  border-radius: 1px;
+}
+.gt-container .gt-comment-body .email-hidden-toggle a:hover {
+  background-color: #c6cbd1;
+}
+.gt-container .gt-comment-body .email-hidden-reply {
+  display: none;
+  white-space: pre-wrap;
+}
+.gt-container .gt-comment-body .email-hidden-reply .email-signature-reply {
+  padding: 0 15px;
+  margin: 15px 0;
+  color: #586069;
+  border-left: 4px solid #dfe2e5;
+}
+.gt-container .gt-comment-body .email-hidden-reply.expanded {
+  display: block;
+}
 .gt-container .gt-comment-admin .gt-comment-content {
  background-color: #f6f9fe;
 }
--- a/assets/lib/gitalk/gitalk.min.js
+++ b/assets/lib/gitalk/gitalk.min.js
--- a/assets/css/lib/iconfont/iconfont.css
+++ b/assets/css/lib/iconfont/iconfont.css
--- a/assets/js/lib/katex/auto-render.min.js
+++ b/assets/js/lib/katex/auto-render.min.js
--- a/assets/css/lib/katex/copy-tex.min.css
+++ b/assets/css/lib/katex/copy-tex.min.css
--- a/assets/js/lib/katex/copy-tex.min.js
+++ b/assets/js/lib/katex/copy-tex.min.js
--- a/assets/css/lib/katex/katex.min.css
+++ b/assets/css/lib/katex/katex.min.css
--- a/assets/js/lib/katex/katex.min.js
+++ b/assets/js/lib/katex/katex.min.js
--- a/assets/js/lib/katex/mhchem.min.js
+++ b/assets/js/lib/katex/mhchem.min.js
--- a/assets/lib/lazysizes/lazysizes.min.js
+++ b/assets/lib/lazysizes/lazysizes.min.js
--- a/assets/lib/lightgallery/lg-thumbnail.min.js
+++ b/assets/lib/lightgallery/lg-thumbnail.min.js
--- a/assets/lib/lightgallery/lg-zoom.min.js
+++ b/assets/lib/lightgallery/lg-zoom.min.js
--- a/assets/lib/lightgallery/lightgallery.min.css
+++ b/assets/lib/lightgallery/lightgallery.min.css
--- a/assets/lib/lightgallery/lightgallery.min.js
+++ b/assets/lib/lightgallery/lightgallery.min.js
--- a/assets/lib/mermaid/mermaid.min.js
+++ b/assets/lib/mermaid/mermaid.min.js
--- a/assets/lib/mermaid/mermaid.scss
+++ b/assets/lib/mermaid/mermaid.scss
@ -0,0 +1,15 @@
+.page .mermaid {
+  width: 100%;
+  margin: 3% auto;
+  text-align: center;
+
+  & > svg {
+    max-width: 100%;
+  }
+
+  @import "themes/neutral/index";
+
+  .dark-theme & {
+    @import "themes/darker/index";
+  }
+}
--- a/assets/lib/mermaid/themes/class.scss
+++ b/assets/lib/mermaid/themes/class.scss
@ -10,6 +10,10 @@ g.classGroup text {
  }
 }

+g.clickable {
+  cursor: pointer;
+}
+
 g.classGroup rect {
  fill: $nodeBkg;
  stroke: $nodeBorder;
@ -38,6 +42,10 @@ g.classGroup line {
  fill: none;
 }

+.dashed-line{
+  stroke-dasharray: 3;
+}
+
@mixin composition {
  fill: $nodeBorder;
  stroke: $nodeBorder;
--- a/assets/lib/mermaid/themes/dark/index.scss
+++ b/assets/lib/mermaid/themes/dark/index.scss
--- a/assets/lib/mermaid/themes/darker/index.scss
+++ b/assets/lib/mermaid/themes/darker/index.scss
@ -0,0 +1,62 @@
+$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;
+
+/* state colors */
+$labelColor: black;
+
+@import '../mermaid';
--- a/assets/lib/mermaid/themes/default/index.scss
+++ b/assets/lib/mermaid/themes/default/index.scss
--- a/assets/lib/mermaid/themes/flowchart.scss
+++ b/assets/lib/mermaid/themes/flowchart.scss
@ -11,7 +11,8 @@
 .node rect,
 .node circle,
 .node ellipse,
-.node polygon {
+.node polygon,
+.node path {
  fill: $mainBkg;
  stroke: $nodeBorder;
  stroke-width: 1px;
--- a/assets/lib/mermaid/themes/forest/index.scss
+++ b/assets/lib/mermaid/themes/forest/index.scss
--- a/assets/lib/mermaid/themes/gantt.scss
+++ b/assets/lib/mermaid/themes/gantt.scss
@ -54,7 +54,7 @@

 .grid .tick {
  stroke: $gridColor;
-  opacity: 0.3;
+  opacity: 0.8;
  shape-rendering: crispEdges;
  text {
    font-family: 'trebuchet ms', verdana, arial;
--- a/assets/lib/mermaid/themes/git.scss
+++ b/assets/lib/mermaid/themes/git.scss
--- a/assets/lib/mermaid/themes/mermaid.scss
+++ b/assets/lib/mermaid/themes/mermaid.scss
@ -1,4 +1,3 @@
-// mermaid@8.4.2
@import 'flowchart';
@import 'sequence';
@import 'gantt';
--- a/assets/lib/mermaid/themes/neutral/index.scss
+++ b/assets/lib/mermaid/themes/neutral/index.scss
--- a/assets/lib/mermaid/themes/pie.scss
+++ b/assets/lib/mermaid/themes/pie.scss
--- a/assets/lib/mermaid/themes/sequence.scss
+++ b/assets/lib/mermaid/themes/sequence.scss
--- a/assets/lib/mermaid/themes/state.scss
+++ b/assets/lib/mermaid/themes/state.scss
@ -37,6 +37,11 @@ g.stateGroup line {
  border-bottom: 1px
 }

+.stateGroup .alt-composit {
+  fill: #e0e0e0;
+  border-bottom: 1px
+}
+
 .state-note {
  stroke: $noteBorderColor;
  fill: $noteBkgColor;
--- a/assets/js/lib/meting/Meting.min.js
+++ b/assets/js/lib/meting/Meting.min.js
--- a/assets/js/lib/sharer/sharer.min.js
+++ b/assets/js/lib/sharer/sharer.min.js
--- a/assets/js/lib/smooth-scroll/smooth-scroll.polyfills.min.js
+++ b/assets/js/lib/smooth-scroll/smooth-scroll.polyfills.min.js
--- a/assets/js/lib/typeit/typeit.min.js
+++ b/assets/js/lib/typeit/typeit.min.js
--- a/assets/js/lib/valine/Valine.min.js
+++ b/assets/js/lib/valine/Valine.min.js
--- a/assets/css/lib/valine/dark.scss
+++ b/assets/css/lib/valine/dark.scss
--- a/assets/svg/loading.small.svg
+++ b/assets/svg/loading.small.svg
@ -0,0 +1,32 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="69" height="69" viewBox="-31 -31 100 100" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+            <stop stop-color="#fff" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
+            <stop stop-color="#fff" offset="100%"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)">
+            <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </path>
+            <circle fill="#fff" cx="36" cy="18" r="1">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </circle>
+        </g>
+    </g>
+</svg>
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@ -66,8 +66,6 @@ enableEmoji = true
        url = "/zh/"
        weight = 5
      [languages.en.params]
-        # LoveIt theme version
-        version = "0.1.X"
        # site description
        description = "About LoveIt Theme"
        # site keywords
@ -76,20 +74,6 @@ enableEmoji = true
        defaultTheme = "auto"
        # public git repo url to link lastmod git commit only then enableGitInfo is true
        gitRepo = ""
-        # Header info
-        [languages.en.params.header]
-          # desktop header mode ("fixed", "normal", "auto")
-          desktopMode = "fixed"
-          # mobile header mode ("fixed", "normal", "auto")
-          mobileMode = "auto"
-        # Footer Copyright Info
-        [languages.en.params.footer]
-          # Site creation time
-          since = 2019
-          # ICP info only in China (HTML format is allowed)
-          icp = ""
-          # license info (HTML format is allowed)
-          license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
        # Home Page Info
        [languages.en.params.home]
          # Home Page Profile
@ -98,7 +82,7 @@ enableEmoji = true
            # Gravatar Email for preferred avatar in home page
            gravatarEmail = ""
            # URL of avatar shown in home page
-            avatarURL = "images/avatar.png"
+            avatarURL = "/images/avatar.png"
            # subtitle shown in home page
            subtitle = "A Clean, Elegant but Advanced Hugo Theme"
            # whether to use typeit animation for subtitle
@ -178,12 +162,6 @@ enableEmoji = true
          # XMPP = "xxxx"
          # Matrix = "xxxx"
          # Bilibili = "xxxx"
-        # Page config
-        [languages.en.params.page]
-          # whether to show social share links in post page
-          socialShare = true
-          # whether to show link to Raw Markdown content of the post
-          linkToMarkdown = true
        # Social Share Links in post page
        [languages.en.params.share]
          enable = true
@ -214,67 +192,6 @@ enableEmoji = true
          # Skype = true
          # Trello = true
          # Mix = true
-        # mathematical formulas (KaTeX)
-        [languages.en.params.math]
-          enable = true
-          # default inline delimiter is $ ... $ and \\( ... \\)
-          inlineLeftDelimiter = ""
-          inlineRightDelimiter = ""
-          # default block delimiter is $$ ... $$ and \\[ ... \\]
-          blockLeftDelimiter = ""
-          blockRightDelimiter = ""
-          # KaTeX extension copy_tex
-          copyTex = true
-          # KaTeX extension mhchem
-          mhchem = true
-        # CSS and JS Files CDN
-        [languages.en.params.cdn]
-          ## for example '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">'
-          fontawesomeFreeCSS = ''
-          animateCSS = ''
-          gitalkCSS = ''
-          gitalkJS = ''
-          valineJS = ''
-          lazysizesJS = ''
-          smoothScrollJS = ''
-          sharerJS = ''
-          katexCSS = ''
-          katexJS = ''
-          katexAutoRenderJS = ''
-          katexCopyTexCSS = ''
-          katexCopyTexJS = ''
-          katexMhchemJS = ''
-          mermaidJS = ''
-          echartsJS = ''
-          echartsMacaronsJS = ''
-          typeitJS = ''
-          aplayerCSS = ''
-          aplayerJS = ''
-          metingJS = ''
-        # site verification code for Google/Bing/Yandex/Pinterest/Baidu
-        [languages.en.params.verification]
-          google = ""
-          bing = ""
-          yandex = ""
-          pinterest = ""
-          baidu = ""
-        # Publisher Info just for SEO
-        [languages.en.params.publisher]
-          name = "xxxx"
-          [languages.en.params.publisher.logo]
-            url = "logo.png"
-            width = 127
-            height = 40
-        # Website Log Info just for SEO
-        [languages.en.params.logo]
-          url = "logo.png"
-          width = 127
-          height = 40
-        # Website Image Info just for SEO
-        [languages.en.params.image]
-          url = "cover.png"
-          width = 800
-          height = 600
        # Comment Config
        [languages.en.params.comment]
          enable = true
@ -355,8 +272,6 @@ enableEmoji = true
        url = "../"
        weight = 5
    [languages.zh.params]
-      # LoveIt 主题版本
-      version = "0.1.X"
      # 网站描述
      description = "关于 LoveIt 主题"
      # 网站关键词
@ -365,20 +280,6 @@ enableEmoji = true
      defaultTheme = "auto"
      # 用于生成文章上次修改时间的公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效
      gitRepo = ""
-      # 页面头部导航栏信息
-      [languages.zh.params.header]
-        # 桌面端导航栏模式 ("fixed", "normal", "auto")
-        desktopMode = "fixed"
-        # 移动端导航栏模式 ("fixed", "normal", "auto")
-        mobileMode = "auto"
-      # 页面底部版权信息设置
-      [languages.zh.params.footer]
-        # 网站创立年份
-        since = 2019
-        # ICP 备案信息，仅在中国使用 (允许使用 HTML 格式)
-        icp = ""
-        # 许可协议信息 (允许使用 HTML 格式)
-        license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
      # 主页信息设置
      [languages.zh.params.home]
        # 主页个人信息
@ -387,7 +288,7 @@ enableEmoji = true
          # Gravatar 邮箱，用于优先在主页显示的头像
          gravatarEmail = ""
          # 主页显示头像的 URL
-          avatarURL = "images/avatar.png"
+          avatarURL = "/images/avatar.png"
          # 主页显示的网站副标题
          subtitle = "一个简洁、优雅且高效的 Hugo 主题"
          # 是否为副标题显示打字机动画
@ -467,12 +368,6 @@ enableEmoji = true
        # XMPP = "xxxx@example.com"
        # Matrix = "xxxx"
        Bilibili = "xxxx"
-      # 文章页面配置
-      [languages.zh.params.page]
-        # 在文章页面是否使用分享功能
-        socialShare = true
-        # 是否在文章页面显示原始 Markdown 文档链接
-        linkToMarkdown = true
      # 文章页面的分享信息设置
      [languages.zh.params.share]
        enable = true
@ -503,67 +398,6 @@ enableEmoji = true
        # Skype = true
        # Trello = true
        # Mix = true
-      # 数学公式 (KaTeX https://katex.org/)
-      [languages.zh.params.math]
-        enable = true
-        # 默认内联定界符是 $ ... $ 和 \\( ... \\)
-        inlineLeftDelimiter = ""
-        inlineRightDelimiter = ""
-        # 默认块定界符是 $$ ... $$ 和 \\[ ... \\]
-        blockLeftDelimiter = ""
-        blockRightDelimiter = ""
-        # KaTeX 插件 copy_tex
-        copyTex = true
-        # KaTeX 插件 mhchem
-        mhchem = true
-      # CSS 和 JS 文件的 CDN 设置
-      [languages.zh.params.cdn]
-        ## 例如 '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">'
-        fontawesomeFreeCSS = ''
-        animateCSS = ''
-        gitalkCSS = ''
-        gitalkJS = ''
-        valineJS = ''
-        lazysizesJS = ''
-        smoothScrollJS = ''
-        sharerJS = ''
-        katexCSS = ''
-        katexJS = ''
-        katexAutoRenderJS = ''
-        katexCopyTexCSS = ''
-        katexCopyTexJS = ''
-        katexMhchemJS = ''
-        mermaidJS = ''
-        echartsJS = ''
-        echartsMacaronsJS = ''
-        typeitJS = ''
-        aplayerCSS = ''
-        aplayerJS = ''
-        metingJS = ''
-      # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
-      [languages.zh.params.verification]
-        google = ""
-        bing = ""
-        yandex = ""
-        pinterest = ""
-        baidu = ""
-      # 出版者信息，仅用于 SEO
-      [languages.zh.params.publisher]
-        name = "xxxx"
-        [languages.zh.params.publisher.logo]
-          url = "logo.png"
-          width = 127
-          height = 40
-      # 网站图标信息，仅用于 SEO
-      [languages.zh.params.logo]
-        url = "logo.png"
-        width = 127
-        height = 40
-      #  网站图标信息，仅用于 SEO
-      [languages.zh.params.image]
-        url = "cover.png"
-        width = 800
-        height = 600
      # 评论系统设置
      [languages.zh.params.comment]
        enable = true
@ -598,6 +432,129 @@ enableEmoji = true
          appId = ""
          languageCode = "en_US"

+[params]
+  # LoveIt theme version
+  # LoveIt 主题版本
+  version = "0.1.X"
+  # Header info
+  # 页面头部导航栏信息
+  [params.header]
+    # desktop header mode ("fixed", "normal", "auto")
+    # 桌面端导航栏模式 ("fixed", "normal", "auto")
+    desktopMode = "fixed"
+    # mobile header mode ("fixed", "normal", "auto")
+    # 移动端导航栏模式 ("fixed", "normal", "auto")
+    mobileMode = "auto"
+  # Footer Copyright Info
+  # 页面底部版权信息设置
+  [params.footer]
+    # Site creation time
+    # 网站创立年份
+    since = 2019
+    # ICP info only in China (HTML format is allowed)
+    # ICP 备案信息，仅在中国使用 (允许使用 HTML 格式)
+    icp = ""
+    # license info (HTML format is allowed)
+    # 许可协议信息 (允许使用 HTML 格式)
+    license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
+  # Page config
+  # 文章页面配置
+  [params.page]
+    # whether to use lightgallery in the page
+    # 是否在文章页面使用 lightgallery
+    lightgallery = true
+    # whether to show link to Raw Markdown content of the post
+    # 是否在文章页面显示原始 Markdown 文档链接
+    linkToMarkdown = true
+  # mathematical formulas (KaTeX)
+  # 数学公式 (KaTeX https://katex.org/)
+  [params.math]
+    enable = true
+    # default block delimiter is $$ ... $$ and \\[ ... \\]
+    # 默认块定界符是 $$ ... $$ 和 \\[ ... \\]
+    blockLeftDelimiter = ""
+    blockRightDelimiter = ""
+    # default inline delimiter is $ ... $ and \\( ... \\)
+    # 默认内联定界符是 $ ... $ 和 \\( ... \\)
+    inlineLeftDelimiter = ""
+    inlineRightDelimiter = ""
+    # KaTeX extension copy_tex
+    # KaTeX 插件 copy_tex
+    copyTex = true
+    # KaTeX extension mhchem
+    # KaTeX 插件 mhchem
+    mhchem = true
+  # site verification code for Google/Bing/Yandex/Pinterest/Baidu
+  # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
+  [params.verification]
+    google = ""
+    bing = ""
+    yandex = ""
+    pinterest = ""
+    baidu = ""
+  # Publisher Info just for SEO
+  # 出版者信息，仅用于 SEO
+  [params.publisher]
+    name = "xxxx"
+    [params.publisher.logo]
+      url = "logo.png"
+      width = 127
+      height = 40
+  # Website Log Info just for SEO
+  # 网站 Logo 信息，仅用于 SEO
+  [params.logo]
+    url = "logo.png"
+    width = 127
+    height = 40
+  # Website Image Info just for SEO
+  #  网站图标信息，仅用于 SEO
+  [params.image]
+    url = "cover.png"
+    width = 800
+    height = 600
+  # CSS and JS Files CDN
+  # CSS 和 JS 文件的 CDN 设置
+  [params.cdn]
+    # fontawesome-free@5.12.1 https://fontawesome.com/
+    fontawesomeFreeCSS = ''
+    # animate.css@3.7.2 https://github.com/daneden/animate.css
+    animateCSS = ''
+    # smooth-scroll@16.1.2 https://github.com/cferdinandi/smooth-scroll
+    smoothScrollJS = ''
+    # sharer@0.4.0 https://github.com/ellisonleao/sharer.js
+    sharerJS = ''
+    # lazysizes@5.2.0 https://github.com/aFarkas/lazysizes
+    lazysizesJS = ''
+    # lightgallery@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0 https://github.com/sachinchoolur/lightgallery.js
+    lightgalleryCSS = ''
+    lightgalleryJS = ''
+    lightgalleryThumbnailJS = ''
+    lightgalleryZoomJS = ''
+    # typeit@6.5.1 https://github.com/alexmacarthur/typeit
+    typeitJS = ''
+    # katex@0.11.1 https://github.com/KaTeX/KaTeX
+    katexCSS = ''
+    katexJS = ''
+    katexAutoRenderJS = ''
+    katexCopyTexCSS = ''
+    katexCopyTexJS = ''
+    katexMhchemJS = ''
+    # mermaid@8.4.8 https://github.com/knsv/mermaid
+    mermaidJS = ''
+    # aplayer@1.10.1 https://github.com/MoePlayer/APlayer
+    aplayerCSS = ''
+    aplayerJS = ''
+    # meting@2.0.1 https://github.com/metowolf/MetingJS
+    metingJS = ''
+    # echarts@4.6.0 https://echarts.apache.org/
+    echartsJS = ''
+    echartsMacaronsJS = ''
+    # gitalk@1.6.0 https://github.com/gitalk/gitalk
+    gitalkCSS = ''
+    gitalkJS = ''
+    # valine@1.3.10 https://valine.js.org/
+    valineJS = ''
+
 # Markup related configuration in Hugo
 # Hugo 解析文档的配置
 [markup]
--- a/exampleSite/content/about.en.md
+++ b/exampleSite/content/about.en.md
@ -2,6 +2,8 @@
 title: "About LoveIt"
 date: 2019-08-02T11:04:49+08:00
 draft: false
+
+lightgallery: true
 ---

 [LoveIt :(far fa-heart):](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
--- a/exampleSite/content/about.zh.md
+++ b/exampleSite/content/about.zh.md
@ -2,6 +2,8 @@
 title: "关于 LoveIt"
 date: 2019-08-02T11:04:49+08:00
 draft: false
+
+lightgallery: true
 ---

 [LoveIt :(far fa-heart):](https://github.com/dillonzq/LoveIt) 是一个由 [Dillon](https://dillonzq.com) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
--- a/exampleSite/content/posts/Basic-Markdown-Preview.zh.md
+++ b/exampleSite/content/posts/Basic-Markdown-Preview.zh.md
@ -17,6 +17,7 @@ featuredImagePreview: ""

 toc: true
 autoCollapseToc: true
+lightgallery: true
 math: true
 comment: true
 ---
@ -288,11 +289,11 @@ func main() {
 ### 4.5 表格

 ```markdown
-| _颜色_      | 水果          | 蔬菜         |
-| ----------  |:---------------:| -----------:|
-| 红色           | *苹果*         | 辣椒      |
-| ~~橙色~~    | 橘子         | **胡萝卜**        |
-| 绿色         | ~~***梨子***~~ | 菠菜           |
+| _颜色_      | 水果           | 蔬菜          |
+| ----------- |:-------------:| ----------  -:|
+| 红色        | *苹果*         | 辣椒          |
+| ~~橙色~~    | 橘子           | **胡萝卜**    |
+| 绿色        | ~~***梨子***~~ | 菠菜          |
 ```

 | _颜色_      | 水果          | 蔬菜         |
@ -688,22 +689,6 @@ function doIt() {
 | ~~橙色~~    | 橘子         | **胡萝卜**   |
 | 绿色         | ~~***梨子***~~ | 菠菜      |

-Class or Enum           | Year                                                                                  | Month                                                                                 |                                          Day                                          |                                         Hours                                         |                                        Minutes                                        | Seconds*                                                                              |                                      Zone Offset                                      |                                        Zone ID                                        | toString Output                                    | Where Discussed
----------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:| ------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------
-`Instant`        |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       | `2013-08-20T15:16:26.355Z`                  | [Instant Class](https://docs.oracle.com/javase/tutorial/datetime/iso/instant.html)
-`LocalDate`      | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `2013-08-20`                                | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
-`LocalDateTime`  | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       | `2013-08-20T08:16:26.937`                   | [Date and Time Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/datetime.html)
-`ZonedDateTime`  | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | `2013-08-21T00:16:26.941+09:00[Asia/Tokyo]` | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
-`LocalTime`      |                                                                                       |                                                                                       |                                                                                       | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       | `08:16:26.943`                              | [Date and Time Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/datetime.html)
-`MonthDay`       |                                                                                       | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `--08-20`                                   | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
-`Year`           | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `2013`                                      | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
-`YearMonth`      | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `2013-08`                                   | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
-`Month`          |                                                                                       | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `AUGUST`                                    | [DayOfWeek and Month Enums](https://docs.oracle.com/javase/tutorial/datetime/iso/enum.html)
-`OffsetDateTime` | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       | `2013-08-20T08:16:26.954-07:00`             | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
-`OffsetTime`     |                                                                                       |                                                                                       |                                                                                       | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       | `08:16:26.957-07:00`                        | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
-`Duration`       |                                                                                       |                                                                                       |                                          \**                                          |                                          \**                                          |                                          \**                                          | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       | `PT20H` (20 hours)                          | [Period and Duration](https://docs.oracle.com/javase/tutorial/datetime/iso/period.html)
-`Period`         | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                         \***                                          |                                         \***                                          | `P10D` (10 days)                            | [Period and Duration](https://docs.oracle.com/javase/tutorial/datetime/iso/period.html)
-
 ## Smart Strong

 ```
--- a/exampleSite/content/posts/documentation.en.md
+++ b/exampleSite/content/posts/documentation.en.md
@ -17,34 +17,9 @@ featuredImagePreview: ""

 toc: false
 autoCollapseToc: true
+lightgallery: true
 math: false
 comment: true
 ---

 <!--more-->
-
-```
-content
-├── level-one
-│   ├── level-two
-│   │   ├── level-three
-│   │   │   ├── level-four
-│   │   │   │   ├── _index.md       <-- /level-one/level-two/level-three/level-four
-│   │   │   │   ├── page-4-a.md     <-- /level-one/level-two/level-three/level-four/page-4-a
-│   │   │   │   ├── page-4-b.md     <-- /level-one/level-two/level-three/level-four/page-4-b
-│   │   │   │   └── page-4-c.md     <-- /level-one/level-two/level-three/level-four/page-4-c
-│   │   │   ├── _index.md           <-- /level-one/level-two/level-three
-│   │   │   ├── page-3-a.md         <-- /level-one/level-two/level-three/page-3-a
-│   │   │   ├── page-3-b.md         <-- /level-one/level-two/level-three/page-3-b
-│   │   │   └── page-3-c.md         <-- /level-one/level-two/level-three/page-3-c
-│   │   ├── _index.md               <-- /level-one/level-two
-│   │   ├── page-2-a.md             <-- /level-one/level-two/page-2-a
-│   │   ├── page-2-b.md             <-- /level-one/level-two/page-2-b
-│   │   └── page-2-c.md             <-- /level-one/level-two/page-2-c
-│   ├── _index.md                   <-- /level-one
-│   ├── page-1-a.md                 <-- /level-one/page-1-a
-│   ├── page-1-b.md                 <-- /level-one/page-1-b
-│   └── page-1-c.md                 <-- /level-one/page-1-c
-├── _index.md                       <-- /
-└── page-top.md                     <-- /page-top
-```
--- a/exampleSite/content/posts/documentation.zh.md
+++ b/exampleSite/content/posts/documentation.zh.md
@ -17,6 +17,7 @@ featuredImagePreview: ""

 toc: false
 autoCollapseToc: true
+lightgallery: true
 math: false
 comment: true
 ---
--- a/exampleSite/content/posts/emoji-support.en.md
+++ b/exampleSite/content/posts/emoji-support.en.md
@ -17,6 +17,7 @@ featuredImagePreview: ""

 toc: false
 autoCollapseToc: true
+lightgallery: true
 math: false
 comment: true
 ---
--- a/exampleSite/content/posts/markdown-syntax.en.md
+++ b/exampleSite/content/posts/markdown-syntax.en.md
@ -17,6 +17,7 @@ featuredImagePreview: ""

 toc: true
 autoCollapseToc: true
+lightgallery: true
 math: true
 comment: true
 ---
--- a/exampleSite/content/posts/placeholder-text.en.md
+++ b/exampleSite/content/posts/placeholder-text.en.md
@ -17,6 +17,7 @@ featuredImagePreview: ""

 toc: false
 autoCollapseToc: true
+lightgallery: true
 math: false
 comment: true
 ---
--- a/exampleSite/content/posts/rich-content.en.md
+++ b/exampleSite/content/posts/rich-content.en.md
@ -17,6 +17,7 @@ featuredImagePreview: ""

 toc: false
 autoCollapseToc: true
+lightgallery: true
 math: false
 comment: true
 ---
@ -26,9 +27,9 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme

 ---

-## Instagram Simple Shortcode
+## Instagram Shortcode

-{{< instagram_simple BGvuInzyFAe hidecaption >}}
+{{< instagram BGvuInzyFAe hidecaption >}}

 <br>

@ -42,9 +43,9 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme

 ---

-## Twitter Simple Shortcode
+## Twitter Shortcode

-{{< twitter_simple 1085870671291310081 >}}
+{{< twitter 1085870671291310081 >}}

 <br>

--- a/exampleSite/content/posts/test-mermaid.zh.md
+++ b/exampleSite/content/posts/test-mermaid.zh.md
@ -0,0 +1,105 @@
+---
+title: "Test Mermaid"
+date: 2020-02-27T15:41:42+08:00
+lastmod: 2020-02-27T15:41:42+08:00
+draft: true
+author: ""
+authorLink: ""
+description: ""
+license: ""
+
+tags: []
+categories: []
+hiddenFromHomePage: false
+
+featuredImage: ""
+featuredImagePreview: ""
+
+toc: false
+autoCollapseToc: true
+lightgallery: true
+math: false
+comment: true
+---
+
+<!--more-->
+
+## Flow
+
+{{< mermaid >}}
+graph TD
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+{{< /mermaid >}}
+
+## Sequence
+
+{{< mermaid >}}
+sequenceDiagram
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+    John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+{{< /mermaid >}}
+
+## Gantt
+
+{{< mermaid >}}
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+{{< /mermaid >}}
+
+## Class
+
+{{< mermaid >}}
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+<<interface>> Class01
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+  <<service>>
+  int id
+  size()
+}
+{{< /mermaid >}}
+
+## State
+
+{{< mermaid >}}
+stateDiagram
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+{{< /mermaid >}}
+
+## Pie
+
+{{< mermaid >}}
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+{{< /mermaid >}}
--- a/exampleSite/content/posts/test.zh.md
+++ b/exampleSite/content/posts/test.zh.md
@ -17,9 +17,9 @@ featuredImagePreview: ""

 toc: true
 autoCollapseToc: true
+lightgallery: true
 math: true
 comment: false
-dev: true
 ---

 ## :(fas fa-rocket): This is a test page
@ -30,6 +30,12 @@ Test all features in development.

 <!--more-->

+## Test Img
+
+![Web Image 1](https://static.dillonzq.com/images/20190817130904-U6cPUk.jpg "Web Image")
+
+![Local Image](/images/Apple-Devices-Preview.png "Local Image")
+
 ## Test Code

 ### Inline code
@ -43,11 +49,11 @@ class DataHolder<T>{
    T item;

    public void setData(T t) {
-    	this.item=t;
+        this.item=t;
    }

    public T getData() {
-    	return this.item;
+        return this.item;
    }
 }
 ```
@ -124,44 +130,47 @@ _Blog.chroma = function () {

 ## Test ECharts

-{{< dev/echarts >}}
-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)'
-            }
-        }
-    }
-]
-{{< /dev/echarts >}}
+{{< echarts >}}
+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 Mermaid

@ -384,10 +393,6 @@ Here is a story about love...
 int a = 1;
 {{< /typeit >}}

-## Test Img
-
-![Gif](https://static.dillonzq.com/images/20190817130904-U6cPUk.jpg "Title")
-
 ## Test Align

 {{% align right %}}
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@ -1,6 +1,7 @@
 <figure>
-    {{- partial "plugin/image.html" (dict "src" .Destination "alt" .Text "title" .Title ) -}}
-    {{- with .Title | default .Text -}}
+    {{- $lightgallery := ne .Page.Site.Params.page.lightgallery false | and (ne .Page.Params.lightgallery false) -}}
+    {{- partial "plugin/image.html" (dict "src" .Destination "title" .Title "description" .Text "lightgallery" $lightgallery "scratch" (.Page.Scratch.Get "scratch")) -}}
+    {{- with (.Title | default .Text) -}}
        <figcaption class="image-caption">
            {{- . | safeHTML -}}
        </figcaption>
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -3,9 +3,11 @@
  {{- 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 -}}

+{{- $scratch := newScratch -}}
+{{- .Scratch.Set "scratch" $scratch -}}
 {{- if eq (getenv "HUGO_ENV") "production" -}}
-    {{- .Scratch.Set "production" true -}}
-    {{- .Scratch.Set "CDN" .Site.Params.cdn -}}
+    {{- $scratch.Set "production" true -}}
+    {{- $scratch.Set "CDN" .Site.Params.cdn -}}
 {{- end -}}

 <!DOCTYPE html>
@ -56,7 +58,7 @@
            <span>&nbsp;</span>
        </a>

-        {{- /* Load script */ -}}
-        {{- partial "script.html" . -}}
+        {{- /* Load JavaScript scripts and CSS */ -}}
+        {{- partial "assets.html" . -}}
    </body>
 </html>
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -8,7 +8,7 @@
        </h1>

        {{- /* Content */ -}}
-        <div class="content">
+        <div class="content" id="content">
            {{- partial "single/content.html" .Content -}}
        </div>
    </div>
--- a/layouts/_default/summary.html
+++ b/layouts/_default/summary.html
@ -1,9 +1,11 @@
+{{- $scratch := .Scratch.Get "scratch" -}}
+
 <article class="single summary" itemscope itemtype="http://schema.org/Article">
    {{- /* Featured image */ -}}
    {{- with .Params.featuredImage -}}
        <div class="featured-image-preview">
            {{- $image := $.Params.featuredImagePreview | default . -}}
-            {{- partial "plugin/image.html" (dict "src" $image "alt" "featured image") -}}
+            {{- partial "plugin/image.html" (dict "src" $image "description" $.Description "scratch" $scratch) -}}
        </div>
    {{- end -}}

--- a/layouts/partials/assets.html
+++ b/layouts/partials/assets.html
@ -0,0 +1,245 @@
+{{- $scratch := .Scratch.Get "scratch" -}}
+{{- $CDN := $scratch.Get "CDN" -}}
+
+{{- /* Fork Awesome */ -}}
+{{- if $scratch.Get "forkawesome" -}}
+    {{- slice "lib/forkawesome/fork-awesome.scss" | $scratch.Add "linkLocal" -}}
+{{- end -}}
+
+{{- /* iconfont */ -}}
+{{- if $scratch.Get "iconfont" -}}
+    {{- slice "lib/iconfont/iconfont.css" | $scratch.Add "linkLocal" -}}
+{{- end -}}
+
+{{- /* Smooth Scroll */ -}}
+{{- with $CDN.smoothScrollJS -}}
+    {{- slice . | $scratch.Add "scriptCDN" -}}
+{{- else -}}
+    {{- slice "lib/smooth-scroll/smooth-scroll.polyfills.min.js" | $scratch.Add "scriptLocal" -}}
+{{- end -}}
+
+{{- /* Sharer.js */ -}}
+{{- if $scratch.Get "share" -}}
+    {{- with $CDN.sharerJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/sharer/sharer.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+{{- end -}}
+
+{{- /* lazysizes */ -}}
+{{- if $scratch.Get "lazysizes" -}}
+    {{- with $CDN.lazysizesJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/lazysizes/lazysizes.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+{{- end -}}
+
+{{- /* lightgallery.js */ -}}
+{{- if $scratch.Get "lightgallery" -}}
+    {{- with $CDN.lightgalleryCSS -}}
+        {{- slice . | $scratch.Add "linkCDN" -}}
+    {{- else -}}
+        {{- slice "lib/lightgallery/lightgallery.min.css" | $scratch.Add "linkLocal" -}}
+    {{- end -}}
+    {{- with $CDN.lightgalleryJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/lightgallery/lightgallery.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    {{- with $CDN.lightgalleryThumbnailJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/lightgallery/lg-thumbnail.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    {{- with $CDN.lightgalleryZoomJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/lightgallery/lg-zoom.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            lightGallery(document.getElementById('content'), {
+                selector: '.lightgallery',
+                speed: 400,
+                hideBarsDelay: 2000,
+                thumbnail: true,
+                exThumbImage: 'data-thumbnail',
+                thumbWidth: 80,
+                thumbContHeight: 80,
+            });
+        });
+    </script>
+{{- end -}}
+
+{{- /* TypeIt */ -}}
+{{- with $scratch.Get "typeitMap" -}}
+    {{- with $CDN.typeitJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/typeit/typeit.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    {{- range $key, $val := . -}}
+        {{- slice $val | $scratch.Add "typeitArr" -}}
+    {{- end -}}
+    <script>
+        window.typeitArr = {{ $scratch.Get "typeitArr" | jsonify | safeJS }};
+    </script>
+{{- end -}}
+
+{{- /* KaTeX */ -}}
+{{- if ne .Site.Params.math.enable false | and .Params.math -}}
+    {{- with $CDN.katexCSS -}}
+        {{- slice . | $scratch.Add "linkCDN" -}}
+    {{- else -}}
+        {{- slice "lib/katex/katex.min.css" | $scratch.Add "linkLocal" -}}
+    {{- end -}}
+    {{- with $CDN.katexJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/katex/katex.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    {{- with $CDN.katexAutoRenderJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/katex/auto-render.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    {{- $math := .Site.Params.math -}}
+    {{- if $math.copyTex -}}
+        {{- with $CDN.katexCopyTexCSS -}}
+            {{- slice . | $scratch.Add "linkCDN" -}}
+        {{- else -}}
+            {{- slice "lib/katex/copy-tex.min.css" | $scratch.Add "linkLocal" -}}
+        {{- end -}}
+        {{- with $CDN.katexCopyTexJS -}}
+            {{- slice . | $scratch.Add "scriptCDN" -}}
+        {{- else -}}
+            {{- slice "lib/katex/copy-tex.min.js" | $scratch.Add "scriptLocal" -}}
+        {{- end -}}
+    {{- end -}}
+    {{- if $math.mhchem -}}
+        {{- with $CDN.katexMhchemJS -}}
+            {{- slice . | $scratch.Add "scriptCDN" -}}
+        {{- else -}}
+            {{- slice "lib/katex/mhchem.min.js" | $scratch.Add "scriptLocal" -}}
+        {{- end -}}
+    {{- end -}}
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            renderMathInElement(document.body, {
+                delimiters: [
+                    { left: '$$', right: '$$', display: true },
+                    { left: '\\[', right: '\\]', display: true },
+                    {{- if and $math.blockLeftDelimiter $math.blockRightDelimiter -}}
+                        { left: '{{ $math.blockLeftDelimiter }}', right: '{{ $math.blockRightDelimiter }}', display: true },
+                    {{- end -}}
+                    { left: '$', right: '$', display: false },
+                    { left: '\\(', right: '\\)', display: false },
+                    {{- if and $math.inlineLeftDelimiter $math.inlineRightDelimiter -}}
+                        { left: '{{ $math.inlineLeftDelimiter }}', right: '{{ $math.inlineRightDelimiter }}', display: false },
+                    {{- end -}}
+                ]
+            });
+        });
+    </script>
+{{- end -}}
+
+{{- /* mermaid */ -}}
+{{- with $scratch.Get "mermaidArr" -}}
+    {{- with $CDN.mermaidJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/mermaid/mermaid.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    {{- slice "lib/mermaid/mermaid.scss" | $scratch.Add "linkLocal" -}}
+    <script>
+        window.mermaidArr = {{ jsonify . | safeJS }};
+    </script>
+{{- end -}}
+
+{{- /* ECharts */ -}}
+{{- with $scratch.Get "echartsArr" -}}
+    {{- with $CDN.echartsJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/echarts/echarts.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    {{- with $CDN.echartsMacaronsJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/echarts/macarons.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    <script>
+        window.echartsArr = {{ jsonify . | safeJS }};
+    </script>
+{{- end -}}
+
+{{- /* Music */ -}}
+{{- if $scratch.Get "music" -}}
+    {{- /* APlayer */ -}}
+    {{- with $CDN.aplayerCSS -}}
+        {{- slice . | $scratch.Add "linkCDN" -}}
+    {{- else -}}
+        {{- slice "lib/aplayer/APlayer.min.css" | $scratch.Add "linkLocal" -}}
+    {{- end -}}
+    {{- slice "lib/aplayer/dark.scss" | $scratch.Add "linkLocal" -}}
+    {{- with $CDN.aplayerJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/aplayer/APlayer.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+
+    {{- /* MetingJS */ -}}
+    {{- with $CDN.metingJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/meting/Meting.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+{{- end -}}
+
+{{- /* Dev feature */ -}}
+{{- if .Params.dev -}}
+{{- end -}}
+
+{{- with $scratch.Get "contentMap" -}}
+    <script>
+        window.contentMap = {{ jsonify . | safeJS }};
+    </script>
+{{- end -}}
+
+{{- /* Theme script */ -}}
+{{- slice "js/theme.min.js" | $scratch.Add "scriptLocal" -}}
+{{- $_ := (resources.Get "js/theme.min.js.map").RelPermalink -}}
+
+{{- range $scratch.Get "linkCDN" -}}
+    {{- safeHTML . -}}
+{{- end -}}
+{{- range $scratch.Get "linkLocal" -}}
+    {{- $res := resources.Get . -}}
+    {{- if strings.HasSuffix . ".scss" -}}
+        {{- $options := dict "outputStyle" "compressed" "enableSourceMap" true -}}
+        {{- $res = toCSS $options $res -}}
+    {{- else if not (strings.HasSuffix . ".min.css") -}}
+        {{- $res = minify $res -}}
+    {{- end -}}
+    {{- $res = $res | resources.Fingerprint "sha256" -}}
+    <link rel="stylesheet" href="{{ $res.RelPermalink }}" integrity="{{ $res.Data.Integrity }}">
+{{- end -}}
+
+{{- range $scratch.Get "scriptCDN" -}}
+    {{- safeHTML . -}}
+{{- end -}}
+{{- range $scratch.Get "scriptLocal" -}}
+    {{- $res := resources.Get . -}}
+    {{- if not (strings.HasSuffix . ".min.js") -}}
+        {{- $res = minify $res -}}
+    {{- end -}}
+    {{- $res = $res | resources.Fingerprint "sha256" -}}
+    <script src="{{ $res.RelPermalink }}" integrity="{{ $res.Data.Integrity }}"></script>
+{{- end -}}
+
+{{- /* Google analytics async */ -}}
+{{- if $scratch.Get "production" | and .Site.GoogleAnalytics -}}
+    {{- template "_internal/google_analytics_async.html" . -}}
+{{- end -}}
--- a/layouts/partials/comment.html
+++ b/layouts/partials/comment.html
@ -1,11 +1,13 @@
-{{- if .Scratch.Get "production" | and .IsPage | and (ne .Site.Params.comment.enable false) | and (ne .Params.comment false) -}}
-    {{- $CDN := .Scratch.Get "CDN" -}}
+{{- $scratch := .Scratch.Get "scratch" -}}
+
+{{- if $scratch.Get "production" | and (ne .Site.Params.comment.enable false) | and (ne .Params.comment false) -}}
+    {{- $CDN := $scratch.Get "CDN" -}}

    {{- /* Disqus Comment System */ -}}
    {{- with .Site.Params.comment.disqus.shortname -}}
        <div id="disqus_thread"></div>
        {{- $script := printf `<script src="https://%s.disqus.com/embed.js"></script>` . -}}
-        {{- slice $script | $.Scratch.Add "scriptCDN" -}}
+        {{- slice $script | $scratch.Add "scriptCDN" -}}
        <noscript>
            Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
@ -16,14 +18,14 @@
        {{- $gitalk := .Site.Params.comment.gitalk -}}
        <div id="gitalk"></div>
        {{- with $CDN.gitalkCSS -}}
-            {{- slice . | $.Scratch.Add "linkCDN" -}}
+            {{- slice . | $scratch.Add "linkCDN" -}}
        {{- else -}}
-            {{- slice "css/lib/gitalk/gitalk.css" | .Scratch.Add "linkLocal" -}}
+            {{- slice "lib/gitalk/gitalk.css" | $scratch.Add "linkLocal" -}}
        {{- end -}}
        {{- with $CDN.gitalkJS -}}
-            {{- slice . | $.Scratch.Add "scriptCDN" -}}
+            {{- slice . | $scratch.Add "scriptCDN" -}}
        {{- else -}}
-            {{- slice "css/lib/gitalk/gitalk.min.js" | .Scratch.Add "scriptLocal" -}}
+            {{- slice "lib/gitalk/gitalk.min.js" | $scratch.Add "scriptLocal" -}}
        {{- end -}}
        <script>
            document.addEventListener("DOMContentLoaded", function(event) {
@ -49,11 +51,11 @@
    {{- if .Site.Params.comment.valine.enable -}}
        {{- $valine := .Site.Params.comment.valine -}}
        <div id="valine"></div>
-        {{- slice "css/lib/valine/dark.scss" | .Scratch.Add "linkLocal" -}}
+        {{- slice "lib/valine/dark.scss" | $scratch.Add "linkLocal" -}}
        {{- with $CDN.valineJS -}}
-            {{- slice . | $.Scratch.Add "scriptCDN" -}}
+            {{- slice . | $scratch.Add "scriptCDN" -}}
        {{- else -}}
-            {{- slice "js/lib/valine/Valine.min.js" | .Scratch.Add "scriptLocal" -}}
+            {{- slice "lib/valine/Valine.min.js" | $scratch.Add "scriptLocal" -}}
        {{- end -}}
        <script>
            document.addEventListener("DOMContentLoaded", function(event) {
@ -106,7 +108,7 @@
        ></div>
        {{- $script := `<script src="https://connect.facebook.net/%s/sdk.js#xfbml=1&version=v5.0&appId=%s&autoLogAppEvents=1" crossorigin="anonymous"></script>` -}}
        {{- $script = printf $script $facebook.languageCode $facebook.appId -}}
-        {{- slice $script | .Scratch.Add "scriptCDN" -}}
+        {{- slice $script | $scratch.Add "scriptCDN" -}}
        <noscript>
            Please enable JavaScript to view the <a href="https://developers.facebook.com/docs/plugins/comments/">comments powered by Facebook.</a>
        </noscript>
--- a/layouts/partials/function/id.html
+++ b/layouts/partials/function/id.html
@ -0,0 +1,6 @@
+{{- /* ID */ -}}
+{{- /* Content -> unique ID */ -}}
+{{- /* shuffle md5 as id */ -}}
+{{- $id := delimit (split (md5 now.Unix) "" | shuffle | first 6) "" | printf "id-%s" -}}
+{{- .scratch.SetInMap "contentMap" $id .content -}}
+{{- return $id -}}
--- a/layouts/partials/head/link.html
+++ b/layouts/partials/head/link.html
@ -1,4 +1,5 @@
-{{- $CDN := .Scratch.Get "CDN" -}}
+{{- $scratch := .Scratch.Get "scratch" -}}
+{{- $CDN := $scratch.Get "CDN" -}}

 <link rel="canonical" href="{{ .Permalink }}" />
 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
@ -20,27 +21,27 @@
    <link rel="feed" href="{{ .RelPermalink }}" type="application/rss+xml" title="{{ $.Site.Title }}">
 {{- end -}}

+{{- /* Font Awesome */ -}}
+{{- with $CDN.fontawesomeFreeCSS -}}
+    {{- . | safeHTML -}}
+{{- else -}}
+    {{- $res := resources.Get "lib/fontawesome-free/all.min.css" | resources.Fingerprint "sha256" -}}
+    <link rel="stylesheet" href="{{ $res.RelPermalink }}" integrity="{{ $res.Data.Integrity }}">
+{{- end -}}
+
+{{- /* Animate.css */ -}}
+{{- with $CDN.animateCSS -}}
+    {{- . | safeHTML -}}
+{{- else -}}
+    {{ $res := resources.Get "lib/animate/animate.min.css" | resources.Fingerprint "sha256" -}}
+    <link rel="stylesheet" href="{{ $res.RelPermalink }}" integrity="{{ $res.Data.Integrity }}">
+{{- end -}}
+
 {{- /* style.min.css */ -}}
 {{- $res := resources.Get "css/style.template.scss" -}}
 {{- $options := dict "targetPath" "css/style.min.css" -}}
 {{- $options  = dict "includePaths" (slice "config/css") | merge $options -}}
 {{- $options  = dict "outputStyle" "compressed" | merge $options -}}
 {{- $options  = dict "enableSourceMap" true | merge $options -}}
-{{- $res = resources.ExecuteAsTemplate "style.scss" . $res | toCSS $options -}}
-<link rel="stylesheet" href="{{ $res.RelPermalink }}">
-
-{{- /* Font Awesome https://fontawesome.com/ */ -}}
-{{- with $CDN.fontawesomeFreeCSS -}}
-    {{- . | safeHTML -}}
-{{- else -}}
-    {{- $res := resources.Get "css/lib/fontawesome-free/all.min.css" -}}
-    <link rel="stylesheet" href="{{ $res.RelPermalink }}">
-{{- end -}}
-
-{{- /* Animate.css https://github.com/daneden/animate.css */ -}}
-{{- with $CDN.animateCSS -}}
-    {{- . | safeHTML -}}
-{{- else -}}
-    {{ $res := resources.Get "css/lib/animate/animate.min.css" -}}
-    <link rel="stylesheet" href="{{ $res.RelPermalink }}">
-{{- end -}}
+{{- $res = resources.ExecuteAsTemplate "style.scss" . $res | toCSS $options | resources.Fingerprint "sha256" -}}
+<link rel="stylesheet" href="{{ $res.RelPermalink }}" integrity="{{ $res.Data.Integrity }}">
--- a/layouts/partials/home/profile.html
+++ b/layouts/partials/home/profile.html
@ -1,3 +1,5 @@
+{{- $scratch := .Scratch.Get "scratch" -}}
+
 <div class="home-profile">
    {{- $avatar := .Site.Params.home.profile.avatarURL -}}
    {{- with .Site.Params.home.profile.gravatarEmail -}}
@ -6,7 +8,7 @@
    {{- with $avatar -}}
        <div class="home-avatar">
            <a href="/posts">
-                <img src={{ . | relURL }} alt="avatar" title="{{ T "home" }}">
+                {{- partial "plugin/image.html" (dict "src_s" . "title" "avatar" "description" (T "home") "scratch" $scratch) -}}
            </a>
        </div>
    {{- end -}}
@ -14,18 +16,11 @@
    {{- with .Site.Params.home.profile.subtitle -}}
        <h2 class="home-description">
            {{- if $.Site.Params.home.profile.typeit -}}
-                {{- $id := md5 . | printf "tp-%s" -}}
-                <div id={{ printf "r%s" $id }} hidden=true>
-                    {{- /* FIXME: https://github.com/gohugoio/hugo/issues/6882 */ -}}
-                    {{- /* . | $.RenderString | safeHTML */ -}}
-                    {{- . | markdownify | safeHTML -}}
-                </div>
-                <div id={{ $id }} class="typeit"></div>
-                {{- $.Scratch.SetInMap "typeitMap" $id (slice $id) -}}
+                {{- $id := partial "function/id.html" (dict "content" . "scratch" $scratch) -}}
+                <div id="{{ $id }}" class="typeit"></div>
+                {{- $scratch.SetInMap "typeitMap" $id (slice $id) -}}
            {{- else -}}
-                {{- /* FIXME: https://github.com/gohugoio/hugo/issues/6882 */ -}}
-                {{- /* . | $.RenderString | safeHTML */ -}}
-                {{- . | markdownify | safeHTML -}}
+                {{- . -}}
            {{- end -}}
        </h2>
    {{- end -}}
--- a/layouts/partials/paginator.html
+++ b/layouts/partials/paginator.html
@ -1,6 +1,6 @@
-{{- if gt $.Paginator.TotalPages 1 -}}
+{{- if gt .Paginator.TotalPages 1 -}}
    <ul class="pagination">
-        {{- $.Scratch.Set "paginator.ellipsed" false -}}
+        {{- .Scratch.Set "paginator.ellipsed" false -}}
        {{- range $.Paginator.Pagers -}}
            {{- $right := sub .TotalPages .PageNumber -}}
            {{- $showNumber := or (le .PageNumber 1) (eq $right 0) -}}
--- a/layouts/partials/plugin/icon.html
+++ b/layouts/partials/plugin/icon.html
@ -1,6 +1,5 @@
-{{- $type := index . "type" | default "fa" -}}
-{{- $classList := split (index . "class") " " -}}
-{{- $scratch := index . "scratch" -}}
+{{- $type := .type | default "fa" -}}
+{{- $classList := split .class " " -}}
 {{- /* Fork Awesome */ -}}
 {{- if eq $type "fo" -}}
    {{- $newClassList := slice -}}
@ -12,11 +11,11 @@
        {{- end -}}
    {{- end -}}
    {{- $classList = $newClassList -}}
-    {{- $scratch.Set "forkawesome" true -}}
+    {{- .scratch.Set "forkawesome" true -}}

 {{- /* default is Font Awesome */ -}}
 {{- /* Others */ -}}
 {{- else if ne $type "fa" -}}
-    {{- $scratch.Set "iconfont" true -}}
+    {{- .scratch.Set "iconfont" true -}}
 {{- end -}}
 <i class="{{ delimit $classList ` ` }}"></i>
--- a/layouts/partials/plugin/image.html
+++ b/layouts/partials/plugin/image.html
@ -1,3 +1,29 @@
-{{- /* Lazyload */ -}}
-{{- $res := resources.Get "svg/loading.svg" | minify -}}
-<img src="{{ $res.RelPermalink | safeURL }}" data-sizes="auto" data-src="{{ index . `src` | safeURL }}" alt="{{ index . `alt` }}" title="{{ index . `title` | default (index . `alt`) }}" class="lazyload">
+{{- /* lazysizes and lightgallery.js */ -}}
+{{- $small := .src_s | default .src -}}
+{{- $large := .src_l | default .src -}}
+{{- $loading := resources.Get "svg/loading.svg" | minify -}}
+{{- if not .src | and .src_s -}}
+    {{- $loading = resources.Get "svg/loading.small.svg" | minify -}}
+{{- end -}}
+{{- if .lightgallery -}}
+    <a class="lightgallery" href="{{ $large | safeURL }}" title="{{ .description }}" data-thumbnail="{{ $small | safeURL }}"{{ if .title }} data-sub-html="<h2>{{ .title }}</h2><p>{{ .description }}</p>"{{ end }}>
+        <img
+            class="lazyload"
+            src="{{ $loading.RelPermalink | safeURL }}"
+            data-sizes="auto"
+            data-srcset="{{ $small | safeURL }}, {{ .src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
+            data-src="{{ .src | safeURL }}"
+            alt="{{ .title | default .description }}" />
+    </a>
+    {{- .scratch.Set "lightgallery" true -}}
+{{- else -}}
+    <img
+        class="lazyload"
+        src="{{ $loading.RelPermalink | safeURL }}"
+        data-sizes="auto"
+        data-srcset="{{ $small | safeURL }}, {{ .src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
+        data-src="{{ .src | safeURL }}"
+        alt="{{ .title | default .description }}"
+        title="{{ .description }}" />
+{{- end -}}
+{{- .scratch.Set "lazysizes" true -}}
--- a/layouts/partials/plugin/link.html
+++ b/layouts/partials/plugin/link.html
@ -1,9 +1,8 @@
-{{- $href := index . "href" -}}
-<a href="{{ $href | safeURL }}"{{ with index . "title" }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix $href "http" }} target="_blank"{{ end }} rel="noopener noreffer{{ with index . `rel` }} {{ . }}{{ end }}">
-    {{- with index . "icon" -}}
+<a href="{{ .href | safeURL }}"{{ with .title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .href "http" }} target="_blank"{{ end }} rel="noopener noreffer{{ with .rel }} {{ . }}{{ end }}">
+    {{- with .icon -}}
        {{- partial "plugin/icon.html" . -}}
    {{- end -}}
-    {{- with index . "content" -}}
+    {{- with .content -}}
        {{- . | safeHTML -}}
    {{- end -}}
 </a>
--- a/layouts/partials/plugin/share.html
+++ b/layouts/partials/plugin/share.html
@ -1,5 +1,7 @@
-{{- if .Params.share.enable | default .Site.Params.share.enable | eq true -}}
-    {{- .Scratch.Set "share" true -}}
+{{- $scratch := .Scratch.Get "scratch" -}}
+
+{{- if ne .Site.Params.share.enable false | and (ne .Params.share false) -}}
+    {{- $scratch.Set "share" true -}}

    {{- /* 001: Twitter */ -}}
    {{- if .Params.Share.Twitter | default .Site.Params.Share.Twitter | eq true -}}
@ -95,7 +97,7 @@
    {{- /* 014: Instapaper */ -}}
    {{- if .Params.Share.Instapaper | default .Site.Params.Share.Instapaper | eq true -}}
        <a href="javascript:void(0);" title="{{ T `share` }} Instapaper" data-sharer="instapaper" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}">
-            {{- partial "plugin/icon.html" (dict "class" "loveit it-instapaper-fill" "type" "other" "scratch" .Scratch) -}}
+            {{- partial "plugin/icon.html" (dict "class" "loveit it-instapaper-fill" "type" "other" "scratch" $scratch) -}}
        </a>
    {{- end -}}

@ -144,7 +146,7 @@
    {{- /* 021: Myspace */ -}}
    {{- if .Params.Share.Myspace | default .Site.Params.Share.Myspace | eq true -}}
        <a href="javascript:void(0);" title="{{ T `share` }} Myspace" data-sharer="myspace" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}">
-            {{- partial "plugin/icon.html" (dict "class" "loveit it-myspace-fill" "type" "other" "scratch" .Scratch) -}}
+            {{- partial "plugin/icon.html" (dict "class" "loveit it-myspace-fill" "type" "other" "scratch" $scratch) -}}
        </a>
    {{- end -}}

@ -158,7 +160,7 @@
    {{- /* 023: 百度 */ -}}
    {{- if .Params.Share.Baidu | default .Site.Params.Share.Baidu | eq true -}}
        <a href="javascript:void(0);" title="{{ T `share` }} 百度" data-sharer="baidu" data-url="{{ .Permalink }}" data-title="{{ .Title }}">
-            {{- partial "plugin/icon.html" (dict "class" "loveit it-baidu-fill" "type" "other" "scratch" .Scratch) -}}
+            {{- partial "plugin/icon.html" (dict "class" "loveit it-baidu-fill" "type" "other" "scratch" $scratch) -}}
        </a>
    {{- end -}}

--- a/layouts/partials/plugin/social.html
+++ b/layouts/partials/plugin/social.html
@ -1,3 +1,5 @@
+{{- $scratch := .Scratch.Get "scratch" -}}
+
 {{- /* 001: Github */ -}}
 {{- with .Site.Params.Social.Github -}}
    {{- $options := dict "href" (printf "https://github.com/%s" .) "title" "GitHub" "rel" "me" -}}
@ -302,7 +304,7 @@
 {{- /* 044: 知乎 */ -}}
 {{- with .Site.Params.Social.Zhihu -}}
    {{- $options := dict "href" (printf "https://www.zhihu.com/people/%s" .) "title" "知乎" "rel" "me" -}}
-    {{- $options = dict "icon" (dict "class" "loveit it-zhihu-line" "type" "other" "scratch" $.Scratch) | merge $options -}}
+    {{- $options = dict "icon" (dict "class" "loveit it-zhihu-line" "type" "other" "scratch" $scratch) | merge $options -}}
    {{- partial "plugin/link.html" $options -}}
 {{- end -}}

@ -394,28 +396,28 @@
 {{- /* 055: Gitea */ -}}
 {{- with .Site.Params.Social.Gitea -}}
    {{- $options := dict "href" . "title" "Gitea" "rel" "me" -}}
-    {{- $options = dict "icon" (dict "class" "fa fa-gitea fa-fw" "type" "fo" "scratch" $.Scratch) | merge $options -}}
+    {{- $options = dict "icon" (dict "class" "fa fa-gitea fa-fw" "type" "fo" "scratch" $scratch) | merge $options -}}
    {{- partial "plugin/link.html" $options -}}
 {{- end -}}

 {{- /* 056: XMPP */ -}}
 {{- with .Site.Params.Social.XMPP -}}
    {{- $options := dict "href" (printf "xmpp:%s" .) "title" "XMPP" "rel" "me" -}}
-    {{- $options = dict "icon" (dict "class" "fa fa-xmpp fa-fw" "type" "fo" "scratch" $.Scratch) | merge $options -}}
+    {{- $options = dict "icon" (dict "class" "fa fa-xmpp fa-fw" "type" "fo" "scratch" $scratch) | merge $options -}}
    {{- partial "plugin/link.html" $options -}}
 {{- end -}}

 {{- /* 057: Matrix */ -}}
 {{- with .Site.Params.Social.Matrix -}}
    {{- $options := dict "href" (printf "https://matrix.to/#/%s" .) "title" "Matrix" "rel" "me" -}}
-    {{- $options = dict "icon" (dict "class" "fa fa-matrix-org fa-fw" "type" "fo" "scratch" $.Scratch) | merge $options -}}
+    {{- $options = dict "icon" (dict "class" "fa fa-matrix-org fa-fw" "type" "fo" "scratch" $scratch) | merge $options -}}
    {{- partial "plugin/link.html" $options -}}
 {{- end -}}

 {{- /* 058: bilibili */ -}}
 {{- with .Site.Params.Social.Bilibili -}}
    {{- $options := dict "href" (printf "https://space.bilibili.com/%s" .) "title" "bilibili" "rel" "me" -}}
-    {{- $options = dict "icon" (dict "class" "loveit it-bilibili-fill" "type" "other" "scratch" $.Scratch) | merge $options -}}
+    {{- $options = dict "icon" (dict "class" "loveit it-bilibili-fill" "type" "other" "scratch" $scratch) | merge $options -}}
    {{- partial "plugin/link.html" $options -}}
 {{- end -}}

--- a/Show more
+++ b/Show more