Merge branch 'master' into production

2023-05-17 03:02:22 +08:00 · 2023-05-17 03:02:22 +08:00 · de6ec65932
commit de6ec65932
parent 387f0ec64a c5f15a3af8
107 changed files with 1808 additions and 1875 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.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
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.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
--- a/.github/ISSUE_TEMPLATE/help_wanted.md
+++ b/.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
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.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
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.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 "` -->
--- a/.github/workflows/commitlint.yml
+++ b/.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
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -16,6 +16,7 @@
    "rule-empty-line-before": [
      "always",
      { "ignore": ["after-comment", "first-nested", "inside-block"] }
-    ]
+    ],
+    "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }]
  }
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,55 @@

 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.

+## [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)


--- a/_data/locales/ar.yml
+++ b/_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:
--- a/_data/locales/bg-BG.yml
+++ b/_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:
--- a/_data/locales/cs-CZ.yml
+++ b/_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:
--- a/_data/locales/de-DE.yml
+++ b/_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:
--- a/_data/locales/el-GR.yml
+++ b/_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: Δημοσιεύσεις
--- a/_data/locales/en.yml
+++ b/_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:
--- a/_data/locales/es-ES.yml
+++ b/_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:
--- a/_data/locales/fi-FI.yml
+++ b/_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:
--- a/_data/locales/fr-FR.yml
+++ b/_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:
--- a/_data/locales/hu-HU.yml
+++ b/_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:
--- a/_data/locales/id-ID.yml
+++ b/_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:
--- a/_data/locales/it-IT.yml
+++ b/_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:
--- a/_data/locales/ko-KR.yml
+++ b/_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:
--- a/_data/locales/my-MM.yml
+++ b/_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:
--- a/_data/locales/pt-BR.yml
+++ b/_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:
--- a/_data/locales/ru-RU.yml
+++ b/_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:
--- a/_data/locales/sl-SI.yml
+++ b/_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
--- a/_data/locales/sv-SE.yml
+++ b/_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
--- a/_data/locales/tr-TR.yml
+++ b/_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:
--- a/_data/locales/uk-UA.yml
+++ b/_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:
--- a/_data/locales/vi-VN.yml
+++ b/_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:
--- a/_data/locales/zh-CN.yml
+++ b/_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:
--- a/_data/locales/zh-TW.yml
+++ b/_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: 篇文章
--- a/_data/assets/self_host.yml
+++ b/_data/assets/self_host.yml
--- a/_data/assets/cross_origin.yml
+++ b/_data/assets/cross_origin.yml
@ -11,36 +11,36 @@ cdns:

 # fonts

-webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap

 # 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
+    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

 countup:
  js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
--- a/_includes/comments/giscus.html
+++ b/_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>
--- a/_includes/datetime.html
+++ b/_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 }}>
--- a/_includes/footer.html
+++ b/_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>
--- a/_includes/head.html
+++ b/_includes/head.html
@ -58,15 +58,15 @@
  {% include 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 -->
@ -90,27 +90,27 @@
  {% 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>
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@ -1,24 +1,35 @@
 <!-- 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>
+    {% assign urls = urls | append: ',' | append: site.data.origin[type].countup.js %}
  {% endif %}
 {% endif %}

-{% 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
-  %}
+{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].lazysizes.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 +40,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 +94,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 %}
--- a/_includes/jsdelivr-combine.html
+++ b/_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 %}
--- a/_includes/lang.html
+++ b/_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 %}
--- a/_includes/mermaid.html
+++ b/_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>
--- a/_includes/metadata-hook.html
+++ b/_includes/metadata-hook.html
@ -0,0 +1 @@
+<!-- A placeholder to allow defining custom metadata -->
--- a/_includes/mode-toggle.html
+++ b/_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() {
--- a/_includes/assets-origin.html
+++ b/_includes/assets-origin.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 %}
--- a/_includes/post-nav.html
+++ b/_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>
--- a/_includes/post-paginator.html
+++ b/_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 my-4 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 -->
--- a/_includes/post-sharing.html
+++ b/_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>
--- a/_includes/read-time.html
+++ b/_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>
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@ -45,9 +45,8 @@

 <!-- images -->

-{% assign IMG_TAG = '<img ' %}
-
-{% if _content contains IMG_TAG %}
+{% if _content contains '<img' %}
+  {% assign IMG_TAG = '<img ' %}
  {% assign _img_content = nil %}
  {% assign _img_snippets = _content | split: IMG_TAG %}

