💄 Style: modify detail style (#40 )

💄 Style: modify watermark opacity to 1.25% for exmaple site
🎨 Style: enhance table style (#40 )
2026-09-01 11:12:40 +00:00 · 2022-03-14 15:09:24 +08:00 · 2022-03-14 12:35:10 +08:00 · 2022-03-14 12:25:04 +08:00 · 2022-03-14 11:17:13 +08:00 · 2022-03-12 16:15:52 +08:00
123 changed files with 4311 additions and 2848 deletions
@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
  - name: Theme Documentation 主题文档
-    url: https://hugoloveit.com/categories/documentation/
+    url: https://fixit.lruihao.cn/categories/documentation/
    about: Please read the documentation carefully. 请先仔细阅读主题文档.
@@ -0,0 +1,45 @@
+name: Update Algolia Search Index
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+jobs:
+  algolia-atomic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: 'latest'
+          extended: true
+
+      - name: Build
+        run: |
+            npm install
+            npm run build
+
+      - name: Update Algolia Index (en)
+        env:
+          ALGOLIA_APP_ID: YKOM6PKLUY
+          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
+          ALGOLIA_INDEX_NAME: 'index.en'
+          ALGOLIA_INDEX_FILE: './exampleSite/public/index.json'
+        run: |
+          npm run algolia
+
+      - name: Update Algolia Index (zh-cn)
+        env:
+          ALGOLIA_APP_ID: YKOM6PKLUY
+          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
+          ALGOLIA_INDEX_NAME: 'index.zh-cn'
+          ALGOLIA_INDEX_FILE: './exampleSite/public/zh-cn/index.json'
+        run: |
+          npm run algolia
@@ -0,0 +1,21 @@
+name: Hugo build check
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+jobs:
+  Actions-Hugo-Check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v2
+        with:
+          submodules: recursive  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: latest
+          extended: true
+      - name: Build Hugo static files
+        run: hugo -v --source=exampleSite --themesDir ../.. --gc
@@ -14,7 +14,7 @@ name: "CodeQL"
 on:
  pull_request:
    # The branches below must be a subset of the branches above
-    branches: [ main ]
+    branches: [ master ]
  schedule:
    - cron: '45 0 * * 1'

@@ -2,6 +2,39 @@
 All notable changes to this project will be documented in this file.
 <!-- Releases see https://github.com/Lruihao/FixIt/releases -->

+## v0.2.13 [2022.3.14]
+
+- :recycle: Refactor: page layout ([#65](https://github.com/Lruihao/FixIt/issues/65))
+- :tada: Feat: add Artalk comment support ([#54](https://github.com/Lruihao/FixIt/issues/54), @hiifong[#57](https://github.com/Lruihao/FixIt/pull/57))
+- :tada: Feat: add Waline comment support ([#36](https://github.com/Lruihao/FixIt/issues/36))
+- :tada: Feat: add Twikoo comment support ([#64](https://github.com/Lruihao/FixIt/issues/64))
+- :sparkles: Feat: add recently updated section ([#50](https://github.com/Lruihao/FixIt/issues/50))
+- :sparkles: Feat: add article expiration reminder support ([#51](https://github.com/Lruihao/FixIt/issues/51))
+- :sparkles: Feat: add pageStyle option ([#62](https://github.com/Lruihao/FixIt/issues/62))
+- :sparkles: Style: add media style for print view ([#61](https://github.com/Lruihao/FixIt/issues/61))
+- :sparkles: Feat: add Gravatar mirror site support (@ctj12461[#66](https://github.com/Lruihao/FixIt/pull/66))
+- :sparkles: Feat: add archive count display ([#33](https://github.com/Lruihao/FixIt/issues/33))
+- :sparkles: Feat: add `details` shortcode ([#68](https://github.com/Lruihao/FixIt/issues/68))
+- :sparkles: Feat: add `center-quote` shortcode ([#69](https://github.com/Lruihao/FixIt/issues/69))
+- :sparkles: Feat: add markdown support for **title** parameter of the admonition shortcode
+- :sparkles: Feat: add 9 newly supported social links ([#17](https://github.com/Lruihao/FixIt/issues/17))
+- :zap: Perf: enhance highlight feature (GitHub syntax supported) and fix some css bugs ([#43](https://github.com/Lruihao/FixIt/issues/43))
+  - Inline Code
+  - Indented Code
+  - Block Fenced Code
+  - gist shortcode
+- :sparkles: Feat: add `params.page.code.edit` option support ([#76](https://github.com/Lruihao/FixIt/issues/76))
+- :mag: Feat: add 360 and sougou seo support
+- :bug: Fix: remove source map of local libraries to avoid 404 error ([#67](https://github.com/Lruihao/FixIt/issues/67))
+- :fire: Feat: remove shortcode cardlink ([#42](https://github.com/Lruihao/FixIt/issues/42))
+- :lipstick: Style: more refined theme style ([#40](https://github.com/Lruihao/FixIt/issues/40))
+- :pencil2: Style: fix typo *discription* should be **description** ([#60](https://github.com/Lruihao/FixIt/issues/60))
+- :wrench: Chore(update-libs):
+  - Update cell-watermark 1.0.3 and CDN support (fontFamily supported)
+  - Update animate.css 3.7.2 -> 4.1.1 ([#74](https://github.com/Lruihao/FixIt/issues/74))
+- :wrench: Chore: add atomic-algolia for exampleSite ([#70](https://github.com/Lruihao/FixIt/issues/70))
+- **Full Changelog:** [`v0.2.12...v0.2.13`](https://github.com/Lruihao/FixIt/compare/v0.2.12...v0.2.13)
+
 ## v0.2.12 [2022-1-27]

 - :tada: Feat: add PWA support
@@ -34,7 +34,7 @@ Finally, create a new pull request at https://github.com/Lruihao/FixIt/pulls to

 ### Branches

-| Branch | Discription |
+| Branch | Description |
 | :-- | :-- |
 | master | _The branch open to the public and release versions_ |
 | RC branch | _The development branch of the next version, e.g. v0.2.12-RC_ |
@@ -44,7 +44,7 @@ Finally, create a new pull request at https://github.com/Lruihao/FixIt/pulls to

 | event | merge |
 | :-- | :-- |
-| release | **master => RC branch:** `--rebase` |
+| release | **RC branch => master:** `--rebase` |
 | PR | **others:master => master:** `--rebase` |
 | single feature| **feature branch => RC branch:** `--merge` |

@@ -60,7 +60,7 @@ Finally, create a new pull request at https://github.com/Lruihao/FixIt/pulls to

 #### Message

-| Emoji                                         | Type     | Example                                                      | Discription (No Ambiguous)                                   |
+| Emoji                                         | Type     | Example                                                      | Description (No Ambiguous)                                   |
 | :-------------------------------------------- | :------- | :----------------------------------------------------------- | :----------------------------------------------------------- |
 | :tada:  <br>:sparkles:                        | Feat     | Feat: add {feature}                                          | new feature                                                  |
 | :truck:                                       |          | Feat: adjust/migrate {feature name}，{change details}        | For the adjustment feature, it is necessary to describe the current situation (before) and after adjustment (after) |
@@ -5,7 +5,7 @@
 [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/blob/master/LICENSE)

-English README | [简体中文说明](https://github.com/Lruihao/FixIt/blob/main/README.zh-cn.md)
+English README | [简体中文说明](https://github.com/Lruihao/FixIt/blob/master/README.zh-cn.md)

 > **FixIt** is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/).

@@ -88,7 +88,7 @@ Now the migration is finished and everything is ready 🎉
 * Custom style shortcodes supported
 * **CDN** for all third-party libraries supported
 * **PWA (Progressive Web App)** supported
-* **Web Watermark** supported by [Watermark](https://github.com/Lruihao/watermark)
+* **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
 * **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
 * **Card type** link shortcode
 * **Friends** page embedded template
@@ -126,15 +126,18 @@ the FixIt theme may be more suitable for you.

 * **Gravatar** supported by [Gravatar](https://gravatar.com)
 * Local **Avatar** supported
-* Up to **64** social links supported
+* Up to **73** social links supported
 * Up to **28** share sites supported
 * **Disqus** comment system supported by [Disqus](https://disqus.com)
 * **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
 * **Valine** comment system supported by [Valine](https://valine.js.org/)
+* **Waline** comment system supported by [Waline](https://waline.js.org/)
 * **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 * **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
 * **Commento** comment system supported by [Commento](https://commento.io/)
 * **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+* **Artalk** comment system supported by [Artalk](https://artalk.js.org/)
+* **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)

 ### Extended Features

@@ -158,7 +161,7 @@ the FixIt theme may be more suitable for you.
 * **Animated typing** supported by [TypeIt](https://typeitjs.com/)
 * **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
 * **PWA (Progressive Web App)** supported
-* **Web Watermark** supported by [Watermark](https://github.com/Lruihao/watermark)
+* **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
 * **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
 * **Card type** link shortcode
 * **Friends** page embedded template
@@ -186,7 +189,7 @@ FixIt supports the following languages:

 ## [Roadmap](https://github.com/Lruihao/FixIt/projects/1)

-## [Changelog](https://github.com/Lruihao/FixIt/blob/main/CHANGELOG.md)
+## [Changelog](https://github.com/Lruihao/FixIt/blob/master/CHANGELOG.md)

 ## Questions, ideas, bugs, pull requests

@@ -221,8 +224,11 @@ Thanks to the authors of following resources included in the theme:
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
-* [Watermark](https://github.com/Lruihao/watermark)
+* [cell-watermark](https://github.com/Lruihao/watermark)
 * [pangu.js](https://github.com/vinta/pangu.js)
+* [Artalk](https://artalk.js.org/)
+* [Waline](https://waline.js.org/)
+* [Twikoo](https://twikoo.js.org/)

 ## Author

@@ -5,7 +5,7 @@
 [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/blob/master/LICENSE)

-[English README](https://github.com/HEIGE-PCloud/DoIt/blob/main/README.md) | 简体中文说明
+[English README](https://github.com/Lruihao/FixIt/blob/master/README.md) | 简体中文说明

 > [FixIt](https://github.com/Lruihao/FixIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。

@@ -87,7 +87,7 @@ sh fixit_checker.sh
 * 支持自定义样式的 shortcode
 * 支持所有第三方库的 **CDN**
 * 支持**渐进式网页应用**
-* 支持基于 [Watermark](https://github.com/Lruihao/watermark) 的**网页水印**
+* 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
 * 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
 * 支持**卡片式链接**的 shortcode
 * 支持**友情链接**的页面模板
@@ -125,15 +125,18 @@ sh fixit_checker.sh

 * 支持 **[Gravatar](https://gravatar.com)** 头像
 * 支持本地**头像**
-* 支持多达 **64** 种社交链接
+* 支持多达 **73** 种社交链接
 * 支持多达 **28** 种网站分享
 * 支持 **[Disqus](https://disqus.com)** 评论系统
 * 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
 * 支持 **[Valine](https://valine.js.org/)** 评论系统
+* 支持 **[Waline](https://waline.js.org/)** 评论系统
 * 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
 * 支持 **[Telegram comments](https://comments.app/) 评论**系统
 * 支持 **[Commento](https://commento.io/)** 评论系统
 * 支持 **[Utterances](https://utteranc.es/)** 评论系统
+* 支持 **[Artalk](https://artalk.js.org/)** 评论系统
+* 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统

 ### 扩展功能

@@ -157,7 +160,7 @@ sh fixit_checker.sh
 * 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
 * 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
 * 支持**渐进式网页应用**
-* 支持基于 [Watermark](https://github.com/Lruihao/watermark) 的**网页水印**
+* 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
 * 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
 * 支持**卡片式链接**的 shortcode
 * 支持**友情链接**的页面模板
@@ -185,6 +188,8 @@ FixIt 支持下列语言：

 ## [路线图](https://github.com/Lruihao/FixIt/projects/1)

+## [更新日志](https://github.com/Lruihao/FixIt/blob/master/CHANGELOG.md)
+
 ## 问题、想法、 bugs 和 PRs

 所有的反馈都是欢迎的！详见 [issue tracker](https://github.com/Lruihao/FixIt/issues)。
@@ -218,8 +223,11 @@ FixIt 主题中用到了以下项目，感谢它们的作者：
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
-* [Watermark](https://github.com/Lruihao/watermark)
+* [cell-watermark](https://github.com/Lruihao/watermark)
 * [pangu.js](https://github.com/vinta/pangu.js)
+* [Artalk](https://artalk.js.org/)
+* [Waline](https://waline.js.org/)
+* [Twikoo](https://twikoo.js.org/)

 ## 作者

@@ -3,7 +3,7 @@ title: "{{ replace .TranslationBaseName "-" " " | title }}"
 subtitle: ""
 type: "friends"
 date: {{ .Date }}
-description: "Friends of {{ .Site.Author.name }}"
+description: "{{ .Site.Author.name }}'s friends"
 keywords: 
  - Hugo
  - friends tempalate
@@ -14,14 +14,18 @@ comment: false
 ---
 <!-- You can define additional content below for this page. -->
 ## Base info
+
 ```yaml
 - nickname: Lruihao
  avatar: https://lruihao.cn/images/avatar.jpg
  url: https://lruihao.cn
-  discription: Lruihao's Note
+  description: Lruihao's Note
 ```

 ## Friendly Reminder
-> 1. If you want to exchange link, please leave a comment in the above format. (personal non-commercial blogs / websites only)
-> 2. Warn: Website failure, stop maintenance and improper content may be cancelled!
-> 3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
+
+{{< admonition info "Notice" true >}}
+1. If you want to exchange link, please leave a comment in the above format. (personal non-commercial blogs / websites only)
+2. Warn: Website failure, stop maintenance and improper content may be cancelled!
+3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
+{{< /admonition >}}
@@ -6,22 +6,24 @@ html {
  line-height: $global-line-height;
  width: 100%;
  scroll-behavior: smooth;
+  overflow: overlay;
 }

@media screen and (prefers-reduced-motion: reduce) {
  html {
-      scroll-behavior: auto;
+    scroll-behavior: auto;
  }
 }

 /* scrollbar, only support webkit */
 ::-webkit-scrollbar {
-  width: .5rem;
-  height: .5rem;
+  width: 0.5rem;
+  height: 0.5rem;
 }

 ::-webkit-scrollbar-thumb {
  background-color: $scrollbar-color;
+  @include border-radius($global-border-radius);

  &:hover {
    background-color: $scrollbar-hover-color;
@@ -31,7 +33,7 @@ html {
 ::selection {
  background-color: $selection-color;

-  [theme=dark] & {
+  [theme='dark'] & {
    background-color: $selection-color-dark;
  }
 }
@@ -42,29 +44,26 @@ body {
  @include overflow-wrap(break-word);
  scrollbar-color: auto;

-  &[theme=dark] {
+  &[theme='dark'] {
    color: $global-font-color-dark;
    background-color: $global-background-color-dark;
  }
 }

+img {
+  @include object-fit(contain);
+  @include border-radius($global-border-radius/2);
+}
+
+iframe {
+  @include border-radius($global-border-radius);
+}
+
@include ms;
@include link(true, true);

-@import "../_partial/mask";
-@import "../_partial/icon";
-@import "../_partial/details";
-@import "../_partial/fixed-button";
-@import "../_partial/cookieconsent";
-
-img {
-  @include object-fit(contain);
-}
-
-i.logo-icon{
-  width: 2em;
-  
-  .fa-ban {
-    color: $global-logo-icon-color;
-  }
-}
+@import '../_partial/mask';
+@import '../_partial/icon';
+@import '../_partial/details';
+@import '../_partial/fixed-button';
+@import '../_partial/cookieconsent';
@@ -8,8 +8,20 @@
  main {
    flex: 1 0 auto;

-    .container {
+    aside:first-child {
+      order: 2;
+    }
+
+    &.container {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
      padding: 0 1rem;
    }
+
+    &.container-reverse {
+      @extend .container;
+      flex-direction: row-reverse;
+    }
  }
 }
@@ -1,12 +1,62 @@
+@media only screen and (min-width: 1441px) {
+  .page {
+    width: 60%;
+
+    [page-style='wide'] & {
+      width: 64%;
+    }
+
+    [page-style='narrow'] & {
+      max-width: 800px;
+    }
+  }
+
+  aside {
+    width: 20%;
+
+    [page-style='wide'] & {
+      width: 18%;
+    }
+
+    [page-style='narrow'] & {
+      width: calc(50% - 400px);
+    }
+  }
+}
+
@media only screen and (max-width: 1440px) {
  .page {
    width: 56%;
+
+    [page-style='wide'] & {
+      width: 60%;
+    }
+  }
+
+  aside {
+    width: 22%;
+
+    [page-style='wide'] & {
+      width: 20%;
+    }
  }
 }

@media only screen and (max-width: 1200px) {
  .page {
    width: 52%;
+
+    [page-style='wide'] & {
+      width: 56%;
+    }
+  }
+
+  aside {
+    width: 24%;
+
+    [page-style='wide'] & {
+      width: 22%;
+    }
  }

  #header-desktop .header-wrapper {
@@ -19,8 +69,8 @@
 }

@media only screen and (max-width: 960px) {
-  #toc-auto {
-    display: none;
+  aside {
+    display: none !important;
  }

  #toc-static {
@@ -28,7 +78,7 @@
  }

  .page {
-    width: 80%;
+    width: 80% !important;
  }

  #header-desktop .header-wrapper {
@@ -45,24 +95,12 @@
    display: block;
  }

-  body.blur {
-    overflow: hidden;
-  }
-
  .page {
-    width: 100%;
-
-    [header-mobile] & {
-      padding-top: $header-height;
-    }
-
-    [header-mobile=normal] & {
-      padding-top: 0;
-    }
+    width: 100% !important;

    .content {
      [id] {
-        [header-mobile=normal] & {
+        [header-mobile='normal'] & {
          scroll-margin-top: 0;
        }
      }
@@ -74,10 +112,49 @@
      }
    }
  }
-  
-  footer{
+
+  footer {
    .footer-container {
-      font-size: .618rem;
+      font-size: 0.618rem;
    }
  }
 }
+
+@media only print {
+  @page {
+    size: A4 portrait;
+    margin: 1.27cm;
+  }
+
+  .page {
+    width: 100% !important;
+    padding-top: 0 !important;
+
+    .single-title,
+    .single-subtitle,
+    .post-meta {
+      text-align: center;
+    }
+
+    h1:not(.single-title),
+    .page-break-before {
+      page-break-before: always;
+    }
+
+    .page-break-after {
+      page-break-after: always;
+    }
+  }
+
+  .print-d-none,
+  header,
+  footer .footer-line:not(.powered):not(.copyright),
+  #toc-auto,
+  .post-info-share,
+  .post-info-more section:last-child,
+  .post-nav,
+  #fixed-buttons,
+  #comments {
+    display: none !important;
+  }
+}
@@ -47,19 +47,19 @@
 }

@mixin placeholder($color) {
-  input::-webkit-input-placeholder{
+  input::-webkit-input-placeholder {
    color: $color;
  }

-  input:-moz-placeholder{
+  input:-moz-placeholder {
    color: $color;
  }

-  input::-moz-placeholder{
+  input::-moz-placeholder {
    color: $color;
  }

-  input:-ms-input-placeholder{
+  input:-ms-input-placeholder {
    color: $color;
  }

@@ -1,7 +1,7 @@
@mixin details-transition-open {
-  @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+  @include transition(max-height 0.2s cubic-bezier(0, 1, 0, 1) -0.1s);
 }

@mixin details-transition-close {
-  @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+  @include transition(max-height 0.2s cubic-bezier(0.5, 0, 1, 0) 0s);
 }
@@ -1,4 +1,4 @@
-@import "_compatibility";
-@import "_link";
-@import "_blur";
-@import "_details";
+@import '_compatibility';
+@import '_link';
+@import '_blur';
+@import '_details';
@@ -1,10 +1,12 @@
@mixin link($light, $dark) {
-  a, a::before, a::after {
+  a,
+  a::before,
+  a::after {
    text-decoration: none;

    color: if($light, $global-link-color, $single-link-color);

-    [theme=dark] & {
+    [theme='dark'] & {
      color: if($dark, $global-link-color-dark, $single-link-color-dark);
    }
  }
@@ -13,7 +15,7 @@
  a:hover {
    color: if($light, $global-link-hover-color, $single-link-hover-color);

-    [theme=dark] & {
+    [theme='dark'] & {
      color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
    }
  }
@@ -1,6 +1,14 @@
 .archive {
  .single-title {
    text-align: right;
+
+    sup {
+      color: $global-font-secondary-color;
+
+      [theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
  }

  .group-title {
@@ -8,6 +16,6 @@
    margin-bottom: 1rem;
  }

-  @import "../_partial/_archive/terms";
-  @import "../_partial/_archive/tags";
+  @import '../_partial/_archive/terms';
+  @import '../_partial/_archive/tags';
 }
@@ -1,9 +1,9 @@
 /**
- * @Description: Style of layout named 'Friend links'.
- * @Author: lruihao.cn
- * @Updated:  2021/9/20 19:26
+ * @Description: Style of layout named 'friends'.
+ * @Author: Lruihao <https://lruihao.cn>
+ * @Updated:  2022/3/11 21:36
 */
- 
+
 .friend-links {
  margin-top: 1rem;
  display: flex;
@@ -21,11 +21,11 @@
  height: 200px;
  font-size: 1rem;
  text-align: center;
-  background: rgba(255,255,255,0.3);
-  box-sizing: border-box; 
+  background: rgba(255, 255, 255, 0.3);
+  box-sizing: border-box;
  box-shadow: 3px 3px 5px #aaa;
-  border-radius: 5px;
-  border:none;
+  @include border-radius($global-border-radius);
+  border: none;
  transition-duration: 0.3s;
  margin-bottom: 1rem;
  display: flex;
@@ -40,13 +40,13 @@
 .friend-avatar {
  object-fit: cover;
  object-position: center;
-  width: 100%!important;
-  height: 150px!important;
-  border-radius: 5px;
+  width: 100% !important;
+  height: 150px !important;
+  @include border-radius($global-border-radius);
  margin: 0;
  padding: 0;
 }
-.friend-nickname{
+.friend-nickname {
  display: block;
  position: relative;
  color: #2bbc8a;
@@ -60,4 +60,4 @@
 }
 .friend-nickname:hover {
  color: #d480aa;
-}
+}
@@ -1,11 +1,11 @@
 .home {
  .home-profile {
-    @include transform(translateY( 16vh));
-    padding: 0 0 .5rem;
+    @include transform(translateY(16vh));
+    padding: 0 0 0.5rem;
    text-align: center;

    .home-avatar {
-      padding: .5rem;
+      padding: 0.5rem;

      img {
        display: inline-block;
@@ -13,12 +13,12 @@
        height: auto;
        margin: 0 auto;
        @include border-radius(100%);
-        @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
+        @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05));
        @include transition(all 0.4s ease);

        &:hover {
          position: relative;
-          @include transform(translateY(-.75rem));
+          @include transform(translateY(-0.75rem));
        }
      }
    }
@@ -27,18 +27,18 @@
      font-size: 1.25rem;
      font-weight: bold;
      margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
    }

    .home-subtitle {
      font-size: 1rem;
      font-weight: normal;
      margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
    }

    .links {
-      padding: .5rem;
+      padding: 0.5rem;
      font-size: 1.5rem;

      a * {
@@ -47,7 +47,7 @@

      img {
        height: 1.5rem;
-        padding: 0 .25rem;
+        padding: 0 0.25rem;
      }
    }

@@ -56,10 +56,10 @@
      line-height: 1.5rem;
      font-weight: normal;
      margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }
    }
@@ -78,11 +78,11 @@

  .summary {
    padding-top: 1rem;
-    padding-bottom: .8rem;
+    padding-bottom: 0.8rem;
    color: $global-font-color;
    border-bottom: 1px dashed $global-border-color;

-    [theme=dark] & {
+    [theme='dark'] & {
      color: $global-font-color-dark;
      border-bottom: 1px dashed $global-border-color-dark;
    }
@@ -121,14 +121,14 @@
    .content {
      @include box(vertical);
      -webkit-line-clamp: 3;
-      margin-top: .3rem;
+      margin-top: 0.3rem;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      @include overflow-wrap(break-word);
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }

@@ -143,7 +143,7 @@
        display: inline;

        &::after {
-          content: "\A";
+          content: '\A';
          white-space: pre;
        }
      }
@@ -154,21 +154,22 @@

      @include link(false, true);

-      b, strong {
+      b,
+      strong {
        color: $global-font-secondary-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $global-font-secondary-color-dark;
        }
      }
    }

    .post-footer {
-      margin-top: .4rem;
+      margin-top: 0.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
-      font-size: .875rem;
+      font-size: 0.875rem;

      @include link(false, false);

@@ -1,22 +1,11 @@
 .page {
  position: relative;
-  max-width: 800px;
-  width: 60%;
-  margin: 0 auto;

-  [header-desktop] & {
-    padding-top: $header-height;
-  }
-
-  [header-desktop=normal] & {
-    padding-top: 0;
-  }
-  
  .content {
    [id] {
      scroll-margin-top: $header-height;
-      
-      [header-desktop=normal] & {
+
+      [header-desktop='normal'] & {
        scroll-margin-top: 0;
      }
    }
@@ -25,10 +14,10 @@
  @include blur;
 }

-@import "_single";
-@import "_special";
-@import "_archive";
-@import "_home";
-@import "_404";
-@import "_offline";
-@import "_friends";
+@import '_single';
+@import '_special';
+@import '_archive';
+@import '_home';
+@import '_404';
+@import '_offline';
+@import '_friends';
@@ -1,7 +1,7 @@
 #content-offline {
  @include transform(translateY(30vh));
  text-align: center;
-  
+
  .offline-title {
    font-size: 3.6rem;
  }
@@ -16,4 +16,4 @@
  .error-text {
    font-size: 1.2rem;
  }
-}
+}
@@ -1,15 +1,16 @@
-@import "../_partial/_single/toc";
+@import '../_partial/_single/toc';

 .single {
  .single-title {
-    margin: 1rem 0 .5rem;
+    padding: 1rem 0 0.5rem;
+    margin: 0;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 140%;
  }

  .single-subtitle {
-    margin: .4rem 0;
+    margin: 0.4rem 0;
    font-size: 1.2rem;
    font-weight: normal;
    font-style: italic;
@@ -17,14 +18,14 @@
  }

  .post-meta {
-    font-size: .875rem;
+    font-size: 0.875rem;
    color: $global-font-secondary-color;

    span {
      display: inline-block;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      color: $global-font-secondary-color-dark;
    }

@@ -36,7 +37,7 @@
  }

  .featured-image {
-    margin: .5rem 0 1rem 0;
+    margin: 0.5rem 0 1rem 0;

    img {
      display: block;
@@ -52,7 +53,8 @@
  }

  .content {
-    > h1, > h2 {
+    > h1,
+    > h2 {
      font-size: 1.5rem;

      & code {
@@ -92,7 +94,7 @@
      font-weight: bold;
      margin: 1.2rem 0;

-      [theme=dark] & {
+      [theme='dark'] & {
        font-weight: bolder;
      }
    }
@@ -103,28 +105,29 @@
    > h5,
    > h6 {
      > .header-mark::before {
-        content: "|";
-        margin-right: .3125rem;
+        content: '|';
+        margin-right: 0.3125rem;
        color: $single-link-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $single-link-color-dark;
        }
      }
    }

    > h2 > .header-mark::before {
-      content: "#";
+      content: '#';
    }

    p {
-      margin: .5rem 0;
+      margin: 0.5rem 0;
    }

-    b, strong {
+    b,
+    strong {
      font-weight: bold;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: #ddd;
      }
    }
@@ -134,17 +137,20 @@
    a {
      @include overflow-wrap(break-word);

-      [theme=dark] & b, [theme=dark] & strong {
+      [theme='dark'] & b,
+      [theme='dark'] & strong {
        color: $single-link-color-dark;
      }
    }

-    [theme=dark] a:hover b, [theme=dark] a:hover strong {
+    [theme='dark'] a:hover b,
+    [theme='dark'] a:hover strong {
      color: $single-link-hover-color-dark;
    }

-    ul, ol {
-      margin: .5rem 0;
+    ul,
+    ol {
+      margin: 0.5rem 0;
      padding-left: 2.5rem;
    }

@@ -159,7 +165,7 @@
        color: $global-font-secondary-color;
      }

-      [theme=dark] & {
+      [theme='dark'] & {
        background: $code-background-color-dark;

        rt {
@@ -174,7 +180,7 @@
      &::-webkit-scrollbar {
        background-color: $table-background-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          background-color: $table-background-color-dark;
        }
      }
@@ -182,28 +188,47 @@
      > table {
        width: 100%;
        max-width: 100%;
-        margin: .625rem 0;
+        margin: 0.625rem 0;
        border-spacing: 0;
        background: $table-background-color;
        border-collapse: collapse;

-        [theme=dark] & {
+        [theme='dark'] & {
          background: $table-background-color-dark;
        }

        thead {
          background: $table-thead-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            background-color: $table-thead-color-dark;
          }
        }

-        th, td {
-          padding: .3rem 1rem;
+        &:not([class]) tbody {
+          & tr:nth-child(odd) {
+            background: darken($table-background-color, 2.25%);
+
+            [theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 2.75%);
+            }
+          }
+          
+          & tr:hover {
+            background: darken($table-background-color, 4.5%);
+
+            [theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 5.5%);
+            }
+          }
+        }
+
+        th,
+        td {
+          padding: 0.3rem 1rem;
          border: 1px solid darken($table-thead-color, 2%);

-          [theme=dark] & {
+          [theme='dark'] & {
            border-color: darken($table-thead-color-dark, 2%);
          }
        }
@@ -216,16 +241,16 @@
    }

    figure {
-      margin: .5rem;
+      margin: 0.5rem;
      text-align: center;

      .image-caption:not(:empty) {
        min-width: 20%;
        max-width: 80%;
        display: inline-block;
-        padding: .5rem;
+        padding: 0.5rem;
        margin: 0 auto;
-        font-size: .875rem;
+        font-size: 0.875rem;
        color: #969696;
      }

@@ -243,37 +268,38 @@

    blockquote {
      display: block;
-      border-left: .5rem solid $blockquote-color;
-      background-color: rgba($blockquote-color, .2);
-      padding: .25rem .75rem;
+      border-left: 0.25em solid $global-border-color;
+      color: $blockquote-color;
+      padding: 0 1em;
      margin: 1rem 0;

-      [theme=dark] & {
-        border-left-color: $blockquote-color-dark;
-        background-color: rgba($blockquote-color-dark, .2);
+      ul,
+      ol {
+        padding-left: 1.5em;
      }
+
+      [theme='dark'] & {
+        color: $blockquote-color-dark;
+        border-left-color: $global-border-color-dark;
+      }
+
+      @include link(false, true);
    }

    .footnotes {
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }

      p {
-        margin: .25rem 0;
+        margin: 0.25rem 0;
      }
    }

-    @import "../_partial/_single/code";
-    @import "../_partial/_single/instagram";
-    @import "../_partial/_single/admonition";
-    @import "../_partial/_single/echarts";
-    @import "../_partial/_single/mapbox";
-    @import "../_partial/_single/music";
-    @import "../_partial/_single/bilibili";
-    @import "../_partial/_single/cardlink";
+    @import '../_partial/_single/code';
+    @import '../_shortcodes/index';

    hr {
      margin: 1rem 0;
@@ -281,24 +307,24 @@
      border-top: 1px dashed $global-border-color;
      border-bottom: none;

-      [theme=dark] & {
+      [theme='dark'] & {
        border-top: 1px dashed $global-border-color-dark;
      }
    }

    kbd {
      display: inline-block;
-      padding: .25rem;
+      padding: 0.25rem;
      background-color: $global-background-color;
      border: 1px solid $global-border-color;
      border-bottom-color: $global-border-color;
      @include border-radius(3px);
      @include box-shadow(inset 0 -1px 0 $global-border-color);
-      font-size: .8rem;
+      font-size: 0.8rem;
      font-family: $code-font-family;
      color: $code-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        background-color: $global-background-color-dark;
        border: 1px solid $global-border-color-dark;
        border-bottom-color: $global-border-color-dark;
@@ -309,8 +335,8 @@

    .typeit {
      .code {
-        padding: .375rem;
-        font-size: .875rem;
+        padding: 0.375rem;
+        font-size: 0.875rem;
        font-family: $code-font-family;
        font-weight: bold;
        word-break: break-all;
@@ -323,8 +349,8 @@
    }
  }

-  @import "../_partial/_single/footer";
-  @import "../_partial/_single/comment";
+  @import '../_partial/_single/footer';
+  @import '../_partial/_single/comment';
 }

 .lg-toolbar .lg-icon::after {
@@ -1,5 +1,6 @@
 .special {
-  .single-title, .single-subtitle {
+  .single-title,
+  .single-subtitle {
    text-align: right;
  }
 }
@@ -19,7 +19,7 @@
    sup {
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }
    }
@@ -9,7 +9,7 @@
  line-height: 1.6rem;

  .card-item {
-    font-size: .875rem;
+    font-size: 0.875rem;
    text-align: left;
    width: 45%;
    display: flex;
@@ -28,7 +28,7 @@
        font-weight: bold;
        display: inline-block;
        margin-top: 1rem;
-        margin-bottom: .75rem;
+        margin-bottom: 0.75rem;
      }

      span {
@@ -44,7 +44,7 @@
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
-  margin: .25rem 0 .25rem 1.5rem;
+  margin: 0.25rem 0 0.25rem 1.5rem;
 }

 .archive-item-link {
@@ -58,7 +58,7 @@
    background-color: transparent;
  }

-  [theme=dark] & {
+  [theme='dark'] & {
    color: $global-link-color-dark;

    &:hover {
@@ -68,13 +68,12 @@
 }

 .archive-item-date {
-  width: 4em;
  text-align: right;
  color: $global-font-secondary-color;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;

-  [theme=dark] & {
+  [theme='dark'] & {
    color: $global-font-secondary-color-dark;
  }
 }
@@ -2,14 +2,16 @@
  .cc-btn {
    color: $global-font-color;

-    &:hover, &:focus {
+    &:hover,
+    &:focus {
      background-color: #ccc;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      color: $global-font-color;

-      &:hover, &:focus {
+      &:hover,
+      &:focus {
        background-color: #fff;
      }
    }
@@ -1,5 +1,7 @@
 .details {
  .details-summary {
+    @include border-radius($global-border-radius);
+
    &:hover {
      cursor: pointer;
    }
@@ -9,7 +11,7 @@
    color: $global-font-secondary-color;
    @include transition(transform 0.2s ease);

-    [theme=dark] & {
+    [theme='dark'] & {
      color: $global-font-secondary-color-dark;
    }
  }
@@ -21,12 +23,17 @@
  }

  &.open {
+    .details-summary {
+      @include border-radius($global-border-radius $global-border-radius 0 0);
+    }
+
    i.details-icon {
      @include transform(rotate(90deg));
    }

    .details-content {
-      max-height: $MAX_LENGTH;
+      max-height: 100%;
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
      @include details-transition-close;
    }
  }
@@ -9,7 +9,7 @@
  right: 1.5rem;
  font-size: 1rem;
  line-height: 1.3rem;
-  padding: .6rem .6rem;
+  padding: 0.6rem 0.6rem;
  color: $global-font-secondary-color;
  background: $header-background-color;
  @include border-radius(2rem);
@@ -17,20 +17,24 @@

  @include blur;

-  &:hover, &:active {
+  &:hover,
+  &:active {
    color: $global-font-color;
    cursor: pointer;
  }

-  &:active, &:focus, &:hover {
+  &:active,
+  &:focus,
+  &:hover {
    outline: none;
  }

-  [theme=dark] & {
+  [theme='dark'] & {
    color: $global-font-secondary-color-dark;
    background: $header-background-color-dark;

-    &:hover, &:active {
+    &:hover,
+    &:active {
      color: $global-font-color-dark;
    }
  }
@@ -6,15 +6,19 @@ footer {
  padding: 1rem 0;

  .footer-container {
-    font-size: .875rem;
+    font-size: 0.875rem;

    .footer-line {
      width: 100%;

      .footer-divider::before {
        content: '|';
-        margin-left: .25rem;
-        margin-right: .25rem;
+        margin-left: 0.25rem;
+        margin-right: 0.25rem;
+      }
+
+      .fixit-icon {
+        top: 0.25em;
      }

      .animate-icon {
@@ -25,7 +29,6 @@ footer {
      .run-times {
        font-variant-numeric: tabular-nums lining-nums;
      }
-
    }
  }

@@ -33,19 +36,25 @@ footer {
 }

@keyframes icon-animate {
-  0%,100% {
-    transform: scale(1)
+  0%,
+  100% {
+    transform: scale(1);
  }

-  10%,30% {
-    transform: scale(.9)
+  10%,
+  30% {
+    transform: scale(0.9);
  }

-  20%,40%,60%,80% {
-    transform: scale(1.1)
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: scale(1.1);
  }

-  50%,70% {
-    transform: scale(1.1)
+  50%,
+  70% {
+    transform: scale(1.1);
  }
-}
+}
@@ -4,12 +4,12 @@ header {
  background-color: $header-background-color;
  @include transition(box-shadow 0.3s ease);

-  [theme=dark] & {
+  [theme='dark'] & {
    background-color: $header-background-color-dark;
  }

  &:hover {
-    @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, .1));
+    @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
  }
 }

@@ -24,7 +24,7 @@ header {
 .header-title {
  font-family: $header-title-font-family;
  font-weight: bold;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
  min-width: 10%;
  overflow: hidden;
  white-space: nowrap;
@@ -36,15 +36,15 @@ header {
    height: 1.5em;
    vertical-align: text-bottom;
  }
-  
+
  .header-title-text {
-    margin-left: .25rem;
-    margin-right: .25rem;
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
  }

  .header-subtitle {
-    margin-left: .25rem;
-    font-size: .6em;
+    margin-left: 0.25rem;
+    font-size: 0.6em;
  }
 }

@@ -73,14 +73,14 @@ header {
    box-sizing: border-box;
    height: 2.5rem;
    width: 2.5rem;
-    @include border-radius(.5rem);
+    @include border-radius(0.5rem);
    border: none;
    outline: none;
    background-color: $header-background-color;
    vertical-align: baseline !important;
    @include transition(width 0.3s ease);

-    [theme=dark] & {
+    [theme='dark'] & {
      background-color: $header-background-color-dark;
    }
  }
@@ -95,7 +95,7 @@ header {
  }

  .search-toggle {
-    left: .5rem;
+    left: 0.5rem;
    right: auto;
  }

@@ -107,14 +107,15 @@ header {
    display: none;
  }

-  .open &, &.mobile {
+  .open &,
+  &.mobile {
    input {
      color: $global-font-color;
      background-color: $search-background-color;
      padding: 0 2rem 0 2rem;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      input {
        color: $global-font-color-dark;
        background-color: $search-background-color-dark;
@@ -128,7 +129,7 @@ header {
    .search-button {
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }
    }
@@ -149,11 +150,12 @@ header {

 #header-desktop {
  display: block;
-  position: fixed;
+  position: sticky;
+  top: 0;
  height: $header-height;
  line-height: $header-height;

-  [header-desktop=normal] & {
+  [header-desktop='normal'] & {
    position: static;
  }

@@ -173,12 +175,12 @@ header {
      }

      .menu-item {
-        margin: 0 .5rem;
+        margin: 0 0.5rem;

        &.delimiter {
          border-left: 1.5px solid $global-font-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            border-left-color: $global-border-color-dark;
          }
        }
@@ -188,7 +190,7 @@ header {
        }

        &.search {
-          margin: 0 -.5rem 0 0;
+          margin: 0 -0.5rem 0 0;
        }
      }

@@ -196,7 +198,7 @@ header {
        font-weight: 900;
        color: $header-hover-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $header-hover-color-dark;
        }
      }
@@ -204,7 +206,7 @@ header {
  }

  &.open .header-wrapper .menu .menu-item.search {
-    margin: 0 .25rem 0 .5rem;
+    margin: 0 0.25rem 0 0.5rem;

    input {
      width: 24rem;
@@ -214,11 +216,12 @@ header {

 #header-mobile {
  display: none;
-  position: fixed;
-  height: $header-height;
+  position: sticky;
+  top: 0;
+  min-height: $header-height;
  line-height: $header-height;

-  [header-mobile=normal] & {
+  [header-mobile='normal'] & {
    position: static;
  }

@@ -249,30 +252,30 @@ header {
          @include border-radius(3px);
          @include transition(all 0.3s ease-in-out);

-          [theme=dark] & {
+          [theme='dark'] & {
            background: $global-font-color-dark;
          }
        }

        span:nth-child(1) {
-          margin-bottom: .5rem;
+          margin-bottom: 0.5rem;
        }

        span:nth-child(3) {
-          margin-top: .5rem;
+          margin-top: 0.5rem;
        }

        &.active {
          span:nth-child(1) {
-            @include transform(rotate(45deg) translate(.4rem, .5rem));
+            @include transform(rotate(45deg) translate(0.4rem, 0.5rem));
          }

          span:nth-child(2) {
-            opacity: 0
+            opacity: 0;
          }

          span:nth-child(3) {
-            @include transform(rotate(-45deg) translate(.4rem, -.5rem));
+            @include transform(rotate(-45deg) translate(0.4rem, -0.5rem));
          }
        }
      }
@@ -283,8 +286,8 @@ header {
      background: $header-background-color;
      border-top: 2px solid $global-border-color;
      display: none;
-      padding-top: .5rem;
-      @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
+      padding-top: 0.5rem;
+      @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));

      .search-wrapper {
        display: flex;
@@ -298,7 +301,8 @@ header {
      .search {
        flex-grow: 10;

-        .algolia-autocomplete, input {
+        .algolia-autocomplete,
+        input {
          width: 100%;
        }
      }
@@ -309,7 +313,7 @@ header {

      .search-cancel {
        display: none;
-        margin-left: .75rem;
+        margin-left: 0.75rem;
      }

      .menu-item {
@@ -321,7 +325,7 @@ header {
        display: block;
      }

-      [theme=dark] & {
+      [theme='dark'] & {
        background: $header-background-color-dark;
        border-top-color: $global-border-color-dark;
      }
@@ -352,7 +356,7 @@ header {
  position: fixed;
  z-index: 200;
  top: $header-height;
-  @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
+  @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));

  &.desktop {
    right: 2rem;
@@ -368,7 +372,7 @@ header {
    right: 0 !important;
    background-color: $global-background-color;

-    [theme=dark] & {
+    [theme='dark'] & {
      background-color: $global-background-color-dark;
    }

@@ -377,7 +381,7 @@ header {
      max-height: calc(100vh - #{$header-height});

      .suggestion {
-        padding: .75rem 1rem;
+        padding: 0.75rem 1rem;

        .suggestion-title {
          display: inline-block;
@@ -390,12 +394,12 @@ header {
        }

        .suggestion-date {
-          font-size: .875rem;
+          font-size: 0.875rem;
          float: right;
          text-align: right;
          color: $global-font-secondary-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            color: $global-font-secondary-color-dark;
          }
        }
@@ -409,7 +413,7 @@ header {
          @include overflow-wrap(break-word);
          color: $global-font-secondary-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            color: $global-font-secondary-color-dark;
          }
        }
@@ -418,7 +422,7 @@ header {
          font-style: normal;
          background-color: $selection-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            background-color: $selection-color-dark;
          }
        }
@@ -426,7 +430,7 @@ header {
        &.cursor {
          background: darken($code-background-color, 5%);

-          [theme=dark] & {
+          [theme='dark'] & {
            background: lighten($code-background-color-dark, 5%);
          }
        }
@@ -444,19 +448,19 @@ header {
      .search-query {
        font-weight: bold;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: #ddd;
        }
      }
    }

    .search-footer {
-      padding: .5rem 1rem;
+      padding: 0.5rem 1rem;
      float: right;
-      font-size: .8rem;
+      font-size: 0.8rem;
      color: $global-font-secondary-color;

-      [theme=dark] {
+      [theme='dark'] {
        color: $global-font-secondary-color-dark;
      }

@@ -12,6 +12,15 @@ svg.icon {
 img.emoji {
  height: 1em;
  width: 1em;
-  margin: 0 .05em 0 .1em;
-  vertical-align: -.1em;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
+}
+
+.fixit-icon {
+  display: inline-block;
+  height: 1.5em;
+  width: 1.5em;
+  line-height: 1.5em;
+  position: relative;
+  vertical-align: text-bottom;
 }
@@ -11,6 +11,6 @@

  .blur & {
    z-index: 100;
-    background-color: rgba(0, 0, 0, .25);
+    background-color: rgba(0, 0, 0, 0.25);
  }
 }
@@ -8,13 +8,17 @@
  padding: 1rem 0 0;

  a {
-    font-size: .8rem;
-    color: #bfbfbf;
-    letter-spacing: .1rem;
+    font-size: 0.8rem;
+    color: $pagination-link-color;
+    letter-spacing: 0.1rem;
    font-weight: 700;
    padding: 5px 5px;
    text-decoration: none;
    @include transition(0.3s);
+
+    [theme='dark'] & {
+      color: $pagination-link-color-dark;
+    }
  }

  li {
@@ -32,14 +36,14 @@
      color: $pagination-link-hover-color;
    }

-    [theme=dark] &:hover a {
+    [theme='dark'] &:hover a {
      color: $pagination-link-hover-color-dark;
    }

    &:before,
    &:after {
      position: absolute;
-      content: "";
+      content: '';
      width: 0;
      height: 3px;
      background: $pagination-link-hover-color;
@@ -47,8 +51,8 @@
      bottom: 0px;
    }

-    [theme=dark] &:before,
-    [theme=dark] &:after {
+    [theme='dark'] &:before,
+    [theme='dark'] &:after {
      background: $pagination-link-hover-color-dark;
    }

@@ -66,7 +70,6 @@
    }

    &:hover {
-
      &:before,
      &:after {
        width: 50%;
@@ -78,7 +81,7 @@
        color: $pagination-link-hover-color;
      }

-      [theme=dark] & a {
+      [theme='dark'] & a {
        color: $pagination-link-hover-color-dark;
      }

@@ -1,26 +1,48 @@
+// inline code
 code {
-  display:inline-block;
+  display: inline-block;
  max-width: 100%;
-  padding: 0 .4rem;
-  @include overflow-wrap(break-word);
-  @include line-break(anywhere);
+  padding: 0 0.4rem;
  font-size: $code-font-size;
  font-family: $code-font-family;
  color: $code-color;
+  background-color: rgba(175, 184, 193, 0.2);
+  @include border-radius($global-border-radius);
+  @include overflow-wrap(break-word);
+  @include line-break(anywhere);

-  [theme=dark] & {
+  [theme='dark'] & {
    color: $code-color-dark;
+    background-color: rgba(99, 110, 123, 0.4);
  }
 }

+// indented code
 pre {
  margin: 0;
-  padding: .25rem 0 .25rem .5rem;
+  line-height: 1.45em;
+  padding: 0.5rem;
  overflow: auto;
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+  @include border-radius($global-border-radius);
  @include tab-size(4);

+  background-color: $code-background-color;
+
+  [theme='dark'] & {
+    background-color: $code-background-color-dark;
+  }
+
  code {
    padding: 0;
+    background-color: transparent;
+    @include border-radius(0);
+    @include max-content(min-width);
+
+    [theme='dark'] & {
+      background-color: transparent;
+    }
  }

  img {
@@ -30,17 +52,10 @@ pre {
  }
 }

-code, pre, .highlight table, .highlight tr, .highlight td {
-  background: $code-background-color;
-
-  [theme=dark] & {
-    background: $code-background-color-dark;
-  }
-}
-
-.highlight, .gist {
-  font-family: $code-font-family;
+.highlight,
+.gist {
  font-size: $code-font-size;
+  font-family: $code-font-family;

  .table-wrapper {
    > table,
@@ -55,9 +70,9 @@ code, pre, .highlight table, .highlight tr, .highlight td {
  }
 }

+// block fenced code
 .highlight {
-  line-height: 1.4em;
-  margin: .5rem 0;
+  margin: 0.5rem 0;

  > .chroma {
    position: relative;
@@ -70,12 +85,15 @@ code, pre, .highlight table, .highlight tr, .highlight td {
      width: 100%;
      font-family: $global-font-family;
      font-weight: bold;
+      line-height: 1.4em;
      color: $code-info-color;
-      background: darken($code-background-color, 8%);
+      background-color: darken($code-background-color, 3%);
+      @include border-radius($global-border-radius);
+      @include transition(border-radius 0.2s ease);

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $code-info-color-dark;
-        background: darken($code-background-color-dark, 6%);
+        background-color: darken($code-background-color-dark, 6%);
      }

      &:hover {
@@ -84,14 +102,38 @@ code, pre, .highlight table, .highlight tr, .highlight td {

      .code-title {
        width: 100%;
-        padding: .4rem;
+        padding: 0.4rem;
+
+        .arrow {
+          padding: 0 0.2rem;
+          @include transition(transform 0.2s ease);
+        }
      }

      .code-title::after {
-        padding-left: .2rem;
+        padding-left: 0.2rem;
        content: 'Code';
      }

+      .ellipses {
+        padding: 0.4rem;
+      }
+
+      .edit,
+      .copy {
+        display: none;
+        padding: 0.4rem;
+
+        &:hover {
+          cursor: pointer;
+          color: $global-link-hover-color;
+
+          [theme='dark'] & {
+            color: $global-link-hover-color-dark;
+          }
+        }
+      }
+
      @each $type, $text in $code-type-map {
        &.#{$type} .code-title::after {
          content: $text;
@@ -99,80 +141,78 @@ code, pre, .highlight table, .highlight tr, .highlight td {
      }
    }

-    .lntd:first-child {
-      min-width: 1.6rem;
-      text-align: right;
-    }
-
-    .lntd:last-child {
-      width: 100%;
-
-      pre {
-        @include max-content(min-width);
-      }
-    }
-
-    .ln {
-      padding-right: .75rem;
-    }
-
-    .hl {
-      display: block;
-      background-color: darken($code-background-color, 10%);
-
-      [theme=dark] & {
-        background-color: darken($code-background-color-dark, 5%);
-      }
-    }
-
-    .ln, .lnt {
-      color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-
-    .arrow {
-      padding: 0 .2rem;
-      @include transition(transform 0.2s ease);
-    }
-
-    .ellipses {
-      padding: .4rem;
-    }
-
-    .copy {
-      display: none;
-      padding: .4rem;
-
-      &:hover {
-        cursor: pointer;
-        color: $global-link-hover-color;
-
-        [theme=dark] & {
-          color: $global-link-hover-color-dark;
-        }
-      }
-    }
-
+    // delayed loading table-wrapper
    .table-wrapper {
      max-height: 0;
-      overflow-y: hidden;
+      overflow: hidden;
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
      @include details-transition-open;
    }

+    table {
+      border-spacing: 0;
+      width: auto;
+      overflow: auto;
+      display: block;
+      background-color: $code-background-color;
+
+      [theme='dark'] & {
+        background-color: $code-background-color-dark;
+      }
+
+      td {
+        vertical-align: top;
+        padding: 0;
+      }
+
+      pre {
+        padding: 0.25rem;
+        outline-offset: -1px;
+        @include border-radius(0);
+      }
+
+      /* lineNumbersInTable=false */
+      .ln {
+        min-width: 1.25rem;
+      }
+
+      // ========== lineNumbersInTable ========== //
+      // line numbers
+      .lntd:first-child {
+        min-width: 1.6rem;
+        text-align: right;
+
+        pre {
+          padding-right: 0;
+        }
+      }
+      // code content
+      .lntd:last-child {
+        width: 100%;
+
+        pre {
+          padding-left: 0.5rem;
+          padding-right: 0.5rem;
+        }
+        code {
+          width: 100%;
+        }
+      }
+      // ========== lineNumbersInTable ========== //
+    }
+
    &.open {
      .code-header {
-        background: darken($code-background-color, 3%);
+        background-color: darken($code-background-color, 6%);
+        @include border-radius($global-border-radius $global-border-radius 0 0);

-        [theme=dark] & {
-          background: darken($code-background-color-dark, 3%);
+        [theme='dark'] & {
+          background-color: darken($code-background-color-dark, 3%);
        }
      }

      .table-wrapper {
-        max-height: $MAX_LENGTH;
+        max-height: 100%;
        @include details-transition-close;
      }

@@ -184,203 +224,127 @@ code, pre, .highlight table, .highlight tr, .highlight td {
        display: none;
      }

+      .edit,
      .copy {
        display: inline;
      }
    }
  }

-  /* Comment */  .c,
-  /* CommentHashbang */  .ch,
-  /* CommentMultiline */  .cm,
-  /* CommentSingle */  .c1,
-  /* CommentSpecial */  .cs,
-  /* CommentPreproc */  .cp,
-  /* CommentPreprocFile */  .cpf { font-style: italic }
-  /* GenericUnderline */  .gl { text-decoration: underline }
+  /* LineHighlight */
+  .hl {
+    display: block;
+    background-color: $code-hightlight-color;
+    box-shadow: -0.5rem 0 0 $code-hightlight-color, 0.5rem 0 0 $code-hightlight-color;

-  @each $class, $color in $code-highlight-color-map {
-    .#{$class} { color: $color; }
-  }
-
-  [theme=dark] & {
-    @each $class, $color in $code-highlight-color-map-dark {
-      .#{$class} { color: $color; }
+    [theme='dark'] & {
+      background-color: $code-hightlight-color-dark;
+      box-shadow: -0.5rem 0 0 $code-hightlight-color-dark, 0.5rem 0 0 $code-hightlight-color-dark;
    }
  }
+  /* GenericUnderline */
+  .gl {
+    text-decoration: underline;
+  }
+  /* GenericStrong */
+  .gs {
+    font-weight: bold;
+  }
+  /* GenericEmph */
+  .ge {
+    font-style: italic;
+  }
+  /* lineNumbersInTable=false */
+  .ln {
+    padding-right: 0.5rem;
+    display: inline-block;
+    min-width: 1.1rem;
+    text-align: right;
+  }
+  /* LineNumbers */
+  .lnt,
+  .ln {
+    color: $global-font-secondary-color;
+
+    [theme='dark'] & {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+
+  // ========== Higtlight Color ========== //
+
+  /* Error */
+  .err {
+    font-style: italic;
+    border-bottom: 1px dotted $code-error-color;
+  }
+  /* GenericDeleted */
+  .gd {
+    background-color: #ffebe9;
+
+    [theme='dark'] & {
+      background-color: #78191b;
+    }
+  }
+  /* GenericInserted */
+  .gi {
+    background-color: #dafbe1;
+
+    [theme='dark'] & {
+      background-color: #1b4721;
+    }
+  }
+
+  @each $class, $color in $code-highlight-color-map {
+    .#{$class} {
+      color: $color;
+    }
+  }
+
+  [theme='dark'] & {
+    @each $class, $color in $code-highlight-color-map-dark {
+      .#{$class} {
+        color: $color;
+      }
+    }
+  }
+  // ========== Higtlight Color ========== //
 }

+// gist shortcode
 .gist {
-  .gist-file, .gist-data, .gist-meta {
+  .gist-file,
+  .gist-data,
+  .gist-meta {
    border: none;
  }

+  .gist-data {
+    background-color: transparent;
+  }
+
  .gist-meta {
-    padding: .4rem .8rem;
+    padding: 0.4rem 0.8rem;
+    @include link(false, false);
    background-color: darken($code-background-color, 5%);

-    @include link(false, false);
-
-    [theme=dark] & {
+    [theme='dark'] & {
      background-color: darken($code-background-color-dark, 5%);
    }
  }

-  [theme=dark] & {
-    // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
-    .highlight {
-      background: #141414;
-    }
-    .blob-num,
-    .blob-code-inner,
+  .table-wrapper {
    .highlight,
-    .pl-enm,
-    .pl-ko,
-    .pl-mo,
-    .pl-mp1 .pl-sf,
-    .pl-ms,
-    .pl-pdc1,
-    .pl-scp,
-    .pl-smc,
-    .pl-som,
-    .pl-va,
-    .pl-vpf,
-    .pl-vpu,
-    .pl-mdr {
-        color: #aab1bf;
-    }
-    .pl-mb,
-    .pl-pdb {
-        font-weight: 700;
-    }
-    .pl-c,
-    .pl-c span,
-    .pl-pdc {
-        color: #5b6270;
-        font-style: italic;
-    }
-    .pl-sr .pl-cce {
-        color: #56b5c2;
-        font-weight: 400;
-    }
-    .pl-ef,
-    .pl-en,
-    .pl-enf,
-    .pl-eoai,
-    .pl-kos,
-    .pl-mh .pl-pdh,
-    .pl-mr {
-        color: #61afef;
-    }
-    .pl-ens,
-    .pl-vi {
-        color: #be5046;
-    }
-    .pl-enti,
-    .pl-mai .pl-sf,
-    .pl-ml,
-    .pl-sf,
-    .pl-sr,
-    .pl-sr .pl-sra,
-    .pl-src,
-    .pl-st,
-    .pl-vo {
-        color: #56b5c2;
-    }
-    .pl-eoi,
-    .pl-mri,
-    .pl-pds,
-    .pl-pse .pl-s1,
-    .pl-s,
-    .pl-s1 {
-        color: #97c279;
-    }
-    .pl-k,
-    .pl-kolp,
-    .pl-mc,
-    .pl-pde {
-        color: #c578dd;
-    }
-    .pl-mi,
-    .pl-pdi {
-        color: #c578dd;
-        font-style: italic;
-    }
-    .pl-mp,
-    .pl-stp {
-        color: #818896;
-    }
-    .pl-mdh,
-    .pl-mdi,
-    .pl-mdr {
-        font-weight: 400;
-    }
-    .pl-mdht,
-    .pl-mi1 {
-        color: #97c279;
-        background: #020;
-    }
-    .pl-md,
-    .pl-mdhf {
-        color: #df6b75;
-        background: #200;
-    }
-    .pl-corl {
-        color: #df6b75;
-        text-decoration: underline;
-    }
-    .pl-ib {
-        background: #df6b75;
-    }
-    .pl-ii {
-        background: #e0c184;
-        color: #fff;
-    }
-    .pl-iu {
-        background: #e05151;
-    }
-    .pl-ms1 {
-        color: #aab1bf;
-        background: #373b41;
-    }
-    .pl-c1,
-    .pl-cn,
-    .pl-e,
-    .pl-eoa,
-    .pl-eoac,
-    .pl-eoac .pl-pde,
-    .pl-kou,
-    .pl-mm,
-    .pl-mp .pl-s3,
-    .pl-mq,
-    .pl-s3,
-    .pl-sok,
-    .pl-sv,
-    .pl-mb {
-        color: #d19965;
-    }
-    .pl-enc,
-    .pl-entc,
-    .pl-pse .pl-s2,
-    .pl-s2,
-    .pl-sc,
-    .pl-smp,
-    .pl-sr .pl-sre,
-    .pl-stj,
-    .pl-v,
-    .pl-pdb {
-        color: #e4bf7a;
-    }
-    .pl-ent,
-    .pl-entl,
-    .pl-entm,
-    .pl-mh,
-    .pl-pdv,
-    .pl-smi,
-    .pl-sol,
-    .pl-mdh,
-    .pl-mdi {
-        color: #df6b75;
+    &::-webkit-scrollbar {
+      background-color: #f6f8fa;
+
+      [theme='dark'] & {
+        background-color: #2d333b;
+      }
    }
  }
+
+  [theme='dark'] & {
+    @import './github-dark-dimmed';
+  }
 }
@@ -5,7 +5,7 @@
    border-bottom: 1px solid $global-border-color;
    padding: 1rem 0 0.3rem;

-    [theme=dark] & {
+    [theme='dark'] & {
      border-bottom: 1px solid $global-border-color-dark;
    }

@@ -17,7 +17,7 @@
        font-size: 0.8em;
        color: $global-font-secondary-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $global-font-secondary-color-dark;
        }

@@ -28,7 +28,7 @@
        font-size: 0.8em;
        color: $global-font-secondary-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $global-font-secondary-color-dark;
        }

@@ -0,0 +1,169 @@
+/**
+ * Theme: GitHub Dark Dimmed
+ * Description: Dark Dimmed theme as seen on github.com
+ * Author: github.com
+ * Maintainer: https://github.com/Lruihao/FixIt
+ * Updated: 2022-03-01
+ */
+& {
+  --color-fg-default: #adbac7;
+  --color-prettylights-syntax-comment: #768390;
+  --color-prettylights-syntax-constant: #6cb6ff;
+  --color-prettylights-syntax-entity: #dcbdfb;
+  --color-prettylights-syntax-storage-modifier-import: #adbac7;
+  --color-prettylights-syntax-entity-tag: #8ddb8c;
+  --color-prettylights-syntax-keyword: #f47067;
+  --color-prettylights-syntax-string: #96d0ff;
+  --color-prettylights-syntax-variable: #f69d50;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+  --color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+  --color-prettylights-syntax-invalid-illegal-bg: #922323;
+  --color-prettylights-syntax-carriage-return-text: #cdd9e5;
+  --color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+  --color-prettylights-syntax-string-regexp: #8ddb8c;
+  --color-prettylights-syntax-markup-list: #eac55f;
+  --color-prettylights-syntax-markup-heading: #316dca;
+  --color-prettylights-syntax-markup-italic: #adbac7;
+  --color-prettylights-syntax-markup-bold: #adbac7;
+  --color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+  --color-prettylights-syntax-markup-deleted-bg: #78191b;
+  --color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+  --color-prettylights-syntax-markup-inserted-bg: #1b4721;
+  --color-prettylights-syntax-markup-changed-text: #ffddb0;
+  --color-prettylights-syntax-markup-changed-bg: #682d0f;
+  --color-prettylights-syntax-markup-ignored-text: #adbac7;
+  --color-prettylights-syntax-markup-ignored-bg: #255ab2;
+  --color-prettylights-syntax-meta-diff-range: #dcbdfb;
+  --color-prettylights-syntax-brackethighlighter-angle: #768390;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
+  --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+
+  .blob-num,
+  .blob-code-inner {
+    color: val(--color-fg-default);
+  }
+
+  .pl-c /* comment, punctuation.definition.comment, string.comment */ {
+    color: var(--color-prettylights-syntax-comment);
+  }
+
+  .pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
+  .pl-s .pl-v /* string variable */ {
+    color: var(--color-prettylights-syntax-constant);
+  }
+
+  .pl-e /* entity */,
+  .pl-en /* entity.name */ {
+    color: var(--color-prettylights-syntax-entity);
+  }
+
+  .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
+  .pl-s .pl-s1 /* string source */ {
+    color: var(--color-prettylights-syntax-storage-modifier-import);
+  }
+
+  .pl-ent /* entity.name.tag, markup.quote */ {
+    color: var(--color-prettylights-syntax-entity-tag);
+  }
+
+  .pl-k /* keyword, storage, storage.type */ {
+    color: var(--color-prettylights-syntax-keyword);
+  }
+
+  .pl-s /* string */,
+  .pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
+  .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
+  .pl-sr /* string.regexp */,
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */,
+  .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
+  .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
+    color: var(--color-prettylights-syntax-string);
+  }
+
+  .pl-v /* variable */,
+  .pl-smw /* sublimelinter.mark.warning */ {
+    color: var(--color-prettylights-syntax-variable);
+  }
+
+  .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
+    color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
+  }
+
+  .pl-ii /* invalid.illegal */ {
+    color: var(--color-prettylights-syntax-invalid-illegal-text);
+    background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+  }
+
+  .pl-c2 /* carriage-return */ {
+    color: var(--color-prettylights-syntax-carriage-return-text);
+    background-color: var(--color-prettylights-syntax-carriage-return-bg);
+  }
+
+  .pl-c2::before /* carriage-return */ {
+    content: '^M';
+  }
+
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-string-regexp);
+  }
+
+  .pl-ml /* markup.list */ {
+    color: var(--color-prettylights-syntax-markup-list);
+  }
+
+  .pl-mh /* markup.heading */,
+  .pl-mh .pl-en /* markup.heading entity.name */,
+  .pl-ms /* meta.separator */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-markup-heading);
+  }
+
+  .pl-mi /* markup.italic */ {
+    font-style: italic;
+    color: var(--color-prettylights-syntax-markup-italic);
+  }
+
+  .pl-mb /* markup.bold */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-markup-bold);
+  }
+
+  .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
+    color: var(--color-prettylights-syntax-markup-deleted-text);
+    background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+  }
+
+  .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
+    color: var(--color-prettylights-syntax-markup-inserted-text);
+    background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+  }
+
+  .pl-mc /* markup.changed, punctuation.definition.changed */ {
+    color: var(--color-prettylights-syntax-markup-changed-text);
+    background-color: var(--color-prettylights-syntax-markup-changed-bg);
+  }
+
+  .pl-mi2 /* markup.ignored, markup.untracked */ {
+    color: var(--color-prettylights-syntax-markup-ignored-text);
+    background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+  }
+
+  .pl-mdr /* meta.diff.range */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-meta-diff-range);
+  }
+
+  .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
+    color: var(--color-prettylights-syntax-brackethighlighter-angle);
+  }
+
+  .pl-sg /* sublimelinter.gutter-mark */ {
+    color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+  }
+
+  .pl-corl /* constant.other.reference.link, string.other.link */ {
+    text-decoration: underline;
+    color: var(--color-prettylights-syntax-constant-other-reference-link);
+  }
+}
@@ -1,4 +0,0 @@
-.mapbox {
-  margin: .5rem 0;
-  padding: .5rem 0;
-}
@@ -1,3 +0,0 @@
-meting-js {
-  margin: .5rem 0;
-}
@@ -10,16 +10,16 @@

    ul {
      text-indent: -0.85rem;
-      padding-left: .8rem;
+      padding-left: 0.8rem;
      list-style: none;

      a:first-child::before {
-        content: "|";
+        content: '|';
        font-weight: bolder;
-        margin-right: .5rem;
+        margin-right: 0.5rem;
        color: $single-link-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $single-link-color-dark;
        }
      }
@@ -37,7 +37,7 @@
      color: $global-font-secondary-color;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      background: $code-background-color-dark;

      rt {
@@ -49,29 +49,29 @@

 #toc-auto {
  display: block;
-  position: absolute;
-  width: $MAX_LENGTH;
-  max-width: 0;
-  padding: 0 .8rem;
-  border-left: 4px solid $global-border-color;
+  position: sticky;
+  top: $header-height + 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
  @include overflow-wrap(break-word);
  box-sizing: border-box;
-  top: 10rem;
-  left: 0;
  visibility: hidden;

-  [header-desktop=normal] & {
-    top: 5rem;
-  }
-
  @include blur;

-  [theme=dark] & {
-    border-left-color: $global-border-color-dark;
-  }
-
  .toc-title {
-    margin: .8rem 0;
+    margin: 0.5rem 0;
+
+    &::before {
+      content: '|';
+      font-weight: bolder;
+      margin-right: 0.5rem;
+      color: $global-border-color;
+
+      [theme='dark'] & {
+        color: $global-border-color-dark;
+      }
+    }
  }

  .toc-content {
@@ -80,7 +80,7 @@
    }

    > nav > ul {
-      margin: .625rem 0;
+      margin: 0.625rem 0;
    }

    ul {
@@ -97,14 +97,14 @@
      font-weight: bold;
      color: $single-link-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $single-link-color-dark;
      }

      &::before {
        color: $single-link-hover-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $single-link-hover-color-dark;
        }
      }
@@ -114,9 +114,9 @@

 #toc-static {
  display: none;
-  margin: .8rem 0;
+  margin: 0.8rem 0;

-  &[kept=true] {
+  &[kept='true'] {
    display: block;
  }

@@ -124,10 +124,10 @@
    display: flex;
    justify-content: space-between;
    line-height: 2em;
-    padding: 0 .75rem;
+    padding: 0 0.75rem;
    background: darken($code-background-color, 6%);

-    [theme=dark] & {
+    [theme='dark'] & {
      background: darken($code-background-color-dark, 6%);
    }
  }
@@ -137,10 +137,10 @@

    > nav > ul {
      margin: 0;
-      padding: .4rem 1rem .4rem 1.8rem;
+      padding: 0.4rem 1rem 0.4rem 1.8rem;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      background-color: $code-background-color-dark;
    }
  }
@@ -149,7 +149,7 @@
    .toc-title {
      background: darken($code-background-color, 3%);

-      [theme=dark] & {
+      [theme='dark'] & {
        background: darken($code-background-color-dark, 3%);
      }
    }
@@ -1,17 +1,19 @@
 .admonition {
  position: relative;
  margin: 1rem 0;
-  padding: 0 .75rem;
+  padding: 0 0.75rem;
  background-color: map-get($admonition-background-color-map, 'note');
-  border-left: .25rem solid map-get($admonition-color-map, 'note');
+  border-left: 0.25rem solid map-get($admonition-color-map, 'note');
  overflow: auto;
+  @include border-radius($global-border-radius);

  .admonition-title {
    font-weight: bold;
    margin: 0 -0.75rem;
-    padding: .25rem 1.8rem;
+    padding: 0.25rem 1.8rem;
    border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
    background-color: opacify(map-get($admonition-background-color-map, 'note'), 0.15);
+    @include border-radius(0);
  }

  &.open .admonition-title {
@@ -19,21 +21,21 @@
  }

  .admonition-content {
-    padding: .5rem 0;
+    padding: 0.5rem 0;
  }

  i.icon {
    font-size: 0.85rem;
    color: map-get($admonition-color-map, 'note');
    position: absolute;
-    top: .6rem;
-    left: .4rem;
+    top: 0.6rem;
+    left: 0.4rem;
  }

  i.details-icon {
    position: absolute;
-    top: .6rem;
-    right: .3rem;
+    top: 0.6rem;
+    right: 0.3rem;
  }

  @each $type, $color in $admonition-color-map {
@@ -62,6 +64,6 @@
  }

  &:last-child {
-    margin-bottom: .75rem;
+    margin-bottom: 0.75rem;
  }
 }
@@ -0,0 +1,99 @@
+/**
+ * Card link style
+ * @author  @Lruihao https://lruihao.cn
+ */
+
+.card-link {
+  position: relative;
+  display: block;
+  margin: 0.5rem auto;
+  box-sizing: border-box;
+  width: 400px;
+  max-width: 100%;
+  overflow: hidden;
+  text-decoration: none;
+  border: none;
+  @include border-radius(0.75rem);
+}
+
+.cl- {
+  &backdrop {
+    position: absolute;
+    top: 0.75rem;
+    bottom: 0.75rem;
+    left: 0;
+    right: 0;
+    background-image: url('/images/fixit.svg');
+    background-repeat: no-repeat;
+    filter: blur(0.15rem);
+    opacity: 0.5;
+    background-size: contain;
+    background-position: center;
+  }
+
+  &content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    background-color: rgba(245, 245, 245, 0.88);
+  }
+
+  &text {
+    overflow: hidden;
+  }
+
+  &title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    max-height: calc(1rem * 1.25 * 2);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.25;
+    color: $global-font-color;
+  }
+
+  &meta {
+    display: flex;
+    align-items: center;
+    margin-top: 0.25rem;
+    font-size: 0.825rem;
+    color: $global-font-secondary-color;
+  }
+
+  &icon-link {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    margin-right: 0.25rem;
+  }
+
+  &url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &icon-globe {
+    width: 4rem;
+    height: 4rem;
+    flex-shrink: 0;
+    margin-left: 0.25rem;
+  }
+
+  [theme='dark'] & {
+    &content {
+      background-color: rgba(61, 62, 65, 0.88);
+    }
+
+    &title {
+      color: $global-font-color-dark;
+    }
+
+    &meta {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+}
@@ -0,0 +1,42 @@
+.blockquote-center {
+  border-left: none;
+  margin: 40px 0;
+  padding: 0;
+  position: relative;
+  text-align: center;
+
+  &::after,
+  &::before {
+    left: 0;
+    line-height: 1;
+    opacity: 0.6;
+    position: absolute;
+    width: 100%;
+  }
+
+  &::before {
+    border-top: 1px solid $global-border-color;
+    text-align: left;
+    top: -20px;
+    content: '\f10d';
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+
+    [theme='dark'] & {
+      border-top-color: $global-border-color-dark;
+    }
+  }
+
+  &::after {
+    border-bottom: 1px solid $global-border-color;
+    bottom: -20px;
+    text-align: right;
+    content: '\f10e';
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+
+    [theme='dark'] & {
+      border-bottom-color: $global-border-color-dark;
+    }
+  }
+}
@@ -1,4 +1,4 @@
 .echarts {
-  margin: .5rem 0;
+  margin: 0.5rem 0;
  text-align: center;
 }
@@ -0,0 +1,7 @@
+@import '_admonition';
+@import '_bilibili';
+@import '_cardlink';
+@import '_center-quote';
+@import '_echarts';
+@import '_instagram';
+@import '_mapbox';
@@ -1,5 +1,5 @@
 iframe.instagram-media {
-  [theme=dark] & {
+  [theme='dark'] & {
    border: none !important;
  }
 }
@@ -0,0 +1,5 @@
+.mapbox {
+  margin: 0.5rem 0;
+  padding: 0.5rem 0;
+  @include border-radius($global-border-radius);
+}
@@ -9,27 +9,27 @@ $global-font-size: 16px;
 $global-font-weight: 400;
 $global-line-height: 1.5rem;

-// Color of the theme logo
-$global-logo-icon-color: Tomato !default;
+// Radius of the border
+$global-border-radius: 5px !default;

 // Color of the background
-$global-background-color: #fff !default;
-$global-background-color-dark: #292a2d !default;
+$global-background-color: #ffffff !default;
+$global-background-color-dark: #292a2e !default;

 // Color of the text
 $global-font-color: #161209 !default;
-$global-font-color-dark: #a9a9b3 !default;
+$global-font-color-dark: #b1b1ba !default;

 // Color of the secondary text
-$global-font-secondary-color: #a9a9b3 !default;
-$global-font-secondary-color-dark: #5d5d5f !default;
+$global-font-secondary-color: #b1b1ba !default;
+$global-font-secondary-color-dark: #909092 !default;

 // Color of the link
 $global-link-color: #161209 !default;
-$global-link-color-dark: #a9a9b3 !default;
+$global-link-color-dark: #b1b1ba !default;

 // Color of the hover link
-$global-link-hover-color: #2d96bd !default;
+$global-link-hover-color: #2983bb !default; // 潮蓝
 $global-link-hover-color-dark: #fff !default;

 // Color of the border
@@ -42,7 +42,7 @@ $global-border-color-dark: #363636 !default;
 $scrollbar-color: #87878d !default;

 // Color of the hover scrollbar
-$scrollbar-hover-color: #a9a9b3 !default;
+$scrollbar-hover-color: #b1b1ba !default;
 // ========== Scrollbar ========== //

 // ========== Selection ========== //
@@ -78,12 +78,12 @@ $toc-title-font-size: 1.2rem !default;
 $toc-content-font-size: 1rem !default;

 // Color of the single link
-$single-link-color: #2d96bd !default;
-$single-link-color-dark: #55bde2 !default;
+$single-link-color: #2376b7 !default; // 花青
+$single-link-color-dark: #1781b5 !default; // 釉蓝

 // Color of the hover single link
-$single-link-hover-color: #ef3982 !default;
-$single-link-hover-color-dark: #bdebfc !default;
+$single-link-hover-color: #ea517f !default; // 莲瓣红
+$single-link-hover-color-dark: #619ac3 !default; // 羽扇豆蓝

 // Color of the table background
 $table-background-color: #fff !default;
@@ -94,14 +94,14 @@ $table-thead-color: #ededed !default;
 $table-thead-color-dark: #20252b !default;

 // Color of the blockquote
-$blockquote-color: #6bd6fd !default;
-$blockquote-color-dark: #59c5ec !default;
+$blockquote-color: #bbc2c8 !default; 
+$blockquote-color-dark: #808992 !default;
 // ========== Single Content ========== //

 // ========== Pagination ========== //
 // Color of the link in pagination
-$pagination-link-color: #2d96bd !default;
-$pagination-link-color-dark: #a9a9b3 !default;
+$pagination-link-color: #bfbfbf !default;
+$pagination-link-color-dark: #b1b1ba !default;

 // Color of the hover link in pagination
 $pagination-link-hover-color: #000 !default;
@@ -110,18 +110,24 @@ $pagination-link-hover-color-dark: #fff !default;

 // ========== Code ========== //
 // Color of the code
-$code-color: #E74C3C !default;
-$code-color-dark: #E5BF78 !default;
+$code-color: #24292f !default;
+$code-color-dark: #adbac7 !default;

 // Color of the code background
-$code-background-color: #f5f5f5 !default;
-$code-background-color-dark: #272C34 !default;
+$code-background-color: #f6f8fa !default;
+$code-background-color-dark: #2d333b !default;
+
+$code-error-color: #dc3545 !default;
+
+// Color of the hightlight code
+$code-hightlight-color: #fff8c5 !default;
+$code-hightlight-color-dark: rgba(174, 124, 20, 0.15) !default;

 $code-info-color: #9c9c9c !default;
 $code-info-color-dark: #b1b0b0 !default;

 // Font size of the code
-$code-font-size: .875rem !default;
+$code-font-size: 0.875rem !default;

 // Font family of the code
 $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-font-family !default;
@@ -176,159 +182,165 @@ $code-type-map: (
  language-typescript: 'TypeScript',
  language-vue: 'Vue',
  language-yml: 'YAML',
-  language-yaml: 'YAML',
+  language-yaml: 'YAML'
 ) !default;

 // Color map of the code highlight
 $code-highlight-color-map: (
-  /* Parentheses */ 'p': #a9a9b3,
-  /* Keyword */ 'k': #b501a9,
-  /* KeywordConstant */ 'kc': #b501a9,
-  /* KeywordDeclaration */ 'kd': #b501a9,
-  /* KeywordNamespace */ 'kn': #b501a9,
-  /* KeywordPseudo */ 'kp': #b501a9,
-  /* KeywordReserved */ 'kr': #b501a9,
-  /* KeywordType */ 'kt': #b501a9,
-  /* Name */ 'n': #333333,
-  /* NameAttribute */ 'na': #2b77fa,
-  /* NameBuiltin */ 'nb': #f74840,
-  /* NameBuiltinPseudo */ 'bp': #f74840,
-  /* NameClass */ 'nc': #cb8100,
-  /* NameConstant */ 'no': #2b77fa,
-  /* NameDecorator */ 'nd': #0086c1,
-  /* NameEntity */ 'ni': #2b77fa,
-  /* NameException */ 'ne': #2b77fa,
-  /* NameFunction */ 'nf': #2b77fa,
-  /* NameFunctionMagic */ 'fm': #1ccad6,
-  /* NameLabel */ 'nl': #2b77fa,
-  /* NameNamespace */ 'nn': #2b77fa,
-  /* NameOther */ 'nx': #333333,
-  /* NameProperty */ 'py': #2b77fa,
-  /* NameTag */ 'nt': #2b77fa,
-  /* NameVariable */ 'nv': #2b77fa,
-  /* NameVariableClass */ 'vc': #2b77fa,
-  /* NameVariableGlobal */ 'vg': #2b77fa,
-  /* NameVariableInstance */ 'vi': #2b77fa,
-  /* NameVariableMagic */ 'vm': #2b77fa,
-  /* Literal */ 'l': #2aa198,
-  /* LiteralDate */ 'ld': #2aa198,
-  /* LiteralString */ 's': #24a443,
-  /* LiteralStringAffix */ 'sa': #24a443,
-  /* LiteralStringBacktick */ 'sb': #24a443,
-  /* LiteralStringChar */ 'sc': #24a443,
-  /* LiteralStringDelimiter */ 'dl': #24a443,
-  /* LiteralStringDoc */ 'sd': #24a443,
-  /* LiteralStringDouble */ 's2': #24a443,
-  /* LiteralStringEscape */ 'se': #24a443,
-  /* LiteralStringHeredoc */ 'sh': #24a443,
-  /* LiteralStringInterpol */ 'si': #24a443,
-  /* LiteralStringOther */ 'sx': #24a443,
-  /* LiteralStringRegex */ 'sr': #24a443,
-  /* LiteralStringSingle */ 's1': #24a443,
-  /* LiteralStringSymbol */ 'ss': #24a443,
-  /* LiteralNumber */ 'm': #e2893c,
-  /* LiteralNumberBin */ 'mb': #e2893c,
-  /* LiteralNumberFloat */ 'mf': #e2893c,
-  /* LiteralNumberHex */ 'mh': #e2893c,
-  /* LiteralNumberInteger */ 'mi': #e2893c,
-  /* LiteralNumberIntegerLong */ 'il': #e2893c,
-  /* LiteralNumberOct */ 'mo': #e2893c,
-  /* Operator */ 'o': #f19b04,
-  /* OperatorWord */ 'ow': #b501a9,
-  /* Comment */ 'c': #a0a1a8,
-  /* CommentHashbang */ 'ch': #a0a1a8,
-  /* CommentMultiline */ 'cm': #a0a1a8,
-  /* CommentSingle */ 'c1': #a0a1a8,
-  /* CommentSpecial */ 'cs': #a0a1a8,
-  /* CommentPreproc */ 'cp': #a0a1a8,
-  /* CommentPreprocFile */ 'cpf': #a0a1a8,
-  /* Generic */ 'g': #e72d40,
-  /* GenericDeleted */ 'gd': #e72d40,
-  /* GenericEmph */ 'ge': #e72d40,
-  /* GenericError */ 'gr': #e72d40,
-  /* GenericHeading */ 'gh': #e72d40,
-  /* GenericInserted */ 'gi': #e72d40,
-  /* GenericOutput */ 'go': #e72d40,
-  /* GenericPrompt */ 'gp': #e72d40,
-  /* GenericStrong */ 'gs': #e72d40,
-  /* GenericSubheading */ 'gu': #e72d40,
-  /* GenericTraceback */ 'gt': #e72d40,
-  /* TextWhitespace */ 'w': #bbbbbb,
+  /* Error */ 'err': $code-error-color,
+  /* Keyword */ 'k': #cf222e,
+  /* KeywordConstant */ 'kc': #0550ae,
+  /* KeywordDeclaration */ 'kd': #cf222e,
+  /* KeywordNamespace */ 'kn': #cf222e,
+  /* KeywordPseudo */ 'kp': #cf222e,
+  /* KeywordReserved */ 'kr': #cf222e,
+  /* KeywordType */ 'kt': #cf222e,
+  /* Name */ 'n': $code-color,
+  /* NameAttribute */ 'na': #0550ae,
+  /* NameBuiltin */ 'nb': #0550ae,
+  /* NameBuiltinPseudo */ 'bp': $code-color,
+  /* NameClass */ 'nc': #8250df,
+  /* NameConstant */ 'no': #cf222e,
+  /* NameDecorator */ 'nd': #8250df,
+  /* NameEntity */ 'ni': #0550ae,
+  /* NameException */ 'ne': #0550ae,
+  /* NameFunction */ 'nf': #0550ae,
+  /* NameFunctionMagic */ 'fm': #0550ae,
+  /* NameLabel */ 'nl': #0550ae,
+  /* NameNamespace */ 'nn': #8250df,
+  /* NameOther */ 'nx': #0550ae,
+  /* NameProperty */ 'py': #0550ae,
+  /* NameTag */ 'nt': #116329,
+  /* NameVariable */ 'nv': #953800,
+  /* NameVariableClass */ 'vc': #0550ae,
+  /* NameVariableGlobal */ 'vg': #0550ae,
+  /* NameVariableInstance */ 'vi': #0550ae,
+  /* NameVariableMagic */ 'vm': #0550ae,
+  /* Literal */ 'l': #0550ae,
+  /* LiteralDate */ 'ld': #0a3069,
+  /* LiteralString */ 's': #0a3069,
+  /* LiteralStringAffix */ 'sa': #0a3069,
+  /* LiteralStringBacktick */ 'sb': #0a3069,
+  /* LiteralStringChar */ 'sc': #0a3069,
+  /* LiteralStringDelimiter */ 'dl': #0a3069,
+  /* LiteralStringDoc */ 'sd': #0a3069,
+  /* LiteralStringDouble */ 's2': #0a3069,
+  /* LiteralStringEscape */ 'se': #0a3069,
+  /* LiteralStringHeredoc */ 'sh': #0a3069,
+  /* LiteralStringInterpol */ 'si': #0a3069,
+  /* LiteralStringOther */ 'sx': #0a3069,
+  /* LiteralStringRegex */ 'sr': #0a3069,
+  /* LiteralStringSingle */ 's1': #0a3069,
+  /* LiteralStringSymbol */ 'ss': #0a3069,
+  /* LiteralNumber */ 'm': #0550ae,
+  /* LiteralNumberBin */ 'mb': #0550ae,
+  /* LiteralNumberFloat */ 'mf': #0550ae,
+  /* LiteralNumberHex */ 'mh': #0550ae,
+  /* LiteralNumberInteger */ 'mi': #0550ae,
+  /* LiteralNumberIntegerLong */ 'il': #0550ae,
+  /* LiteralNumberOct */ 'mo': #0550ae,
+  /* Operator */ 'o': #cf222e,
+  /* OperatorWord */ 'ow': #cf222e,
+  /* Punctuation */ 'p': $code-color,
+  /* Comment */ 'c': #6e7781,
+  /* CommentHashbang */ 'ch': #6e7781,
+  /* CommentMultiline */ 'cm': #6e7781,
+  /* CommentSingle */ 'c1': #6e7781,
+  /* CommentSpecial */ 'cs': #6e7781,
+  /* CommentPreproc */ 'cp': #0550ae,
+  /* CommentPreprocFile */ 'cpf': #6e7781,
+  /* Generic */ 'g': $code-color,
+  /* GenericDeleted */ 'gd': #82071e,
+  /* GenericEmph */ 'ge': $code-color,
+  /* GenericError */ 'gr': $code-error-color,
+  /* GenericHeading */ 'gh': $code-color,
+  /* GenericInserted */ 'gi': #116329,
+  /* GenericOutput */ 'go': $code-color,
+  /* GenericPrompt */ 'gp': $code-color,
+  /* GenericStrong */ 'gs': $code-color,
+  /* GenericSubheading */ 'gu': $code-color,
+  /* GenericTraceback */ 'gt': $code-error-color,
+  /* GenericUnderline */ 'gl': $code-color,
+  /* TextWhitespace */ 'w': $code-color,
+  /* Other */ 'x': $code-color
 ) !default;
 $code-highlight-color-map-dark: (
-  /* Parentheses */ 'p': #a9a9b3,
-  /* Keyword */ 'k': #d371e3,
-  /* KeywordConstant */ 'kc': #d371e3,
-  /* KeywordDeclaration */ 'kd': #d371e3,
-  /* KeywordNamespace */ 'kn': #d371e3,
-  /* KeywordPseudo */ 'kp': #d371e3,
-  /* KeywordReserved */ 'kr': #d371e3,
-  /* KeywordType */ 'kt': #d371e3,
-  /* Name */ 'n': #a9b2c0,
-  /* NameAttribute */ 'na': #41b0f5,
-  /* NameBuiltin */ 'nb': #19b9c4,
-  /* NameBuiltinPseudo */ 'bp': #ecbf6f,
-  /* NameClass */ 'nc': #ecbf6f,
-  /* NameConstant */ 'no': #41b0f5,
-  /* NameDecorator */ 'nd': #ecbf6f,
-  /* NameEntity */ 'ni': #41b0f5,
-  /* NameException */ 'ne': #41b0f5,
-  /* NameFunction */ 'nf': #41b0f5,
-  /* NameFunctionMagic */ 'fm': #19b9c4,
-  /* NameLabel */ 'nl': #41b0f5,
-  /* NameNamespace */ 'nn': #41b0f5,
-  /* NameOther */ 'nx': #a9a9b3,
-  /* NameProperty */ 'py': #41b0f5,
-  /* NameTag */ 'nt': #41b0f5,
-  /* NameVariable */ 'nv': #41b0f5,
-  /* NameVariableClass */ 'vc': #41b0f5,
-  /* NameVariableGlobal */ 'vg': #41b0f5,
-  /* NameVariableInstance */ 'vi': #41b0f5,
-  /* NameVariableMagic */ 'vm': #41b0f5,
-  /* Literal */ 'l': #2aa198,
-  /* LiteralDate */ 'ld': #2aa198,
-  /* LiteralString */ 's': #8cc570,
-  /* LiteralStringAffix */ 'sa': #8cc570,
-  /* LiteralStringBacktick */ 'sb': #8cc570,
-  /* LiteralStringChar */ 'sc': #8cc570,
-  /* LiteralStringDelimiter */ 'dl': #8cc570,
-  /* LiteralStringDoc */ 'sd': #8cc570,
-  /* LiteralStringDouble */ 's2': #8cc570,
-  /* LiteralStringEscape */ 'se': #8cc570,
-  /* LiteralStringHeredoc */ 'sh': #8cc570,
-  /* LiteralStringInterpol */ 'si': #8cc570,
-  /* LiteralStringOther */ 'sx': #8cc570,
-  /* LiteralStringRegex */ 'sr': #8cc570,
-  /* LiteralStringSingle */ 's1': #8cc570,
-  /* LiteralStringSymbol */ 'ss': #8cc570,
-  /* LiteralNumber */ 'm': #db985c,
-  /* LiteralNumberBin */ 'mb': #db985c,
-  /* LiteralNumberFloat */ 'mf': #db985c,
-  /* LiteralNumberHex */ 'mh': #db985c,
-  /* LiteralNumberInteger */ 'mi': #db985c,
-  /* LiteralNumberIntegerLong */ 'il': #db985c,
-  /* LiteralNumberOct */ 'mo': #db985c,
-  /* Operator */ 'o': #ecbf6f,
-  /* OperatorWord */ 'ow': #d371e3,
-  /* Comment */ 'c': #7e848f,
-  /* CommentHashbang */ 'ch': #7e848f,
-  /* CommentMultiline */ 'cm': #7e848f,
-  /* CommentSingle */ 'c1': #7e848f,
-  /* CommentSpecial */ 'cs': #7e848f,
-  /* CommentPreproc */ 'cp': #7e848f,
-  /* CommentPreprocFile */ 'cpf': #7e848f,
-  /* Generic */ 'g': #f16372,
-  /* GenericDeleted */ 'gd': #f16372,
-  /* GenericEmph */ 'ge': #f16372,
-  /* GenericError */ 'gr': #f16372,
-  /* GenericHeading */ 'gh': #f16372,
-  /* GenericInserted */ 'gi': #f16372,
-  /* GenericOutput */ 'go': #f16372,
-  /* GenericPrompt */ 'gp': #f16372,
-  /* GenericStrong */ 'gs': #f16372,
-  /* GenericSubheading */ 'gu': #f16372,
-  /* GenericTraceback */ 'gt': #f16372,
-  /* TextWhitespace */ 'w': #bbbbbb,
+  /* Error */ 'err': $code-error-color,
+  /* Keyword */ 'k': #f47067,
+  /* KeywordConstant */ 'kc': #6cb6ff,
+  /* KeywordDeclaration */ 'kd': #f47067,
+  /* KeywordNamespace */ 'kn': #f47067,
+  /* KeywordPseudo */ 'kp': #f47067,
+  /* KeywordReserved */ 'kr': #f47067,
+  /* KeywordType */ 'kt': #f47067,
+  /* Name */ 'n': $code-color-dark,
+  /* NameAttribute */ 'na': #6cb6ff,
+  /* NameBuiltin */ 'nb': #dcbdfb,
+  /* NameBuiltinPseudo */ 'bp': $code-color-dark,
+  /* NameClass */ 'nc': #dcbdfb,
+  /* NameConstant */ 'no': #6cb6ff,
+  /* NameDecorator */ 'nd': #dcbdfb,
+  /* NameEntity */ 'ni': #6cb6ff,
+  /* NameException */ 'ne': #6cb6ff,
+  /* NameFunction */ 'nf': #dcbdfb,
+  /* NameFunctionMagic */ 'fm': #6cb6ff,
+  /* NameLabel */ 'nl': #6cb6ff,
+  /* NameNamespace */ 'nn': #f47067,
+  /* NameOther */ 'nx': #dcbdfb,
+  /* NameProperty */ 'py': #6cb6ff,
+  /* NameTag */ 'nt': #8ddb8c,
+  /* NameVariable */ 'nv': #f69d50,
+  /* NameVariableClass */ 'vc': #6cb6ff,
+  /* NameVariableGlobal */ 'vg': #6cb6ff,
+  /* NameVariableInstance */ 'vi': #6cb6ff,
+  /* NameVariableMagic */ 'vm': #6cb6ff,
+  /* Literal */ 'l': #6cb6ff,
+  /* LiteralDate */ 'ld': #96d0ff,
+  /* LiteralString */ 's': #96d0ff,
+  /* LiteralStringAffix */ 'sa': #96d0ff,
+  /* LiteralStringBacktick */ 'sb': #96d0ff,
+  /* LiteralStringChar */ 'sc': #96d0ff,
+  /* LiteralStringDelimiter */ 'dl': #96d0ff,
+  /* LiteralStringDoc */ 'sd': #96d0ff,
+  /* LiteralStringDouble */ 's2': #96d0ff,
+  /* LiteralStringEscape */ 'se': #96d0ff,
+  /* LiteralStringHeredoc */ 'sh': #96d0ff,
+  /* LiteralStringInterpol */ 'si': #96d0ff,
+  /* LiteralStringOther */ 'sx': #96d0ff,
+  /* LiteralStringRegex */ 'sr': #96d0ff,
+  /* LiteralStringSingle */ 's1': #96d0ff,
+  /* LiteralStringSymbol */ 'ss': #96d0ff,
+  /* LiteralNumber */ 'm': #6cb6ff,
+  /* LiteralNumberBin */ 'mb': #6cb6ff,
+  /* LiteralNumberFloat */ 'mf': #6cb6ff,
+  /* LiteralNumberHex */ 'mh': #6cb6ff,
+  /* LiteralNumberInteger */ 'mi': #6cb6ff,
+  /* LiteralNumberIntegerLong */ 'il': #6cb6ff,
+  /* LiteralNumberOct */ 'mo': #6cb6ff,
+  /* Operator */ 'o': #f47067,
+  /* OperatorWord */ 'ow': #f47067,
+  /* Punctuation */ 'p': $code-color-dark,
+  /* Comment */ 'c': #768390,
+  /* CommentHashbang */ 'ch': #768390,
+  /* CommentMultiline */ 'cm': #768390,
+  /* CommentSingle */ 'c1': #768390,
+  /* CommentSpecial */ 'cs': #768390,
+  /* CommentPreproc */ 'cp': #6cb6ff,
+  /* CommentPreprocFile */ 'cpf': #768390,
+  /* Generic */ 'g': $code-color-dark,
+  /* GenericDeleted */ 'gd': #ffd8d3,
+  /* GenericEmph */ 'ge': $code-color-dark,
+  /* GenericError */ 'gr': $code-error-color,
+  /* GenericHeading */ 'gh': $code-color-dark,
+  /* GenericInserted */ 'gi': #b4f1b4,
+  /* GenericOutput */ 'go': $code-color-dark,
+  /* GenericPrompt */ 'gp': $code-color-dark,
+  /* GenericStrong */ 'gs': $code-color-dark,
+  /* GenericSubheading */ 'gu': $code-color-dark,
+  /* GenericTraceback */ 'gt': $code-error-color,
+  /* GenericUnderline */ 'gl': $code-color-dark,
+  /* TextWhitespace */ 'w': $code-color-dark,
+  /* Other */ 'x': $code-color-dark
 ) !default;
 // ========== Code ========== //

@@ -346,7 +358,7 @@ $admonition-color-map: (
  'danger': #ff1744,
  'bug': #f50057,
  'example': #651fff,
-  'quote': #9e9e9e,
+  'quote': #9e9e9e
 ) !default;

 // Color map of the admonition background
@@ -362,8 +374,6 @@ $admonition-background-color-map: (
  'danger': rgba(255, 23, 68, 0.1),
  'bug': rgba(245, 0, 87, 0.1),
  'example': rgba(101, 31, 255, 0.1),
-  'quote': rgba(159, 159, 159, 0.1),
+  'quote': rgba(159, 159, 159, 0.1)
 ) !default;
 // ========== Admonition ========== //
-
-$MAX_LENGTH: 12000px;
@@ -10,8 +10,13 @@ libFiles:
  # aplayer@1.10.1 https://github.com/MoePlayer/APlayer
  aplayerCSS: aplayer@1.10.1/dist/APlayer.min.css
  aplayerJS: aplayer@1.10.1/dist/APlayer.min.js
+  # artalk@2.1.4 https://github.com/ArtalkJS/Artalk
+  artalkCSS: artalk@2.1.4/dist/Artalk.min.css
+  artalkJS: artalk@2.1.4/dist/Artalk.min.js
  # autocomplete.js@0.38.1 https://github.com/algolia/autocomplete.js
  autocompleteJS: autocomplete.js@0.38.1/dist/autocomplete.min.js
+  # cell-watermark@1.0.3 https://github.com/Lruihao/watermark
+  cellWatermarkJS: cell-watermark@1.0.3/src/watermark.min.js
  # clipboard.js@2.0.8 https://github.com/zenorocha/clipboard.js
  clipboardJS: clipboard@2.0.8/dist/clipboard.min.js
  # cookieconsent@3.1.1 https://github.com/osano/cookieconsent
@@ -63,4 +68,6 @@ libFiles:
  # typeit@7.0.4 https://github.com/alexmacarthur/typeit
  typeitJS: typeit@7.0.4/dist/typeit.min.js
  # valine@1.4.16 https://github.com/xCss/Valine
-  valineJS: valine@1.4.16/dist/Valine.min.js
+  valineJS: valine@1.4.16/dist/Valine.min.js
+  # waline@1.5.2 https://github.com/walinejs/waline
+  walineJS: "@waline/client@1.5.2/dist/Waline.min.js"
@@ -493,17 +493,88 @@ bilibili:
  Icon:
    Src: svg/icons/bilibili.svg

-# 063: Email
-email:
+# 063: ORCID
+orcid:
  Weight: 63
+  Prefix: https://orcid.org/
+  Title: ORCID
+  Icon:
+    Class: fab fa-orcid fa-fw
+
+# 064 Liberapay
+liberapay:
+  Weight: 64
+  Prefix: https://liberapay.com/
+  Title: Liberapay
+  Icon:
+    Simpleicons: liberapay
+
+# 065 Ko-Fi
+ko-fi:
+  Weight: 65
+  Prefix: https://ko-fi.com/
+  Title: Ko-Fi
+  Icon:
+    Simpleicons: kofi
+
+# 066: BuyMeaCoffee
+buymeacoffee:
+  Weight: 66
+  Prefix: https://www.buymeacoffee.com/
+  Title: BuyMeaCoffee
+  Icon:
+    Simpleicons: buymeacoffee
+
+# 067: Linktree
+linktree:
+  Weight: 67
+  Prefix: https://linktr.ee/
+  Title: Linktree
+  Icon:
+    Simpleicons: linktree
+
+# 068: QQ
+qq:
+  Weight: 68
+  Template: https://wpa.qq.com/msgrd?v=3&uin=%v&site=qq&menu=yes
+  Title: QQ
+  Icon:
+    Simpleicons: tencentqq
+
+# 069: QQGroup
+qqgroup:
+  Weight: 69
+  Template: https://qm.qq.com/cgi-bin/qm/qr?k=%v&jump_from=webapi
+  Title: QQGroup
+  Icon:
+    Class: fas fa-users
+
+# 070: Diaspora
+diaspora:
+  Weight: 70
+  Title: diaspora*
+  Icon:
+    Simpleicons: diaspora
+
+# 071: CSDN
+csdn:
+  Weight: 71
+  Prefix: https://blog.csdn.net/
+  Title: CSDN
+  Icon:
+    Src: svg/icons/csdn.svg
+
+# 072: Email
+email:
+  Weight: 72
  Template: mailto:%v
  Title: Email
  Icon:
    Class: far fa-envelope fa-fw

-# 064: RSS
+# 073: RSS
 rss:
-  Weight: 64
+  Weight: 73
  Url: /index.xml
  Title: RSS
  Newtab: true
@@ -9,7 +9,7 @@ const CustomJS = new (function () {
   * @returns {CustomJS}
   */
  this.hello = () => {
-    console.log('Hello CustomJS!');
+    // console.log('Hello CustomJS!');
    return this;
  }
  /**
@@ -30,6 +30,6 @@ const CustomJS = new (function () {
  CustomJS.init();
  // It will be executed when the DOM tree is built.
  document.addEventListener('DOMContentLoaded', () => {
-    console.log('DOM content loaded!')
+    // console.log('DOM content loaded!')
  });
 })();
@@ -1 +0,0 @@
-const CustomJS=new function(){this.hello=(()=>(console.log("Hello CustomJS!"),this)),this.init=(()=>(this.hello(),this))};CustomJS.init(),document.addEventListener("DOMContentLoaded",()=>{console.log("DOM content loaded!")});
@@ -1,7 +1,9 @@
 algoliasearch@4.11.0 https://github.com/algolia/algoliasearch-client-javascript
 animate.css@4.1.1 https://github.com/daneden/animate.css
 aplayer@1.10.1 https://github.com/MoePlayer/APlayer
+artalk@2.1.4 https://github.com/ArtalkJS/Artalk
 autocomplete.js@0.38.1 https://github.com/algolia/autocomplete.js
+cell-watermark@1.0.3 https://github.com/Lruihao/watermark
 clipboard.js@2.0.8 https://github.com/zenorocha/clipboard.js
 cookieconsent@3.1.1 https://github.com/osano/cookieconsent
 echarts@5.2.2 https://github.com/apache/echarts
@@ -24,4 +26,4 @@ simple-icons@5.21.1 https://github.com/simple-icons/simple-icons
 twemoji@13.1.0 https://github.com/twitter/twemoji
 typeit@7.0.4 https://github.com/alexmacarthur/typeit
 valine@1.4.16 https://github.com/xCss/Valine
-watermark@1.0.2 https://github.com/Lruihao/watermark.git
+waline@1.5.2 https://github.com/walinejs/waline
@@ -0,0 +1 @@
+(function(e,t){"function"==typeof define&&define.amd?define([],t()):"object"==typeof module&&module.exports?module.exports=t():e.Watermark=t()})(this,function(){function e(t={}){var n=e.prototype;this.options=t,s(this),d(this,this.options),h(this),p(this),n.upload=function(e){if(e){o.disconnect(),i.disconnect(),this.options.content=e;for(const t of this._container.querySelectorAll(".cell-watermark"))t.innerHTML=e;o.observe(this._container.parentNode,{childList:!0,subtree:!0}),i.observe(this._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}},n.render=function(e={}){l(this,Object.assign(this.options,e))},n.destroy=function(){i.disconnect(),o.disconnect(),window.removeEventListener("resize",r),this._container.parentNode.removeChild(this._container)}}var t,n,i,o,r,c=window.outerWidth,a=window.outerHeight,s=function(e){e._container=document.createElement("div"),e._container.classList.add("cell-watermark-container"),e._container.style.cssText="display: block; pointer-events: none;",e._container.setAttribute("aria-hidden",!0),t=document.querySelector(e.options.appendTo)||document.body,t.appendChild(e._container)},d=function(e,t){t.rowSpacing=t.rowSpacing||60,t.colSpacing=t.colSpacing||30,t.width=t.width||150,t.height=t.height||20;let i=parseInt(a/(t.height+t.rowSpacing)),o=parseInt(c/(t.width+t.colSpacing)),r=(c-t.width*o-t.colSpacing*(o-1))/2,s=(a-t.height*i-t.rowSpacing*(i-1))/2,d=document.createElement("div");d.classList.add("cell-watermark"),d.style.cssText="transform: rotate(15deg); opacity: 0.1; font-size: 0.85rem; text-align: center;position: fixed; user-select: none; word-break: break-all; overflow: hidden; z-index: 999999;";for(let n=0;n<i;n++){let i=s+(t.rowSpacing+t.height)*n,c=o;n%2!=0&&c++;for(let n=0;n<c;n++){let a=r+(t.colSpacing+t.width)*n;c!==o&&(a-=(t.colSpacing+t.width)/2);let s=d.cloneNode();s.style.cssText+=`left: ${a}px; top: ${i}px; width: ${t.width}px; height: ${t.height}px`,s.style.transform=`rotate(${t.rotate}deg)`,s.style.opacity=t.opacity,s.style.fontSize=`${t.fontSize}rem`,s.style.fontFamily=t.fontFamily,s.innerHTML=t.content,e._container.appendChild(s)}}n=e._container},l=function(e,t){i.disconnect(),e._container.innerHTML="",d(e,t),i.observe(e._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},h=function(e){i=new MutationObserver(function(t,n){l(e,e.options)}),i.observe(e._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),o=new MutationObserver(function(e){for(let i of e)"childList"===i.type&&i.removedNodes.length>0&&0===document.querySelectorAll(".cell-watermark-container").length&&t.appendChild(n)}),o.observe(e._container.parentNode,{childList:!0,subtree:!0})},p=function(e){r=function(){window.outerHeight===a&&window.outerWidth===c||(a=window.outerHeight,c=window.outerWidth,l(e,e.options))},window.addEventListener("resize",r)};return e});
@@ -1247,5 +1247,3 @@
            transform: rotate(360deg);
  }
 }
-
-/*# sourceMappingURL=gitalk.css.map*/
@@ -6,4 +6,3 @@
 */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
-/*# sourceMappingURL=/sm/5d8a97cdb40a6c49031b52d63494a6eca084416b5b035e5698fdc5fa0969b2c3.map */
@@ -1 +0,0 @@
-var Watermark=function(){function t(e={}){var n=t.prototype;this.options=e,s(this),d(this,this.options),h(this),p(this),n.upload=function(t){if(t){o.disconnect(),i.disconnect(),this.options.content=t;for(const e of this._container.querySelectorAll(".cell-watermark"))e.innerHTML=t;o.observe(this._container.parentNode,{childList:!0,subtree:!0}),i.observe(this._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}},n.render=function(t={}){l(this,Object.assign(this.options,t))},n.destroy=function(){i.disconnect(),o.disconnect(),window.removeEventListener("resize",r),this._container.parentNode.removeChild(this._container)}}var e,n,i,o,r,c=window.outerWidth,a=window.outerHeight,s=function(t){t._container=document.createElement("div"),t._container.classList.add("cell-watermark-container"),t._container.style.cssText="display: block; pointer-events: none;",t._container.setAttribute("aria-hidden",!0),e=document.querySelector(t.options.appendTo)||document.body,e.appendChild(t._container)},d=function(t,e){e.rowSpacing=e.rowSpacing||60,e.colSpacing=e.colSpacing||30,e.width=e.width||150,e.height=e.height||20;let i=parseInt(a/(e.height+e.rowSpacing)),o=parseInt(c/(e.width+e.colSpacing)),r=(c-e.width*o-e.colSpacing*(o-1))/2,s=(a-e.height*i-e.rowSpacing*(i-1))/2,d=document.createElement("div");d.classList.add("cell-watermark"),d.style.cssText="transform: rotate(15deg); opacity: 0.1; font-size: 0.85rem; text-align: center;position: fixed; user-select: none; word-break: break-all; overflow: hidden; z-index: 999999;";for(let n=0;n<i;n++){let i=s+(e.rowSpacing+e.height)*n,c=o;n%2!=0&&c++;for(let n=0;n<c;n++){let a=r+(e.colSpacing+e.width)*n;c!==o&&(a-=(e.colSpacing+e.width)/2);let s=d.cloneNode();s.style.cssText+=`left: ${a}px; top: ${i}px; width: ${e.width}px; height: ${e.height}px`,s.style.transform=`rotate(${e.rotate}deg)`,s.style.opacity=e.opacity,s.style.fontSize=`${e.fontSize}rem`,s.innerHTML=e.content,t._container.appendChild(s)}}n=t._container},l=function(t,e){i.disconnect(),t._container.innerHTML="",d(t,e),i.observe(t._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},h=function(t){i=new MutationObserver(function(e,n){l(t,t.options)}),i.observe(t._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),o=new MutationObserver(function(t){for(let i of t)"childList"===i.type&&i.removedNodes.length>0&&0===document.querySelectorAll(".cell-watermark-container").length&&e.appendChild(n)}),o.observe(t._container.parentNode,{childList:!0,subtree:!0})},p=function(t){r=function(){window.outerHeight===a&&window.outerWidth===c||(a=window.outerHeight,c=window.outerWidth,l(t,t.options))},window.addEventListener("resize",r)};return t}();
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 0c282.784 0 512 229.216 512 512s-229.216 512-512 512S0 794.784 0 512 229.216 0 512 0z m189.952 752l11.2-108.224c-31.904 9.536-100.928 16.128-147.712 16.128-134.464 0-205.728-47.296-195.328-146.304 11.584-110.688 113.152-145.696 232.64-145.696 54.784 0 122.432 8.8 151.296 18.336L768 272.704C724.544 262.24 678.272 256 599.584 256c-203.2 0-388.704 94.88-406.4 263.488C178.336 660.96 303.584 768 535.616 768c80.672 0 138.464-6.432 166.336-16z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" version="1.1"><defs><style>.fixit-ban{opacity:.9;}</style></defs><path d="M159.12 338.69l24.8-16.54a78.87 78.87 0 0 1-6.77-22.72l-30.88 4.41a16 16 0 0 1-4.54-31.68l34.27-4.9v-.76l98.94 98.95a76.89 76.89 0 0 1-71.68-17.73l-26.39 17.59c-.15.11-.31.21-.47.31a16 16 0 0 1-17.28-26.93zm224.72-48.42a16 16 0 0 0-13.57-18.11l-34.27-4.9V244.9l34.27-4.9a16 16 0 1 0-4.54-31.68l-30.54 4.36a79.31 79.31 0 0 0-6.85-22.85l24.54-16.36a16 16 0 1 0-17.29-26.93l-.46.31-26 17.34a79.9 79.9 0 0 0-102.64-3l139.83 139.88 19.41 2.77a16 16 0 0 0 18.11-13.57z" fill="#358C3C" class="fixit-bug"/><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 432c-101.46 0-184-82.54-184-184a182.84 182.84 0 0 1 33.38-105.37l256 256A182.86 182.86 0 0 1 256 440zm150.62-78.63l-256-256A182.84 182.84 0 0 1 256 72c101.46 0 184 82.54 184 184a182.84 182.84 0 0 1-33.38 105.37z" fill="#FF6347" class="fixit-ban"/></svg>
@@ -1,4 +1,4 @@
-baseURL = "https://example.com"
+baseURL = "https://fixit.lruihao.cn"
 # [en, zh-cn, fr, pl, ...] determines default content language
 # [en, zh-cn, fr, pl, ...] 设置默认的语言
 defaultContentLanguage = "en"
@@ -13,6 +13,10 @@ themesDir = "../.."
 # 网站标题
 title = "FixIt"

+# Ignore errors
+# 忽略错误
+ignoreErrors = ["error-remote-getjson"]
+
 # whether to use robots.txt
 # 是否使用 robots.txt
 enableRobotsTXT = true
@@ -152,6 +156,8 @@ enableEmoji = true
        # Home page profile
        [languages.en.params.home.profile]
          enable = true
+          # Gravatar mirror site domain, default: "www.gravatar.com" since v0.2.13
+          gravatarSite = ""
          # Gravatar Email for preferred avatar in home page
          gravatarEmail = ""
          # URL of avatar shown in home page
@@ -234,8 +240,18 @@ enableEmoji = true
        XMPP = ""
        Matrix = ""
        Bilibili = ""
+        # ORCID, ... , CSDN since v0.2.13
+        ORCID = ""
+        Liberapay = ""
+        Ko-Fi = ""
+        BuyMeaCoffee = ""
+        Linktree = ""
+        QQ = ""
+        QQGroup = ""
+        Diaspora = ""
+        CSDN = ""
        Email = "xxxx@xxxx.com"
-        RSS = true
+        RSS = true # since v0.2.0
        [languages.en.params.social.Mastodon]
          id = "@xxxx"
          prefix = "https://mastodon.technology/"
@@ -362,6 +378,8 @@ enableEmoji = true
        # 主页个人信息
        [languages.zh-cn.params.home.profile]
          enable = true
+          # 选择使用 Gravatar 源站或其他镜像站，若留空则为默认的 "www.gravatar.com" since v0.2.13
+          gravatarSite = ""
          # Gravatar 邮箱，用于优先在主页显示的头像
          gravatarEmail = ""
          # 主页显示头像的 URL
@@ -445,8 +463,18 @@ enableEmoji = true
        XMPP = ""
        Matrix = ""
        Bilibili = "xxxx"
+        # ORCID, ... , CSDN since v0.2.13
+        ORCID = ""
+        Liberapay = ""
+        Ko-Fi = ""
+        BuyMeaCoffee = ""
+        Linktree = ""
+        QQ = ""
+        QQGroup = ""
+        Diaspora = ""
+        CSDN = ""
        Email = "xxxx@xxxx.com"
-        RSS = true
+        RSS = true # since v0.2.0
      # 盘古之白配置 since v0.2.12
      [languages.zh-cn.params.pangu]
        # 适用于中文写作用户
@@ -456,11 +484,11 @@ enableEmoji = true
      [languages.zh-cn.params.watermark]
        enable = true
        # 水印内容 (允许 HTML 格式)
-        content = '<i class="fa-stack fa-xs logo-icon"><i class="fas fa-ban fa-stack-2x"></i><i class="fas fa-bug fa-stack-1x"></i></i> FixIt 主题'
+        content = '<img class="fixit-icon" src="/images/fixit.svg" alt="FixIt logo" /> FixIt 主题'
        # 水印透明度
-        opacity = 0.02
+        opacity = 0.0125
        # 单水印高度 单位：px
-        height = 23
+        height = 21

 [params]
  # FixIt theme version
@@ -488,24 +516,24 @@ enableEmoji = true
  # Header config
  # 页面头部导航栏配置
  [params.header]
-    # desktop header mode ("fixed", "normal", "auto")
-    # 桌面端导航栏模式 ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # mobile header mode ("fixed", "normal", "auto")
-    # 移动端导航栏模式 ("fixed", "normal", "auto")
+    # desktop header mode ("sticky", "normal", "auto")
+    # 桌面端导航栏模式 ("sticky", "normal", "auto")
+    desktopMode = "sticky"
+    # mobile header mode ("sticky", "normal", "auto")
+    # 移动端导航栏模式 ("sticky", "normal", "auto")
    mobileMode = "auto"
    # Header title config
    # 页面头部导航栏标题配置
    [params.header.title]
      # URL of the LOGO
      # LOGO 的 URL
-      logo = ""
+      logo = "/images/fixit.svg"
      # title name
      # 标题名称
      name = "FixIt"
      # you can add extra information before the name (HTML format is supported), such as icons
      # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
-      pre = '<i class="fa-stack fa-xs logo-icon"><i class="fas fa-ban fa-stack-2x"></i><i class="fas fa-bug fa-stack-1x"></i></i>'
+      pre = ""
      # you can add extra information after the name (HTML format is supported), such as icons
      # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
      post = ""
@@ -540,7 +568,7 @@ enableEmoji = true
    author = true
    # site creation time
    # 网站创立年份
-    since = 2019
+    since = 2021
    # Public network security only in China (HTML format is supported) since v0.2.12
    # 公网安备信息，仅在中国使用 (支持 HTML 格式) since v0.2.12
    gov = ""
@@ -563,6 +591,13 @@ enableEmoji = true
    # amount of RSS pages
    # RSS 文章数目
    rss = 10
+    # recently updated posts settings since v0.2.13
+    # 最近更新文章设置 since v0.2.13
+    [params.section.recentlyUpdated]
+      enable = true
+      rss = true
+      days = 30
+      maxCount = 10

  # List (category or tag) page config
  # List (目录或标签) 页面配置
@@ -610,6 +645,9 @@ enableEmoji = true
    # whether to show the full text content in RSS
    # 是否在 RSS 中显示全文内容
    rssFullText = false
+    # Page style ("narrow", "normal", "wide", ...) since v0.2.13
+    # 页面样式 ("narrow", "normal", "wide", ...) since v0.2.13
+    pageStyle = "normal"
    # Table of the contents config
    # 目录配置
    [params.page.toc]
@@ -622,12 +660,31 @@ enableEmoji = true
      # whether to make the table of the contents in the sidebar automatically collapsed
      # 是否使侧边目录自动折叠展开
      auto = true
+      # position of TOC ("left", "right") since v0.2.13
+      # 目录位置 ("left", "right") since v0.2.13
+      position = "right"
+    # Display a message at the beginning of an article to warn the reader that its content might be expired. since v0.2.13
+    # 在文章开头显示提示信息，提醒读者文章内容可能过时。 since v0.2.13
+    [params.page.expirationReminder]
+      enable = true
+      # Display the reminder if the last modified time is more than 90 days ago
+      # 如果文章最后更新于这天数之前，显示提醒
+      reminder = 90
+      # Display warning if the last modified time is more than 180 days ago
+      # 如果文章最后更新于这天数之前，显示警告
+      warning = 180
+      # If the article expires, close the comment or not
+      # 如果文章到期是否关闭评论
+      closeComment = false
    # Code config
    # 代码配置
    [params.page.code]
      # whether to show the copy button of the code block
      # 是否显示代码块的复制按钮
      copy = true
+      # whether to show the edit button of the code block since v0.2.13
+      # 是否显示代码块的编辑按钮 since v0.2.13
+      edit = true
      # the maximum number of lines of displayed code by default
      # 默认展开显示的代码行数
      maxShownLines = 10
@@ -708,6 +765,21 @@ enableEmoji = true
    # 评论系统设置
    [params.page.comment]
      enable = false
+      # Artalk comment config (https://artalk.js.org/) since v0.2.13
+      # Artalk 评论系统设置 (https://artalk.js.org/) since v0.2.13
+      [params.page.comment.artalk]
+        enable = false
+        server = "https://yourdomain/api/"
+        site = "默认站点"
+        placeholder = ""
+        noComment = ""
+        sendBtn = ""
+        editorTravel = true
+        flatMode = 'auto'
+        maxNesting = 3
+        # It take effect when `params.page.lightgallery` is enabled
+        # 当 `params.page.lightgallery` 启用时生效
+        lightgallery = false
      # Disqus comment config (https://disqus.com/)
      # Disqus 评论系统设置 (https://disqus.com/)
      [params.page.comment.disqus]
@@ -750,6 +822,23 @@ enableEmoji = true
        # 可以在你的项目下相同路径存放你自己的数据文件:
        # "assets/data/emoji/"
        emoji = ""
+        commentCount = true # since v0.2.13
+      # Waline comment config (https://waline.js.org) since v0.2.13
+      # Waline 评论系统设置 (https://waline.js.org) since v0.2.13
+      [params.page.comment.waline]
+        enable = false
+        serverURL = ""
+        visitor = false
+        emoji = ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
+        meta = ['nick', 'mail', 'link']
+        requiredMeta = []
+        login = 'enable'
+        wordLimit = 0
+        pageSize = 10
+        uploadImage = false
+        highlight = true
+        mathTagSupport = false
+        commentCount = false
      # Facebook comment config (https://developers.facebook.com/docs/plugins/comments)
      # Facebook 评论系统设置 (https://developers.facebook.com/docs/plugins/comments)
      [params.page.comment.facebook]
@@ -759,7 +848,7 @@ enableEmoji = true
        appId = ""
        languageCode = ""
      # Telegram comments config (https://comments.app/)
-      # Telegram comments 评论系统设置 (https://comments.app/)
+      # Telegram 评论系统设置 (https://comments.app/)
      [params.page.comment.telegram]
        enable = false
        siteID = ""
@@ -770,11 +859,11 @@ enableEmoji = true
        dislikes = false
        outlined = false
      # Commento comment config (https://commento.io/)
-      # Commento comment 评论系统设置 (https://commento.io/)
+      # Commento 评论系统设置 (https://commento.io/)
      [params.page.comment.commento]
        enable = false
      # Utterances comment config (https://utteranc.es/)
-      # Utterances comment 评论系统设置 (https://utteranc.es/)
+      # Utterances 评论系统设置 (https://utteranc.es/)
      [params.page.comment.utterances]
        enable = false
        # owner/repo
@@ -783,6 +872,18 @@ enableEmoji = true
        label = ""
        lightTheme = "github-light"
        darkTheme = "github-dark"
+      # Twikoo comment config (https://twikoo.js.org/) since v0.2.13
+      # Twikoo 评论系统设置 (https://twikoo.js.org/) since v0.2.13
+      [params.page.comment.twikoo]
+        enable = false
+        envId = ""
+        region = ""
+        path = ""
+        visitor = true
+        commentCount = true
+        # It take effect when `params.page.lightgallery` is enabled
+        # 当 `params.page.lightgallery` 启用时生效
+        lightgallery = false
    # Third-party library config
    # 第三方库配置
    [params.page.library]
@@ -839,19 +940,19 @@ enableEmoji = true
    enable = true
    # watermark's text (HTML format is supported)
    # 水印内容 (允许 HTML 格式)
-    content = '<i class="fa-stack fa-xs logo-icon"><i class="fas fa-ban fa-stack-2x"></i><i class="fas fa-bug fa-stack-1x"></i></i> FixIt Theme'
+    content = '<img class="fixit-icon" src="/images/fixit.svg" alt="FixIt logo" /> FixIt Theme'
    # watermark's transparency
    # 水印透明度
-    opacity = 0.02
+    opacity = 0.0125
    # parent of watermark's container
    # 水印父节点
-    appendTo = '.wrapper>.main'
+    appendTo = '.wrapper>main'
    # watermark's width. unit: px
    # 单水印宽度 单位：px
    width = 150
    # watermark's height. unit: px
    # 单水印高度 单位：px
-    height = 23
+    height = 21
    # row spacing of watermarks. unit: px
    # 水印行间距 单位：px
    rowSpacing = 60
@@ -864,6 +965,9 @@ enableEmoji = true
    # watermark's fontSize. unit: rem
    # 水印字体大小，单位：rem
    fontSize = 0.85
+    # watermark's fontFamily
+    # 水印字体
+    fontFamily = 'inherit'

  # Busuanzi count since v0.2.12
  # 不蒜子统计 since v0.2.12
@@ -874,16 +978,18 @@ enableEmoji = true
    enablePost = false
    # Site creation time
    # 网站创立时间
-    siteTime = '2019-02-03T19:30:34+08:00'
+    siteTime = '2021-12-18T16:15:22+08:00'
  
-  # Site verification code for Google/Bing/Yandex/Pinterest/Baidu
-  # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
+  # Site verification code for Google/Bing/Yandex/Pinterest/Baidu/360/Sogou
+  # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu/360/Sogou
  [params.verification]
    google = ""
    bing = ""
    yandex = ""
    pinterest = ""
    baidu = ""
+    so = ""
+    sogou = ""

  # Site SEO config
  # 网站 SEO 配置
@@ -915,7 +1021,7 @@ enableEmoji = true
  # Cookie consent config
  # Cookie 许可配置
  [params.cookieconsent]
-    enable = false
+    enable = true
    # text strings used for Cookie consent banner
    # 用于 Cookie 许可横幅的文本字符串
    [params.cookieconsent.content]
@@ -958,9 +1064,6 @@ enableEmoji = true
  # "assets/js/_custom.js"
  [params.customJS]
    enable = true
-    # Use "_custom.min.js" in the same path
-    # 使用同目录下的压缩文件 "_custom.min.js"
-    minify = true

 # Markup related configuration in Hugo
 # Hugo 解析文档的配置
@@ -968,13 +1071,14 @@ enableEmoji = true
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
+    ######## 必要配置 necessary configurations ########
+    # https://github.com/Lruihao/FixIt/issues/43
    codeFences = true
-    guessSyntax = true
    lineNos = true
    lineNumbersInTable = true
-    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
-    # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
-    noClasses = false
+    noClasses = false 
+    ######## 必要配置 necessary configurations ########
+    guessSyntax = true
  # Goldmark is from Hugo 0.60 the default library used for Markdown
  # Goldmark 是 Hugo 0.60 以来的默认 Markdown 解析库
  [markup.goldmark]
@@ -18,7 +18,7 @@ math:
 [![GitHub forks](https://img.shields.io/github/forks/Lruihao/FixIt?style=social)](https://github.com/Lruihao/FixIt/fork)
 {{< /style >}}

-> [<i class="fa-stack fa-xs logo-icon"><i class="fas fa-ban fa-stack-2x"></i><i class="fas fa-bug fa-stack-1x"></i></i> FixIt](https://github.com/Lruihao/FixIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Lruihao](https://lruihao.cn).
+> [<img class="fixit-icon" src="/images/fixit.svg" alt="FixIt logo" /> FixIt](https://github.com/Lruihao/FixIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Lruihao](https://lruihao.cn).
 >
 > It is based on the original [LoveIt Theme](https://github.com/dillonzq/LoveIt), [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt).

@@ -32,7 +32,7 @@ math:
 * :(fab fa-searchengin fa-fw): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
 * :(fab fa-google fa-fw): **[Google Analytics](https://analytics.google.com/analytics)** supported
 * :(far fa-chart-bar fa-fw): **[Fathom Analytics](https://usefathom.com/)** supported
-* :(fas fa-search fa-fw): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
+* :(fas fa-search fa-fw): Search engine **verification** supported (Google, Bind, Yandex, Baidu, 360 and Sogou)
 * :(fas fa-tachometer-alt fa-fw): **CDN** for third-party libraries supported
 * :(fas fa-cloud-download-alt fa-fw): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)

@@ -50,15 +50,18 @@ math:

 * :(far fa-user fa-fw): **Gravatar** supported by [Gravatar](https://gravatar.com)
 * :(fas fa-user-circle fa-fw): Local **Avatar** supported
-* :(far fa-id-card fa-fw): Up to **64** social links supported
+* :(far fa-id-card fa-fw): Up to **73** social links supported
 * :(fas fa-share-square fa-fw): Up to **28** share sites supported
 * :(far fa-comment fa-fw): **Disqus** comment system supported by [Disqus](https://disqus.com)
 * :(far fa-comment-dots fa-fw): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
 * :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
+* :(far fa-comment-alt fa-fw): **Waline** comment system supported by [Waline](https://waline.js.org/)
 * :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 * :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
 * :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
-* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+* :(far fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+* :(far fa-comment-alt fa-fw): **Artalk** comment system supported by [Artalk](https://artalk.js.org/)
+* :(fas fa-comment-alt fa-fw): **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)

 #### Extended Features

@@ -82,7 +85,7 @@ math:
 * :(fas fa-i-cursor fa-fw): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
 * :(fas fa-cookie-bite fa-fw): **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
 * :(fas fa-desktop fa-fw): **PWA (Progressive Web App)** supported
-* :(fas fa-signature fa-fw): **Web Watermark** supported by [Watermark](https://github.com/Lruihao/watermark)
+* :(fas fa-signature fa-fw): **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
 * :(fas fa-language fa-fw): **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
 * :(fas fa-link fa-fw): **Card type** link shortcode
 * :(fas fa-users fa-fw): **Friends** page embedded template
@@ -119,5 +122,8 @@ Thanks to the authors of following resources included in the theme:
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
-* [Watermark](https://github.com/Lruihao/watermark)
-* [pangu.js](https://github.com/vinta/pangu.js)
+* [cell-watermark](https://github.com/Lruihao/watermark)
+* [pangu.js](https://github.com/vinta/pangu.js)
+* [Artalk](https://artalk.js.org/)
+* [Waline](https://waline.js.org/)
+* [Twikoo](https://twikoo.js.org/)
@@ -18,7 +18,7 @@ math:
 [![GitHub forks](https://img.shields.io/github/forks/Lruihao/FixIt?style=social)](https://github.com/Lruihao/FixIt/fork)
 {{< /style >}}

-> [<i class="fa-stack fa-xs logo-icon"><i class="fas fa-ban fa-stack-2x"></i><i class="fas fa-bug fa-stack-1x"></i></i> FixIt](https://github.com/Lruihao/FixIt) 是一个由 [Lruihao](https://lruihao.cn) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
+> [<img class="fixit-icon" src="/images/fixit.svg" alt="FixIt logo" /> FixIt](https://github.com/Lruihao/FixIt) 是一个由 [Lruihao](https://lruihao.cn) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
 >
 > 它的原型基于 [LoveIt 主题](https://github.com/dillonzq/LoveIt)，[LeaveIt 主题](https://github.com/liuzc/LeaveIt) 和 [KeepIt 主题](https://github.com/Fastbyte01/KeepIt)。

@@ -32,7 +32,7 @@ math:
 * :(fab fa-searchengin fa-fw): 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
 * :(fab fa-google fa-fw): 支持 **[Google Analytics](https://analytics.google.com/analytics)**
 * :(far fa-chart-bar fa-fw): 支持 **[Fathom Analytics](https://usefathom.com/)**
-* :(fas fa-search fa-fw): 支持搜索引擎的**网站验证** (Google, Bind, Yandex and Baidu)
+* :(fas fa-search fa-fw): 支持搜索引擎的**网站验证** (Google, Bind, Yandex, Baidu, 360 and Sogou)
 * :(fas fa-tachometer-alt fa-fw): 支持所有第三方库的 **CDN**
 * :(fas fa-cloud-download-alt fa-fw): 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载**

@@ -50,15 +50,18 @@ math:

 * :(far fa-user fa-fw): 支持 **[Gravatar](https://gravatar.com)** 头像
 * :(fas fa-user-circle fa-fw): 支持本地**头像**
-* :(far fa-id-card fa-fw): 支持多达 **64** 种社交链接
+* :(far fa-id-card fa-fw): 支持多达 **73** 种社交链接
 * :(fas fa-share-square fa-fw): 支持多达 **28** 种网站分享
 * :(far fa-comment fa-fw): 支持 **[Disqus](https://disqus.com)** 评论系统
 * :(far fa-comment-dots fa-fw): 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
 * :(far fa-comment-alt fa-fw): 支持 **[Valine](https://valine.js.org/)** 评论系统
+* :(far fa-comment-alt fa-fw): 支持 **[Waline](https://waline.js.org/)** 评论系统
 * :(far fa-comments fa-fw): 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
 * :(fas fa-comment fa-fw): 支持 **[Telegram comments](https://comments.app/) 评论**系统
 * :(fas fa-comment-dots fa-fw): 支持 **[Commento](https://commento.io/)** 评论系统
 * :(far fa-comment-alt fa-fw): 支持 **[Utterances](https://utteranc.es/)** 评论系统
+* :(far fa-comment-alt fa-fw): 支持 **[Artalk](https://artalk.js.org/)** 评论系统
+* :(far fa-comment-alt fa-fw): 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统

 #### 扩展功能

@@ -82,7 +85,7 @@ math:
 * :(fas fa-i-cursor fa-fw): 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
 * :(fas fa-cookie-bite fa-fw): 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
 * :(fas fa-desktop fa-fw): 支持**渐进式网页应用**
-* :(fas fa-signature fa-fw): 支持基于 [Watermark](https://github.com/Lruihao/watermark) 的**网页水印**
+* :(fas fa-signature fa-fw): 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
 * :(fas fa-language fa-fw): 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
 * :(fas fa-link fa-fw): 支持**卡片式链接**的 shortcode
 * :(fas fa-users fa-fw): 支持**友情链接**的页面模板
@@ -119,5 +122,8 @@ FixIt 主题中用到了以下项目，感谢它们的作者：
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
-* [Watermark](https://github.com/Lruihao/watermark)
+* [cell-watermark](https://github.com/Lruihao/watermark)
 * [pangu.js](https://github.com/vinta/pangu.js)
+* [Artalk](https://artalk.js.org/)
+* [Waline](https://waline.js.org/)
+* [Twikoo](https://twikoo.js.org/)
@@ -2,6 +2,7 @@
 title: "Friends"
 subtitle: This is just a demo website, no links exchange ~
 type: "friends"
+description: "Friends tempalate demo of Hugo theme FixIt"
 keywords: 
  - Hugo
  - friends tempalate
@@ -10,14 +11,18 @@ comment: false

 ---
 ## Base info
+
 ```yaml
 - nickname: Lruihao
  avatar: https://lruihao.cn/images/avatar.jpg
  url: https://lruihao.cn
-  discription: Lruihao's Note
+  description: Lruihao's Note
 ```

 ## Friendly Reminder
-> 1. If you want to exchange link, please leave a comment in the above format. (personal non-commercial blogs / websites only)
-> 2. Warn: Website failure, stop maintenance and improper content may be cancelled!
-> 3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
+
+{{< admonition info "Notice" true >}}
+1. If you want to exchange link, please leave a comment in the above format. (personal non-commercial blogs / websites only)
+2. Warn: Website failure, stop maintenance and improper content may be cancelled!
+3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
+{{< /admonition >}}
@@ -2,6 +2,7 @@
 title: "友情链接"
 subtitle: 这只是一个演示网站，不进行友链交换哦 ~
 type: "friends"
+description: "Hugo FixIt 主题的友链模板 Demo"
 keywords: 
  - Hugo
  - friends tempalate
@@ -9,14 +10,18 @@ comment: false
 ---

 ## 基本信息
+
 ```yaml
 - nickname: 菠菜眾長
  avatar: https://lruihao.cn/images/avatar.jpg
  url: https://lruihao.cn
-  discription: 李瑞豪的博客
+  description: 李瑞豪的博客
 ```

 ## 友情提醒
-> 1. 互换友链请按以上格式在评论留言。（仅限个人非商业博客/网站）
-> 2. 提醒：网站失效、停止维护、内容不当都可能被取消连接！
-> 3. 那些不尊重他人劳动成果，转载不加出处的，或恶意行为的网站，还请您不要来进行交换了。
+
+{{< admonition info "Notice" true >}}
+1. 互换友链请按以上格式在评论留言。（仅限个人非商业博客/网站）
+2. 提醒：网站失效、停止维护、内容不当都可能被取消连接！
+3. 那些不尊重他人劳动成果，转载不加出处的，或恶意行为的网站，还请您不要来进行交换了。
+{{< /admonition >}}
@@ -2,7 +2,7 @@
 weight: 4
 title: "Basic Markdown Syntax"
 date: 2019-12-01T21:57:40+08:00
-lastmod: 2020-01-01T16:45:40+08:00
+lastmod: 2022-03-01T22:30:40+08:00
 draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
@@ -24,7 +24,7 @@ This article offers a sample of basic Markdown syntax that can be used in Hugo c
 {{< admonition >}}
 This article is a shameful copy of the great [Grav original page](http://learn.getgrav.org/content/markdown).

-If you want to know about the extented Markdown syntax of **LoveIt** theme, please read [extended Markdown syntax page](../theme-documentation-content#extended-markdown-syntax).
+If you want to know about the extented Markdown syntax of **FixIt** theme, please read [extended Markdown syntax page](../theme-documentation-content#extended-markdown-syntax).
 {{< /admonition >}}

 Let's face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.
@@ -759,5 +759,5 @@ With a reference later in the document defining the URL location:
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"

 {{< admonition tip >}}
-**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes#image), which provides more features.
+**FixIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes#image), which provides more features.
 {{< /admonition >}}
@@ -2,7 +2,7 @@
 weight: 7
 title: "PWA Support"
 date: 2022-01-26T09:32:56+08:00
-draft: true
+draft: false
 author: "Lruihao"
 authorLink: "https://lruihao.cn"
 description: "Guide to setup PWA in FixIt."
@@ -2,7 +2,7 @@
 weight: 7
 title: "PWA 支持"
 date: 2022-01-26T11:10:56+08:00
-draft: true
+draft: false
 author: "Lruihao"
 authorLink: "https://lruihao.cn"
 description: "在 FixIt 中设置 PWA 的指南。"
@@ -122,7 +122,7 @@ theme = "FixIt"
 [markup]
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
-    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
+    # false is a necessary configuration (https://github.com/Lruihao/FixIt/issues/43)
    noClasses = false
 ```

@@ -255,9 +255,9 @@ Please open the code block below to view the complete sample configuration :(far

  # Header config
  [params.header]
-    # desktop header mode ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # mobile header mode ("fixed", "normal", "auto")
+    # desktop header mode ("sticky", "normal", "auto")
+    desktopMode = "sticky"
+    # mobile header mode ("sticky", "normal", "auto")
    mobileMode = "auto"
    # {{< version 0.2.0 >}} Header title config
    [params.header.title]
@@ -298,6 +298,12 @@ Please open the code block below to view the complete sample configuration :(far
    dateFormat = "01-02"
    # amount of RSS pages
    rss = 10
+    # {{< version 0.2.13 >}} recently updated posts settings
+    [params.section.recentlyUpdated]
+      enable = false
+      rss = false
+      days = 30
+      maxCount = 10

  # {{< version 0.2.0 >}} List (category or tag) page config
  [params.list]
@@ -315,6 +321,8 @@ Please open the code block below to view the complete sample configuration :(far
    # Home page profile
    [params.home.profile]
      enable = true
+      # {{< version 0.2.13 >}} Gravatar mirror site domain, default: "www.gravatar.com"
+      gravatarSite = ""
      # Gravatar Email for preferred avatar in home page
      gravatarEmail = ""
      # URL of avatar shown in home page
@@ -399,6 +407,16 @@ Please open the code block below to view the complete sample configuration :(far
    XMPP = ""
    Matrix = ""
    Bilibili = ""
+    # ORCID, ... , CSDN {{< version 0.2.13 >}}
+    ORCID = ""
+    Liberapay = ""
+    Ko-Fi = ""
+    BuyMeaCoffee = ""
+    Linktree = ""
+    QQ = ""
+    QQGroup = ""
+    Diaspora = ""
+    CSDN = ""
    Email = "xxxx@xxxx.com"
    RSS = true # {{< version 0.2.0 >}}

@@ -424,6 +442,8 @@ Please open the code block below to view the complete sample configuration :(far
    linkToMarkdown = true
    # {{< version 0.2.4 >}} whether to show the full text content in RSS
    rssFullText = false
+    # {{< version 0.2.13 >}} Page style ("narrow", "normal", "wide", ...)
+    pageStyle = "normal"
    # {{< version 0.2.0 >}} Table of the contents config
    [params.page.toc]
      # whether to enable the table of the contents
@@ -432,6 +452,17 @@ Please open the code block below to view the complete sample configuration :(far
      keepStatic = true
      # whether to make the table of the contents in the sidebar automatically collapsed
      auto = true
+      # {{< version 0.2.13 >}} position of TOC ("left", "right")
+      position = "right"
+    # {{< version 0.2.13 >}} Display a message at the beginning of an article to warn the reader that its content might be expired
+    [params.page.expirationReminder]
+      enable = false
+      # Display the reminder if the last modified time is more than 90 days ago
+      reminder = 90
+      # Display warning if the last modified time is more than 180 days ago
+      warning = 180
+      # If the article expires, close the comment or not
+      closeComment = false
    # {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} mathematical formulas (https://katex.org)
    [params.page.math]
      enable = true
@@ -449,6 +480,8 @@ Please open the code block below to view the complete sample configuration :(far
    [params.page.code]
      # whether to show the copy button of the code block
      copy = true
+      # {{< version 0.2.13 >}} whether to show the edit button of the code block
+      edit = true
      # the maximum number of lines of displayed code by default
      maxShownLines = 10
    # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config (https://docs.mapbox.com/mapbox-gl-js)
@@ -497,9 +530,22 @@ Please open the code block below to view the complete sample configuration :(far
      Skype = false
      Trello = false
      Mix = false
-    # {{< version 0.2.0 changed >}} Comment config
+    # {{< version 0.2.13 changed >}} Comment config
    [params.page.comment]
-      enable = true
+      enable = false
+      # {{< version 0.2.13 >}} {{< link "https://artalk.js.org/" Artalk >}} comment config (https://artalk.js.org/)
+      [params.page.comment.artalk]
+        enable = false
+        server = "https://yourdomain/api/"
+        site = "默认站点"
+        placeholder = ""
+        noComment = ""
+        sendBtn = ""
+        editorTravel = true
+        flatMode = 'auto'
+        maxNesting = 3
+        # It take effect when `params.page.lightgallery` is enabled
+        lightgallery = false
      # {{< link "https://disqus.com/" Disqus >}} comment config (https://disqus.com)
      [params.page.comment.disqus]
        # {{< version 0.1.1 >}}
@@ -535,6 +581,22 @@ Please open the code block below to view the complete sample configuration :(far
        # you can store your own data files in the same path under your project:
        # "assets/data/emoji/"
        emoji = ""
+        commentCount = true # {{< version 0.2.13 >}}
+      # {{< version 0.2.13 >}} {{< link "https://waline.js.org" Waline >}} comment config (https://waline.js.org)
+      [params.page.comment.waline]
+        enable = false
+        serverURL = ""
+        visitor = false
+        emoji = ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
+        meta = ['nick', 'mail', 'link']
+        requiredMeta = []
+        login = 'enable'
+        wordLimit = 0
+        pageSize = 10
+        uploadImage = false
+        highlight = true
+        mathTagSupport = false
+        commentCount = false
      # {{< link "https://developers.facebook.com/docs/plugins/comments" "Facebook comment" >}} config (https://developers.facebook.com/docs/plugins/comments)
      [params.page.comment.facebook]
        enable = false
@@ -564,6 +626,16 @@ Please open the code block below to view the complete sample configuration :(far
        label = ""
        lightTheme = "github-light"
        darkTheme = "github-dark"
+      # {{< version 0.2.13 >}} {{< link "https://twikoo.js.org/" "Twikoo" >}} comment config (https://twikoo.js.org/)
+      [params.page.comment.twikoo]
+        enable = false
+        envId = ""
+        region = ""
+        path = ""
+        visitor = true
+        commentCount = true
+        # It take effect when `params.page.lightgallery` is enabled
+        lightgallery = false
    # {{< version 0.2.7 >}} Third-party library config
    [params.page.library]
      [params.page.library.css]
@@ -605,7 +677,7 @@ Please open the code block below to view the complete sample configuration :(far
    # watermark's transparency
    opacity = 0.1
    # parent of watermark's container
-    appendTo = '.wrapper>.main'
+    appendTo = '.wrapper>main'
    # watermark's width. unit: px
    width = 150
    # watermark's height. unit: px
@@ -618,6 +690,8 @@ Please open the code block below to view the complete sample configuration :(far
    rotate = 15
    # watermark's fontSize. unit: rem
    fontSize = 0.85
+    # watermark's fontFamily
+    fontFamily = 'inherit'

  # {{< version 0.2.12 >}} Busuanzi count
  [params.ibruce]
@@ -627,13 +701,15 @@ Please open the code block below to view the complete sample configuration :(far
    # Site creation time e.g. '2019-02-03T19:30:34+08:00'
    siteTime = ''

-  # Site verification code config for Google/Bing/Yandex/Pinterest/Baidu
+  # Site verification code config for Google/Bing/Yandex/Pinterest/Baidu/360/Sogou
  [params.verification]
    google = ""
    bing = ""
    yandex = ""
    pinterest = ""
    baidu = ""
+    so = ""
+    sogou = ""

  # {{< version 0.2.10 >}} Site SEO config
  [params.seo]
@@ -680,18 +756,26 @@ Please open the code block below to view the complete sample configuration :(far
    polyfill = false
    # whether to use object-fit-images to be compatible with older browsers
    objectFit = false
+  
+  # {{< version 0.2.12 >}} Custom JS at last
+  # "_custom.js" located in "themes/FixIt/assets/js/"
+  # you can store your custom JS file in the same path under your project:
+  # "assets/js/_custom.js"
+  [params.customJS]
+    enable = true

-# Markup related config in Hugo
+# Markup related configuration in Hugo
 [markup]
  # {{< link "https://gohugo.io/content-management/syntax-highlighting" "Syntax Highlighting" >}} (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
+    ########## necessary configurations ##########
+    # {{< link "https://github.com/Lruihao/FixIt/issues/43" >}}
    codeFences = true
-    guessSyntax = true
    lineNos = true
    lineNumbersInTable = true
-    # false is a necessary configuration
-    # ({{< link "https://github.com/dillonzq/LoveIt/issues/158" >}})
-    noClasses = false
+    noClasses = false 
+    ########## necessary configurations ##########
+    guessSyntax = true
  # Goldmark is from Hugo 0.60 the default library used for Markdown
  [markup.goldmark]
    [markup.goldmark.extensions]
@@ -853,6 +937,78 @@ $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospac

 In `assets/css/_custom.scss`, you can add some css style code to customize the style.

+#### 3.3.1 Page Style {#page-style}
+
+{{< version 0.2.13 >}}
+
+The FixIt theme provides a page width configuration option `pageStyle` and three values.
+
+* **narrow** Keep `<v0.2.12` page/toc width ratio
+* **normal** New default page/toc width ratio
+* **wide** Larger page/toc width ratio
+
+In addition, you can also customize the `pageStyle` value in `assets/css/_custom.scss`
+
+For example: `pageStyle="custom"`
+
+```scss
+@media only screen and (min-width: 1441px) {
+  [page-style='custom'] {
+    .page {
+      width: 70%;
+    }
+
+    aside {
+      width: 15%;
+    }
+  }
+}
+
+@media only screen and (max-width: 1440px) {
+  [page-style='custom'] {
+    .page {
+      width: 60%;
+    }
+
+    aside {
+      width: 20%;
+    }
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  [page-style='custom'] {
+    .page {
+      width: 56%;
+    }
+
+    aside {
+      width: 22%;
+    }
+  }
+}
+```
+
+#### 3.3.2 Print Style {#print-style}
+
+{{< version 0.2.13 >}}
+
+There are three css common class for print view in FixIt Theme.
+
+* `page-break-before` Insert page break before element
+* `page-break-after` Insert page break after element
+* `print-d-none` Hide elements in print view
+
+Here is a simple exmple:
+
+```html
+<div class="page-break-before"></div>
+<div class="page-break-after"></div>
+<div class="print-d-none">
+  Something you want to hide in the print view is written here.
+</div>
+```
+
 ## 4 Multilingual and i18n

 **FixIt** theme is fully compatible with Hugo multilingual mode, which provides in-browser language switching.
@@ -125,7 +125,7 @@ theme = "FixIt"
 [markup]
  # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
-    # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
+    # false 是必要的设置 (https://github.com/Lruihao/FixIt/issues/43)
    noClasses = false
 ```

@@ -258,9 +258,9 @@ hugo

  # 页面头部导航栏配置
  [params.header]
-    # 桌面端导航栏模式 ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # 移动端导航栏模式 ("fixed", "normal", "auto")
+    # 桌面端导航栏模式 ("sticky", "normal", "auto")
+    desktopMode = "sticky"
+    # 移动端导航栏模式 ("sticky", "normal", "auto")
    mobileMode = "auto"
    # {{< version 0.2.0 >}} 页面头部导航栏标题配置
    [params.header.title]
@@ -309,6 +309,12 @@ hugo
    dateFormat = "01-02"
    # RSS 文章数目
    rss = 10
+    # {{< version 0.2.13 >}} 最近更新文章设置
+    [params.section.recentlyUpdated]
+      enable = false
+      rss = false
+      days = 30
+      maxCount = 10

  # {{< version 0.2.0 >}} List（目录或标签）页面配置
  [params.list]
@@ -326,6 +332,8 @@ hugo
    # 主页个人信息
    [params.home.profile]
      enable = true
+      # {{< version 0.2.13 >}} 选择使用 Gravatar 源站或其他镜像站，若留空则为默认的 "www.gravatar.com"
+      gravatarSite = ""
      # Gravatar 邮箱，用于优先在主页显示的头像
      gravatarEmail = ""
      # 主页显示头像的 URL
@@ -410,6 +418,16 @@ hugo
    XMPP = ""
    Matrix = ""
    Bilibili = ""
+    # ORCID, ... , CSDN {{< version 0.2.13 >}}
+    ORCID = ""
+    Liberapay = ""
+    Ko-Fi = ""
+    BuyMeaCoffee = ""
+    Linktree = ""
+    QQ = ""
+    QQGroup = ""
+    Diaspora = ""
+    CSDN = ""
    Email = "xxxx@xxxx.com"
    RSS = true # {{< version 0.2.0 >}}

@@ -435,6 +453,8 @@ hugo
    linkToMarkdown = true
    # {{< version 0.2.4 >}} 是否在 RSS 中显示全文内容
    rssFullText = false
+    # {{< version 0.2.13 >}} 页面样式 ("narrow", "normal", "wide", ...)
+    pageStyle = "normal"
    # {{< version 0.2.0 >}} 目录配置
    [params.page.toc]
      # 是否使用目录
@@ -443,10 +463,23 @@ hugo
      keepStatic = true
      # 是否使侧边目录自动折叠展开
      auto = true
+      # {{< version 0.2.13 >}} 目录位置 ("left", "right")
+      position = "right"
+    # {{< version 0.2.13 >}} 在文章开头显示提示信息，提醒读者文章内容可能过时
+    [params.page.expirationReminder]
+      enable = false
+      # 如果文章最后更新于这天数之前，显示提醒
+      reminder = 90
+      # 如果文章最后更新于这天数之前，显示警告
+      warning = 180
+      # 如果文章到期是否关闭评论
+      closeComment = false
    # {{< version 0.2.0 >}} 代码配置
    [params.page.code]
      # 是否显示代码块的复制按钮
      copy = true
+      # {{< version 0.2.13 >}} 是否显示代码块的编辑按钮
+      edit = true
      # 默认展开显示的代码行数
      maxShownLines = 10
    # {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} 数学公式 (https://katex.org)
@@ -508,9 +541,22 @@ hugo
      Skype = false
      Trello = false
      Mix = false
-    # {{< version 0.2.0 changed >}} 评论系统设置
+    # {{< version 0.2.13 changed >}} 评论系统设置
    [params.page.comment]
-      enable = true
+      enable = false
+      # {{< version 0.2.13 >}} {{< link "https://artalk.js.org/" Artalk >}} 评论系统设置 (https://artalk.js.org/)
+      [params.page.comment.artalk]
+        enable = false
+        server = "https://yourdomain/api/"
+        site = "默认站点"
+        placeholder = ""
+        noComment = ""
+        sendBtn = ""
+        editorTravel = true
+        flatMode = 'auto'
+        maxNesting = 3
+        # 当 `params.page.lightgallery` 启用时生效
+        lightgallery = false
      # {{< link "https://disqus.com/" Disqus >}} 评论系统设置 (https://disqus.com)
      [params.page.comment.disqus]
        # {{< version 0.1.1 >}}
@@ -546,6 +592,22 @@ hugo
        # 可以在你的项目下相同路径存放你自己的数据文件：
        # "assets/data/emoji/"
        emoji = ""
+        commentCount = true # {{< version 0.2.13 >}}
+      # {{< version 0.2.13 >}} {{< link "https://waline.js.org" Waline >}} 评论系统设置 (https://waline.js.org)
+      [params.page.comment.waline]
+        enable = false
+        serverURL = ""
+        visitor = false
+        emoji = ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
+        meta = ['nick', 'mail', 'link']
+        requiredMeta = []
+        login = 'enable'
+        wordLimit = 0
+        pageSize = 10
+        uploadImage = false
+        highlight = true
+        mathTagSupport = false
+        commentCount = false
      # {{< link "https://developers.facebook.com/docs/plugins/comments" "Facebook 评论系统" >}}设置 (https://developers.facebook.com/docs/plugins/comments)
      [params.page.comment.facebook]
        enable = false
@@ -575,6 +637,16 @@ hugo
        label = ""
        lightTheme = "github-light"
        darkTheme = "github-dark"
+      # {{< version 0.2.13 >}} {{< link "https://twikoo.js.org/" "Twikoo" >}} 评论系统设置 (https://twikoo.js.org/)
+      [params.page.comment.twikoo]
+        enable = false
+        envId = ""
+        region = ""
+        path = ""
+        visitor = true
+        commentCount = true
+        # 当 `params.page.lightgallery` 启用时生效
+        lightgallery = false
    # {{< version 0.2.7 >}} 第三方库配置
    [params.page.library]
      [params.page.library.css]
@@ -616,7 +688,7 @@ hugo
    # 水印透明度
    opacity = 0.1
    # 水印父节点
-    appendTo = '.wrapper>.main'
+    appendTo = '.wrapper>main'
    # 单水印宽度 单位：px
    width = 150
    # 单水印高度 单位：px
@@ -629,6 +701,8 @@ hugo
    rotate = 15
    # 水印字体大小，单位：rem
    fontSize = 0.85
+    # 水印字体
+    fontFamily = 'inherit'

  # {{< version 0.2.12 >}} 不蒜子统计
  [params.ibruce]
@@ -638,13 +712,15 @@ hugo
    # 网站创立时间 例：'2019-02-03T19:30:34+08:00'
    siteTime = ''

-  # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
+  # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu/360/Sogou
  [params.verification]
    google = ""
    bing = ""
    yandex = ""
    pinterest = ""
    baidu = ""
+    so = ""
+    sogou = ""

  # {{< version 0.2.10 >}} 网站 SEO 配置
  [params.seo]
@@ -691,17 +767,26 @@ hugo
    polyfill = false
    # 是否使用 object-fit-images 来兼容旧式浏览器
    objectFit = false
+  
+  # {{< version 0.2.12 >}} 页面最后添加自定义 JS
+  # "_custom.js" 位于 "themes/FixIt/assets/js" 目录
+  # 可以在你的项目下相同路径存放你自己的自定义 JS 文件：
+  # "assets/js/_custom.js"
+  [params.customJS]
+    enable = true

 # Hugo 解析文档的配置
 [markup]
  # {{< link "https://gohugo.io/content-management/syntax-highlighting" "语法高亮设置" >}} (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
+    ################## 必要的配置 ##################
+    # {{< link "https://github.com/Lruihao/FixIt/issues/43" >}}
    codeFences = true
-    guessSyntax = true
    lineNos = true
    lineNumbersInTable = true
-    # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
-    noClasses = false
+    noClasses = false 
+    ################## 必要的配置 ##################
+    guessSyntax = true
  # Goldmark 是 Hugo 0.60 以来的默认 Markdown 解析库
  [markup.goldmark]
    [markup.goldmark.extensions]
@@ -864,6 +949,78 @@ $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospac

 在 `assets/css/_custom.scss` 中，你可以添加一些 CSS 样式代码以自定义样式。

+#### 3.3.1 页面宽度 {#page-style}
+
+{{< version 0.2.13 >}}
+
+FixIt 主题提供了页面宽度配置选项 `pageStyle` 并提供三种选项。
+
+* **narrow** 保留 `<v0.2.12` 页面目录宽度比
+* **normal** 新的默认页面目录宽度比
+* **wide** 较大的页面目录宽度比
+
+另外，你还可以在 `assets/css/_custom.scss` 中，自定义 `pageStyle` 值
+
+例如： `pageStyle="custom"` 
+
+```scss
+@media only screen and (min-width: 1441px) {
+  [page-style='custom'] {
+    .page {
+      width: 70%;
+    }
+
+    aside {
+      width: 15%;
+    }
+  }
+}
+
+@media only screen and (max-width: 1440px) {
+  [page-style='custom'] {
+    .page {
+      width: 60%;
+    }
+
+    aside {
+      width: 20%;
+    }
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  [page-style='custom'] {
+    .page {
+      width: 56%;
+    }
+
+    aside {
+      width: 22%;
+    }
+  }
+}
+```
+
+#### 3.3.2 打印样式 {#print-style}
+
+{{< version 0.2.13 >}}
+
+在 FixIt 主题中，提供有三个打印视图相关的 css class
+
+* `page-break-before` 在元素之前插入分页符
+* `page-break-after` 在元素之后插入分页符
+* `print-d-none` 在打印视图中隐藏元素
+
+下面是一个简单的例子：
+
+```html
+<div class="page-break-before"></div>
+<div class="page-break-after"></div>
+<div class="print-d-none">
+  您希望在打印视图中隐藏的某些内容写在此处。
+</div>
+```
+
 ## 4 多语言和 i18n

 **FixIt** 主题完全兼容 Hugo 的多语言模式，并且支持在网页上切换语言。
@@ -209,7 +209,7 @@ Set `type: "friends"` in the front matter and create data file named `friends.ym
 - nickname: friend's name
  avatar: friend's avatar
  url: site link
-  discription: discription of friend/site
+  description: description of friend/site
 ```

 {{< admonition tip >}}
@@ -208,7 +208,7 @@ hugo new --kind post-bundle posts/bar/
 - nickname: 朋友名字
  avatar: 朋友头像
  url: 站点链接
-  discription: 对朋友或其站点的说明
+  description: 对朋友或其站点的说明
 ```

 {{< admonition tip >}}
@@ -2,7 +2,6 @@
 weight: 4
 title: "Theme Documentation - Extended Shortcodes"
 date: 2020-03-03T16:29:41+08:00
-lastmod: 2022-01-25T15:48:59+08:00
 draft: false
 author: "Lruihao"
 authorLink: "https://lruihao.cn"
@@ -43,7 +42,7 @@ And the **second** one is the tag name of the HTML element wrapping the content

 Example `style` input:

-```markdown
+```go-html-template
 {{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
 This is a **right-aligned** paragraph.
 {{</* /style */>}}
@@ -79,6 +78,14 @@ The `link` shortcode has the following named parameters:

    `title` attribute of the HTML `a` tag, which will be shown when hovering on the link.

+* **card** *[optional]* (**fourth** positional parameter) {{< version 0.2.12 >}}
+
+    是否显示为卡片式链接，默认值 `false`。
+
+* **download** *[optional]* {{< version 0.2.12 >}}
+
+    `optional` attribute of the HTML `a` tag.
+
 * **class** *[optional]*

    `class` attribute of the HTML `a` tag.
@@ -89,7 +96,7 @@ The `link` shortcode has the following named parameters:

 Example `link` input:

-```markdown
+```go-html-template
 {{</* link "https://assemble.io" */>}}
 Or
 {{</* link href="https://assemble.io" */>}}
@@ -111,7 +118,7 @@ The rendered output looks like this:

 Example `link` input with a title:

-```markdown
+```go-html-template
 {{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
 Or
 {{</* link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" */>}}
@@ -121,6 +128,28 @@ The rendered output looks like this (hover over the link, there should be a tool

 {{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}

+Example `link` input for card type:
+
+```go-html-template
+{{</* link "https://github.com/Lruihao/FixIt" "FixIt Theme" "source of FixIt Theme" true */>}}
+Or
+{{</* link href="https://github.com/Lruihao/FixIt" content="FixIt Theme" title="source of FixIt Theme" card=true */>}}
+```
+
+The rendered output looks like this:
+
+{{< link "https://github.com/Lruihao/FixIt" "FixIt Theme" "source of FixIt Theme" true >}}
+
+Example `link` input with download attribute:
+
+```go-html-template
+{{</* link href="/music/Wavelength.mp3" content="Wavelength" title="Download Wavelength.mp3" download="Wavelength.mp3" */>}}
+```
+
+The rendered output looks like this:
+
+{{< link href="/music/Wavelength.mp3" content="Wavelength" title="Download Wavelength.mp3" download="Wavelength.mp3" >}}
+
 ## 3 image {#image}

 {{< version 0.2.0 changed >}}
@@ -181,7 +210,7 @@ The `image` shortcode has the following named parameters:

 Example `image` input:

-```markdown
+```go-html-template
 {{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
 ```

@@ -251,7 +280,7 @@ The `admonition` shortcode has the following named parameters:

 * **title** *[optional]* (**second** positional parameter)

-    Title of the `admonition` banner, default value is the value of **type** parameter.
+    Title of the `admonition` banner, default value is the value of **type** parameter. (markdown support) {{< version 0.2.13 changed >}}

 * **open** *[optional]* (**third** positional parameter) {{< version 0.2.0 changed >}}

@@ -259,7 +288,7 @@ The `admonition` shortcode has the following named parameters:

 Example `admonition` input:

-```markdown
+```go-html-template
 {{</* admonition type=tip title="This is a tip" open=false */>}}
 A **tip** banner
 {{</* /admonition */>}}
@@ -285,7 +314,7 @@ Just insert your mermaid code in the `mermaid` shortcode and that’s it.

 Example **flowchart** `mermaid` input:

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
@@ -309,7 +338,7 @@ graph LR;

 Example **sequence diagram** `mermaid` input:

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 sequenceDiagram
    participant Alice
@@ -345,7 +374,7 @@ sequenceDiagram

 Example **GANTT** `mermaid` input:

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 gantt
    dateFormat  YYYY-MM-DD
@@ -389,7 +418,7 @@ gantt

 Example **class diagram** `mermaid` input:

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 classDiagram
    Class01 <|-- AveryLongClass : Cool
@@ -431,7 +460,7 @@ classDiagram

 Example **state diagram** `mermaid` input:

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 stateDiagram
    [*] --> Still
@@ -459,7 +488,7 @@ stateDiagram

 Example **git graph** `mermaid` input:

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 gitGraph:
 options
@@ -501,7 +530,7 @@ end

 Example **pie** `mermaid` input:

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 pie
    "Dogs" : 386
@@ -965,7 +994,7 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:

 Example simple `mapbox` input:

-```markdown
+```go-html-template
 {{</* mapbox 121.485 31.233 12 */>}}
 Or
 {{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
@@ -977,7 +1006,7 @@ The rendered output looks like this:

 Example `mapbox` input with the custom style:

-```markdown
+```go-html-template
 {{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
 Or
 {{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
@@ -1017,7 +1046,7 @@ The `music` shortcode has the following named parameters by custom music URL:

 Example `music` input by custom music URL:

-```markdown
+```go-html-template
 {{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
 ```

@@ -1036,7 +1065,7 @@ The `music` shortcode has one named parameter by music platform URL automatic id

 Example `music` input by music platform URL automatic identification:

-```markdown
+```go-html-template
 {{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
 Or
 {{</* music "https://music.163.com/#/playlist?id=60198" */>}}
@@ -1068,7 +1097,7 @@ The `music` shortcode has the following named parameters by custom music platfor

 Example `music` input by custom music platform:

-```markdown
+```go-html-template
 {{</* music server="netease" type="song" id="1868553" */>}}
 Or
 {{</* music netease song 1868553 */>}}
@@ -1142,7 +1171,7 @@ https://www.bilibili.com/video/BV1Sx411T7QQ

 Example `bilibili` input:

-```markdown
+```go-html-template
 {{</* bilibili BV1Sx411T7QQ */>}}
 Or
 {{</* bilibili id=BV1Sx411T7QQ */>}}
@@ -1161,7 +1190,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3

 Example `bilibili` input with `p`:

-```markdown
+```go-html-template
 {{</* bilibili BV1TJ411C7An 3 */>}}
 Or
 {{</* bilibili id=BV1TJ411C7An p=3 */>}}
@@ -1183,7 +1212,7 @@ Simple content is allowed in `Markdown` format and **without** rich block conten

 Example `typeit` input:

-```markdown
+```go-html-template
 {{</* typeit */>}}
 This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
 {{</* /typeit */>}}
@@ -1199,7 +1228,7 @@ Alternatively, you can use custom **HTML tags**.

 Example `typeit` input with `h4` tag:

-```markdown
+```go-html-template
 {{</* typeit tag=h4 */>}}
 This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
 {{</* /typeit */>}}
@@ -1217,7 +1246,7 @@ Code content is allowed and will be highlighted by named parameter `code` for th

 Example `typeit` input with `code`:

-```markdown
+```go-html-template
 {{</* typeit code=java */>}}
 public class HelloWorld {
    public static void main(String []args) {
@@ -1246,7 +1275,7 @@ A set of `typeit` contents with the same value of named parameter `group` will s

 Example `typeit` input with `group`:

-```markdown
+```go-html-template
 {{</* typeit group=paragraph */>}}
 **First** this paragraph begins
 {{</* /typeit */>}}
@@ -1278,7 +1307,7 @@ The script content can be guaranteed to be executed in order after all third-par

 Example `script` input:

-```markdown
+```go-html-template
 {{</* script */>}}
 console.log('Hello FixIt!');
 {{</* /script */>}}
@@ -1290,6 +1319,58 @@ You can see the output in the console of the developer tool.
 console.log('Hello FixIt!');
 {{< /script >}}

+## 12 details
+
+{{< version 0.2.13 >}}
+
+`details` is a shortcode to insert **:(fab fa-html5 fa-fw): HTML5 tag** details and summary in your post.
+
+The `details` shortcode has only one parameter:
+
+- **summary** *[optional]* (**first** positional parameter)
+
+    summary of details. (markdown support)
+
+Example `details` input:
+
+```go-html-template
+{{</* details "**Copyright** 2022." */>}}
+*All pages and graphics on this web site are the property of FixIt.*
+{{</* /details */>}}
+Or
+{{</* details summary="**Copyright** 2022." */>}}
+*All pages and graphics on this web site are the property of FixIt.*
+{{</* /details */>}}
+```
+
+The rendered output looks like this:
+
+{{< details "**Copyright** 2022." >}}
+*All pages and graphics on this web site are the property of FixIt.*
+{{< /details >}}
+
+## 13 center-quote
+
+{{< version 0.2.13 >}}
+
+`center-quote` is a shortcode to insert centered text blockquote tag in your post.
+
+Example `center-quote` input:
+
+```go-html-template
+{{</* center-quote */>}}
+**hello** *world*  
+this is a center-quote shortcode example.
+{{</* /center-quote */>}}
+```
+
+The rendered output looks like this:
+
+{{< center-quote >}}
+**hello** *world*  
+this is a center-quote shortcode example.
+{{< /center-quote >}}
+
 ---

 {{< admonition quote "Thanks" >}}
@@ -2,7 +2,6 @@
 weight: 4
 title: "主题文档 - 扩展 Shortcodes"
 date: 2020-03-03T16:29:59+08:00
-lastmod: 2022-01-25T15:48:59+08:00
 draft: false
 author: "Lruihao"
 authorLink: "https://lruihao.cn"
@@ -45,7 +44,7 @@ Hugo **extended** 版本对于 `style` shortcode 是必需的。

 一个 `style` 示例：

-```markdown
+```go-html-template
 {{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
 This is a **right-aligned** paragraph.
 {{</* /style */>}}
@@ -68,31 +67,39 @@ This is a **right-aligned** paragraph.

 `link` shortcode 有以下命名参数：

-* **href** *[必需]* (**第一个**位置参数）
+* **href** *[必需]*（**第一个**位置参数）

    链接的目标。

-* **content** *[可选]* (**第二个**位置参数）
+* **content** *[可选]*（**第二个**位置参数）

    链接的内容，默认值是 **href** 参数的值。

    *支持 Markdown 或者 HTML 格式。*

-* **title** *[可选]* (**第三个**位置参数）
+* **title** *[可选]*（**第三个**位置参数）

    HTML `a` 标签 的 `title` 属性，当悬停在链接上会显示的提示。

-* **rel** *[可选]*
+* **card** *[可选]*（**第四个**位置参数）{{< version 0.2.12 >}}

-    HTML `a` 标签 的 `rel` 补充属性。
+    是否显示为卡片式链接，默认值 `false`。
+
+* **download** *[可选]* {{< version 0.2.12 >}}
+
+    HTML `a` 标签 的 `download` 属性。

 * **class** *[可选]*

    HTML `a` 标签 的 `class` 属性。

+* **rel** *[可选]*
+
+    HTML `a` 标签 的 `rel` 补充属性。
+
 一个 `link` 示例：

-```markdown
+```go-html-template
 {{</* link "https://assemble.io" */>}}
 或者
 {{</* link href="https://assemble.io" */>}}
@@ -114,7 +121,7 @@ This is a **right-aligned** paragraph.

 一个带有标题的 `link` 示例：

-```markdown
+```go-html-template
 {{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
 或者
 {{</* link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" */>}}
@@ -124,6 +131,28 @@ This is a **right-aligned** paragraph.

 {{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}

+一个卡片式 `link` 示例：
+
+```go-html-template
+{{</* link "https://github.com/Lruihao/FixIt" "FixIt Theme" "source of FixIt Theme" true */>}}
+或者
+{{</* link href="https://github.com/Lruihao/FixIt" content="FixIt Theme" title="source of FixIt Theme" card=true */>}}
+```
+
+呈现的输出效果如下：
+
+{{< link "https://github.com/Lruihao/FixIt" "FixIt Theme" "source of FixIt Theme" true >}}
+
+一个可下载的 `link` 示例：
+
+```go-html-template
+{{</* link href="/music/Wavelength.mp3" content="Wavelength" title="Download Wavelength.mp3" download="Wavelength.mp3" */>}}
+```
+
+呈现的输出效果如下：
+
+{{< link href="/music/Wavelength.mp3" content="Wavelength" title="Download Wavelength.mp3" download="Wavelength.mp3" >}}
+
 ## 3 image {#image}

 {{< version 0.2.0 changed >}}
@@ -134,17 +163,17 @@ This is a **right-aligned** paragraph.

 `image` shortcode 有以下命名参数：

-* **src** *[必需]* (**第一个**位置参数）
+* **src** *[必需]*（**第一个**位置参数）

    图片的 URL.

-* **alt** *[可选]* (**第二个**位置参数）
+* **alt** *[可选]*（**第二个**位置参数）

    图片无法显示时的替代文本，默认值是 **src** 参数的值。

    *支持 Markdown 或者 HTML 格式。*

-* **caption** *[可选]* (**第三个**位置参数）
+* **caption** *[可选]*（**第三个**位置参数）

    图片标题。

@@ -184,7 +213,7 @@ This is a **right-aligned** paragraph.

 一个 `image` 示例：

-```markdown
+```go-html-template
 {{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
 ```

@@ -248,21 +277,21 @@ This is a **right-aligned** paragraph.

 `admonition` shortcode 有以下命名参数：

-* **type** *[必需]* (**第一个**位置参数）
+* **type** *[必需]*（**第一个**位置参数）

    `admonition` 横幅的类型，默认值是 `note`。

-* **title** *[可选]* (**第二个**位置参数）
+* **title** *[可选]*（**第二个**位置参数）

-    `admonition` 横幅的标题，默认值是 **type** 参数的值。
+    `admonition` 横幅的标题，默认值是 **type** 参数的值。（支持 markdown）{{< version 0.2.13 changed >}}

-* **open** *[可选]* (**第三个**位置参数） {{< version 0.2.0 changed >}}
+* **open** *[可选]*（**第三个**位置参数） {{< version 0.2.0 changed >}}

    横幅内容是否默认展开，默认值是 `true`。

 一个 `admonition` 示例：

-```markdown
+```go-html-template
 {{</* admonition type=tip title="This is a tip" open=false */>}}
 一个 **技巧** 横幅
 {{</* /admonition */>}}
@@ -288,7 +317,7 @@ This is a **right-aligned** paragraph.

 一个 **流程图** `mermaid` 示例：

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
@@ -312,7 +341,7 @@ graph LR;

 一个 **时序图** `mermaid` 示例：

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 sequenceDiagram
    participant Alice
@@ -348,7 +377,7 @@ sequenceDiagram

 一个 **甘特图** `mermaid` 示例：

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 gantt
    dateFormat  YYYY-MM-DD
@@ -392,7 +421,7 @@ gantt

 一个 **类图** `mermaid` 示例：

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 classDiagram
    Class01 <|-- AveryLongClass : Cool
@@ -434,7 +463,7 @@ classDiagram

 一个 **状态图** `mermaid` 示例：

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 stateDiagram
    [*] --> Still
@@ -462,7 +491,7 @@ stateDiagram

 一个 **Git 图** `mermaid` 示例：

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 gitGraph:
 options
@@ -504,7 +533,7 @@ end

 一个 **饼图** `mermaid` 示例：

-```markdown
+```go-html-template
 {{</* mermaid */>}}
 pie
    "Dogs" : 386
@@ -902,11 +931,11 @@ data = [

 `echarts` shortcode 还有以下命名参数：

-* **width** *[可选]* (**第一个**位置参数）
+* **width** *[可选]*（**第一个**位置参数）

    {{< version 0.2.0 >}} 数据可视化的宽度，默认值是 `100%`。

-* **height** *[可选]* (**第二个**位置参数）
+* **height** *[可选]*（**第二个**位置参数）

    {{< version 0.2.0 >}} 数据可视化的高度，默认值是 `30rem`。

@@ -918,27 +947,27 @@ data = [

 `mapbox` shortcode 有以下命名参数来使用 Mapbox GL JS:

-* **lng** *[必需]* (**第一个**位置参数）
+* **lng** *[必需]*（**第一个**位置参数）

    地图初始中心点的经度，以度为单位。

-* **lat** *[必需]* (**第二个**位置参数）
+* **lat** *[必需]*（**第二个**位置参数）

    地图初始中心点的纬度，以度为单位。

-* **zoom** *[可选]* (**第三个**位置参数）
+* **zoom** *[可选]*（**第三个**位置参数）

    地图的初始缩放级别，默认值是 `10`。

-* **marked** *[可选]* (**第四个**位置参数）
+* **marked** *[可选]*（**第四个**位置参数）

    是否在地图的初始中心点添加图钉，默认值是 `true`。

-* **light-style** *[可选]* (**第五个**位置参数）
+* **light-style** *[可选]*（**第五个**位置参数）

    浅色主题的地图样式，默认值是 [前置参数](../theme-documentation-content#front-matter) 或者 [网站配置](../theme-documentation-basics#site-configuration) 中设置的值。

-* **dark-style** *[可选]* (**第六个**位置参数）
+* **dark-style** *[可选]*（**第六个**位置参数）

    深色主题的地图样式，默认值是 [前置参数](../theme-documentation-content#front-matter) 或者 [网站配置](../theme-documentation-basics#site-configuration) 中设置的值。

@@ -968,7 +997,7 @@ data = [

 一个简单的 `mapbox` 示例：

-```markdown
+```go-html-template
 {{</* mapbox 121.485 31.233 12 */>}}
 或者
 {{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
@@ -980,7 +1009,7 @@ data = [

 一个带有自定义样式的 `mapbox` 示例：

-```markdown
+```go-html-template
 {{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" */>}}
 或者
 {{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" */>}}
@@ -1020,7 +1049,7 @@ data = [

 一个使用自定义音乐 URL 的 `music` 示例：

-```markdown
+```go-html-template
 {{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
 ```

@@ -1032,13 +1061,13 @@ data = [

 `music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别：

-* **auto** *[必需]]* (**第一个**位置参数）
+* **auto** *[必需]]*（**第一个**位置参数）

    用来自动识别的音乐平台 URL, 支持 `netease`, `tencent` 和 `xiami` 平台。

 一个使用音乐平台 URL 的自动识别的 `music` 示例：

-```markdown
+```go-html-template
 {{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
 或者
 {{</* music "https://music.163.com/#/playlist?id=60198" */>}}
@@ -1052,25 +1081,25 @@ data = [

 `music` shortcode 有以下命名参数来使用自定义音乐平台：

-* **server** *[必需]* (**第一个**位置参数）
+* **server** *[必需]*（**第一个**位置参数）

    [`netease`, `tencent`, `kugou`, `xiami`, `baidu`]

    音乐平台。

-* **type** *[必需]* (**第二个**位置参数）
+* **type** *[必需]*（**第二个**位置参数）

    [`song`, `playlist`, `album`, `search`, `artist`]

    音乐类型。

-* **id** *[必需]* (**第三个**位置参数）
+* **id** *[必需]*（**第三个**位置参数）

    歌曲 ID, 或者播放列表 ID, 或者专辑 ID, 或者搜索关键词，或者创作者 ID.

 一个使用自定义音乐平台的 `music` 示例：

-```markdown
+```go-html-template
 {{</* music server="netease" type="song" id="1868553" */>}}
 或者
 {{</* music netease song 1868553 */>}}
@@ -1144,7 +1173,7 @@ https://www.bilibili.com/video/BV1Sx411T7QQ

 一个 `bilibili` 示例：

-```markdown
+```go-html-template
 {{</* bilibili BV1Sx411T7QQ */>}}
 或者
 {{</* bilibili id=BV1Sx411T7QQ */>}}
@@ -1162,7 +1191,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3

 一个带有 `p` 参数的 `bilibili` 示例：

-```markdown
+```go-html-template
 {{</* bilibili BV1TJ411C7An 3 */>}}
 或者
 {{</* bilibili id=BV1TJ411C7An p=3 */>}}
@@ -1184,7 +1213,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3

 一个 `typeit` 示例：

-```markdown
+```go-html-template
 {{</* typeit */>}}
 这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落* ...
 {{</* /typeit */>}}
@@ -1200,7 +1229,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3

 一个带有 `h4` 标签的 `typeit` 示例：

-```markdown
+```go-html-template
 {{</* typeit tag=h4 */>}}
 这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落* ...
 {{</* /typeit */>}}
@@ -1218,7 +1247,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3

 一个带有 `code` 参数的 `typeit` 示例：

-```markdown
+```go-html-template
 {{</* typeit code=java */>}}
 public class HelloWorld {
    public static void main(String []args) {
@@ -1247,7 +1276,7 @@ public class HelloWorld {

 一个带有 `group` 参数的 `typeit` 示例：

-```markdown
+```go-html-template
 {{</* typeit group=paragraph */>}}
 **首先**, 这个段落开始
 {{</* /typeit */>}}
@@ -1280,7 +1309,7 @@ public class HelloWorld {

 一个 `script` 示例：

-```markdown
+```go-html-template
 {{</* script */>}}
 console.log('Hello FixIt!');
 {{</* /script */>}}
@@ -1292,6 +1321,57 @@ console.log('Hello FixIt!');
 console.log('Hello FixIt!');
 {{< /script >}}

+## 12 details
+
+{{< version 0.2.13 >}}
+
+`details` shortcode 用来在你的文章中插入 **:(fab fa-html5 fa-fw): HTML5 标签** details 和 summary。
+
+`details` shortcode 只有一个参数：
+- **summary** *[可选]* (**第一个**位置参数）
+
+    summary 标签的内容（支持 markdown）
+
+一个 `details` 示例：
+
+```go-html-template
+{{</* details "**Copyright** 2022." */>}}
+*All pages and graphics on this web site are the property of FixIt.*
+{{</* /details */>}}
+或者
+{{</* details summary="**Copyright** 2022." */>}}
+*All pages and graphics on this web site are the property of FixIt.*
+{{</* /details */>}}
+```
+
+呈现的输出效果如下：
+
+{{< details "**Copyright** 2022." >}}
+*All pages and graphics on this web site are the property of FixIt.*
+{{< /details >}}
+
+## 13 center-quote
+
+{{< version 0.2.13 >}}
+
+`center-quote` shortcode 用来在你的文章中插入文本居中的 blockquote 标签。
+
+一个 `center-quote` 示例：
+
+```go-html-template
+{{</* center-quote */>}}
+**hello** *world*  
+this is a center-quote shortcode example.
+{{</* /center-quote */>}}
+```
+
+呈现的输出效果如下：
+
+{{< center-quote >}}
+**hello** *world*  
+this is a center-quote shortcode example.
+{{< /center-quote >}}
+
 ---

 {{< admonition quote "感谢" >}}
@@ -0,0 +1,15 @@
+---
+title: "center-quote shortcode"
+date: 2022-03-07T22:31:22+08:00
+type: 'posts'
+draft: true
+---
+
+normal content
+
+> normal blockquote content
+
+{{< center-quote >}}
+**hello** *world*  
+this is a center-quote shortcode example.
+{{< /center-quote >}}
@@ -0,0 +1,163 @@
+---
+title: "Highlight Code"
+date: 2022-02-27T18:45:22+08:00
+type: 'posts'
+draft: true
+---
+
+`inline code`
+```markdown
+1. first
+2. second
+
+> bq
+
+**blod** *italic*
+
+---
+++
+***
+```
+
+```java
+/**
+ * @author John Smith <john.smith@example.com>
+ */
+package l2f.gameserver.model;
+
+public abstract strictfp class L2Char extends L2Object {
+  public static final Short ERROR = 0x0001;
+
+  public void moveTo(int x, int y, int z) {
+    _ai = null;
+    log("Should not be called");
+    if (1 > 5) { // wtf!?
+      return;
+    }
+  }
+}
+
+```
+
+```go
+package main
+
+import "fmt"
+
+func main() {
+    ch := make(chan float64)
+    ch <- 1.0e10    // magic number
+    x, ok := <- ch
+    defer fmt.Println(`exitting now\`)
+    go println(len("hello world!"))
+    return
+}
+```
+
+```scss
+pre {
+  margin: 0;
+  padding: .25rem 0 .25rem .5rem;
+  overflow: auto;
+  @include tab-size(4);
+
+  background: $code-background-color;
+
+  [theme=dark] & {
+    background: $code-background-color-dark;
+  }
+
+  code {
+    padding: 0;
+  }
+
+  img {
+    min-height: 1em;
+    max-height: 1.2em;
+    vertical-align: text-bottom;
+  }
+}
+```
+
+```diff
+- theme = "LoveIt"
+ theme = "FixIt"
+! enhancements and fixes
+```
+
+```javascript
+function $initHighlight(block, cls) {
+  try {
+    if (cls.search(/\bno\-highlight\b/) != -1)
+      return process(block, true, 0x0F) +
+             ` class="${cls}"`;
+  } catch (e) {
+    /* handle exception */
+  }
+  for (var i = 0 / 2; i < classes.length; i++) {
+    if (checkCondition(classes[i]) === undefined)
+      console.log('undefined');
+  }
+
+  return (
+    <div>
+      <web-component>{block}</web-component>
+    </div>
+  )
+}
+
+export  $initHighlight;
+```
+
+```html
+<!DOCTYPE html>
+<title>Title</title>
+
+<style>body {width: 500px;}</style>
+
+<script type="application/javascript">
+  function $init() {return true;}
+</script>
+
+<body>
+  <p checked class="title" id='title'>Title</p>
+  <!-- here goes the rest of the page -->
+</body>
+```
+
+```yaml
+# - nickname: 标题
+#   avatar: 头像
+#   url: 站点
+#   description: 描述
+- nickname: Lruihao
+  avatar: https://gravatar.loli.net/avatar/3f985efb5907ca52944a3cd7edd51606?d=wavatar&v=1.3.10
+  url: https://lruihao.cn
+  description: 不怕萬人阻擋，只怕自己投降
+```
+
+```html
+<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
+```
+
+    <p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
+
+{{< highlight javascript "linenos=table,hl_lines=6-9,linenostart=287" >}}
+/**
+ * 把字符串的文件後綴轉成數組
+ * @param {String} str 待轉化字符串
+ * @returns {Array|null} 轉化后的數組
+ */
+var _str2Array = (str) => {
+  if (typeof (str) !== String && !Array.isArray(str)) {
+    return null;
+  }
+  if (!Array.isArray(str)) {
+    return str.split(',');
+  }
+};
+{{< /highlight >}}
+
+---
+
+{{< gist spf13 7896402 >}}
@@ -2,21 +2,21 @@
 # - nickname: friend's name 朋友名字
 #   avatar: friend's avatar 朋友头像
 #   url: site link 站点链接
-#   discription: discription of friend/site 对朋友或其站点的说明
+#   description: description of friend/site 对朋友或其站点的说明

 - nickname: FixIt Source
  avatar: /images/Apple-Devices-Preview.png
  url: https://github.com/Lruihao/FixIt
-  discription: A clean, elegant but advanced blog theme for Hugo
+  description: A clean, elegant but advanced blog theme for Hugo
 - nickname: FixIt Demo
  avatar:
  url: /
-  discription: 一个简洁、优雅且高效的 Hugo 主题
+  description: 一个简洁、优雅且高效的 Hugo 主题
 - nickname: Lruihao
  avatar: https://lruihao.cn/images/avatar.jpg
  url: https://lruihao.cn
-  discription: Lruihao's Note
+  description: Lruihao's Note
 - nickname: Cell
  avatar: https://avatars.githubusercontent.com/u/33419593?v=4
  url: https://github.com/Lruihao
-  discription:  Lruihao's GitHub
+  description:  Lruihao's GitHub
@@ -29,9 +29,13 @@ other = "Category"

 [categories]
 other = "Categories"
-
 # === Taxonomy ===

+# === Section ===
+[recentlyUpdated]
+other = "Recently Updated"
+# === Section ===
+
 # === Pagination ===
 [more]
 other = "More"
@@ -92,6 +96,12 @@ other = "en"
 [copyToClipboard]
 other = "Copy to clipboard"

+[editLockTitle]
+other = "Lock editable code block"
+
+[editUnLockTitle]
+other = "Unlock editable code block"
+
 [cookieconsentMessage]
 other = "This website uses Cookies to improve your experience."

@@ -128,6 +138,9 @@ other = "{{ .Count }} minutes"
 [views]
 other = "views"

+[comments]
+other = "comments"
+
 [author]
 other = "Author"

@@ -145,6 +158,9 @@ other = "Home"

 [readMore]
 other = "Read More"
+
+[expirationReminder]
+other = "This article was last updated on {{ .Date }}, the content may be out of date."
 # === posts/single.html ===

 # === 404.html ===
@@ -30,9 +30,13 @@ other = "分类"

 [categories]
 other = "分类"
-
 # === Taxonomy ===

+# === Section ===
+[recentlyUpdated]
+other = "最近更新"
+# === Section ===
+
 # === Pagination ===
 [more]
 other = "更多"
@@ -99,6 +103,12 @@ other = "lib/lunr/lunr.segmentit.js"
 [copyToClipboard]
 other = "复制到剪贴板"

+[editLockTitle]
+other = "锁定可编辑代码块"
+
+[editUnLockTitle]
+other = "解锁可编辑代码块"
+
 [cookieconsentMessage]
 other = "本网站使用 Cookies 来改善您的浏览体验."

@@ -133,6 +143,9 @@ other = "预计阅读 {{ .Count }} 分钟"
 [views]
 other = "次阅读"

+[comments]
+other = "条评论"
+
 [author]
 other = "作者"

@@ -150,6 +163,9 @@ other = "主页"

 [readMore]
 other = "阅读全文"
+
+[expirationReminder]
+other = "本文最后更新于 {{ .Date }}，文中内容可能已过时。"
 # === posts/single.html ===

 # === 404.html ===
@@ -30,9 +30,13 @@ other = "分類"

 [categories]
 other = "分類"
-
 # === Taxonomy ===

+# === Section ===
+[recentlyUpdated]
+other = "最近更新"
+# === Section ===
+
 # === Pagination ===
 [more]
 other = "更多"
@@ -99,6 +103,12 @@ other = "lib/lunr/lunr.segmentit.js"
 [copyToClipboard]
 other = "複製到剪貼板"

+[editLockTitle]
+other = "鎖定可編輯代碼塊"
+
+[editUnLockTitle]
+other = "解鎖可編輯代碼塊"
+
 [cookieconsentMessage]
 other = "本網站使用 Cookies 來改善您的流覽體驗."

@@ -133,6 +143,9 @@ other = "預計閱讀 {{ .Count }} 分鐘"
 [views]
 other = "次閱讀"

+[comments]
+other = "條評論"
+
 [author]
 other = "作者"

@@ -150,6 +163,9 @@ other = "主頁"

 [readMore]
 other = "閱讀全文"
+
+[expirationReminder]
+other = "本文最後更新於 {{ .Date }}，文中內容可能已過時。"
 # === posts/single.html ===

 # === 404.html ===
@@ -25,10 +25,9 @@
    {{- /* Body wrapper */ -}}
    <div class="wrapper">
      {{- partial "header.html" . -}}
-      <main class="main">
-        <div class="container">
-          {{- block "content" . }}{{ end -}}
-        </div>
+      {{- $toc := .Scratch.Get "toc" -}}
+      <main class="container{{ if (eq $toc.enable true) | and (eq $toc.position `left`) }}-reverse{{ end }}" page-style="{{ (.Scratch.Get `params`).pageStyle | default `normal` }}">
+        {{- block "content" . }}{{ end -}}
      </main>
      {{- partial "footer.html" . -}}
    </div>
@@ -5,8 +5,9 @@
 {{- define "content" -}}
  <div class="page archive">
    {{- /* Title */ -}}
-    <h2 class="single-title animated pulse faster">
+    <h2 class="single-title animate__animated animate__pulse animate__faster">
      {{- .Params.Title | default (T .Section) | default .Section | dict "Some" | T "allSome" -}}
+      &nbsp;<sup>{{- len .Pages -}}</sup>
    </h2>

    {{- /* Paginate */ -}}
@@ -17,14 +18,15 @@
      {{- else -}}
        {{- $pages = .Paginate $pages -}}
      {{- end -}}
+      {{- partial "recently-updated.html" . -}}
      {{- range $pages.PageGroups -}}
-        <h3 class="group-title">{{ .Key }}</h3>
+      <h3 class="group-title">{{ .Key }}</h3>
        {{- range .Pages -}}
          <article class="archive-item">
            <a href="{{ .RelPermalink }}" class="archive-item-link">
              {{- .Title -}}
            </a>
-            <span class="archive-item-date" title={{ "2006-01-02 15:04:05" | .Date.Format }}>
+            <span class="archive-item-date" title='{{ "2006-01-02 15:04:05" | .Date.Format }}'>
              {{- $.Site.Params.section.dateFormat | default "01-02" | .Date.Format -}}
            </span>
          </article>
@@ -4,7 +4,7 @@
  {{- $params := .Scratch.Get "params" -}}
  <div class="page single special">
    {{- /* Title */ -}}
-    <h1 class="single-title animated pulse faster">
+    <h1 class="single-title animate__animated animate__pulse animate__faster">
      {{- .Title -}}
    </h1>

@@ -11,7 +11,7 @@
  {{- end -}}
  {{- with $image -}}
    <div class="featured-image-preview">
-      <a href="{{ $.RelPermalink }}">
+      <a href="{{ $.RelPermalink }}" aria-label="{{ $.Title }}">
        {{- dict "Src" . "Title" $.Description "Resources" $.Resources | partial "plugin/image.html" -}}
      </a>
    </div>
@@ -32,7 +32,7 @@
    </span>

    {{- with .Site.Params.dateFormat | default "2006-01-02" | .PublishDate.Format -}}
-      &nbsp;<span class="post-publish" title={{ "2006-01-02 15:04:05" | $.PublishDate.Format }}>
+      &nbsp;<span class="post-publish" title='{{ "2006-01-02 15:04:05" | $.PublishDate.Format }}'>
        {{- printf `<time datetime="%v">%v</time>` . . | dict "Date" | T "publishedOnDate" | safeHTML -}}
      </span>
    {{- end -}}
@@ -4,7 +4,7 @@
 {{- $params := .Scratch.Get "params" -}}
  <div class="page single special friends">
    {{- /* Title */ -}}
-    <h1 class="single-title animated pulse faster">
+    <h1 class="single-title animate__animated animate__pulse animate__faster">
      {{- .Title -}}
    </h1>

@@ -18,7 +18,7 @@
    <script src="//at.alicdn.com/t/font_578712_g26jo2kbzd5qm2t9.js" async defer></script>
    <div class="friend-links">
      {{ range $index, $friend := .Site.Data.friends }}
-        <a class="friend-link" title="{{ $friend.discription }}" href="{{ $friend.url | safeURL }}" rel="external nofollow noopener noreferrer" target="_blank">
+        <a class="friend-link" title="{{ $friend.description }}" href="{{ $friend.url | safeURL }}" rel="external nofollow noopener noreferrer" target="_blank">
          {{ if $friend.avatar }}
            <img class="friend-avatar lazyload" src="{{ $loading.RelPermalink }}" data-src="{{ $friend.avatar }}" alt="{{ $friend.nickname }}" />
          {{ else }}
@@ -4,7 +4,7 @@

 {{- define "content" -}}
  <div class="page" id="content-offline">
-    <h1 class="offline-title animated pulse faster">{{- T "offlineTitle" -}}</h1>
+    <h1 class="offline-title animate__animated animate__pulse animate__faster">{{- T "offlineTitle" -}}</h1>
    <h2 class="offline-subtitle">
      <i class="fa-stack fa-xs">
        <i class="fas fa-wifi fa-stack-1x"></i>
@@ -57,6 +57,11 @@
 {{- $code := $params.code | default dict -}}
 {{- $config = cond (ne $code.maxShownLines nil) $code.maxShownLines 10 | dict "maxShownLines" | dict "code" | merge $config -}}

+{{- /* edit code */ -}}
+{{- if ne $code.edit false -}}
+  {{- $config = dict "editable" true "editLockTitle" (T "editLockTitle") "editUnLockTitle" (T "editUnLockTitle") | dict "code" | merge $config -}}
+{{- end -}}
+
 {{- /* clipboard.js */ -}}
 {{- if ne $code.copy false -}}
  {{- $source := $cdn.clipboardJS | default "lib/clipboard/clipboard.min.js" -}}
@@ -116,7 +121,7 @@
 {{- /* mermaid */ -}}
 {{- if (.Scratch.Get "this").mermaid -}}
  {{- $source := $cdn.mermaidJS | default "lib/mermaid/mermaid.min.js" -}}
-  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
  {{- $options := dict "targetPath" "lib/mermaid/mermaid.min.css" "enableSourceMap" true -}}
  {{- dict "Source" "lib/mermaid/mermaid.scss" "ToCSS" $options "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
 {{- end -}}
@@ -135,7 +140,7 @@
  {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
  {{- $source := $cdn.mapboxGLJS | default "lib/mapbox-gl/mapbox-gl.min.js" -}}
  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
-  {{- dict "Source" "lib/mapbox-gl/mapbox-gl-language.js" "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- dict "Source" "lib/mapbox-gl/mapbox-gl-language.js" "Minify" true "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
  {{- $config = dict "accessToken" $params.mapbox.accessToken "RTLTextPlugin" "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js" | dict "mapbox" | merge $config -}}
 {{- end -}}

@@ -170,18 +175,28 @@
 {{- if eq .Site.Params.pangu.enable true -}}
  {{- $source := $cdn.metingJS | default "lib/pangu/pangu.min.js" -}}
  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- $config = dict "enablePangu" true | merge $config -}}
 {{- end -}}

 {{- /* Watermark */ -}}
 {{- if eq .Site.Params.watermark.enable true -}}
-  {{- $source := "lib/watermark/watermark.min.js" -}}
-  {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- $source := $cdn.cellWatermarkJS | default "lib/cell-watermark/watermark.min.js" -}}
+  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- /* Hugo bug: case insensitive for `.Site.Params` */ -}}
+  {{- $config = dict "watermark" .Site.Params.watermark | merge $config -}}
 {{- end -}}

 {{- /* 不蒜子 */ -}}
 {{- if eq .Site.Params.ibruce.enable true -}}
  {{- $source := "//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" -}}
  {{- dict "Source" $source "Fingerprint" $fingerprint "Async" true "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- $ibruceConfig := dict "enable" true "siteTime" .Site.Params.ibruce.siteTime -}}
+  {{- $config = dict "ibruce" $ibruceConfig | merge $config -}}
+{{- end -}}
+
+{{- /* PWA */ -}}
+{{- if eq hugo.Environment "production" -}}
+  {{- $config = dict "enablePWA" .Site.Params.enablePWA | merge $config -}}
 {{- end -}}

 {{- range $params.library.css -}}
@@ -209,10 +224,7 @@
 {{- /* Custom script */ -}}
 {{- if eq .Site.Params.customJS.enable true -}}
  {{- $source = "js/_custom.js" -}}
-  {{- if eq .Site.Params.customJS.minify true -}}
-    {{- $source = "js/_custom.min.js" -}}
-  {{- end -}}
-  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- dict "Source" $source "Minify" true "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
 {{- end -}}

 {{- with (.Scratch.Get "this").scriptArr -}}
@@ -228,77 +240,3 @@
 {{- end -}}

 {{- partial "plugin/analytics.html" . -}}
-
-{{- /* Initialize libraries scripts */ -}}
-<script type="text/javascript">
-{{- /* Calculate run time */ -}}
-{{- if eq .Site.Params.ibruce.enable true | and .Site.Params.ibruce.siteTime -}}
-  function createTime() {
-    let now = new Date();
-    let run = new Date({{ $.Site.Params.ibruce.siteTime }});
-    //總的秒數
-    let runTime = (now - run) / 1000,
-      days = Math.floor(runTime / 60 / 60 / 24),
-      hours = Math.floor(runTime / 60 / 60 - (24 * days)),
-      minutes = Math.floor(runTime / 60 - (24 * 60 * days) - (60 * hours)),
-      seconds = Math.floor((now - run) / 1000 - (24 * 60 * 60 * days) - (60 * 60 * hours) - (60 * minutes));
-    document.querySelector(".run-times").innerHTML = `${days},${String(hours).padStart(2,0)}:${String(minutes).padStart(2,0)}:${String(seconds).padStart(2,0)}`;
-  }
-{{- end -}}
-
-/**
- * Immediate.
- */
-(() => {
-  {{- /* PWA Initialization */ -}}
-  {{- if eq hugo.Environment "production" | and .Site.Params.enablePWA -}}
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker
-        .register('/service-worker.min.js', { scope: '/' })
-        .then(function (registration) {
-          // console.log('Service Worker Registered');
-        })
-        .catch(function (error) {
-          console.error('error: ', error);
-        });
-      navigator.serviceWorker.ready.then(function (registration) {
-        // console.log('Service Worker Ready');
-      });
-    }
-  {{- end -}}
-
-  {{- /* Watermark Initialization */ -}}
-  {{- if eq .Site.Params.watermark.enable true -}}
-    {{- with .Site.Params.watermark -}}
-      new Watermark({
-        content: {{ .Content }} || '<i class="fa-stack fa-xs logo-icon"><i class="fas fa-bug fa-stack-1x"></i><i class="fas fa-ban fa-stack-2x"></i></i> FixIt Theme',
-        appendTo: {{ .AppendTo }} || '.wrapper>.main',
-        opacity: {{ .Opacity }},
-        width: {{ .Width }},
-        height: {{ .Height }},
-        rowSpacing: {{ .RowSpacing }},
-        colSpacing: {{ .ColSpacing }},
-        rotate: {{ .Rotate }},
-        fontSize: {{ .FontSize }}
-      });
-    {{- end -}}
-  {{- end -}}
-
-  {{- /* Site time Initialization */ -}}
-  {{- if eq .Site.Params.ibruce.enable true | and .Site.Params.ibruce.siteTime -}}
-    var siteTime = setInterval("createTime()", 500);
-    document.addEventListener("visibilitychange", () => {
-      if (document.hidden) {
-        return clearInterval(siteTime);
-      }
-      var siteTime = setInterval("createTime()", 500);
-    });
-  {{- end -}}
-
-  document.addEventListener('DOMContentLoaded', () => {
-    // Listen to any DOM change and automatically perform spacing via MutationObserver()
-    {{ if eq .Site.Params.pangu.enable true }}pangu.autoSpacingPage();{{ end }}
-  });
-
-})();
-</script>
@@ -5,6 +5,47 @@

 {{- if $comment.enable -}}
  <div id="comments">
+    {{- /* Artalk Comment System */ -}}
+    {{- $artalk := $comment.artalk | default dict -}}
+    {{- if $artalk.enable -}}
+      <div id="artalk" class="comment"></div>
+      {{- $source := $cdn.artalkCSS | default "lib/artalk/Artalk.min.css" -}}
+      {{- dict "Source" $source "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
+      {{- $source := $cdn.artalkJS | default "lib/artalk/Artalk.min.js" -}}
+      {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+      {{- $commentConfig = dict "el" "#artalk" "pageKey" .Permalink "pageTitle" .Title | dict "artalk" | merge $commentConfig -}}
+      {{- with $artalk.server -}}
+        {{- $commentConfig = dict "server" . | dict "artalk" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $artalk.site -}}
+        {{- $commentConfig = dict "site" . | dict "artalk" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $artalk.placeholder -}}
+        {{- $commentConfig = dict "placeholder" . | dict "artalk" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $artalk.noComment -}}
+        {{- $commentConfig = dict "noComment" . | dict "artalk" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $artalk.sendBtn -}}
+        {{- $commentConfig = dict "sendBtn" . | dict "artalk" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $artalk.editorTravel -}}
+        {{- $commentConfig = dict "editorTravel" . | dict "artalk" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $artalk.flatMode -}}
+        {{- $commentConfig = dict "flatMode" . | dict "artalk" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $artalk.maxNesting -}}
+        {{- $commentConfig = dict "maxNesting" . | dict "artalk" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $artalk.lightgallery -}}
+        {{- $commentConfig = dict "lightgallery" . | dict "artalk" | merge $commentConfig -}}
+      {{- end -}}
+      <noscript>
+        Please enable JavaScript to view the comments powered by <a href="https://github.com/ArtalkJS/Artalk" rel="external nofollow noopener noreffer">Artalk</a>.
+      </noscript>
+    {{- end -}}
+
    {{- /* Disqus Comment System */ -}}
    {{- $disqus := $comment.disqus | default dict -}}
    {{- if $disqus.enable -}}
@@ -12,7 +53,7 @@
      {{- $source := printf "https://%v.disqus.com/embed.js" $disqus.shortname -}}
      {{- dict "Source" $source "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
      <noscript>
-        Please enable JavaScript to view the comments powered by <a href="https://disqus.com/?ref_noscript">Disqus</a>.
+        Please enable JavaScript to view the comments powered by <a href="https://disqus.com/?ref_noscript" rel="external nofollow noopener noreffer">Disqus</a>.
      </noscript>
    {{- end -}}

@@ -26,7 +67,7 @@
      {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
      {{- $commentConfig = dict "id" .Date "title" .Title "clientID" $gitalk.clientId "clientSecret" $gitalk.clientSecret "repo" $gitalk.repo "owner" $gitalk.owner "admin" (slice $gitalk.owner) | dict "gitalk" | merge $commentConfig -}}
      <noscript>
-        Please enable JavaScript to view the comments powered by <a href="https://github.com/gitalk/gitalk"></a>Gitalk</a>.
+        Please enable JavaScript to view the comments powered by <a href="https://github.com/gitalk/gitalk" rel="external nofollow noopener noreffer">Gitalk</a>.
      </noscript>
    {{- end -}}

@@ -53,7 +94,49 @@
      {{- end -}}
      {{- $commentConfig = $valine.emoji | default "google.yml" | printf "data/emoji/%v" | resources.Get | transform.Unmarshal | dict "valine" | merge $commentConfig -}}
      <noscript>
-        Please enable JavaScript to view the comments powered by <a href="https://valine.js.org/">Valine</a>.
+        Please enable JavaScript to view the comments powered by <a href="https://valine.js.org/" rel="external nofollow noopener noreffer">Valine</a>.
+      </noscript>
+    {{- end -}}
+
+    {{- /* Waline Comment System */ -}}
+    {{- $waline := $comment.waline | default dict -}}
+    {{- if $waline.enable -}}
+      <div id="waline" class="comment"></div>
+      {{- $source := $cdn.walineJS | default "lib/waline/Waline.min.js" -}}
+      {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+      {{- $commentConfig = dict "el" "#waline" "serverURL" $waline.serverURL "lang" .Lang "dark" "body[theme='dark']" "copyright" true | dict "waline" | merge $commentConfig -}}
+      {{- with $waline.visitor -}}
+        {{- $commentConfig = dict "visitor" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $waline.emoji -}}
+        {{- $commentConfig = dict "emoji" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $waline.meta -}}
+        {{- $commentConfig = dict "meta" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $waline.requiredMeta -}}
+        {{- $commentConfig = dict "requiredMeta" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $waline.login -}}
+        {{- $commentConfig = dict "login" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $waline.wordLimit -}}
+        {{- $commentConfig = dict "wordLimit" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $waline.pageSize -}}
+        {{- $commentConfig = dict "pageSize" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $waline.uploadImage -}}
+        {{- $commentConfig = dict "uploadImage" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $waline.highlight -}}
+        {{- $commentConfig = dict "highlight" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $waline.mathTagSupport -}}
+        {{- $commentConfig = dict "mathTagSupport" . | dict "waline" | merge $commentConfig -}}
+      {{- end -}}
+      <noscript>
+        Please enable JavaScript to view the comments powered by <a href="https://waline.js.org/" rel="external nofollow noopener noreffer">Waline</a>.
      </noscript>
    {{- end -}}

@@ -70,7 +153,7 @@
      {{- $source := printf "https://connect.facebook.net/%v/sdk.js#xfbml=1&version=v5.0&appId=%v&autoLogAppEvents=1" ($facebook.languageCode | default (T "facebookLanguageCode")) $facebook.appId -}}
      {{- dict "Source" $source "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
      <noscript>
-        Please enable JavaScript to view the comments powered by <a href="https://developers.facebook.com/docs/plugins/comments/"></a>Facebook</a>.
+        Please enable JavaScript to view the comments powered by <a href="https://developers.facebook.com/docs/plugins/comments/" rel="external nofollow noopener noreffer">Facebook</a>.
      </noscript>
    {{- end -}}

@@ -97,7 +180,7 @@
      {{- end -}}
      {{- dict "Source" "https://comments.app/js/widget.js?2" "Defer" true "Attr" $attr | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
      <noscript>
-        Please enable JavaScript to view the comments powered by <a href="https://comments.app/">Telegram Comments</a>.
+        Please enable JavaScript to view the comments powered by <a href="https://comments.app/" rel="external nofollow noopener noreffer">Telegram Comments</a>.
      </noscript>
    {{- end -}}

@@ -107,7 +190,7 @@
      <div id="commento"></div>
      {{- dict "Source" "https://cdn.commento.io/js/commento.js" "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
      <noscript>
-        Please enable JavaScript to view the comments powered by <a href="https://commento.io/">Commento</a>.
+        Please enable JavaScript to view the comments powered by <a href="https://commento.io/" rel="external nofollow noopener noreffer">Commento</a>.
      </noscript>
    {{- end -}}

@@ -121,7 +204,32 @@
      {{- $commentConfig = $utterances.lightTheme | default "github-light" | dict "lightTheme" | dict "utterances" | merge $commentConfig -}}
      {{- $commentConfig = $utterances.darkTheme | default "github-dark" | dict "darkTheme" | dict "utterances" | merge $commentConfig -}}
      <noscript>
-        Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/">Utterances</a>.
+        Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/" rel="external nofollow noopener noreffer">Utterances</a>.
+      </noscript>
+    {{- end -}}
+
+    {{- /* Twikoo Comment System */ -}}
+    {{- /* Twikoo Comment System */ -}}
+    {{- $twikoo := $comment.twikoo | default dict -}}
+    {{- if $twikoo.enable -}}
+      <div id="twikoo"></div>
+      {{- $source := $cdn.twikooJS | default "lib/twikoo/twikoo.all.min.js" -}}
+      {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+      {{- $commentConfig = dict "el" "#twikoo" "envId" $twikoo.envId "lang" .Lang | dict "twikoo" | merge $commentConfig -}}
+      {{- with $twikoo.region -}}
+        {{- $commentConfig = dict "region" . | dict "twikoo" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $twikoo.path -}}
+        {{- $commentConfig = dict "path" . | dict "twikoo" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $twikoo.commentCount -}}
+        {{- $commentConfig = dict "commentCount" . | dict "twikoo" | merge $commentConfig -}}
+      {{- end -}}
+      {{- with $twikoo.lightgallery -}}
+        {{- $commentConfig = dict "lightgallery" . | dict "twikoo" | merge $commentConfig -}}
+      {{- end -}}
+      <noscript>
+        Please enable JavaScript to view the comments powered by <a href="https://twikoo.js.org/" rel="external nofollow noopener noreffer">Twikoo</a>.
      </noscript>
    {{- end -}}
  </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Cell	8f3f22577b	💄 Style: modify detail style (#40 )	2022-03-14 15:09:24 +08:00
Cell	f697da6d08	💄 Style: modify watermark opacity to 1.25% for exmaple site	2022-03-14 12:35:10 +08:00
Cell	93c77a0cbf	🎨 Style: enhance table style (#40 )	2022-03-14 12:25:04 +08:00
Cell	c07f3a63c2	🚸 Feat: modify post lastmod dateformat in recently updated partial (#83 )	2022-03-14 11:17:13 +08:00
Cell	dd0fb4c16b	💄 Style: add Chinese style color (#40 )	2022-03-12 16:15:52 +08:00
Cell	61bf1a1f2b	📝 Docs: add documentation for print style (#61 )	2022-03-12 11:29:08 +08:00
Cell	f7fe83fa39	🐛 Style: fix duplicate border radius of admonition title (#40 )	2022-03-12 10:58:35 +08:00
Cell	759402b4a9	💄 Style: add global border radius for theme components (#40 )	2022-03-12 02:01:08 +08:00
Cell	737ff5af5a	📝 Docs: modify friends template	2022-03-11 22:03:07 +08:00
Cell	13f00582c3	🎨 Style: code style typesetting	2022-03-11 22:02:07 +08:00
Cell	c90577b6b4	🚸 Feat: focus code on unlock edit and blur code on lock edit (#76 )	2022-03-11 21:23:12 +08:00
Cell	09b4443df8	📝 Docs: add documentation for page style usage (#62 )	2022-03-11 21:12:57 +08:00
Cell	f84dd1b8a4	🔧 Chore: migrate atomic-algolia into devDependencies	2022-03-11 20:26:33 +08:00
Cell	000e0d2359	💄 Style(media): add narrow option for page style (#80 )	2022-03-11 01:03:05 +08:00
Cell	7b41adb0d4	🐛 Fix: remove extra space in class of `plugin/link`	2022-03-10 00:19:16 +08:00
Cell	a6f0fb2eea	✏️ Docs: add code type for shortcode highlight	2022-03-08 23:20:16 +08:00
Cell	0f80352f07	🔧 Chore: optimize theme.js style (#32 )	2022-03-08 22:39:08 +08:00
Cell	8e1af2add9	🔧 Chore: adjust npm script	2022-03-08 19:38:56 +08:00
Cell	23e53ca26e	🔧 Chore: remove husky	2022-03-08 19:34:03 +08:00
Cell	8b62b5c0b3	✨ Feat: add `center-quote` shortcode (#69 )	2022-03-07 23:48:34 +08:00
Cell	d056c9b16a	💄 Style: refined blockquote style (#40 )	2022-03-07 23:34:22 +08:00
Cell	715d1cedbe	🔧 Chore: add shortcode style single folder	2022-03-07 22:46:45 +08:00
Cell	3c45f9914d	🔧 Chore(update-libs): update animate.css 3.7.2 -> 4.1.1 (#74 )	2022-03-06 19:25:24 +08:00
Cell	14df985a2d	🔧 Feat: modify code edit button (#76 )	2022-03-06 14:24:12 +08:00
Cell	70e5793bb8	✨ Feat: change option `params.page.code.editableCode` to `params.page.code.edit` (#76 )	2022-03-06 14:03:09 +08:00
Cell	1114136800	✨ Feat: add `params.page.code.editableCode` option support (#76 )	2022-03-06 02:40:06 +08:00
Cell	2b19b5b016	⚡ Perf: trigger mask click on resize and scroll (#78 #32 )	2022-03-05 19:22:17 +08:00
Cell	9742093e80	🐛 Fix: sticky invalid of mobile header (#75 #32 )	2022-03-05 00:07:38 +08:00
Cell	19a932343f	📝 Docs: update theme documentations	2022-03-01 22:35:46 +08:00
Cell	aa6d6db424	🐛 Fix: toc empty error	2022-03-01 22:11:39 +08:00
Cell	f7844fd0d9	🔧 Chore: add logo fixit.svg to cache	2022-03-01 22:11:09 +08:00
Cell	4b23d8c1b8	Merge branch 'feature/highlight' into v0.2.13-RC	2022-03-01 20:04:13 +08:00
Cell	b0825134af	Merge master into v0.2.13-RC # Conflicts: # package-lock.json # package.json	2022-03-01 20:03:45 +08:00
dependabot[bot]	07a9d6798c	chore(deps-dev): bump core-js from 3.20.3 to 3.21.1 Bumps [core-js](https://github.com/zloirock/core-js) from 3.20.3 to 3.21.1. - [Release notes](https://github.com/zloirock/core-js/releases) - [Changelog](https://github.com/zloirock/core-js/blob/master/CHANGELOG.md) - [Commits](https://github.com/zloirock/core-js/compare/v3.20.3...v3.21.1) --- updated-dependencies: - dependency-name: core-js dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2022-03-01 19:57:33 +08:00
dependabot[bot]	db2dc460dd	chore(deps-dev): bump @babel/cli from 7.16.8 to 7.17.6 Bumps [@babel/cli](https://github.com/babel/babel/tree/HEAD/packages/babel-cli) from 7.16.8 to 7.17.6. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.17.6/packages/babel-cli) --- updated-dependencies: - dependency-name: "@babel/cli" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2022-03-01 19:56:45 +08:00
dependabot[bot]	b2b6e3b748	chore(deps-dev): bump @babel/core from 7.16.12 to 7.17.5 Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.16.12 to 7.17.5. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.17.5/packages/babel-core) --- updated-dependencies: - dependency-name: "@babel/core" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2022-03-01 19:53:26 +08:00
Cell	8d24ccf0b9	🎨 Style: add github dark dimmed highlight style for gist and inline code (#43 )	2022-03-01 19:49:37 +08:00
Cell	ae23c42e7d	🎨 Style: perfect highlight style details (#43 ) TODO: 1. gist highlight style 2. inline code style of github dark dimmed	2022-03-01 14:21:57 +08:00
Cell	fd65f4fbd9	🎨 Style: add github dark dimmed highlight style (#43 )	2022-03-01 12:13:01 +08:00
Cell	7ae8fa7104	🎨 Style: add github highlight style (#43 )	2022-02-28 21:52:26 +08:00
Cell	8cae970b03	⚡ Perf: enhance highlight feature and fix some css bugs (#43 )	2022-02-27 23:26:28 +08:00
Cell	0ebfc94c8f	🔧 Chore: remove husky and adjust npm script	2022-02-27 13:56:02 +08:00
Cell	4e783b2826	🔧 Chore: add atomic-algolia for exampleSite (#70 )	2022-02-26 16:30:26 +08:00
Cell	a5bf1daca9	🎨 Style: add placeholder for visitor count and commnet count	2022-02-26 15:19:44 +08:00
Cell	dddf63daca	🐛 Fix: remove source map of local libraries to avoid 404 error (#67 )	2022-02-26 12:19:24 +08:00
Cell	5fa479c73a	🎨 Style: fix typo	2022-02-25 21:26:24 +08:00
Cell	64204fd11e	✨ Feat: add markdown support for 'title' parameter of the admonition shortcode	2022-02-25 21:10:45 +08:00
Cell	4c4398ed5e	✨ Feat: add details shortcode (#68 )	2022-02-25 20:54:07 +08:00
Cell	626b83a16b	✨ Feat: add archive count display (#33 )	2022-02-25 15:10:04 +08:00
Cell	f059fe9c9b	✨ Feat: add recently updated section (#50 )	2022-02-25 14:17:28 +08:00
Cell	35a45e4b6d	🔍 Feat: add descriptive label to home link	2022-02-25 12:15:41 +08:00
Cell	5436358f3a	💄 Style: delete system variable $MAX_LENGTH	2022-02-25 11:46:50 +08:00
Cell	2bff39f9f9	✨ Feat: add lightgallery support for twikoo content (#64 )	2022-02-24 23:41:06 +08:00
Cell	34f2490792	✨ Feat: add visitor count and comment count support	2022-02-23 14:00:45 +08:00
Cell	8a69d995d3	✨ Feat: add 360 and sougou seo support	2022-02-22 22:14:31 +08:00
Cell	1044abd60a	✨ Feat: add article expiration reminder support (#51 )	2022-02-22 21:49:06 +08:00
Cell	874b45f5a5	📝 Docs: update changelog version in exampleSite documentation	2022-02-21 12:29:08 +08:00
Cell	5db8fa5266	✏️ Docs: update CHANGLOG	2022-02-21 11:10:34 +08:00
ctj12461	c8580018cb	✨ Feat: add Gravatar mirror site support	2022-02-21 11:09:08 +08:00
Cell	8447e6442b	✏️ update README	2022-02-20 17:10:31 +08:00
Cell	b4d3a56809	✏️ Docs: update changelog	2022-02-20 16:44:41 +08:00
Cell	aae810b8ed	🐛 Fix: toc margin bottom calculate error	2022-02-20 16:33:50 +08:00
Cell	4eee19340b	- 🎉 Feat: add Waline comment support (#36 ) - 🎉 Feat: add Twikoo comment support (#64)	2022-02-20 16:01:55 +08:00
Cell	e7e007308d	🔧 Chore: CDN of cell-watermark library supported	2022-02-20 13:20:10 +08:00
Cell	87664f8b64	🔧 Chore: update Watermark 1.0.3	2022-02-19 21:39:05 +08:00
Cell	ae28aab4c1	🚚 Feat: migrate fixit.svg to images/	2022-02-19 14:15:17 +08:00
Cell	0323e22d83	💄 Style: add radius of the scrollbar	2022-02-19 13:56:40 +08:00
Cell	7859589e4f	✨ Feat: add 9 newly supported social links (#17 )	2022-02-19 13:50:27 +08:00
Cell	5d423c308b	🔧 Chore: set pageStyle to normal (#62 )	2022-02-18 17:13:46 +08:00
Cell	8c36ed0554	Merge branch 'feature/refactor-layout' into v0.2.13-RC	2022-02-18 17:10:42 +08:00
Cell	24a2b10ba7	⚡ Feat: add calculate toc margin logic (#65 )	2022-02-18 15:56:09 +08:00
Cell	0bf30a50d9	♻️ Refactor: main layout and add toc.position option support (#65 )	2022-02-18 12:53:26 +08:00
Cell	14168640f0	⚡ Feat: modify toc logic (#65 )	2022-02-17 22:43:02 +08:00
Cell	8bcd9af913	💄 Style: adjust toc style (#65 )	2022-02-17 18:01:22 +08:00
Cell	d879da79d4	⚡ Feat: adjust header position value to 'sticky' (#65 )	2022-02-17 17:25:17 +08:00
Cell	5e67406d8c	🐛 Fix: watermark params error cause of case insensitive for `.Site.Params`	2022-02-17 16:11:38 +08:00
Cell	a5a05a6a95	📝 Docs: add documentation for customJS option	2022-02-17 14:36:33 +08:00
Cell	5932f1e2f2	💄 Style: adjust logo color	2022-02-17 14:15:05 +08:00
Cell	e369458f09	Draft: ✨ Feat: add pageStyle option (#62) TODO: refactor toc logic (#65) > Tip: This commit needs to be improved and to be tested. Please don't update to it!	2022-02-17 12:20:12 +08:00
Cell	231cfc31cf	🔧 Chore: replace theme logo icon	2022-02-16 10:15:26 +08:00
Cell	5f6b08d383	✏️ Style: fix css typo	2022-02-15 19:59:40 +08:00
Cell	5bf9fe89b0	✨ Style: add media style for print view (#61 )	2022-02-15 17:28:26 +08:00
Cell	e7b65c47fa	⚡ Perf: remove inline script (#32 )	2022-02-13 15:53:37 +08:00
Cell	94a37b191b	🐛 Fix: "lightGallery is not defined" error of Artalk (#59 )	2022-02-12 14:51:15 +08:00
Cell	6913be694a	📝 Docs: add lightgallery option for artalk (#59 )	2022-02-09 14:51:51 +08:00
Cell	c4a4faf506	✏️ Style: fix typos	2022-02-09 14:38:30 +08:00
Cell	755061746e	🔒 Fix: potentially unsafe external link in footer	2022-02-07 17:39:48 +08:00
Cell	d38f3b65c6	✨ Feat: add lightgallery support for artalk content (#59 )	2022-02-07 16:52:36 +08:00
Cell	381f26a16d	🔥 Feat: remove shortcode cardlink	2022-02-07 15:28:35 +08:00
Cell	a47c006849	✏️ Style: fix typo discription should be: description (#60 )	2022-02-04 00:58:46 +08:00
Cell	12fbab8a29	🔧 Chore: fix typo	2022-02-02 02:27:20 +08:00
Cell	db1c275564	🔧 Chore: add build workflows	2022-01-31 11:14:01 +08:00
Cell	cd7155c077	🔒 Fix: potentially unsafe external link in post footer	2022-01-31 10:52:39 +08:00
Cell	c64ebb4005	🐛 Fix: Artalk comment pageKey & pageTitle not effective (#54 )	2022-01-31 10:37:42 +08:00
Cell	c676b0dac0	🔧 Merge branch 'feature-artalk' into v0.2.13-RC (#54 )	2022-01-30 22:49:03 +08:00
Cell	7d62af6ad2	✨ Perf: optimize Artalk config (#54 )	2022-01-30 22:41:26 +08:00
Cell	862d3130fe	🎉 Feat: add Artalk comment support (#54 )	2022-01-30 21:59:32 +08:00
iuvhub	01f4009881	add Artalk comment system	2022-01-30 19:47:46 +08:00
Cell	88f0990b68	✨ Feat: update watermark 1.0.3-RC (fontFamily support)	2022-01-30 19:33:07 +08:00
Cell	1228a0aaf4	📝 Docs: improve documentation for v0.2.12	2022-01-28 22:21:07 +08:00
dependabot[bot]	4a2b7102ac	chore(deps): bump cached-path-relative from 1.0.2 to 1.1.0 Bumps [cached-path-relative](https://github.com/ashaffer/cached-path-relative) from 1.0.2 to 1.1.0. - [Release notes](https://github.com/ashaffer/cached-path-relative/releases) - [Commits](https://github.com/ashaffer/cached-path-relative/commits) --- updated-dependencies: - dependency-name: cached-path-relative dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-01-28 22:18:57 +08:00
Cell	ce47a18c00	✏️ Docs: publish pwa support post	2022-01-27 18:39:32 +08:00
				`@@ -1 +0,0 @@`
				`const CustomJS=new function(){this.hello=(()=>(console.log("Hello CustomJS!"),this)),this.init=(()=>(this.hello(),this))};CustomJS.init(),document.addEventListener("DOMContentLoaded",()=>{console.log("DOM content loaded!")});`
				`@@ -0,0 +1 @@`
				(function(e,t){"function"==typeof define&&define.amd?define([],t()):"object"==typeof module&&module.exports?module.exports=t():e.Watermark=t()})(this,function(){function e(t={}){var n=e.prototype;this.options=t,s(this),d(this,this.options),h(this),p(this),n.upload=function(e){if(e){o.disconnect(),i.disconnect(),this.options.content=e;for(const t of this._container.querySelectorAll(".cell-watermark"))t.innerHTML=e;o.observe(this._container.parentNode,{childList:!0,subtree:!0}),i.observe(this._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}},n.render=function(e={}){l(this,Object.assign(this.options,e))},n.destroy=function(){i.disconnect(),o.disconnect(),window.removeEventListener("resize",r),this._container.parentNode.removeChild(this._container)}}var t,n,i,o,r,c=window.outerWidth,a=window.outerHeight,s=function(e){e._container=document.createElement("div"),e._container.classList.add("cell-watermark-container"),e._container.style.cssText="display: block; pointer-events: none;",e._container.setAttribute("aria-hidden",!0),t=document.querySelector(e.options.appendTo)\|\|document.body,t.appendChild(e._container)},d=function(e,t){t.rowSpacing=t.rowSpacing\|\|60,t.colSpacing=t.colSpacing\|\|30,t.width=t.width\|\|150,t.height=t.height\|\|20;let i=parseInt(a/(t.height+t.rowSpacing)),o=parseInt(c/(t.width+t.colSpacing)),r=(c-t.widtho-t.colSpacing(o-1))/2,s=(a-t.heighti-t.rowSpacing(i-1))/2,d=document.createElement("div");d.classList.add("cell-watermark"),d.style.cssText="transform: rotate(15deg); opacity: 0.1; font-size: 0.85rem; text-align: center;position: fixed; user-select: none; word-break: break-all; overflow: hidden; z-index: 999999;";for(let n=0;n<i;n++){let i=s+(t.rowSpacing+t.height)n,c=o;n%2!=0&&c++;for(let n=0;n<c;n++){let a=r+(t.colSpacing+t.width)n;c!==o&&(a-=(t.colSpacing+t.width)/2);let s=d.cloneNode();s.style.cssText+=`left: ${a}px; top: ${i}px; width: ${t.width}px; height: ${t.height}px`,s.style.transform=`rotate(${t.rotate}deg)`,s.style.opacity=t.opacity,s.style.fontSize=`${t.fontSize}rem`,s.style.fontFamily=t.fontFamily,s.innerHTML=t.content,e._container.appendChild(s)}}n=e._container},l=function(e,t){i.disconnect(),e._container.innerHTML="",d(e,t),i.observe(e._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},h=function(e){i=new MutationObserver(function(t,n){l(e,e.options)}),i.observe(e._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),o=new MutationObserver(function(e){for(let i of e)"childList"===i.type&&i.removedNodes.length>0&&0===document.querySelectorAll(".cell-watermark-container").length&&t.appendChild(n)}),o.observe(e._container.parentNode,{childList:!0,subtree:!0})},p=function(e){r=function(){window.outerHeight===a&&window.outerWidth===c\|\|(a=window.outerHeight,c=window.outerWidth,l(e,e.options))},window.addEventListener("resize",r)};return e});
				`@@ -1 +0,0 @@`
				var Watermark=function(){function t(e={}){var n=t.prototype;this.options=e,s(this),d(this,this.options),h(this),p(this),n.upload=function(t){if(t){o.disconnect(),i.disconnect(),this.options.content=t;for(const e of this._container.querySelectorAll(".cell-watermark"))e.innerHTML=t;o.observe(this._container.parentNode,{childList:!0,subtree:!0}),i.observe(this._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}},n.render=function(t={}){l(this,Object.assign(this.options,t))},n.destroy=function(){i.disconnect(),o.disconnect(),window.removeEventListener("resize",r),this._container.parentNode.removeChild(this._container)}}var e,n,i,o,r,c=window.outerWidth,a=window.outerHeight,s=function(t){t._container=document.createElement("div"),t._container.classList.add("cell-watermark-container"),t._container.style.cssText="display: block; pointer-events: none;",t._container.setAttribute("aria-hidden",!0),e=document.querySelector(t.options.appendTo)\|\|document.body,e.appendChild(t._container)},d=function(t,e){e.rowSpacing=e.rowSpacing\|\|60,e.colSpacing=e.colSpacing\|\|30,e.width=e.width\|\|150,e.height=e.height\|\|20;let i=parseInt(a/(e.height+e.rowSpacing)),o=parseInt(c/(e.width+e.colSpacing)),r=(c-e.widtho-e.colSpacing(o-1))/2,s=(a-e.heighti-e.rowSpacing(i-1))/2,d=document.createElement("div");d.classList.add("cell-watermark"),d.style.cssText="transform: rotate(15deg); opacity: 0.1; font-size: 0.85rem; text-align: center;position: fixed; user-select: none; word-break: break-all; overflow: hidden; z-index: 999999;";for(let n=0;n<i;n++){let i=s+(e.rowSpacing+e.height)n,c=o;n%2!=0&&c++;for(let n=0;n<c;n++){let a=r+(e.colSpacing+e.width)n;c!==o&&(a-=(e.colSpacing+e.width)/2);let s=d.cloneNode();s.style.cssText+=`left: ${a}px; top: ${i}px; width: ${e.width}px; height: ${e.height}px`,s.style.transform=`rotate(${e.rotate}deg)`,s.style.opacity=e.opacity,s.style.fontSize=`${e.fontSize}rem`,s.innerHTML=e.content,t._container.appendChild(s)}}n=t._container},l=function(t,e){i.disconnect(),t._container.innerHTML="",d(t,e),i.observe(t._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},h=function(t){i=new MutationObserver(function(e,n){l(t,t.options)}),i.observe(t._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),o=new MutationObserver(function(t){for(let i of t)"childList"===i.type&&i.removedNodes.length>0&&0===document.querySelectorAll(".cell-watermark-container").length&&e.appendChild(n)}),o.observe(t._container.parentNode,{childList:!0,subtree:!0})},p=function(t){r=function(){window.outerHeight===a&&window.outerWidth===c\|\|(a=window.outerHeight,c=window.outerWidth,l(t,t.options))},window.addEventListener("resize",r)};return t}();
				`@@ -0,0 +1 @@`
				<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 0c282.784 0 512 229.216 512 512s-229.216 512-512 512S0 794.784 0 512 229.216 0 512 0z m189.952 752l11.2-108.224c-31.904 9.536-100.928 16.128-147.712 16.128-134.464 0-205.728-47.296-195.328-146.304 11.584-110.688 113.152-145.696 232.64-145.696 54.784 0 122.432 8.8 151.296 18.336L768 272.704C724.544 262.24 678.272 256 599.584 256c-203.2 0-388.704 94.88-406.4 263.488C178.336 660.96 303.584 768 535.616 768c80.672 0 138.464-6.432 166.336-16z"></path></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" version="1.1"><defs><style>.fixit-ban{opacity:.9;}</style></defs><path d="M159.12 338.69l24.8-16.54a78.87 78.87 0 0 1-6.77-22.72l-30.88 4.41a16 16 0 0 1-4.54-31.68l34.27-4.9v-.76l98.94 98.95a76.89 76.89 0 0 1-71.68-17.73l-26.39 17.59c-.15.11-.31.21-.47.31a16 16 0 0 1-17.28-26.93zm224.72-48.42a16 16 0 0 0-13.57-18.11l-34.27-4.9V244.9l34.27-4.9a16 16 0 1 0-4.54-31.68l-30.54 4.36a79.31 79.31 0 0 0-6.85-22.85l24.54-16.36a16 16 0 1 0-17.29-26.93l-.46.31-26 17.34a79.9 79.9 0 0 0-102.64-3l139.83 139.88 19.41 2.77a16 16 0 0 0 18.11-13.57z" fill="#358C3C" class="fixit-bug"/><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 432c-101.46 0-184-82.54-184-184a182.84 182.84 0 0 1 33.38-105.37l256 256A182.86 182.86 0 0 1 256 440zm150.62-78.63l-256-256A182.84 182.84 0 0 1 256 72c101.46 0 184 82.54 184 184a182.84 182.84 0 0 1-33.38 105.37z" fill="#FF6347" class="fixit-ban"/></svg>