feat(code): add copy button for code (#239)

README.md

@@ -33,6 +33,7 @@ Compared to the original LeaveIt theme and the KeepIt theme, the LoveIt theme ha
 * Easy-to-use and self-expanding **table of contents**
 * More **social links**, **share sites** and **comment system**
 * **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
+* **Copy code** to clipboard with one click
 * Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * Extended Markdown syntax for **ruby annotation**
 * Extended Markdown syntax for **fraction**
@@ -92,6 +93,7 @@ I hope you will LoveIt ❤️!
 
 * **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
 * Automatically **highlighting** code
+* **Copy code** to clipboard with one click
 * **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * Extended Markdown syntax for **ruby annotation**
@@ -137,6 +139,7 @@ LoveIt is licensed under the MIT license. Check the [LICENSE file](https://githu
 
 Thanks to the authors of following resources included in the theme:
 
+* [normalize.css](https://github.com/necolas/normalize.css)
 * [Font Awesome](https://fontawesome.com/)
 * [Fork Awesome](https://forkaweso.me/Fork-Awesome/)
 * [Animate.css](https://daneden.github.io/animate.css/)
@@ -144,9 +147,10 @@ Thanks to the authors of following resources included in the theme:
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* [clipboard.js](https://github.com/zenorocha/clipboard.js)
+* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [TypeIt](https://typeitjs.com/)
 * [KaTeX](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)

README.zh-cn.md

@@ -32,6 +32,7 @@
 * 易用和自动展开的**文章目录**
 * 支持更多的**社交链接**、**网站分享**和**评论系统**
 * 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
+* 一键**复制代码**到剪贴板
 * 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
 * 支持**上标注释**的扩展 Markdown 语法
 * 支持**分数**的扩展 Markdown 语法
@@ -87,6 +88,7 @@
 
 * 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
 * 支持**代码高亮**
+* 一键**复制代码**到剪贴板
 * 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
 * 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
 * 支持**上标注释**的扩展 Markdown 语法
@@ -132,6 +134,7 @@ LoveIt 根据 MIT 许可协议授权。 更多信息请查看 [LICENSE 文件](h
 
 LoveIt 主题中用到了以下项目，感谢它们的作者：
 
+* [normalize.css](https://github.com/necolas/normalize.css)
 * [Font Awesome](https://fontawesome.com/)
 * [Fork Awesome](https://forkaweso.me/Fork-Awesome/)
 * [Animate.css](https://daneden.github.io/animate.css/)
@@ -139,9 +142,10 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* [clipboard.js](https://github.com/zenorocha/clipboard.js)
+* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [TypeIt](https://typeitjs.com/)
 * [KaTeX](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)

assets/css/_core/_base.scss

@@ -33,6 +33,7 @@ body {
   background-color: $global-background-color;
   color: $global-font-color;
   overflow-wrap: break-word;
+  scrollbar-color: auto;
 
   &.dark {
     color: $global-font-color-dark;

assets/css/_mixin/_compatibility.scss

@@ -41,8 +41,8 @@
   display: -webkit-box;
   display: box;
 
-  -moz-box-orient: $orient;
   -webkit-box-orient: $orient;
+  -moz-box-orient: $orient;
   box-orient: $orient;
 }
 
@@ -67,3 +67,21 @@
     color: $color;
   }
 }
+
+@mixin max-content($property) {
+  #{$property}: -webkit-max-content;
+  #{$property}: -moz-max-content;
+  #{$property}: intrinsic;
+  #{$property}: max-content;
+}
+
+@mixin tab-size($value) {
+  -moz-tab-size: $value;
+  -o-tab-size: $value;
+  tab-size: $value;
+}
+
+@mixin appearance($value) {
+  -moz-appearance: $value;
+  -webkit-appearance: $value;
+}

assets/css/_page/_single.scss

@@ -339,17 +339,10 @@
       }
     }
 
-    .version {
+    .version img {
-      img {
+      min-height: 1.2rem;
-        min-height: 1.2rem;
+      height: 1.2rem;
-        vertical-align: sub;
+      vertical-align: text-bottom;
-      }
-
-      &.small {
-        img {
-          min-height: 1rem;
-        }
-      }
     }
   }
 

assets/css/_partial/_single/_code.scss

@@ -1,12 +1,52 @@
 code {
   font-size: $code-font-size;
   font-family: $code-font-family;
-  padding: .2rem .4rem;
   color: $code-color;
 
+  img, .version img {
+    min-height: 1.1 * $code-font-size;
+    height: 1.1 * $code-font-size;
+  }
+
   .dark & {
     color: $code-color-dark;
   }
+
+  &:not(.block) {
+    padding: .2rem .4rem;
+  }
+}
+
+pre {
+  position: relative;
+  margin: 0;
+  padding: .25rem 0 .25rem .5rem;
+  @include tab-size(4);
+
+  .copy-button {
+    font-size: $code-font-size;
+    line-height: $code-font-size;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .3rem .5rem;
+    color: $code-info-color;
+    background: darken($code-background-color, 3%);
+
+    .dark & {
+      color: $code-info-color-dark;
+      background: darken($code-background-color-dark, 3%);
+    }
+  }
+
+  .copy-button:hover, .copy-button:focus {
+    cursor: pointer;
+    color: $global-link-hover-color;
+
+    .dark & {
+      color: $global-link-hover-color-dark;
+    }
+  }
 }
 
 code, pre, .highlight table, .highlight tr, .highlight td {
@@ -17,17 +57,26 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   }
 }
 
-.highlight > .chroma {
+.highlight > .chroma, .gist {
-  margin: .5rem 0;
+  table, tr, td {
-
-  code, pre {
     margin: 0;
     padding: 0;
+    border: none !important;
+    white-space: nowrap;
+  }
+}
+
+.highlight > .chroma {
+  position: relative;
+  margin: .5rem 0;
+
+  pre {
+    position: unset;
   }
 
   &::before {
     display: block;
-    padding: .2rem .4rem;
+    padding: .3rem .4rem;
     font-family: $global-font-family;
     font-weight: bold;
     color: $code-info-color;
@@ -46,20 +95,25 @@ code, pre, .highlight table, .highlight tr, .highlight td {
     }
   }
 
-  .ln {
+  .lntd:last-child {
-    padding-right: .8rem;
+    width: 100%;
+
+    pre {
+      padding-left: .75rem;
+      @include max-content(min-width);
+    }
   }
 
-  .lntd {
+  .ln {
-    &:last-child {
+    padding-right: .75rem;
-      .hl {
+  }
-        display: block;
-        background-color: darken($code-background-color, 5%);
 
-        .dark & {
+  .hl {
-          background-color: darken($code-background-color-dark, 5%);
+    display: block;
-        }
+    background-color: darken($code-background-color, 10%);
-      }
+
+    .dark & {
+      background-color: darken($code-background-color-dark, 5%);
     }
   }
 
@@ -96,18 +150,6 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   }
 }
 
-.highlight > .chroma, .gist {
-  table, tr, td {
-    margin: 0;
-    border: none !important;
-    white-space: nowrap;
-  }
-
-  td {
-    padding: .2rem .4rem;
-  }
-}
-
 .gist {
   .gist-file, .gist-data, .gist-meta {
     border: none;

assets/css/_variables.scss

@@ -82,7 +82,7 @@ $search-background-color-dark: #363636 !default;
 // ========== Single Content ========== //
 // Font size of the TOC
 $toc-title-font-size: 1.2rem !default;
-$toc-content-font-size: 0.9rem !default;
+$toc-content-font-size: 1rem !default;
 
 // Color of the single link
 $single-link-color: #2d96bd !default;
@@ -124,7 +124,7 @@ $code-info-color: #b1b0b0 !default;
 $code-info-color-dark: #b1b0b0 !default;
 
 // Font size of the code
-$code-font-size: 13px !default;
+$code-font-size: .875rem !default;
 
 // Font family of the code
 $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace !default;

assets/lib/VERSION

@@ -6,9 +6,10 @@ smooth-scroll@16.1.2 https://github.com/cferdinandi/smooth-scroll
 autocomplete.js@0.37.1 https://github.com/algolia/autocomplete.js
 lunr.js@2.3.8 https://lunrjs.com/
 algoliasearch@4.1.0 https://github.com/algolia/algoliasearch-client-javascript
-sharer@0.4.0 https://github.com/ellisonleao/sharer.js
 lazysizes@5.2.0 https://github.com/aFarkas/lazysizes
 lightgallery.js@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0 https://github.com/sachinchoolur/lightgallery.js
+clipboard.js@2.0.6 https://github.com/zenorocha/clipboard.js
+sharer@0.4.0 https://github.com/ellisonleao/sharer.js
 typeit@6.5.1 https://github.com/alexmacarthur/typeit
 katex@0.11.1 https://katex.org/
 mermaid@8.4.8 https://github.com/knsv/mermaid

assets/lib/polyfill.yml

@@ -10,3 +10,4 @@ theme:
   - Object.values
   - Promise
   - fetch
+  - Element.prototype.after

assets/svg/version.template.svg

@@ -0,0 +1,19 @@
+{{- /* https://img.shields.io/badge/$label-$version-$color?style=flat-square&labelColor=403c3d */ -}}
+{{- $labelLength := strings.RuneCount .label | mul 60 | add 120 -}}
+{{- $versionLength := strings.RuneCount .version | mul 60 -}}
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ add $labelLength $versionLength | add 200 | mul 0.1 }}" height="20">
+    <g shape-rendering="crispEdges">
+        {{- $x1 := add $labelLength 100 | mul 0.1 -}}
+        {{- $x2 := add $versionLength 100 | mul 0.1 -}}
+        <path fill="#403c3d" d="M0 0h{{ $x1 }}v20H0z"/>
+        <path fill="#{{ .color }}" d="M{{ $x1 }} 0h{{ $x2 }}v20H{{ $x1 }}z"/>
+    </g>
+    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
+        <text x="{{ div $labelLength 2 | add 60 }}" y="140" textLength="{{ $labelLength }}" transform="scale(.1)">
+            {{- .label -}}
+        </text>
+        <text x="{{ div $versionLength 2 | add $labelLength | add 140 }}" y="140" textLength="{{ $versionLength }}" transform="scale(.1)">
+            {{- .version -}}
+        </text>
+    </g>
+</svg>

exampleSite/config.toml

@@ -888,8 +888,6 @@ enableEmoji = true
     lunrJS = ''
     # algoliasearch@4.1.0 https://github.com/algolia/algoliasearch-client-javascript
     algoliasearchJS = ''
-    # sharer@0.4.0 https://github.com/ellisonleao/sharer.js
-    sharerJS = ''
     # lazysizes@5.2.0 https://github.com/aFarkas/lazysizes
     lazysizesJS = ''
     # lightgallery.js@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0 https://github.com/sachinchoolur/lightgallery.js
@@ -897,6 +895,10 @@ enableEmoji = true
     lightgalleryJS = ''
     lightgalleryThumbnailJS = ''
     lightgalleryZoomJS = ''
+    # clipboard.js@2.0.6 https://github.com/zenorocha/clipboard.js
+    clipboardJS = ''
+    # sharer@0.4.0 https://github.com/ellisonleao/sharer.js
+    sharerJS = ''
     # typeit@6.5.1 https://github.com/alexmacarthur/typeit
     typeitJS = ''
     # katex@0.11.1 https://katex.org/
@@ -934,7 +936,7 @@ enableEmoji = true
     codeFences = true
     guessSyntax = true
     lineNos = true
-    lineNumbersInTable = false
+    lineNumbersInTable = true
     # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
     # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
     noClasses = false

exampleSite/content/about.en.md

@@ -56,6 +56,7 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 
 * :(fas fa-search): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
 * :(fas fa-code): Automatically **highlighting** code
+* :(far fa-copy): **Copy code** to clipboard with one click
 * :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * :(fab fa-font-awesome): Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * :(far fa-sticky-note): Extended Markdown syntax for **ruby annotation**
@@ -80,6 +81,7 @@ Check the [LICENSE file](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 
 Thanks to the authors of following resources included in the theme:
 
+* [normalize.css](https://github.com/necolas/normalize.css)
 * [Font Awesome](https://fontawesome.com/)
 * [Fork Awesome](https://forkaweso.me/Fork-Awesome/)
 * [Animate.css](https://daneden.github.io/animate.css/)
@@ -87,9 +89,10 @@ Thanks to the authors of following resources included in the theme:
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* [clipboard.js](https://github.com/zenorocha/clipboard.js)
+* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [TypeIt](https://typeitjs.com/)
 * [$ \KaTeX $](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)

exampleSite/content/about.fr.md

@@ -61,6 +61,7 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 
 * :(fas fa-search): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
 * :(fas fa-code): Automatically **highlighting** code
+* :(far fa-copy): **Copy code** to clipboard with one click
 * :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * :(fab fa-font-awesome): Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * :(far fa-sticky-note): Extended Markdown syntax for **ruby annotation**
@@ -85,6 +86,7 @@ Check the [LICENSE file](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 
 Thanks to the authors of following resources included in the theme:
 
+* [normalize.css](https://github.com/necolas/normalize.css)
 * [Font Awesome](https://fontawesome.com/)
 * [Fork Awesome](https://forkaweso.me/Fork-Awesome/)
 * [Animate.css](https://daneden.github.io/animate.css/)
@@ -92,9 +94,10 @@ Thanks to the authors of following resources included in the theme:
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* [clipboard.js](https://github.com/zenorocha/clipboard.js)
+* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [TypeIt](https://typeitjs.com/)
 * [$ \KaTeX $](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)

exampleSite/content/about.zh-cn.md

@@ -56,6 +56,7 @@ lightgallery: true
 
 * :(fas fa-search): 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
 * :(fas fa-code): 支持**代码高亮**
+* :(far fa-copy): 一键**复制代码**到剪贴板
 * :(far fa-images): 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
 * :(fab fa-font-awesome): 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
 * :(far fa-sticky-note): 支持**上标注释**的扩展 Markdown 语法
@@ -80,6 +81,7 @@ LoveIt 根据 MIT 许可协议授权。
 
 LoveIt 主题中用到了以下项目，感谢它们的作者：
 
+* [normalize.css](https://github.com/necolas/normalize.css)
 * [Font Awesome](https://fontawesome.com/)
 * [Fork Awesome](https://forkaweso.me/Fork-Awesome/)
 * [Animate.css](https://daneden.github.io/animate.css/)
@@ -87,9 +89,10 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* [clipboard.js](https://github.com/zenorocha/clipboard.js)
+* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [TypeIt](https://typeitjs.com/)
 * [$ \KaTeX $](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)

exampleSite/content/posts/theme-documentation-basics.en.md

@@ -201,10 +201,10 @@ Note that some of these parameters are explained in details in other sections of
   defaultTheme = "auto"
   # public git repo url only then enableGitInfo is true
   gitRepo = ""
-  # {{< version 0.1.1 new small >}} which hash function used for SRI, when empty, no SRI is used
+  # {{< version 0.1.1 >}} which hash function used for SRI, when empty, no SRI is used
   # ("sha256", "sha384", "sha512", "md5")
   fingerprint = ""
-  # {{< version 0.2.0 new small >}} Search
+  # {{< version 0.2.0 >}} Search
   [params.search]
     enable = true
     # type of search engine ("lunr", "algolia")
@@ -244,7 +244,7 @@ Note that some of these parameters are explained in details in other sections of
       typeit = true
       # whether to show social links
       social = true
-      # {{< version 0.2.0 new small >}} disclaimer (HTML format is supported)
+      # {{< version 0.2.0 >}} disclaimer (HTML format is supported)
       disclaimer = ""
     # Home Page Posts
     [params.home.posts]
@@ -339,7 +339,7 @@ Note that some of these parameters are explained in details in other sections of
     copyTex = true
     # KaTeX extension mhchem
     mhchem = true
-  # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
+  # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
   [params.mapbox]
     # access token of Mapbox GL JS
     accessToken = ""
@@ -390,13 +390,13 @@ Note that some of these parameters are explained in details in other sections of
     enable = true
     # {{< link "https://disqus.com/" Disqus >}} Comment Config
     [params.comment.disqus]
-      # {{< version 0.1.1 new small >}}
+      # {{< version 0.1.1 >}}
       enable = false
       # Disqus shortname to use Disqus in posts
       shortname = ""
     # {{< link "https://github.com/gitalk/gitalk" Gitalk >}} Comment Config
     [params.comment.gitalk]
-      # {{< version 0.1.1 new small >}}
+      # {{< version 0.1.1 >}}
       enable = false
       owner = ""
       repo = ""
@@ -423,7 +423,7 @@ Note that some of these parameters are explained in details in other sections of
       numPosts = 10
       appId = ""
       languageCode = "en_US"
-    # {{< version 0.2.0 new small >}} {{< link "https://comments.app/" "Telegram Comments" >}} Config
+    # {{< version 0.2.0 >}} {{< link "https://comments.app/" "Telegram Comments" >}} Config
     [params.comment.telegram]
       enable = false
       siteID = ""
@@ -460,7 +460,7 @@ Note that some of these parameters are explained in details in other sections of
     height = 600
   # CSS and JS Files CDN
   [params.cdn]
-    # {{< version 0.2.0 new small >}} {{< link "https://github.com/necolas/normalize.css" "normalize.css" >}}@8.0.1
+    # {{< version 0.2.0 >}} {{< link "https://github.com/necolas/normalize.css" "normalize.css" >}}@8.0.1
     normalizeCSS = ''
     # {{< link "https://fontawesome.com/" "fontawesome-free" >}}@5.12.1
     fontawesomeFreeCSS = ''
@@ -468,14 +468,12 @@ Note that some of these parameters are explained in details in other sections of
     animateCSS = ''
     # {{< link "https://github.com/cferdinandi/smooth-scroll" "smooth-scroll" >}}@16.1.2
     smoothScrollJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://github.com/algolia/autocomplete.js" "autocomplete.js" >}}@0.37.1
+    # {{< version 0.2.0 >}} {{< link "https://github.com/algolia/autocomplete.js" "autocomplete.js" >}}@0.37.1
     autocompleteJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://lunrjs.com/" "lunr.js" >}}@2.3.8
+    # {{< version 0.2.0 >}} {{< link "https://lunrjs.com/" "lunr.js" >}}@2.3.8
     lunrJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://github.com/algolia/algoliasearch-client-javascript" "algoliasearch" >}}@4.1.0
+    # {{< version 0.2.0 >}} {{< link "https://github.com/algolia/algoliasearch-client-javascript" "algoliasearch" >}}@4.1.0
     algoliasearchJS = ''
-    # {{< link "https://github.com/ellisonleao/sharer.js" "sharer" >}}@0.4.0
-    sharerJS = ''
     # {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
     lazysizesJS = ''
     # {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0
@@ -483,6 +481,10 @@ Note that some of these parameters are explained in details in other sections of
     lightgalleryJS = ''
     lightgalleryThumbnailJS = ''
     lightgalleryZoomJS = ''
+    # {{< version 0.2.0 >}} {{< link "https://github.com/zenorocha/clipboard.js" "clipboard.js" >}}@2.0.6
+    clipboardJS = ''
+    # {{< link "https://github.com/ellisonleao/sharer.js" "sharer" >}}@0.4.0
+    sharerJS = ''
     # {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@6.5.1
     typeitJS = ''
     # {{< link "https://github.com/KaTeX/KaTeX" "katex" >}}@0.11.1
@@ -497,7 +499,7 @@ Note that some of these parameters are explained in details in other sections of
     # {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
     echartsJS = ''
     echartsMacaronsJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
+    # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
     mapboxGLCSS = ''
     mapboxGLJS = ''
     # {{< link "https://github.com/MoePlayer/APlayer" "aplayer" >}}@1.10.1
@@ -518,7 +520,7 @@ Note that some of these parameters are explained in details in other sections of
     codeFences = true
     guessSyntax = true
     lineNos = true
-    lineNumbersInTable = false
+    lineNumbersInTable = true
     # false is a necessary configuration
     # ({{< link "https://github.com/dillonzq/LoveIt/issues/158" >}})
     noClasses = false
@@ -577,7 +579,7 @@ Note that some of these parameters are explained in details in other sections of
 
 # Options to make hugo output files
 [outputs]
-  # {{< version 0.2.0 changed small >}}
+  # {{< version 0.2.0 changed >}}
   home = ["HTML", "RSS", "JSON"]
   page = ["HTML", "MarkDown"]
   section = ["HTML", "RSS"]

exampleSite/content/posts/theme-documentation-basics.fr.md

@@ -206,10 +206,10 @@ Note that some of these parameters are explained in details in other sections of
   defaultTheme = "auto"
   # public git repo url only then enableGitInfo is true
   gitRepo = ""
-  # {{< version 0.1.1 new small >}} which hash function used for SRI, when empty, no SRI is used
+  # {{< version 0.1.1 >}} which hash function used for SRI, when empty, no SRI is used
   # ("sha256", "sha384", "sha512", "md5")
   fingerprint = ""
-  # {{< version 0.2.0 new small >}} Search
+  # {{< version 0.2.0 >}} Search
   [params.search]
     enable = true
     # type of search engine ("lunr", "algolia")
@@ -249,7 +249,7 @@ Note that some of these parameters are explained in details in other sections of
       typeit = true
       # whether to show social links
       social = true
-      # {{< version 0.2.0 new small >}} disclaimer (HTML format is supported)
+      # {{< version 0.2.0 >}} disclaimer (HTML format is supported)
       disclaimer = ""
     # Home Page Posts
     [params.home.posts]
@@ -344,7 +344,7 @@ Note that some of these parameters are explained in details in other sections of
     copyTex = true
     # KaTeX extension mhchem
     mhchem = true
-  # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
+  # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
   [params.mapbox]
     # access token of Mapbox GL JS
     accessToken = ""
@@ -395,13 +395,13 @@ Note that some of these parameters are explained in details in other sections of
     enable = true
     # {{< link "https://disqus.com/" Disqus >}} Comment Config
     [params.comment.disqus]
-      # {{< version 0.1.1 new small >}}
+      # {{< version 0.1.1 >}}
       enable = false
       # Disqus shortname to use Disqus in posts
       shortname = ""
     # {{< link "https://github.com/gitalk/gitalk" Gitalk >}} Comment Config
     [params.comment.gitalk]
-      # {{< version 0.1.1 new small >}}
+      # {{< version 0.1.1 >}}
       enable = false
       owner = ""
       repo = ""
@@ -428,7 +428,7 @@ Note that some of these parameters are explained in details in other sections of
       numPosts = 10
       appId = ""
       languageCode = "en_US"
-    # {{< version 0.2.0 new small >}} {{< link "https://comments.app/" "Telegram Comments" >}} Config
+    # {{< version 0.2.0 >}} {{< link "https://comments.app/" "Telegram Comments" >}} Config
     [params.comment.telegram]
       enable = false
       siteID = ""
@@ -465,7 +465,7 @@ Note that some of these parameters are explained in details in other sections of
     height = 600
   # CSS and JS Files CDN
   [params.cdn]
-    # {{< version 0.2.0 new small >}} {{< link "https://github.com/necolas/normalize.css" "normalize.css" >}}@8.0.1
+    # {{< version 0.2.0 >}} {{< link "https://github.com/necolas/normalize.css" "normalize.css" >}}@8.0.1
     normalizeCSS = ''
     # {{< link "https://fontawesome.com/" "fontawesome-free" >}}@5.12.1
     fontawesomeFreeCSS = ''
@@ -473,14 +473,12 @@ Note that some of these parameters are explained in details in other sections of
     animateCSS = ''
     # {{< link "https://github.com/cferdinandi/smooth-scroll" "smooth-scroll" >}}@16.1.2
     smoothScrollJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://github.com/algolia/autocomplete.js" "autocomplete.js" >}}@0.37.1
+    # {{< version 0.2.0 >}} {{< link "https://github.com/algolia/autocomplete.js" "autocomplete.js" >}}@0.37.1
     autocompleteJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://lunrjs.com/" "lunr.js" >}}@2.3.8
+    # {{< version 0.2.0 >}} {{< link "https://lunrjs.com/" "lunr.js" >}}@2.3.8
     lunrJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://github.com/algolia/algoliasearch-client-javascript" "algoliasearch" >}}@4.1.0
+    # {{< version 0.2.0 >}} {{< link "https://github.com/algolia/algoliasearch-client-javascript" "algoliasearch" >}}@4.1.0
     algoliasearchJS = ''
-    # {{< link "https://github.com/ellisonleao/sharer.js" "sharer" >}}@0.4.0
-    sharerJS = ''
     # {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
     lazysizesJS = ''
     # {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0
@@ -488,6 +486,10 @@ Note that some of these parameters are explained in details in other sections of
     lightgalleryJS = ''
     lightgalleryThumbnailJS = ''
     lightgalleryZoomJS = ''
+    # {{< version 0.2.0 >}} {{< link "https://github.com/zenorocha/clipboard.js" "clipboard.js" >}}@2.0.6
+    clipboardJS = ''
+    # {{< link "https://github.com/ellisonleao/sharer.js" "sharer" >}}@0.4.0
+    sharerJS = ''
     # {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@6.5.1
     typeitJS = ''
     # {{< link "https://github.com/KaTeX/KaTeX" "katex" >}}@0.11.1
@@ -502,7 +504,7 @@ Note that some of these parameters are explained in details in other sections of
     # {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
     echartsJS = ''
     echartsMacaronsJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
+    # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
     mapboxGLCSS = ''
     mapboxGLJS = ''
     # {{< link "https://github.com/MoePlayer/APlayer" "aplayer" >}}@1.10.1
@@ -523,7 +525,7 @@ Note that some of these parameters are explained in details in other sections of
     codeFences = true
     guessSyntax = true
     lineNos = true
-    lineNumbersInTable = false
+    lineNumbersInTable = true
     # false is a necessary configuration
     # ({{< link "https://github.com/dillonzq/LoveIt/issues/158" >}})
     noClasses = false
@@ -582,7 +584,7 @@ Note that some of these parameters are explained in details in other sections of
 
 # Options to make hugo output files
 [outputs]
-  # {{< version 0.2.0 changed small >}}
+  # {{< version 0.2.0 changed >}}
   home = ["HTML", "RSS", "JSON"]
   page = ["HTML", "MarkDown"]
   section = ["HTML", "RSS"]

exampleSite/content/posts/theme-documentation-basics.zh-cn.md

@@ -142,7 +142,7 @@ theme = "LoveIt"
 以下是创建第一篇文章的方法:
 
 ```bash
-  hugo new posts/first_post.md
+hugo new posts/first_post.md
 ```
 
 通过添加一些示例内容并替换文件开头的标题, 你可以随意编辑文章.
@@ -204,10 +204,10 @@ hugo
   defaultTheme = "auto"
   # 公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效
   gitRepo = ""
-  # {{< version 0.1.1 new small >}} 哪种哈希函数用来 SRI, 为空时表示不使用 SRI
+  # {{< version 0.1.1 >}} 哪种哈希函数用来 SRI, 为空时表示不使用 SRI
   # ("sha256", "sha384", "sha512", "md5")
   fingerprint = ""
-  # {{< version 0.2.0 new small >}} 搜索
+  # {{< version 0.2.0 >}} 搜索
   [params.search]
     enable = true
     # 搜索引擎的类型 ("lunr", "algolia")
@@ -247,7 +247,7 @@ hugo
       typeit = true
       # 是否显示社交账号
       social = true
-      # {{< version 0.2.0 new small >}} 免责声明 (支持 HTML 格式)
+      # {{< version 0.2.0 >}} 免责声明 (支持 HTML 格式)
       disclaimer = ""
     # 主页文章列表
     [params.home.posts]
@@ -341,7 +341,7 @@ hugo
     copyTex = true
     # KaTeX 插件 mhchem
     mhchem = true
-  # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} 配置
+  # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} 配置
   [params.mapbox]
     # Mapbox GL JS 的 access token
     accessToken = ""
@@ -392,13 +392,13 @@ hugo
     enable = true
     # {{< link "https://disqus.com/" Disqus >}} 评论系统设置
     [params.comment.disqus]
-      # {{< version 0.1.1 new small >}}
+      # {{< version 0.1.1 >}}
       enable = false
       # Disqus 的 shortname，用来在文章中启用 Disqus 评论系统
       shortname = ""
     # {{< link "https://github.com/gitalk/gitalk" Gitalk >}} 评论系统设置
     [params.comment.gitalk]
-      # {{< version 0.1.1 new small >}}
+      # {{< version 0.1.1 >}}
       enable = false
       owner = ""
       repo = ""
@@ -425,7 +425,7 @@ hugo
       numPosts = 10
       appId = ""
       languageCode = "zh_CN"
-    # {{< version 0.2.0 new small >}} {{< link "https://comments.app/" "Telegram Comments" >}} 评论系统设置
+    # {{< version 0.2.0 >}} {{< link "https://comments.app/" "Telegram Comments" >}} 评论系统设置
     [params.comment.telegram]
       enable = false
       siteID = ""
@@ -462,7 +462,7 @@ hugo
     height = 600
   # CSS 和 JS 文件的 CDN 设置
   [params.cdn]
-    # {{< version 0.2.0 new small >}} {{< link "https://github.com/necolas/normalize.css" "normalize.css" >}}@8.0.1
+    # {{< version 0.2.0 >}} {{< link "https://github.com/necolas/normalize.css" "normalize.css" >}}@8.0.1
     normalizeCSS = ''
     # {{< link "https://fontawesome.com/" "fontawesome-free" >}}@5.12.1
     fontawesomeFreeCSS = ''
@@ -470,14 +470,12 @@ hugo
     animateCSS = ''
     # {{< link "https://github.com/cferdinandi/smooth-scroll" "smooth-scroll" >}}@16.1.2
     smoothScrollJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://github.com/algolia/autocomplete.js" "autocomplete.js" >}}@0.37.1
+    # {{< version 0.2.0 >}} {{< link "https://github.com/algolia/autocomplete.js" "autocomplete.js" >}}@0.37.1
     autocompleteJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://lunrjs.com/" "lunr.js" >}}@2.3.8
+    # {{< version 0.2.0 >}} {{< link "https://lunrjs.com/" "lunr.js" >}}@2.3.8
     lunrJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://github.com/algolia/algoliasearch-client-javascript" "algoliasearch" >}}@4.1.0
+    # {{< version 0.2.0 >}} {{< link "https://github.com/algolia/algoliasearch-client-javascript" "algoliasearch" >}}@4.1.0
     algoliasearchJS = ''
-    # {{< link "https://github.com/ellisonleao/sharer.js" "sharer" >}}@0.4.0
-    sharerJS = ''
     # {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
     lazysizesJS = ''
     # {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0
@@ -485,6 +483,10 @@ hugo
     lightgalleryJS = ''
     lightgalleryThumbnailJS = ''
     lightgalleryZoomJS = ''
+    # {{< version 0.2.0 >}} {{< link "https://github.com/zenorocha/clipboard.js" "clipboard.js" >}}@2.0.6
+    clipboardJS = ''
+    # {{< link "https://github.com/ellisonleao/sharer.js" "sharer" >}}@0.4.0
+    sharerJS = ''
     # {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@6.5.1
     typeitJS = ''
     # {{< link "https://github.com/KaTeX/KaTeX" "katex" >}}@0.11.1
@@ -499,7 +501,7 @@ hugo
     # {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
     echartsJS = ''
     echartsMacaronsJS = ''
-    # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
+    # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
     mapboxGLCSS = ''
     mapboxGLJS = ''
     # {{< link "https://github.com/MoePlayer/APlayer" "aplayer" >}}@1.10.1
@@ -520,7 +522,7 @@ hugo
     codeFences = true
     guessSyntax = true
     lineNos = true
-    lineNumbersInTable = false
+    lineNumbersInTable = true
     # false 是必要的设置
     # ({{< link "https://github.com/dillonzq/LoveIt/issues/158" >}})
     noClasses = false
@@ -579,7 +581,7 @@ hugo
 
 # 用于 Hugo 输出文档的设置
 [outputs]
-  # {{< version 0.2.0 changed small >}}
+  # {{< version 0.2.0 changed >}}
   home = ["HTML", "RSS", "JSON"]
   page = ["HTML", "MarkDown"]
   section = ["HTML", "RSS"]

i18n/en.toml

@@ -40,6 +40,19 @@ other = "More"
 [selectLanguage]
 other = "Select Language"
 
+[switchTheme]
+other = "Switch Theme"
+# === partials/header.html ===
+
+# === partials/footer.html ===
+[poweredBySome]
+other = "Powered by %s"
+
+[theme]
+other = "Theme"
+# === partials/footer.html ===
+
+# === partials/assets.html ===
 [search]
 other = "Search"
 
@@ -55,17 +68,9 @@ other = "Cancel"
 [noResultsFound]
 other = "No results found"
 
-[switchTheme]
+[copyToClipboard]
-other = "Switch Theme"
+other = "Copy to clipboard"
-# === partials/header.html ===
+# === partials/assets.html ===
-
-# === partials/footer.html ===
-[poweredBySome]
-other = "Powered by %s"
-
-[theme]
-other = "Theme"
-# === partials/footer.html ===
 
 # === partials/plugin/share.html ===
 [shareOn]

i18n/fr.toml

@@ -40,6 +40,19 @@ other = "Plus"
 [selectLanguage]
 other = "Choisir la langue"
 
+[switchTheme]
+other = "Changer de Thème"
+# === partials/header.html ===
+
+# === partials/footer.html ===
+[poweredBySome]
+other = "Propulsé par %s"
+
+[theme]
+other = "Thème"
+# === partials/footer.html ===
+
+# === partials/assets.html ===
 [search]
 other = "Chercher"
 
@@ -55,24 +68,14 @@ other = "Annuler"
 [noResultsFound]
 other = "Aucun résultat trouvé"
 
-[switchTheme]
-other = "Changer de Thème"
-# === partials/header.html ===
-
-# === partials/footer.html ===
-[poweredBySome]
-other = "Propulsé par %s"
-
-[theme]
-other = "Thème"
-# === partials/footer.html ===
-
-# === partials/assets.html ===
 [lunrLanguageLib]
 other = "lib/lunr/lunr.fr.js"
 
 [lunrLanguageCode]
 other = "fr"
+
+[copyToClipboard]
+other = "Copier dans le presse-papiers"
 # === partials/assets.html ===
 
 # === partials/plugin/share.html ===

i18n/pl.toml

@@ -40,6 +40,19 @@ other = "Więcej"
 [selectLanguage]
 other = "Wybierz język"
 
+[switchTheme]
+other = "Przełącz schemat"
+# === partials/header.html ===
+
+# === partials/footer.html ===
+[poweredBySome]
+other = "Napędzany przez %s"
+
+[theme]
+other = "Szablon"
+# === partials/footer.html ===
+
+# === partials/assets.html ===
 [search]
 other = "Szukaj"
 
@@ -55,24 +68,14 @@ other = "Anuluj"
 [noResultsFound]
 other = "Nie znaleziono wyników"
 
-[switchTheme]
-other = "Przełącz schemat"
-# === partials/header.html ===
-
-# === partials/footer.html ===
-[poweredBySome]
-other = "Napędzany przez %s"
-
-[theme]
-other = "Szablon"
-# === partials/footer.html ===
-
-# === partials/assets.html ===
 [lunrLanguageLib]
 other = "lib/lunr/lunr.pl.js"
 
 [lunrLanguageCode]
 other = "pl"
+
+[copyToClipboard]
+other = "Skopiuj do schowka"
 # === partials/assets.html ===
 
 # === partials/plugin/share.html ===

i18n/zh-CN.toml

@@ -40,6 +40,19 @@ other = "更多"
 [selectLanguage]
 other = "选择语言"
 
+[switchTheme]
+other = "切换主题"
+# === partials/header.html ===
+
+# === partials/footer.html ===
+[poweredBySome]
+other = "由 %s 强力驱动"
+
+[theme]
+other = "主题"
+# === partials/footer.html ===
+
+# === partials/assets.html ===
 [search]
 other = "搜索"
 
@@ -55,24 +68,14 @@ other = "取消"
 [noResultsFound]
 other = "没有找到结果"
 
-[switchTheme]
-other = "切换主题"
-# === partials/header.html ===
-
-# === partials/footer.html ===
-[poweredBySome]
-other = "由 %s 强力驱动"
-
-[theme]
-other = "主题"
-# === partials/footer.html ===
-
-# === partials/assets.html ===
 [lunrLanguageLib]
 other = "lib/lunr/lunr.zh.js"
 
 [lunrLanguageCode]
 other = "zh"
+
+[copyToClipboard]
+other = "复制到剪贴板"
 # === partials/assets.html ===
 
 # === partials/plugin/share.html ===

layouts/_default/baseof.html

@@ -49,7 +49,7 @@
             {{- partial "footer.html" . -}}
         </div>
 
-        <div id="fixed-buttons" class="animated faster">
+        <div id="fixed-buttons">
             {{- /* top button */ -}}
             <a href="#" id="back-to-top" class="fixed-button" title="{{ T `backToTop` }}">
                 <i class="fas fa-arrow-up fa-fw"></i>

layouts/partials/assets.html

@@ -100,6 +100,14 @@
     {{- $config = dict "lightGallery" $lightGalleryConfig | merge $config -}}
 {{- end -}}
 
+{{- /* clipboard.js */ -}}
+{{- with $CDN.clipboardJS -}}
+    {{- dict "source" . "crossorigin" true | slice | $scratch.Add "script" -}}
+{{- else -}}
+    {{- dict "source" "lib/clipboard/clipboard.min.js" "fingerprint" $fingerprint | slice | $scratch.Add "script" -}}
+{{- end -}}
+{{- $config = T "copyToClipboard" | dict "title" | dict "clipboard" | merge $config -}}
+
 {{- /* Sharer.js */ -}}
 {{- if $scratch.Get "share" -}}
     {{- with $CDN.sharerJS -}}
@@ -256,7 +264,7 @@
 </script>
 
 {{- /* Polyfill.io */ -}}
-{{- partial "plugin/script.html" (dict "source" "https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.closest%2CrequestAnimationFrame%2CCustomEvent%2CPromise%2CObject.entries%2CObject.assign%2CObject.values%2Cfetch") -}}
+{{- partial "plugin/script.html" (dict "source" "https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.closest%2CrequestAnimationFrame%2CCustomEvent%2CPromise%2CObject.entries%2CObject.assign%2CObject.values%2Cfetch%2CElement.prototype.after") -}}
 
 {{- range $scratch.Get "script" -}}
     {{- partial "plugin/script.html" . -}}

layouts/partials/plugin/image.html

@@ -1,5 +1,5 @@
 {{- /* lazysizes and lightgallery.js */ -}}
-{{- $loading := resources.Get "svg/loading.svg" | minify -}}
+{{- $loading := resources.Get "svg/loading/normal.svg" | minify -}}
 {{- $small := .src_s | default .src -}}
 {{- $large := .src_l | default .src -}}
 {{- $alt := .alt | default .src -}}
@@ -15,7 +15,7 @@
     </a>
 {{- else -}}
     {{- if not .large -}}
-        {{- $loading = resources.Get "svg/loading.small.svg" | minify -}}
+        {{- $loading = resources.Get "svg/loading/small.svg" | minify -}}
     {{- end -}}
     <img
         class="lazyload"

layouts/shortcodes/bilibili.html

@@ -1,7 +1,7 @@
 <div class="bilibili">
     {{- if .IsNamedParams -}}
-        <iframe src="https://player.bilibili.com/player.html?bvid={{ .Get `id` }}&page={{ .Get `p` | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+        <iframe src="//player.bilibili.com/player.html?bvid={{ .Get `id` }}&page={{ .Get `p` | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
     {{- else -}}
-        <iframe src="https://player.bilibili.com/player.html?bvid={{ .Get 0 }}&page={{ .Get 1 | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+        <iframe src="//player.bilibili.com/player.html?bvid={{ .Get 0 }}&page={{ .Get 1 | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
     {{- end -}}
 </div>

layouts/shortcodes/version.html

@@ -1,7 +1,10 @@
 {{- $version := .Get 0 -}}
 {{- $url := printf "https://github.com/dillonzq/LoveIt/releases/tag/v%s" $version -}}
-{{- $label := .Get 1 | default "new" | T -}}
+{{- $type := .Get 1 | default "new" | lower -}}
-{{- $color := cond (.Get 1 | eq "changed") "ff9101" "00b1ff" | cond (.Get 1 | eq "deleted") "ff5252" -}}
+{{- $label := T $type -}}
-{{- $badge := printf "https://img.shields.io/badge/%s-%s-%s?style=flat-square&labelColor=403c3d&?cacheSeconds=maxAge" $label $version $color -}}
+{{- $color := cond (eq $type "changed") "ff9101" "00b1ff" | cond (eq $type "deleted") "ff5252" -}}
+{{- $path := printf "svg/version/%s-%s.svg" $version $label -}}
+{{- $res := resources.Get "svg/version.template.svg" -}}
+{{- $res = $res | resources.ExecuteAsTemplate $path (dict "version" $version "label" $label "color" $color) | minify -}}
 {{- $alt := printf "LoveIt %s | %s" $label $version -}}
-<span class="version{{ if .Get 2 | eq `small` }} small{{ end }}"><a href="{{ $url }}" rel="noopener noreffer" target="_blank">{{ partial "plugin/image.html" (dict "src" $badge "alt" $alt) }}</a></span>
+<span class="version"><a href="{{ $url }}" rel="noopener noreffer" target="_blank">{{ partial "plugin/image.html" (dict "src" $res.RelPermalink "alt" $alt) }}</a></span>

src/js/theme.js

@@ -1,9 +1,7 @@
 class Util {
     forEach(elements, handler) {
         elements = elements || [];
-        for (let i = 0; i < elements.length; i++) {
+        for (let i = 0; i < elements.length; i++) handler(elements[i]);
-            handler(elements[i]);
-        }
     }
 
     getScrollTop() {
@@ -17,6 +15,17 @@ class Util {
     isTocStatic() {
         return window.matchMedia('only screen and (max-width: 960px)').matches;
     }
+
+    animateCSS(element, animation, reserved, callback) {
+        if (!Array.isArray(animation)) animation = [animation];
+        element.classList.add('animated', ...animation);
+        const handler = () => {
+            element.classList.remove('animated', ...animation);
+            element.removeEventListener('animationend', handler);
+            if (typeof callback === 'function') callback();
+        };
+        if (!reserved) element.addEventListener('animationend', handler, false);
+    }
 }
 
 class Theme {
@@ -268,10 +277,12 @@ class Theme {
 
     initHighlight() {
         this.util.forEach(document.querySelectorAll('.highlight > .chroma'), $chroma => {
-            const $codes = $chroma.querySelectorAll('pre.chroma > code');
+            const $elements = $chroma.querySelectorAll('pre.chroma > code');
-            const $code = $codes[$codes.length - 1];
+            if ($elements.length) {
-            const lang = $code ? $code.className.toLowerCase() : '';
+                $chroma.className += ' ' + $elements[$elements.length - 1].className.toLowerCase();
-            $chroma.className += ' ' + lang;
+                $elements[0].classList.add('lnc');
+                $elements[$elements.length - 1].classList.remove('lnc');
+            }
         });
         this.util.forEach(document.querySelectorAll('.highlight > pre.chroma'), $preChroma => {
             const $chroma = document.createElement('div');
@@ -287,6 +298,20 @@ class Theme {
             $preChroma.parentElement.replaceChild($chroma, $preChroma);
             $td.appendChild($preChroma);
         });
+        this.util.forEach(document.querySelectorAll('pre > code'), $code => {
+            $code.classList.add('block');
+            if ($code.classList.contains('lnc') || !this.config.clipboard) return;
+            const $button = document.createElement('div');
+            $button.classList.add('copy-button');
+            $button.innerHTML = '<i class="far fa-copy fa-fw"></i>';
+            $button.setAttribute('data-clipboard-text', $code.innerText);
+            $button.title = this.config.clipboard.title;
+            const clipboard = new ClipboardJS($button);
+            clipboard.on('success', e => {
+                this.util.animateCSS($code, 'flash');
+            });
+            $code.after($button);
+        });
     }
 
     initTable() {
@@ -351,8 +376,8 @@ class Theme {
                     $toc.style.top = `${TOP_SPACING}px`;
                 }
 
-                this.util.forEach($tocLinkElements, link => { link.classList.remove('active'); });
+                this.util.forEach($tocLinkElements, $tocLink => { $tocLink.classList.remove('active'); });
-                this.util.forEach($tocLiElements, link => { link.classList.remove('has-active'); });
+                this.util.forEach($tocLiElements, $tocLi => { $tocLi.classList.remove('has-active'); });
                 const INDEX_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
                 let activeTocIndex = $headerLinkElements.length - 1;
                 for (let i = 0; i < $headerLinkElements.length - 1; i++) {
@@ -386,10 +411,10 @@ class Theme {
         const $mermaidElements = document.getElementsByClassName('mermaid');
         if ($mermaidElements.length) {
             mermaid.initialize({startOnLoad: false, theme: 'null'});
-            this.util.forEach($mermaidElements, element => {
+            this.util.forEach($mermaidElements, $mermaid => {
-                mermaid.mermaidAPI.render('svg-' + element.id, this.contentData[element.id], svgCode => {
+                mermaid.mermaidAPI.render('svg-' + $mermaid.id, this.contentData[$mermaid.id], svgCode => {
-                    element.innerHTML = svgCode;
+                    $mermaid.innerHTML = svgCode;
-                }, element);
+                }, $mermaid);
             });
         }
     }
@@ -401,9 +426,9 @@ class Theme {
                 this._echartsArr[i].dispose();
             }
             this._echartsArr = [];
-            this.util.forEach(document.getElementsByClassName('echarts'), element => {
+            this.util.forEach(document.getElementsByClassName('echarts'), $echarts => {
-                const chart = echarts.init(element, this.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
+                const chart = echarts.init($echarts, this.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
-                chart.setOption(JSON.parse(this.contentData[element.id]));
+                chart.setOption(JSON.parse(this.contentData[$echarts.id]));
                 this._echartsArr.push(chart);
             });
         });
@@ -422,11 +447,10 @@ class Theme {
             mapboxgl.accessToken = this.config.mapbox.accessToken;
             mapboxgl.setRTLTextPlugin(this.config.mapbox.RTLTextPlugin);
             this._mapboxArr = this._mapboxArr || [];
-            this.util.forEach(document.getElementsByClassName('mapbox'), element => {
+            this.util.forEach(document.getElementsByClassName('mapbox'), $mapbox => {
-                const { lng, lat, zoom, lightStyle, darkStyle, marked, navigation, geolocate, scale, fullscreen } = this.contentData[element.id];
+                const { lng, lat, zoom, lightStyle, darkStyle, marked, navigation, geolocate, scale, fullscreen } = this.contentData[$mapbox.id];
-                const options = this.contentData[element.id];
                 const mapbox = new mapboxgl.Map({
-                    container: element,
+                    container: $mapbox,
                     center: [lng, lat],
                     zoom: zoom,
                     minZoom: .2,
@@ -459,8 +483,8 @@ class Theme {
             });
             this._mapboxOnSwitchTheme = this._mapboxOnSwitchTheme || (() => {
                 this.util.forEach(this._mapboxArr, mapbox => {
-                    const element = mapbox.getContainer();
+                    const $mapbox = mapbox.getContainer();
-                    const { lightStyle, darkStyle } = this.contentData[element.id];
+                    const { lightStyle, darkStyle } = this.contentData[$mapbox.id];
                     mapbox.setStyle(this.isDark ? darkStyle : lightStyle);
                     mapbox.addControl(new MapboxLanguage());
                 });
@@ -516,10 +540,6 @@ class Theme {
         const $headers = [];
         if (this.config.desktopHeaderMode === 'auto') $headers.push(document.getElementById('header-desktop'));
         if (this.config.mobileHeaderMode === 'auto') $headers.push(document.getElementById('header-mobile'));
-        this.util.forEach($headers, $header => {
-            $header.classList.add('animated');
-            $header.classList.add('faster');
-        });
         if (document.getElementById('comments')) {
             const $viewComments = document.getElementById('view-comments');
             $viewComments.href = `#comments`;
@@ -530,23 +550,23 @@ class Theme {
         window.addEventListener('scroll', () => {
             this.newScrollTop = this.util.getScrollTop();
             const scroll = this.newScrollTop - this.oldScrollTop;
-            this.util.forEach($headers, header => {
+            this.util.forEach($headers, $header => {
                 if (scroll > MIN_SCROLL) {
-                    header.classList.remove('fadeInDown');
+                    $header.classList.remove('fadeInDown');
-                    header.classList.add('fadeOutUp');
+                    this.util.animateCSS($header, ['fadeOutUp', 'faster'], true);
                 } else if (scroll < - MIN_SCROLL) {
-                    header.classList.remove('fadeOutUp');
+                    $header.classList.remove('fadeOutUp');
-                    header.classList.add('fadeInDown');
+                    this.util.animateCSS($header, ['fadeInDown', 'faster'], true);
                 }
             });
             if (this.newScrollTop > MIN_SCROLL) {
                 if (scroll > MIN_SCROLL) {
                     $fixedButtons.classList.remove('fadeIn');
-                    $fixedButtons.classList.add('fadeOut');
+                    this.util.animateCSS($fixedButtons, ['fadeOut', 'faster'], true);
                 } else if (scroll < - MIN_SCROLL) {
                     $fixedButtons.style.display = 'block';
                     $fixedButtons.classList.remove('fadeOut');
-                    $fixedButtons.classList.add('fadeIn');
+                    this.util.animateCSS($fixedButtons, ['fadeIn', 'faster'], true);
                 }
             } else {
                 $fixedButtons.style.display = 'none';