@ -94,9 +93,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 +109,6 @@
        {% when 'class' %}
          {% assign _class = _value %}
      {% endcase %}
-
    {% endfor %}

    <!-- take out classes -->
@ -162,28 +160,39 @@
    <!-- 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 page.layout == 'post' %}
+      <!-- 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: '>'  %}
+      {% 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 %}

-    {% else %}
+    {% endif %}
+
+    {% 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' %}
    {% 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 +219,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 +234,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 +271,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 +287,4 @@
 {% assign _content = _heading_content %}

 <!-- return -->
-
 {{ _content }}
--- a/_includes/related-posts.html
+++ b/_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 %}
--- a/_includes/search-loader.html
+++ b/_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>
--- a/_includes/search-results.html
+++ b/_includes/search-results.html
@ -1,8 +1,7 @@
-<!--
-  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 %}
    </div>
--- a/_includes/sidebar.html
+++ b/_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 -->
--- a/_includes/toc.html
+++ b/_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 %}
--- a/_includes/topbar.html
+++ b/_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>
--- a/_includes/trending-tags.html
+++ b/_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 %}
--- a/_includes/update-list.html
+++ b/_includes/update-list.html
@ -4,10 +4,10 @@

 {% 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 +17,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 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>
+          <a href="{{ url }}">{{ post.title }}</a>
+        </li>
      {% endfor %}
    </ul>
-  </div> <!-- #access-lastmod -->
-
+  </div>
+  <!-- #access-lastmod -->
 {% endif %}
--- a/_javascript/home.js
+++ b/_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();
--- a/_javascript/modules/components/back-to-top.js
+++ b/_javascript/modules/components/back-to-top.js
@ -4,10 +4,7 @@

 export function back2top() {
  $(window).on('scroll', () => {
-    if (
-      $(window).scrollTop() > 50 &&
-      $('#sidebar-trigger').css('display') === 'none'
-    ) {
+    if ($(window).scrollTop() > 50) {
      $('#back-to-top').fadeIn();
    } else {
      $('#back-to-top').fadeOut();
@ -15,12 +12,6 @@ export function back2top() {
  });

  $('#back-to-top').on('click', () => {
-    $('body,html').animate(
-      {
-        scrollTop: 0
-      },
-      800
-    );
-    return false;
+    window.scrollTo(0, 0);
  });
 }
--- a/_javascript/modules/components/clipboard.js
+++ b/_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 --- */

--- a/_javascript/modules/components/convert-title.js
+++ b/_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);
-  });
-}
--- a/_javascript/modules/components/img-extra.js
+++ b/_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');
-  });
-}
--- a/_javascript/modules/components/img-lazyload.js
+++ b/_javascript/modules/components/img-lazyload.js
@ -0,0 +1,15 @@
+/**
+ * Set up image lazy-load
+ */
+
+export function imgLazy() {
+  if ($('#core-wrapper img[data-src]') <= 0) {
+    return;
+  }
+
+  /* Stop shimmer when image loaded */
+  document.addEventListener('lazyloaded', function (e) {
+    const $img = $(e.target);
+    $img.parent().removeClass('shimmer');
+  });
+}
--- a/_javascript/modules/components/img-popup.js
+++ b/_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'
+    }
+  });
+}
--- a/_javascript/modules/components/locale-datetime.js
+++ b/_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));
  });
 }
--- a/_javascript/modules/components/pageviews.js
+++ b/_javascript/modules/components/pageviews.js
@ -174,13 +174,7 @@ function displayPageviews(data) {
  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) {
+  if ($('.post').length > 0) {
    /* the post */
    const path = window.location.pathname;
    tacklePV(rows, path, $('#pv'), hasInit);
--- a/_javascript/modules/components/search-display.js
+++ b/_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();
--- a/_javascript/modules/components/smooth-scroll.js
+++ b/_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() */
-}
--- a/_javascript/modules/components/tooltip-loader.js
+++ b/_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)
+  );
 }
--- a/_javascript/modules/components/topbar-switcher.js
+++ b/_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);
-}
--- a/_javascript/modules/components/utils/scroll-helper.js
+++ b/_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;
-  }
-}
--- a/_javascript/modules/layouts/topbar.js
+++ b/_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();
 }
--- a/_javascript/modules/plugins.js
+++ b/_javascript/modules/plugins.js
@ -1,7 +1,7 @@
 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';
