Merge branch 'master' into production

Media queries range syntax not supported by Safari for iOS under 16.4

See also:
- https://caniuse.com/?search=media-queries

This reverts commit 1682ce9d7c.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -5,11 +5,11 @@ about: Create a report to help us improve
 
 **NOTE:** Before you start, the following should be completed.
 
-- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design.
+- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
 - Make sure no [similar issue(including closed ones)][issues] exists.
 - Make sure the bug is found in the latest code of the `master` branch.
 
-[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/
+[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
 [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
 
 ## Describe the bug

.github/ISSUE_TEMPLATE/feature_request.md

@@ -6,11 +6,11 @@ labels: enhancement
 
 **NOTE:** Before you start, the following should be completed.
 
-- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design.
+- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
 - Make sure no [similar issue(including closed ones)][issues] exists.
 - Make sure the request is based on the latest code in the `master` branch.
 
-[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/
+[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
 [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
 
 ## Is your feature request related to a problem? Please describe

.github/ISSUE_TEMPLATE/help_wanted.md

@@ -6,11 +6,11 @@ labels: 'help wanted'
 
 **NOTE:** Before you start, the following should be completed.
 
-- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design.
+- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
 - Make sure no [similar issue(including closed ones)][issues] exists.
 - Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow].
 
-[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/
+[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
 [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
 [forum]: https://talk.jekyllrb.com/
 [stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll

.github/ISSUE_TEMPLATE/question.md

@@ -6,11 +6,11 @@ labels: question
 
 **NOTE:** Before you start, the following should be completed.
 
-- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design.
+- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
 - Make sure no [similar issue(including closed ones)][issues] exists.
 - Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow].
 
-[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/
+[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
 [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
 [forum]: https://talk.jekyllrb.com/
 [stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,8 +2,6 @@
 
 <!--
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
-
-e.g. Fixes #(issue)
 -->
 
 ## Type of change
@@ -13,9 +11,14 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 -->
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
+- [ ] Improvement (refactoring and improving code)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] Documentation update
 
+## Additional context
+
+<!-- e.g. Fixes #(issue) -->
+
 ## How has this been tested
 
 <!--
@@ -24,11 +27,3 @@ Please describe the tests that you ran to verify your changes. Provide instructi
 
 - [ ] I have run `bash ./tools/test` (at the root of the project) locally and passed
 - [ ] I have tested this feature in the browser
-
-### Test Configuration
-
-- Browser type & version:
-- Operating system:
-- Ruby version: <!-- by running: `ruby -v` -->
-- Bundler version: <!-- by running: `bundle -v`-->
-- Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->

.github/stale.yml

@@ -1,17 +0,0 @@
-# Clean up the stale issues
-
-daysUntilStale: 30
-daysUntilClose: 1
-
-exemptLabels:
-  - in progress
-  - pending
-
-staleLabel: stale
-
-markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-
-closeComment: false

.github/workflows/commitlint.yml

@@ -5,7 +5,7 @@ jobs:
   commitlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: wagoid/commitlint-github-action@v4
+      - uses: wagoid/commitlint-github-action@v5

.github/workflows/pages-deploy.yml.hook

@@ -68,4 +68,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v2

.github/workflows/stale.yml

@@ -0,0 +1,30 @@
+name: "Close stale issues and PRs"
+
+on:
+  schedule:
+    - cron: "0 0 * * *" # every day at 00:00 UTC
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v8
+        with:
+          days-before-stale: 30
+          days-before-close: 1
+          stale-issue-label: stale
+          exempt-issue-labels: pending
+          stale-issue-message: >
+            This issue has been automatically marked as stale because it has not had recent activity.
+            It will be closed if no further activity occurs.
+            Thank you for your contributions.
+          stale-pr-label: stale
+          exempt-pr-labels: pending
+          stale-pr-message: >
+            This PR has been automatically marked as stale because it has not had recent activity.
+            It will be closed if no further activity occurs.
+            Thank you for your contributions.

.stylelintrc.json

@@ -16,6 +16,8 @@
     "rule-empty-line-before": [
       "always",
       { "ignore": ["after-comment", "first-nested", "inside-block"] }
-    ]
+    ],
+    "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }],
+    "media-feature-range-notation": "prefix"
   }
 }

CHANGELOG.md

@@ -2,8 +2,89 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [5.6.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.2...v5.6.0) (2023-03-17)
+## [6.1.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.0.0...v6.1.0) (2023-07-02)
 
+### Features
+
+* **i18n:** add Thai locale file ([#1087](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1087)) ([a60e907](https://github.com/cotes2020/jekyll-theme-chirpy/commit/a60e90791d24811caff78e21c71dc85d6a729438))
+
+### Bug Fixes
+
+* missing xml escape for `alt` of preview image ([#1113](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1113)) ([8b0fbf5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8b0fbf5a834276f273274e4d614edd71e339cbb0))
+* the cached image is covered by shimmer ([#1100](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1100)) ([df8ff54](https://github.com/cotes2020/jekyll-theme-chirpy/commit/df8ff546ec1c8d21a3d25e0124665001fcf756f3))
+* **ui:** min-height of `page` layout exceeds the mobile screen ([73af591](https://github.com/cotes2020/jekyll-theme-chirpy/commit/73af59194ab935d38b89d298fea0e96e13be7cb7))
+* **webfont:** resume semi-bold of font family `Source Sans Pro` ([c4da99c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c4da99c7ea5d6e32b1f1b815d7d8d6ae7b0f55de))
+
+### Improvements
+
+* **build:** use `jekyll-include-cache` plugin to reduce build time ([#1098](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1098)) ([4fe145e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4fe145e9809ee1b370d9891135939534751462d0)), closes [#1094](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1094)
+* CJK characters of the "Search Cancel" button will wrap ([#1105](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1105)) ([b6d1992](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b6d1992f85ec543220e826087dcc89870e7e2c00))
+* **ui:** avoid blank space at the bottom of the homepage preview image ([ce2f6f5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ce2f6f5abef7a8b874e08d1f18c1fd002650dbf1))
+* **ui:** improve hover color of sidebar nav items in light mode ([728094d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/728094d1ba67a1e7c0a11e1c6c69bf87af9a767b))
+
+## [6.0.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.0.0...v6.0.1) (2023-05-19)
+
+### Bug Fixes
+
+* **home:** preview image missing `[alt]` and `img_path` ([#1044](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1044)) ([aba9468](https://github.com/cotes2020/jekyll-theme-chirpy/commit/aba9468b5332802db961166889d4c4a84e404a2c))
+* **layout:** restore the margin bottom of the main area ([#1047](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1047)) ([eb40f51](https://github.com/cotes2020/jekyll-theme-chirpy/commit/eb40f51c84b011a7c301279527f544ad27efd5eb))
+* **post, page:** image link loses shimmer effect ([#1046](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1046)) ([3bd881d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/3bd881da70d685d10659f47bfe0e79cd02e7af92))
+* **typography:** long string for update-list is not truncated ([#1050](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1050)) ([a51d31c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/a51d31c55a37fbe034f0b0f699f4df0b6a14ba8f)), closes [#1049](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1049)
+
+## [6.0.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.6.1...v6.0.0) (2023-05-16)
+
+### ⚠ BREAKING CHANGES
+
+* rename assets origin configuration files
+
+### Features
+
+* add a hook to insert custom metadata in `head` tag ([#1015](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1015)) ([fe20341](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fe203417d993508eedf5b9044fe53c4a566e44f9))
+* **i18n:** add sl-SI.yml with slovenian translations ([#989](https://github.com/cotes2020/jekyll-theme-chirpy/issues/989)) ([42a700a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/42a700aa37889faa32d7ec1f6776ce4b9d845dc4))
+* **i18n:** add Traditional Chinese (Taiwan) localization file ([#961](https://github.com/cotes2020/jekyll-theme-chirpy/issues/961)) ([d97f95f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d97f95fca0bcd450ea50709ffba0217f7e65d339))
+* **i18n:** added Swedish localization file ([#969](https://github.com/cotes2020/jekyll-theme-chirpy/issues/969)) ([fe70479](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fe7047959e3694c6e603e764ded30dacd49e6aa9))
+* support hiding the modification date of a post ([#1020](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1020)) ([8da583d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8da583d403456f6460ec1a6ebcbb0c2ca8127ff6))
+* **ui:** improve code snippet design ([6d99f5c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6d99f5cc36a69e5ccff51f81ba448c798d92e12e))
+* **ui:** improve the design for top bar ([83f1c34](https://github.com/cotes2020/jekyll-theme-chirpy/commit/83f1c34f92d85f3953ca9c9818be5399962bf1c9))
+* **ui:** new design footer content layout ([3210c59](https://github.com/cotes2020/jekyll-theme-chirpy/commit/3210c59466150dc04b4e4bdfc1ffd0e38adcff43))
+* **ui:** redesign the sidebar ([83bbe4a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/83bbe4ac939edfd1706e68c080562e3462f83519))
+* **ui:** show preview image in home page ([97b8dfe](https://github.com/cotes2020/jekyll-theme-chirpy/commit/97b8dfeed6ce7677f6472e28dc3b03f3c2968b12))
+
+### Bug Fixes
+
+* parameter parsing error in image URL ([#1022](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1022)) ([ee88cec](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ee88cec270ea5938f98913a3edf28a684cfbd6c0))
+* **rss:** double quotes in the post title will break the XML structure ([#965](https://github.com/cotes2020/jekyll-theme-chirpy/issues/965)) ([1719d81](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1719d81d00b32b107c35b3903089be84a9b28a6c))
+
+### refactor
+
+* rename assets origin configuration files ([c283e77](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c283e7782fa9562d82d9855fd280a573fd58c75f))
+
+### Improvements
+
+* **assets:** reduce HTTP requests to CDN ([9d97120](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9d971201978e993a9af337d9cd5396a1ea225f00))
+* calculate heading font size dynamically ([#983](https://github.com/cotes2020/jekyll-theme-chirpy/issues/983)) ([52f5ee9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/52f5ee9cd3f92a6e8f25eaa203831546cda85db6))
+* **i18n:** set the global default locales to "en" ([#979](https://github.com/cotes2020/jekyll-theme-chirpy/issues/979)) ([61fdbcb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/61fdbcb83a3601ecae62ec230602b94a5eb832e1))
+* **tools:** avoid initialization interruption in single branch forks ([#992](https://github.com/cotes2020/jekyll-theme-chirpy/issues/992)) ([e90461a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e90461aa3c81633863db6a12c5924ddba33bd08e))
+* **ui:** improve categories color in dark mode ([414dd13](https://github.com/cotes2020/jekyll-theme-chirpy/commit/414dd132aed70f4bd96cb712d00eacc82d2753e9))
+* **ui:** improve hover effect for post preview cards ([7626e4d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7626e4d00544346a46b6e5ff2f3a99d234defe09))
+* **ui:** improve hover effect of trending tags ([34499f0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/34499f0c927ce8fea3705dc2f0f0e6805cabda43))
+* **ui:** improve inline code in light mode ([e38309f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e38309f3bd1302ffe60b682136b6efaf96f4d9ae))
+* **ui:** improve related posts design ([2918da9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2918da9f29465618d557c082ff3a2f23d7519049))
+* **ui:** improve the color of prompts in dark mode ([8cbbcfa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8cbbcfa26da0addd88affada23a65770250f2404))
+* **ui:** lighten the link color in light-mode ([7c23a4e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7c23a4ebc53b9e231c214e04f8ac0803cbcdb720))
+* **ui:** mute the marker in lists ([0c80552](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c80552d772b874e2a161f1270294faa3af18d4a))
+* **ui:** uniform the muted text color ([aadf939](https://github.com/cotes2020/jekyll-theme-chirpy/commit/aadf9393d5c7f7528d453c4e68eba4f5cbb85bd9))
+* **ux:** improve LQIP fade in effect ([003e7b6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/003e7b60c93988a7bfae4c03a8346d4f8a5f0bb6))
+
+## [5.6.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.6.0...v5.6.1) (2023-03-30)
+
+### Bug Fixes
+
+* **deps:** `tocbot` has no initialization detection ([#957](https://github.com/cotes2020/jekyll-theme-chirpy/issues/957)) ([8225174](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8225174cb5e02fda7b3cc548ec821c876b0a5139))
+* mode-toggle leads to Disqus loading failure ([#945](https://github.com/cotes2020/jekyll-theme-chirpy/issues/945)) ([6fec411](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6fec411c18ca5689c467c7b216ddeda02df23623))
+* pageviews not updated immediately ([8b4f99c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8b4f99c87f9a9227f47e84fb39d7b0f551d6f4dd))
+
+## [5.6.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.2...v5.6.0) (2023-03-17)
 
 ### Features
 
@@ -11,7 +92,6 @@ All notable changes to this project will be documented in this file. See [standa
 * **i18n:** add Greek Language Support. ([#903](https://github.com/cotes2020/jekyll-theme-chirpy/issues/903)) ([712a9b2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/712a9b22401ce591cf4c0bb03fbdd1693fee30bb))
 * **ux:** turn home page posts into clickable cards ([#895](https://github.com/cotes2020/jekyll-theme-chirpy/issues/895)) ([b85f633](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b85f6330dea666350631c4461b742cdb54c5f052))
 
-
 ### Bug Fixes
 
 * css selector string escaping vulnerability ([#888](https://github.com/cotes2020/jekyll-theme-chirpy/issues/888)) ([5c6ec9d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5c6ec9d06b6571e2c0efe6652078442dca8af477))
@@ -21,21 +101,18 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.5.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.1...v5.5.2) (2023-01-30)
 
-
 ### Bug Fixes
 
 * position of prompt icon is incorrect in paragraph on mobile ([5df953f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5df953f6c877e2aa3f1f4981c97a0b8007abe6d4))
 
 ## [5.5.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.0...v5.5.1) (2023-01-29)
 
-
 ### Bug Fixes
 
 * the icon position of the prompts in the list is incorrect ([0c9558d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c9558de8a01e9ab795778f351a8bbf4d6b21763))
 
 ## [5.5.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.4.0...v5.5.0) (2023-01-29)
 
-
 ### Features
 
 * **i18n:** add Arabic translation ([#857](https://github.com/cotes2020/jekyll-theme-chirpy/issues/857)) ([765af53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/765af53b77e5c63804784d5728f5970ae274c2c7))
@@ -43,7 +120,6 @@ All notable changes to this project will be documented in this file. See [standa
 * **i18n:** add Finnish translations ([#843](https://github.com/cotes2020/jekyll-theme-chirpy/issues/843)) ([d6d0318](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d6d03183eaf94b44e037cc48b6e1c47cee183f6e))
 * **i18n:** add Italian translation ([#850](https://github.com/cotes2020/jekyll-theme-chirpy/issues/850)) ([9a011e1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9a011e14d66195d8b2fb9ec62f3e60a3e56cd032))
 
-
 ### Bug Fixes
 
 *  copy command line incomplete(`.gp` part) ([41ed331](https://github.com/cotes2020/jekyll-theme-chirpy/commit/41ed33145639415148aec8e85edc7a6fd0de0ca3))
@@ -53,7 +129,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.2...v5.4.0) (2022-12-27)
 
-
 ### Features
 
 * add `rel="me"` to Mastodon sidebar contact links for verification ([#807](https://github.com/cotes2020/jekyll-theme-chirpy/issues/807)) ([d2190c7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2190c726f61c8c9732b88b4aecf699dc8bc7deb))
@@ -63,7 +138,6 @@ All notable changes to this project will be documented in this file. See [standa
 * support dark and light mode images ([#481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/481)) ([9306c7b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9306c7b39ecf9d9146bc1a25eebedc38eb2c3dd6))
 * support LQIP for images ([bffaf63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bffaf6374f265cec96ef743d42b46fbec3b59797))
 
-
 ### Bug Fixes
 
 * `hreflang` tag attribute of feed misses `site.alt_lang` ([7651d28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7651d2851b4bb7d8f0d068b62c036c89a1089bbc))
@@ -71,14 +145,12 @@ All notable changes to this project will be documented in this file. See [standa
 * refactoring error when the image URL contains parameters ([ec98f07](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ec98f07aca0b80a9c07fbcdc8e0d7d66dba98ed2))
 * spaces in post title are encoded when sharing ([7efd2f8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7efd2f8aa2ea1c3aeb7d740bf9a018881c26fe65))
 
-
 ### Improvements
 
 * **cdn:** optimize cache policy for static assets ([7fb0ee0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7fb0ee0bedb63eee3f90a49c6d7fb8b5d78c9830))
 
 ## [5.3.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.1...v5.3.2) (2022-11-22)
 
-
 ### Bug Fixes
 
 * `mermaid` occasionally fails to initialize ([#536](https://github.com/cotes2020/jekyll-theme-chirpy/issues/536)) ([48f14e3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/48f14e39ac81bbfb3b9913ea3ee789d775b2d1ae))
@@ -88,14 +160,12 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.0...v5.3.1) (2022-10-25)
 
-
 ### Bug Fixes
 
 * 404 page missing title in tablet/desktop view ([5511b28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5511b2883fd5a395fddfb642588d00c122f18da7))
 * prompt content overflows horizontally ([#705](https://github.com/cotes2020/jekyll-theme-chirpy/issues/705)) ([fb13e32](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fb13e3219b5eca0d2e4f86a1ecabfab75240369f))
 * **tools:** multiple configuration files will fail the test ([80cb0b3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/80cb0b371754e96772a7907877a8ce196398ba3d))
 
-
 ### Improvements
 
 * **layout:** improve the min-height of main content ([#674](https://github.com/cotes2020/jekyll-theme-chirpy/issues/674)) ([49bb93c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/49bb93cc0c89ad9cfaad5edcf9cb28c3d5134575))
@@ -113,7 +183,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.1...v5.3.0) (2022-09-23)
 
-
 ### Features
 
 * add multiple authors to a post ([#677](https://github.com/cotes2020/jekyll-theme-chirpy/issues/677)) ([f1d9e99](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f1d9e99bc02d3cd0a6b0cd1beac545f0cc7a24f8)), closes [#675](https://github.com/cotes2020/jekyll-theme-chirpy/issues/675)
@@ -122,7 +191,6 @@ All notable changes to this project will be documented in this file. See [standa
 * **i18n:** add Hungarian locale file ([#597](https://github.com/cotes2020/jekyll-theme-chirpy/issues/597), [#598](https://github.com/cotes2020/jekyll-theme-chirpy/issues/598)) ([b032977](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b0329775fc24d0323e5cc04cda46ece8b4531802))
 * **i18n:** add Turkish language ([#631](https://github.com/cotes2020/jekyll-theme-chirpy/issues/631)) ([ad137fa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ad137fa2945b1870b9c1dd5e9212a5f4af7c3580))
 
-
 ### Bug Fixes
 
 * add missing color to linkedin icon for share list ([#683](https://github.com/cotes2020/jekyll-theme-chirpy/issues/683)) ([0dcd39d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0dcd39d491c9c49e4acf7f75f83fe6e1d1839e37))
@@ -133,7 +201,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.0...v5.2.1) (2022-06-17)
 
-
 ### Bug Fixes
 
 * exclude CHANGELOG from output ([971fe03](https://github.com/cotes2020/jekyll-theme-chirpy/commit/971fe03ec329ae49e7d60fe3af6101cfbd1acd6c))
@@ -141,7 +208,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.1.0...v5.2.0) (2022-06-09)
 
-
 ### Features
 
 * add es-ES support to locales ([#533](https://github.com/cotes2020/jekyll-theme-chirpy/issues/533)) ([efe75ad](https://github.com/cotes2020/jekyll-theme-chirpy/commit/efe75adf2784956afb7a0b67f6634b146d9cb03b))
@@ -152,7 +218,6 @@ All notable changes to this project will be documented in this file. See [standa
 * **PWA:** add Service Worker update notification ([d127183](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d127183b9774f6321e409acdb66bf8a85d8814be))
 * support showing description of preview image ([2bd6efa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2bd6efa95a174ac44e30a3af1e57e6f40d6e0e3a))
 
-
 ### Bug Fixes
 
 * alt is not a valid attribute for 'a' tag ([58928db](https://github.com/cotes2020/jekyll-theme-chirpy/commit/58928dbc9068db4e4cda4371eeae1865920dce6a))
@@ -172,7 +237,6 @@ All notable changes to this project will be documented in this file. See [standa
 * use `jsonify` to generate valid json ([#521](https://github.com/cotes2020/jekyll-theme-chirpy/issues/521)) ([dd9d5a7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/dd9d5a7207b746342d07176d8969dc4f2c380bf2))
 * when the `site.img_cdn` is set to the local path, the preview-image path loses the `baseurl` ([9cefe58](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9cefe58993d9ea3a3a28424e7ffd8e0911567c5c))
 
-
 ### Improvements
 
 * avoid post pageviews from shifting while loading ([135a16f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/135a16f13ee783d9308669ff9a824847a73c951c))

README.md

@@ -40,7 +40,6 @@
   - Search
   - Atom Feeds
   - Google Analytics
-  - Page Views Reporting
   - SEO & Performance Optimization
 
   </p>

_config.yml

@@ -54,10 +54,6 @@ google_site_verification: # fill in to your verification string
 
 google_analytics:
   id: # fill in your Google Analytics ID
-  # Google Analytics pageviews report settings
-  pv:
-    proxy_endpoint: # fill in the Google Analytics superProxy endpoint of Google App Engine
-    cache_path: # the local PV cache data, friendly to visitors from GFW region
 
 # Prefer color scheme setting.
 #

_data/locales/ar.yml

@@ -40,7 +40,7 @@ copyright:
     ما لم يذكر خلاف ذلك ، يتم ترخيص منشورات المدونة على هذا الموقع
     بموجب ترخيص Creative Commons Attribution 4.0 International (CC BY 4.0) من قبل المؤلف.
 
-meta: باستخدام :PLATFORM السمة :THEME.
+meta: باستخدام :PLATFORM السمة :THEME
 
 not_found:
   statment: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
@@ -70,18 +70,16 @@ post:
     share_link:
       title: أنسخ الرابط
       succeed: تم نسخ الرابط بنجاح!
-  # pinned prompt of posts list on homepage
-  pin_prompt: مثبت
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/bg-BG.yml

@@ -40,7 +40,7 @@ copyright:
     Освен ако не е посочено друго, публикациите в блога на този сайт са лицензирани
     под лиценза Creative Commons Attribution 4.0 (CC BY 4.0) от автора.
 
-meta: Създадено чрез :PLATFORM и :THEME тема.
+meta: Създадено чрез :PLATFORM и :THEME тема
 
 not_found:
   statment: Съжалявам, но на този URL адрес няма налично съдържание.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Копирай линк
       succeed: Линкът е копиран успешно!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Прикрепенa
 
 # categories page
 categories:

_data/locales/cs-CZ.yml

@@ -40,7 +40,7 @@ copyright:
     Pokud není uvedeno jinak, jsou příspěvky na tomto webu licencovány
     pod licencí Creative Commons Attribution 4.0 International (CC BY 4.0) Licence autora.
 
-meta: Použití :PLATFORM s motivem :THEME.
+meta: Použití :PLATFORM s motivem :THEME
 
 not_found:
   statment: Omlouváme se, adresu URL jsme špatně umístili nebo odkazuje na něco, co neexistuje.
@@ -70,18 +70,16 @@ post:
     share_link:
       title: Kopírovat odkaz
       succeed: Zkopírováno!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Připnuto
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/de-DE.yml

@@ -39,7 +39,7 @@ copyright:
   verbose: >-
     Alle Einträge auf dieser Seite stehen, soweit nicht anders angegeben, unter der Lizenz Creative Commons Attribution 4.0 (CC BY 4.0).
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: Entschuldigung, dieser Link verweist auf keine vorhandene Ressource.
@@ -69,8 +69,6 @@ post:
     share_link:
       title: Link kopieren
       succeed: Link erfolgreich kopiert!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Angepinnt
 
 # categories page
 categories:

_data/locales/el-GR.yml

@@ -40,7 +40,7 @@ copyright:
     Εκτός αλλού ή οπουδήποτε αλλού, τα blog posts σε αυτήν την σελίδα βρίσκονται υπο την άδεια
     Creative Commons Attribution 4.0 International (CC BY 4.0) του δημιουργού.
 
-meta: Αξιοποιώντας την :PLATFORM theme :THEME.
+meta: Αξιοποιώντας την :PLATFORM theme :THEME
 
 not_found:
   statment: Συγνώμη, έχουμε τοποθετήσει λάθος αυτήν την διεύθυνση URL ή υποδεικνύει κάτι που δεν υπάρχει.
@@ -70,18 +70,16 @@ post:
     share_link:
       title: Αντιγραφή συνδέσμου
       succeed: Η διεύθυνση αντιγράφθηκε με επιτυχία!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Pinned
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:
@@ -90,4 +88,4 @@ categories:
     plural: Κατηγορίες
   post_measure:
     singular: Δημοσίευση
-    plural: Δημοσιεύσεις
+    plural: Δημοσιεύσεις

_data/locales/en.yml

@@ -40,7 +40,7 @@ copyright:
     Except where otherwise noted, the blog posts on this site are licensed
     under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
 
-meta: Using the :PLATFORM theme :THEME.
+meta: Using the :PLATFORM theme :THEME
 
 not_found:
   statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
@@ -70,18 +70,16 @@ post:
     share_link:
       title: Copy link
       succeed: Link copied successfully!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Pinned
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/es-ES.yml

@@ -40,7 +40,7 @@ copyright:
     Salvo que se indique explícitamente, las entradas de este blog están licenciadas
     bajo la Creative Commons Attribution 4.0 International (CC BY 4.0) License por el autor.
 
-meta: Hecho con :PLATFORM usando el tema :THEME.
+meta: Hecho con :PLATFORM usando el tema :THEME
 
 not_found:
   statment: Lo sentimos, hemos perdido esa URL o apunta a algo que no existe.
@@ -59,7 +59,7 @@ post:
   pageview_measure: visitas
   read_time:
     unit: min
-    prompt: ' de lectura'
+    prompt: " de lectura"
   relate_posts: Lecturas adicionales
   share: Compartir
   button:
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Copiar enlace
       succeed: ¡Enlace copiado!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Fijado
 
 # categories page
 categories:

_data/locales/fi-FI.yml

@@ -39,7 +39,7 @@ copyright:
   verbose: >-
     Paitsi jos erikseen mainitaan on kaikki sisältö Creative Commons Attribution 4.0 International (CC BY 4.0) Lisensoitu kirjoittajan toimesta.
 
-meta: Käytetään :PLATFORM iä Teema :THEME.
+meta: Käytetään :PLATFORM iä Teema :THEME
 
 not_found:
   statment: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
@@ -69,18 +69,16 @@ post:
     share_link:
       title: Kopioi linkki
       succeed: Linkki kopioitu onnistuneesti!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Kiinnitetty
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/fr-FR.yml

@@ -70,8 +70,6 @@ post:
     share_link:
       title: Copier le lien
       succeed: Lien copié avec succès !
-  # pinned prompt of posts list on homepage
-  pin_prompt: Épinglé
 
 # categories page
 categories:

_data/locales/hu-HU.yml

@@ -38,11 +38,11 @@ copyright:
   # Displayed in the footer
   brief: Néhány jog fenntartva.
   verbose: >-
-   Az oldalon található tartalmak
-   Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek,
-   hacsak másképp nincs jelezve.
+    Az oldalon található tartalmak
+    Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek,
+    hacsak másképp nincs jelezve.
 
-meta: Készítve :PLATFORM motorral :THEME témával.
+meta: Készítve :PLATFORM motorral :THEME témával
 
 not_found:
   statment: Sajnáljuk, az URL-t rosszul helyeztük el, vagy valami nem létezőre mutat.
@@ -72,8 +72,6 @@ post:
     share_link:
       title: Link másolása
       succeed: Link sikeresen másolva!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Kitűzve
 
 # categories page
 categories:

_data/locales/id-ID.yml

@@ -40,7 +40,7 @@ copyright:
     Kecuali jika dinyatakan, Postingan blog di situs ini dilisensikan
     di bawah Lisensi Creative Commons Attribution 4.0 International (CC BY 4.0) oleh penulis.
 
-meta: Didukung oleh :PLATFORM dengan tema :THEME.
+meta: Didukung oleh :PLATFORM dengan tema :THEME
 
 not_found:
   statment: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Salin tautan
       succeed: Tautan berhasil disalin!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Disematkan
 
 # categories page
 categories:

_data/locales/it-IT.yml

@@ -40,8 +40,7 @@ copyright:
     Eccetto quando esplicitamente menzionato, i post di questo blog sono da ritenersi sotto
     i termini di licenza Creative Commons Attribution 4.0 International (CC BY 4.0).
 
-
-meta: Servizio offerto da :PLATFORM con tema :THEME.                                       
+meta: Servizio offerto da :PLATFORM con tema :THEME
 not_found:
   statment: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
 
@@ -70,18 +69,16 @@ post:
     share_link:
       title: Copia link
       succeed: Link copiato con successo!
-  # pinned prompt of posts list on homepage
-  pin_prompt: In alto
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/ko-KR.yml

@@ -40,7 +40,7 @@ copyright:
     명시되지 않는 한 이 사이트의 블로그 게시물은 작성자의
     Creative Commons Attribution 4.0 International(CC BY 4.0) 라이선스에 따라 사용이 허가되었습니다.
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: 해당 URL은 존재하지 않습니다.
@@ -70,15 +70,13 @@ post:
     share_link:
       title: 링크 복사하기
       succeed: 링크가 복사되었습니다!
-  # pinned prompt of posts list on homepage
-  pin_prompt: 핀
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%Y/%m/%d'
-    dayjs: 'YYYY/MM/DD'
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
 
 # categories page
 categories:

_data/locales/my-MM.yml

@@ -40,7 +40,7 @@ copyright:
     အခြားမှတ်သားထားချက်များမှလွဲ၍ ဤဆိုက်ရှိ ဘလော့ဂ်ပို့စ်များသည် စာရေးသူ၏
     Creative Commons Attribution 4.0 International (CC BY 4.0) အောက်တွင် လိုင်စင်ရထားပါသည်။
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
@@ -70,8 +70,6 @@ post:
     share_link:
       title: လင့်ခ်ကို ကူးယူရန်
       succeed: လင့်ခ်ကို ကူးယူလိုက်ပြီ။
-  # pinned prompt of posts list on homepage
-  pin_prompt: ချိတ်ထားသည်။
 
 # categories page
 categories:

_data/locales/pt-BR.yml

@@ -40,7 +40,7 @@ copyright:
     Exceto onde indicado de outra forma, as postagens do blog neste site são licenciadas sob a
     Creative Commons Attribution 4.0 International (CC BY 4.0) License pelo autor.
 
-meta: Feito com :PLATFORM usando o tema :THEME.
+meta: Feito com :PLATFORM usando o tema :THEME
 
 not_found:
   statment: Desculpe, a página não foi encontrada.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Copie o link
       succeed: Link copiado com sucesso!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Fixado
 
 # categories page
 categories:

_data/locales/ru-RU.yml

@@ -40,7 +40,7 @@ copyright:
     Публикации на сайте защищены лицензией Creative Commons Attribution 4.0 International (CC BY 4.0),
     если в тексте публикации не указано иное.
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: Извините, эта ссылка указывает на ресурс который не существует.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Скопировать ссылку
       succeed: Ссылка успешно скопирована!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Закреплено
 
 # categories page
 categories:

_data/locales/sl-SI.yml

@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Objava #Post
+  category: Kategorija #Category
+  tag: Oznaka #Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Domov #Home
+  categories: Kategorije #Categories
+  tags: Oznake #Tags
+  archives: Arhiv #Archives
+  about: O meni #About
+
+# the text displayed in the search bar & search results
+search:
+  hint: išči #search
+  cancel: Prekliči #Cancel
+  no_results: Ups! Vsebina ni bila najdena #Oops! No results found.
+
+panel:
+  lastmod: Nedavno Posodobljeno #Recently Updated
+  trending_tags: Priljubljene Oznake #Trending Tags
+  toc: Vsebina #Contents
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Ta objava je licencirana pod :LICENCE_NAME s strani avtorja. #This post is licensed under :LICENSE_NAME by the author.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Nekatere pravice pridržane. #Some rights reserved.
+  verbose: >-
+    Razen kjer navedeno drugače, vse objave spletnega dnevnika so licencirane
+    pod Creative Commons Attribution 4.0 International (CC BY 4.0) s strani avtorja.
+
+meta: Uporabljena :PLATFORM tema :THEME #Using the :PLATFORM theme :THEME
+
+not_found:
+  statment: Oprostite, hiperpovezava je neustrezna ali vsebina ne obstajata. #Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
+
+notification:
+  update_found: Novejša različica vsebine je na voljo. #A new version of content is available.
+  update: Posodobi #Update
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Od #By
+  posted: Objavljeno #Posted
+  updated: Posodobljeno #Updated
+  words: besede #words
+  pageview_measure: ogledi #views
+  read_time:
+    unit: min
+    prompt: beri #read
+  relate_posts: Nadaljnje branje #Further Reading
+  share: Deli #Share
+  button:
+    next: Novejše #Newer
+    previous: Starejše #Older
+    copy_code:
+      succeed: Kopirano! #Copied!
+    share_link:
+      title: Kopiraj povezavo #Copy link
+      succeed: Povezava uspešno kopirana! #Link copied successfully!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%e %b, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: kategorija #category
+    plural: kategorije #categories
+  post_measure:
+    singular: objava #post
+    plural: objave #posts

_data/locales/sv-SE.yml

@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Inlägg #Post
+  category: Kategori #Category
+  tag: Tagga #Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Hem #Home
+  categories: Kategorier #Categories
+  tags: Taggar #Tags
+  archives: Arkiv #Archives
+  about: Om #About
+
+# the text displayed in the search bar & search results
+search:
+  hint: sök
+  cancel: Avbryt
+  no_results: Hoppsan! Hittade inga sökträffar.
+
+panel:
+  lastmod: Senast uppdaterad
+  trending_tags: Trendande taggar
+  toc: Innehåll
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Den här posten är publicerad under licensen :LICENSE_NAME av författaren.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Vissa rättigheter är reserverade.
+  verbose: >-
+    Om inte annat anges är blogginläggen på denna webbplats licensierade
+     under Creative Commons Attribution 4.0 International (CC BY 4.0) av författaren.
+
+meta: Byggd med :PLATFORM och temat :THEME
+
+not_found:
+  statment: Ursäkta, vi har tappat bort den här webbadressen eller så pekar den på något som inte längre finns.
+
+notification:
+  update_found: Det finns en ny version av innehållet.
+  update: Uppdatera sidan
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Av
+  posted: Postad
+  updated: Uppdaterad
+  words: ord
+  pageview_measure: visningar
+  read_time:
+    unit: min
+    prompt: läsning
+  relate_posts: Mer läsning
+  share: Dela
+  button:
+    next: Nyare
+    previous: Äldre
+    copy_code:
+      succeed: Kopierat!
+    share_link:
+      title: Kopiera länk
+      succeed: Länken har kopierats!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: kategori
+    plural: kategorier
+  post_measure:
+    singular: inlägg
+    plural: inlägg

_data/locales/th.yml

@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: โพสต์
+  category: หมวดหมู่
+  tag: แท็ก
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: หน้าแรก
+  categories: หมวดหมู่
+  tags: แท็ก
+  archives: คลังเก็บ
+  about: เกี่ยวกับ
+
+# the text displayed in the search bar & search results
+search:
+  hint: ค้นหา
+  cancel: ยกเลิก
+  no_results: โอ๊ะ! ไม่พบผลลัพธ์
+
+panel:
+  lastmod: อัปเดตล่าสุด
+  trending_tags: แท็กยอดนิยม
+  toc: เนื้อหา
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: โพสต์นี้อยู่ภายใต้การอนุญาต :LICENSE_NAME โดยผู้เขียน
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: สงวนลิขสิทธิ์เป็นบางส่วน
+  verbose: >-
+    เว้นแต่ว่าจะระบุเป็นอย่างอื่น โพสต์บนเว็บไซต์นี้อยู่ภายใต้
+    สัญญาอนุญาตครีเอทีฟคอมมอนส์แบบ 4.0 นานาชาติ (CC BY 4.0) โดยผู้เขียน
+
+meta: กำลังใช้ธีมของ :PLATFORM ชื่อ :THEME
+
+not_found:
+  statment: ขออภัย เราวาง URL นั้นไว้ผิดที่ หรือมันชี้ไปยังสิ่งที่ไม่มีอยู่
+
+notification:
+  update_found: มีเวอร์ชันใหม่ของเนื้อหา
+  update: อัปเดต
+
+# ----- Posts related labels -----
+
+post:
+  written_by: โดย
+  posted: โพสต์เมื่อ
+  updated: อัปเดตเมื่อ
+  words: คำ
+  pageview_measure: ครั้ง
+  read_time:
+    unit: นาที
+    prompt: อ่าน
+  relate_posts: อ่านต่อ
+  share: แชร์
+  button:
+    next: ใหม่กว่า
+    previous: เก่ากว่า
+    copy_code:
+      succeed: คัดลอกแล้ว!
+    share_link:
+      title: คัดลอกลิงก์
+      succeed: คัดลอกลิงก์เรียบร้อยแล้ว!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: หมวดหมู่
+    plural: หมวดหมู่
+  post_measure:
+    singular: โพสต์
+    plural: โพสต์

_data/locales/tr-TR.yml

@@ -40,7 +40,7 @@ copyright:
     Aksi belirtilmediği sürece, bu sitedeki gönderiler Creative Commons Atıf 4.0 Uluslararası (CC BY 4.0) Lisansı altındadır.
     Kısaca sayfa linkini de vererek paylaşabilir veya düzenleyip paylaşabilirsin.
 
-meta: :PLATFORM ve :THEME teması.
+meta: :PLATFORM ve :THEME teması
 
 not_found:
   statment: Üzgünüz, bu linki yanlış yerleştirdik veya var olmayan bir şeye işaret ediyor.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Linki kopyala
       succeed: Link kopyalandı.
-  # pinned prompt of posts list on homepage
-  pin_prompt: Sabitlendi
 
 # categories page
 categories:

_data/locales/uk-UA.yml

@@ -40,7 +40,7 @@ copyright:
     Публікації на сайті захищено ліцензією Creative Commons Attribution 4.0 International (CC BY 4.0),
     якщо інше не вказано в тексті.
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: Вибачте, це посилання вказує на ресурс, що не існує.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Скопіювати посилання
       succeed: Посилання успішно скопійовано!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Закріплено
 
 # categories page
 categories:

_data/locales/vi-VN.yml

@@ -38,7 +38,8 @@ copyright:
   brief: Một số quyền được bảo lưu.
   verbose: >-
     Trừ khi có ghi chú khác, các bài viết đăng trên trang này được cấp phép bởi tác giả theo giấy phép Creative Commons Attribution 4.0 International (CC BY 4.0).
-meta: Trang web này được tạo bởi :PLATFORM với chủ đề :THEME.
+
+meta: Trang web này được tạo bởi :PLATFORM với chủ đề :THEME
 
 not_found:
   statment: Xin lỗi, chúng tôi đã đặt nhầm URL hoặc đường dẫn trỏ đến một trang nào đó không tồn tại.
@@ -68,8 +69,6 @@ post:
     share_link:
       title: Sao chép đường dẫn
       succeed: Đã sao chép đường dẫn thành công!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Bài ghim
 
 # categories page
 categories:

_data/locales/zh-CN.yml

@@ -39,7 +39,7 @@ copyright:
   verbose: >-
     除非另有说明，本网站上的博客文章均由作者按照知识共享署名 4.0 国际 (CC BY 4.0) 许可协议进行授权。
 
-meta: 本站由 :PLATFORM 生成，采用 :THEME 主题。
+meta: 本站采用 :PLATFORM 主题 :THEME
 
 not_found:
   statment: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
@@ -69,15 +69,13 @@ post:
     share_link:
       title: 分享链接
       succeed: 链接已复制！
-  # pinned prompt of posts list on homepage
-  pin_prompt: 顶置
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%Y/%m/%d'
-    dayjs: 'YYYY/MM/DD'
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
 
 # categories page
 categories:

_data/locales/zh-TW.yml

@@ -0,0 +1,83 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: 文章
+  category: 分類
+  tag: 標籤
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: 首頁
+  categories: 分類
+  tags: 標籤
+  archives: 封存
+  about: 關於
+
+# the text displayed in the search bar & search results
+search:
+  hint: 搜尋
+  cancel: 取消
+  no_results: 沒有搜尋結果
+
+panel:
+  lastmod: 最近更新
+  trending_tags: 熱門標籤
+  toc: 文章摘要
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: 本文章以 :LICENSE_NAME 授權
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: 保留部份權利。
+  verbose: >-
+    除非另有說明，否則本網誌的文章均由作者按照姓名標示 4.0 國際 (CC BY 4.0) 授權條款進行授權。
+
+meta: 本網站使用 :PLATFORM 產生，採用 :THEME 主題
+
+not_found:
+  statment: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
+
+notification:
+  update_found: 發現新版本更新。
+  update: 更新
+
+# ----- Posts related labels -----
+
+post:
+  written_by: 作者
+  posted: 發布於
+  updated: 更新於
+  words: 字
+  pageview_measure: 次瀏覽
+  read_time:
+    unit: 分鐘
+    prompt: 閱讀
+  relate_posts: 相關文章
+  share: 分享
+  button:
+    next: 下一篇
+    previous: 上一篇
+    copy_code:
+      succeed: 已複製！
+    share_link:
+      title: 分享連結
+      succeed: 已複製連結！
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
+
+# categories page
+categories:
+  category_measure: 個分類
+  post_measure: 篇文章

_data/origin/basic.yml

@@ -31,9 +31,6 @@ dayjs:
     relativeTime: /assets/lib/dayjs/plugin/relativeTime.min.js
     localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.min.js
 
-countup:
-  js: /assets/lib/countup.js/countUp.min.js
-
 magnific-popup:
   css: /assets/lib/magnific-popup/magnific-popup.css
   js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js

_data/origin/cors.yml

@@ -16,34 +16,31 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:w
 # Libraries
 
 jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
+  js: https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js
 
 bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css
 
 search:
   js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/localizedFormat.min.js
-
-countup:
-  js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/localizedFormat.min.js
 
 magnific-popup:
   css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css

_includes/comments/disqus.html

@@ -1,41 +1,39 @@
-<!--
-  The Disqus lazy loading.
--->
+<!-- The Disqus lazy loading. -->
 <div id="disqus_thread" class="pt-2 pb-2">
-  <p class="text-center text-muted small">
-    Comments powered by <a href="https://disqus.com/">Disqus</a>.
-  </p>
+  <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
 </div>
 
 <script type="text/javascript">
-
   var disqus_config = function () {
     this.page.url = '{{ page.url | absolute_url }}';
     this.page.identifier = '{{ page.url }}';
   };
 
   /* Lazy loading */
-  var disqus_observer = new IntersectionObserver(function (entries) {
-    if(entries[0].isIntersecting) {
+  var disqus_observer = new IntersectionObserver(
+    function (entries) {
+      if (entries[0].isIntersecting) {
         (function () {
-            var d = document, s = d.createElement('script');
-            s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
-            s.setAttribute('data-timestamp', +new Date());
-            (d.head || d.body).appendChild(s);
+          var d = document,
+            s = d.createElement('script');
+          s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
+          s.setAttribute('data-timestamp', +new Date());
+          (d.head || d.body).appendChild(s);
         })();
 
         disqus_observer.disconnect();
-    }
-  }, { threshold: [0] });
+      }
+    },
+    { threshold: [0] }
+  );
 
   disqus_observer.observe(document.querySelector('#disqus_thread'));
 
   /* Auto switch theme */
   function reloadDisqus() {
-    if (event.source === window && event.data &&
-      event.data.direction === ModeToggle.ID) {
+    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
       /* Disqus hasn't been loaded */
-      if (typeof DISQUS === "undefined") {
+      if (typeof DISQUS === 'undefined') {
         return;
       }
 
@@ -45,10 +43,7 @@
     }
   }
 
-  const modeToggle = document.querySelector(".mode-toggle");
-
-  if (typeof modeToggle !== "undefined") {
-    window.addEventListener("message", reloadDisqus);
+  if (document.querySelector('.mode-toggle')) {
+    window.addEventListener('message', reloadDisqus);
   }
-
 </script>

_includes/comments/giscus.html

@@ -1,44 +1,54 @@
 <!-- https://giscus.app/ -->
 <script type="text/javascript">
-  $(function () {
-    const origin = "https://giscus.app";
-    const iframe = "iframe.giscus-frame";
-    const lightTheme = "light";
-    const darkTheme = "dark_dimmed";
-    let initTheme = lightTheme;
+  (function () {
+    const origin = 'https://giscus.app';
+    const iframe = 'iframe.giscus-frame';
+    const lightTheme = 'light';
+    const darkTheme = 'dark_dimmed';
 
-    if ($("html[data-mode=dark]").length > 0
-        || ($("html[data-mode]").length == 0
-            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+    let initTheme = lightTheme;
+    const html = document.documentElement;
+
+    if (
+      (html.hasAttribute('data-mode') &&
+        html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
       initTheme = darkTheme;
     }
 
     let giscusAttributes = {
-      "src": "https://giscus.app/client.js",
-      "data-repo": "{{ site.comments.giscus.repo}}",
-      "data-repo-id": "{{ site.comments.giscus.repo_id }}",
-      "data-category": "{{ site.comments.giscus.category }}",
-      "data-category-id": "{{ site.comments.giscus.category_id }}",
-      "data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
-      "data-reactions-enabled": "{{ site.comments.giscus.reactions_enabled | default: '1' }}",
-      "data-emit-metadata": "0",
-      "data-theme": initTheme,
-      "data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",
-      "data-lang": "{{ site.comments.giscus.lang | default: lang }}",
-      "crossorigin": "anonymous",
-      "async": ""
+      src: 'https://giscus.app/client.js',
+      'data-repo': '{{ site.comments.giscus.repo}}',
+      'data-repo-id': '{{ site.comments.giscus.repo_id }}',
+      'data-category': '{{ site.comments.giscus.category }}',
+      'data-category-id': '{{ site.comments.giscus.category_id }}',
+      'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
+      'data-emit-metadata': '0',
+      'data-theme': initTheme,
+      'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
+      'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
+      crossorigin: 'anonymous',
+      async: ''
     };
 
-    let giscusScript = document.createElement("script");
-    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
-    document.getElementById("tail-wrapper").appendChild(giscusScript);
+    let giscusScript = document.createElement('script');
+    Object.entries(giscusAttributes).forEach(([key, value]) =>
+      giscusScript.setAttribute(key, value)
+    );
+    document.getElementById('tail-wrapper').appendChild(giscusScript);
 
-    addEventListener("message", (event) => {
-      if (event.source === window && event.data &&
-            event.data.direction === ModeToggle.ID) {
+    addEventListener('message', (event) => {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.direction === ModeToggle.ID
+      ) {
         /* global theme mode changed */
         const mode = event.data.message;
-        const theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
+        const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
 
         const message = {
           setConfig: {
@@ -49,8 +59,6 @@
         const giscus = document.querySelector(iframe).contentWindow;
         giscus.postMessage({ giscus: message }, origin);
       }
-
     });
-
-  });
+  })();
 </script>

_includes/datetime.html

@@ -4,12 +4,16 @@
 -->
 
 {% assign wrap_elem = include.wrap | default: 'em' %}
-{% assign df_strftime = site.data.locales[site.lang].df.post.strftime | default: '%d/%m/%Y' %}
-{% assign df_dayjs = site.data.locales[site.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
+{% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
+{% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
 
-<{{ wrap_elem }} class="{% if include.class %}{{ include.class }}{% endif %}"
-    data-ts="{{ include.date | date: '%s' }}"
-    data-df="{{ df_dayjs }}"
-    {% if include.tooltip %}data-toggle="tooltip" data-placement="bottom"{% endif %}>
+<{{ wrap_elem }}
+  class="{% if include.class %}{{ include.class }}{% endif %}"
+  data-ts="{{ include.date | date: '%s' }}"
+  data-df="{{ df_dayjs }}"
+  {% if include.tooltip %}
+    data-bs-toggle="tooltip" data-bs-placement="bottom"
+  {% endif %}
+>
   {{ include.date | date: df_strftime }}
 </{{ wrap_elem }}>

_includes/footer.html

@@ -1,36 +1,34 @@
 <!-- The Footer -->
 
 <footer>
-  <div class="container pl-lg-4 pr-lg-4">
-    <div class="d-flex justify-content-between align-items-center text-muted ml-md-3 mr-md-3">
-      <div class="footer-left">
-        <p class="mb-0">
-          © {{ 'now' | date: "%Y" }}
-          <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-          {% if site.data.locales[site.lang].copyright.brief %}
-          <span data-toggle="tooltip" data-placement="top"
-            title="{{ site.data.locales[site.lang].copyright.verbose }}">{{ site.data.locales[site.lang].copyright.brief }}</span>
-          {% endif %}
-        </p>
-      </div>
-
-      <div class="footer-right">
-        <p class="mb-0">
-
-          {%- capture _platform -%}
+  <div class="container px-lg-4">
+    <div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
+      <p>
+        {%- capture _platform -%}
           <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-          {%- endcapture -%}
+        {%- endcapture -%}
 
-          {%- capture _theme -%}
+        {%- capture _theme -%}
           <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-          {%- endcapture -%}
+        {%- endcapture -%}
 
-          {{ site.data.locales[site.lang].meta
-            | default: 'Using the :PLATFORM theme :THEME.'
-            | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
-          }}
-        </p>
-      </div>
+        {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
+      </p>
+
+      <p>
+        {{- '©' }}
+        {{ 'now' | date: '%Y' }}
+        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+        {% if site.data.locales[include.lang].copyright.brief %}
+          <span
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title="{{ site.data.locales[include.lang].copyright.verbose }}"
+          >
+            {{- site.data.locales[include.lang].copyright.brief -}}
+          </span>
+        {% endif %}
+      </p>
     </div>
   </div>
 </footer>

_includes/head.html

@@ -11,16 +11,6 @@
     content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
   >
 
-  {% if page.layout == 'home' or page.layout == 'post' %}
-    {% if site.google_analytics.pv.proxy_endpoint %}
-      <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
-    {% endif %}
-
-    {% if site.google_analytics.pv.cache_path %}
-      <meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
-    {% endif %}
-  {% endif %}
-
   {% capture seo_tags %}
     {% seo title=false %}
   {% endcapture %}
@@ -55,18 +45,18 @@
     {{ site.title }}
   </title>
 
-  {% include favicons.html %}
+  {% include_cached favicons.html %}
 
   {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-    <link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet">
+    <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
 
   {% else %}
-    {% for cdn in site.data.assets[origin].cdns %}
+    {% for cdn in site.data.origin[type].cdns %}
       <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
       <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
     {% endfor %}
 
-    <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
   {% endif %}
 
   <!-- GA -->
@@ -76,41 +66,30 @@
 
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
-
-    {% if site.google_analytics.pv.proxy_endpoint %}
-      {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
-        | replace: 'https://', ''
-        | split: '/'
-        | first
-        | prepend: 'https://'
-      %}
-      <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
-      <link rel="dns-prefetch" href="{{ proxy_url }}">
-    {% endif %}
   {% endif %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap.css | relative_url}}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url}}">
 
   <!-- Font Awesome -->
-  <link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css | relative_url }}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
   {% if site.toc and page.toc %}
-    <link rel="stylesheet" href="{{ site.data.assets[origin].toc.css | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
   {% endif %}
 
   {% if page.layout == 'page' or page.layout == 'post' %}
     <!-- Manific Popup -->
-    <link rel="stylesheet" href="{{ site.data.assets[origin].magnific-popup.css | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
   {% endif %}
 
   <!-- JavaScript -->
 
-  <script src="{{ site.data.assets[origin].jquery.js | relative_url }}"></script>
-
   {% unless site.theme_mode %}
     {% include mode-toggle.html %}
   {% endunless %}
+
+  {% include metadata-hook.html %}
 </head>

_includes/js-selector.html

@@ -1,24 +1,28 @@
 <!-- JS selector for site. -->
 
+<!-- commons -->
+
+{% assign urls = site.data.origin[type].jquery.js
+  | append: ','
+  | append: site.data.origin[type].bootstrap.js
+  | append: ','
+  | append: site.data.origin[type].search.js
+%}
+
 <!-- layout specified -->
 
-{% if page.layout == 'post' %}
-  {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
-    <!-- pv-report needs countup.js -->
-    <script async src="{{ site.data.assets[origin].countup.js | relative_url }}"></script>
-  {% endif %}
-{% endif %}
+{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].lazysizes.js %}
 
-{% if page.layout == 'post' or page.layout == 'page' %}
-  <!-- image lazy-loading & popup & clipboard -->
-  {% assign _urls = site.data.assets[origin]['magnific-popup'].js
-    | append: ','
-    | append: site.data.assets[origin].lazysizes.js
-    | append: ','
-    | append: site.data.assets[origin].clipboard.js
-  %}
-
-  {% include jsdelivr-combine.html urls=_urls %}
+  {% unless page.layout == 'home' %}
+    <!-- image lazy-loading & popup & clipboard -->
+    {% assign urls = urls
+      | append: ','
+      | append: site.data.origin[type]['magnific-popup'].js
+      | append: ','
+      | append: site.data.origin[type].clipboard.js
+    %}
+  {% endunless %}
 {% endif %}
 
 {% if page.layout == 'home'
@@ -29,29 +33,39 @@
 %}
   {% assign locale = site.lang | split: '-' | first %}
 
-  {% assign _urls = site.data.assets[origin].dayjs.js.common
+  {% assign urls = urls
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.locale
+    | append: site.data.origin[type].dayjs.js.common
+    | append: ','
+    | append: site.data.origin[type].dayjs.js.locale
     | replace: ':LOCALE', locale
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.relativeTime
+    | append: site.data.origin[type].dayjs.js.relativeTime
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.localizedFormat
+    | append: site.data.origin[type].dayjs.js.localizedFormat
   %}
-
-  {% include jsdelivr-combine.html urls=_urls %}
 {% endif %}
 
+{% if page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].toc.js %}
+{% endif %}
+
+{% if page.mermaid %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].mermaid.js %}
+{% endif %}
+
+{% include jsdelivr-combine.html urls=urls %}
+
 {% case page.layout %}
-  {% when 'categories', 'post', 'page' %}
-    {% assign type = page.layout %}
-  {% when 'home', 'archives', 'category', 'tag' %}
-    {% assign type = 'misc' %}
+  {% when 'home', 'categories', 'post', 'page' %}
+    {% assign js = page.layout %}
+  {% when 'archives', 'category', 'tag' %}
+    {% assign js = 'misc' %}
   {% else %}
-    {% assign type = 'commons' %}
+    {% assign js = 'commons' %}
 {% endcase %}
 
-{% capture script %}/assets/js/dist/{{ type }}.min.js{% endcapture %}
+{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
 <script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
@@ -73,14 +87,10 @@
       }
     };
   </script>
-  <script src="{{ site.data.assets[origin].polyfill.js | relative_url }}"></script>
-  <script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js | relative_url }}"></script>
+  <script src="{{ site.data.origin[type].polyfill.js | relative_url }}"></script>
+  <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
-<!-- commons -->
-
-<script src="{{ site.data.assets[origin].bootstrap.js | relative_url }}"></script>
-
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   {% if site.pwa.enabled %}

_includes/jsdelivr-combine.html

@@ -5,7 +5,6 @@
 {% assign domain = 'https://cdn.jsdelivr.net/' %}
 
 {% for url in urls %}
-
   {% if url contains domain %}
     {% assign url_snippet = url | slice: domain.size, url.size %}
 
@@ -16,15 +15,10 @@
     {% endif %}
 
   {% elsif url contains '//' %}
-
     <script src="{{ url }}"></script>
-
   {% else %}
-
     <script src="{{ url | relative_url }}"></script>
-
   {% endif %}
-
 {% endfor %}
 
 {% if combined_urls %}

_includes/lang.html

@@ -0,0 +1,8 @@
+{% comment %}
+  Detect appearance language and return it through variable "lang"
+{% endcomment %}
+{% if site.data.locales[site.lang] %}
+  {% assign lang = site.lang %}
+{% else %}
+  {% assign lang = 'en' %}
+{% endif %}

_includes/mermaid.html

@@ -1,59 +1,58 @@
-<!--
-  mermaid-js loader
--->
-
-<script src="{{ site.data.assets[origin].mermaid.js | relative_url }}"></script>
-
-<script>
+<!-- mermaid-js loader -->
+<script type="text/javascript">
   (function () {
-
     function updateMermaid(event) {
-      if (event.source === window && event.data &&
-        event.data.direction === ModeToggle.ID) {
-
+      if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
         const mode = event.data.message;
 
-        if (typeof mermaid === "undefined") {
+        if (typeof mermaid === 'undefined') {
           return;
         }
 
-        let expectedTheme = (mode === ModeToggle.DARK_MODE ? "dark" : "default");
-        let config = {theme: expectedTheme};
+        let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
+        let config = { theme: expectedTheme };
 
         /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $(".mermaid").each(function () {
+        $('.mermaid').each(function () {
           let svgCode = $(this).prev().children().html();
-          $(this).removeAttr("data-processed");
+          $(this).removeAttr('data-processed');
           $(this).html(svgCode);
         });
 
         mermaid.initialize(config);
-        mermaid.init(undefined, ".mermaid");
+        mermaid.init(undefined, '.mermaid');
       }
     }
 
-    let initTheme = "default";
+    let initTheme = 'default';
+    const html = document.documentElement;
 
-    if ($("html[data-mode=dark]").length > 0
-      || ($("html[data-mode]").length == 0
-        && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-      initTheme = "dark";
+    if (
+      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      initTheme = 'dark';
     }
 
     let mermaidConf = {
-      theme: initTheme  /* <default|dark|forest|neutral> */
+      theme: initTheme /* <default|dark|forest|neutral> */
     };
 
     /* Create mermaid tag */
-    $("pre").has("code.language-mermaid").each(function () {
-      let svgCode = $(this).children().html();
-      $(this).addClass("unloaded");
-      $(this).after(`<pre class=\"mermaid\">${svgCode}</pre>`);
+    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
+      const svgCode = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add('unloaded');
+      /* create mermaid node */
+      let mermaid = document.createElement('pre');
+      mermaid.classList.add('mermaid');
+      const text = document.createTextNode(svgCode);
+      mermaid.appendChild(text);
+      backup.after(mermaid);
     });
 
     mermaid.initialize(mermaidConf);
 
-    window.addEventListener("message", updateMermaid);
+    window.addEventListener('message', updateMermaid);
   })();
-
 </script>

_includes/metadata-hook.html

@@ -0,0 +1 @@
+<!-- A placeholder to allow defining custom metadata -->

_includes/mode-toggle.html

@@ -1,14 +1,22 @@
-<!--
-  Switch the mode between dark and light.
--->
+<!-- Switch the mode between dark and light. -->
 
 <script type="text/javascript">
   class ModeToggle {
-    static get MODE_KEY() { return "mode"; }
-    static get MODE_ATTR() { return "data-mode"; }
-    static get DARK_MODE() { return "dark"; }
-    static get LIGHT_MODE() { return "light"; }
-    static get ID() { return "mode-toggle"; }
+    static get MODE_KEY() {
+      return 'mode';
+    }
+    static get MODE_ATTR() {
+      return 'data-mode';
+    }
+    static get DARK_MODE() {
+      return 'dark';
+    }
+    static get LIGHT_MODE() {
+      return 'light';
+    }
+    static get ID() {
+      return 'mode-toggle';
+    }
 
     constructor() {
       if (this.hasMode) {
@@ -45,17 +53,29 @@
       });
     } /* constructor() */
 
-    get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
+    get sysDarkPrefers() {
+      return window.matchMedia('(prefers-color-scheme: dark)');
+    }
 
-    get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
+    get isSysDarkPrefer() {
+      return this.sysDarkPrefers.matches;
+    }
 
-    get isDarkMode() { return this.mode === ModeToggle.DARK_MODE; }
+    get isDarkMode() {
+      return this.mode === ModeToggle.DARK_MODE;
+    }
 
-    get isLightMode() { return this.mode === ModeToggle.LIGHT_MODE; }
+    get isLightMode() {
+      return this.mode === ModeToggle.LIGHT_MODE;
+    }
 
-    get hasMode() { return this.mode != null; }
+    get hasMode() {
+      return this.mode != null;
+    }
 
-    get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
+    get mode() {
+      return sessionStorage.getItem(ModeToggle.MODE_KEY);
+    }
 
     /* get the current mode on screen */
     get modeStatus() {
@@ -67,26 +87,29 @@
     }
 
     setDark() {
-      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
+      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
       sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
     }
 
     setLight() {
-      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
+      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
       sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
     }
 
     clearMode() {
-      $('html').removeAttr(ModeToggle.MODE_ATTR);
+      document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
       sessionStorage.removeItem(ModeToggle.MODE_KEY);
     }
 
     /* Notify another plugins that the theme mode has changed */
     notify() {
-      window.postMessage({
-        direction: ModeToggle.ID,
-        message: this.modeStatus
-      }, "*");
+      window.postMessage(
+        {
+          direction: ModeToggle.ID,
+          message: this.modeStatus
+        },
+        '*'
+      );
     }
 
     flipMode() {

_includes/origin-type.html

@@ -1,12 +1,13 @@
-{% comment %} Site static assets origin {% endcomment %}
-{% assign origin = 'cross_origin' %}
+{% comment %} Site static assets origin type {% endcomment %}
+
+{% assign type = 'cors' %}
 
 {% if site.assets.self_host.enabled %}
   {% if site.assets.self_host.env %}
     {% if site.assets.self_host.env == jekyll.environment %}
-      {% assign origin = 'self_host' %}
+      {% assign type = 'basic' %}
     {% endif %}
   {% else %}
-    {% assign origin = 'self_host' %}
+    {% assign type = 'basic' %}
   {% endif %}
 {% endif %}

_includes/post-nav.html

@@ -1,30 +1,37 @@
-<!--
-  Navigation buttons at the bottom of the post.
--->
+<!-- Navigation buttons at the bottom of the post. -->
 
 <div class="post-navigation d-flex justify-content-between">
   {% if page.previous.url %}
-  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary"
-    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
-    <p>{{ page.previous.title }}</p>
-  </a>
+    <a
+      href="{{ site.baseurl }}{{ page.previous.url }}"
+      class="btn btn-outline-primary"
+      prompt="{{ site.data.locales[include.lang].post.button.previous }}"
+    >
+      <p>{{ page.previous.title }}</p>
+    </a>
   {% else %}
-  <div class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
-    <p>-</p>
-  </div>
+    <div
+      class="btn btn-outline-primary disabled"
+      prompt="{{ site.data.locales[include.lang].post.button.previous }}"
+    >
+      <p>-</p>
+    </div>
   {% endif %}
 
   {% if page.next.url %}
-  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary"
-    prompt="{{ site.data.locales[site.lang].post.button.next }}">
-    <p>{{ page.next.title }}</p>
-  </a>
+    <a
+      href="{{ site.baseurl }}{{page.next.url}}"
+      class="btn btn-outline-primary"
+      prompt="{{ site.data.locales[include.lang].post.button.next }}"
+    >
+      <p>{{ page.next.title }}</p>
+    </a>
   {% else %}
-  <div class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[site.lang].post.button.next }}">
-    <p>-</p>
-  </div>
+    <div
+      class="btn btn-outline-primary disabled"
+      prompt="{{ site.data.locales[include.lang].post.button.next }}"
+    >
+      <p>-</p>
+    </div>
   {% endif %}
-
 </div>

_includes/post-paginator.html

@@ -1,13 +1,11 @@
-<!--
-  The paginator for post list on HomgPage.
--->
+<!-- The paginator for post list on HomgPage. -->
 
-<ul class="pagination align-items-center mt-4 pl-lg-2">
+<ul class="pagination align-items-center mt-4 mb-1 ps-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
     {% assign prev_url = paginator.previous_page_path | relative_url %}
   {% else %}
-    {% assign prev_url = "#" %}
+    {% assign prev_url = '#' %}
   {% endif %}
 
   <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
@@ -21,7 +19,6 @@
   {% assign right_ellipsis = false %}
 
   {% for i in (1..paginator.total_pages) %}
-
     {% assign pre = paginator.page | minus: 1 %}
     {% assign next = paginator.page | plus: 1 %}
     {% assign pre_less = pre | minus: 1 %}
@@ -37,7 +34,7 @@
         {% assign show = true %}
       {% endif %}
     {% else %}
-      {% if i == 1 or i == paginator.total_pages%}
+      {% if i == 1 or i == paginator.total_pages %}
         {% assign show = true %}
       {% elsif i >= pre and i <= next %}
         {% assign show = true %}
@@ -47,7 +44,12 @@
     {% if show %}
       <!-- show number -->
       <li class="page-item {% if i == paginator.page %} active{% endif %}">
-        <a class="page-link btn-box-shadow" href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}">{{ i }}</a>
+        <a
+          class="page-link btn-box-shadow"
+          href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
+        >
+          {{- i -}}
+        </a>
       </li>
     {% else %}
       <!-- hide number -->
@@ -63,7 +65,6 @@
         {% assign right_ellipsis = true %}
       {% endif %}
     {% endif %}
-
   {% endfor %}
 
   <!-- mobile pagination -->
@@ -76,7 +77,7 @@
   {% if paginator.next_page_path %}
     {% assign next_url = paginator.next_page_path | relative_url %}
   {% else %}
-    {% assign next_url = "#" %}
+    {% assign next_url = '#' %}
   {% endif %}
 
   <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
@@ -84,5 +85,5 @@
       <i class="fas fa-angle-right"></i>
     </a>
   </li>
-
-</ul> <!-- .pagination -->
+</ul>
+<!-- .pagination -->

_includes/post-sharing.html

@@ -1,9 +1,7 @@
-<!--
- Post sharing snippet
--->
+<!-- Post sharing snippet -->
 
 <div class="share-wrapper">
-  <span class="share-label text-muted mr-1">{{ site.data.locales[site.lang].post.share }}</span>
+  <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign title = title | uri_escape %}
@@ -11,17 +9,27 @@
 
     {% for share in site.data.share.platforms %}
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
-        <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
-          title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
-          <i class="fa-fw {{ share.icon }}"></i>
-        </a>
+      <a
+        href="{{ link }}"
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="{{ share.type }}"
+        target="_blank"
+        rel="noopener"
+        aria-label="{{ share.type }}"
+      >
+        <i class="fa-fw {{ share.icon }}"></i>
+      </a>
     {% endfor %}
 
-    <i id="copy-link" class="fa-fw fas fa-link small"
-        data-toggle="tooltip" data-placement="top"
-        title="{{ site.data.locales[site.lang].post.button.share_link.title }}"
-        data-title-succeed="{{ site.data.locales[site.lang].post.button.share_link.succeed }}">
+    <i
+      id="copy-link"
+      class="fa-fw fas fa-link small"
+      data-bs-toggle="tooltip"
+      data-bs-placement="top"
+      title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
+      data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
+    >
     </i>
-
   </span>
 </div>

_includes/read-time.html

@@ -1,10 +1,8 @@
-<!--
-  Calculate the post's reading time, and display the word count in tooltip
- -->
+<!-- Calculate the post's reading time, and display the word count in tooltip -->
 
-{% assign words = include.content | strip_html | number_of_words: "auto" %}
+{% assign words = include.content | strip_html | number_of_words: 'auto' %}
 
-<!-- words per minute  -->
+<!-- words per minute -->
 
 {% assign wpm = 180 %}
 {% assign min_time = 1 %}
@@ -16,15 +14,24 @@
 {% endunless %}
 
 {% capture read_prompt %}
-  {{- site.data.locales[site.lang].post.read_time.prompt -}}
+  {{- site.data.locales[include.lang].post.read_time.prompt -}}
 {% endcapture %}
 
 <!-- return element -->
-<span class="readtime" data-toggle="tooltip" data-placement="bottom"
-  title="{{ words }} {{ site.data.locales[site.lang].post.words }}">
-  <em>{{- read_time -}}{{" "}}{{- site.data.locales[site.lang].post.read_time.unit -}}</em>
+<span
+  class="readtime"
+  data-bs-toggle="tooltip"
+  data-bs-placement="bottom"
+  title="{{ words }} {{ site.data.locales[include.lang].post.words }}"
+>
+  <em>
+    {{- read_time -}}
+    {{ ' ' }}
+    {{- site.data.locales[include.lang].post.read_time.unit -}}
+  </em>
   {%- if include.prompt -%}
     {%- assign _prompt_words = read_prompt | number_of_words: 'auto' -%}
-    {%- unless _prompt_words > 1 -%}{{ " " }}{%- endunless -%}{{ read_prompt }}
+    {%- unless _prompt_words > 1 -%}{{ ' ' }}{%- endunless -%}
+    {{ read_prompt }}
   {%- endif -%}
 </span>

_includes/refactor-content.html

@@ -1,6 +1,4 @@
-<!--
-  Refactor the HTML structure.
--->
+<!-- Refactor the HTML structure -->
 
 {% assign _content = include.content %}
 
@@ -44,7 +42,6 @@
 {% endif %}
 
 <!-- images -->
-
 {% assign IMG_TAG = '<img ' %}
 
 {% if _content contains IMG_TAG %}
@@ -94,9 +91,9 @@
         {% continue %}
       {% endunless %}
 
-      {% assign _pair = _attr | remove: '"' | split: '=' %}
+      {% assign _pair = _attr | split: '="' %}
       {% capture _key %}{{ _pair | first }}{% endcapture %}
-      {% capture _value %}{{ _pair | last }}{% endcapture %}
+      {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
 
       {% case _key %}
         {% when 'width' %}
@@ -110,7 +107,6 @@
         {% when 'class' %}
           {% assign _class = _value %}
       {% endcase %}
-
     {% endfor %}
 
     <!-- take out classes -->
@@ -162,28 +158,37 @@
     <!-- Bypass the HTML-proofer test -->
     {% assign _left = _left | append: ' data-proofer-ignore' %}
 
-    <!-- make sure the `<img>` is wrapped by `<a>` -->
-    {% assign _parent = _right | slice: 1, 4 %}
-
-    {% if _parent == '</a>' %}
-      <!-- add class to exist <a> tag -->
-      {% assign _size = _img_content | size | minus: 1 %}
-      {% capture _class %}
-        class="img-link{% unless _lqip %} shimmer{% endunless %}"
-      {% endcapture %}
-      {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
-
-    {% else %}
+    {% if page.layout == 'home' %}
       <!-- create the image wrapper -->
       {%- capture _wrapper_start -%}
-        <a href="{{ _final_src | default: _src  }}" class="popup img-link {{ _class }}">
+        <div class="preview-img {{ _class | strip }}">
       {%- endcapture -%}
       {% assign _img_content = _img_content | append: _wrapper_start %}
-      {% assign _right = _right | prepend: '></a' %}
+      {% assign _right = _right | prepend: '></div' %}
+
+    {% else %}
+      <!-- make sure the `<img>` is wrapped by `<a>` -->
+      {% assign _parent = _right | slice: 1, 4 %}
+
+      {% if _parent == '</a>' %}
+        <!-- add class to exist <a> tag -->
+        {% assign _size = _img_content | size | minus: 1 %}
+        {% capture _class %}
+          class="img-link{% unless _lqip %} shimmer{% endunless %}"
+        {% endcapture %}
+        {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
+      {% else %}
+        <!-- create the image wrapper -->
+        {%- capture _wrapper_start -%}
+          <a href="{{ _final_src | default: _src  }}" class="popup img-link {{ _class }}">
+        {%- endcapture -%}
+        {% assign _img_content = _img_content | append: _wrapper_start %}
+        {% assign _right = _right | prepend: '></a' %}
+      {% endif %}
     {% endif %}
 
     <!-- combine -->
-    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
+    {% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %}
 
   {% endfor %}
 
@@ -210,11 +215,11 @@
 
       {% if _left contains 'file="' %}
         {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
-        {% assign _label_icon = 'far fa-file-code' %}
+        {% assign _label_icon = 'far fa-file-code fa-fw' %}
       {% else %}
         {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
         {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
-        {% assign _label_icon = 'fas fa-code small' %}
+        {% assign _label_icon = 'fas fa-code fa-fw small' %}
       {% endif %}
 
       {% capture _label %}
@@ -225,7 +230,7 @@
           | append: '<div class="code-header">'
           | append: _label
           | append: '<button aria-label="copy" data-title-succeed="'
-          | append: site.data.locales[site.lang].post.button.copy_code.succeed
+          | append: site.data.locales[include.lang].post.button.copy_code.succeed
           | append: '"><i class="far fa-clipboard"></i></button></div>'
           | append: '<div class="highlight"><code>'
       %}
@@ -262,7 +267,7 @@
 
       {% assign left = snippet | split: mark_end | first %}
       {% assign right = snippet | slice: left.size, snippet.size %}
-      {% assign left = left | replace_first: '">', '"><span class="mr-2">' | append: '</span>' %}
+      {% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
 
       {% assign _new_content = _new_content | append: mark_start
           | append: left | append: anchor | append: right
@@ -278,5 +283,4 @@
 {% assign _content = _heading_content %}
 
 <!-- return -->
-
 {{ _content }}

_includes/related-posts.html

@@ -1,20 +1,20 @@
 <!--
- Recommend the other 3 posts according to the tags and categories of the current post,
- if the number is not enough, use the other latest posts to supplement.
+  Recommend the other 3 posts according to the tags and categories of the current post,
+  if the number is not enough, use the other latest posts to supplement.
 -->
 
-<!-- The total size of related posts  -->
+<!-- The total size of related posts -->
 {% assign TOTAL_SIZE = 3 %}
 
-<!-- An random integer that bigger than 0  -->
+<!-- An random integer that bigger than 0 -->
 {% assign TAG_SCORE = 1 %}
 
-<!-- Equals to TAG_SCORE / {max_categories_hierarchy}  -->
+<!-- Equals to TAG_SCORE / {max_categories_hierarchy} -->
 {% assign CATEGORY_SCORE = 0.5 %}
 
-{% assign SEPARATOR = ":" %}
+{% assign SEPARATOR = ':' %}
 
-{% assign score_list = "" | split: "" %}
+{% assign score_list = '' | split: '' %}
 {% assign last_index = site.posts.size | minus: 1 %}
 
 {% for i in (0..last_index) %}
@@ -42,11 +42,9 @@
     {% capture score_item %}{{ score }}{{ SEPARATOR }}{{ i }}{% endcapture %}
     {% assign score_list = score_list | push: score_item %}
   {% endif %}
-
 {% endfor %}
 
-
-{% assign index_list = "" | split: "" %}
+{% assign index_list = '' | split: '' %}
 
 {% if score_list.size > 0 %}
   {% assign score_list = score_list | sort | reverse %}
@@ -56,13 +54,13 @@
   {% endfor %}
 {% endif %}
 
-<!-- Fill with the other newlest posts  -->
+<!-- Fill with the other newlest posts -->
 {% assign less = TOTAL_SIZE | minus: index_list.size %}
 
 {% if less > 0 %}
   {% for i in (0..last_index) %}
     {% assign post = site.posts[i] %}
-    {% if post.url != page.url  %}
+    {% if post.url != page.url %}
       {% capture cur_index %}{{ i }}{% endcapture %}
       {% unless index_list contains cur_index %}
         {% assign index_list = index_list | push: cur_index %}
@@ -77,27 +75,30 @@
 
 {% if index_list.size > 0 %}
   <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3 class="pt-2 mb-4 ml-1"
-      data-toc-skip>{{ site.data.locales[site.lang].post.relate_posts }}</h3>
-    <div class="card-deck mb-4">
-    {% for entry in index_list %}
-      {% assign index = entry | plus: 0 %}
-      {% assign post = site.posts[index] %}
-      <div class="card">
-        <a href="{{ post.url | relative_url }}">
-          <div class="card-body">
-            {% include datetime.html date=post.date class="small" %}
-            <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
-            <div class="text-muted small">
-              <p>
-                {% include no-linenos.html content=post.content %}
-                {{ content | markdownify | strip_html | truncate: 200 | escape }}
-              </p>
+    <h3 class="pt-2 mb-4 ms-1" data-toc-skip>
+      {{ site.data.locales[include.lang].post.relate_posts }}
+    </h3>
+    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
+      {% for entry in index_list %}
+        {% assign index = entry | plus: 0 %}
+        {% assign post = site.posts[index] %}
+        <div class="col">
+          <a href="{{ post.url | relative_url }}" class="card post-preview h-100">
+            <div class="card-body">
+              {% include datetime.html date=post.date class="small" lang=include.lang %}
+              <h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
+              <div class="text-muted small">
+                <p>
+                  {% include no-linenos.html content=post.content %}
+                  {{ content | markdownify | strip_html | truncate: 200 | escape }}
+                </p>
+              </div>
             </div>
-          </div>
-        </a>
-      </div>
-    {% endfor %}
-    </div> <!-- .card-deck -->
-  </div> <!-- #related-posts -->
+          </a>
+        </div>
+      {% endfor %}
+    </div>
+    <!-- .card-deck -->
+  </div>
+  <!-- #related-posts -->
 {% endif %}

_includes/search-loader.html

@@ -4,7 +4,7 @@
 -->
 
 {% capture result_elem %}
-<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
+<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
   <a href="{url}">{title}</a>
   <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
     {categories}
@@ -14,33 +14,32 @@
 </div>
 {% endcapture %}
 
-{% capture not_found %}<p class="mt-5">{{ site.data.locales[site.lang].search.no_results }}</p>{% endcapture %}
-
-<script src="{{ site.data.assets[origin].search.js | relative_url }}"></script>
+{% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
 
 <script>
-SimpleJekyllSearch({
-  searchInput: document.getElementById('search-input'),
-  resultsContainer: document.getElementById('search-results'),
-  json: '{{ '/assets/js/data/search.json' | relative_url }}',
-  searchResultTemplate: '{{ result_elem | strip_newlines }}',
-  noResultsText: '{{ not_found }}',
-  templateMiddleware: function(prop, value, template) {
-    if (prop === 'categories') {
-      if (value === '') {
-        return `${value}`;
-      } else {
-        return `<div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+  /* Note: dependent library will be loaded in `js-selector.html` */
+  SimpleJekyllSearch({
+    searchInput: document.getElementById('search-input'),
+    resultsContainer: document.getElementById('search-results'),
+    json: '{{ '/assets/js/data/search.json' | relative_url }}',
+    searchResultTemplate: '{{ result_elem | strip_newlines }}',
+    noResultsText: '{{ not_found }}',
+    templateMiddleware: function(prop, value, template) {
+      if (prop === 'categories') {
+        if (value === '') {
+          return `${value}`;
+        } else {
+          return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+        }
       }
-    }
 
-    if (prop === 'tags') {
-      if (value === '') {
-        return `${value}`;
-      } else {
-        return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+      if (prop === 'tags') {
+        if (value === '') {
+          return `${value}`;
+        } else {
+          return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+        }
       }
     }
-  }
-});
+  });
 </script>

_includes/search-results.html

@@ -1,10 +1,9 @@
-<!--
-  The Search results
--->
+<!-- The Search results -->
+
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-12 col-sm-11 post-content">
+  <div class="col-11 post-content">
     <div id="search-hints">
-      {% include trending-tags.html %}
+      {% include_cached trending-tags.html %}
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

_includes/sidebar.html

@@ -1,13 +1,10 @@
-<!--
-  The Side Bar
--->
+<!-- The Side Bar -->
 
 <div id="sidebar" class="d-flex flex-column align-items-end">
-  <div class="profile-wrapper text-center">
-    <div id="avatar">
-      <a href="{{ '/' | relative_url }}" class="mx-auto">
-        {% if site.avatar != empty and site.avatar %}
-          {% capture avatar_url %}
+  <div class="profile-wrapper">
+    <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
+      {% if site.avatar != empty and site.avatar %}
+        {% capture avatar_url %}
             {% if site.avatar contains '://' %}
               {{ site.avatar }}
             {% elsif site.img_cdn != empty and site.img_cdn %}
@@ -16,43 +13,41 @@
               {{ site.avatar | relative_url }}
             {% endif %}
           {% endcapture %}
-          <img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'">
-        {% endif %}
-      </a>
-    </div>
+        <img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
+      {% endif %}
+    </a>
 
     <div class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
     </div>
-    <div class="site-subtitle font-italic">{{ site.tagline }}</div>
-
-  </div><!-- .profile-wrapper -->
-
-  <ul class="w-100">
+    <div class="site-subtitle fst-italic">{{ site.tagline }}</div>
+  </div>
+  <!-- .profile-wrapper -->
 
+  <ul class="nav flex-column flex-grow-1 w-100 ps-0">
     <!-- home -->
     <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
       <a href="{{ '/' | relative_url }}" class="nav-link">
-        <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ site.data.locales[site.lang].tabs.home | upcase }}</span>
+        <i class="fa-fw fas fa-home"></i>
+        <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
       </a>
     </li>
     <!-- the real tabs -->
     {% for tab in site.tabs %}
-    <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
-      <a href="{{ tab.url | relative_url }}" class="nav-link">
-        <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
-        {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
+      <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
+        <a href="{{ tab.url | relative_url }}" class="nav-link">
+          <i class="fa-fw {{ tab.icon }}"></i>
+          {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
 
-        <span>{{ site.data.locales[site.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
-      </a>
-    </li> <!-- .nav-item -->
+          <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+        </a>
+      </li>
+      <!-- .nav-item -->
     {% endfor %}
+  </ul>
+  <!-- ul.nav.flex-column -->
 
-  </ul> <!-- ul.nav.flex-column -->
-
-  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
-
+  <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
       <button class="mode-toggle btn" aria-label="Switch Mode">
         <i class="fas fa-adjust"></i>
@@ -81,26 +76,29 @@
       {% endcase %}
 
       {% if url %}
-      <a href="{{ url }}" aria-label="{{ entry.type }}"
-        {% assign link_types = '' %}
+        <a
+          href="{{ url }}"
+          aria-label="{{ entry.type }}"
+          {% assign link_types = '' %}
 
-        {% unless entry.noblank %}
-          target="_blank"
-          {% assign link_types = 'noopener noreferrer' %}
-        {% endunless %}
+          {% unless entry.noblank %}
+            target="_blank"
+            {% assign link_types = 'noopener noreferrer' %}
+          {% endunless %}
 
-        {% if entry.type == 'mastodon' %}
-          {% assign link_types = link_types | append: ' me' | strip %}
-        {% endif %}
+          {% if entry.type == 'mastodon' %}
+            {% assign link_types = link_types | append: ' me' | strip %}
+          {% endif %}
 
-        {% unless link_types == empty %}rel="{{ link_types }}"{% endunless %}>
-
-        <i class="{{ entry.icon }}"></i>
-      </a>
+          {% unless link_types == empty %}
+            rel="{{ link_types }}"
+          {% endunless %}
+        >
+          <i class="{{ entry.icon }}"></i>
+        </a>
       {% endif %}
-
     {% endfor %}
-
-  </div> <!-- .sidebar-bottom -->
-
-</div><!-- #sidebar -->
+  </div>
+  <!-- .sidebar-bottom -->
+</div>
+<!-- #sidebar -->

_includes/toc.html

@@ -6,11 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[site.lang].panel.toc -}}</div>
+  <div id="toc-wrapper" class="ps-0 pe-4 mb-5">
+    <div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
     <nav id="toc"></nav>
   </div>
-
-  <!-- toc.js will be loaded at medium priority -->
-  <script src="{{ site.data.assets[origin].toc.js | relative_url }}"></script>
 {% endif %}

_includes/topbar.html

@@ -1,70 +1,70 @@
-<!--
-  The Top Bar
--->
+<!-- The Top Bar -->
 
 <div id="topbar-wrapper">
-  <div id="topbar" class="container d-flex align-items-center justify-content-between h-100 pl-3 pr-3 pl-md-4 pr-md-4">
+  <div
+    id="topbar"
+    class="container d-flex align-items-center justify-content-between h-100"
+  >
     <span id="breadcrumb">
+      {% assign paths = page.url | split: '/' %}
 
-    {% assign paths = page.url | split: '/' %}
+      {% if paths.size == 0 or page.layout == 'home' %}
+        <!-- index page -->
+        <span>{{ site.data.locales[include.lang].tabs.home | capitalize }}</span>
 
-    {% if paths.size == 0 or page.layout == 'home' %}
-      <!-- index page -->
-      <span>{{ site.data.locales[site.lang].tabs.home | capitalize }}</span>
+      {% else %}
+        {% for item in paths %}
+          {% if forloop.first %}
+            <span>
+              <a href="{{ '/' | relative_url }}">
+                {{ site.data.locales[include.lang].tabs.home | capitalize }}
+              </a>
+            </span>
 
-    {% else %}
+          {% elsif forloop.last %}
+            {% if page.collection == 'tabs' %}
+              <span>{{ site.data.locales[include.lang].tabs[item] | default: page.title }}</span>
+            {% else %}
+              <span>{{ page.title }}</span>
+            {% endif %}
 
-      {% for item in paths %}
-
-        {% if forloop.first %}
-          <span>
-            <a href="{{ '/' | relative_url }}">
-              {{ site.data.locales[site.lang].tabs.home | capitalize }}
-            </a>
-          </span>
-
-        {% elsif forloop.last %}
-
-          {% if page.collection == 'tabs' %}
-            <span>{{ site.data.locales[site.lang].tabs[item] | default: page.title }}</span>
-          {% else %}
-            <span>{{ page.title }}</span>
+          {% elsif page.layout == 'category' or page.layout == 'tag' %}
+            <span>
+              <a href="{{ item | relative_url }}">
+                {{ site.data.locales[include.lang].tabs[item] | default: page.title }}
+              </a>
+            </span>
           {% endif %}
-
-        {% elsif page.layout == 'category' or page.layout == 'tag' %}
-          <span>
-            <a href="{{ item | relative_url }}">
-              {{ site.data.locales[site.lang].tabs[item] | default: page.title }}
-            </a>
-          </span>
-        {% endif %}
-
-      {% endfor %}
-
-    {% endif %}
-
-    </span><!-- endof #breadcrumb -->
+        {% endfor %}
+      {% endif %}
+    </span>
+    <!-- endof #breadcrumb -->
 
     <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
-        {{- site.data.locales[site.lang].title | default: site.title -}}
+        {{- site.data.locales[include.lang].title | default: site.title -}}
       {% elsif page.collection == 'tabs' or page.layout == 'page' %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
-        {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}}
+        {{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}}
       {% else %}
-        {{- site.data.locales[site.lang].layout[page.layout] | default: page.layout | capitalize -}}
+        {{- site.data.locales[include.lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
 
     <i id="search-trigger" class="fas fa-search fa-fw"></i>
     <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
-      <input class="form-control" id="search-input" type="search"
-        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[site.lang].search.hint | capitalize }}...">
+      <input
+        class="form-control"
+        id="search-input"
+        type="search"
+        aria-label="search"
+        autocomplete="off"
+        placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
+      >
     </span>
-    <span id="search-cancel" >{{ site.data.locales[site.lang].search.cancel }}</span>
+    <span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
   </div>
-
 </div>

_includes/trending-tags.html

@@ -1,29 +1,27 @@
-{% comment %}
-  The trending tags list
-{% endcomment %}
+<!-- The trending tags list -->
 
 {% assign MAX = 10 %}
 
-{% assign size_list = "" | split: "" %}
-{% assign tag_list = "" | split: "" %}
+{% assign size_list = '' | split: '' %}
+{% assign tag_list = '' | split: '' %}
 
 {% for tag in site.tags %}
   {% assign size = tag | last | size %}
   {% assign size_list = size_list | push: size %}
 
-  {% assign tag_str = tag | first | append: "::" | append: size %}
-  {% assign tag_list =  tag_list | push: tag_str %}
+  {% assign tag_str = tag | first | append: '::' | append: size %}
+  {% assign tag_list = tag_list | push: tag_str %}
 {% endfor %}
 
 {% assign size_list = size_list | sort | reverse %}
 
 {% assign tag_list = tag_list | sort_natural %}
 
-{% assign trending_tags = "" | split: "" %}
+{% assign trending_tags = '' | split: '' %}
 
 {% for size in size_list limit: MAX %}
   {% for tag_str in tag_list %}
-    {% assign tag = tag_str | split: "::" %}
+    {% assign tag = tag_str | split: '::' %}
     {% assign tag_name = tag | first %}
     {% assign tag_size = tag | last | plus: 0 %}
     {% if tag_size == size %}
@@ -37,14 +35,12 @@
 
 {% if trending_tags.size > 0 %}
   <div id="access-tags">
-    <div class="panel-heading">{{- site.data.locales[site.lang].panel.trending_tags -}}</div>
-    <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-
-    {% for tag_name in trending_tags %}
-      {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
-      <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
-    {% endfor %}
-
+    <div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div>
+    <div class="d-flex flex-wrap mt-3 mb-1 me-3">
+      {% for tag_name in trending_tags %}
+        {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
+        <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
+      {% endfor %}
     </div>
   </div>
 {% endif %}

_includes/update-list.html

@@ -1,13 +1,11 @@
-{% comment %}
-  Get the last 5 posts from lastmod list.
-{% endcomment %}
+<!-- Get the last 5 posts from lastmod list. -->
 
 {% assign MAX_SIZE = 5 %}
 
-{% assign all_list = "" | split: "" %}
+{% assign all_list = '' | split: '' %}
 
 {% for post in site.posts %}
-  {% if post.last_modified_at %}
+  {% if post.last_modified_at and post.last_modified_at != post.date %}
     {% capture elem %}
       {{- post.last_modified_at | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}}
     {% endcapture %}
@@ -17,24 +15,25 @@
 
 {% assign all_list = all_list | sort | reverse %}
 
-{% assign update_list = "" | split: "" %}
+{% assign update_list = '' | split: '' %}
 
-{% for entry in all_list limit:MAX_SIZE %}
+{% for entry in all_list limit: MAX_SIZE %}
   {% assign update_list = update_list | push: entry %}
 {% endfor %}
 
 {% if update_list.size > 0 %}
-
   <div id="access-lastmod" class="post">
-    <div class="panel-heading">{{- site.data.locales[site.lang].panel.lastmod -}}</div>
-    <ul class="post-content pl-0 pb-1 ml-1 mt-2">
+    <div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div>
+    <ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2">
       {% for item in update_list %}
-        {% assign index = item | split: "::" | last | plus: 0 %}
+        {% assign index = item | split: '::' | last | plus: 0 %}
         {% assign post = site.posts[index] %}
         {% assign url = post.url | relative_url %}
-      <li><a href="{{ url }}">{{ post.title }}</a></li>
+        <li class="text-truncate lh-lg">
+          <a href="{{ url }}">{{ post.title }}</a>
+        </li>
       {% endfor %}
     </ul>
-  </div> <!-- #access-lastmod -->
-
+  </div>
+  <!-- #access-lastmod -->
 {% endif %}

_javascript/home.js

@@ -0,0 +1,8 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { initLocaleDatetime, imgLazy } from './modules/plugins';
+
+basic();
+initSidebar();
+initTopbar();
+initLocaleDatetime();
+imgLazy();

_javascript/modules/components/back-to-top.js

@@ -3,24 +3,18 @@
  */
 
 export function back2top() {
-  $(window).on('scroll', () => {
-    if (
-      $(window).scrollTop() > 50 &&
-      $('#sidebar-trigger').css('display') === 'none'
-    ) {
-      $('#back-to-top').fadeIn();
+  const $window = $(window);
+  const $btn = $('#back-to-top');
+
+  $window.on('scroll', () => {
+    if ($window.scrollTop() > 50) {
+      $btn.fadeIn();
     } else {
-      $('#back-to-top').fadeOut();
+      $btn.fadeOut();
     }
   });
 
-  $('#back-to-top').on('click', () => {
-    $('body,html').animate(
-      {
-        scrollTop: 0
-      },
-      800
-    );
-    return false;
+  $btn.on('click', () => {
+    $window.scrollTop(0);
   });
 }

_javascript/modules/components/clipboard.js

@@ -6,11 +6,11 @@
  *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
  */
 
-const btnSelector = '.code-header>button';
+const clipboardSelector = '.code-header>button';
 const ICON_SUCCESS = 'fas fa-check';
 const ATTR_TIMEOUT = 'timeout';
 const ATTR_TITLE_SUCCEED = 'data-title-succeed';
-const ATTR_TITLE_ORIGIN = 'data-original-title';
+const ATTR_TITLE_ORIGIN = 'data-bs-original-title';
 const TIMEOUT = 2000; // in milliseconds
 
 function isLocked(node) {
@@ -36,7 +36,7 @@ function getIcon(btn) {
   return iconNode.attr('class');
 }
 
-const ICON_DEFAULT = getIcon(btnSelector);
+const ICON_DEFAULT = getIcon(clipboardSelector);
 
 function showTooltip(btn) {
   const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
@@ -61,36 +61,41 @@ function resumeIcon(btn) {
 
 export function initClipboard() {
   // Initial the clipboard.js object
-  const clipboard = new ClipboardJS(btnSelector, {
-    target(trigger) {
-      let codeBlock = trigger.parentNode.nextElementSibling;
-      return codeBlock.querySelector('code .rouge-code');
-    }
-  });
+  if ($(clipboardSelector).length) {
+    const clipboard = new ClipboardJS(clipboardSelector, {
+      target(trigger) {
+        let codeBlock = trigger.parentNode.nextElementSibling;
+        return codeBlock.querySelector('code .rouge-code');
+      }
+    });
 
-  $(btnSelector).tooltip({
-    trigger: 'hover',
-    placement: 'left'
-  });
+    const clipboardList = document.querySelectorAll(clipboardSelector);
+    [...clipboardList].map(
+      (elem) =>
+        new bootstrap.Tooltip(elem, {
+          placement: 'left'
+        })
+    );
 
-  clipboard.on('success', (e) => {
-    e.clearSelection();
+    clipboard.on('success', (e) => {
+      e.clearSelection();
 
-    const trigger = e.trigger;
-    if (isLocked(trigger)) {
-      return;
-    }
+      const trigger = e.trigger;
+      if (isLocked(trigger)) {
+        return;
+      }
 
-    setSuccessIcon(trigger);
-    showTooltip(trigger);
-    lock(trigger);
+      setSuccessIcon(trigger);
+      showTooltip(trigger);
+      lock(trigger);
 
-    setTimeout(() => {
-      hideTooltip(trigger);
-      resumeIcon(trigger);
-      unlock(trigger);
-    }, TIMEOUT);
-  });
+      setTimeout(() => {
+        hideTooltip(trigger);
+        resumeIcon(trigger);
+        unlock(trigger);
+      }, TIMEOUT);
+    });
+  }
 
   /* --- Post link sharing --- */
 

_javascript/modules/components/convert-title.js

@@ -1,68 +0,0 @@
-/**
- * Top bar title auto change while scrolling up/down in mobile screens.
- */
-const titleSelector = 'div.post>h1:first-of-type';
-const $pageTitle = $(titleSelector);
-const $topbarTitle = $('#topbar-title');
-const defaultTitleText = $topbarTitle.text().trim();
-
-export function convertTitle() {
-  if (
-    $pageTitle.length === 0 /* on Home page */ ||
-    $pageTitle.hasClass('dynamic-title') ||
-    $topbarTitle.is(':hidden')
-  ) {
-    /* not in mobile views */
-    return;
-  }
-
-  let pageTitleText = $pageTitle.text().trim();
-  let hasScrolled = false;
-  let lastScrollTop = 0;
-
-  if ($('#page-category').length || $('#page-tag').length) {
-    /* The title in Category or Tag page will be "<title> <count_of_posts>" */
-    if (/\s/.test(pageTitleText)) {
-      pageTitleText = pageTitleText.replace(/[0-9]/g, '').trim();
-    }
-  }
-
-  // When the page is scrolled down and then refreshed, the topbar title needs to be initialized
-  if ($pageTitle.offset().top < $(window).scrollTop()) {
-    $topbarTitle.text(pageTitleText);
-  }
-
-  let options = {
-    rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem)
-    threshold: [0, 1]
-  };
-
-  let observer = new IntersectionObserver((entries) => {
-    if (!hasScrolled) {
-      hasScrolled = true;
-      return;
-    }
-
-    let curScrollTop = $(window).scrollTop();
-    let isScrollDown = lastScrollTop < curScrollTop;
-    lastScrollTop = curScrollTop;
-    let heading = entries[0];
-
-    if (isScrollDown) {
-      if (heading.intersectionRatio === 0) {
-        $topbarTitle.text(pageTitleText);
-      }
-    } else {
-      if (heading.intersectionRatio === 1) {
-        $topbarTitle.text(defaultTitleText);
-      }
-    }
-  }, options);
-
-  observer.observe(document.querySelector(titleSelector));
-
-  /* Click title will scroll to top */
-  $topbarTitle.on('click', function () {
-    $('body,html').animate({ scrollTop: 0 }, 800);
-  });
-}

_javascript/modules/components/img-extra.js

@@ -1,27 +0,0 @@
-/**
- * Set up image stuff
- */
-
-export function imgExtra() {
-  if ($('#core-wrapper img[data-src]') <= 0) {
-    return;
-  }
-
-  /* See: <https://github.com/dimsemenov/Magnific-Popup> */
-  $('.popup').magnificPopup({
-    type: 'image',
-    closeOnContentClick: true,
-    showCloseBtn: false,
-    zoom: {
-      enabled: true,
-      duration: 300,
-      easing: 'ease-in-out'
-    }
-  });
-
-  /* Stop shimmer when image loaded */
-  document.addEventListener('lazyloaded', function (e) {
-    const $img = $(e.target);
-    $img.parent().removeClass('shimmer');
-  });
-}

_javascript/modules/components/img-lazyload.js

@@ -0,0 +1,27 @@
+/**
+ * Set up image lazy-load
+ */
+
+function stopShimmer($node) {
+  $node.parent().removeClass('shimmer');
+}
+
+export function imgLazy() {
+  const $images = $('#core-wrapper img[data-src]');
+
+  if ($images.length <= 0) {
+    return;
+  }
+
+  /* Stop shimmer when image loaded */
+  document.addEventListener('lazyloaded', function (e) {
+    stopShimmer($(e.target));
+  });
+
+  /* Stop shimmer from cached images */
+  $images.each(function () {
+    if ($(this).hasClass('ls-is-cached')) {
+      stopShimmer($(this));
+    }
+  });
+}

_javascript/modules/components/img-popup.js

@@ -0,0 +1,22 @@
+/**
+ * Set up image popup
+ *
+ * See: https://github.com/dimsemenov/Magnific-Popup
+ */
+
+export function imgPopup() {
+  if ($('.popup') <= 0) {
+    return;
+  }
+
+  $('.popup').magnificPopup({
+    type: 'image',
+    closeOnContentClick: true,
+    showCloseBtn: false,
+    zoom: {
+      enabled: true,
+      duration: 300,
+      easing: 'ease-in-out'
+    }
+  });
+}

_javascript/modules/components/locale-datetime.js

@@ -39,12 +39,13 @@ export function initLocaleDatetime() {
     $(this).removeAttr(LocaleHelper.attrDateFormat);
 
     // setup tooltips
-    const tooltip = $(this).attr('data-toggle');
+    const tooltip = $(this).attr('data-bs-toggle');
     if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
       return;
     }
 
     const tooltipText = date.format('llll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
-    $(this).attr('data-original-title', tooltipText);
+    $(this).attr('data-bs-title', tooltipText);
+    new bootstrap.Tooltip($(this));
   });
 }

_javascript/modules/components/pageviews.js

@@ -1,254 +0,0 @@
-/**
- * Count page views form GA or local cache file.
- *
- * Dependencies:
- *   - jQuery
- *   - countUp.js <https://github.com/inorganik/countUp.js>
- */
-
-const getInitStatus = (function () {
-  let hasInit = false;
-  return () => {
-    let ret = hasInit;
-    if (!hasInit) {
-      hasInit = true;
-    }
-    return ret;
-  };
-})();
-
-const PvOpts = (function () {
-  function getContent(selector) {
-    return $(selector).attr('content');
-  }
-
-  function hasContent(selector) {
-    let content = getContent(selector);
-    return typeof content !== 'undefined' && content !== false;
-  }
-
-  return {
-    getProxyMeta() {
-      return getContent('meta[name=pv-proxy-endpoint]');
-    },
-    getLocalMeta() {
-      return getContent('meta[name=pv-cache-path]');
-    },
-    hasProxyMeta() {
-      return hasContent('meta[name=pv-proxy-endpoint]');
-    },
-    hasLocalMeta() {
-      return hasContent('meta[name=pv-cache-path]');
-    }
-  };
-})();
-
-const PvStorage = (function () {
-  const Keys = {
-    KEY_PV: 'pv',
-    KEY_PV_SRC: 'pv_src',
-    KEY_CREATION: 'pv_created_date'
-  };
-
-  const Source = {
-    LOCAL: 'same-origin',
-    PROXY: 'cors'
-  };
-
-  function get(key) {
-    return localStorage.getItem(key);
-  }
-
-  function set(key, val) {
-    localStorage.setItem(key, val);
-  }
-
-  function saveCache(pv, src) {
-    set(Keys.KEY_PV, pv);
-    set(Keys.KEY_PV_SRC, src);
-    set(Keys.KEY_CREATION, new Date().toJSON());
-  }
-
-  return {
-    keysCount() {
-      return Object.keys(Keys).length;
-    },
-    hasCache() {
-      return localStorage.getItem(Keys.KEY_PV) !== null;
-    },
-    getCache() {
-      return JSON.parse(localStorage.getItem(Keys.KEY_PV));
-    },
-    saveLocalCache(pv) {
-      saveCache(pv, Source.LOCAL);
-    },
-    saveProxyCache(pv) {
-      saveCache(pv, Source.PROXY);
-    },
-    isExpired() {
-      let date = new Date(get(Keys.KEY_CREATION));
-      date.setHours(date.getHours() + 1); // per hour
-      return Date.now() >= date.getTime();
-    },
-    isFromLocal() {
-      return get(Keys.KEY_PV_SRC) === Source.LOCAL;
-    },
-    isFromProxy() {
-      return get(Keys.KEY_PV_SRC) === Source.PROXY;
-    },
-    newerThan(pv) {
-      return (
-        PvStorage.getCache().totalsForAllResults['ga:pageviews'] >
-        pv.totalsForAllResults['ga:pageviews']
-      );
-    },
-    inspectKeys() {
-      if (localStorage.length !== PvStorage.keysCount()) {
-        localStorage.clear();
-        return;
-      }
-
-      for (let i = 0; i < localStorage.length; i++) {
-        const key = localStorage.key(i);
-        switch (key) {
-          case Keys.KEY_PV:
-          case Keys.KEY_PV_SRC:
-          case Keys.KEY_CREATION:
-            break;
-          default:
-            localStorage.clear();
-            return;
-        }
-      }
-    }
-  };
-})(); /* PvStorage */
-
-function countUp(min, max, destId) {
-  if (min < max) {
-    let numAnim = new CountUp(destId, min, max);
-    if (!numAnim.error) {
-      numAnim.start();
-    } else {
-      console.error(numAnim.error);
-    }
-  }
-}
-
-function countPV(path, rows) {
-  let count = 0;
-
-  if (typeof rows !== 'undefined') {
-    for (let i = 0; i < rows.length; ++i) {
-      const gaPath = rows[parseInt(i, 10)][0];
-      if (gaPath === path) {
-        /* path format see: site.permalink */
-        count += parseInt(rows[parseInt(i, 10)][1], 10);
-        break;
-      }
-    }
-  }
-
-  return count;
-}
-
-function tacklePV(rows, path, elem, hasInit) {
-  let count = countPV(path, rows);
-  count = count === 0 ? 1 : count;
-
-  if (!hasInit) {
-    elem.text(new Intl.NumberFormat().format(count));
-  } else {
-    const initCount = parseInt(elem.text().replace(/,/g, ''), 10);
-    if (count > initCount) {
-      countUp(initCount, count, elem.attr('id'));
-    }
-  }
-}
-
-function displayPageviews(data) {
-  if (typeof data === 'undefined') {
-    return;
-  }
-
-  let hasInit = getInitStatus();
-  const rows = data.rows; /* could be undefined */
-
-  if ($('#post-list').length > 0) {
-    /* the Home page */
-    $('.post-preview').each(function () {
-      const path = $(this).find('a').attr('href');
-      tacklePV(rows, path, $(this).find('.pageviews'), hasInit);
-    });
-  } else if ($('.post').length > 0) {
-    /* the post */
-    const path = window.location.pathname;
-    tacklePV(rows, path, $('#pv'), hasInit);
-  }
-}
-
-function fetchProxyPageviews() {
-  if (PvOpts.hasProxyMeta()) {
-    $.ajax({
-      type: 'GET',
-      url: PvOpts.getProxyMeta(),
-      dataType: 'jsonp',
-      jsonpCallback: 'displayPageviews',
-      success: (data) => {
-        PvStorage.saveProxyCache(JSON.stringify(data));
-      },
-      error: (jqXHR, textStatus, errorThrown) => {
-        console.log(
-          'Failed to load pageviews from proxy server: ' + errorThrown
-        );
-      }
-    });
-  }
-}
-
-function fetchLocalPageviews(hasCache = false) {
-  return fetch(PvOpts.getLocalMeta())
-    .then((response) => response.json())
-    .then((data) => {
-      if (hasCache) {
-        // The cache from the proxy will sometimes be more recent than the local one
-        if (PvStorage.isFromProxy() && PvStorage.newerThan(data)) {
-          return;
-        }
-      }
-      displayPageviews(data);
-      PvStorage.saveLocalCache(JSON.stringify(data));
-    });
-}
-
-export function initPageviews() {
-  if ($('.pageviews').length <= 0) {
-    return;
-  }
-
-  PvStorage.inspectKeys();
-
-  if (PvStorage.hasCache()) {
-    displayPageviews(PvStorage.getCache());
-
-    if (PvStorage.isExpired()) {
-      if (PvOpts.hasLocalMeta()) {
-        fetchLocalPageviews(true).then(fetchProxyPageviews);
-      } else {
-        fetchProxyPageviews();
-      }
-    } else {
-      if (PvStorage.isFromLocal()) {
-        fetchProxyPageviews();
-      }
-    }
-  } else {
-    // no cached
-
-    if (PvOpts.hasLocalMeta()) {
-      fetchLocalPageviews().then(fetchProxyPageviews);
-    } else {
-      fetchProxyPageviews();
-    }
-  }
-}

_javascript/modules/components/search-display.js

@@ -4,7 +4,7 @@
 const $btnSbTrigger = $('#sidebar-trigger');
 const $btnSearchTrigger = $('#search-trigger');
 const $btnCancel = $('#search-cancel');
-const $main = $('#main');
+const $content = $('#main>.row');
 const $topbarTitle = $('#topbar-title');
 const $searchWrapper = $('#search-wrapper');
 const $resultWrapper = $('#search-result-wrapper');
@@ -58,7 +58,7 @@ class ResultSwitch {
       // the block method must be called before $(#main) unloaded.
       ScrollBlocker.on();
       $resultWrapper.removeClass(C_UNLOADED);
-      $main.addClass(C_UNLOADED);
+      $content.addClass(C_UNLOADED);
       ScrollBlocker.resultVisible = true;
     }
   }
@@ -70,7 +70,7 @@ class ResultSwitch {
         $hints.removeClass(C_UNLOADED);
       }
       $resultWrapper.addClass(C_UNLOADED);
-      $main.removeClass(C_UNLOADED);
+      $content.removeClass(C_UNLOADED);
 
       // now the release method must be called after $(#main) display
       ScrollBlocker.off();

_javascript/modules/components/smooth-scroll.js

@@ -1,109 +0,0 @@
-/**
- Safari doesn't support CSS `scroll-behavior: smooth`,
- so here is a compatible solution for all browser to smooth scrolling
-
- See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
-
- Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
- */
-import ScrollHelper from './utils/scroll-helper';
-
-export function smoothScroll() {
-  const $topbarTitle = $('#topbar-title');
-  const REM = 16; // in pixels
-  const ATTR_SCROLL_FOCUS = 'scroll-focus';
-  const SCOPE = "a[href*='#']:not([href='#']):not([href='#0'])";
-
-  $(SCOPE).on('click', function (event) {
-    if (
-      this.pathname.replace(/^\//, '') !== location.pathname.replace(/^\//, '')
-    ) {
-      return;
-    }
-
-    if (location.hostname !== this.hostname) {
-      return;
-    }
-
-    const hash = decodeURI(this.hash);
-    let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
-    let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
-    let selector = '#' + $.escapeSelector(hash.substring(1));
-    let $target = $(selector);
-
-    let isMobileViews = $topbarTitle.is(':visible');
-    let isPortrait = $(window).width() < $(window).height();
-
-    if (typeof $target === 'undefined') {
-      return;
-    }
-
-    event.preventDefault();
-
-    if (history.pushState) {
-      /* add hash to URL */
-      history.pushState(null, null, hash);
-    }
-
-    let curOffset = $(window).scrollTop();
-    let destOffset = ($target.offset().top -= REM / 2);
-
-    if (destOffset < curOffset) {
-      // scroll up
-      ScrollHelper.hideTopbar();
-      ScrollHelper.addScrollUpTask();
-
-      if (isMobileViews && isPortrait) {
-        destOffset -= ScrollHelper.getTopbarHeight();
-      }
-    } else {
-      // scroll down
-      if (isMobileViews && isPortrait) {
-        destOffset -= ScrollHelper.getTopbarHeight();
-      }
-    }
-
-    $('html').animate(
-      {
-        scrollTop: destOffset
-      },
-      500,
-      () => {
-        $target.trigger('focus');
-
-        /* clean up old scroll mark */
-        const $scroll_focus = $(`[${ATTR_SCROLL_FOCUS}=true]`);
-        if ($scroll_focus.length) {
-          $scroll_focus.attr(ATTR_SCROLL_FOCUS, 'false');
-        }
-
-        /* Clean :target links */
-        const $target_links = $(':target');
-        if ($target_links.length) {
-          /* element that visited by the URL with hash */
-          $target_links.attr(ATTR_SCROLL_FOCUS, 'false');
-        }
-
-        /* set scroll mark to footnotes */
-        if (toFootnote || toFootnoteRef) {
-          $target.attr(ATTR_SCROLL_FOCUS, 'true');
-        }
-
-        if ($target.is(':focus')) {
-          /* Checking if the target was focused */
-          return false;
-        } else {
-          $target.attr(
-            'tabindex',
-            '-1'
-          ); /* Adding tabindex for elements not focusable */
-          $target.trigger('focus'); /* Set focus again */
-        }
-
-        if (ScrollHelper.hasScrollUpTask()) {
-          ScrollHelper.popScrollUpTask();
-        }
-      }
-    );
-  }); /* click() */
-}

_javascript/modules/components/toc.js

@@ -1,11 +1,13 @@
 export function toc() {
-  // see: https://github.com/tscanlin/tocbot#usage
-  tocbot.init({
-    tocSelector: '#toc',
-    contentSelector: '.post-content',
-    ignoreSelector: '[data-toc-skip]',
-    headingSelector: 'h2, h3',
-    orderedList: false,
-    scrollSmooth: false
-  });
+  if (document.querySelector('#core-wrapper h2,#core-wrapper h3')) {
+    // see: https://github.com/tscanlin/tocbot#usage
+    tocbot.init({
+      tocSelector: '#toc',
+      contentSelector: '.post-content',
+      ignoreSelector: '[data-toc-skip]',
+      headingSelector: 'h2, h3',
+      orderedList: false,
+      scrollSmooth: false
+    });
+  }
 }

_javascript/modules/components/tooltip-loader.js

@@ -2,5 +2,11 @@
  * Initial Bootstrap Tooltip.
  */
 export function loadTooptip() {
-  $('[data-toggle="tooltip"]').tooltip();
+  const tooltipTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="tooltip"]'
+  );
+
+  [...tooltipTriggerList].map(
+    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+  );
 }

_javascript/modules/components/topbar-switcher.js

@@ -1,93 +0,0 @@
-/**
- * Hide Header on scroll down
- */
-import ScrollHelper from './utils/scroll-helper';
-
-const $searchInput = $('#search-input');
-const delta = ScrollHelper.getTopbarHeight();
-
-let didScroll;
-let lastScrollTop = 0;
-
-function hasScrolled() {
-  let st = $(window).scrollTop();
-
-  /* Make sure they scroll more than delta */
-  if (Math.abs(lastScrollTop - st) <= delta) {
-    return;
-  }
-
-  if (st > lastScrollTop) {
-    /* Scroll down */
-    ScrollHelper.hideTopbar();
-
-    if ($searchInput.is(':focus')) {
-      $searchInput.trigger('blur'); /* remove focus */
-    }
-  } else {
-    /* Scroll up */
-
-    // has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling
-    if (st + $(window).height() < $(document).height()) {
-      if (ScrollHelper.hasScrollUpTask()) {
-        return;
-      }
-
-      if (ScrollHelper.topbarLocked()) {
-        // avoid redundant scroll up event from smooth scrolling
-        ScrollHelper.unlockTopbar();
-      } else {
-        if (ScrollHelper.orientationLocked()) {
-          // avoid device auto scroll up on orientation change
-          ScrollHelper.unLockOrientation();
-        } else {
-          ScrollHelper.showTopbar();
-        }
-      }
-    }
-  }
-
-  lastScrollTop = st;
-} // hasScrolled()
-
-function handleLandscape() {
-  if ($(window).scrollTop() === 0) {
-    return;
-  }
-  ScrollHelper.lockOrientation();
-  ScrollHelper.hideTopbar();
-}
-
-export function switchTopbar() {
-  const orientation = screen.orientation;
-  if (orientation) {
-    orientation.onchange = () => {
-      const type = orientation.type;
-      if (type === 'landscape-primary' || type === 'landscape-secondary') {
-        handleLandscape();
-      }
-    };
-  } else {
-    // for the browsers that not support `window.screen.orientation` API
-    $(window).on('orientationchange', () => {
-      if ($(window).width() < $(window).height()) {
-        // before rotating, it is still in portrait mode.
-        handleLandscape();
-      }
-    });
-  }
-
-  $(window).on('scroll', () => {
-    if (didScroll) {
-      return;
-    }
-    didScroll = true;
-  });
-
-  setInterval(() => {
-    if (didScroll) {
-      hasScrolled();
-      didScroll = false;
-    }
-  }, 250);
-}

_javascript/modules/components/utils/scroll-helper.js

@@ -1,64 +0,0 @@
-/**
- * A tool for smooth scrolling and topbar switcher
- */
-
-const ATTR_TOPBAR_VISIBLE = 'data-topbar-visible';
-const $body = $('body');
-const $topbarWrapper = $('#topbar-wrapper');
-
-export default class ScrollHelper {
-  static scrollUpCount = 0; // the number of times the scroll up was triggered by ToC or anchor
-  static topbarIsLocked = false;
-  static orientationIsLocked = false;
-
-  static hideTopbar() {
-    $body.attr(ATTR_TOPBAR_VISIBLE, 'false');
-  }
-
-  static showTopbar() {
-    $body.attr(ATTR_TOPBAR_VISIBLE, 'true');
-  }
-
-  // scroll up
-
-  static addScrollUpTask() {
-    ScrollHelper.scrollUpCount += 1;
-    if (!ScrollHelper.topbarIsLocked) {
-      ScrollHelper.topbarIsLocked = true;
-    }
-  }
-
-  static popScrollUpTask() {
-    ScrollHelper.scrollUpCount -= 1;
-  }
-
-  static hasScrollUpTask() {
-    return ScrollHelper.scrollUpCount > 0;
-  }
-
-  static topbarLocked() {
-    return ScrollHelper.topbarIsLocked === true;
-  }
-
-  static unlockTopbar() {
-    ScrollHelper.topbarIsLocked = false;
-  }
-
-  static getTopbarHeight() {
-    return $topbarWrapper.outerHeight();
-  }
-
-  // orientation change
-
-  static orientationLocked() {
-    return ScrollHelper.orientationIsLocked === true;
-  }
-
-  static lockOrientation() {
-    ScrollHelper.orientationIsLocked = true;
-  }
-
-  static unLockOrientation() {
-    ScrollHelper.orientationIsLocked = false;
-  }
-}

_javascript/modules/layouts/topbar.js

@@ -1,9 +1,5 @@
-import { convertTitle } from '../components/convert-title';
 import { displaySearch } from '../components/search-display';
-import { switchTopbar } from '../components/topbar-switcher';
 
 export function initTopbar() {
-  convertTitle();
   displaySearch();
-  switchTopbar();
 }

_javascript/modules/plugins.js

@@ -1,7 +1,6 @@
 export { categoryCollapse } from './components/category-collapse';
 export { initClipboard } from './components/clipboard';
-export { imgExtra } from './components/img-extra';
+export { imgLazy } from './components/img-lazyload';
+export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
-export { initPageviews } from './components/pageviews';
-export { smoothScroll } from './components/smooth-scroll';
 export { toc } from './components/toc';

_javascript/page.js

@@ -1,9 +1,9 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { imgExtra, initClipboard, smoothScroll } from './modules/plugins';
+import { imgLazy, imgPopup, initClipboard } from './modules/plugins';
 
 basic();
 initSidebar();
 initTopbar();
-imgExtra();
+imgLazy();
+imgPopup();
 initClipboard();
-smoothScroll();

_javascript/post.js

@@ -1,19 +1,17 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 import {
-  imgExtra,
+  imgLazy,
+  imgPopup,
   initLocaleDatetime,
   initClipboard,
-  smoothScroll,
-  initPageviews,
   toc
 } from './modules/plugins';
 
 basic();
 initSidebar();
 initTopbar();
-imgExtra();
+imgLazy();
+imgPopup();
 initLocaleDatetime();
 initClipboard();
 toc();
-smoothScroll(); // must be called after toc is created
-initPageviews();

_layouts/archives.html

@@ -3,8 +3,10 @@ layout: page
 # The Archives of posts.
 ---
 
-{% assign df_strftime_m = site.data.locales[site.lang].df.archives.strftime | default: '/ %m' %}
-{% assign df_dayjs_m = site.data.locales[site.lang].df.archives.dayjs | default: '/ MM' %}
+{% include lang.html %}
+
+{% assign df_strftime_m = site.data.locales[lang].df.archives.strftime | default: '/ %m' %}
+{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
 
 <div id="archives" class="pl-xl-3">
 
@@ -21,7 +23,7 @@ layout: page
   <li>
   {% assign ts = post.date | date: '%s' %}
     <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
-    <span class="date month small text-muted ml-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
+    <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
       {{ post.date | date: df_strftime_m }}
     </span>
     <a href="{{ post.url | relative_url }}">{{ post.title }}</a>

_layouts/categories.html

@@ -3,8 +3,10 @@ layout: page
 # All the Categories of posts
 ---
 
-{% assign HEAD_PREFIX = "h_" %}
-{% assign LIST_PREFIX = "l_" %}
+{% include lang.html %}
+
+{% assign HEAD_PREFIX = 'h_' %}
+{% assign LIST_PREFIX = 'l_' %}
 
 {% assign group_index = 0 %}
 
@@ -16,7 +18,7 @@ layout: page
   {% assign first_post = posts_of_category | first %}
 
   {% if category_name == first_post.categories[0] %}
-    {% assign sub_categories = "" | split: "" %}
+    {% assign sub_categories = '' | split: '' %}
 
     {% for post in posts_of_category %}
       {% assign second_category = post.categories[1] %}
@@ -30,89 +32,107 @@ layout: page
     {% assign sub_categories = sub_categories | sort %}
     {% assign sub_categories_size = sub_categories | size %}
 
-  <div class="card categories">
-    <!-- top-category -->
-    <div id="{{ HEAD_PREFIX }}{{ group_index }}"
-      class="card-header d-flex justify-content-between hide-border-bottom">
-      <span>
-        <i class="far fa-folder{% if sub_categories_size > 0 %}-open{% endif %} fa-fw"></i>
+    <div class="card categories">
+      <!-- top-category -->
+      <div
+        id="{{ HEAD_PREFIX }}{{ group_index }}"
+        class="card-header d-flex justify-content-between hide-border-bottom"
+      >
+        <span class="ms-2">
+          <i class="far fa-folder{% if sub_categories_size > 0 %}-open{% endif %} fa-fw"></i>
 
-        {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %}
-        <a href="{{ _category_url | relative_url }}" class="ml-1 mr-2">{{ category_name }}</a>
+          {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %}
+          <a href="{{ _category_url | relative_url }}" class="mx-2">{{ category_name }}</a>
 
-        <!-- content count -->
-        {% assign top_posts_size = site.categories[category_name] | size %}
-        <span class="text-muted small font-weight-light">
-          {% if sub_categories_size > 0 %}
-            {{ sub_categories_size }}
-            {% if sub_categories_size > 1 %}
-              {{ site.data.locales[site.lang].categories.category_measure.plural
-                | default: site.data.locales[site.lang].categories.category_measure }}
-            {% else %}
-              {{ site.data.locales[site.lang].categories.category_measure.singular
-                | default: site.data.locales[site.lang].categories.category_measure }}
-            {% endif %},
-          {% endif %}
-
-          {{ top_posts_size }}
-
-          {% if top_posts_size > 1 %}
-            {{ site.data.locales[site.lang].categories.post_measure.plural
-              | default: site.data.locales[site.lang].categories.post_measure }}
-          {% else %}
-            {{ site.data.locales[site.lang].categories.post_measure.singular
-              | default: site.data.locales[site.lang].categories.post_measure }}
-          {% endif %}
-        </span>
-      </span>
-
-      <!-- arrow -->
-      {% if sub_categories_size > 0%}
-      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse"
-        aria-expanded="true" aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
-        class="category-trigger hide-border-bottom">
-        <i class="fas fa-fw fa-angle-down"></i>
-      </a>
-      {% else %}
-      <span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
-        <i class="fas fa-fw fa-angle-right"></i>
-      </span>
-      {% endif %}
-
-    </div> <!-- .card-header -->
-
-    <!-- Sub-categories -->
-    {% if sub_categories_size > 0 %}
-    <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
-      <ul class="list-group">
-        {% for sub_category in sub_categories %}
-        <li class="list-group-item">
-          <i class="far fa-folder fa-fw"></i>
-
-          {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %}
-          <a href="{{ _sub_ctg_url | relative_url }}" class="ml-1 mr-2">{{ sub_category }}</a>
-
-          {% assign posts_size = site.categories[sub_category] | size %}
+          <!-- content count -->
+          {% assign top_posts_size = site.categories[category_name] | size %}
           <span class="text-muted small font-weight-light">
-            {{ posts_size }}
+            {% if sub_categories_size > 0 %}
+              {{ sub_categories_size }}
+              {% if sub_categories_size > 1 %}
+                {{
+                  site.data.locales[lang].categories.category_measure.plural
+                  | default: site.data.locales[lang].categories.category_measure
+                }}
+              {% else %}
+                {{
+                  site.data.locales[lang].categories.category_measure.singular
+                  | default: site.data.locales[lang].categories.category_measure
+                }}
+              {% endif -%}
+              ,
+            {% endif %}
 
-            {% if posts_size > 1 %}
-              {{ site.data.locales[site.lang].categories.post_measure.plural
-                | default: site.data.locales[site.lang].categories.post_measure }}
+            {{ top_posts_size }}
+
+            {% if top_posts_size > 1 %}
+              {{
+                site.data.locales[lang].categories.post_measure.plural
+                | default: site.data.locales[lang].categories.post_measure
+              }}
             {% else %}
-              {{ site.data.locales[site.lang].categories.post_measure.singular
-                | default: site.data.locales[site.lang].categories.post_measure }}
+              {{
+                site.data.locales[lang].categories.post_measure.singular
+                | default: site.data.locales[lang].categories.post_measure
+              }}
             {% endif %}
           </span>
-        </li>
-        {% endfor %}
-      </ul>
-    </div>
-    {% endif %}
+        </span>
 
-  </div> <!-- .card -->
+        <!-- arrow -->
+        {% if sub_categories_size > 0 %}
+          <a
+            href="#{{ LIST_PREFIX }}{{ group_index }}"
+            data-bs-toggle="collapse"
+            aria-expanded="true"
+            aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
+            class="category-trigger hide-border-bottom"
+          >
+            <i class="fas fa-fw fa-angle-down"></i>
+          </a>
+        {% else %}
+          <span data-bs-toggle="collapse" class="category-trigger hide-border-bottom disabled">
+            <i class="fas fa-fw fa-angle-right"></i>
+          </span>
+        {% endif %}
+      </div>
+      <!-- .card-header -->
+
+      <!-- Sub-categories -->
+      {% if sub_categories_size > 0 %}
+        <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
+          <ul class="list-group">
+            {% for sub_category in sub_categories %}
+              <li class="list-group-item">
+                <i class="far fa-folder fa-fw"></i>
+
+                {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %}
+                <a href="{{ _sub_ctg_url | relative_url }}" class="mx-2">{{ sub_category }}</a>
+
+                {% assign posts_size = site.categories[sub_category] | size %}
+                <span class="text-muted small font-weight-light">
+                  {{ posts_size }}
+
+                  {% if posts_size > 1 %}
+                    {{
+                      site.data.locales[lang].categories.post_measure.plural
+                      | default: site.data.locales[lang].categories.post_measure
+                    }}
+                  {% else %}
+                    {{
+                      site.data.locales[lang].categories.post_measure.singular
+                      | default: site.data.locales[lang].categories.post_measure
+                    }}
+                  {% endif %}
+                </span>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endif %}
+    </div>
+    <!-- .card -->
 
     {% assign group_index = group_index | plus: 1 %}
-
   {% endif %}
 {% endfor %}

_layouts/category.html

@@ -3,20 +3,22 @@ layout: page
 # The Category layout
 ---
 
+{% include lang.html %}
+
 <div id="page-category">
-  <h1 class="pl-lg-2">
+  <h1 class="ps-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
+    <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
 
-  <ul class="post-content pl-0">
+  <ul class="post-content ps-0">
     {% for post in page.posts %}
-    <li class="d-flex justify-content-between pl-md-3 pr-md-3">
-      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-      <span class="dash flex-grow-1"></span>
-      {% include datetime.html date=post.date wrap='span' class='text-muted small' %}
-    </li>
+      <li class="d-flex justify-content-between px-md-3">
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+        <span class="dash flex-grow-1"></span>
+        {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
+      </li>
     {% endfor %}
   </ul>
 </div>

_layouts/default.html

@@ -3,9 +3,11 @@ layout: compress
 # Default layout
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 
-{% include assets-origin.html %}
+{% include origin-type.html %}
+
+{% include lang.html %}
 
 {% capture prefer_mode %}
   {% if site.theme_mode %}
@@ -14,58 +16,61 @@ layout: compress
 {% endcapture %}
 
 <!-- `site.alt_lang` can specify a language different from the UI -->
-<html lang="{{ site.alt_lang | default: site.lang }}"{{ prefer_mode }}>
-
+<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
   {% include head.html %}
 
-  <body data-topbar-visible="true">
-
-    {% include sidebar.html %}
-
-    {% include topbar.html %}
+  <body>
+    {% include sidebar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div id="main" class="container pl-xl-4 pr-xl-4">
+      <div id="main" class="container px-xxl-5">
+        {% include topbar.html lang=lang %}
         {{ content }}
+        {% include_cached search-results.html lang=lang %}
       </div>
+    </div>
 
-      {% include search-results.html %}
+    {% include_cached footer.html lang=lang %}
 
-    </div> <!-- #main-wrapper -->
+    <div id="mask"></div>
 
-    {% include footer.html %}
+    <button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
+      <i class="fas fa-angle-up"></i>
+    </button>
+
+    {% if site.pwa.enabled %}
+      <div
+        id="notification"
+        class="toast"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        data-bs-animation="true"
+        data-bs-autohide="false"
+      >
+        <div class="toast-header">
+          <button
+            type="button"
+            class="btn-close ms-auto"
+            data-bs-dismiss="toast"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="toast-body text-center pt-0">
+          <p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
+          <button type="button" class="btn btn-primary" aria-label="Update">
+            {{ site.data.locales[lang].notification.update }}
+          </button>
+        </div>
+      </div>
+    {% endif %}
+
+    {% include js-selector.html %}
 
     {% if page.mermaid %}
       {% include mermaid.html %}
     {% endif %}
 
-    <div id="mask"></div>
-
-    <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
-      <i class="fas fa-angle-up"></i>
-    </a>
-
-    {% if site.pwa.enabled %}
-      <div id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true"
-        data-animation="true" data-autohide="false">
-        <div class="toast-header">
-          <button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="toast-body text-center pt-0">
-          <p class="pl-2 pr-2 mb-3">{{ site.data.locales[site.lang].notification.update_found }}</p>
-          <button type="button" class="btn btn-primary" aria-label="Update">
-            {{ site.data.locales[site.lang].notification.update }}
-          </button>
-        </div>
-      </div>
-    {% endif %}
-
-    {% include search-loader.html %}
-
-    {% include js-selector.html %}
-
+    {% include_cached search-loader.html %}
   </body>
-
 </html>

_layouts/home.html

@@ -1,8 +1,10 @@
 ---
 layout: page
-# The Home page layout
+refactor: true
 ---
 
+{% include lang.html %}
+
 {% assign pinned = site.posts | where: 'pin', 'true' %}
 {% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
 
@@ -40,30 +42,45 @@ layout: page
 
 <div id="post-list">
   {% for post in posts %}
-    <div class="card post-preview">
-      <a href="{{ post.url | relative_url }}">
-        <div class="card-body">
-          <h1 class="card-title">
+    <a href="{{ post.url | relative_url }}" class="card-wrapper">
+      <div class="card post-preview flex-md-row-reverse">
+        {% if post.image %}
+          {% if post.image.lqip %}
+            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
+          {% endif %}
+
+          {% assign src = post.image.path | default: post.image %}
+          {% unless src contains '//' %}
+            {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
+          {% endunless %}
+
+          {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
+
+          <img src="{{ src }}" w="17" h="10" alt="{{ alt }}" {{ lqip }}>
+        {% endif %}
+
+        <div class="card-body d-flex flex-column">
+          <h1 class="card-title my-2 mt-md-0">
             {{ post.title }}
           </h1>
 
-          <div class="card-text post-content">
+          <div class="card-text post-content mt-0 mb-2">
             <p>
               {% include no-linenos.html content=post.content %}
               {{ content | markdownify | strip_html | truncate: 200 | escape }}
             </p>
           </div>
 
-          <div class="post-meta text-muted d-flex">
-            <div class="mr-auto">
+          <div class="post-meta flex-grow-1 d-flex align-items-end">
+            <div class="me-auto">
               <!-- posted date -->
-              <i class="far fa-calendar fa-fw"></i>
-              {% include datetime.html date=post.date %}
+              <i class="far fa-calendar fa-fw me-1"></i>
+              {% include datetime.html date=post.date lang=lang %}
 
               <!-- categories -->
               {% if post.categories.size > 0 %}
-                <i class="far fa-folder-open fa-fw"></i>
-                <span>
+                <i class="far fa-folder-open fa-fw me-1"></i>
+                <span class="categories">
                   {% for category in post.categories %}
                     {{ category }}
                     {%- unless forloop.last -%},{%- endunless -%}
@@ -73,21 +90,21 @@ layout: page
             </div>
 
             {% if post.pin %}
-              <div class="pin">
+              <div class="pin ms-1">
                 <i class="fas fa-thumbtack fa-fw"></i>
-                <span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
+                <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
               </div>
             {% endif %}
           </div>
           <!-- .post-meta -->
         </div>
-      </a>
-    </div>
-    <!-- .post-review -->
+        <!-- .card-body -->
+      </div>
+    </a>
   {% endfor %}
 </div>
 <!-- #post-list -->
 
-{% if paginator.total_pages > 0 %}
+{% if paginator.total_pages > 1 %}
   {% include post-paginator.html %}
 {% endif %}

_layouts/page.html

@@ -2,62 +2,67 @@
 layout: default
 ---
 
-{% include assets-origin.html %}
+{% include lang.html %}
+{% include origin-type.html %}
 
-<div class="row">
+{% if layout.tail_includes %}
+  {% assign has_tail = true %}
+{% endif %}
 
+<div class="row{% unless has_tail %} mb-5{% endunless %}">
   <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-4">
-    <div class="post pl-1 pr-1 pl-md-2 pr-md-2">
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
+    {% capture padding %}
+      {% unless page.layout == 'home' %}px-1{% endunless %}
+    {% endcapture %}
 
-    {% capture _content %}
+    <div class="post {{ padding | strip }} px-md-2">
+      {% capture _content %}
       {% if layout.refactor or page.layout == 'page' %}
-        {% include refactor-content.html content=content %}
+        {% include refactor-content.html content=content lang=lang %}
       {% else %}
         {{ content }}
       {% endif %}
     {% endcapture %}
 
-    {% if page.layout == 'page' or page.collection == 'tabs' %}
-      {% assign tab_key = page.title | downcase %}
-      {% assign title = site.data.locales[site.lang].tabs[tab_key] | default: page.title %}
-      <h1 class="dynamic-title">
-        {{ title }}
-      </h1>
-      <div class="post-content">
+      {% if page.layout == 'page' or page.collection == 'tabs' %}
+        {% assign tab_key = page.title | downcase %}
+        {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
+        <h1 class="dynamic-title">
+          {{ title }}
+        </h1>
+        <div class="post-content">
+          {{ _content }}
+        </div>
+      {% else %}
         {{ _content }}
-      </div>
-    {% else %}
-      {{ _content }}
-    {% endif %}
-
+      {% endif %}
     </div>
-  </div> <!-- #core-wrapper -->
+  </div>
+  <!-- #core-wrapper -->
 
   <!-- panel -->
-  <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted">
-
+  <div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
     <div class="access">
-      {% include update-list.html %}
-      {% include trending-tags.html %}
+      {% include_cached update-list.html lang=lang %}
+      {% include_cached trending-tags.html lang=lang %}
     </div>
 
     {% for _include in layout.panel_includes %}
       {% assign _include_path = _include | append: '.html' %}
-      {% include {{ _include_path }} %}
+      {% include {{ _include_path }} lang=lang %}
     {% endfor %}
   </div>
-
 </div>
 
 <!-- tail -->
-{% if layout.tail_includes %}
-<div class="row">
-  <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-3 pr-3 pr-xl-4 mt-5">
-    {% for _include in layout.tail_includes %}
-      {% assign _include_path = _include | append: '.html' %}
-      {% include {{ _include_path }} %}
-    {% endfor %}
+{% if has_tail %}
+  <div class="row">
+    <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
+      {% for _include in layout.tail_includes %}
+        {% assign _include_path = _include | append: '.html' %}
+        {% include {{ _include_path }} lang=lang %}
+      {% endfor %}
+    </div>
   </div>
-</div>
 {% endif %}

_layouts/post.html

@@ -9,27 +9,29 @@ tail_includes:
   - comments
 ---
 
+{% include lang.html %}
+
 <h1 data-toc-skip>{{ page.title }}</h1>
 
 <div class="post-meta text-muted">
     <!-- published date -->
     <span>
-      {{ site.data.locales[site.lang].post.posted }}
-      {% include datetime.html date=page.date tooltip=true %}
+      {{ site.data.locales[lang].post.posted }}
+      {% include datetime.html date=page.date tooltip=true lang=lang %}
     </span>
 
     <!-- lastmod date -->
-    {% if page.last_modified_at %}
+    {% if page.last_modified_at and page.last_modified_at != page.date %}
     <span>
-      {{ site.data.locales[site.lang].post.updated }}
-      {% include datetime.html date=page.last_modified_at tooltip=true %}
+      {{ site.data.locales[lang].post.updated }}
+      {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
     </span>
     {% endif %}
 
   {% if page.image %}
     {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
     {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
-    {% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %}
+    {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
 
     {% capture lqip %}
       {% if page.image.lqip %}
@@ -54,7 +56,7 @@ tail_includes:
         {% assign authors = page.authors %}
       {% endif %}
 
-      {{ site.data.locales[site.lang].post.written_by }}
+      {{ site.data.locales[lang].post.written_by }}
 
       <em>
       {% if authors %}
@@ -69,18 +71,8 @@ tail_includes:
     </span>
 
     <div>
-      <!-- page views -->
-      {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
-      <span>
-        <em id="pv" class="pageviews">
-          <i class="fas fa-spinner fa-spin fa-fw"></i>
-        </em>
-        {{ site.data.locales[site.lang].post.pageview_measure }}
-      </span>
-      {% endif %}
-
       <!-- read time -->
-      {% include read-time.html content=content prompt=true %}
+      {% include read-time.html content=content prompt=true lang=lang %}
     </div>
 
   </div> <!-- .d-flex -->
@@ -96,7 +88,7 @@ tail_includes:
   <!-- categories -->
   {% if page.categories.size > 0 %}
   <div class="post-meta mb-3">
-    <i class="far fa-folder-open fa-fw mr-1"></i>
+    <i class="far fa-folder-open fa-fw me-1"></i>
     {% for category in page.categories %}
       <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
       {%- unless forloop.last -%}, {%- endunless -%}
@@ -107,7 +99,7 @@ tail_includes:
   <!-- tags -->
   {% if page.tags.size > 0 %}
   <div class="post-tags">
-    <i class="fa fa-tags fa-fw mr-1"></i>
+    <i class="fa fa-tags fa-fw me-1"></i>
       {% for tag in page.tags %}
       <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
           class="post-tag no-text-decoration" >
@@ -121,20 +113,20 @@ tail_includes:
     d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
     <div class="license-wrapper">
 
-      {% if site.data.locales[site.lang].copyright.license.template %}
+      {% if site.data.locales[lang].copyright.license.template %}
 
         {% capture _replacement %}
-        <a href="{{ site.data.locales[site.lang].copyright.license.link }}">
-          {{ site.data.locales[site.lang].copyright.license.name }}
+        <a href="{{ site.data.locales[lang].copyright.license.link }}">
+          {{ site.data.locales[lang].copyright.license.name }}
         </a>
         {% endcapture %}
 
-        {{ site.data.locales[site.lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+        {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
 
       {% endif %}
     </div>
 
-    {% include post-sharing.html %}
+    {% include post-sharing.html lang=lang %}
 
   </div><!-- .post-tail-bottom -->
 

_layouts/tag.html

@@ -3,19 +3,21 @@ layout: page
 # The layout for Tag page
 ---
 
+{% include lang.html %}
+
 <div id="page-tag">
-  <h1 class="pl-lg-2">
+  <h1 class="ps-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
+    <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
-  <ul class="post-content pl-0">
+  <ul class="post-content ps-0">
     {% for post in page.posts %}
-    <li class="d-flex justify-content-between pl-md-3 pr-md-3">
-      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-      <span class="dash flex-grow-1"></span>
-      {% include datetime.html date=post.date wrap='span' class='text-muted small' %}
-    </li>
+      <li class="d-flex justify-content-between px-md-3">
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+        <span class="dash flex-grow-1"></span>
+        {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
+      </li>
     {% endfor %}
   </ul>
 </div>

_layouts/tags.html

@@ -3,9 +3,8 @@ layout: page
 # All the Tags of posts.
 ---
 
-<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
-
-  {% assign tags = "" | split: "" %}
+<div id="tags" class="d-flex flex-wrap mx-xl-2">
+  {% assign tags = '' | split: '' %}
   {% for t in site.tags %}
     {% assign tags = tags | push: t[0] %}
   {% endfor %}
@@ -15,9 +14,9 @@ layout: page
   {% for t in sorted_tags %}
     <div>
       <a class="tag" href="{{ t | slugify | url_encode | prepend: '/tags/' | append: '/' | relative_url }}">
-        {{ t }}<span class="text-muted">{{ site.tags[t].size }}</span>
+        {{ t -}}
+        <span class="text-muted">{{ site.tags[t].size }}</span>
       </a>
     </div>
   {% endfor %}
-
 </div>

_posts/2019-08-08-text-and-typography.md

@@ -4,6 +4,7 @@ author: cotes
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
+pin: true
 math: true
 mermaid: true
 image:
@@ -14,16 +15,15 @@ image:
 
 This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
 
-## Titles
----
-# H1 - heading
+## Headings
+
+<h1 class="mt-5">H1 - heading</h1>
 
 <h2 data-toc-skip>H2 - heading</h2>
 
 <h3 data-toc-skip>H3 - heading</h3>
 
 <h4>H4 - heading</h4>
----
 
 ## Paragraph
 
@@ -122,7 +122,7 @@ fi;
 ```sass
 @import
   "colors/light-typography",
-  "colors/dark-typography"
+  "colors/dark-typography";
 ```
 {: file='_sass/jekyll-theme-chirpy.scss'}
 

_posts/2019-08-09-getting-started.md

@@ -5,6 +5,7 @@ date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
 pin: true
+img_path: '/posts/20180809'
 ---
 
 ## Prerequisites
@@ -71,7 +72,7 @@ Starting with version `4.1.0`, if you want to overwrite the SASS variables defin
 
 ### Customing Static Assets
 
-Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined by file `_data/assets/cross_origin.yml`{: .filepath }, and you can replace some of them according to the network conditions in the region where your website is published.
+Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined by file `_data/origin/cors.yml`{: .filepath }, and you can replace some of them according to the network conditions in the region where your website is published.
 
 Also, if you'd like to self-host the static assets, please refer to the [_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme).
 
@@ -113,7 +114,9 @@ There are a few things to get ready for.
 
 Next, configure the _Pages_ service.
 
-1. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar. Then, in the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.
+1. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar. Then, in the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.  
+![Build source](pages-source-light.png){: .light .border .normal w='375' h='140' }
+![Build source](pages-source-dark.png){: .dark .normal w='375' h='140' }
 
 2. Push any commits to GitHub to trigger the _Actions_ workflow. In the _Actions_ tab of your repository, you should see the workflow _Build and Deploy_ running. Once the build is complete and successful, the site will be deployed automatically.
 

_posts/2021-01-03-enable-google-pv.md

@@ -1,243 +0,0 @@
----
-title: Enable Google Page Views
-author: sille_bille
-date: 2021-01-03 18:32:00 -0500
-categories: [Blogging, Tutorial]
-tags: [google analytics, pageviews]
----
-
-> The content of this post applies only to [_Universal Analytics property_](https://support.google.com/analytics/answer/10220206) (UA), not [_Google Analytics 4_](https://support.google.com/analytics/answer/10089681) (GA 4). In addition, since [UA is about to be deprecated on Jul 1, 2023](https://support.google.com/analytics/answer/11583528), the Page Views feature of [_Chirpy_][chirpy-homepage] will also be deprecated at that time.
-{: .prompt-danger }
-
-This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme based blog that you just built. This requires technical knowledge and it's recommended to keep the `google_analytics.pv.*` empty unless you have a good reason. If your website has low traffic, the page views count would discourage you to write more blogs. With that said, let's start with the setup.
-
-## Set up Google Analytics
-
-### Create GA account and property
-
-First, you need to set up your account on Google analytics. While you create your account, you must create your first **Property** as well.
-
-1. Head to <https://analytics.google.com/> and click on **Start Measuring**
-2. Enter your desired _Account Name_ and choose the desired checkboxes
-3. Enter your desired _Property Name_. This is the name of the tracker project that appears on your Google Analytics dashboard
-4. Enter the required information _About your business_
-5. Hit _Create_ and accept any license popup to set up your Google Analytics account and create your property
-
-### Create Data Stream
-
-With your property created, you now need to set up Data Stream to track your blog traffic. After you signup, the prompt should automatically take you to create your first **Data Stream**. If not, follow these steps:
-
-1. Go to **Admin** on the left column
-2. Select the desired property from the drop-down on the second column
-3. Click on **Data Streams**
-4. Add a stream and click on **Web**
-5. Enter your blog's URL
-
-It should look like this:
-
-![google-analytics-data-stream](/posts/20210103/01-google-analytics-data-stream.png){: width="1086" height="542"}
-
-Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml`{: .filepath} file:
-
-```yaml
-google_analytics:
-  id: 'G-V6XXXXXXX'   # fill in your Google Analytics ID
-  # Google Analytics pageviews report settings
-  pv:
-    proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
-    cache_path:       # the local PV cache data, friendly to visitors from GFW region
-```
-{: file="_config.yml"}
-
-When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with the Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pick up your changes. You should now be able to monitor your traffic in real time.
-
-![google-analytics-realtime](/posts/20210103/02-google-analytics-realtime.png){: width="616" height="557"}
-
-## Setup Page Views
-
-There is a detailed [tutorial](https://developers.google.com/analytics/solutions/google-analytics-super-proxy) available to set up Google Analytics superProxy. But, if you are interested to just quickly get your Chirpy-based blog display page views, follow along. These steps were tested on a Linux machine. If you are running Windows, you can use the Git bash terminal to run Unix-like commands.
-
-### Setup Google App Engine
-
-1. Visit <https://console.cloud.google.com/appengine>
-
-2. Click on **Create Application**
-
-3. Click on **Create Project**
-
-4. Enter the name and choose the data center close to you
-
-5. Select **Python** language and **Standard** environment
-
-6. Enable billing account. Yeah, you have to link your credit card. But, you won't be billed unless you exceed your free quota. For a simple blog, the free quota is more than sufficient.
-
-7. Go to your App Engine dashboard on your browser and select **API & Services** from the left navigation menu
-
-8. Click on **Enable APIs and Services** button on the top
-
-9. Enable the following APIs: _Google Analytics API_
-
-10. On the left, Click on _OAuth Consent Screen_ and accept **Configure Consent Screen**. Select **External** since your blog is probably hosted for the public. Click on **Publish** under _Publishing Status_
-
-11. Click on **Credentials** on the left and create a new **OAuth Client IDs** credential. Make sure to add an entry under `Authorized redirect URIs` that matches: `https://<project-id>.<region>.r.appspot.com/admin/auth`
-
-12. Note down the **Your Client ID** and **Your Client Secret**. You'll need this in the next section.
-
-13. Download and install the cloud SDK for your platform: <https://cloud.google.com/sdk/docs/quickstart>
-
-14. Run the following commands:
-
-    ```console
-    [root@bc96abf71ef8 /]# gcloud init
-
-    ~snip~
-
-    Go to the following link in your browser:
-
-        https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=XYZ.apps.googleusercontent.com&redirect_uri=ABCDEFG
-
-    Enter verification code: <VERIFICATION CODE THAT YOU GET AFTER YOU VISIT AND AUTHENTICATE FROM THE ABOVE LINK>
-
-    You are logged in as: [blah_blah@gmail.com].
-
-    Pick cloud project to use:
-    [1] chirpy-test-300716
-    [2] Create a new project
-    Please enter numeric choice or text value (must exactly match list
-    item): 1
-
-
-    [root@bc96abf71ef8 /]# gcloud info
-    # Your selected project info should be displayed here
-    ```
-
-### Setup Google Analytics superProxy
-
-1. Clone the **Google Analytics superProxy** project on Github: <https://github.com/googleanalytics/google-analytics-super-proxy> to your local.
-
-2.  Remove the first 2 lines in the [`src/app.yaml`{: .filepath}](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file:
-
-    ```diff
-    - application: your-project-id
-    - version: 1
-    ```
-
-3. In `src/config.py`{: .filepath}, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from your App Engine Dashboard.
-
-4.  Enter any random key for `XSRF_KEY`, your `config.py`{: .filepath} should look similar to this
-
-    ```python
-    #!/usr/bin/python2.7
-
-    __author__ = 'pete.frisella@gmail.com (Pete Frisella)'
-
-    # OAuth 2.0 Client Settings
-    AUTH_CONFIG = {
-      'OAUTH_CLIENT_ID': 'YOUR_CLIENT_ID',
-      'OAUTH_CLIENT_SECRET': 'YOUR_CLIENT_SECRET',
-      'OAUTH_REDIRECT_URI': '%s%s' % (
-        'https://chirpy-test-XXXXXX.ue.r.appspot.com',
-        '/admin/auth'
-      )
-    }
-
-    # XSRF Settings
-    XSRF_KEY = 'OnceUponATimeThereLivedALegend'
-    ```
-    {: file="src/config.py"}
-
-    > You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`.
-    > But, for the sake of keeping it simple, we will be using the Google provided default URL.
-    {: .prompt-info }
-
-5.  From inside the `src/`{: .filepath} directory, deploy the app
-
-    ```console
-    [root@bc96abf71ef8 src]# gcloud app deploy
-    Services to deploy:
-
-    descriptor:      [/tmp/google-analytics-super-proxy/src/app.yaml]
-    source:          [/tmp/google-analytics-super-proxy/src]
-    target project:  [chirpy-test-XXXX]
-    target service:  [default]
-    target version:  [VESRION_NUM]
-    target url:      [https://chirpy-test-XXXX.ue.r.appspot.com]
-
-
-    Do you want to continue (Y/n)? Y
-
-    Beginning deployment of service [default]...
-    ╔════════════════════════════════════════════════════════════╗
-    ╠═ Uploading 1 file to Google Cloud Storage                 ═╣
-    ╚════════════════════════════════════════════════════════════╝
-    File upload done.
-    Updating service [default]...done.
-    Setting traffic split for service [default]...done.
-    Deployed service [default] to [https://chirpy-test-XXXX.ue.r.appspot.com]
-
-    You can stream logs from the command line by running:
-    $ gcloud app logs tail -s default
-
-    To view your application in the web browser run:
-    $ gcloud app browse
-    ```
-
-6. Visit the deployed service. Add a `/admin` to the end of the URL.
-
-7. Click on **Authorize Users** and make sure to add yourself as a managed user.
-
-8. If you get any errors, please Google it. The errors are self-explanatory and should be easy to fix.
-
-If everything went good, you'll get this screen:
-
-![superProxy-deployed](/posts/20210103/03-superProxy-deployed.png){: width="1366" height="354"}
-
-### Create Google Analytics Query
-
-Head to `https://PROJECT_ID.REGION_ID.r.appspot.com/admin` and create a query after verifying the account. **GA Core Reporting API** query request can be created in [Query Explorer](https://ga-dev-tools.appspot.com/query-explorer/).
-
-The query parameters are as follows:
-
-- **start-date**: fill in the first day of blog posting
-- **end-date**: fill in `today` (this is a parameter supported by GA Report, which means that it will always end according to the current query date)
-- **metrics**: select `ga:pageviews`
-- **dimensions**: select `ga:pagePath`
-
-In order to reduce the returned results and reduce the network bandwidth, we add custom filtering rules [^ga-filters]:
-
-- **filters**: fill in `ga:pagePath=~^/posts/.*/$;ga:pagePath!@=`.
-
-  Among them, `;` means using _logical AND_ to concatenate two rules.
-
-  If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`.
-
-After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at the bottom of the page and fill in the **Encoded URI for the query** of SuperProxy on GAE.
-
-After the query is saved on GAE, a **Public Endpoint** (public access address) will be generated, and we will get the query result in JSON format when accessing it. Finally, click <kbd>Enable Endpoint</kbd> in **Public Request Endpoint** to make the query effective, and click <kbd>Start Scheduling</kbd> in **Scheduling** to start the scheduled task.
-
-![superproxy-query](/posts/20210103/04-superproxy-query.png){: width="1100" height="126"}
-
-## Configure Chirpy to Display Page View
-
-Once all the hard part is done, it is very easy to enable the Page View on Chirpy theme. Your superProxy dashboard should look something like below and you can grab the required values.
-
-![superproxy-dashboard](/posts/20210103/05-superproxy-dashboard.png){: width="1210" height="694"}
-
-Update the `_config.yml`{: .filepath} file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:
-
-```yaml
-google_analytics:
-  id: 'G-V6XXXXXXX'   # fill in your Google Analytics ID
-  pv:
-    proxy_endpoint: 'https://PROJECT_ID.REGION_ID.r.appspot.com/query?id=<ID FROM SUPER PROXY>'
-    cache_path:       # the local PV cache data, friendly to visitors from GFW region
-```
-{: file="_config.yml"}
-
-Now, you should see the Page View enabled on your blog.
-
-## Reference
-
-[^ga-filters]: [Google Analytics Core Reporting API: Filters](https://developers.google.com/analytics/devguides/reporting/core/v3/reference#filters)
-
-[chirpy-homepage]: https://github.com/cotes2020/jekyll-theme-chirpy/

_sass/addon/module.scss

@@ -7,7 +7,7 @@
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: Lato, 'Microsoft Yahei', sans-serif;
+  font-family: $font-family-heading;
 }
 
 %section {
@@ -69,12 +69,13 @@
 }
 
 %clickable-transition {
-  transition: color 0.35s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 %no-cursor {
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
@@ -91,7 +92,7 @@
 }
 
 %rounded {
-  border-radius: 6px;
+  border-radius: $base-radius;
 }
 
 %img-caption {
@@ -109,15 +110,20 @@
   color: rgba(117, 117, 117, 0.9);
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
-/* ---------- scss mixin --------- */
-
-@mixin no-text-decoration {
-  text-decoration: none;
+%text-clip {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
+/* ---------- scss mixin --------- */
+
 @mixin mt-mb($value) {
   margin-top: $value;
   margin-bottom: $value;
@@ -128,6 +134,11 @@
   margin-right: $value;
 }
 
+@mixin pt-pb($val) {
+  padding-top: $val;
+  padding-bottom: $val;
+}
+
 @mixin pl-pr($val) {
   padding-left: $val;
   padding-right: $val;
@@ -146,7 +157,6 @@
 @mixin align-center {
   position: relative;
   left: 50%;
-  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 

_sass/addon/syntax.scss

@@ -32,7 +32,7 @@ html {
 /* -- code snippets -- */
 
 %code-snippet-bg {
-  background: var(--highlight-bg-color);
+  background-color: var(--highlight-bg-color);
 }
 
 %code-snippet-padding {
@@ -41,9 +41,6 @@ html {
 }
 
 .highlighter-rouge {
-  @extend %code-snippet-bg;
-  @extend %rounded;
-
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
@@ -120,10 +117,6 @@ code {
   blockquote & {
     color: inherit;
   }
-
-  .highlight > & {
-    color: transparent;
-  }
 }
 
 td.rouge-code {
@@ -140,13 +133,25 @@ td.rouge-code {
   }
 }
 
+div[class^='language-'] {
+  @extend %rounded;
+  @extend %code-snippet-bg;
+
+  box-shadow: var(--language-border-color) 0 0 0 1px;
+
+  .post-content > & {
+    @include ml-mr(-1.25rem);
+
+    border-radius: 0;
+  }
+}
+
 /* Hide line numbers for default, console, and terminal code snippets */
 div {
-  &[class^='highlighter-rouge'],
   &.nolineno,
-  &.language-plaintext.highlighter-rouge,
-  &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge {
+  &.language-plaintext,
+  &.language-console,
+  &.language-terminal {
     pre.lineno {
       display: none;
     }
@@ -166,28 +171,15 @@ div {
   justify-content: space-between;
   align-items: center;
   height: $code-header-height;
-
-  &::before {
-    $dot-size: 0.75rem;
-    $dot-margin: 0.5rem;
-
-    content: '';
-    display: inline-block;
-    margin-left: 1rem;
-    width: $dot-size;
-    height: $dot-size;
-    border-radius: 50%;
-    background-color: var(--code-header-muted-color);
-    box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
-      ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
-  }
+  margin-left: 1rem;
+  margin-right: 0.5rem;
 
   /* the label block */
   span {
     /* label icon */
     i {
       font-size: 1rem;
-      margin-right: 0.4rem;
+      margin-right: 0.5rem;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -248,21 +240,30 @@ div {
   }
 }
 
-@media all and (max-width: 576px) {
-  .post-content {
-    > div[class^='language-'] {
-      @include ml-mr(-1.25rem);
+@media all and (min-width: 576px) {
+  div[class^='language-'] {
+    .post-content > & {
+      @include ml-mr(0);
 
-      border-radius: 0;
+      border-radius: $base-radius;
+    }
 
-      .highlight {
-        padding-left: 0.25rem;
-      }
+    .code-header {
+      @include ml-mr(0);
 
-      .code-header {
-        border-radius: 0;
-        padding-left: 0.4rem;
-        padding-right: 0.5rem;
+      &::before {
+        $dot-size: 0.75rem;
+        $dot-margin: 0.5rem;
+
+        content: '';
+        display: inline-block;
+        margin-left: 1rem;
+        width: $dot-size;
+        height: $dot-size;
+        border-radius: 50%;
+        background-color: var(--code-header-muted-color);
+        box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
+          ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
       }
     }
   }

_sass/addon/variables.scss

@@ -5,26 +5,23 @@
 /* sidebar */
 
 $sidebar-width: 260px !default; /* the basic width */
-$sidebar-width-small: 210px !default; /* screen width: >= 850px, <= 1199px (iPad landscape) */
-$sidebar-width-large: 350px !default; /* screen width: >= 1650px */
-
-/* tabs of sidebar */
-
-$tab-count: 5 !default; /* backward compatible (version <= 4.0.2) */
-$tab-height: 3rem !default;
-$tab-cursor-height: 1.6rem !default;
-$cursor-width: 2px !default; /* the cursor width of the selected tab */
+$sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
 $search-max-width: 210px !default;
 $footer-height: 5rem !default;
-$footer-height-mobile: 6rem !default; /* screen width: <= 576px */
-
+$footer-height-mobile: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
 $bottom-min-height: 35rem !default;
+$base-radius: 0.5rem;
 
 /* syntax highlight */
 
 $code-font-size: 0.85rem !default;
+
+/* fonts */
+
+$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
+$font-family-heading: Lato, 'Microsoft Yahei', sans-serif;

_sass/colors/dark-syntax.scss

@@ -3,6 +3,7 @@
  */
 
 @mixin dark-syntax {
+  --language-border-color: rgba(84, 83, 83, 0.27);
   --highlight-bg-color: #252525;
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;