--- a/_javascript/page.js
+++ b/_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();
--- a/_javascript/post.js
+++ b/_javascript/post.js
@ -1,9 +1,9 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 import {
-  imgExtra,
+  imgLazy,
+  imgPopup,
  initLocaleDatetime,
  initClipboard,
-  smoothScroll,
  initPageviews,
  toc
 } from './modules/plugins';
@ -11,9 +11,9 @@ import {
 basic();
 initSidebar();
 initTopbar();
-imgExtra();
+imgLazy();
+imgPopup();
 initLocaleDatetime();
 initClipboard();
 toc();
-smoothScroll(); // must be called after toc is created
 initPageviews();
--- a/_layouts/archives.html
+++ b/_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>
--- a/_layouts/categories.html
+++ b/_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 %}
--- a/_layouts/category.html
+++ b/_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>
--- a/_layouts/default.html
+++ b/_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,30 +16,21 @@ 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 search-results.html lang=lang %}
      </div>
+    </div>

-      {% include search-results.html %}
-
-    </div> <!-- #main-wrapper -->
-
-    {% include footer.html %}
-
-    {% if page.mermaid %}
-      {% include mermaid.html %}
-    {% endif %}
+    {% include footer.html lang=lang %}

    <div id="mask"></div>

@ -46,26 +39,38 @@ layout: compress
    </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
+        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="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
+          <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="pl-2 pr-2 mb-3">{{ site.data.locales[site.lang].notification.update_found }}</p>
+          <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[site.lang].notification.update }}
+            {{ site.data.locales[lang].notification.update }}
          </button>
        </div>
      </div>
    {% endif %}

-    {% include search-loader.html %}
-
    {% include js-selector.html %}

-  </body>
+    {% if page.mermaid %}
+      {% include mermaid.html %}
+    {% endif %}

+    {% include search-loader.html %}
+  </body>
 </html>
--- a/_layouts/home.html
+++ b/_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,37 @@ 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 %}
+          <img src="{{ post.image.path | default: post.image }}" w="15" h="8" {{ 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 +82,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 %}
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -2,62 +2,63 @@
 layout: default
 ---

-{% include assets-origin.html %}
+{% include lang.html %}
+{% include origin-type.html %}

 <div class="row">
-
  <!-- 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 update-list.html lang=lang %}
+      {% include 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 %}
+  <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 %}
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -9,20 +9,22 @@ 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 %}

@ -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 %}
@ -75,12 +77,12 @@ tail_includes:
        <em id="pv" class="pageviews">
          <i class="fas fa-spinner fa-spin fa-fw"></i>
        </em>
-        {{ site.data.locales[site.lang].post.pageview_measure }}
+        {{ site.data.locales[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 +98,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 +109,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 +123,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 -->

--- a/_layouts/tag.html
+++ b/_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>
--- a/_layouts/tags.html
+++ b/_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>
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_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'}

--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@ -71,7 +71,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).

--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
--- a/_sass/addon/module.scss
+++ b/_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%);
 }

--- a/_sass/addon/syntax.scss
+++ b/_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);
      }
    }
  }
--- a/_sass/addon/variables.scss
+++ b/_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;
--- a/_sass/colors/dark-syntax.scss
+++ b/_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;
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@ -21,7 +21,7 @@
  --btn-backtotop-color: var(--text-color);
  --btn-backtotop-border-color: var(--btn-border-color);
  --btn-box-shadow: var(--main-bg);
-  --card-header-bg: rgb(51, 50, 50);
+  --card-header-bg: rgb(48, 48, 48);
  --label-color: rgb(108, 117, 125);
  --checkbox-color: rgb(118, 120, 121);
  --checkbox-checked-color: var(--link-color);
@ -36,15 +36,16 @@
  /* Sidebar */
  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
  --sidebar-muted-color: #6d6c6b;
-  --sidebar-active-color: rgb(255, 255, 255, 0.8);
-  --nav-cursor-color: rgb(183, 182, 182);
-  --sidebar-btn-bg: rgb(117, 116, 116, 0.2);
+  --sidebar-active-color: rgb(255, 255, 255, 0.95);
+  --sidebar-hover-bg: rgb(54, 54, 54, 0.33);
+  --sidebar-btn-bg: rgb(84, 83, 83, 0.3);
+  --sidebar-btn-color: #787878;
+  --avatar-border-color: rgb(206, 206, 206, 0.9);

  /* Topbar */
+  --topbar-bg: rgb(27, 27, 30, 0.64);
  --topbar-text-color: var(--text-color);
-  --topbar-wrapper-bg: rgb(39, 40, 43);
-  --search-wrapper-bg: rgb(34, 34, 39);
-  --search-wrapper-border-color: rgb(34, 34, 39);
+  --search-wrapper-border-color: rgb(55, 55, 55);
  --search-icon-color: rgb(100, 102, 105);
  --input-focus-border-color: rgb(112, 114, 115);

@ -54,8 +55,6 @@
  --btn-paginator-hover-color: rgb(64, 65, 66);
  --btn-paginator-border-color: var(--btn-border-color);
  --btn-text-color: var(--text-color);
-  --pin-bg: rgb(34, 35, 37);
-  --pin-color: inherit;

  /* Posts */
  --toc-highlight: rgb(116, 178, 243);
@ -68,19 +67,19 @@
  --btn-share-color: #6c757d;
  --btn-share-hover-color: #bfc1ca;
  --relate-post-date: var(--text-muted-color);
-  --card-bg: #212121;
-  --card-hovor-bg: #3a3a3a;
-  --card-border-color: rgb(53, 53, 60);
-  --card-box-shadow: var(--main-bg);
+  --card-bg: #1e1e1e;
+  --card-hovor-bg: #464d51;
+  --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
+    rgb(137, 135, 135, 0.24) 0 0 0 1px;
  --kbd-wrap-color: #6a6a6a;
  --kbd-text-color: #d3d3d3;
  --kbd-bg-color: #242424;
  --prompt-text-color: rgb(216, 212, 212, 0.75);
-  --prompt-tip-bg: rgba(77, 187, 95, 0.2);
-  --prompt-tip-icon-color: rgb(5, 223, 5, 0.68);
+  --prompt-tip-bg: rgb(22, 60, 36, 0.64);
+  --prompt-tip-icon-color: rgb(15, 164, 15, 0.81);
  --prompt-info-bg: rgb(7, 59, 104, 0.8);
  --prompt-info-icon-color: #0075d1;
-  --prompt-warning-bg: rgb(90, 69, 3, 0.95);
+  --prompt-warning-bg: rgb(90, 69, 3, 0.88);
  --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
  --prompt-danger-bg: rgb(86, 28, 8, 0.8);
  --prompt-danger-icon-color: #cd0202;
@ -92,7 +91,7 @@
  --dash-color: rgb(63, 65, 68);

  /* categories */
-  --categories-border: rgb(64, 66, 69);
+  --categories-border: rgb(64, 66, 69, 0.5);
  --categories-hover-bg: rgb(73, 75, 76);
  --categories-icon-hover-color: white;

@ -101,13 +100,6 @@
  --timeline-color: rgb(63, 65, 68);
  --timeline-year-dot-color: var(--timeline-color);

-  .post img[data-src] {
-    &.lazyloaded {
-      -webkit-filter: brightness(95%);
-      filter: brightness(95%);
-    }
-  }
-
  .light {
    display: none;
  }
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@ -67,10 +67,11 @@
  .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */

  /* --- custom light colors --- */
+  --language-border-color: rgba(172, 169, 169, 0.2);
  --highlight-bg-color: #f7f7f7;
-  --highlighter-rouge-color: #2f2f2f;
+  --highlighter-rouge-color: #3f596f;
  --highlight-lineno-color: #c2c6cc;
-  --inline-code-bg: #f3f3f3;
+  --inline-code-bg: #f6f6f7;
  --code-header-text-color: #a3a3b1;
  --code-header-muted-color: #ebebeb;
  --code-header-icon-color: #d1d1d1;
@ -78,6 +79,5 @@

  [class^='prompt-'] {
    --inline-code-bg: #fbfafa;
-    --highlighter-rouge-color: rgb(82, 82, 82);
  }
 } /* light-syntax */
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@ -10,11 +10,11 @@

  /* Common color */
  --text-color: #34343c;
-  --text-muted-color: gray;
+  --text-muted-color: #8e8e8e;
  --heading-color: black;
  --blockquote-border-color: #eeeeee;
  --blockquote-text-color: #9a9a9a;
-  --link-color: #2a408e;
+  --link-color: #0153ab;
  --link-underline-color: #dee2e6;
  --button-bg: #ffffff;
  --btn-border-color: #e9ecef;
@ -26,7 +26,7 @@
  --img-bg: radial-gradient(
    circle,
    rgb(255, 255, 255) 0%,
-    rgb(249, 249, 249) 100%
+    rgb(239, 239, 239) 100%
  );
  --shimmer-bg: linear-gradient(
    90deg,
@ -36,20 +36,21 @@
  );

  /* Sidebar */
-  --sidebar-bg: #eeeeee;
+  --sidebar-bg: #f6f8fa;
  --sidebar-muted-color: #a2a19f;
-  --sidebar-active-color: #424242;
-  --nav-cursor-color: #757575;
+  --sidebar-active-color: #1d1d1d;
+  --sidebar-hover-bg: rgb(227, 227, 227, 0.64);
  --sidebar-btn-bg: white;
+  --sidebar-btn-color: #8e8e8e;
+  --avatar-border-color: white;

  /* Topbar */
+  --topbar-bg: rgb(255, 255, 255, 0.7);
  --topbar-text-color: rgb(78, 78, 78);
-  --topbar-wrapper-bg: white;
-  --search-wrapper-bg: rgb(245, 245, 245, 0.5);
-  --search-wrapper-border-color: rgb(245, 245, 245);
+  --search-wrapper-border-color: rgb(240, 240, 240);
  --search-tag-bg: #f8f9fa;
  --search-icon-color: #c2c6cc;
-  --input-focus-border-color: var(--btn-border-color);
+  --input-focus-border-color: #b8b8b8;

  /* Home page */
  --post-list-text-color: dimgray;
@ -57,15 +58,14 @@
  --btn-paginator-hover-color: var(--sidebar-bg);
  --btn-paginator-border-color: var(--sidebar-bg);
  --btn-text-color: #676666;
-  --pin-bg: #f5f5f5;
-  --pin-color: #999fa4;

  /* Posts */
  --toc-highlight: #563d7c;
  --btn-share-hover-color: var(--link-color);
-  --card-hovor-bg: #eeeeee;
-  --card-border-color: #ececec;
-  --card-box-shadow: rgba(234, 234, 234, 0.76);
+  --card-bg: white;
+  --card-hovor-bg: #e2e2e2;
+  --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
+    rgba(211, 209, 209, 0.15) 0 0 0 1px;
  --label-color: #616161;
  --relate-post-date: rgba(30, 55, 70, 0.4);
  --footnote-target-bg: lightcyan;
@ -98,6 +98,7 @@
  }

  /* Categories */
+  --categories-border: rgba(0, 0, 0, 0.125);
  --categories-hover-bg: var(--btn-border-color);
  --categories-icon-hover-color: darkslategray;

--- a/_sass/jekyll-theme-chirpy.scss
+++ b/_sass/jekyll-theme-chirpy.scss
@ -1,24 +1,19 @@
 /*!
- * The styles for Jekyll theme Chirpy
- *
- * Chirpy v5.6.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v6.0.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
 * © 2019 Cotes Chung
 * MIT Licensed
 */

-@import
-  "colors/light-typography",
-  "colors/dark-typography",
-
-  "addon/module",
-  "addon/variables",
-  "variables-hook",
-  "addon/syntax",
-  "addon/commons",
-
-  "layout/home",
-  "layout/post",
-  "layout/tags",
-  "layout/archives",
-  "layout/categories",
-  "layout/category-tag";
+@import 'colors/light-typography';
+@import 'colors/dark-typography';
+@import 'addon/variables';
+@import 'variables-hook';
+@import 'addon/module';
+@import 'addon/syntax';
+@import 'addon/commons';
+@import 'layout/home';
+@import 'layout/post';
+@import 'layout/tags';
+@import 'layout/archives';
+@import 'layout/categories';
+@import 'layout/category-tag';
--- a/_sass/layout/categories.scss
+++ b/_sass/layout/categories.scss
@ -8,9 +8,24 @@

 .categories {
  margin-bottom: 2rem;
+  border-color: var(--categories-border);
+
+  &.card,
+  .list-group {
+    @extend %rounded;
+  }

  .card-header {
-    padding-right: 12px;
+    $radius: calc($base-radius - 1px);
+
+    padding: 0.75rem;
+    border-radius: $radius;
+    border-bottom: 0;
+
+    &.hide-border-bottom {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
  }

  i {
@ -28,6 +43,10 @@
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
  }
 } /* .categories */

@ -42,9 +61,7 @@
    position: relative;
    height: 0.7rem;
    width: 1rem;
-    transition: -webkit-transform 300ms ease;
    transition: transform 300ms ease;
-    transition: transform 300ms ease, -webkit-transform 300ms ease;
  }

  &:hover {
@ -62,6 +79,5 @@
 }

 .rotate {
-  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
 }
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@ -2,6 +2,96 @@
  Style for Homepage
 */

+#post-list {
+  margin-top: 2rem;
+
+  &:only-child {
+    margin-bottom: 3.75rem;
+  }
+
+  a.card-wrapper {
+    display: block;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .card {
+    %img-radius {
+      border-radius: $base-radius $base-radius 0 0;
+    }
+
+    .preview-img {
+      height: 10rem;
+
+      @extend %img-radius;
+
+      img {
+        width: 100%;
+        height: 100%;
+        -o-object-fit: cover;
+        object-fit: cover;
+
+        @extend %img-radius;
+      }
+    }
+
+    .card-body {
+      min-height: 10.5rem;
+      padding: 1rem;
+
+      .card-title {
+        @extend %text-clip;
+
+        font-size: 1.25rem;
+      }
+
+      %muted {
+        color: var(--text-muted-color) !important;
+      }
+
+      .card-text.post-content {
+        @extend %muted;
+
+        p {
+          @extend %text-clip;
+
+          line-height: 1.5;
+          margin: 0;
+        }
+      }
+
+      .post-meta {
+        @extend %muted;
+
+        i {
+          &:not(:first-child) {
+            margin-left: 1.5rem;
+          }
+        }
+
+        em {
+          @extend %normal-font-style;
+
+          color: inherit;
+        }
+
+        > div:first-child {
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+} /* #post-list */
+
 .pagination {
  color: var(--btn-patinator-text-color);
  font-family: Lato, sans-serif;
@ -52,91 +142,42 @@
  } /* .page-item */
 } /* .pagination */

-#post-list {
-  margin-top: 1.75rem;
-  padding-right: 0.5rem;
-
-  a:hover {
-    text-decoration: none;
-  }
-
-  .post-preview {
-    padding: 0.25rem;
-    border-radius: 0.75rem;
-    border: 1px solid var(--card-border-color);
-    background: var(--card-bg);
-
-    &:hover {
-      background: var(--card-hovor-bg);
-      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+/* Tablet */
+@media all and (min-width: 768px) {
+  #post-list {
+    %img-radius {
+      border-radius: 0 $base-radius $base-radius 0;
    }

-    &:not(:last-child) {
-      margin-bottom: 1.75rem;
-    }
-
-    h1 {
-      font-size: 1.4rem;
-      margin: 0;
-    }
-
-    .post-meta {
-      i {
-        font-size: 0.73rem;
-
-        &:not(:first-child) {
-          margin-left: 1.2rem;
-        }
+    .card {
+      .preview-img {
+        width: 20rem;
+        height: 11.5rem; // can hold 2 lines each for title and content
      }

-      em {
-        @extend %normal-font-style;
-      }
+      .card-body {
+        min-height: 10.75rem;
+        width: 60%;
+        padding: 1.75rem 1.75rem 1.25rem 1.75rem;

-      .pin {
-        i {
-          -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-          padding-left: 3px;
-          color: var(--pin-color);
+        .card-text {
+          display: inherit !important;
        }

-        span {
-          display: none;
+        .post-meta {
+          i {
+            &:not(:first-child) {
+              margin-left: 1.75rem;
+            }
+          }
        }
      }
    }
-
-    .post-content {
-      margin-top: 0.6rem;
-      margin-bottom: 0.6rem;
-      color: var(--post-list-text-color);
-
-      > p {
-        margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-    }
-  } /* .post-preview */
-} /* #post-list */
-
-@media (hover: hover) {
-  .post-preview {
-    transition: all 0.35s ease-in-out;
  }
 }

 /* Hide SideBar and TOC */
@media all and (max-width: 830px) {
-  .post-preview {
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
-  }
-
  .pagination {
    justify-content: space-evenly;

@ -151,27 +192,7 @@
 /* Sidebar is visible */
@media all and (min-width: 831px) {
  #post-list {
-    margin-top: 3rem;
-
-    .post-preview {
-      padding: 0.5rem;
-
-      .post-meta {
-        .pin {
-          background: var(--pin-bg);
-          border-radius: 5px;
-          line-height: 1.4rem;
-          height: 1.3rem;
-          margin-top: 3px;
-          padding-left: 1px;
-          padding-right: 6px;
-
-          > span {
-            display: inline;
-          }
-        }
-      }
-    }
+    margin-top: 2.5rem;
  }

  .pagination {
@ -194,9 +215,9 @@
  } /* .pagination */
 }

-/* Panel hidden */
-@media all and (max-width: 1200px) {
+/* Panel is visible */
+@media all and (min-width: 1200px) {
  #post-list {
-    padding-right: 0;
+    padding-right: 0.5rem;
  }
 }
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@ -10,7 +10,7 @@
  }
 }

-@mixin btn-post-nav {
+%btn-post-nav {
  width: 50%;
  position: relative;
  border-color: var(--btn-border-color);
@ -27,6 +27,9 @@
 }

 .preview-img {
+  overflow: hidden;
+  aspect-ratio: 40 / 21;
+
  @extend %rounded;

  &:not(.no-bg) {
@ -36,7 +39,6 @@
  }

  img {
-    aspect-ratio: 40 / 21;
    -o-object-fit: cover;
    object-fit: cover;

@ -153,6 +155,16 @@ h1 + .post-meta {

 .post-tags {
  line-height: 2rem;
+
+  .post-tag {
+    background: var(--tag-bg);
+
+    &:hover {
+      @extend %link-hover;
+      @extend %tag-hover;
+      @extend %no-bottom-border;
+    }
+  }
 }

 .post-navigation {
@ -160,27 +172,25 @@ h1 + .post-meta {
  padding-bottom: 4rem;

  .btn {
-    @include btn-post-nav;
+    @extend %btn-post-nav;

-    color: var(--link-color);
+    &:not(:hover) {
+      color: var(--link-color);
+    }

    &:hover {
-      background: #2a408e;
-      color: #ffffff;
-      border-color: #2a408e;
+      &:not(.disabled)::before {
+        color: whitesmoke;
+      }
    }

    &.disabled {
-      @include btn-post-nav;
+      @extend %btn-post-nav;

      pointer-events: auto;
      cursor: not-allowed;
      background: none;
      color: gray;
-
-      &:hover {
-        border-color: none;
-      }
    }

    &.btn-outline-primary.disabled:focus {
@ -195,14 +205,12 @@ h1 + .post-meta {
    }

    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      border-radius: $base-radius 0 0 $base-radius;
      left: 0.5px;
    }

    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      border-radius: 0 $base-radius $base-radius 0;
      right: 0.5px;
    }
  }
@ -215,6 +223,15 @@ h1 + .post-meta {
  }
 } /* .post-navigation */

+@media (hover: hover) {
+  .post-navigation {
+    .btn,
+    .btn::before {
+      transition: all 0.35s ease-in-out;
+    }
+  }
+}
+
@-webkit-keyframes fade-up {
  from {
    opacity: 0;
@ -330,24 +347,10 @@ h1 + .post-meta {
    -webkit-box-orient: vertical;
  }

-  a:hover {
-    text-decoration: none;
-  }
-
  .card {
-    border-color: var(--card-border-color);
-    background-color: var(--card-bg);
-    box-shadow: 0 0 5px 0 var(--card-box-shadow);
-    transition: all 0.3s ease-in-out;
-
-    h3 {
+    h4 {
      @extend %text-color;
-    }
-
-    &:hover {
-      -webkit-transform: translate3d(0, -3px, 0);
-      transform: translate3d(0, -3px, 0);
-      box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
+      @extend %text-clip;
    }
  }
 }
--- a/_tabs/tags.md
+++ b/_tabs/tags.md
@ -1,5 +1,5 @@
 ---
 layout: tags
-icon: fas fa-tag
+icon: fas fa-tags
 order: 2
 ---
--- a/assets/404.html
+++ b/assets/404.html
@ -9,6 +9,8 @@ redirect_from:
  - /posts/
 ---

+{% include lang.html %}
+
 <div class="lead">
-  <p>{{site.data.locales[site.lang].not_found.statment }}</p>
+  <p>{{ site.data.locales[lang].not_found.statment }}</p>
 </div>
--- a/Show more
+++ b/Show more
				`@ -0,0 +1 @@`
				`<!-- A placeholder to allow defining custom metadata -->`