diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000000..cdded4641a8
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+# 2 space indentation
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+# Unix-style newlines with a newline ending every file
+end_of_line = lf
+insert_final_newline = true
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000000..262d6bd7b86
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,16 @@
+# Set default behavior to automatically normalize line endings.
+* text=auto
+
+# Force bash scripts to always use LF line endings so that if a repo is accessed
+# in Unix via a file share from Windows, the scripts will work.
+*.sh text eol=lf
+
+# Force batch scripts to always use CRLF line endings so that if a repo is accessed
+# in Windows via a file share from Linux, the scripts will work.
+*.{cmd,[cC][mM][dD]} text eol=crlf
+*.{bat,[bB][aA][tT]} text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
+*.ico binary
diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000000..bf8db4d09ef
--- /dev/null
+++ b/.github/CODE_OF_CONDUCT.md
@@ -0,0 +1,73 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at `cotes.chung@gmail.com`. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>
+
+For answers to common questions about this code of conduct, see
+<https://www.contributor-covenant.org/faq>
+
+[homepage]: https://www.contributor-covenant.org
\ No newline at end of file
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
new file mode 100644
index 00000000000..ca532e0af2c
--- /dev/null
+++ b/.github/CONTRIBUTING.md
@@ -0,0 +1,16 @@
+# How to Contribute
+
+I want to thank you for sparing a time to improve this project! Here are some guidelines for contributing：
+
+To ensure that the blog design is not confused, this project does not accept suggestions for design changes, such as color scheme, fonts, typography, etc. If your request is about an enhancement, it is recommended to first submit a [`Feature Request`](https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?labels=enhancement&template=feature_request.md) issue to discuss whether your idea fits the project. 
+
+Generally, contribute to the project by:
+
+1. Fork this project on GitHub and clone it locally.
+2. Create a new branch from `master` and give it a descriptive name (e.g., `my-new-feature`, `fix-a-bug`).
+3. After completing the development, commit and push to remote.
+4. Submit a new pull request.
+
+---
+
+:tada: Your volunteering will make the open source world more beautiful, thanks again! :tada:
\ No newline at end of file
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000000..a15c54f0f00
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+custom:
+  - https://www.buymeacoffee.com/coteschung
+  - https://cotes.gitee.io/alipay-wechat-donation
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 00000000000..11a9936e7f5
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,54 @@
+---
+name: Bug Report
+about: Create a report to help us improve
+---
+
+<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
+
+## Checklist
+<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+- [ ] I have read the [tutorials](https://chirpy.cotes.info/categories/tutorial/) and know the correct effect of the functional design.
+- [ ] There are no similar reports on existing issues (including closed ones).
+- [ ] I found the bug on the latest code of `master` branch.
+
+## Describe the bug
+<!-- A clear and concise description of what the bug is. -->
+
+### To Reproduce
+
+Steps to reproduce the behavior:
+<!--
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+-->
+
+### Expected behavior
+<!-- A clear and concise description of what you expected to happen. -->
+
+### Screenshots
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+### Software
+<!-- Please complete the following information -->
+- Ruby version: <!-- by running: `ruby -v` -->
+- Gem version: <!-- by running: `gem -v`-->
+- Bundler version: <!-- by running: `bundle -v`-->
+- Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->
+
+### Desktop
+<!-- If necessary, uncomment and fill in the following list:
+- OS: [e.g. macOS 10.15.6]
+- Browser: [e.g. Chrome 85.0.4183.83 (64-bit)]
+-->
+
+### Smartphone
+<!-- If necessary, uncomment and fill in the following list:
+- Device: [e.g. iPhone 6]
+- OS: [e.g. iOS 13.6.1]
+- Browser: [e.g. Chrome 22]
+-->
+
+### Additional context
+<!-- Add any other context about the problem here. -->
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 00000000000..f6ddfdaf08c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,30 @@
+---
+name: Feature Request
+about: Suggest an idea for this project
+labels: enhancement
+---
+
+<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
+
+## Checklist
+<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+- [ ] I have read the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/CONTRIBUTING.md).
+- [ ] There are no similar request on existing issues (including closed ones).
+- [ ] I have read the [project progress](https://github.com/cotes2020/jekyll-theme-chirpy/projects) and know the current progress of the project.
+- [ ] I was in the `master` branch of the latest code.
+
+
+## Is your feature request related to a problem? Please describe
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+
+## Describe the solution you'd like
+<!-- A clear and concise description of what you want to happen. -->
+
+
+## Describe alternatives you've considered
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+
+## Additional context
+<!-- Add any other context or screenshots about the feature request here. -->
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
new file mode 100644
index 00000000000..3c93a18a5a6
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/question.md
@@ -0,0 +1,19 @@
+---
+name: Question
+about: Ask what ever you want
+labels: question
+---
+
+<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
+
+## Checklist
+
+<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+
+- [ ] I have read the [tutorials](https://chirpy.cotes.info/categories/tutorial/) and know the correct effect of the functional design.
+- [ ] There are no similar question on existing issues (including closed ones).
+- [ ] I searched the Internet for related problems, but still couldn't solve it.
+- [ ] My question is based on the latest code of `master` branch.
+
+## Description
+<!-- Please describe your question in detial. -->
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 00000000000..9c1fbaf2b11
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,44 @@
+## Description
+
+<!-- 
+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
+
+<!-- 
+Please select the desired item checkbox and change it to "[x]", then delete options that are not relevant.
+-->
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Documentation update
+
+## How has this been tested
+
+<!-- 
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
+-->
+
+- [ ] I have run `bash ./tools/test.sh --build` (at the root of the project) locally and passed
+- [ ] I have tested this feature in the browser
+
+### Test Configuration
+
+- Browerser type & version:
+- Operating system:
+- Bundler version:
+- Ruby version:
+- Jekyll version:
+
+### Checklist
+<!-- Select checkboxes by change the "[ ]" to "[x]" -->
+- [ ] My code follows the [Google style guidelines](https://google.github.io/styleguide/)
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] Any dependent changes have been merged and published in downstream modules
diff --git a/.github/stale.yml b/.github/stale.yml
new file mode 100644
index 00000000000..019fa16f413
--- /dev/null
+++ b/.github/stale.yml
@@ -0,0 +1,17 @@
+# Clean up the stale issues
+
+daysUntilStale: 30
+daysUntilClose: 1
+
+exemptLabels:
+  - in progress
+  - pending
+
+staleLabel: stale
+
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+
+closeComment: false
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 00000000000..907b905e800
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,47 @@
+name: 'Continuous Integration'
+on:
+  push:
+    branches-ignore:
+      - 'production'
+    tags-ignore:
+      - '*'
+    paths-ignore:
+      - '.github/**'
+      - '!.github/workflows/ci.yml'
+      - '.travis.yml'
+      - '.gitignore'
+      - 'docs/**'
+      - 'README.md'
+      - 'LICENSE'
+  pull_request:
+    paths:
+      - '**'
+
+jobs:
+  ci:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.7
+          bundler-cache: true
+
+      - name: Build Site
+        env:
+          JEKYLL_ENV: production
+        run: |
+          bundle exec jekyll b
+
+      - name: Test Site
+        run: |
+          bash tools/test.sh
diff --git a/.github/workflows/issue-pr-interceptor.yml b/.github/workflows/issue-pr-interceptor.yml
new file mode 100644
index 00000000000..c46d79ba66e
--- /dev/null
+++ b/.github/workflows/issue-pr-interceptor.yml
@@ -0,0 +1,20 @@
+name: "Intercept bad issue/PRs"
+
+on:
+  issues:
+    types: [opened]
+  pull_request:
+    types: [opened]
+
+jobs:
+  autoclose:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Auto close issues/pr that did not follow template
+      uses: roots/issue-closer@v1.1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-pattern: "(\\[x\\]|\\[X\\]) I have read"
+        issue-close-message: ":wave: Hi @${issue.user.login},\n\nThis issue is being automatically closed because it does not follow the issue template."
+        pr-pattern: "(\\[x\\]|\\[X\\]) (Bug fix|New feature|Breaking change|Documentation update)|@dependabot"
+        pr-close-message: ":wave: Hi @${pull_request.user.login},\n\nThis PR is being automatically closed because it does not follow the PR template."
diff --git a/.github/workflows/pages-deploy.yml.hook b/.github/workflows/pages-deploy.yml.hook
new file mode 100644
index 00000000000..aa90027ff83
--- /dev/null
+++ b/.github/workflows/pages-deploy.yml.hook
@@ -0,0 +1,53 @@
+name: 'Automatic build'
+on:
+  push:
+    branches:
+      - master
+    paths-ignore:
+      - .gitignore
+      - README.md
+      - LICENSE
+
+jobs:
+  continuous-delivery:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.7
+          bundler-cache: true
+
+      - name: Check baseurl
+        run: |
+          baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
+          if [[ -n $baseurl ]]; then
+            echo "BASE_URL=$baseurl" >> $GITHUB_ENV
+          fi
+
+      - name: Build Site
+        env:
+          JEKYLL_ENV: production
+        run: |
+          bundle exec jekyll b -d "_site$BASE_URL"
+
+      - name: Test Site
+        run: |
+          bash tools/test.sh
+
+      - name: Deploy
+        run: |
+          if [[ -n $BASE_URL ]]; then
+            mv _site$BASE_URL _site-rename
+            rm -rf _site
+            mv _site-rename _site
+          fi
+
+          bash tools/deploy.sh
diff --git a/.gitignore b/.gitignore
index 6c33261ad43..05db64a29c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,17 +1,15 @@
 # hidden files
 .*
+!.github
 
-# python compiled files
-*.pyc
-
-# jekyll debug
+# bundler cache
 _site
-
-# Jeykll Gemfile.lock
+vendor
 Gemfile.lock
 
-# yui-compressor
-*.jar
+# rubygem
+*.gem
 
-# bundle cache
-vendor
+# npm dependencies
+node_modules
+package-lock.json
diff --git a/_data/updates.yml b/.nojekyll
similarity index 100%
rename from _data/updates.yml
rename to .nojekyll
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 00000000000..f242a412b8f
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,56 @@
+os: linux
+dist: bionic
+
+language: minimal
+
+jobs:
+  include:
+
+    - name: CD
+      language: ruby
+      rvm: 2.7.0
+
+      addons:
+        apt:
+          packages:
+            # required to avoid SSL error (for htmlproofer)
+            - libcurl4-openssl-dev
+
+      cache:
+        directories:
+          - $TRAVIS_BUILD_DIR/vendor/bundle
+
+      before_install:
+        # match the Gemfile.lock, travis' bundler is 2.1.2
+        - gem install bundler:2.2.4
+        - bundle config path 'vendor/bundle'
+
+      install:
+        # overriding to drop the travis `--development` flag
+        - bundle install --jobs=3 --retry=3
+
+      script:
+        - eval "$BUILD_CMD"
+
+      git:
+        depth: false # for posts' lastmod
+
+    - name: Flush Starter
+      script:
+        - eval "$FLUSH_STARTER"
+
+before_script:
+  - git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
+
+branches:
+  only: /.*-stable$/
+
+notifications:
+  email:
+    recipients:
+      - secure: "fFLqX7uOzFA8RE2AUFlU1mmxMw+rdV6DnODJ/1Gl+3ecNtrv5LeH3c5a4a5ShQqYTrx9BPfD40VRN7UB+lzOdXiWLI9yDGRPPxGG26/WfrKpdQPZilc8zAOEeDnLAJeGZLsUvgmNb3KCXW6S8NPqqh34CfWcTIzjCARhRgO33wcs8X5wP5cugtNqO5Ew/pUcfWcmiuXNX0GNT6l+nL5A7yN+IO5mRHqSRmlfYd5EHhGMTIL4La+Cd1CNv1m4Dl0Ah2cDeJwi5wLnVbqAgunLhAYmDtxIOCVYMTBrP37UiNe/7QeFelyJfODsmMg1mx3WCykbXydC753WVoAlTg6nNoeeI9fmK+/tuLK+sx/KnYfTVGBXQYq39DyV/2o/IfCzEAKImlzFKGD8R13+ddu4B5UML+cby5KBvhTKIGaC5tKoe39z/31UPpy11/EHMCof2BUOzIgu5Hsv4OSNJlw3oRE31oOPn8xP4e7uWR8bRUhAgzN0Cn0ht+UfpemfGAXrp0M3IXQdc9L4azEFqxRhivMTLK/P6INay7IM+DJ30Ht2dWylGw/sxcRTqyNm3YomJQnXIO4xeqTSLulWr80FFHTys3JEDJYrcKvJmpwLFEAOZtwKsZ6ZShrOIA4LE5fgQtakH3ZLJG9a7jVSlMcNIfaSKgjdDQOe6CoRQL7KouA="
+    on_success: never
+
+env:
+  global:
+    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
diff --git a/404.html b/404.html
index a708b68e110..d19e5c30870 100644
--- a/404.html
+++ b/404.html
@@ -1,19 +1,11 @@
 ---
-# The 404 page
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 layout: page
 title: "404: Page not found"
 permalink: /404.html
 
-redirect_from:  # part of site.sitemap_exclude
+redirect_from:
   - /norobots/
   - /assets/
-  - /tabs/
-  - /categories/
-  - /tags/
   - /posts/
 
 dynamic_title: true
@@ -21,5 +13,9 @@
 
 <div class="lead">
   <p>Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. </p>
-  <p><a href="{{ site.baseurl }}/">Head back Home</a> to try finding it again, or search for it on the <a href="{{ site.baseurl }}/tabs/archives">Archives page</a>.</p>
-</div>
\ No newline at end of file
+  <p>
+    <a href="{{ '/' | relative_url }}">Head back Home</a>
+    to try finding it again, or search for it on the
+    <a href="{{ 'archives' | relative_url }}">Archives page</a>.
+  </p>
+</div>
diff --git a/Gemfile b/Gemfile
index 7a2f0504e89..6438466423f 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,14 +1,19 @@
+# frozen_string_literal: true
+
 source "https://rubygems.org"
 
-gem "jekyll", ">=3.8.6"
+gemspec
 
-# Official Plugins
-group :jekyll_plugins do
-  gem "jekyll-paginate"
-  gem "jekyll-redirect-from"
-  gem "jekyll-seo-tag", "~> 2.6.1"
+group :test do
+  gem "html-proofer", "~> 3.18"
 end
 
-group :test do
-  gem "html-proofer"
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do
+  gem "tzinfo", "~> 1.2"
+  gem "tzinfo-data"
 end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
diff --git a/README.md b/README.md
index 3c1a32e7527..e213eb4b809 100644
--- a/README.md
+++ b/README.md
@@ -1,261 +1,217 @@
 # Chirpy
 
-🌏 English • [简体中文](docs/README_zh-CN.md)
+Language: English | [简体中文](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md)
 
+[![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
 [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b)](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
 [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
 [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
-A minimal, sidebar, responsive web design Jekyll theme, focusing on text presentation, aim to help you easily record and share your knowledge. [Live Demo »](https://chirpy.cotes.info)
+A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation. Designed to help you record and share your knowledge easily. [Live Demo »](https://chirpy.cotes.info)
 
-[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
-
-## Table of Contents
-
-* [Features](#features)
-* [Installing](#installing)
-* [Usage](#usage)
-* [Contributing](#contributing)
-* [Credits](#credits)
-* [Support](#support)
-* [License](#license)
+[![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png)](https://chirpy.cotes.info)
 
 ## Features
 
-* Pinned Posts
-* Configurable theme mode
-* Double-level Categories
-* Last modified date for posts
-* Table of Contents
-* Automatically recommend related posts
-* Syntax highlighting
-* Mathematical expressions
-* Search
-* Atom Feeds
-* Disqus Comments
-* Google Analytics
-* GA Pageviews reporting (Advanced)
-* SEO and Performance Optimization
+- Pinned Posts
+- Configurable theme mode
+- Double-level Categories
+- Last modified date for posts
+- Table of Contents
+- Automatically recommend related posts
+- Syntax highlighting
+- Mathematical expressions
+- Mermaid diagram & flowchart
+- Search
+- Atom Feeds
+- Disqus Comments
+- Google Analytics
+- GA Pageviews reporting (Advanced)
+- SEO and Performance Optimization
 
-## Installing
+## Prerequisites
 
-### Prerequisites
+Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of basic environment (`Ruby`, `RubyGems` and `Bundler`). 
+## Installation
 
-To improve the writing experience, we need to use some script tools. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
+There are two ways to get the theme:
 
-* Debian
+- **Install from RubyGems** - Easy to update, isolate irrelevant project files so you can focus on writing.
+- **Fork on GitHub** - Convenient for custom development, but difficult to update, only suitable for web developers.
 
-```console
-$ sudo apt-get install coreutils
-```
+### Installing the Theme Gem
 
-* macOS
+Add this line to your Jekyll site's `Gemfile`:
 
-```console
-$ brew install coreutils
+```ruby
+gem "jekyll-theme-chirpy"
 ```
 
+And add this line to your Jekyll site's `_config.yml`:
 
-### Jekyll Plugins
+```yaml
+theme: jekyll-theme-chirpy
+```
 
-[Fork **Chirpy** from GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/fork), then clone your forked repo to local:
+And then execute:
 
 ```console
-$ git clone git@github.com:USER/jekyll-theme-chirpy.git -b master
+$ bundle
 ```
 
-and replace the `USER` above to your GitHub username.
+Finally, copy the required files from the theme's gem (for detailed files, see [starter project][starter]) to your Jekyll site.
 
-The first time you run or build the project on local machine, perform the installation of Jekyll plugins. Go to the root of repo and run:
+> **Hint**: To locate the installed theme’s gem, execute:
+>
+> ```console
+> $ bundle info --path jekyll-theme-chirpy
+> ```
 
-```terminal
-$ bundle install
-```
+Or you can [**use the starter template**][use-starter] to create a Jekyll site to save time copying files from theme's gem. We have prepared everything for you there!
 
-`bundle` will automatically install all the dependent Jekyll Plugins that listed in the `Gemfile`.
+### Fork on GitHub
 
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and then clone your fork to local. (Please note that the default branch code is in development.  If you want the blog to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.)
 
-## Usage
-
+Install gem dependencies by:
 
-### Directory Structure
-
-The main files and related brief introductions are listed below.
-
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-├── .travis.yml     # remove it
-├── .github         # remove this, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── tools           # script tools
-├── docs
-├── feed.xml
-├── index.html
-├── robots.txt
-└── sitemap.xml
+```console
+$ bundle
 ```
 
+And then execute:
 
-As mentioned above, some files or directories should be removed from your repo:
-
-- .travis.yml
-- .github
+```console
+$ bash tools/init.sh
+```
 
+> **Note**: If you don't plan to deploy your site on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
 
-### Configuration
+What it does is:
 
-Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
+1. Remove some files or directories from your repository:
+    - `.travis.yml`
+    - files under `_posts`
+    - folder `docs`
 
-* `url`
-	
-	Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
+2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`.
 
+3. Automatically create a commit to save the changes.
 
-* `avatar`
-    
-    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one(a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as small as possible(may be *<https://tinypng.com/>* will help).
+## Usage
 
-* `timezone`
+### Configuration
 
-    To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
+Update the variables of `_config.yml` as needed. Some of them are typical options:
 
-* `theme_mode`
-  
-	There are three options for the theme color scheme:
-	
-	- **dual** 	- The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
+- `url`
+- `avatar`
+- `timezone`
+- `lang`
 
-	- **dark**	- Always show dark mode.
-	- **light**	- Always show light mode.
+### Running Local Server
 
+You may want to preview the site contents before publishing, so just run it by:
 
-###  Run Locally
+```console
+$ bundle exec jekyll s
+```
 
-You may want to preview the site content before publishing, so just run the script tool:
+Or run the site on Docker with the following command:
 
 ```terminal
-$ bash tools/run.sh
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
 ```
 
-Open a modern browser and visit at <http://localhost:4000>.
-
-Few days later, you may find that the file modification(e.g. edits to a post) does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine. Type `-h` for more information.
+Open a browser and visit to _<http://localhost:4000>_.
 
-###  Deploying to GitHub Pages
+### Deployment
 
-Before the deployment begins, checkout the file `_config.yml` and make sure that the `url` has been configured. What's more, if you prefer the [Project site on GitHub](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and also use the default domain `<username>.github.io`, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
+Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash, e.g, `/project-name`.
 
-#### Option 1: Built by GitHub Pages
+Now you can choose ONE of the following methods to deploy your Jekyll site.
 
-By deploying the site in this way, you're allowed to push the source code directly to the remote.
+#### Deploy on GitHub Pages
 
-> **Note**: If you want to use any third-party Jekyll plugins that not in [this list](https://pages.github.com/versions/), stop reading the current approach and go to [*Option 2: Build locally*](#option-2-build-locally).
+For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GH Pages service.
 
-**1**. Rename the repository to:
+Quickly check the files needed for GitHub Actions build:
 
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
+- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+- Ensure your Jekyll site has file `tools/test.sh` and `tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
 
-**2**. Commit the changes of the repo first, then run the publish script:
+And then rename your repoistory to `<GH-USERNAME>.github.io` on GitHub.
 
-```console
-$ bash tools/publish.sh
-```
-
-> Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
-
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit, and then push to `origin/master`. Its output is similar to the following log:
-
-```terminal
-[INFO] Success to update lastmod for 4 post(s).
-[INFO] Succeed! 3 category-pages created.
-[INFO] Succeed! 4 tag-pages created.
-[INFO] Published successfully!
-```
-
-**3**. Go to GitHub website and enable GitHub Pages service for the repo.
-
-**4**. Check it out:
-
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
+Now publish your Jekyll site by:
 
+1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
 
-#### Option 2: Build Locally
+2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_:
 
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts won't work. If you want to use any another plugins that not in the [whitelist](https://pages.github.com/versions/), **you have to generate the site locally rather than on GitHub Pages**.
+    ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
 
-**1**. Browse to GitHub website, create a brand new repo named: 
+3. Visit your website at the address indicated by GitHub.
 
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
+#### Deploy on Other Platforms
 
-and clone it.
+On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Actions**. Therefore, we should build the site locally (or on some other 3rd-party CI platform) and then put the site files on the server.
 
-**2**. In the root of the source project, build your site by:
+Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/build.sh -d /path/to/local/project/
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-The generated static files will be placed in the root of `/path/to/local/project`. Commit and push the changes to the `master` branch on GitHub.
+Or build the site with Docker by:
 
-**3**. Go to GitHub website and enable Pages service for the new repository.
-
-**4**. Visit at:
-
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
-
-#### Finishing work
-
-No matter which way you choose to deploy the website on GitHub, please enforce the `HTTPS` for it. See official docs: [Securing your GitHub Pages site with HTTPS](https://help.github.com/en/github/working-with-github-pages/securing-your-github-pages-site-with-https).
+```terminal
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
+```
 
+Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.
 
-### Documentation
+## Documentation
 
-For more details and the better reading experience, please check out the [tutorial in demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
+For more details and the better reading experience, please check out the [tutorials on demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
 
 ## Contributing
 
 The old saying, "Two heads are better than one." Consequently, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
 
-
 ## Credits
 
-This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools(their copyright information can be found in the relevant files).
+This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files).
 
-:tada:Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
+:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
 
+Also, thank [JetBrains][jb] for providing the open source license.
 
-## Support
+## Sponsoring
 
-If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart:Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
+If you like this theme or find it helpful, please consider sponsoring me, because it will encourage and help me better maintain the project, I will be very grateful!
 
+[![Buy Me a Coffee](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ff813f?logo=buy-me-a-coffee&logoColor=white)](https://www.buymeacoffee.com/coteschung)
+[![Wechat Pay](https://img.shields.io/badge/-Tip%20Me%20on%20WeChat-brightgreen?logo=wechat&logoColor=white)][cn-donation]
+[![Alipay](https://img.shields.io/badge/-Tip%20Me%20on%20Alipay-blue?logo=alipay&logoColor=white)][cn-donation]
 
 ## License
 
-This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
\ No newline at end of file
+This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
+
+[starter]: https://github.com/cotes2020/chirpy-starter
+[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
+
+<!-- ReadMe links -->
+
+[jb]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
+[cn-donation]: https://cotes.gitee.io/alipay-wechat-donation/
diff --git a/_config.dev.yml b/_config.dev.yml
index cb19ffc52b2..b32930a7f91 100644
--- a/_config.dev.yml
+++ b/_config.dev.yml
@@ -1,52 +1,51 @@
-# The Site Settings
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT licensed
+# The Site Configuration
 
+# Import the theme
+theme: jekyll-theme-chirpy
 
-# jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
-#--------------------------
+# Only if your site type is GitHub Project sites and doesn't have a custom domain,
+# change below value to '/projectname'.
+baseurl: ''
+
+# the HTML language tag › https://www.w3.org/International/questions/qa-choosing-language-tags
+lang: en-US
+
+# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
+timezone: America/Los_Angeles
 
-title: Garage Time @ The Aquarium      # the main title
+# jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
+# --------------------------
+title: Garage Time @ The Aquarium # the main title
 
 tagline: Snippets, tutorials and mini projects.  # it will display as the sub-title
 
 description: >-                        # used by seo meta and the atom feed
-  Tracking garage time projects and code snippets.
+   Tracking garage time projects and code snippets.
 
-# Replace with the website url, e.g. 'https://username.github.io'
+# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
 url: 'https://localhost:4000'
 
-author: CYN                  # change to your full name
-
-avatar: /assets/img/sample/avatar.png   # support internet resources
-
 github:
-  username: ChiamYu             # change to your github username
+  username: ChiamYu # change to your github username
 
 twitter:
   username: twitter_username            # change to your twitter username
 
 social:
-  name: CYN                  # it will shows as the copyright owner in Footer
-  email: ngchiamyu@gmail.com            # change to your email address
+  # Change to your full name.
+  # It will be displayed as the default author of the posts and the copyright owner in the Footer
+  name: CYN
+  email: ng.chiam.yu+git@gmail.com # change to your email address
   links:
     # The first element serves as the copyright owner's link
-    - https://twitter.com/username      # change to your twitter homepage
-    - https://github.com/username       # change to your github homepage
+    - https://twitter.com      # change to your twitter homepage
+    - https://github.com/ChiamYu       # change to your github homepage
+    # Uncomment below to add more social links
+    # - https://www.facebook.com/username
+    # - https://www.linkedin.com/in/username
 
 google_site_verification: google_meta_tag_verification # change to your verification string
-
-#--------------------------
-
-
-# Only if your site type is GitHub Project sites and doesn't have a custom domain,
-# change below value to '/projectname'.
-baseurl: ''
-
-# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
-timezone: America/Los_Angeles
+# --------------------------
 
 google_analytics:
   id: ''          # Fill with your Google Analytics ID
@@ -59,36 +58,44 @@ google_analytics:
     proxy_endpoint: ''
     cache: false  # pv data local cache, good for the users from GFW area.
 
-disqus:
-  comments: false  # boolean type, the global switch for posts comments.
-  shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
-
-
-# Prefer color scheme setting, available values:
+# Prefer color scheme setting.
 #
-#     dual   - Follow the system prefer color by default, and a toggle will display
-#              in the left bottom of Sidebar, which used for switch the theme between dark and light.
+# Note: Keep empty will follow the system prefer color by default,
+# and there will be a toggle to switch the theme between dark and light
+# on the bottom left of the sidebar.
 #
-#     light  - Use the light color scheme
+# Available options:
 #
+#     light  - Use the light color scheme
 #     dark   - Use the dark color scheme
 #
-theme_mode: light
+theme_mode: light  # [light|dark]
+
+# The CDN endpoint for images.
+# Notice that once it is assigned, the CDN url
+# will be added to all image (site avatar & posts' images) paths starting with '/'
+#
+# e.g. 'https://cdn.com'
+img_cdn: ''
+
+# the avatar on sidebar, support local or CORS resources
+avatar: /assets/img/sample/avatar.png
 
-# boolean type, global switch for ToC in posts.
+# boolean type, the global switch for ToC in posts.
 toc: true
 
-paginate: 10
+disqus:
+  comments: false  # boolean type, the global switch for posts comments.
+  shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
-markdown: kramdown
+paginate: 10
 
-highlighter: rouge
+# ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
-  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
-    css_class: 'highlight'
+  syntax_highlighter_opts:   # Rouge Options › https://github.com/jneen/rouge#full-options
+    css_class: highlight
     # default_lang: console
     span:
       line_numbers: false
@@ -97,23 +104,24 @@ kramdown:
       start_line: 1
 
 # DO NOT change this unless you're a Pro user on Jekyll and Web development,
-# or you think you're smart enough to change other relevant URLs within this template.
+# Or you think you're smart enough to change other relevant URLs within this template.
 permalink: /posts/:title/
 
+collections:
+  tabs:
+    output: true
+    sort_by: order
+
+
 defaults:
   -
     scope:
-      path: ""          # An empty string here means all files in the project
+      path: ''          # An empty string here means all files in the project
       type: posts
     values:
       layout: post
       comments: true    # Enable comments in posts.
       toc: true         # Display TOC column in posts.
-      location: Post
-      breadcrumb:
-        -
-          label: Posts
-          url: /
   -
     scope:
       path: _drafts
@@ -121,77 +129,45 @@ defaults:
       comments: false
   -
     scope:
-      path: tags
-    values:
-      tab_active: Tags
-      location: Tag
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Tags
-          url: /tabs/tags/
-  -
-    scope:
-      path: categories
-    values:
-      tab_active: Categories
-      location: Category
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Categories
-          url: /tabs/categories/
-  -
-    scope:
-      path: tabs
+      path: ''
+      type: tabs             # see `site.collections`
     values:
       layout: page
+      permalink: /:title/
       dynamic_title: true    # Hide title in mobile screens.
-      breadcrumb:
-        -
-          label: Home
-          url: /
-
 
 sass:
-  sass_dir: /assets/css
   style: compressed
 
 compress_html:
   clippings: all
-  comments: ["<!-- ", " -->"]
-  endings: [html, head, body, dt, dd, rt, rp,
-            optgroup, option, colgroup, caption,
-            thead, tbody, tfoot, tr, td, th]
+  comments: all
+  endings: all
   profile: false
   blanklines: false
   ignore:
-    envs: []
+    envs: [development]
 
 exclude:
-  - vendor        # Avoid Jekyll mistakenly read the vendor directory on Travis-CI's VM .
-  - Gemfile.lock
+  - vendor
   - Gemfile
+  - Gemfile.lock
+  - '*.gem'
+  - '*.gemspec'
   - tools
   - docs
   - README.md
   - LICENSE
-
-sitemap_exclude:  # Sitemap will exclude the following items.
-  fuzzy:
-    - /assets/
-  accurate:
-    - /norobots/
-    - /tabs/
-    - /categories/
-    - /tags/
-    - /posts/
-    - 404.html
-    - feed.xml
-    - sitemap.xml
-    - robots.txt
-    - redirects.json
+  - gulpfile.js
+  - node_modules
+  - package.json
+  - package-lock.json
+
+jekyll-archives:
+  enabled: [categories, tags]
+  layouts:
+    category: category
+    tag: tag
+  permalinks:
+    tag: /tags/:name/
+    category: /categories/:name/
diff --git a/_config.yml b/_config.yml
index 2dd23a7450f..43e2270cc1c 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,52 +1,51 @@
-# The Site Settings
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT licensed
+# The Site Configuration
 
+# Import the theme
+theme: jekyll-theme-chirpy
 
-# jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
-#--------------------------
+# Only if your site type is GitHub Project sites and doesn't have a custom domain,
+# change below value to '/projectname'.
+baseurl: ''
+
+# the HTML language tag › https://www.w3.org/International/questions/qa-choosing-language-tags
+lang: en-US
+
+# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
+timezone: America/Los_Angeles
 
-title: Garage Time @ The Aquarium      # the main title
+# jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
+# --------------------------
+title: Garage Time @ The Aquarium # the main title
 
 tagline: Snippets, tutorials and mini projects.  # it will display as the sub-title
 
 description: >-                        # used by seo meta and the atom feed
-  Tracking garage time projects and code snippets.
+   Tracking garage time projects and code snippets.
 
-# Replace with the website url, e.g. 'https://username.github.io'
+# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
 url: 'https://chiamyu.github.io'
 
-author: CYN                  # change to your full name
-
-avatar: /assets/img/sample/avatar.png   # support internet resources
-
 github:
-  username: ChiamYu             # change to your github username
+  username: ChiamYu # change to your github username
 
 twitter:
   username: twitter_username            # change to your twitter username
 
 social:
-  name: CYN                  # it will shows as the copyright owner in Footer
-  email: ngchiamyu@gmail.com            # change to your email address
+  # Change to your full name.
+  # It will be displayed as the default author of the posts and the copyright owner in the Footer
+  name: CYN
+  email: ng.chiam.yu+git@gmail.com # change to your email address
   links:
     # The first element serves as the copyright owner's link
-    - https://twitter.com/username      # change to your twitter homepage
-    - https://github.com/username       # change to your github homepage
+    - https://twitter.com      # change to your twitter homepage
+    - https://github.com/ChiamYu       # change to your github homepage
+    # Uncomment below to add more social links
+    # - https://www.facebook.com/username
+    # - https://www.linkedin.com/in/username
 
 google_site_verification: google_meta_tag_verification # change to your verification string
-
-#--------------------------
-
-
-# Only if your site type is GitHub Project sites and doesn't have a custom domain,
-# change below value to '/projectname'.
-baseurl: ''
-
-# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
-timezone: America/Los_Angeles
+# --------------------------
 
 google_analytics:
   id: ''          # Fill with your Google Analytics ID
@@ -59,36 +58,44 @@ google_analytics:
     proxy_endpoint: ''
     cache: false  # pv data local cache, good for the users from GFW area.
 
-disqus:
-  comments: false  # boolean type, the global switch for posts comments.
-  shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
-
-
-# Prefer color scheme setting, available values:
+# Prefer color scheme setting.
 #
-#     dual   - Follow the system prefer color by default, and a toggle will display
-#              in the left bottom of Sidebar, which used for switch the theme between dark and light.
+# Note: Keep empty will follow the system prefer color by default,
+# and there will be a toggle to switch the theme between dark and light
+# on the bottom left of the sidebar.
 #
-#     light  - Use the light color scheme
+# Available options:
 #
+#     light  - Use the light color scheme
 #     dark   - Use the dark color scheme
 #
-theme_mode: light
+theme_mode: light  # [light|dark]
+
+# The CDN endpoint for images.
+# Notice that once it is assigned, the CDN url
+# will be added to all image (site avatar & posts' images) paths starting with '/'
+#
+# e.g. 'https://cdn.com'
+img_cdn: ''
+
+# the avatar on sidebar, support local or CORS resources
+avatar: /assets/img/sample/avatar.png
 
-# boolean type, global switch for ToC in posts.
+# boolean type, the global switch for ToC in posts.
 toc: true
 
-paginate: 10
+disqus:
+  comments: false  # boolean type, the global switch for posts comments.
+  shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
-markdown: kramdown
+paginate: 10
 
-highlighter: rouge
+# ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
-  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
-    css_class: 'highlight'
+  syntax_highlighter_opts:   # Rouge Options › https://github.com/jneen/rouge#full-options
+    css_class: highlight
     # default_lang: console
     span:
       line_numbers: false
@@ -97,23 +104,24 @@ kramdown:
       start_line: 1
 
 # DO NOT change this unless you're a Pro user on Jekyll and Web development,
-# or you think you're smart enough to change other relevant URLs within this template.
+# Or you think you're smart enough to change other relevant URLs within this template.
 permalink: /posts/:title/
 
+collections:
+  tabs:
+    output: true
+    sort_by: order
+
+
 defaults:
   -
     scope:
-      path: ""          # An empty string here means all files in the project
+      path: ''          # An empty string here means all files in the project
       type: posts
     values:
       layout: post
       comments: true    # Enable comments in posts.
       toc: true         # Display TOC column in posts.
-      location: Post
-      breadcrumb:
-        -
-          label: Posts
-          url: /
   -
     scope:
       path: _drafts
@@ -121,77 +129,45 @@ defaults:
       comments: false
   -
     scope:
-      path: tags
-    values:
-      tab_active: Tags
-      location: Tag
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Tags
-          url: /tabs/tags/
-  -
-    scope:
-      path: categories
-    values:
-      tab_active: Categories
-      location: Category
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Categories
-          url: /tabs/categories/
-  -
-    scope:
-      path: tabs
+      path: ''
+      type: tabs             # see `site.collections`
     values:
       layout: page
+      permalink: /:title/
       dynamic_title: true    # Hide title in mobile screens.
-      breadcrumb:
-        -
-          label: Home
-          url: /
-
 
 sass:
-  sass_dir: /assets/css
   style: compressed
 
 compress_html:
   clippings: all
-  comments: ["<!-- ", " -->"]
-  endings: [html, head, body, dt, dd, rt, rp,
-            optgroup, option, colgroup, caption,
-            thead, tbody, tfoot, tr, td, th]
+  comments: all
+  endings: all
   profile: false
   blanklines: false
   ignore:
-    envs: []
+    envs: [development]
 
 exclude:
-  - vendor        # Avoid Jekyll mistakenly read the vendor directory on Travis-CI's VM .
-  - Gemfile.lock
+  - vendor
   - Gemfile
+  - Gemfile.lock
+  - '*.gem'
+  - '*.gemspec'
   - tools
   - docs
   - README.md
   - LICENSE
-
-sitemap_exclude:  # Sitemap will exclude the following items.
-  fuzzy:
-    - /assets/
-  accurate:
-    - /norobots/
-    - /tabs/
-    - /categories/
-    - /tags/
-    - /posts/
-    - 404.html
-    - feed.xml
-    - sitemap.xml
-    - robots.txt
-    - redirects.json
+  - gulpfile.js
+  - node_modules
+  - package.json
+  - package-lock.json
+
+jekyll-archives:
+  enabled: [categories, tags]
+  layouts:
+    category: category
+    tag: tag
+  permalinks:
+    tag: /tags/:name/
+    category: /categories/:name/
diff --git a/_data/contact.yml b/_data/contact.yml
index c6f6460173c..1cd8496442a 100644
--- a/_data/contact.yml
+++ b/_data/contact.yml
@@ -1,8 +1,4 @@
 #  The contact options.
-#  v2.3
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
 
 -
   type: github
@@ -21,11 +17,14 @@
 
 # Uncomment and complete the url below to enable more contact options
 # -
+#   type: mastodon
 #   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
 #   url:  ''                  # Fill with your mastodon account page
 # -
+#   type: linkedin
 #   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>
 #   url:  ''                  # Fill with your Linkedin homepage
 # -
+#   type: stack-overflow
 #   icon: 'fab fa-stack-overflow'
 #   url:  ''                  # Fill with your stackoverflow homepage
diff --git a/_data/date_format.yml b/_data/date_format.yml
index 3040be7ecc0..3c7bc798d0b 100644
--- a/_data/date_format.yml
+++ b/_data/date_format.yml
@@ -1,9 +1,7 @@
 #  The date format
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
 
 tooltip: "%a, %b %e, %Y, %l:%M %p %z"
-post: "%b %e, %Y"
\ No newline at end of file
+
+post:
+  long: "%b %e, %Y"
+  short: "%b %e"
diff --git a/_data/label.yml b/_data/label.yml
index 53761bc7bd6..11cccf4262a 100644
--- a/_data/label.yml
+++ b/_data/label.yml
@@ -1,19 +1,19 @@
 # The label text of site.
-#  v2.0
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
-
 
 panel:
-  lastmod: "Recent Update"
-  trending_tags: "Trending Tags"
-  toc: "Contents"
+  lastmod: Recent Update
+  trending_tags: Trending Tags
+  toc: Contents
 
 post:
-  relate_posts: "Further Reading"
+  relate_posts: Further Reading
+  share: Share
   button:
     next: Newer
     previous: Older
 
-search_hint: "Search"   # text show on search bar
\ No newline at end of file
+search_hint: Search   # text show on search bar
+
+pin_prompt: Pinned    # pinned prompt
+
+read_time_unit: min   # see posts' time to read
diff --git a/_data/rights.yml b/_data/rights.yml
index bedc283d9db..f6fdd428488 100644
--- a/_data/rights.yml
+++ b/_data/rights.yml
@@ -1,10 +1,4 @@
-#  License data.
-#
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
+#  License data
 
 license:
   name: CC BY 4.0
@@ -14,4 +8,4 @@ brief: Some rights reserved.
 
 verbose: >-
   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.
\ No newline at end of file
+  under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
diff --git a/_data/share.yml b/_data/share.yml
index 7bb7d8d3e64..ecd1b0d8d59 100644
--- a/_data/share.yml
+++ b/_data/share.yml
@@ -1,12 +1,5 @@
 #  Sharing options at the bottom of the post.
 #  Icons from <https://fontawesome.com/>
-#
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
-label: "Share"
 
 platforms:
   -
diff --git a/_data/tabs.yml b/_data/tabs.yml
deleted file mode 100644
index 0f658410900..00000000000
--- a/_data/tabs.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-#  The tab data.
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
-
--
-  name: Home
-  icon: "fas fa-home"
--
-  name: Categories
-  icon: "fas fa-stream"
-  path: tabs
-  url: categories
--
-  name: "Tags"
-  icon: "fas fa-tags"
-  path: tabs
-  url: tags
--
-  name: "Archives"
-  path: tabs
-  url: archives
-  icon: "fas fa-archive"
--
-  name: "About"
-  icon: "fas fa-info"
-  path: tabs
-  url: about
\ No newline at end of file
diff --git a/_includes/css-selector.html b/_includes/css-selector.html
index 53e53db9991..a333c3b32f8 100644
--- a/_includes/css-selector.html
+++ b/_includes/css-selector.html
@@ -1,54 +1,10 @@
 <!--
   CSS selector for site.
-  Chirpy v2.3
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT Licensed
 -->
 
-{% if page.layout == 'home' %}
-  <link rel="preload" href="{{ '/assets/css/home.css' | relative_url }}" as="style">
-  <link rel="stylesheet" href="{{ '/assets/css/home.css' | relative_url }}">
-
-{% elsif page.layout == 'page' %}
-
-  {% if page.type == 'categories' %}
-
-    <link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
-
-  {% elsif page.type == 'tags' %}
-
-    <link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
-
-  {% elsif page.type == 'archives' %}
-
-    <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
-
-  {% else %}
-
-    <link rel="preload" href="{{ '/assets/css/page.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/page.css' | relative_url }}">
-
-  {% endif %}
-
-{% elsif page.layout == 'category' or page.layout == 'tag' %}
-
-  <link rel="preload" href="{{ '/assets/css/category-tag.css' | relative_url }}" as="style">
-  <link rel="stylesheet" href="{{ '/assets/css/category-tag.css' | relative_url }}">
-
-{% elsif page.layout == 'post' %}
-
-  <link rel="preload" as="style" href="{{ '/assets/css/post.css' | relative_url }}">
-  <link rel="stylesheet" href="{{ '/assets/css/post.css' | relative_url }}">
-
-  {% if site.toc and page.toc %}
-
-    <link rel="preload" as="style" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}">
-    <link rel="stylesheet" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}" />
-
-  {% endif %}
+<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
+{% if site.toc and page.toc %}
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css">
 {% endif %}
diff --git a/_includes/disqus.html b/_includes/disqus.html
index 2aa49d349c0..0f32888c597 100644
--- a/_includes/disqus.html
+++ b/_includes/disqus.html
@@ -1,26 +1,25 @@
 <!--
   The Disqus lazy loading.
-  Powered by: https://osvaldas.info/lazy-loading-disqus-comments
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT License
+  Powered by: <https://github.com/osvaldasvalutis/disqusLoader.js>
 -->
 
-<div id="disqus" class="pt-2 pb-4">
-  <p class="font-italic text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
+<div id="disqus" class="pt-2 pb-2">
+  <p class="text-center text-muted small pb-5">
+    Comments powered by <a href="https://disqus.com/">Disqus</a>.
+  </p>
 </div>
 
-<script src="{{ site.baseurl }}/assets/js/lib/jquery.disqusloader.min.js"></script>
+<script src="{{ '/assets/js/lib/jquery.disqusloader.min.js' | relative_url }}"></script>
 <script>
-  var options = {
+  const options = {
     scriptUrl: '//{{ site.disqus.shortname }}.disqus.com/embed.js',
 
     disqusConfig: function() {
-      this.page.url = '{{ site.url | append: site.baseurl | append: page.url }}';
+      this.page.title = '{{ page.title }}';
+      this.page.url = '{{ page.url | absolute_url }}';
       this.page.identifier = '{{ page.url }}';
     }
   };
 
   $.disqusLoader('#disqus', options);
-</script>
\ No newline at end of file
+</script>
diff --git a/_includes/favicons.html b/_includes/favicons.html
index a72cd5317ca..437c6a11568 100644
--- a/_includes/favicons.html
+++ b/_includes/favicons.html
@@ -1,10 +1,6 @@
 <!--
   The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
   Generated by: https://www.favicon-generator.org/
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  Published under the MIT license
 -->
 
 {% capture icon_url %}{{ site.baseurl }}/assets/img/favicons{% endcapture %}
diff --git a/_includes/fixlinenos.html b/_includes/fixlinenos.html
deleted file mode 100644
index 2f888651299..00000000000
--- a/_includes/fixlinenos.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!--
-  Fixed kramdown code highlight rendering:
-  https://github.com/penibelst/jekyll-compress-html/issues/101
-  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
--->
-{% if _content contains '<pre class="highlight">' %}
-  {% assign _content = _content | replace: '<pre class="highlight"><code', '<code' %}
-  {% assign _content = _content | replace: '</code></pre>', '</code>' %}
-{% endif %}
\ No newline at end of file
diff --git a/_includes/footer.html b/_includes/footer.html
index da33c149196..566d273e772 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,9 +1,5 @@
 <!--
   The Footer
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
 <footer class="d-flex w-100 justify-content-center">
@@ -22,9 +18,10 @@
     <div class="footer-right">
       <p class="mb-0">
         Powered by
-        <a href="https://jekyllrb.com" target="_blank">Jekyll</a>
+        <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
         with
-        <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>
+        <a href="https://github.com/cotes2020/jekyll-theme-chirpy"
+          target="_blank" rel="noopener">Chirpy</a>
         theme.
       </p>
     </div>
diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html
index dc46c832554..e5e5119e555 100644
--- a/_includes/google-analytics.html
+++ b/_includes/google-analytics.html
@@ -1,16 +1,14 @@
 <!--
   The GA snippet
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
 <script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  document.addEventListener("DOMContentLoaded", function(event) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
 
-  ga('create', '{{ site.google_analytics.id }}', 'auto');
-  ga('send', 'pageview');
+    gtag('js', new Date());
+    gtag('config', '{{ site.google_analytics.id }}');
+  });
 </script>
diff --git a/_includes/head.html b/_includes/head.html
index 66be46898e6..b8f720b7dd1 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,15 +1,29 @@
 <!--
   The Head
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+  {% if page.layout == 'home' or page.layout == 'post' %}
+    <meta name="pv-cache-enabled" content="{{ site.google_analytics.pv.enabled }}">
+
+    {% if site.google_analytics.pv.enabled %}
+      {% if site.google_analytics.pv.proxy_endpoint != ''
+        and site.google_analytics.pv.proxy_endpoint %}
+        <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
+      {% endif %}
+
+      {% if site.google_analytics.pv.cache %}
+        <meta name="pv-cache-data" content="{{ '/assets/js/data/pageviews.json' | relative_url }}">
+      {% endif %}
+
+    {% endif %}
+  {% endif %}
+
+  {% seo title=false %}
+
   <title>
   {%- unless page.layout == "home" -%}
     {{ page.title | append: " | "}}
@@ -17,8 +31,6 @@
     {{ site.title }}
   </title>
 
-  {% seo title=false %}
-
   {% include favicons.html %}
 
   <!-- Google Fonts -->
@@ -44,10 +56,6 @@
   <link rel="dns-prefetch" href="cdn.jsdelivr.net">
 
   <!-- Bootstrap -->
-  <link rel="preload" as="style"
-    href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
-    integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin>
-
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
     integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
@@ -62,14 +70,11 @@
 
   <!-- JavaScripts -->
 
-  <link rel="preload" as="script" href="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
-
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
 
-  <script src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" async></script>
+  <script defer
+    src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
 
   {% include js-selector.html %}
 
-</head>
\ No newline at end of file
+</head>
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 83afe3c50f6..6440f9df0da 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -1,49 +1,56 @@
 <!--
   JS selector for site.
-  Chirpy v2.3
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT Licensed
 -->
 
-{% if page.layout == 'home' %}
-
-  {% if site.google_analytics.pv.cache and site.google_analytics.pv.enabled %}
-    <script src="{{ '/assets/js/data/pv-cache.js' | relative_url }}"></script>
-  {% endif %}
-
-  <script src="{{ '/assets/js/home.min.js' | relative_url }}" async></script>
-
-{% elsif page.layout == 'post' %}
-
-  {% if site.google_analytics.pv.cache and site.google_analytics.pv.enabled %}
-    <script src="{{ '/assets/js/data/pv-cache.js' | relative_url }}"></script>
-  {% endif %}
-
-  <script src="{{ '/assets/js/post.min.js' | relative_url }}" async></script>
-
-  {% if page.math %}
-    <!-- MathJax -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
-  {% endif %}
-
-{% elsif page.layout == 'page' %}
-
-  {% if page.type == 'categories' %}
-    <script src="{{ '/assets/js/categories.min.js' | relative_url }}" async></script>
-  {% else %}
-    <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
+{% if page.layout == 'home' or page.layout == 'post' %}
+  {% if site.google_analytics.pv.enabled %}
+    <!-- pv-report needs countup.js -->
+    <script async src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
+    <script async src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
   {% endif %}
+{% endif %}
 
+{% if page.layout == 'home'
+    or page.layout == 'post'
+    or page.layout == 'categories' %}
+  {% assign type = page.layout %}
 {% else %}
-
-  <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
-
+  {% assign type = "page" %}
 {% endif %}
 
+{% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}
+<script defer src="{{ js | relative_url }}"></script>
+
+{% if page.math %}
+  <!-- MathJax -->
+  <script>
+  /* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
+  MathJax = {
+    tex: {
+      inlineMath: [              /* start/end delimiter pairs for in-line math */
+        ['$','$'],
+        ['\\(','\\)']
+      ],
+      displayMath: [             /* start/end delimiter pairs for display math */
+        ['$$', '$$'],
+        ['\\[', '\\]']
+      ]
+    }
+  };
+  </script>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script type="text/javascript" id="MathJax-script" async
+    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+  </script>
+{% endif %}
 
-<!-- PWA -->
 {% if jekyll.environment == 'production' %}
-  <script src="{{ '/app.js' | relative_url }}" defer></script>
+  <!-- PWA -->
+  <script defer src="{{ '/app.js' | relative_url }}"></script>
+
+  <!-- GA -->
+  {% if site.google_analytics.id %}
+    {% include google-analytics.html %}
+  {% endif %}
+
 {% endif %}
diff --git a/_includes/lozad.html b/_includes/lozad.html
index accfbfca239..2bc01ad59dd 100644
--- a/_includes/lozad.html
+++ b/_includes/lozad.html
@@ -1,8 +1,10 @@
-<!-- image lazy load: https://github.com/ApoorvSaxena/lozad.js -->
+<!--
+  image lazy load: https://github.com/ApoorvSaxena/lozad.js
+-->
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
 
 <script type="text/javascript">
-  const imgs = document.querySelectorAll('#post-wrapper img');
+  const imgs = document.querySelectorAll('.post-content img');
   const observer = lozad(imgs);
   observer.observe();
-</script>
\ No newline at end of file
+</script>
diff --git a/_includes/mermaid.html b/_includes/mermaid.html
new file mode 100644
index 00000000000..063d9508020
--- /dev/null
+++ b/_includes/mermaid.html
@@ -0,0 +1,29 @@
+<!--
+  mermaid-js loader
+-->
+
+<script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
+<script>
+  $(function() {
+    let initTheme = "default";
+
+    if ($("html[mode=dark]").length > 0
+      || ($("html[mode]").length == 0
+        && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
+      initTheme = "dark";
+    }
+
+    let mermaidConf = {
+      theme: initTheme  /* <default|dark|forest|neutral> */
+    };
+
+    /* Markdown converts to HTML */
+    $("pre").has("code.language-mermaid").each(function() {
+      let svgCode = $(this).children().html();
+      $(this).addClass("unloaded");
+      $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+    });
+
+    mermaid.initialize(mermaidConf);
+  });
+</script>
diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html
index 45099c51a08..4108c835455 100644
--- a/_includes/mode-toggle.html
+++ b/_includes/mode-toggle.html
@@ -1,14 +1,8 @@
 <!--
   Switch the mode between dark and light.
-
-  v2.1
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT License
 -->
 
-<i class="mode-toggle fas fa-sun" dark-mode-invisible></i>
-<i class="mode-toggle fas fa-moon" light-mode-invisible></i>
+<i class="mode-toggle fas fa-adjust"></i>
 
 <script type="text/javascript">
 
@@ -18,8 +12,8 @@
     static get LIGHT_MODE() { return "light"; }
 
     constructor() {
-      if (this.mode != null) {
-        if (this.mode == ModeToggle.DARK_MODE) {
+      if (this.hasMode) {
+        if (this.isDarkMode) {
           if (!this.isSysDarkPrefer) {
             this.setDark();
           }
@@ -34,8 +28,8 @@
 
       /* always follow the system prefers */
       this.sysDarkPrefers.addListener(function() {
-        if (self.mode != null) {
-          if (self.mode == ModeToggle.DARK_MODE) {
+        if (self.hasMode) {
+          if (self.isDarkMode) {
             if (!self.isSysDarkPrefer) {
               self.setDark();
             }
@@ -48,6 +42,8 @@
 
           self.clearMode();
         }
+
+        self.updateMermaid();
       });
 
     } /* constructor() */
@@ -74,16 +70,43 @@
 
     get isDarkMode() { return this.mode == ModeToggle.DARK_MODE; }
 
-    get isLightkMode() { return this.mode == ModeToggle.LIGHT_MODE; }
+    get isLightMode() { return this.mode == ModeToggle.LIGHT_MODE; }
 
     get hasMode() { return this.mode != null; }
 
     get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
 
+    /* get the current mode on screen */
+    get modeStatus() {
+      if (this.isDarkMode
+        || (!this.hasMode && this.isSysDarkPrefer) ) {
+        return ModeToggle.DARK_MODE;
+      } else {
+        return ModeToggle.LIGHT_MODE;
+      }
+    }
+
+    updateMermaid() {
+      if (typeof mermaid !== "undefined") {
+        let expectedTheme = (this.modeStatus === 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() {
+          let svgCode = $(this).prev().children().html();
+          $(this).removeAttr("data-processed");
+          $(this).html(svgCode);
+        });
+
+        mermaid.initialize(config);
+        mermaid.init(undefined, ".mermaid");
+      }
+    }
+
     flipMode() {
       if (this.hasMode) {
         if (this.isSysDarkPrefer) {
-          if (this.isLightkMode) {
+          if (this.isLightMode) {
             this.clearMode();
           } else {
             this.setLight();
@@ -105,6 +128,8 @@
         }
       }
 
+      this.updateMermaid();
+
     } /* flipMode() */
 
   } /* ModeToggle */
@@ -112,7 +137,9 @@
   let toggle = new ModeToggle();
 
   $(".mode-toggle").click(function() {
+
     toggle.flipMode();
+
   });
 
-</script>
\ No newline at end of file
+</script>
diff --git a/_includes/no-linenos.html b/_includes/no-linenos.html
index 0b55105d595..85006933708 100644
--- a/_includes/no-linenos.html
+++ b/_includes/no-linenos.html
@@ -1,12 +1,10 @@
 {% comment %}
-  Remove line numbers from code snippets.
-  v2.2
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  Published under the MIT License
+  Remove the line number of the code snippet.
 {% endcomment %}
 
-{% if _content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
-  {% assign _content = _content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
-  {% assign _content = _content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
+{% assign content = include.content %}
+
+{% if content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
+  {% assign content = content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
+  {% assign content = content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
 {% endif %}
diff --git a/_includes/panel.html b/_includes/panel.html
index 99b6d4cfb51..3b9fb753aa7 100644
--- a/_includes/panel.html
+++ b/_includes/panel.html
@@ -1,75 +1,57 @@
 <!--
   The Pannel on right side (Desktop views)
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
 <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
 
   <div class="access">
 
-  {% if site.data.updates %}
+  {% include update-list.html %}
 
-    {% include update-list.html %}
-
-    {% if update_list.size > 0 %}
+  {% if update_list.size > 0 %}
 
     <div id="access-lastmod" class="post">
-      <h3 data-toc-skip>
-        {{- site.data.label.panel.lastmod -}}
-      </h3>
+      <span>{{- site.data.label.panel.lastmod | default: 'Recent Update' -}}</span>
       <ul class="post-content pl-0 pb-1 ml-1 mt-2">
 
       {% for item in update_list %}
-        {% assign post_url = item | split: "::" | last | prepend: "/posts/" | append: "/" %}
-        {% assign post = site.posts | where: "url", post_url | first %}
-
-        {% if post %}
-          {% assign url = post.url | relative_url %}
-
-          <li><a href="{{ url }}">{{ post.title }}</a></li>
-
-          {% assign sum = sum | plus: 1 %}
-          {% if sum >= MAX_SIZE %} {% break %} {% endif %}
-
-        {% endif %}
-
+        {% 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>
       {% endfor %}
 
       </ul>
-    </div><!-- #access-lastmod -->
-
-    {% endif %}
+    </div> <!-- #access-lastmod -->
 
-  {% endif %} <!-- site.data.updates -->
+  {% endif %}
 
   {% include trending-tags.html %}
 
   {% if trending_tags.size > 0 %}
     <div id="access-tags">
-      <h3 data-toc-skip>
-        {{- site.data.label.panel.trending_tags -}}
-      </h3>
+      <span>{{- site.data.label.panel.trending_tags | default: 'Trending Tags' -}}</span>
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
 
-      {% for tag in trending_tags %}
-        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
+      {% 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>
     </div>
   {% endif %}
   </div> <!-- .access -->
 
-  {% if page.layout == 'post' and site.toc and page.toc %}
-  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <h3 data-toc-skip class="pl-3 pt-2 mb-2">
-      {{- site.data.label.panel.toc -}}
-    </h3>
-    <nav id="toc" data-toggle="toc"></nav>
-  </div>
+  {% if include.toc %}
+    <!-- BS-toc.js will be loaded at medium priority -->
+    <script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
+    <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
+      <span class="pl-3 pt-2 mb-2">
+      {{- site.data.label.panel.toc | default: 'Contents' -}}
+      </span>
+      <nav id="toc" data-toggle="toc"></nav>
+    </div>
   {% endif %}
 
 </div> <!-- #panel-wrapper -->
diff --git a/_includes/post-nav.html b/_includes/post-nav.html
index 81a6231ffb6..c8a6f2e008e 100644
--- a/_includes/post-nav.html
+++ b/_includes/post-nav.html
@@ -1,31 +1,30 @@
 <!--
   Navigation buttons at the bottom of the post.
-
-  v2.1
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT License
 -->
 
 <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">
+  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary"
+    prompt="{{ site.data.label.post.button.previous | default: 'previous' }}">
     <p>{{ page.previous.title }}</p>
   </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled">
+  <span class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.label.post.button.previous | default: 'previous' }}">
     <p>-</p>
   </span>
   {% endif %}
 
   {% if page.next.url %}
-  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
+  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary"
+    prompt="{{ site.data.label.post.button.next | default: 'next' }}">
     <p>{{ page.next.title }}</p>
   </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled">
+  <span class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.label.post.button.next | default: 'next' }}">
     <p>-</p>
   </span>
   {% endif %}
 
-</div>
\ No newline at end of file
+</div>
diff --git a/_includes/post-paginator.html b/_includes/post-paginator.html
index 238367d2327..484cde893e4 100644
--- a/_includes/post-paginator.html
+++ b/_includes/post-paginator.html
@@ -1,26 +1,19 @@
 <!--
   The paginator for post list on HomgPage.
-
-  v2.1
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT License
 -->
 
 <ul class="pagination mt-4 mb-0 pl-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">
+    {% assign prev_url = paginator.previous_page_path | relative_url %}
+  {% else %}
+    {% assign prev_url = "#" %}
+  {% endif %}
+  <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ prev_url }}" aria-label="previous-page">
       <i class="fas fa-angle-left"></i>
     </a>
   </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
-  </li>
-  {% endif %}
-  <!-- endof left arrow -->
 
   <!-- page numbers -->
   {% assign left_ellipsis = false %}
@@ -51,38 +44,37 @@
     {% endif %}
 
     {% if show %}
-        <!-- show number -->
-        <li class="page-item {% if i == paginator.page %} active{% endif %}">
-          <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+      <!-- show number -->
+      <li class="page-item {% if i == paginator.page %} active{% endif %}">
+        <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+      </li>
+    {% else %}
+      <!-- hide number -->
+      {% if i < pre and left_ellipsis == false %}
+        <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
         </li>
-      {% else %}
-        <!-- hide number -->
-        {% if i < pre and left_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign left_ellipsis = true %}
-        {% elsif i > next and right_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign right_ellipsis = true %}
-        {% endif %}
+        {% assign left_ellipsis = true %}
+      {% elsif i > next and right_ellipsis == false %}
+        <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
+        </li>
+        {% assign right_ellipsis = true %}
       {% endif %}
+    {% endif %}
 
   {% endfor %}
 
   <!-- right arrow -->
-  {% if paginator.next_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}">
+  {% if paginator.next_page_path %}
+    {% assign next_url = paginator.next_page_path | relative_url %}
+  {% else %}
+    {% assign next_url = "#" %}
+  {% endif %}
+  <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ next_url }}" aria-label="next-page">
       <i class="fas fa-angle-right"></i>
     </a>
   </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
-  </li>
-  {% endif %}
 
-</ul> <!-- .pagination -->
\ No newline at end of file
+</ul> <!-- .pagination -->
diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html
index 98197427a4a..c95a3073ee8 100644
--- a/_includes/post-sharing.html
+++ b/_includes/post-sharing.html
@@ -1,22 +1,17 @@
 <!--
  Post sharing snippet
-
- v2.1
- https://github.com/cotes2020/jekyll-theme-chirpy
- © 2019 Cotes Chung
- Published under the MIT License
 -->
 
 <div class="share-wrapper">
-  <span class="share-label text-muted mr-1">{{ site.data.share.label }}</span>
+  <span class="share-label text-muted mr-1">{{ site.data.label.post.share | default: 'Share' }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
-    {% assign url = page.url | relative_url | prepend: site.url %}
+    {% assign url = page.url | absolute_url %}
 
     {% 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">
+          title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
           <i class="fa-fw {{ share.icon }}"></i>
         </a>
     {% endfor %}
@@ -25,4 +20,4 @@
         data-toggle="tooltip" data-placement="top" title="Copy link"></i>
 
   </span>
-</div>
\ No newline at end of file
+</div>
diff --git a/_includes/read-time.html b/_includes/read-time.html
new file mode 100644
index 00000000000..f63bc3bf8a0
--- /dev/null
+++ b/_includes/read-time.html
@@ -0,0 +1,19 @@
+<!--
+  Calculate the post's reading time, and display the word count in tooltip
+ -->
+{% assign words = include.content | strip_html | number_of_words: "auto" %}
+
+<!-- words per minute  -->
+{% assign wpm = 180 %}
+{% assign min_time = 1 %}
+
+{% assign read_time = words | divided_by: wpm %}
+
+{% unless read_time > 0 %}
+  {% assign read_time = min_time %}
+{% endunless %}
+
+<!-- return element -->
+<span class="readtime" data-toggle="tooltip" data-placement="bottom" title="{{ words }} words">
+  {{- read_time -}}{{" "}}{{- site.data.label.read_time_unit | default: "min" -}}
+</span>
diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
new file mode 100644
index 00000000000..77e820b0cd9
--- /dev/null
+++ b/_includes/refactor-content.html
@@ -0,0 +1,66 @@
+<!--
+  Refactor the HTML structure.
+-->
+
+{% assign _content = include.content %}
+
+<!--
+  In order to allow a wide table to scroll horizontally,
+  we suround the markdown table with `<div class="table-wrapper">` and `</div>`
+-->
+{% if _content contains '<table>' %}
+  {% assign _content = _content
+    | replace: '<table>', '<div class="table-wrapper"><table>'
+    | replace: '</table>', '</table></div>'
+    | replace: '</table></div></code>', '</table></code>'
+  %}
+{% endif %}
+
+<!--
+  Fixed kramdown code highlight rendering:
+  https://github.com/penibelst/jekyll-compress-html/issues/101
+  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
+-->
+{% if _content contains '<pre class="highlight">' %}
+  {% assign _content = _content
+    | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code'
+    | replace: '</code></pre></div>', '</code></div>'
+  %}
+{% endif %}
+
+<!-- Add attribute 'hide-bullet' to the checkbox list -->
+{% if _content contains '<li class="task-list-item"><' %}
+  {% assign _content = _content
+    | replace: '"task-list-item"><', '"task-list-item" hide-bullet><'
+  %}
+{% endif %}
+
+{% if _content contains '<img src="' %}
+
+  {% if site.img_cdn != '' %}
+    {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
+  {% else %}
+    {% assign img_path_replacement = '<img src="' | append: site.baseurl | append: '/' %}
+  {% endif %}
+
+  {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
+
+  <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+  {% assign lozad = true %}
+  {% assign img_placehodler
+    = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
+
+  {% assign lozad_replacement = '<img src="'
+    | append: img_placehodler
+    | append: '" data-src="' %}
+
+  {% assign _content = _content | replace: '<img src="', lozad_replacement %}
+
+{% endif %}
+
+<!-- return -->
+{{ _content }}
+
+{% if lozad %}
+  {% include lozad.html %}
+{% endif %}
diff --git a/_includes/related-posts.html b/_includes/related-posts.html
index d61f90fd641..be632797785 100644
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@@ -1,11 +1,6 @@
 <!--
  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.
-
- v2.0
- https://github.com/cotes2020/jekyll-theme-chirpy
- © 2019 Cotes Chung
- Published under the MIT License
 -->
 
 <!-- The total size of related posts  -->
@@ -84,8 +79,9 @@
 
 
 {% if index_list.size > 0 %}
-  <div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
-    <h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
+  <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
+    <h3 class="pt-2 mt-1 mb-4 ml-1"
+      data-toc-skip>{{ site.data.label.post.relate_posts | default: 'Further Reading' }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
       {% assign index = entry | plus: 0 %}
@@ -93,15 +89,13 @@ <h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_pos
       <div class="card">
         <a href="{{ post.url | relative_url }}">
           <div class="card-body">
-            <span class="timeago small">
-                {{ post.date | date: site.data.date_format.post }}
-                <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-            </span>
+            {% include timeago.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">
-              {% assign content = post.content %}
-              {% include no-linenos.html %}
-              <p>{{ content | markdownify | strip_html | truncate: 200 | replace: '&', '&amp;' }}</p>
+              <p>
+                {% include no-linenos.html content=post.content %}
+                {{ content | markdownify | strip_html | truncate: 200 }}
+              </p>
             </div>
           </div>
         </a>
diff --git a/_includes/search-loader.html b/_includes/search-loader.html
index af7ebb100c7..2f3ab4d522e 100644
--- a/_includes/search-loader.html
+++ b/_includes/search-loader.html
@@ -1,17 +1,14 @@
 <!--
   Jekyll Simple Search loader
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
+  See: <https://github.com/christian-fei/Simple-Jekyll-Search>
 -->
 
 {% 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">
   <a href="{{ site.url }}{url}">{title}</a>
   <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
-    <div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div>
-    <div><i class="fa fa-tag fa-fw"></i>{tags}</div>
+    {categories}
+    {tags}
   </div>
   <p>{snippet}</p>
 </div>
@@ -25,8 +22,25 @@
 SimpleJekyllSearch({
   searchInput: document.getElementById('search-input'),
   resultsContainer: document.getElementById('search-results'),
-  json: '{{ site.baseurl }}/assets/js/data/search.json',
+  json: '{{ '/assets/js/data/search.json' | relative_url }}',
   searchResultTemplate: '{{ result_elem | strip_newlines }}',
-  noResultsText: '{{ not_found }}'
+  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>`;
+      }
+    }
+
+    if (prop === 'tags') {
+      if (value === '') {
+        return `${value}`;
+      } else {
+        return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+      }
+    }
+  }
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/_includes/search-results.html b/_includes/search-results.html
index a11832db77c..d07222aa2dc 100644
--- a/_includes/search-results.html
+++ b/_includes/search-results.html
@@ -1,20 +1,19 @@
 <!--
   The Search results
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-12 col-xl-11 post-content">
+  <div class="col-12 col-sm-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags }}</h4>
+      <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags | default: 'Trending Tags' }}</h4>
+
       {% include trending-tags.html %}
+
       {% for tag in trending_tags %}
-        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        {% capture url %}/tags/{{ tag | slugify | url_encode }}/{% endcapture %}
         <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
-       {% endfor %}
+      {% endfor %}
+
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index fb7421ac58a..a6a421b5f12 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,90 +1,91 @@
 <!--
   The Side Bar
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
-<div id="nav-wrapper">
-  <div id="profile-wrapper" class="d-flex flex-column">
-    <div id="avatar" class="d-flex justify-content-center">
-      <a href="{{ site.baseurl }}/" alt="avatar">
-        {% assign avatar_url = site.avatar %}
-        {% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
-        {% if start == '/' %}
-          {% assign avatar_url = avatar_url | prepend: site.baseurl %}
-        {% endif %}
+<div id="sidebar" class="d-flex flex-column align-items-end">
+
+  <div class="profile-wrapper text-center">
+    <div id="avatar">
+      <a href="{{ '/' | relative_url }}" alt="avatar" class="mx-auto">
+        {% capture avatar_url %}
+          {%- if site.avatar contains '://' -%}
+            {{ site.avatar }}
+          {%- elsif site.img_cdn != '' and site.img_cdn -%}
+            {{ site.avatar | prepend: site.img_cdn }}
+          {%- else -%}
+            {{ site.avatar | relative_url }}
+          {%- endif -%}
+        {% endcapture %}
         <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
       </a>
     </div>
 
-    <div class="profile-text mt-3">
-      <div class="site-title">
-        <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
-      </div>
-      <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
+    <div class="site-title mt-3">
+      <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
     </div>
-  </div>
-
-  <ul class="nav flex-column">
-  {% assign page_urls = page.url | split: "/" %}
 
-  {% for item in site.data.tabs %}
-    {% assign ref = site.baseurl | append: "/" %}
+    <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
 
-    {% if item.path %}
-      {% assign ref = ref | append: item.path | append: "/" %}
-      {% if item.url %}
-        {% assign ref = ref | append: item.url | append: "/" %}
-      {% endif %}
-    {% endif %}
+  </div><!-- .profile-wrapper -->
 
-    <li class="nav-item d-flex justify-content-center
-      {% if item.url == page_urls.last
-        or item.name == page.tab_active
-        or item.name == "Home" and page.layout == "home" %}active{% endif %}">
-      <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
-        <i class="fa-fw {{ item.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ item.name | upcase }}</span>
+  <ul class="w-100">
+    <!-- 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>{{ "HOME" }}</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>
+        <span>{{ tab.title | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
-  {% endfor %}
+    {% endfor %}
 
   </ul> <!-- ul.nav.flex-column -->
 
-</div><!-- #nav-wrapper -->
+  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
 
-<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
+    {% for entry in site.data.contact %}
+      {% capture url %}
+        {%- if entry.type == 'github' -%}
+          https://github.com/{{ site.github.username }}
+        {%- elsif entry.type == 'twitter' -%}
+          https://twitter.com/{{ site.twitter.username }}
+        {%- elsif entry.type == 'email' -%}
+          {% assign email = site.social.email | split: '@' %}
+          javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
+        {%- elsif entry.type == 'rss' -%}
+          {{ "/feed.xml" | relative_url }}
+        {%- else -%}
+          {{ entry.url }}
+        {%- endif -%}
+      {% endcapture %}
 
-  {% if site.theme_mode == "dual" %}
-  <span id="mode-toggle-wrapper">
-    {% include mode-toggle.html %}
-  </span>
-  <span class="icon-border"></span>
-  {% endif %}
+      {% if url %}
+      <a href="{{ url }}" aria-label="{{ entry.type }}"
+        {% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
+        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
+        <i class="{{ entry.icon }}"></i>
+      </a>
+      {% endif %}
+
+    {% endfor %}
+
+    {% unless site.theme_mode %}
+      {% if site.data.contact.size > 0 %}
+        <span class="icon-border order-2"></span>
+      {% endif %}
 
-  {% for entry in site.data.contact %}
-    {% capture url %}
-      {%- if entry.type == 'github' -%}
-        https://github.com/{{ site.github.username }}
-      {%- elsif entry.type == 'twitter' -%}
-        https://twitter.com/{{ site.twitter.username }}
-      {%- elsif entry.type == 'email' -%}
-        {% assign email = site.social.email | split: '@' %}
-        javascript:window.open('mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))
-      {%- elsif entry.type == 'rss' -%}
-        {{ "/feed.xml" | relative_url }}
-      {%- else -%}
-        {{ entry.url }}
-      {%- endif -%}
-    {% endcapture %}
+      <span id="mode-toggle-wrapper" class="order-1">
+        {% include mode-toggle.html %}
+      </span>
+    {% endunless %}
 
-    {% if url != '' %}
-    <a href="{{ url }}" {% unless entry.noblank %}target="_blank"{% endunless %}>
-      <i class="{{ entry.icon }}"></i>
-    </a>
-    {% endif %}
-  {% endfor %}
+  </div> <!-- .sidebar-bottom -->
 
-</div>
\ No newline at end of file
+</div><!-- #sidebar -->
diff --git a/_includes/timeago.html b/_includes/timeago.html
new file mode 100644
index 00000000000..a3007f174da
--- /dev/null
+++ b/_includes/timeago.html
@@ -0,0 +1,31 @@
+<!--
+  Date format snippet
+  See: /assets/js/_utils/timeage.js
+-->
+
+{% assign tooltip_df = site.data.date_format.tooltip | default: '%a, %b %e, %Y, %l:%M %p %z' %}
+{% assign post_long_df = site.data.date_format.post.long | default: '%b %e, %Y' %}
+{% assign post_short_df = site.data.date_format.post.short | default: '%b %e' %}
+
+<span class="timeago {% if include.class %}{{ include.class }}{% endif %}"
+  {% if include.tooltip %}
+    data-toggle="tooltip"
+    data-placement="bottom"
+    title="{{ include.date | date: tooltip_df }}"
+  {% endif %}
+
+  {% if include.prefix %}prefix="{{ include.prefix }} "{% endif%}
+  {% if include.prep %}prep="{{ include.prep }}"{% endif %} >
+
+  {% assign this_year = site.time | date: "%Y" %}
+  {% assign post_year = include.date | date: "%Y" %}
+
+  {% if post_year == this_year %}
+    {{ include.date | date: post_short_df }}
+  {% else %}
+    {{ include.date | date: post_long_df }}
+  {% endif %}
+
+  <i class="unloaded">{{ include.date | date_to_xmlschema }}</i>
+
+</span>
diff --git a/_includes/topbar.html b/_includes/topbar.html
index 5995e8f113c..034f984f2c9 100644
--- a/_includes/topbar.html
+++ b/_includes/topbar.html
@@ -1,50 +1,69 @@
 <!--
   The Top Bar
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
+
 <div id="topbar-wrapper" class="row justify-content-center topbar-down">
   <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
     <span id="breadcrumb">
-      {% for item in page.breadcrumb %}
-        {% if item.url %}
+
+    {% assign paths = page.url | split: '/' %}
+
+    {% if paths.size == 0 %}
+      <!-- index page -->
+      <span>{{ 'Posts' }}</span>
+    {% else %}
+
+      {% for item in paths %}
+
+        {% if forloop.first %}
+          {% unless page.layout == 'post' %}
+          <span>
+            <a href="{{ '/' | relative_url }}">{{ 'Home' }}</a>
+          </span>
+          {% endunless %}
+
+        {% elsif forloop.last %}
+          <span>{{ page.title }}</span>
+
+        {% else %}
         <span>
-          <a href="{{ site.baseurl }}{{ item.url | remove: '.html'}}">
-            {{ item.label }}
+          {% assign url = item %}
+          {% if item == 'posts' and page.layout == 'post' %}
+            {% assign url = '/' %}
+          {% endif %}
+          <a href="{{ url | relative_url }}">
+            {{ item | capitalize }}
           </a>
         </span>
-        {% else %}
-          <span>{{ item.label }}</span>
+
         {% endif %}
+
       {% endfor %}
 
-      {% unless page.layout == "home" %}
-        <span>{{ page.title }}</span>
-      {% endunless %}
+    {% endif %}
 
     </span><!-- endof #breadcrumb -->
 
     <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
 
     <div id="topbar-title">
-    {% if page.location %}
-      {{- page.location -}}
-    {% elsif page.layout == "home" %}
-      {{- site.title -}}
-    {% else %}
-      {{- page.title -}}
-    {% endif %}
+      {% if page.layout == 'home' %}
+        {{- site.title -}}
+      {% elsif page.dynamic_title %}
+        {{- page.title -}}
+      {% else %}
+        {{- 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" placeholder="{{ site.data.label.search_hint }}...">
+      <input class="form-control" id="search-input" type="search"
+        aria-label="search" placeholder="{{ site.data.label.search_hint | default: 'Search' }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
     <span id="search-cancel" >Cancel</span>
   </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html
index 2d9c971c966..05f9c846fb6 100644
--- a/_includes/trending-tags.html
+++ b/_includes/trending-tags.html
@@ -1,31 +1,36 @@
 {% comment %}
   The trending tags list
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT Licensed
 {% endcomment %}
 
 {% assign MAX = 10 %}
 
-{% capture tags_array %}
-  {% for tag in site.tags %}
-    {{ tag[1] | size }}::{{ tag[0] | replace: ' ', '-' }}
-  {% endfor %}
-{% endcapture %}
+{% assign size_list = "" | split: "" %}
+{% assign tag_list = "" | split: "" %}
 
-{% assign all_tags = tags_array | split: " " | sort | reverse %}
-{% assign count = 0 %}
+{% for tag in site.tags %}
+  {% assign size = tag | last | size %}
+  {% assign size_list = size_list | push: size %}
 
-{% assign trending_tags = "" | split: "" %}
+  {% assign tag_str = tag | first | append: "::" | append: size %}
+  {% assign tag_list =  tag_list | push: tag_str %}
+{% endfor %}
 
-{% for iter in all_tags %}
-  {% assign count = count | plus: 1 %}
-  {% assign tag = iter | split: "::" | last  %}
+{% assign size_list = size_list | sort | reverse %}
 
-  {% assign trending_tags = trending_tags | push: tag %}
+{% assign tag_list = tag_list | sort_natural %}
 
-  {% if count >= MAX %}
-    {% break %}
-  {% endif %}
+{% assign trending_tags = "" | split: "" %}
+
+{% for size in size_list limit: MAX %}
+  {% for tag_str in tag_list %}
+    {% assign tag = tag_str | split: "::" %}
+    {% assign tag_name = tag | first %}
+    {% assign tag_size = tag | last | plus: 0 %}
+    {% if tag_size == size %}
+      {% unless trending_tags contains tag_name %}
+        {% assign trending_tags = trending_tags | push: tag_name %}
+        {% break %}
+      {% endunless %}
+    {% endif %}
+  {% endfor %}
 {% endfor %}
diff --git a/_includes/update-list.html b/_includes/update-list.html
index 9a66feaccb8..8dbf9841a30 100644
--- a/_includes/update-list.html
+++ b/_includes/update-list.html
@@ -1,21 +1,24 @@
 {% comment %}
   Get the last 5 posts from lastmod list.
-  v2.2
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT License
 {% endcomment %}
 
 {% assign MAX_SIZE = 5 %}
-{% assign sum = 0 %}
-{% assign update_list = "" | split: "" %}
 
-{% for entry in site.data.updates %}
-  {% capture elem %}
-    {{- entry.lastmod -}}::{{- entry.filename -}}
-  {% endcapture %}
+{% assign all_list = "" | split: "" %}
 
-  {% assign update_list = update_list | push: elem %}
+{% for post in site.posts %}
+  {% if post.last_modified_at %}
+    {% capture elem %}
+      {{- post.last_modified_at | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}}
+    {% endcapture %}
+    {% assign all_list = all_list | push: elem %}
+  {% endif %}
 {% endfor %}
 
-{% assign update_list = update_list | sort | reverse %}
+{% assign all_list = all_list | sort | reverse %}
+
+{% assign update_list = "" | split: "" %}
+
+{% for entry in all_list limit:MAX_SIZE %}
+  {% assign update_list = update_list | push: entry %}
+{% endfor %}
diff --git a/tabs/archives.md b/_layouts/archives.html
similarity index 88%
rename from tabs/archives.md
rename to _layouts/archives.html
index e4d43485813..090a36f6f43 100644
--- a/tabs/archives.md
+++ b/_layouts/archives.html
@@ -1,13 +1,9 @@
 ---
-title: Archives
-type: archives
+layout: page
 # The Archives of posts.
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
+
 <div id="archives" class="pl-xl-2">
 {% for post in site.posts %}
   {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
@@ -37,4 +33,4 @@
     {% assign last_month = "" %}
   {% endif %}
 {% endfor %}
-</div>
\ No newline at end of file
+</div>
diff --git a/tabs/categories.md b/_layouts/categories.html
similarity index 90%
rename from tabs/categories.md
rename to _layouts/categories.html
index d621bfb1ce4..2ae421df5dc 100644
--- a/tabs/categories.md
+++ b/_layouts/categories.html
@@ -1,13 +1,9 @@
 ---
-title: Categories
-type: categories
+layout: page
 # All the Categories of posts
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
+
 {% assign HEAD_PREFIX = "h_" %}
 {% assign LIST_PREFIX = "l_" %}
 
@@ -45,7 +41,7 @@
       {% else %}
         <i class="far fa-folder fa-fw"></i>
       {% endif %}
-        <a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase | url_encode }}/"
+        <a href="{{ site.baseurl }}/categories/{{ category_name | slugify | url_encode }}/"
           class="ml-1 mr-2">
           {{ category_name }}
         </a>
@@ -64,8 +60,9 @@
 
       <!-- arrow -->
       {% if sub_categories_size > 0%}
-      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse" aria-expanded="true"
-          class="category-trigger hide-border-bottom">
+      <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 %}
@@ -83,7 +80,7 @@
         {% for sub_category in sub_categories %}
         <li class="list-group-item">
           <i class="far fa-folder fa-fw"></i>
-          <a href="{{ site.baseurl }}/categories/{{ sub_category | replace: ' ', '-' | downcase | url_encode }}/"
+          <a href="{{ site.baseurl }}/categories/{{ sub_category | slugify | url_encode }}/"
             class="ml-1 mr-2">{{ sub_category }}</a>
           {% assign posts_size = site.categories[sub_category] | size %}
           <span class="text-muted small font-weight-light">{{ posts_size }}
diff --git a/_layouts/category.html b/_layouts/category.html
index a53aff5fcfb..49f4e2fa96b 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -1,25 +1,24 @@
 ---
 layout: page
 # The Category layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# MIT Licensed
 ---
 
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ site.categories[page.category] | size }}</span>
+    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
 
   <ul class="post-content pl-0">
-    {% for post in site.categories[page.category] %}
+    {% assign post_long_df = site.data.date_format.post.long | default: '%b %e, %Y' %}
+
+    {% 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>
-      <span class="text-muted small">{{ post.date | date: site.data.date_format.post }}</span>
+      <span class="text-muted small">{{ post.date | date: post_long_df }}</span>
     </li>
     {% endfor %}
   </ul>
-</div>
\ No newline at end of file
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
index e0740cc9780..79bfd372575 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,66 +1,51 @@
 ---
 layout: compress
 # Default layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
 <!DOCTYPE html>
 
-{% if site.lang %}
-  {% assign lang = site.lang | split: "_" | first %}
-{% else %}
-  {% assign lang = 'en' %}
-{% endif %}
-
 {% capture prefer_mode %}
-  {% if site.theme_mode != "dual" %}
+  {% if site.theme_mode %}
     mode="{{ site.theme_mode }}"
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ lang }}" {{ prefer_mode }} >
+<html lang="{{ site.lang | default: "en-US" }}" {{ prefer_mode }}>
 
   {% include head.html %}
 
   <body data-spy="scroll" data-target="#toc">
 
-    <div id="sidebar" class="d-flex flex-column">
-      {% include sidebar.html %}
-    </div>
+    {% include sidebar.html %}
 
     {% include topbar.html %}
 
     <div id="main-wrapper">
       <div id="main">
 
-        {% capture _content %}
-          {{ content }}
-        {% endcapture %}
-
-        {% include fixlinenos.html %}
-        {{ _content }}
+        {% include refactor-content.html content=content %}
 
         {% include footer.html %}
+
       </div>
+
       {% include search-results.html %}
 
     </div> <!-- #main-wrapper -->
 
+    {% if page.mermaid %}
+      {% include mermaid.html %}
+    {% endif %}
+
     <div id="mask"></div>
 
-    <a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button">
+    <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
       <i class="fas fa-angle-up"></i>
     </a>
 
-    {% if jekyll.environment == 'production' %}
-      {% include google-analytics.html %}
-    {% endif %}
-
     {% include search-loader.html %}
 
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/_layouts/home.html b/_layouts/home.html
index 3184071bedd..9d77caed616 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -1,15 +1,11 @@
 ---
 layout: page
 # The Home page layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
 
 {% assign pinned = site.posts | where_exp: "item", "item.pin == true"  %}
-{% assign default = site.posts | where_exp: "item", "item.pin == nil "  %}
+{% assign default = site.posts | where_exp: "item", "item.pin != true"  %}
 {% assign posts = "" | split: "" %}
 
 <!-- Get pinned posts -->
@@ -49,37 +45,46 @@
 {% for post in posts %}
 
   <div class="post-preview">
-    <div class="d-flex justify-content-between pr-xl-2">
-      <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
-      {% if post.pin %}
-        <i class="fas fa-thumbtack fa-fw text-muted mt-1 ml-2 mt-xl-2" data-toggle="tooltip" data-placement="left"
-        title="Pinned"></i>
-      {% endif %}
-    </div>
+    <h1>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+    </h1>
+
     <div class="post-content">
       <p>
-      {% assign _content = post.content %}
-      {% include no-linenos.html %}
-      {{ _content | markdownify | strip_html | truncate: 200 }}
+        {% include no-linenos.html content=post.content %}
+        {{ content | markdownify | strip_html | truncate: 200 }}
       </p>
     </div>
 
-    <div class="post-meta text-muted">
-      <!-- posted date -->
-      <i class="far fa-clock fa-fw"></i>
-      <span class="timeago" data-toggle="tooltip" data-placement="bottom"
-        title="{{ post.date | date: site.data.date_format.tooltip }}">
-      {{ post.date | date: site.data.date_format.post }}
-      <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-      </span>
-      <!-- page views -->
-      {% if site.google_analytics.pv.enabled %}
-      <i class="far fa-eye fa-fw"></i>
-      <span id="pv_{{-post.title-}}" class="pageviews">
-        <i class="fas fa-spinner fa-spin fa-fw"></i>
-      </span>
+    <div class="post-meta text-muted d-flex justify-content-between">
+
+      <div>
+        <!-- posted date -->
+        <i class="far fa-calendar fa-fw"></i>
+        {% include timeago.html date=post.date tooltip=true %}
+
+        <!-- time to read -->
+        <i class="far fa-clock fa-fw"></i>
+        {% include read-time.html content=post.content %}
+
+        <!-- page views -->
+        {% if site.google_analytics.pv.enabled %}
+        <i class="far fa-eye fa-fw"></i>
+        <span id="pv_{{-post.title-}}" class="pageviews">
+          <i class="fas fa-spinner fa-spin fa-fw"></i>
+        </span>
+        {% endif %}
+      </div>
+
+      {% if post.pin %}
+      <div class="pin">
+        <i class="fas fa-thumbtack fa-fw"></i>
+        <span>{{ site.data.label.pin_prompt | default: 'Pinned' }}</span>
+      </div>
       {% endif %}
-    </div>
+
+    </div> <!-- .post-meta -->
+
   </div> <!-- .post-review -->
 
 {% endfor %}
diff --git a/_layouts/page.html b/_layouts/page.html
index 1473f1f62cb..066faf30a0b 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,10 +1,6 @@
 ---
 layout: default
 # The page layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
 <div class="row">
diff --git a/_layouts/post.html b/_layouts/post.html
index 9fc3c1178b7..3e15b695263 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,10 +1,6 @@
 ---
 layout: default
 # The posts' layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
 <div class="row">
@@ -18,61 +14,41 @@ <h1 data-toc-skip>{{ page.title }}</h1>
       <div class="post-meta text-muted d-flex flex-column">
         <!-- Published date and author -->
         <div>
-          Posted
-          <span class="timeago" data-toggle="tooltip" data-placement="bottom"
-           title="{{ page.date | date: site.data.date_format.tooltip }}">
-            {{ page.date | date: site.data.date_format.post }}
-            <i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
-          </span>
-          by
-          <span class="author">
-          {% if page.author %}
-            {{ page.author }}
-          {% else%}
-            {{ site.author }}
-          {% endif %}
+          <span class="semi-bold">
+            {{ page.author | default: site.social.name }}
           </span>
+          {% include timeago.html date=page.date prep="on" tooltip=true %}
         </div>
 
-        <!-- lastmod -->
-        {%- capture filename -%}
-          {{ page.url | split: "/" | last }}
-        {%- endcapture -%}
-
-        {% assign record = site.data.updates | where: "filename", filename | first %}
-
-        {% if record %}
         <div>
-          Updated
-          <span class="timeago lastmod"
-            data-toggle="tooltip" data-placement="bottom"
-             title="{{ record.lastmod | date: site.data.date_format.tooltip }}">
-            {{ record.lastmod | date: site.data.date_format.post }}
-            <i class="unloaded">{{ record.lastmod | date_to_xmlschema}}</i>
+          <!-- lastmod -->
+          {% if page.last_modified_at %}
+          <span>
+            {% include timeago.html date=page.last_modified_at
+              class="lastmod" prefix="Updated" tooltip=true %}
           </span>
-        </div>
-        {% endif %}
+          {% endif %}
 
-        <!-- page views -->
-        {% if site.google_analytics.pv.enabled %}
-        <div>
+          <!-- read time -->
+          {% include read-time.html content=content %}
+
+          <!-- page views -->
+          {% if site.google_analytics.pv.enabled %}
           <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
-          views
+          {% endif %}
+
         </div>
-        {% endif %}
 
       </div> <!-- .post-meta -->
 
       <div class="post-content">
-        {% if page.image %}
-          <img src="{{ page.image }}">
-        {% endif %}
-        <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-        {% if content contains '<img src=' %}
-          {{ content | replace: '<img src=', '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src=' }}
-        {% else %}
-          {{ content }}
+
+        {% if page.image.src %}
+          <img src="{{ page.image.src }}" class="preview-img" alt="{{ page.image.alt | default: "Preview Image" }}">
         {% endif %}
+
+        {{ content }}
+
       </div>
 
       <div class="post-tail-wrapper text-muted">
@@ -82,7 +58,7 @@ <h1 data-toc-skip>{{ page.title }}</h1>
         <div class="post-meta mb-3">
           <i class="far fa-folder-open fa-fw mr-1"></i>
           {% for category in page.categories %}
-            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
+            <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
             {%- unless forloop.last -%}, {%- endunless -%}
           {% endfor %}
         </div>
@@ -93,7 +69,7 @@ <h1 data-toc-skip>{{ page.title }}</h1>
         <div class="post-tags">
           <i class="fa fa-tags fa-fw mr-1"></i>
           {% for tag in page.tags %}
-          <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
+          <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
             class="post-tag no-text-decoration" >
             {{- tag -}}
           </a>
@@ -102,7 +78,7 @@ <h1 data-toc-skip>{{ page.title }}</h1>
         {% endif %}
 
         <div class="post-tail-bottom
-          d-flex justify-content-between align-items-center pt-5 pb-2">
+          d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
           {% if site.data.rights.license %}
           <div class="license-wrapper">
             This post is licensed under
@@ -119,29 +95,35 @@ <h1 data-toc-skip>{{ page.title }}</h1>
 
     </div> <!-- .post -->
 
+
   </div> <!-- #post-wrapper -->
 
-  {% include panel.html %}
+  {% assign enable_toc = false %}
+
+  {% if site.toc and page.toc %}
+    {% if content contains '<h2' or content contains '<h3' %}
+      {% assign enable_toc = true %}
+    {% endif %}
+  {% endif %}
+
+  {% include panel.html toc=enable_toc %}
 
 </div> <!-- .row -->
 
 <div class="row">
-  <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
+  <div class="col-12 col-lg-11 col-xl-8">
+    <div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
 
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    {% include related-posts.html %}
 
-      {% include post-nav.html %}
+    {% include post-nav.html %}
 
-      {% if site.disqus.comments and page.comments %}
-        {% include disqus.html %}
-      {% endif %}
+    {% if site.disqus.comments and page.comments %}
+      {% include disqus.html %}
+    {% endif %}
 
-      {% include related-posts.html %}
+    </div> <!-- #post-extend-wrapper -->
 
-    </div> <!-- .pl-1 pr-1 -->
-
-  </div> <!-- #post-extend-wrapper -->
+  </div> <!-- .col-* -->
 
 </div> <!-- .row -->
-
-{% include lozad.html %}
diff --git a/_layouts/tag.html b/_layouts/tag.html
index f90ec338627..af78ae08f34 100644
--- a/_layouts/tag.html
+++ b/_layouts/tag.html
@@ -1,25 +1,24 @@
 ---
 layout: page
 # The layout for Tag page
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
+
 <div id="page-tag">
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ site.tags[page.tag] | size }}</span>
+    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
   <ul class="post-content pl-0">
-    {% for post in site.tags[page.tag] %}
+    {% assign post_long_df = site.data.date_format.post.long | default: '%b %e, %Y' %}
+
+    {% 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>
-      <span class="text-muted small">{{ post.date | date: site.data.date_format.post }}</span>
+      <span class="text-muted small">{{ post.date | date: post_long_df }}</span>
     </li>
     {% endfor %}
   </ul>
-</div>
\ No newline at end of file
+</div>
diff --git a/_layouts/tags.html b/_layouts/tags.html
new file mode 100644
index 00000000000..d0e63d59c8b
--- /dev/null
+++ b/_layouts/tags.html
@@ -0,0 +1,21 @@
+---
+layout: page
+# All the Tags of posts.
+---
+
+<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
+
+  {% assign tags = "" | split: "" %}
+  {% for t in site.tags %}
+    {% assign tags = tags | push: t[0] %}
+  {% endfor %}
+
+  {% assign sorted_tags = tags | sort_natural %}
+
+  {% for t in sorted_tags %}
+    <div>
+      <a class="tag" href="{{ site.baseurl }}/tags/{{ t | slugify | url_encode }}/">{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span></a>
+    </div>
+  {% endfor %}
+
+</div>
diff --git a/_plugins/posts-lastmod-hook.rb b/_plugins/posts-lastmod-hook.rb
new file mode 100644
index 00000000000..1fd6ecf9d5f
--- /dev/null
+++ b/_plugins/posts-lastmod-hook.rb
@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+#
+# Check for changed posts
+
+Jekyll::Hooks.register :posts, :post_init do |post|
+
+  commit_num = `git rev-list --count HEAD "#{ post.path }"`
+
+  if commit_num.to_i > 1
+    lastmod_date = `git log -1 --pretty="%ad" --date=iso "#{ post.path }"`
+    post.data['last_modified_at'] = lastmod_date
+  end
+
+end
diff --git a/assets/css/_addon/main.scss b/_sass/addon/commons.scss
similarity index 59%
rename from assets/css/_addon/main.scss
rename to _sass/addon/commons.scss
index 25c8da7fd87..b5c5bb051b4 100644
--- a/assets/css/_addon/main.scss
+++ b/_sass/addon/commons.scss
@@ -1,38 +1,28 @@
 /*
-* The main styles.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
+  The common styles
 */
-
-@import "_addon/fonts";
-@import "_addon/module";
-@import "_addon/variables";
-@import "_colors/light-typography";
-@import "_colors/dark-typography";
-
-@mixin set-visible($light-display, $dark-display) {
-  [light-mode-invisible] {
-    display: $light-display;
-  }
-
-  [dark-mode-invisible] {
-    display: $dark-display;
-  }
-}
+@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
 
 @mixin mode-toggle($dark-mode: false) {
   @if $dark-mode {
-    @include set-visible(inline-block, none);
     @include dark-scheme;
+
+    .mode-toggle {
+      transform: rotateY(180deg);
+    }
+
   } @else {
-    @include set-visible(none, inline-block);
     @include light-scheme;
+
+    .mode-toggle {
+      transform: none;
+    }
   }
+
 }
 
-html:not([mode]), html[mode=light] {
+html:not([mode]),
+html[mode=light] {
   @include mode-toggle();
 }
 
@@ -41,7 +31,8 @@ html[mode=dark] {
 }
 
 @media (prefers-color-scheme: dark) {
-  html:not([mode]), html[mode=dark] {
+  html:not([mode]),
+  html[mode=dark] {
     @include mode-toggle(true);
   }
 
@@ -50,7 +41,7 @@ html[mode=dark] {
   }
 }
 
-html, body {
+:root {
   font-size: 16px;
 }
 
@@ -62,888 +53,1035 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
-/*--- sidebar layout ---*/
-
-$tab-count: {{ site.data.tabs | size }};
-
-$sidebar-display: "sidebar-display";
-
-#sidebar {
-  @include pl-pr(0);
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  overflow-y: auto;
-  width: $sidebar-width-medium;
-  z-index: 99;
-  background: var(--sidebar-bg);
-  a {
-    @include sidebar-links;
-  }
-
-  .site-title {
-    text-align: center;
-    a {
-      // color: var(--site-title-color);
-      font-weight: 900;
-      font-size: 1.5rem;
-      letter-spacing: .5px;
-      &:hover {
-        color: #fff;
-        text-decoration: none;
-      }
-    }
-  }
-
-  .site-subtitle {
-    font-size: 95%;
-    text-align: center;
-    color: #828282;
-    line-height: 1.2rem;
-    word-spacing: 1px;
-    margin: .5rem 1.5rem 2rem 1.5rem;
-  }
+/* --- Typography --- */
 
-  .sidebar-bottom {
-    .icon-border+a { // the icon behide mode-toggle
-      margin-left: .1rem;
-    }
-  }
-  .nav-link {
-    border-radius: 0;
-    font-size: .95rem;
-    font-weight: 600;
-    letter-spacing: 1px;
-  }
-  .nav-item {
-    height: $tab-height;
-    &:hover {
-      .nav-link {
-        color: #f8f9facf;
-      }
-    }
-    &.active {
-      .nav-link {
-        color: #fcfcfc;
-      }
-    }
-  }
-  ul {
-    height: $tab-height * $tab-count;
-    display: -webkit-box;
-    display: -ms-flexbox;
+h1 {
+  @extend %heading;
 
-    >li:last-child {
-      >a {
-        margin-right: -3px;
-        max-width: calc(100% - 3px);
-      }
-      &::after { // the cursor
-        visibility: hidden;
-        content: "";
-        position: relative;
-        right: 1px;
-        width: 3px;
-        height: $tab-cursor-height;
-        background-color: var(--nav-cursor-color);
-        pointer-events: none;
-      }
-    }
+  font-size: 1.8rem;
+}
 
-    @mixin fix-cursor($top) {
-      top: $top;
-      visibility: visible;
-    }
+h2 {
+  @extend %heading;
+  @extend %section;
+  @extend %anchor;
 
-    @for $i from 1 through $tab-count {
-      $offset: $tab-count - $i;
-      $top: -$offset * $tab-height + $tab-cursor-height / 2;
+  font-size: 1.4rem;
+}
 
-      @if $i < $tab-count {
-        >li.active:nth-child(#{$i}),
-        >li.nav-item:nth-child(#{$i}):hover {
-          ~li:last-child::after {
-            @include fix-cursor($top);
-          }
-        }
-      } @else {
-        >li.active:nth-child(#{$i}):last-child::after,
-        >li.nav-item:nth-child(#{$i}):last-child:hover::after {
-          @include fix-cursor($top);
-        }
-      }
+h3 {
+  @extend %heading;
+  @extend %section;
+  @extend %anchor;
 
-    } // @for
+  font-size: 1.25rem;
+}
 
-  } // ul
+h4 {
+  @extend %heading;
+  @extend %section;
+  @extend %anchor;
 
-  .sidebar-bottom {
-    font-size: 1.2rem;
-    margin: 2rem 2.5rem 1.6rem;
-    a {
-      margin-bottom: .5rem; // icons may have multi lines
-    }
+  font-size: 1.15rem;
+}
 
-    a:hover, #mode-toggle-wrapper>i:hover {
-      color: #fff;
-    }
+h5 {
+  @extend %heading;
+  @extend %section;
+  @extend %anchor;
 
-    #mode-toggle-wrapper {
-      i {
-        @include sidebar-links;
-        margin-right: 0;
-        font-size: 1.05rem;
-        text-align: center;
-        position: relative;
-        bottom: 1px;
-      }
-    }
+  font-size: 1.1rem;
+}
 
-    .icon-border {
-      background: #525354;
-      width: 3px;
-      height: 3px;
-      border-radius: 50%;
-      margin-top: .75rem;
-    }
+ol,
+ul {
+  ol,
+  ul {
+    margin-bottom: 1rem;
   }
-} // #sidebar
+}
 
-@media (hover: hover) {
-  #sidebar ul>li:last-child::after {
-    -webkit-transition: top .5s ease;
-    -moz-transition: top .5s ease;
-    -o-transition: top .5s ease;
-    transition: top .5s ease;
-  }
+a {
+  @extend %link-color;
 }
 
-#nav-wrapper {
-  width: 100%;
-  flex-grow: 1;
+img {
+  max-width: 100%;
 }
 
-#profile-wrapper {
-  margin-top: 2rem;
+blockquote {
+  border-left: 5px solid var(--blockquote-border-color);
+  padding-left: 1rem;
+  color: var(--blockquote-text-color);
 }
 
-#avatar {
-  >a {
-    display: block;
-    width: 6rem;
-    height: 6rem;
-    border-radius: 50%;
-    border: 2px solid #b6b6b6;
-    overflow: hidden;
-    transform: translateZ(0); // fixed the zoom in Safari
-    -webkit-transition: border-color 0.35s ease-in-out;
-    -moz-transition: border-color 0.35s ease-in-out;
-    transition: border-color 0.35s ease-in-out;
-  }
+kbd {
+  margin: 0 0.3rem;
+}
 
-  &:hover>a {
-    border-color: #fff;
-  }
+footer {
+  position: absolute;
+  bottom: 0;
+  padding: 0 1rem;
+  height: $footer-height;
+  font-size: 0.8rem;
+  color: #7a7b7d;
+  background-color: var(--footer-bg-color);
 
-  img {
-    width: 100%;
-    height: 100%;
-    -webkit-transition: transform .5s;
-    -moz-transition: transform .5s;
-    transition: transform .5s;
+  > div.d-flex {
+    line-height: 1.2rem;
+    width: 95%;
+    max-width: 1045px;
+    border-top: 1px solid var(--main-border-color);
+    margin-bottom: 1rem;
 
-    &:hover {
-      -ms-transform: scale(1.2);
-      -moz-transform: scale(1.2);
-      -webkit-transform: scale(1.2);
-      transform: scale(1.2);
+    > div {
+      width: 350px;
     }
   }
-} // #avatar
 
-#search-result-wrapper {
-  display: none;
-  position: fixed;
-  top: 0;
-  padding-top: 3rem;
-  height: 100%;
-  overflow: auto;
-  .post-content {
-    margin-top: 2rem;
+  a {
+    color: var(--footer-link);
+    &:link {
+      @include no-text-decoration;
+    }
+    &:hover {
+      @extend %link-hover;
+
+      @include no-text-decoration;
+    }
+  }
+  .footer-right {
+    text-align: right;
   }
 }
 
-/*--- top-bar ---*/
+/* --- Panels --- */
 
-#topbar-wrapper {
-  height: $topbar-height;
-  position: fixed;
-  top: 0;
-  left: 260px; /* same as sidebar width */
-  right: 0;
+.access {
+  top: 2rem;
   transition: top 0.2s ease-in-out;
-  z-index: 50;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
-  background-color: var(--topbar-wrapper-bg);
-}
-
-#topbar i { // icons
-  color: #999;
-}
+  margin-right: 1.5rem;
+  margin-top: 3rem;
+  margin-bottom: 4rem;
 
-#breadcrumb {
-  font-size: 1rem;
-  color: gray;
-  padding-left: .5rem;
-  a:hover {
-    @extend %link-hover;
+  &:only-child {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
   }
-  span {
+  &.topbar-down {
+    top: 6rem;
+  }
+  > div {
+    padding-left: 1rem;
+    border-left: 1px solid var(--main-border-color);
     &:not(:last-child) {
-      &::after {
-        content: "›";
-        padding: 0 .3rem;
-      }
+      margin-bottom: 4rem;
     }
   }
-}
-
-#sidebar-trigger,
-#search-trigger {
-  display: none;
-}
-
-#search-wrapper {
-  display: flex;
-  width: 95%;
-  border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-bg);
-  background: var(--search-wrapper-bg);
-  padding: 0 .5rem;
-  i {
-    z-index: 2;
-    font-size: .9rem;
-    color: var(--search-icon-color);
+  span {
+    @include panel-label;
   }
-  .fa-times-circle { /* button 'clean up' */
-    visibility: hidden;
+  .post-content {
+    font-size: 0.9rem;
   }
 }
 
-#search-cancel { /* 'Cancel' link */
-  color: var(--link-color);
-  margin-left: 1rem;
-  display: none;
-}
+#access-tags {
+  > div.post-content > div {
+    max-width: 80%;
+  }
 
-#search-input {
-  background: center;
-  border: 0;
-  border-radius: 0;
-  padding: .18rem .3rem;
-  color: var(--text-color);
-}
-
-#search-input {
-  &:focus {
-    box-shadow: none;
-    background: center;
-    &.form-control {
-      &::-webkit-input-placeholder { @include input-placeholder }
-      &::-moz-placeholder { @include input-placeholder }
-      &:-ms-input-placeholder { @include input-placeholder }
-      &::placeholder { @include input-placeholder }
-    }
-  }
-}
-
-#search-hints {
-  display: none;
   .post-tag {
     display: inline-block;
     line-height: 1rem;
-    font-size: 1rem;
-    background: var(--search-tag-bg);
-    border: none;
-    padding: .5rem;
-    margin: 0 1rem 1rem 0;
-    &::before {
-      content: "#";
-      color: var(--text-muted-color);
-      padding-right: .2rem;
+    font-size: 0.85rem;
+    background: none;
+    border: 1px solid var(--btn-border-color);
+    border-radius: 0.8rem;
+    padding: 0.3rem 0.5rem;
+    margin: 0 0.35rem 0.5rem 0;
+    &:hover {
+      background-color: #2a408e;
+      border-color: #2a408e;
+      color: #fff;
+      transition: none;
     }
   }
 }
 
-#search-results {
-  padding-bottom: 6rem;
+#access-lastmod {
+
+  li {
+    height: 1.8rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    list-style: none;
+  }
+
   a {
-    @extend %link-color;
-    @extend %no-bottom-border;
-    @extend %heading;
-    font-size: 1.4rem;
-    line-height: 2.5rem;
     &:hover {
       @extend %link-hover;
     }
+
+    @extend %no-bottom-border;
+
+    color: #6c757d;
   }
-  >div {
-    max-width: 100%;
+
+}
+
+.footnotes > ol {
+  padding-left: 2rem;
+  margin-top: 0.5rem;
+  > li {
     &:not(:last-child) {
-      margin-bottom: 1rem;
+      margin-bottom: 0.3rem;
     }
-    i { // icons
-      color: #818182;
-      margin-right: .15rem;
-      font-size: 80%;
+    > p {
+      margin-left: 0.25em;
+      margin-top: 0;
+      margin-bottom: 0;
     }
-    >p {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
+    // [scroll-focus] added by `smooth-scroll.js`
+    &:target:not([scroll-focus]),
+    &[scroll-focus=true] > p {
+      background-color: var(--footnote-target-bg);
+      width: fit-content;
+      -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
+      transition: background-color 1.5s ease-in-out;
     }
   }
 }
 
-#topbar-title {
-  display: none;
-  font-size: 1.1rem;
-  font-weight: 600;
-  font-family: sans-serif;
-  color: var(--topbar-text-color);
-  text-align: center;
-  width: 70%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-  white-space: nowrap;
-}
+.footnote {
+  @at-root a#{&} {
+    @include ml-mr(1px);
+    @include pl-pr(2px);
 
-#mask {
-  display: none;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 1;
-  @at-root [#{$sidebar-display}] & {
-    display: block!important;
+    border-bottom-style: none !important;
+    -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
+    transition: background-color 1.5s ease-in-out;
   }
-}
 
-/*--- main wrapper ---*/
-
-#main-wrapper {
-  background-color: var(--main-wrapper-bg);
-  position: relative;
-  min-height: 100vh;
-  padding-bottom: $footer-height;
-  @include pl-pr(0);
+  // [scroll-focus] added by `smooth-scroll.js`
+  @at-root sup:target:not([scroll-focus]),
+  sup[scroll-focus=true] > a#{&} {
+    background-color: var(--footnote-target-bg);
+  }
 }
 
-#main>div.row:first-child>div {
-  &:nth-child(1), &:nth-child(2) {
-    margin-top: $topbar-height; /* same as the height of topbar */
-  }
-  &:first-child {
-    /* 3rem for topbar, 6rem for footer */
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
+.reversefootnote {
+  @at-root a#{&} {
+    font-size: 0.6rem;
+    position: absolute;
+    line-height: 1;
+    padding-top: 0.5em;
+    margin-left: 0.5em;
+    border-bottom-style: none !important;
   }
 }
 
-#post-wrapper {
-  min-height: calc(100vh - #{$topbar-height}
-    - #{$footer-height} - #{$post-extend-min-height})!important;
-  .post-content {
-    a:hover {
+.post {
+  h1 {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+  }
+  em { /* MarkDown italic */
+    padding-right: 0.2rem;
+  }
+  a:hover {
+    code {
       @extend %link-hover;
     }
   }
 }
 
-#topbar-wrapper.row,
-#main>.row,
-#search-result-wrapper>.row {
-  @include ml-mr(0);
-}
+/* --- Begin of Markdown table style --- */
 
-footer {
-  position: absolute;
-  bottom: 0;
-  padding: 0 1rem;
-  height: $footer-height;
-  font-size: 0.8rem;
-  color: #7a7b7d;
-  background-color: var(--footer-bg-color);
-  >div.d-flex {
-    line-height: 1.2rem;
-    width: 95%;
-    max-width: 1045px;
-    border-top: 1px solid var(--main-border-color);
-    margin-bottom: 1rem;
-    >div {
-      width: 350px;
+.table-wrapper { // it will be created by Liquid
+  overflow-x: auto;
+  margin-bottom: 1.5rem;
+
+  > table {
+    min-width: 100%;
+    overflow-x: auto;
+    border-spacing: 0;
+
+    thead {
+      border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+      th {
+        @extend %table-cell;
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid var(--tb-border-color);
+        &:nth-child(2n) {
+          background-color: var(--tb-even-bg);
+        }
+        &:nth-child(2n + 1) {
+          background-color: var(--tb-odd-bg);
+        }
+        td {
+          @extend %table-cell;
+        }
+      }
     }
   }
+}
+
+/* --- post --- */
+
+.pageviews .fa-spinner {
+  font-size: 80%;
+}
+
+.post-meta {
+  font-size: 0.85rem;
+  word-spacing: 1px;
   a {
-    @include semi-bold;
-    color: var(---footer-link);
-    &:link {
-      @include no-text-decoration;
+    @extend %link-color;
+    @extend %link-underline;
+    &:not(:last-child) {
+      margin-right: 2px;
     }
     &:hover {
-      @extend  %link-hover;
-      @include no-text-decoration;
+      @extend %link-hover;
     }
   }
-  .footer-right {
-    text-align: right;
-  }
 }
 
-/*--- Panels ---*/
+.post-content {
+  line-height: 1.8;
+  margin-top: 2rem;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
 
-.access {
-  top: 2rem;
-  transition: top 0.2s ease-in-out;
-  margin-right: 1.5rem;
-  margin-top: 3rem;
-  margin-bottom: 4rem;
-  &:only-child {
-    position: -webkit-sticky; /* Safari */
-    position: sticky;
-  }
-  &.topbar-down {
-    top: 6rem;
+  img[data-src] {
+    margin: 0.5rem 0;
   }
-  >div {
-    padding-left: 1rem;
-    border-left: 1px solid var(--main-border-color);
-    &:not(:last-child) {
-      margin-bottom: 4rem;
+
+  @mixin img-caption {
+    + em {
+      display: block;
+      text-align: center;
+      font-style: normal;
+      font-size: 80%;
+      padding: 0;
+      color: #6d6c6c;
     }
   }
-  h3 {
-    padding-top: .5rem;
-    padding-bottom: .5rem;
-    margin-top: 0;
-    margin-bottom: 0;
-    letter-spacing: -0.02em;
-    @include label(inherit, 600);
-  }
-  .post-content {
-    font-size: .9rem;
-  }
-}
 
+  @mixin img($caption: false) {
+
+    > img[data-src] {
+      @if $caption {
+        @include img-caption;
+      }
+
+      &.left {
+        float: left;
+        margin: 0.75rem 1rem 1rem 0;
+      }
+
+      &.right {
+        float: right;
+        margin: 0.75rem 0 1rem 1rem;
+      }
 
-#access-tags {
-  >div.post-content>div {
-    max-width: 80%;
-  }
-  .post-tag {
-    display: inline-block;
-    line-height: 1rem;
-    font-size: 0.85rem;
-    background: none;
-    border: 1px solid var(--btn-border-color);
-    border-radius: .8rem;
-    padding: .3rem .5rem;
-    margin: 0 .35rem .5rem 0;
-    &:hover {
-      background-color: #2a408e;
-      border-color: #2a408e;
-      color: #fff;
-      transition: none;
     }
   }
-}
 
-#access-lastmod {
-  ul {
-    >li {
-      height: 1.8rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      list-style: none;
+  a {
+    blockquote & {
+      color: var(--link-color);
     }
-    a {
-      color: #6c757d;
+
+    &:not(.img-hyperlink) {
+      @extend %link-color;
+      @extend %link-underline;
+      &:hover {
+        @extend %link-hover;
+      }
+    }
+
+    &.img-hyperlink {
+      @include img;
+      @include img-caption;
     }
   }
 
-  a {
-    @extend %no-bottom-border;
-    &:hover {
-      @extend %link-hover;
+  > p {
+    > img[data-src]:not(.normal):not(.left):not(.right) {
+      @include align-center;
     }
   }
-}
 
-/*--- button back-to-top ---*/
+  p {
+    @include img(true);
 
-#back-to-top {
-  display: none;
-  z-index: 1;
-  cursor: pointer;
-  position: fixed;
-  background: var(--button-bg);
-  color: var(--btn-backtotop-color);
-  height: 2.6em;
-  width: 2.7em;
-  border-radius: 50%;
-  border: 1px solid var(--btn-backtotop-border-color);
-  transition: 0.2s ease-out;
-  -webkit-transition: 0.2s ease-out;
+    font-size: 1.08rem;
+  }
+
+  ul {
+    // attribute 'hide-bullet' was added by liquid
+    .task-list-item[hide-bullet] {
+      list-style-type: none;
+
+      > i { // checkbox icon
+        margin: 0 0.4rem 0.2rem -1.4rem;
+        vertical-align: middle;
+        color: var(--checkbox-color);
+        &.checked {
+          color: var(--checkbox-checked-color);
+        }
+      }
+
+    }
+
+    input[type=checkbox] {
+      margin: 0 0.5rem 0.2rem -1.3rem;
+      vertical-align: middle;
+    }
+
+  } // ul
+
+  > ol,
+  > ul {
+    padding-left: 2rem;
+
+    li {
+      + li {
+        margin-top: 0.3rem;
+      }
+
+      ol,
+      ul { // sub list
+        padding-left: 2rem;
+        margin-top: 0.3rem;
+      }
+    }
+
+  }
+
+  > ol {
+    li {
+      padding-left: 0.25em;
+    }
+  }
+
+  dl > dd {
+    margin-left: 1rem;
+  }
+
+} // .post-content
+
+.tag:hover {
+  @extend %tag-hover;
 }
 
-#back-to-top:hover {
-  transform: translate3d(0, -5px, 0);
-  -webkit-transform: translate3d(0, -5px, 0);
+.post-tag {
+  display: inline-block;
+  min-width: 2rem;
+  text-align: center;
+  background: var(--tag-bg);
+  border-radius: 0.3rem;
+  padding: 0 0.4rem;
+  color: inherit;
+  line-height: 1.3rem;
+
+  &:not(:last-child) {
+    margin-right: 0.2rem;
+  }
+
+  &:hover {
+    @extend %tag-hover;
+
+    border-bottom: none;
+    text-decoration: none;
+    color: #d2603a;
+  }
 }
 
-/*--- Typography ---*/
+/* --- buttons --- */
+.btn-lang {
+  border: 1px solid !important;
+  padding: 1px 3px;
+  border-radius: 3px;
+  color: var(--link-color);
+  &:focus {
+    box-shadow: none;
+  }
+}
 
-h1 {
-  @extend %heading;
-  font-size: 1.8rem;
+/* --- Effects classes --- */
+
+.semi-bold {
+  font-weight: 600 !important;
 }
 
-h2 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-  font-size: 1.4rem;
+.loaded {
+  display: block !important;
+
+  @at-root .d-flex#{&} {
+    display: flex !important;
+  }
 }
 
-h3 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-  font-size: 1.25rem;
+.unloaded {
+  display: none !important;
 }
 
-h4 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-  font-size: 1.15rem;
+.visible {
+  visibility: visible !important;
 }
 
-h5 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-  font-size: 1.1rem;
+.hidden {
+  visibility: hidden !important;
 }
 
-blockquote {
-  border-left: 5px solid var(--blockquote-border-color);
-  padding-left: 1rem;
-  color: var(--blockquote-text-color);
-  .post-content & {
-    a {
-      color: var(--link-color);
-    }
-  }
+.flex-grow-1 {
+  -ms-flex-positive: 1 !important;
+  flex-grow: 1 !important;
 }
 
-kbd {
-  margin: 0 .3rem;
+.btn-box-shadow {
+  box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
 }
 
-sup {
-  @extend %anchor;
+.topbar-up {
+  top: -3rem !important; /* same as topbar height. */
 }
 
-.footnotes ol {
-  margin-top: .5rem;
-  >li {
-    padding-top: .2rem;
-    margin-top: -0.2rem;
-    >p {
-      padding-left: .2em;
-    }
-    &:not(:last-child) {
-      margin-bottom: -.8rem;
-    }
-    &:target>p {
-      background-color: var(--footnote-target-bg);
-      width: fit-content;
-      -webkit-transition: background-color 1.5s ease-in-out;
-      /* Safari prior 6.1 */
-      transition: background-color 1.5s ease-in-out;
-    }
-  }
+.no-text-decoration {
+  @include no-text-decoration;
 }
 
-.footnote {
-  @at-root a#{&} {
-    margin: 0 .2em;
-    border-bottom-style: none !important;
-    -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
-    transition: background-color 1.5s ease-in-out;
-  }
-  @at-root sup:target>a#{&} {
-    background-color: var(--footnote-target-bg);
-    padding: 0 2px;
-  }
+.tooltip-inner { /* Overrided BS4 Tooltip */
+  font-size: 0.7rem;
+  max-width: 220px;
+  text-align: left;
 }
 
-.reversefootnote {
-  @at-root a#{&} {
-    font-size: .6rem;
-    position: absolute;
-    line-height: 1;
-    padding-top: .5em;
-    margin-left: .5em;
-    border-bottom-style: none !important;
-  }
+.disabled {
+  color: rgb(206, 196, 196);
+  pointer-events: auto;
+  cursor: not-allowed;
 }
 
-a {
-  @at-root p>#{&} {
-    @extend %link-color;
-  }
-  @at-root span>#{&} {
-    @extend %link-color;
-  }
-  .post-preview & {
-    @extend %link-color;
+.hide-border-bottom {
+  border-bottom: none !important;
+}
+
+.input-focus {
+  box-shadow: none;
+  border-color: var(--input-focus-border-color) !important;
+  background: center !important;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+/* --- sidebar layout --- */
+
+$tab-count: 5 !default;
+
+$sidebar-display: "sidebar-display";
+
+#sidebar {
+  @include pl-pr(0);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  overflow-y: auto;
+  width: $sidebar-width-medium;
+  z-index: 99;
+  background: var(--sidebar-bg);
+
+  a {
+    @include sidebar-links;
+
     &:hover {
-      @extend %link-hover;
+      @include no-text-decoration;
+
+      color: #fff;
     }
   }
-  .categories &,
-  #page-category &,
-  #tags &,
-  #archives & {
-    &:not(:hover) {
-      @extend %no-bottom-border;
+
+  #avatar {
+    &:hover > a {
+      border-color: #fff;
     }
-  }
 
-} // a
+    > a {
+      display: block;
+      width: 6rem;
+      height: 6rem;
+      border-radius: 50%;
+      border: 2px solid #b6b6b6;
+      overflow: hidden;
+      transform: translateZ(0); // fixed the zoom in Safari
+      -webkit-transition: border-color 0.35s ease-in-out;
+      -moz-transition: border-color 0.35s ease-in-out;
+      transition: border-color 0.35s ease-in-out;
+    }
 
-.post {
-  h1 {
-    margin-top: 3rem;
+    img {
+      width: 100%;
+      height: 100%;
+      -webkit-transition: transform 0.5s;
+      -moz-transition: transform 0.5s;
+      transition: transform 0.5s;
+
+      &:hover {
+        -ms-transform: scale(1.2);
+        -moz-transform: scale(1.2);
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+      }
+    }
+  } // #avatar
+
+  .site-title {
+    a {
+      font-weight: 900;
+      font-size: 1.5rem;
+      letter-spacing: 0.5px;
+    }
   }
-  em { /* MarkDown italic */
-    padding-right: .2rem;
+
+  .site-subtitle {
+    font-size: 95%;
+    color: #828282;
+    line-height: 1.2rem;
+    word-spacing: 1px;
+    margin: 0.5rem 1.5rem 0.5rem 1.5rem;
+    min-height: 3rem; // avoid vertical shifting in multi-line words
+    user-select: none;
   }
-  a:hover {
-    code {
-      @extend %link-hover;
+
+  .nav-link {
+    border-radius: 0;
+    font-size: 0.95rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  .nav-item {
+    text-align: center;
+    display: table;
+    height: $tab-height;
+    &:hover {
+      .nav-link {
+        color: #f8f9facf;
+      }
+    }
+    &.active {
+      .nav-link {
+        color: #fcfcfc;
+      }
     }
   }
-}
 
+  ul {
+    height: $tab-height * $tab-count;
+    margin-bottom: 2rem;
+    padding-left: 0;
 
-/*--- Begin of Markdown table style ---*/
+    li {
+      width: 100%;
 
-div.post-content {
-  >table, li>table {
-    min-width: 60%;
-    display: block;
-    overflow-x: auto;
-    border-collapse: collapse;
-    border-spacing: 0;
-    margin-bottom: 1.5rem;
-  }
-}
+      &:last-child {
+        $cursor-width: 3px;
+
+        a {
+          position: relative;
+          left: $cursor-width / 2;
+          width: 100%;
+        }
 
-table {
-  thead {
-    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
-    +tbody tr {
-      &:nth-child(2n) {
-        background-color: var(--tb-even-bg);
+        &::after { // the cursor
+          display: table;
+          visibility: hidden;
+          content: "";
+          position: relative;
+          right: 1px;
+          width: $cursor-width;
+          height: $tab-cursor-height;
+          border-radius: 1px;
+          background-color: var(--nav-cursor-color);
+          pointer-events: none;
+        }
       }
-      &:nth-child(2n + 1) {
-        background-color: var(--tb-odd-bg);
+    } // li
+
+    @mixin fix-cursor($top) {
+      top: $top;
+      visibility: visible;
+    }
+
+    @for $i from 1 through $tab-count {
+      $offset: $tab-count - $i;
+      $top: -$offset * $tab-height + $tab-cursor-height / 2;
+
+      @if $i < $tab-count {
+        > li.active:nth-child(#{$i}),
+        > li.nav-item:nth-child(#{$i}):hover {
+          ~li:last-child::after {
+            @include fix-cursor($top);
+          }
+        }
+      } @else {
+        > li.active:nth-child(#{$i}):last-child::after,
+        > li.nav-item:nth-child(#{$i}):last-child:hover::after {
+          @include fix-cursor($top);
+        }
       }
-      & {
-        border-bottom: 1px solid var(--tb-border-color);
+
+    } // @for
+
+  } // ul
+
+  .sidebar-bottom {
+    font-size: 1.2rem;
+    margin-bottom: 2.1rem;
+
+    @include ml-mr(auto);
+    @include pl-pr(1rem);
+
+    %icon {
+      width: 2.4rem;
+      text-align: center;
+    }
+
+    a {
+      @extend %icon;
+    }
+
+    #mode-toggle-wrapper {
+      @extend %icon;
+
+      i {
+        @include sidebar-links;
+
+        margin: 0;
+        font-size: 1.05rem;
+        text-align: center;
+        position: relative;
+        bottom: 1px;
       }
+
     }
-    th {
-      @extend %table-cell;
+
+    .icon-border {
+      background-color: #525354;
+      content: "";
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+      position: relative;
+      top: 12px;
     }
-  }
 
-  tbody td {
-    @extend %table-cell;
+    a:hover,
+    #mode-toggle-wrapper i:hover {
+      color: #fff;
+    }
+
+  } // .sidebar-bottom
+
+} // #sidebar
+
+@media (hover: hover) {
+  #sidebar ul > li:last-child::after {
+    -webkit-transition: top 0.5s ease;
+    -moz-transition: top 0.5s ease;
+    -o-transition: top 0.5s ease;
+    transition: top 0.5s ease;
   }
+}
 
-} // table
+.profile-wrapper {
+  margin-top: 2rem;
+  width: 100%;
+}
 
+#search-result-wrapper {
+  display: none;
+  height: 100%;
+  overflow: auto;
+  .post-content {
+    margin-top: 2rem;
+  }
+}
 
-/*--- post ---*/
+/* --- top-bar --- */
 
-.pageviews .fa-spinner {
-  font-size: 80%;
+#topbar-wrapper {
+  height: $topbar-height;
+  position: fixed;
+  top: 0;
+  left: 260px; /* same as sidebar width */
+  right: 0;
+  transition: top 0.2s ease-in-out;
+  z-index: 50;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
+  background-color: var(--topbar-wrapper-bg);
 }
 
-.post-meta {
-  font-size: 0.85rem;
-  word-spacing: 1px;
-  a {
-    @extend %link-color;
-    @extend %link-underline;
-    &:not(:last-child) {
-      margin-right: 2px;
-    }
-    &:hover {
+#topbar {
+  i { // icons
+    color: #999;
+  }
+
+  #breadcrumb {
+    font-size: 1rem;
+    color: gray;
+    padding-left: 0.5rem;
+
+    a:hover {
       @extend %link-hover;
     }
+
+    span {
+      &:not(:last-child) {
+        &::after {
+          content: "›";
+          padding: 0 0.3rem;
+        }
+      }
+    }
   }
+} // #topbar
+
+#sidebar-trigger,
+#search-trigger {
+  display: none;
 }
 
-.post-content {
-  line-height: 1.8;
-  margin-top: 2rem;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
+#search-wrapper {
+  display: flex;
+  width: 95%;
+  border-radius: 1rem;
+  border: 1px solid var(--search-wrapper-bg);
+  background: var(--search-wrapper-bg);
+  padding: 0 0.5rem;
+  i {
+    z-index: 2;
+    font-size: 0.9rem;
+    color: var(--search-icon-color);
+  }
+  .fa-times-circle { /* button 'clean up' */
+    visibility: hidden;
+  }
+}
+
+#search-cancel { /* 'Cancel' link */
+  color: var(--link-color);
+  margin-left: 1rem;
+  display: none;
+}
+
+#search-input {
+  background: center;
+  border: 0;
+  border-radius: 0;
+  padding: 0.18rem 0.3rem;
+  color: var(--text-color);
+  font-size: 95%;
+
+  &:focus {
+    box-shadow: none;
+    background: center;
+    &.form-control {
+      &::-webkit-input-placeholder { @include input-placeholder; }
+      &::-moz-placeholder { @include input-placeholder; }
+      &:-ms-input-placeholder { @include input-placeholder; }
+      &::placeholder { @include input-placeholder; }
+    }
+  }
+}
+
+#search-hints {
+  display: none;
+
+  .post-tag {
+    display: inline-block;
+    line-height: 1rem;
+    font-size: 1rem;
+    background: var(--search-tag-bg);
+    border: none;
+    padding: 0.5rem;
+    margin: 0 1rem 1rem 0;
+    &::before {
+      content: "#";
+      color: var(--text-muted-color);
+      padding-right: 0.2rem;
+    }
+  }
+}
+
+#search-results {
+  padding-bottom: 6rem;
   a {
-    @extend %link-color;
-    @extend %link-underline;
     &:hover {
       @extend %link-hover;
     }
-  }
-  p {
-    font-size: 1.08rem;
-  }
-}
 
-.tag:hover {
-  @extend %tag-hover;
-}
+    @extend %link-color;
+    @extend %no-bottom-border;
+    @extend %heading;
 
-.post-tag {
-  display: inline-block;
-  min-width: 2rem;
-  text-align: center;
-  background: var(--tag-bg);
-  border-radius: .3rem;
-  padding: 0 .4rem;
-  color: inherit;
-  line-height: 1.3rem;
-  &:not(:last-child) {
-    margin-right: .2rem;
+    font-size: 1.4rem;
+    line-height: 2.5rem;
   }
 
-  &:hover {
-    @extend %tag-hover;
-    border-bottom: none;
-    text-decoration: none;
-    color: #d2603a;
-  }
-}
+  > div {
+    width: 100%;
 
-/* --- buttons --- */
-.btn-lang {
-  border: 1px solid !important;
-  padding: 1px 3px;
-  border-radius: 3px;
-  color: var(--link-color);
-  &:focus {
-    box-shadow: none;
-  }
-}
+    &:not(:last-child) {
+      margin-bottom: 1rem;
+    }
 
-/* --- Effects classes --- */
+    i { // icons
+      color: #818182;
+      margin-right: 0.15rem;
+      font-size: 80%;
+    }
 
-.loaded {
-  display: block !important;
-  @at-root .d-flex#{&} {
-    display: flex !important;
+    > p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
   }
-}
+} // #search-results
 
-.unloaded {
-  display: none !important;
+#topbar-title {
+  display: none;
+  font-size: 1.1rem;
+  font-weight: 600;
+  font-family: sans-serif;
+  color: var(--topbar-text-color);
+  text-align: center;
+  width: 70%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+  white-space: nowrap;
 }
 
-.visable {
-  visibility: visible !important;
+#page {
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
+    }
+  }
 }
 
-.hidden {
-  visibility: hidden !important;
-}
+#mask {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
 
-.flex-grow-1 {
-  -ms-flex-positive: 1!important;
-  flex-grow: 1!important;
+  @at-root [#{$sidebar-display}] & {
+    display: block !important;
+  }
 }
 
-.btn-box-shadow {
-  box-shadow: 0 0 8px 0 var(--btn-box-shadow)!important;
-}
+/* --- main wrapper --- */
 
-.topbar-up {
-  top: -3rem !important; /* same as topbar height. */
+#main-wrapper {
+  background-color: var(--main-wrapper-bg);
+  position: relative;
+  min-height: 100vh;
+  padding-bottom: $footer-height;
+
+  @include pl-pr(0);
 }
 
-.no-text-decoration {
-  @include no-text-decoration;
+#main > div.row:first-child > div {
+  &:nth-child(1),
+  &:nth-child(2) {
+    margin-top: $topbar-height; /* same as the height of topbar */
+  }
+  &:first-child {
+    /* 3rem for topbar, 6rem for footer */
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
+  }
 }
 
-.tooltip-inner { /* Overrided BS4 Tooltip */
-  font-size: .7rem;
-  max-width: 220px;
-  text-align: left;
+#post-wrapper {
+  min-height: calc(
+    100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
 }
 
-.disabled {
-  color: rgb(206, 196, 196);
-  pointer-events: auto;
-  cursor: not-allowed;
+#topbar-wrapper.row,
+#main > .row,
+#search-result-wrapper > .row {
+  @include ml-mr(0);
 }
 
-.hide-border-bottom {
-  border-bottom: none!important;
+/* --- button back-to-top --- */
+
+#back-to-top {
+  display: none;
+  z-index: 1;
+  cursor: pointer;
+  position: fixed;
+  background: var(--button-bg);
+  color: var(--btn-backtotop-color);
+  height: 2.6em;
+  width: 2.7em;
+  border-radius: 50%;
+  border: 1px solid var(--btn-backtotop-border-color);
+  transition: 0.2s ease-out;
+  -webkit-transition: 0.2s ease-out;
 }
 
-.input-focus {
-  box-shadow: none;
-  border-color: var(--input-focus-border-color) !important;
-  background: center !important;
-  transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
+#back-to-top:hover {
+  transform: translate3d(0, -5px, 0);
+  -webkit-transform: translate3d(0, -5px, 0);
 }
 
-/*--- Responsive Design ---*/
+/* --- Responsive Design --- */
 
 @media all and (max-width: 576px) {
 
   $footer-height: 6rem; // overwrite
 
-  #main>div.row:first-child>div:first-child {
+  #main > div.row:first-child > div:first-child {
     min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
   }
 
   #post-wrapper {
-    min-height: calc(100vh - #{$topbar-height}
-      - #{$footer-height} - #{$post-extend-min-height}) !important;
+    min-height: calc(
+      100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
     h1 {
       margin-top: 2.2rem;
       font-size: 1.55rem;
     }
   }
 
-  #avatar>a {
+  #avatar > a {
     width: 5rem;
     height: 5rem;
   }
@@ -952,36 +1090,28 @@ table {
     @include ml-mr(1.8rem);
   }
 
-  /* table text in small screens */
-  div>table, p~table {
-    width: 100%;
-    table-layout: fixed;
-    word-wrap: break-word;
-  }
-
   #main-wrapper {
     padding-bottom: $footer-height;
   }
 
   footer {
     height: $footer-height;
-    >div.d-flex {
+    > div.d-flex {
       width: 100%;
       padding: 1.5rem 0;
-      margin-bottom: .3rem;
+      margin-bottom: 0.3rem;
       flex-wrap: wrap;
-      justify-content: left!important;
-      -ms-flex-pack: distribute!important;
-      justify-content: space-around!important;
+      -ms-flex-pack: distribute !important;
+      justify-content: space-around !important;
     }
-    .footer-left, .footer-right {
+    .footer-left,
+    .footer-right {
       text-align: center;
     }
   }
 
 }
 
-
 /* Hide Sidebar and TOC */
 @media all and (max-width: 830px) {
   %slide {
@@ -989,11 +1119,19 @@ table {
     transition: transform 0.4s ease;
   }
 
-
-  html, body {
+  html,
+  body {
     overflow-x: hidden;
   }
 
+  .footnotes ol > li {
+    padding-top: 3.5rem;
+    margin-top: -3.2rem;
+    &:first-child {
+      margin-top: -3.5rem;
+    }
+  }
+
   [#{$sidebar-display}] {
 
     #sidebar {
@@ -1020,12 +1158,9 @@ table {
     }
   }
 
-  #topbar-wrapper {
-    @extend %slide;
-  }
-
   #main-wrapper {
     @extend %slide;
+
     padding-top: $topbar-height;
   }
 
@@ -1033,19 +1168,14 @@ table {
     width: 100%;
   }
 
-  #page h1.dynamic-title {
-    display: none;
-    ~.post-content {
-      margin-top: 3rem;
-    }
-  }
-
   #breadcrumb,
   #search-wrapper {
     display: none;
   }
 
   #topbar-wrapper {
+    @extend %slide;
+
     left: 0;
   }
 
@@ -1053,8 +1183,8 @@ table {
     top: 0 !important;
   }
 
-  #main>div.row:first-child>div:nth-child(1),
-  #main>div.row:first-child>div:nth-child(2) {
+  #main > div.row:first-child > div:nth-child(1),
+  #main > div.row:first-child > div:nth-child(2) {
     margin-top: 0;
   }
 
@@ -1065,7 +1195,7 @@ table {
   }
 
   #search-wrapper {
-    &.loaded~a {
+    &.loaded ~ a {
       margin-right: 1rem;
     }
     .fa-times-circle {
@@ -1088,35 +1218,28 @@ table {
   }
 
   #tags {
-    -webkit-box-pack: center!important;
-    -ms-flex-pack: center!important;
-    justify-content: center!important;
+    -webkit-box-pack: center !important;
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
   }
 
-  sup {
-    padding-top: 3.4rem;
-  }
-
-  .footnotes ol>li {
-    padding-top: 3.5rem;
-    margin-top: -4.3rem;
-    &:first-child {
-      margin-top: -3.5rem;
+  #page h1.dynamic-title {
+    display: none;
+    ~ .post-content {
+      margin-top: 3rem;
     }
   }
-}
 
+}
 
 @media all and (min-width: 577px) and (max-width: 1199px) {
-  footer>.d-flex>div {
+  footer > .d-flex > div {
     width: 312px;
   }
 }
 
-
 /* Sidebar visible */
 @media all and (min-width: 831px) {
-
   /* Solved jumping scrollbar */
   html {
     overflow-y: scroll;
@@ -1126,7 +1249,7 @@ table {
     margin-left: $sidebar-width-medium;
   }
 
-  #profile-wrapper {
+  .profile-wrapper {
     margin-top: 3rem;
   }
 
@@ -1135,6 +1258,14 @@ table {
     min-width: 150px;
   }
 
+  #search-result-wrapper {
+    margin-top: 3rem;
+  }
+
+  div.post-content .table-wrapper > table {
+    min-width: 70%;
+  }
+
   /* button 'back-to-Top' position */
   #back-to-top {
     bottom: 5.5rem;
@@ -1149,7 +1280,7 @@ table {
     text-align: left;
   }
 
-  footer>div.d-flex {
+  footer > div.d-flex {
     width: 92%;
   }
 
@@ -1171,9 +1302,12 @@ table {
   #sidebar {
     width: $sidebar-width-small;
     .sidebar-bottom {
-      @include ml-mr(1.5rem);
+      a,
+      span {
+        width: 2rem;
+      }
       .icon-border {
-        @include ml-mr(.25rem);
+        left: -3px;
       }
     }
   }
@@ -1182,22 +1316,19 @@ table {
     left: 210px;
   }
 
-  #search-result-wrapper {
-    width: calc(100% - 210px);
-  }
-
-  #search-results>div {
+  #search-results > div {
     max-width: 700px;
   }
 
   .site-title {
     font-size: 1.3rem;
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
 
   .site-subtitle {
-    font-size: 90%;
     @include ml-mr(1rem);
+
+    font-size: 90%;
   }
 
   #main-wrapper {
@@ -1224,19 +1355,18 @@ table {
     padding: 0;
   }
 
-  #main>div.row {
-    -webkit-box-pack: center!important;
-    -ms-flex-pack: center!important;
-    justify-content: center!important;
+  #main > div.row {
+    -webkit-box-pack: center !important;
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
   }
 }
 
-
-/*--- desktop mode, both sidebar and panel are visible ---*/
+/* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
 
-  #main>div.row>div.col-xl-8 {
+  #main > div.row > div.col-xl-8 {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 75%;
     flex: 0 0 75%;
@@ -1259,16 +1389,12 @@ table {
   }
 
   #search-input {
-    -webkit-transition: all .3s ease-in-out;
-    transition: all .3s ease-in-out;
-  }
-
-  #search-result-wrapper {
-    width: calc(100% - 260px);
+    -webkit-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
   }
 
-  #search-results>div {
-    max-width: 46%;
+  #search-results > div {
+    width: 46%;
     &:nth-child(odd) {
       margin-right: 1.5rem;
     }
@@ -1285,7 +1411,7 @@ table {
     font-size: 1.03rem;
   }
 
-  footer>div.d-felx {
+  footer > div.d-felx {
     width: 85%;
   }
 
@@ -1293,16 +1419,16 @@ table {
 
 @media all and (min-width: 1400px) {
 
-  #main>div.row {
+  #main > div.row {
     padding-left: calc((100% - #{$main-content-max-width}) / 2);
-    >div.col-xl-8 {
+    > div.col-xl-8 {
       max-width: 850px;
     }
   }
 
   #search-result-wrapper {
     padding-right: 2rem;
-    >div {
+    > div {
       max-width: 1110px;
     }
   }
@@ -1325,10 +1451,10 @@ table {
     padding-left: 0;
   }
 
-  #main>div.row>div.col-xl-8 {
+  #main > div.row > div.col-xl-8 {
     padding-left: 0;
-    >div:first-child {
-      padding-left: .55rem !important;
+    > div:first-child {
+      padding-left: 0.55rem !important;
       padding-right: 1.9rem !important;
     }
   }
@@ -1353,138 +1479,150 @@ table {
     margin-right: 3%;
   }
 
-  #profile-wrapper {
-    margin: 4rem 2rem 3rem 4rem;
-    -ms-flex-direction: column!important;
+  #sidebar {
+    width: $sidebar-width-large;
 
-    #avatar {
-      -webkit-box-pack: normal !important;
-      -ms-flex-pack: normal !important;
-      justify-content: normal !important;
-      >a {
-        width: 6.2rem;
-        height: 6.2rem;
-      }
-    }
+    .profile-wrapper {
+      margin-top: 4rem;
+      margin-bottom: 1rem;
 
-    .profile-text {
-      margin-left: .5rem;
-      /* .d-flex */
-      display: -webkit-box!important;
-      display: -ms-flexbox!important;
-      display: flex!important;
-      /* .flex-wrap */
-      -ms-flex-wrap: wrap!important;
-      flex-wrap: wrap!important;
-      /* .align-content-center */
-      -ms-flex-line-pack: center!important;
-      align-content: center!important;
-      >div {
+      &.text-center {
         text-align: left !important;
-        width: 100%;
       }
-    }
-  }
 
-  #sidebar {
-    width: $sidebar-width-large;
+      %profile-ml {
+        margin-left: 4.5rem;
+      }
 
-    .site-title a {
-      font-size: 1.7rem;
-      letter-spacing: 1px;
-      margin: 0;
-    }
+      #avatar {
+        @extend %profile-ml;
 
-    .site-subtitle {
-      word-spacing: 0;
-      margin: .3rem 0 0 0;
-    }
+        > a {
+          width: 6.2rem;
+          height: 6.2rem;
+          &.mx-auto {
+            margin-left: 0 !important;
+          }
+        }
+      }
 
-    ul {
-      margin-left: 3%;
-      >li>a {
-        padding-left: 2.5rem;
-        -webkit-box-pack: start!important;
-        -ms-flex-pack: start!important;
-        justify-content: flex-start!important;
+      .site-title {
+        @extend %profile-ml;
+
+        a {
+          font-size: 1.7rem;
+          letter-spacing: 1px;
+        }
+      }
+
+      .site-subtitle {
+        @extend %profile-ml;
+
+        word-spacing: 0;
+        margin-top: 0.3rem;
       }
-    }
 
-    .nav-link {
-      >span {
-        letter-spacing: 3px;
+    } // .profile-wrapper (min-width: 1650px)
+
+    ul {
+      padding-left: 2.5rem;
+
+      > li:last-child {
+        > a {
+          position: static;
+        }
       }
-      >i {
-        @include icon-round(1.65rem);
-        line-height: 1rem;
-        font-size: .6rem;
-        padding: .5em 0 0 .1em;
-        display: inline-block!important;
+
+      .nav-item {
+        text-align: left;
+
+        .nav-link {
+          > span {
+            letter-spacing: 3px;
+          }
+
+          > i {
+            @include icon-round(1.65rem);
+
+            line-height: 1.5rem;
+            font-size: 0.6rem;
+            padding-top: 1px;
+            padding-left: 1px;
+            position: relative;
+            bottom: 1px;
+
+            &.unloaded {
+              display: inline-block !important;
+            }
+          }
+        }
+
       }
     }
 
     .sidebar-bottom {
-      margin-left: 3.5rem;
-      margin-right: 3rem;
-      font-size: 1.3rem;
+      padding-left: 3.5rem;
+      width: 100%;
+
+      &.justify-content-center {
+        -webkit-box-pack: start !important;
+        -ms-flex-pack: start !important;
+        justify-content: flex-start !important;
+      }
+
       a {
-        border: 1px solid;
-        border-radius: 50%;
         font-size: 1rem;
-        width: 2rem;
-        height: 2rem;
-        text-align: center;
-        i {
-          text-align: center;
-          width: 1.25em;
-          padding-top: .44rem;
-        }
+        width: 3rem;
+      }
+
+      i {
+        @include icon-round(2rem);
+
+        padding-top: 0.44rem;
+        margin-top: .7rem; // multi line space
+        bottom: 0;
       }
 
       #mode-toggle-wrapper {
-        font-size: .9rem;
+        width: 3rem;
+
         i {
-          @include icon-round(2rem);
-          padding-top: .44rem;
-          bottom: 0;
+          top: 11px;
         }
       }
 
       .icon-border {
-        @include ml-mr(.2rem);
-        margin-top: .85rem;
-        +a {
-          margin-left: 0;
-        }
+        top: 26px;
       }
+
     } // .sidebar-bottom
+
   } // #sidebar
-  footer>div.d-flex {
+
+  footer > div.d-flex {
     width: 87%;
     max-width: 1140px;
   }
 
   #search-result-wrapper {
-    width: calc(100% - #{$sidebar-width-large});
-    >div {
+    > div {
       max-width: #{$main-content-max-width};
     }
   }
 
 } // min-width: 1650px
 
-
 @media all and (min-width: 1700px) {
   #topbar-wrapper {
-    padding-right: calc(100% - #{$sidebar-width-large}
-     - (1920px - #{$sidebar-width-large}) ) /* 100% - 350px - (1920px - 350px); */
+    /* 100% - 350px - (1920px - 350px); */
+    padding-right: calc(100% - #{$sidebar-width-large} - (1920px - #{$sidebar-width-large}));
   }
 
   #topbar {
-    max-width: calc(#{$main-content-max-width} + 20px)
+    max-width: calc(#{$main-content-max-width} + 20px);
   }
 
-  #main>div.row {
+  #main > div.row {
     padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
   }
 
@@ -1504,12 +1642,12 @@ table {
 }
 
 @media (min-width: 1920px) {
-  #main>div.row {
+  #main > div.row {
     padding-left: 190px;
   }
 
   #search-result-wrapper {
-    padding-right: calc(100% - #{$sidebar-width-large} - 1530px);
+    padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
   }
 
   #panel-wrapper {
diff --git a/assets/css/_addon/module.scss b/_sass/addon/module.scss
similarity index 71%
rename from assets/css/_addon/module.scss
rename to _sass/addon/module.scss
index 24d27677155..d0015ab93ec 100644
--- a/assets/css/_addon/module.scss
+++ b/_sass/addon/module.scss
@@ -1,13 +1,8 @@
 /*
 * Mainly scss modules, only imported to `assets/css/main.scss`
-*
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
 */
 
-/*---------- scss placeholder ---------*/
+/* ---------- scss placeholder --------- */
 
 %tag-hover {
   background: var(--tag-hover);
@@ -15,12 +10,13 @@
 }
 
 %table-cell {
-  padding: .35rem .8rem;
+  padding: 0.4rem 1rem;
   font-size: 95%;
+  white-space: nowrap;
 }
 
 %link-hover {
-  color: #d2603a!important;
+  color: #d2603a !important;
   border-bottom: 1px solid #d2603a;
   text-decoration: none;
 }
@@ -38,6 +34,7 @@
 }
 
 %heading {
+  color: var(--heading-color);
   font-weight: 400;
   font-family: 'Lato', 'Microsoft Yahei', sans-serif;
 }
@@ -54,7 +51,7 @@
   margin-top: -2.5rem;
 }
 
-/*---------- scss mixin ---------*/
+/* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
   text-decoration: none;
@@ -64,7 +61,6 @@
   color: $color;
   transition: color 0.35s ease-in-out;
   user-select: none;
-  margin: 0 .25rem;
 }
 
 @mixin icon-round($diameter) {
@@ -96,5 +92,24 @@
   color: $color;
   font-size: $font-size;
   font-weight: $font-weight;
-  font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
+}
+
+@mixin panel-label {
+  @include label(inherit);
+
+  display: block;
+  line-height: 1.2;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  letter-spacing: -0.02em;
+}
+
+@mixin align-center {
+  position: relative;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
 }
diff --git a/assets/css/_addon/syntax.scss b/_sass/addon/syntax.scss
similarity index 57%
rename from assets/css/_addon/syntax.scss
rename to _sass/addon/syntax.scss
index 538c2620204..3651c4848fe 100644
--- a/assets/css/_addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -1,16 +1,12 @@
 /*
 * The syntax highlight.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
 */
 
-@import "_colors/light-syntax";
-@import "_colors/dark-syntax";
+@import "colors/light-syntax";
+@import "colors/dark-syntax";
 
-
-html:not([mode]), html[mode=light] {
+html:not([mode]),
+html[mode=light] {
   @include light-syntax;
 }
 
@@ -19,7 +15,8 @@ html[mode=dark] {
 }
 
 @media (prefers-color-scheme: dark) {
-  html:not([mode]), html[mode=dark] {
+  html:not([mode]),
+  html[mode=dark] {
     @include dark-syntax;
   }
 
@@ -28,33 +25,49 @@ html[mode=dark] {
   }
 }
 
-/*-- Codes Snippet --*/
+/* -- Codes Snippet -- */
 
-%highlight-pre-bg {
+%code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
-  border-radius: 5px;
+  border-radius: 6px;
+}
+
+%code-snippet-padding {
+  padding: 1.5rem;
+}
+
+$code-font-size: 0.85rem;
+
+div > pre {
+  @extend %code-snippet-bg;
+  @extend %code-snippet-radius;
+  @extend %code-snippet-padding;
 }
 
 .highlighter-rouge {
-  background-color: var(--highlight-bg-color);
+  @extend %code-snippet-bg;
   @extend %code-snippet-radius;
+
   color: var(--highlighter-rouge-color);
+  margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
 .highlight {
   @extend %code-snippet-radius;
-  background: var(--highlight-bg-color);
+  @extend %code-snippet-bg;
+
   @at-root figure#{&} {
-    background: var(--highlight-bg-color);
+    @extend %code-snippet-bg;
   }
+
   overflow: auto;
   .lineno {
-    margin: .8rem 0rem;
-    padding: 0 .5rem;
+    margin-left: 0.2rem;
+    padding-right: 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
@@ -66,6 +79,12 @@ html[mode=dark] {
     -o-user-select: none;
     user-select: none;
   }
+  pre {
+    margin-bottom: 0;
+    font-size: $code-font-size;
+    line-height: 1.4rem;
+    word-wrap: normal; /* Fixed Safari overflow-x */
+  }
   table {
     padding: 0;
     border: 0;
@@ -78,14 +97,6 @@ html[mode=dark] {
     padding: 0;
     border: 0;
   }
-  pre {
-    margin-bottom: 0;
-    font-size: .85rem;
-    line-height: 1.4rem;
-    word-wrap: normal;
-    /* Fixed Safari overflow-x */
-  }
-
 } //.highlight
 
 code {
@@ -93,27 +104,39 @@ code {
   -ms-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
+
   &.highlighter-rouge {
+    font-size: $code-font-size;
     padding: 3px 5px;
-    margin: 0 .15rem;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
   }
-  @at-root a>&.highlighter-rouge {
+
+  @at-root a > &.highlighter-rouge {
     padding-bottom: 0; // show link's underlinke
     color: inherit;
   }
-  @at-root a:hover>&.highlighter-rouge {
+
+  @at-root a:hover > &.highlighter-rouge {
     border-bottom: none;
   }
+
   blockquote &.highlighter-rouge {
     color: inherit;
   }
 }
 
 td.rouge-code {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding: 1.5rem 1.5rem 1.5rem 1rem;
+
+  // Prevent some browser extends from
+  // changing the URL string of code block.
+  a {
+    color: inherit !important;
+    border-bottom: none !important;
+    pointer-events: none;
+  }
+
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
@@ -126,7 +149,30 @@ div {
       display: none;
     }
     td.rouge-code {
-      padding: .8rem 1rem;
+      @extend %code-snippet-padding;
     }
   }
 }
+
+div[class^='language-']::before {
+  content: attr(lang);
+  position: absolute;
+  right: 2rem;
+  margin-top: 3px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--highlight-lineno-color);
+  text-transform: uppercase;
+}
+
+@media (min-width: 768px) {
+  div[class^='language-']::before {
+    right: 3.1rem;
+  }
+}
+
+@media (min-width: 1650px) {
+  div[class^='language-']::before {
+    right: 3.5rem;
+  }
+}
diff --git a/assets/css/_addon/variables.scss b/_sass/addon/variables.scss
similarity index 65%
rename from assets/css/_addon/variables.scss
rename to _sass/addon/variables.scss
index b59135453af..1d7e86738a9 100644
--- a/assets/css/_addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -1,15 +1,10 @@
 /*
 * Mainly scss variables
-*
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
 */
 
-/*--- ↓ width and height ----*/
+/* --- ↓ width and height ---- */
 
-$tab-height: 3.3rem;
+$tab-height: 3.2rem;
 $tab-cursor-height: 1.6rem;
 
 $sidebar-width-small: 210px;
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
new file mode 100644
index 00000000000..6457e7c3e1b
--- /dev/null
+++ b/_sass/colors/dark-syntax.scss
@@ -0,0 +1,84 @@
+/*
+ * The syntax dark mode styles.
+ */
+
+@mixin dark-syntax {
+  /* -----  My styles ------ */
+  --highlight-bg-color: #252525;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --highlight-lineno-border-color: #303435;
+  --inline-code-bg: #272822;
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+  kbd { background-color: black; }
+
+  /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
+  .highlight pre { background-color: var(--highlight-bg-color); }
+  .highlight .hll { background-color: var(--highlight-bg-color); }
+  .highlight .c { color: #75715e; } /* Comment */
+  .highlight .err { color: #960050; background-color: #1e0010; } /* Error */
+  .highlight .k { color: #66d9ef; } /* Keyword */
+  .highlight .l { color: #ae81ff; } /* Literal */
+  .highlight .n { color: #f8f8f2; } /* Name */
+  .highlight .o { color: #f92672; } /* Operator */
+  .highlight .p { color: #f8f8f2; } /* Punctuation */
+  .highlight .cm { color: #75715e; } /* Comment.Multiline */
+  .highlight .cp { color: #75715e; } /* Comment.Preproc */
+  .highlight .c1 { color: #75715e; } /* Comment.Single */
+  .highlight .cs { color: #75715e; } /* Comment.Special */
+  .highlight .ge { color: inherit; font-style: italic; } /* Generic.Emph */
+  .highlight .gs { font-weight: bold; } /* Generic.Strong */
+  .highlight .kc { color: #66d9ef; } /* Keyword.Constant */
+  .highlight .kd { color: #66d9ef; } /* Keyword.Declaration */
+  .highlight .kn { color: #f92672; } /* Keyword.Namespace */
+  .highlight .kp { color: #66d9ef; } /* Keyword.Pseudo */
+  .highlight .kr { color: #66d9ef; } /* Keyword.Reserved */
+  .highlight .kt { color: #66d9ef; } /* Keyword.Type */
+  .highlight .ld { color: #e6db74; } /* Literal.Date */
+  .highlight .m { color: #ae81ff; } /* Literal.Number */
+  .highlight .s { color: #e6db74; } /* Literal.String */
+  .highlight .na { color: #a6e22e; } /* Name.Attribute */
+  .highlight .nb { color: #f8f8f2; } /* Name.Builtin */
+  .highlight .nc { color: #a6e22e; } /* Name.Class */
+  .highlight .no { color: #66d9ef; } /* Name.Constant */
+  .highlight .nd { color: #a6e22e; } /* Name.Decorator */
+  .highlight .ni { color: #f8f8f2; } /* Name.Entity */
+  .highlight .ne { color: #a6e22e; } /* Name.Exception */
+  .highlight .nf { color: #a6e22e; } /* Name.Function */
+  .highlight .nl { color: #f8f8f2; } /* Name.Label */
+  .highlight .nn { color: #f8f8f2; } /* Name.Namespace */
+  .highlight .nx { color: #a6e22e; } /* Name.Other */
+  .highlight .py { color: #f8f8f2; } /* Name.Property */
+  .highlight .nt { color: #f92672; } /* Name.Tag */
+  .highlight .nv { color: #f8f8f2; } /* Name.Variable */
+  .highlight .ow { color: #f92672; } /* Operator.Word */
+  .highlight .w { color: #f8f8f2; } /* Text.Whitespace */
+  .highlight .mf { color: #ae81ff; } /* Literal.Number.Float */
+  .highlight .mh { color: #ae81ff; } /* Literal.Number.Hex */
+  .highlight .mi { color: #ae81ff; } /* Literal.Number.Integer */
+  .highlight .mo { color: #ae81ff; } /* Literal.Number.Oct */
+  .highlight .sb { color: #e6db74; } /* Literal.String.Backtick */
+  .highlight .sc { color: #e6db74; } /* Literal.String.Char */
+  .highlight .sd { color: #e6db74; } /* Literal.String.Doc */
+  .highlight .s2 { color: #e6db74; } /* Literal.String.Double */
+  .highlight .se { color: #ae81ff; } /* Literal.String.Escape */
+  .highlight .sh { color: #e6db74; } /* Literal.String.Heredoc */
+  .highlight .si { color: #e6db74; } /* Literal.String.Interpol */
+  .highlight .sx { color: #e6db74; } /* Literal.String.Other */
+  .highlight .sr { color: #e6db74; } /* Literal.String.Regex */
+  .highlight .s1 { color: #e6db74; } /* Literal.String.Single */
+  .highlight .ss { color: #e6db74; } /* Literal.String.Symbol */
+  .highlight .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
+  .highlight .vc { color: #f8f8f2; } /* Name.Variable.Class */
+  .highlight .vg { color: #f8f8f2; } /* Name.Variable.Global */
+  .highlight .vi { color: #f8f8f2; } /* Name.Variable.Instance */
+  .highlight .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
+  .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+  .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
+  .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
+}
diff --git a/assets/css/_colors/dark-typography.scss b/_sass/colors/dark-typography.scss
similarity index 84%
rename from assets/css/_colors/dark-typography.scss
rename to _sass/colors/dark-typography.scss
index fbbaaa12048..e8f53e146e4 100644
--- a/assets/css/_colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -1,10 +1,6 @@
-/*!
-* The main dark mode styles
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
-*/
+/*
+ * The main dark mode styles
+ */
 
 @mixin dark-scheme {
   /* framework */
@@ -19,6 +15,7 @@
 
   /* common color */
   --text-color: rgb(175, 176, 177);
+  --heading-color: #cccccc;
   --text-muted-color: rgb(107, 116, 124);
   --link-color: rgb(138, 180, 248);
   --link-underline-color: rgb(82, 108, 150);
@@ -26,14 +23,14 @@
   --button-bg: rgb(39, 40, 43);
   --blockquote-border-color: rgb(66, 66, 66);
   --blockquote-text-color: rgb(117, 117, 117);
-
   --btn-border-color: rgb(63, 65, 68);
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
   --btn-box-shadow: var(--main-wrapper-bg);
-
   --card-header-bg: rgb(51, 50, 50);
   --label-color: rgb(108, 117, 125);
+  --checkbox-color: rgb(118 120 121);
+  --checkbox-checked-color: var(--link-color);
 
   /* Sidebar */
   --nav-cursor-color: rgb(183, 182, 182);
@@ -51,6 +48,8 @@
   --btn-text-color: var(--text-color);
   --btn-paginator-border-color: var(--btn-border-color);
   --btn-paginator-shadow: var(--main-wrapper-bg);
+  --pin-bg: rgb(34 35 37);
+  --pin-color: inherit;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);
@@ -71,7 +70,6 @@
   --tag-border: rgb(59, 79, 88);
   --tag-shadow: rgb(32, 33, 33);
   --search-tag-bg: var(--tag-bg);
-
   --dash-color: rgb(63, 65, 68);
 
   /* categories */
@@ -84,7 +82,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
-  ---footer-link: rgb(146, 146, 146);
+  --footer-link: rgb(171, 171, 171);
 
   .post-content img {
     filter: brightness(90%);
@@ -98,10 +96,10 @@
   nav[data-toggle=toc] .nav-link.active,
   nav[data-toggle=toc] .nav-link.active:focus,
   nav[data-toggle=toc] .nav-link.active:hover,
-  nav[data-toggle=toc] .nav>li>a:focus,
-  nav[data-toggle=toc] .nav>li>a:hover {
-    color: var(--toc-highlight)!important;
-    border-left-color: var(--toc-highlight)!important;
+  nav[data-toggle=toc] .nav > li > a:focus,
+  nav[data-toggle=toc] .nav > li > a:hover {
+    color: var(--toc-highlight) !important;
+    border-left-color: var(--toc-highlight) !important;
   }
 
   /* categories */
@@ -126,8 +124,13 @@
   }
 
   #archives li:nth-child(odd) {
-    background-image: linear-gradient(to left,
-      rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
+    background-image: linear-gradient(
+      to left,
+      rgb(26, 26, 30),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(26, 26, 30));
   }
 
 } // dark-scheme
diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss
new file mode 100644
index 00000000000..c6032b5b62b
--- /dev/null
+++ b/_sass/colors/light-syntax.scss
@@ -0,0 +1,75 @@
+/*
+ * The syntax light mode code snippet colors.
+ */
+
+@mixin light-syntax {
+  /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
+  .highlight .hll { background-color: #ffffcc; }
+  .highlight .c { color: #999988; font-style: italic; } /* Comment */
+  .highlight .err { color: #a61717; background-color: #e3d2d2; } /* Error */
+  .highlight .k { color: #000000; font-weight: bold; } /* Keyword */
+  .highlight .o { color: #000000; font-weight: bold; } /* Operator */
+  .highlight .cm { color: #999988; font-style: italic; } /* Comment.Multiline */
+  .highlight .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */
+  .highlight .c1 { color: #999988; font-style: italic; } /* Comment.Single */
+  .highlight .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */
+  .highlight .gd { color: #d01040; background-color: #ffdddd; } /* Generic.Deleted */
+  .highlight .ge { color: #000000; font-style: italic; } /* Generic.Emph */
+  .highlight .gr { color: #aa0000; } /* Generic.Error */
+  .highlight .gh { color: #999999; } /* Generic.Heading */
+  .highlight .gi { color: #008080; background-color: #ddffdd; } /* Generic.Inserted */
+  .highlight .go { color: #888888; } /* Generic.Output */
+  .highlight .gp { color: #555555; } /* Generic.Prompt */
+  .highlight .gs { font-weight: bold; } /* Generic.Strong */
+  .highlight .gu { color: #aaaaaa; } /* Generic.Subheading */
+  .highlight .gt { color: #aa0000; } /* Generic.Traceback */
+  .highlight .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */
+  .highlight .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */
+  .highlight .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */
+  .highlight .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */
+  .highlight .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */
+  .highlight .kt { color: #445588; font-weight: bold; } /* Keyword.Type */
+  .highlight .m { color: #009999; } /* Literal.Number */
+  .highlight .s { color: #d01040; } /* Literal.String */
+  .highlight .na { color: #008080; } /* Name.Attribute */
+  .highlight .nb { color: #0086b3; } /* Name.Builtin */
+  .highlight .nc { color: #445588; font-weight: bold; } /* Name.Class */
+  .highlight .no { color: #008080; } /* Name.Constant */
+  .highlight .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */
+  .highlight .ni { color: #800080; } /* Name.Entity */
+  .highlight .ne { color: #990000; font-weight: bold; } /* Name.Exception */
+  .highlight .nf { color: #990000; font-weight: bold; } /* Name.Function */
+  .highlight .nl { color: #990000; font-weight: bold; } /* Name.Label */
+  .highlight .nn { color: #555555; } /* Name.Namespace */
+  .highlight .nt { color: #000080; } /* Name.Tag */
+  .highlight .nv { color: #008080; } /* Name.Variable */
+  .highlight .ow { color: #000000; font-weight: bold; } /* Operator.Word */
+  .highlight .w { color: #bbbbbb; } /* Text.Whitespace */
+  .highlight .mf { color: #009999; } /* Literal.Number.Float */
+  .highlight .mh { color: #009999; } /* Literal.Number.Hex */
+  .highlight .mi { color: #009999; } /* Literal.Number.Integer */
+  .highlight .mo { color: #009999; } /* Literal.Number.Oct */
+  .highlight .sb { color: #d01040; } /* Literal.String.Backtick */
+  .highlight .sc { color: #d01040; } /* Literal.String.Char */
+  .highlight .sd { color: #d01040; } /* Literal.String.Doc */
+  .highlight .s2 { color: #d01040; } /* Literal.String.Double */
+  .highlight .se { color: #d01040; } /* Literal.String.Escape */
+  .highlight .sh { color: #d01040; } /* Literal.String.Heredoc */
+  .highlight .si { color: #d01040; } /* Literal.String.Interpol */
+  .highlight .sx { color: #d01040; } /* Literal.String.Other */
+  .highlight .sr { color: #009926; } /* Literal.String.Regex */
+  .highlight .s1 { color: #d01040; } /* Literal.String.Single */
+  .highlight .ss { color: #990073; } /* Literal.String.Symbol */
+  .highlight .bp { color: #999999; } /* Name.Builtin.Pseudo */
+  .highlight .vc { color: #008080; } /* Name.Variable.Class */
+  .highlight .vg { color: #008080; } /* Name.Variable.Global */
+  .highlight .vi { color: #008080; } /* Name.Variable.Instance */
+  .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */
+
+  /* --- custom light colors --- */
+  --highlight-bg-color: #f7f7f7;
+  --highlighter-rouge-color: #505050;
+  --highlight-lineno-color: #c2c6cc;
+  --highlight-lineno-border-color: #e9ecef;
+  --inline-code-bg: #f3f3f3;
+} // light-syntax
diff --git a/assets/css/_colors/light-typography.scss b/_sass/colors/light-typography.scss
similarity index 78%
rename from assets/css/_colors/light-typography.scss
rename to _sass/colors/light-typography.scss
index bbd3f193e8f..94714f40486 100644
--- a/assets/css/_colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -1,124 +1,77 @@
-/*!
-* The syntax light mode typography colors
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
-*/
+/*
+ * The syntax light mode typography colors
+ */
 
 @mixin light-scheme {
-
+  /* Common */
   --body-bg: #fafafa;
-
   --mask-bg: #c1c3c5;
-
   --main-wrapper-bg: white;
-
   --main-border-color: #f3f3f3;
-
   --btn-border-color: #e9ecef;
-
-  --text-color: #333333;
-
+  --text-color: #4a4a4a;
+  --heading-color: black;
   --blockquote-border-color: #eee;
-
   --blockquote-text-color: #9a9a9a;
-
   --link-color: #2a408e;
-
   --link-underline-color: #dee2e6;
-
   --text-muted-color: gray;
-
   --tb-odd-bg: #fbfcfd;
-
   --tb-border-color: #eaeaea;
-
   --button-bg: #fff;
-
   --btn-backtotop-color: #686868;
-
-  --btn-backtotop-border-color: #f1f1f1; //--main-border-color,
-
+  --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
+  --checkbox-color: #c5c5c5;
+  --checkbox-checked-color: #07a8f7;
 
   /* Sidebar */
-
   --sidebar-bg: radial-gradient(
-    circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
-
+    circle,
+    rgba(42, 30, 107, 1) 0%,
+    rgba(35, 37, 46, 1) 100%);
   --nav-cursor-color: #fcfcfc;
 
   /* Topbar */
-
   --topbar-wrapper-bg: white;
-
   --topbar-text-color: rgb(78, 78, 78);
-
   --search-wrapper-bg: #f5f5f5;
-
   --search-tag-bg: #f8f9fa;
-
   --search-icon-color: #c2c6cc;
-
   --input-focus-border-color: var(--btn-border-color);
 
   /* Home page */
-
   --post-list-text-color: dimgray;
-
   --btn-patinator-text-color: #555555;
-
   --btn-paginator-hover-color: #e9ecef;
-
   --btn-active-bg: #2a408e;
-
   --btn-active-border-color: #007bff;
-
   --btn-text-color: #f8f8f8;
-
   --btn-paginator-border-color: #f1f1f1;
-
   --btn-paginator-shadow: #4b92d2;
+  --pin-bg: #f5f5f5;
+  --pin-color: #999fa4;
 
   /* Posts */
-
   --btn-share-hover-color: var(--link-color);
-
   --card-border-color: #f1f1f1;
-
   --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
-
-  --label-color: #808080;
-
-  --relate-post-date: rgba(30, 55, 70, .4);
-
+  --label-color: #616161;
+  --relate-post-date: rgba(30, 55, 70, 0.4);
   --tag-bg: rgba(0, 0, 0, 0.075);
-
   --tag-border: #dee2e6;
-
   --tag-shadow: var(--btn-border-color);
-
   --tag-hover: rgb(222, 226, 230);
-
   --categories-hover-bg: var(--btn-border-color);
-
   --dash-color: silver;
 
-
   /* Archive */
-
   --timeline-color: rgba(0, 0, 0, 0.075);
-
   --timeline-node-bg: #c2c6cc;
-
   --timeline-year-dot-color: #ffffff;
 
   /* Footer */
-
   --footer-bg-color: #ffffff;
-
   --footnote-target-bg: lightcyan;
-
-  ---footer-link: inherit;
-}
+  --footer-link: #424242;
+} // light-scheme
diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss
new file mode 100644
index 00000000000..16c6432e678
--- /dev/null
+++ b/_sass/jekyll-theme-chirpy.scss
@@ -0,0 +1,23 @@
+/*!
+ * The styles for Jekyll theme Chirpy
+ *
+ * Chirpy v3.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
+
+@import
+  "colors/light-typography",
+  "colors/dark-typography",
+
+  "addon/module",
+  "addon/variables",
+  "addon/syntax",
+  "addon/commons",
+
+  "layout/home",
+  "layout/post",
+  "layout/tags",
+  "layout/archives",
+  "layout/categories",
+  "layout/category-tag";
diff --git a/assets/css/archives.scss b/_sass/layout/archives.scss
similarity index 70%
rename from assets/css/archives.scss
rename to _sass/layout/archives.scss
index b13a854a7b1..3da4d44e914 100644
--- a/assets/css/archives.scss
+++ b/_sass/layout/archives.scss
@@ -1,13 +1,6 @@
----
-# Style for Archives
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-
-{% include_relative _addon/main.scss %}
+/*
+  Style for Archives
+*/
 
 %date-timeline {
   content: "";
@@ -19,43 +12,15 @@
   background-color: var(--timeline-color);
 }
 
-%date-font {
-  font-family: 'Roboto Condensed', sans-serif;
-}
-
 #archives {
   letter-spacing: 0.03rem;
-  li {
-    font-size: 1.1rem;
-    line-height: 3rem;
-    &:nth-child(odd) {
-      background-color: var(--main-wrapper-bg, #fff);
-      background-image: linear-gradient(
-        to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
-    }
-    >div {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
 
   span.lead {
     font-size: 1.5rem;
-    @extend %date-font;
     position: relative;
     left: 8px;
 
-    &:not(:first-child) {
-      position: relative;
-      left: 4px;
-      &::after {
-        left: 67px;
-      }
-    }
-
-    &::after {
-      /* Year dot */
+    &::after { /* Year dot */
       content: "";
       display: block;
       position: relative;
@@ -72,16 +37,72 @@
       box-shadow: 0 0 2px 0 #c2c6cc;
       z-index: 1;
     }
+
+    &:not(:first-child) {
+      position: relative;
+      left: 4px;
+      &::after {
+        left: 67px;
+      }
+    }
+
   } // #archives span.lead
 
+  ul {
+    li {
+      font-size: 1.1rem;
+      line-height: 3rem;
+
+      div {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        a {
+          /* post title in Archvies */
+          margin-left: 2.5rem;
+          position: relative;
+          top: 0.1rem;
+        }
+      }
+
+      &:nth-child(odd) {
+        background-color: var(--main-wrapper-bg, #fff);
+        background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
+      }
+
+      &::after {
+        @extend %date-timeline;
+
+        height: 2.8rem;
+        top: -1.3rem;
+      }
+
+      &:first-child::before {
+        @extend %date-timeline;
+
+        height: 3.06rem;
+        top: -1.61rem;
+      }
+    }
+
+    &:not(:last-child) > li:last-child::after {
+      height: 3.4rem;
+    }
+
+    &:last-child > li:last-child::after {
+      display: none;
+    }
+  } // #archives ul
+
   .date {
     white-space: nowrap;
     display: inline-block;
     &.month {
       width: 1.4rem;
       text-align: center;
-      @extend %date-font;
-      ~a::before {
+
+      ~ a::before {
         /* A dot for Month and Day */
         content: "";
         display: inline-block;
@@ -110,36 +131,8 @@
     }
   } // #archives .date
 
-  ul {
-    >li {
-      >div>a {
-        /* post title in Archvies */
-        margin-left: 2.5rem;
-        position: relative;
-        top: .1rem;
-      }
-      &::after {
-        @extend %date-timeline;
-        height: 2.8rem;
-        top: -1.3rem;
-      }
-      &:first-child::before {
-        @extend %date-timeline;
-        height: 3.06rem;
-        top: -1.61rem;
-      }
-    }
-    &:not(:last-child)>li:last-child::after {
-      height: 3.4rem;
-    }
-    &:last-child>li:last-child::after {
-      display: none;
-    }
-  } // #archives ul
-
 } // #archives
 
-
 @media all and (max-width: 576px) {
   #archives {
     margin-top: -1rem;
diff --git a/assets/css/categories.scss b/_sass/layout/categories.scss
similarity index 75%
rename from assets/css/categories.scss
rename to _sass/layout/categories.scss
index c7b7a54f4a6..8b32c67e7bd 100644
--- a/assets/css/categories.scss
+++ b/_sass/layout/categories.scss
@@ -1,13 +1,6 @@
----
-# Style for Tab Categories
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-
-{% include_relative _addon/main.scss %}
+/*
+  Style for Tab Categories
+*/
 
 %category-icon-color {
   color: gray;
@@ -18,11 +11,19 @@
   .card-header {
     padding-right: 12px;
   }
+
+  i {
+    &.far,
+    &.fas {
+      font-size: 86%; // fontawesome icons
+    }
+  }
+
   .list-group-item {
     border-left: none;
     border-right: none;
     padding-left: 2rem;
-    >i {
+    > i {
       @extend %category-icon-color;
     }
     &:first-child {
@@ -32,16 +33,10 @@
 
   }
 
-  .card-header>span>i:first-child {
+  .card-header > span > i:first-child {
     @extend %category-icon-color;
   }
 
-  i {
-    &.far, &.fas {
-      font-size: 86%; // fontawesome icons
-    }
-  }
-
 } // .categories
 
 .category-trigger {
@@ -49,10 +44,10 @@
   height: 1.7rem;
   border-radius: 50%;
   text-align: center;
-  color: #6c757d!important;
-  >i.fas {
+  color: #6c757d !important;
+  > i.fas {
     position: relative;
-    height: .7rem;
+    height: 0.7rem;
     width: 1rem;
     transition: 300ms ease all;
   }
@@ -68,4 +63,4 @@
   -ms-transform: rotate(-90deg); /* IE 9 */
   -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
-}
\ No newline at end of file
+}
diff --git a/assets/css/category-tag.scss b/_sass/layout/category-tag.scss
similarity index 57%
rename from assets/css/category-tag.scss
rename to _sass/layout/category-tag.scss
index 274e58e3801..3549c918622 100644
--- a/assets/css/category-tag.scss
+++ b/_sass/layout/category-tag.scss
@@ -1,18 +1,18 @@
----
-# Style for page Category and Tag
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
+/*
+  Style for page Category and Tag
+*/
 
+.dash {
+  margin: 0 .5rem .6rem .5rem;
+  border-bottom: 2px dotted var(--dash-color);
+}
 
-{% include_relative _addon/main.scss %}
-
-#page-category, #page-tag {
-  ul>li {
+#page-category,
+#page-tag {
+  ul > li {
     line-height: 1.5rem;
-    padding: .6rem 0;
+    padding: 0.6rem 0;
+
     &::before { // dot
       background: #999;
       width: 5px;
@@ -21,53 +21,52 @@
       display: block;
       content: "";
       position: relative;
-      top: .6rem;
-      margin-right: .5rem;
+      top: 0.6rem;
+      margin-right: 0.5rem;
     }
-    >a { /* post's title */
-      font-size: 1.1rem;
+
+    > a { /* post's title */
       @extend %no-bottom-border;
+
+      font-size: 1.1rem;
     }
-    >span:last-child {
+
+    > span:last-child {
       white-space: nowrap;
-    }
-    /* post's date */
+    } /* post's date */
   }
 }
 
-#page-tag h1>i { // tag icon
+#page-tag h1 > i { // tag icon
   font-size: 1.2rem;
 }
 
-#page-category h1>i {
+#page-category h1 > i {
   font-size: 1.25rem;
 }
 
-a:hover {
-  #page-category &,
-  #page-tag &,
-  #access-lastmod & {
+#page-category,
+#page-tag,
+#access-lastmod {
+  a:hover {
     @extend %link-hover;
+
     margin-bottom: -1px; // Avoid jumping
   }
 }
 
-.dash {
-  margin: 0 .5rem .6rem .5rem;
-  border-bottom: 2px dotted var(--dash-color);
-}
-
 @media all and (max-width: 576px) {
-  #page-category, #page-tag {
-    ul>li {
+  #page-category,
+  #page-tag {
+    ul > li {
       &::before {
         margin: 0 .5rem;
       }
-      >a {
+      > a {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/css/home.scss b/_sass/layout/home.scss
similarity index 74%
rename from assets/css/home.scss
rename to _sass/layout/home.scss
index 50a275d14d5..a663d0dedf7 100644
--- a/assets/css/home.scss
+++ b/_sass/layout/home.scss
@@ -1,57 +1,6 @@
----
-# Style for Homepage
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-{% include_relative _addon/main.scss %}
-
-#post-list {
-  margin-top: 1rem;
-  padding-right: .5rem;
-
-  .post-preview {
-    padding-top: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid var(--main-border-color);
-
-    h1 {
-      font-size: 1.4rem;
-      margin: 0;
-      ~i { // pinned icon
-        font-size: .86rem;
-      }
-    }
-
-    .post-meta {
-      i {
-        font-size: .73rem;
-        &:not(:first-child) { // post-meta icons on the homepage
-          margin-left: 1.5rem;
-        }
-      }
-    }
-
-    .post-content {
-      margin-top: .6rem;
-      margin-bottom: .6rem;
-      color: var(--post-list-text-color);
-      >p {
-        /* Make preview shorter on the homepage */
-        margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-    }
-
-  } // .post-preview
-
-} // #post-list
+/*
+  Style for Homepage
+*/
 
 .pagination {
   font-size: 1rem;
@@ -77,7 +26,7 @@
       font-family: 'Lato', sans-serif;
       background-color: var(--button-bg);
       &:hover {
-        background-color: var(--btn-paginator-hover-color)
+        background-color: var(--btn-paginator-hover-color);
       }
     }
     &.active {
@@ -107,11 +56,62 @@
 
 } // .pagination
 
-@media all and (max-width: 576px) {
-  #post-list .post-meta>span i:not(:first-child) {
-    margin-left: 1rem;
-  }
-}
+#post-list {
+  margin-top: 1rem;
+  padding-right: 0.5rem;
+
+  .post-preview {
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--main-border-color);
+
+    a:hover {
+      @extend %link-hover;
+    }
+
+    h1 {
+      font-size: 1.4rem;
+      margin: 0;
+    }
+
+    .post-meta {
+      i {
+        font-size: 0.73rem;
+      }
+      span:not(:last-child) {
+        margin-right: 1.2rem;
+      }
+    }
+
+    .post-content {
+      margin-top: 0.6rem;
+      margin-bottom: 0.6rem;
+      color: var(--post-list-text-color);
+      > p {
+        /* Make preview shorter on the homepage */
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .pin {
+      > i {
+        transform: rotate(45deg);
+        padding-left: 3px;
+        color: var(--pin-color);
+      }
+      > span {
+        display: none;
+      }
+    }
+
+  } // .post-preview
+
+} // #post-list
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
@@ -125,10 +125,25 @@
 
   #post-list {
     margin-top: 1.5rem;
+    .post-preview .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;
+        }
+      }
+    }
   }
 
   .pagination {
-    font-size: .85rem;
+    font-size: 0.85rem;
     .page-item .page-link {
       width: 2.2rem;
       height: 2.2rem;
@@ -142,4 +157,4 @@
   #post-list {
     padding-right: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/css/post.scss b/_sass/layout/post.scss
similarity index 59%
rename from assets/css/post.scss
rename to _sass/layout/post.scss
index 5658053900b..667af1598ca 100644
--- a/assets/css/post.scss
+++ b/_sass/layout/post.scss
@@ -1,21 +1,10 @@
----
-# Post-specific style
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-
-{% include_relative _addon/main.scss %}
-{% include_relative _addon/syntax.scss %}
-
-$prompt-older: "{{ site.data.label.post.button.previous }}";
-$prompt-newer: "{{ site.data.label.post.button.next }}";
+/*
+  Post-specific style
+*/
 
 @mixin btn-sharing-color($light-color, $important: false) {
   @if $important {
-    color: var(--btn-share-color, $light-color)!important;
+    color: var(--btn-share-color, $light-color) !important;
   } @else {
     color: var(--btn-share-color, $light-color);
   }
@@ -27,25 +16,44 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
-.author {
-  @include semi-bold;
+@mixin dot($pl: 0.2rem, $pr: 0.4rem) {
+  content: "\2022";
+  color: rgba(158, 158, 158, 0.8);
+  padding-left: $pl;
+  padding-right: $pr;
 }
 
-.post {
-  img {
-    max-width: 100%;
-    margin-top: .5rem;
-    margin-bottom: 1.5rem;
-    position: relative;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
+.timeago::before {
+  content: attr(prefix);
+}
+
+#post-wrapper .post-meta {
+  > div:nth-child(2) {
+    > span:not(:first-child)::before {
+      @include dot;
+    }
+  }
+
+  #pv::after {
+    content: " views";
+  }
+
+  .readtime::after {
+    content: " read";
+  }
+}
+
+.post-content {
+  .preview-img {
+    @include align-center;
+
+    margin-top: 0;
+    margin-bottom: 2.5rem !important;
   }
 }
 
 .post-tail-wrapper {
-  margin-top: 4rem;
+  margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
@@ -60,57 +68,59 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
   .btn {
     @include btn-post-nav;
+
     color: var(--link-color);
+
     &:hover {
       background: #2a408e;
       color: #fff;
       border-color: #2a408e;
     }
+
     &.disabled {
       @include btn-post-nav;
+
       pointer-events: auto;
       cursor: not-allowed;
       background: none;
       color: gray;
+
       &:hover {
         border-color: none;
       }
     }
+
     &.btn-outline-primary.disabled:focus {
       box-shadow: none;
     }
-  }
 
-  p {
-    font-size: 1.1rem;
-    line-height: 1.5rem;
-    margin-top: .3rem;
-    white-space: normal;
-  }
-
-  a, span {
     &::before {
       color: var(--text-muted-color);
-      font-size: .65rem;
+      font-size: 0.65rem;
       text-transform: uppercase;
+      content: attr(prompt);
     }
+
     &:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
-      left: .5px;
-      &::before {
-        content: $prompt-older
-      }
+      left: 0.5px;
     }
+
     &:last-child {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
-      right: .5px;
-      &::before {
-        content: $prompt-newer
-      }
+      right: 0.5px;
     }
   }
+
+  p {
+    font-size: 1.1rem;
+    line-height: 1.5rem;
+    margin-top: 0.3rem;
+    white-space: normal;
+  }
+
 } // .post-navigation
 
 @keyframes fade-up {
@@ -127,48 +137,46 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 #toc-wrapper {
-  margin-top: 7rem;
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
   top: 4rem;
   transition: top 0.2s ease-in-out;
-  animation: fade-up .8s;
+  animation: fade-up 0.8s;
   &.topbar-down {
     top: 6rem;
   }
-  >h3 {
-    @include label(inherit, 600);
+  > span {
+    @include panel-label;
   }
 }
 
-#toc li>a {
+#toc li > a {
   line-height: 1rem;
-  padding-top: .5rem;
-  padding-bottom: .5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
-
-/*--- Related Posts ---*/
+/* --- Related Posts --- */
 
 #related-posts {
-  >h3 {
+  > h3 {
     @include label(1.1rem, 600);
   }
   .card {
-    border: 1px solid var(--card-border-color);
+    border-color: var(--card-border-color);
     background-color: var(--card-bg);
     box-shadow: 0 0 5px 0 var(--card-box-shadow);
-    -webkit-transition: all .3s ease-in-out;
-    -moz-transition: all .3s ease-in-out;
-    transition: all .3s ease-in-out;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
     h3 {
       color: var(--text-color);
     }
     &:hover {
       -webkit-transform: translate3d(0, -3px, 0);
       transform: translate3d(0, -3px, 0);
-      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+      box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
     }
   }
 
@@ -177,8 +185,8 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   }
 
   p {
-    font-size: .9rem;
-    margin-bottom: .5rem;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -193,7 +201,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   ul {
     list-style-type: none;
     padding-inline-start: 1.5rem;
-    >li::before {
+    > li::before {
       background: #c2c9d4;
       width: 5px;
       height: 5px;
@@ -209,6 +217,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 #post-extend-wrapper {
   min-height: 2rem;
+  #disqus_thread {
+    margin-bottom: 2rem;
+  }
 }
 
 .post-tail-bottom a {
@@ -216,34 +227,35 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 %btn-share-hovor {
-  color: var(--btn-share-hover-color)!important;
+  color: var(--btn-share-hover-color) !important;
 }
 
 .share-wrapper {
   vertical-align: middle;
   user-select: none;
+
   .share-icons {
     font-size: 1.2rem;
     a {
       &:not(:last-child) {
-        margin-right: .25rem;
+        margin-right: 0.25rem;
       }
       &:hover {
         text-decoration: none;
-        >i {
+        > i {
           @extend %btn-share-hovor;
         }
       }
     }
-    >i {
-      padding-top: .35rem;
+    > i {
+      padding-top: 0.35rem;
       &:hover {
         @extend %btn-share-hovor;
       }
     }
     .fab {
       &.fa-twitter {
-        @include btn-sharing-color(rgba(29, 161, 242, 1.00));
+        @include btn-sharing-color(rgba(29, 161, 242, 1));
       }
       &.fa-facebook-square {
         @include btn-sharing-color(rgb(66, 95, 156));
@@ -264,9 +276,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 } // .share-wrapper
 
-
 .share-label {
   @include label(inherit, 400, inherit);
+
   &::after {
     content: ":";
   }
@@ -274,107 +286,67 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 .license-wrapper {
   line-height: 1.2rem;
-  >a {
+  > a {
     font-weight: 600;
     &:hover {
       @extend %link-hover;
     }
   }
-  i {
-    font-weight: 400;
-  }
+
   span:last-child {
-    font-size: .85rem;
+    font-size: 0.85rem;
   }
 } // .license-wrapper
 
-
 @media all and (max-width: 576px) {
   .post-tail-bottom {
-    -ms-flex-wrap: wrap-reverse!important;
-    flex-wrap: wrap-reverse!important;
+    -ms-flex-wrap: wrap-reverse !important;
+    flex-wrap: wrap-reverse !important;
     >div:first-child {
       width: 100%;
       margin-top: 1rem;
     }
   }
+
+  .post-content > div[class^='language-'] {
+    @include ml-mr(-1.25rem);
+
+    border-radius: 0;
+    &::before { // the lang badge
+      right: 1rem;
+    }
+  }
+
 }
 
 @media all and (max-width: 768px) {
-  .post img {
+  .post-content > p > img {
     max-width: calc(100% + 1rem);
   }
 }
 
 @media all and (min-width: 768px) {
-  .post {
+  #post-wrapper {
     .post-meta {
       >div:not(:first-child)::before {
-        content: "\2022";
-        color: rgba(158, 158, 158, 0.8);
-        font-weight: bold;
-        padding-left: .5rem;
-        padding-right: .3rem;
+        @include dot(0.5rem, 0.2rem);
       }
       &.flex-column {
-        -webkit-box-orient: horizontal!important;
-        -webkit-box-direction: normal!important;
-        -ms-flex-direction: row!important;
-        flex-direction: row!important;
+        -webkit-box-orient: horizontal !important;
+        -webkit-box-direction: normal !important;
+        -ms-flex-direction: row !important;
+        flex-direction: row !important;
       }
     }
   } // .post
 }
 
-@media all and (min-width: 768px) and (max-width: 830px) {
-  .post img {
-    max-width: calc(100% + 2rem);
-  }
-}
-
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
-  .post img {
-    position: relative;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-
   .post-navigation {
     padding-left: 0;
     padding-right: 0;
     margin-left: -.5rem;
     margin-right: -.5rem;
   }
-
-}
-
-/*
-  The following resposive design aim to
-  make #post-extend-wrapper margin-right same as pannel's width
-*/
-@media all and (min-width: 1200px) {
-  #post-extend-wrapper {
-    margin-right: 25%;
-  }
-}
-
-@media all and (min-width: 1460px) {
-  #post-extend-wrapper {
-    margin-right: 300px;
-  }
-}
-
-@media all and (min-width: 1650px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 10 + 300px);
-  }
-}
-
-@media all and (min-width: 1700px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 8 + 300px);
-  }
 }
diff --git a/assets/css/tags.scss b/_sass/layout/tags.scss
similarity index 60%
rename from assets/css/tags.scss
rename to _sass/layout/tags.scss
index 0b708fb9210..7c3bff4ca7b 100644
--- a/assets/css/tags.scss
+++ b/_sass/layout/tags.scss
@@ -1,18 +1,11 @@
----
-# Styles for Tab Tags
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-
-{% include_relative _addon/main.scss %}
+/*
+  Styles for Tab Tags
+*/
 
 .tag {
   border-radius: 0.7em;
   padding: 6px 8px 7px;
-  margin-right: .8rem;
+  margin-right: 0.8rem;
   line-height: 3rem;
   letter-spacing: 0;
   border: 1px solid var(--tag-border) !important;
@@ -22,4 +15,4 @@
     font-size: 0.7em;
     font-family: 'Oswald', sans-serif;
   }
-}
\ No newline at end of file
+}
diff --git a/_scripts/sh/create_pages.sh b/_scripts/sh/create_pages.sh
deleted file mode 100755
index 5e675fde91a..00000000000
--- a/_scripts/sh/create_pages.sh
+++ /dev/null
@@ -1,154 +0,0 @@
-#!/usr/local/bin/bash
-#
-# Create HTML pages for Categories and Tags in posts.
-#
-# Usage:
-#     Call from the '_posts' sibling directory.
-#
-# v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-TYPE_CATEGORY=0
-TYPE_TAG=1
-
-category_count=0
-tag_count=0
-
-
-_read_yaml() {
-  local _endline=$(grep -n "\-\-\-" $1 | cut -d: -f 1 | sed -n '2p')
-  head -$_endline $1
-}
-
-
-read_categories() {
-  local _yaml=$(_read_yaml $1)
-  local _categories=$(echo "$_yaml" | grep "^categories:")
-  local _category=$(echo "$_yaml" | grep "^category:")
-
-  if [[ ! -z "$_categories" ]]; then
-    echo "$_categories" | sed "s/categories: *//;s/\[//;s/\]//;s/, */,/g;s/\"//g;s/'//g"
-  elif [[ ! -z "_category" ]]; then
-    echo "$_category" | sed "s/category: *//;s/\[//;s/\]//;s/, */,/g;s/\"//g;s/'//g"
-  fi
-}
-
-
-read_tags() {
-  local _yaml=$(_read_yaml $1)
-  echo "$_yaml" | grep "^tags:" | sed "s/tags: *//;s/\[//;s/\]//;s/, */,/g;s/\"//g;s/'//g"
-}
-
-
-init() {
-  if [[ -d categories ]]; then
-    rm -rf categories
-  fi
-
-  if [[ -d tags ]]; then
-    rm -rf tags
-  fi
-
-  mkdir categories tags
-}
-
-
-create_category() {
-  local _name=$1
-  local _filepath="categories/$(echo $_name | sed 's/ /-/g' | awk '{print tolower($0)}').html"
-
-  if [[ ! -f $_filepath ]]; then
-    echo "---" > $_filepath
-    echo "layout: category" >> $_filepath
-    echo "title: $_name" >> $_filepath
-    echo "category: $_name" >> $_filepath
-    echo "---" >> $_filepath
-
-    ((category_count=category_count+1))
-  fi
-}
-
-
-create_tag() {
-  local _name=$1
-  local _filepath="tags/$( echo $_name | sed "s/ /-/g;s/'//g" | awk '{print tolower($0)}' ).html"
-
-  if [[ ! -f $_filepath ]]; then
-
-    echo "---" > $_filepath
-    echo "layout: tag" >> $_filepath
-    echo "title: $_name" >> $_filepath
-    echo "tag: $_name" >> $_filepath
-    echo "---" >> $_filepath
-
-    ((tag_count=tag_count+1))
-  fi
-}
-
-
-#########################################
-# Create HTML pages for Categories/Tags.
-# Arguments:
-#   $1 - an array string
-#   $2 - type specified option
-#########################################
-create_pages() {
-  if [[ $1 == '' ]]; then
-    exit 0
-  fi
-
-  # split string to array
-  IFS_BAK=$IFS
-  IFS=','
-  local _string=$1
-
-  case $2 in
-
-    $TYPE_CATEGORY)
-      for i in ${_string#,}; do
-        create_category $i
-      done
-      ;;
-
-    $TYPE_TAG)
-      for i in ${_string#,}; do
-        create_tag $i
-      done
-      ;;
-
-    *)
-      ;;
-
-    esac
-
-    IFS=$IFS_BAK
-  }
-
-
-main() {
-  init
-
-  for _file in $(ls "_posts")
-  do
-    local _path="_posts/$_file"
-    local _categories=$(read_categories "$_path")
-    local _tags=$(read_tags "$_path")
-
-    create_pages "$_categories" $TYPE_CATEGORY
-    create_pages "$_tags" $TYPE_TAG
-  done
-
-  if [[ $category_count -gt 0 ]]; then
-    echo "[INFO] Succeed! $category_count category-pages created."
-  fi
-
-  if [[ $tag_count -gt 0 ]]; then
-    echo "[INFO] Succeed! $tag_count tag-pages created."
-  fi
-}
-
-main
diff --git a/_scripts/sh/dump_lastmod.sh b/_scripts/sh/dump_lastmod.sh
deleted file mode 100755
index ab45706e58a..00000000000
--- a/_scripts/sh/dump_lastmod.sh
+++ /dev/null
@@ -1,89 +0,0 @@
-#!/bin/bash
-#
-# Find out the posts that have been modified and record
-# its lastmod information to file '_data/updates.yml'
-#
-# Usage:
-#     Call from the '_posts' sibling directory.
-#
-# v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-POST_DIR=_posts
-OUTPUT_DIR=_data
-OUTPUT_FILE=updates.yml
-
-
-_init() {
-  if [[ ! -d "$OUTPUT_DIR" ]]; then
-    mkdir "$OUTPUT_DIR"
-  fi
-
-  if [[ -f "$OUTPUT_DIR/$OUTPUT_FILE" ]]; then
-    rm -f "$OUTPUT_DIR/$OUTPUT_FILE"
-  fi
-
-  touch "$OUTPUT_DIR/$OUTPUT_FILE"
-}
-
-
-_has_changed() {
-  local _log_count=`git log --pretty=%ad $1 | wc -l | sed 's/ *//'`
-  _log_count=$(($_log_count + 0))
-
-  if [[ $_log_count > 1 ]]; then
-    return 0 # true
-  fi
-
-  return 1 # false
-}
-
-
-###################################
-# Storage the posts' lastmod.
-#
-# Args:
-#     - $1 the post's filename
-#     - $2 the post's filepath
-# Output:
-#     the file '_data/updates.yml'
-###################################
-_dump() {
-  local _lasmod="`git log -1 --pretty=%ad --date=iso $2`"
-
-  echo "-" >> "$OUTPUT_DIR/$OUTPUT_FILE"
-  echo "  filename: '$1'" >> "$OUTPUT_DIR/$OUTPUT_FILE"
-  echo "  lastmod: '$_lasmod'" >> "$OUTPUT_DIR/$OUTPUT_FILE"
-}
-
-
-main() {
-
-  _init
-
-  local _count=0
-
-  for _file in $(ls -r "$POST_DIR")
-  do
-    _filepath="$POST_DIR/$_file"
-    _filename="${_file%.*}"     # jekyll cannot read the extension of a file, so omit it.
-    _filename=${_filename:11}   # remove the date
-
-    if _has_changed "$_filepath"; then
-      _dump "$_filename" "$_filepath"
-      ((_count=_count+1))
-    fi
-
-  done
-
-  if [[ $_count > 0 ]]; then
-    echo "[INFO] Success to update lastmod for $_count post(s)."
-  fi
-}
-
-
-main
diff --git a/_scripts/sh/sync_monitor.sh b/_scripts/sh/sync_monitor.sh
deleted file mode 100644
index fd7840e7238..00000000000
--- a/_scripts/sh/sync_monitor.sh
+++ /dev/null
@@ -1,38 +0,0 @@
-#!/bin/bash
-
-# Files sync monitor
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT Licensed
-
-# $1 -> the origin file with absolute path.
-# $2 -> the origin sync directory
-# $3 -> the destination sync directory
-
-# Omit the system temp file
-if [[ ! -f $1 ]]; then
-  exit 0
-fi
-
-src_dir=`dirname $(realpath $1)`
-
-dir_prefix="$(realpath $2)/"
-
-related_dir="${src_dir:${#dir_prefix}}"
-
-
-dest="$(realpath $3)/${related_dir}"
-
-if [[ ! -d "$dest" ]]; then
-  mkdir -p "$dest"
-fi
-
-if [[ -f "$1" ]]; then
-  cp $1 $dest
-fi
-
-if [[ $related_dir == "_posts" ]]; then
-  bash $3/_scripts/sh/create_pages.sh
-  bash $3/_scripts/sh/dump_lastmod.sh
-fi
diff --git a/tabs/about.md b/_tabs/about.md
similarity index 87%
rename from tabs/about.md
rename to _tabs/about.md
index 389930b5e32..97d1eaf437b 100644
--- a/tabs/about.md
+++ b/_tabs/about.md
@@ -1,11 +1,7 @@
 ---
 title: About
-
-# The About page
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
+icon: fas fa-info
+order: 4
 ---
 
 
@@ -23,4 +19,3 @@ A constant traveler at the intersection of engineering and science.
 **Grad school lab website:** [link](http://www.maranasgroup.com/)
     - This was created when I was learning the Bootstrap Framework. Currently, it is actively maintained by the lab members. 
 
-
diff --git a/_tabs/archives.md b/_tabs/archives.md
new file mode 100644
index 00000000000..f969f92f2eb
--- /dev/null
+++ b/_tabs/archives.md
@@ -0,0 +1,7 @@
+---
+layout: archives
+title: Archives
+icon: fas fa-archive
+order: 3
+---
+
diff --git a/_tabs/categories.md b/_tabs/categories.md
new file mode 100644
index 00000000000..3a23c2951f5
--- /dev/null
+++ b/_tabs/categories.md
@@ -0,0 +1,6 @@
+---
+layout: categories
+title: Categories
+icon: fas fa-stream
+order: 1
+---
diff --git a/_tabs/tags.md b/_tabs/tags.md
new file mode 100644
index 00000000000..53abc94b8dd
--- /dev/null
+++ b/_tabs/tags.md
@@ -0,0 +1,6 @@
+---
+layout: tags
+title: Tags
+icon: fas fa-tags
+order: 2
+---
diff --git a/app.js b/app.js
index 9b80e00096d..b821164c738 100644
--- a/app.js
+++ b/app.js
@@ -1,12 +1,8 @@
 ---
 layout: compress
-# Chirpy v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# MIT Licensed
 ---
 
 /* Registering Service Worker */
 if('serviceWorker' in navigator) {
   navigator.serviceWorker.register('{{ "/sw.js" | relative_url }}');
-};
\ No newline at end of file
+};
diff --git a/assets/css/_addon/fonts.scss b/assets/css/_addon/fonts.scss
deleted file mode 100644
index dea90fb9940..00000000000
--- a/assets/css/_addon/fonts.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * The field 'font-display' is added for Google-fonts.
- *
- * See: <https://fonts.google.com/>
- *
- */
-
-@import url('https://fonts.googleapis.com/css?family=Lato|Roboto+Condensed:400,700|Source+Sans+Pro:400,600,700,900&display=swap');
\ No newline at end of file
diff --git a/assets/css/_colors/dark-syntax.scss b/assets/css/_colors/dark-syntax.scss
deleted file mode 100644
index 912acbb76b2..00000000000
--- a/assets/css/_colors/dark-syntax.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-/*!
-* The syntax dark mode styles.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
-*/
-
-@mixin dark-syntax {
-  /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
-  .highlight pre { background-color: #272822; }
-  .highlight .hll { background-color: #272822; }
-  .highlight .c { color: #75715e } /* Comment */
-  .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
-  .highlight .k { color: #66d9ef } /* Keyword */
-  .highlight .l { color: #ae81ff } /* Literal */
-  .highlight .n { color: #f8f8f2 } /* Name */
-  .highlight .o { color: #f92672 } /* Operator */
-  .highlight .p { color: #f8f8f2 } /* Punctuation */
-  .highlight .cm { color: #75715e } /* Comment.Multiline */
-  .highlight .cp { color: #75715e } /* Comment.Preproc */
-  .highlight .c1 { color: #75715e } /* Comment.Single */
-  .highlight .cs { color: #75715e } /* Comment.Special */
-  .highlight .ge { font-style: italic } /* Generic.Emph */
-  .highlight .gs { font-weight: bold } /* Generic.Strong */
-  .highlight .kc { color: #66d9ef } /* Keyword.Constant */
-  .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
-  .highlight .kn { color: #f92672 } /* Keyword.Namespace */
-  .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
-  .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
-  .highlight .kt { color: #66d9ef } /* Keyword.Type */
-  .highlight .ld { color: #e6db74 } /* Literal.Date */
-  .highlight .m { color: #ae81ff } /* Literal.Number */
-  .highlight .s { color: #e6db74 } /* Literal.String */
-  .highlight .na { color: #a6e22e } /* Name.Attribute */
-  .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
-  .highlight .nc { color: #a6e22e } /* Name.Class */
-  .highlight .no { color: #66d9ef } /* Name.Constant */
-  .highlight .nd { color: #a6e22e } /* Name.Decorator */
-  .highlight .ni { color: #f8f8f2 } /* Name.Entity */
-  .highlight .ne { color: #a6e22e } /* Name.Exception */
-  .highlight .nf { color: #a6e22e } /* Name.Function */
-  .highlight .nl { color: #f8f8f2 } /* Name.Label */
-  .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
-  .highlight .nx { color: #a6e22e } /* Name.Other */
-  .highlight .py { color: #f8f8f2 } /* Name.Property */
-  .highlight .nt { color: #f92672 } /* Name.Tag */
-  .highlight .nv { color: #f8f8f2 } /* Name.Variable */
-  .highlight .ow { color: #f92672 } /* Operator.Word */
-  .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
-  .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
-  .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
-  .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
-  .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
-  .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
-  .highlight .sc { color: #e6db74 } /* Literal.String.Char */
-  .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
-  .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
-  .highlight .se { color: #ae81ff } /* Literal.String.Escape */
-  .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
-  .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
-  .highlight .sx { color: #e6db74 } /* Literal.String.Other */
-  .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
-  .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
-  .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
-  .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-  .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
-  .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
-  .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-  .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
-
-  .highlight .gh { } /* Generic Heading & Diff Header */
-  .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
-  .highlight .gd { color: #f92672; background-color: #561c08 } /* Generic.Deleted & Diff Deleted */
-  .highlight .gi { color: #a6e22e; background-color: #0b5858 } /* Generic.Inserted & Diff Inserted */
-
-
-  /*-----  My styles ------*/
-
-  --highlight-bg-color: #272822;
-  --highlighter-rouge-color: #de6b18;
-
-  --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #3c4042;
-
-  --inline-code-bg: var(--highlight-bg-color);
-
-  .highlight {
-    .gp { color: #818c96; }
-  }
-  pre { color: #818c96 } /* override Bootstrap */
-  kbd { background-color: black; }
-}
\ No newline at end of file
diff --git a/assets/css/_colors/light-syntax.scss b/assets/css/_colors/light-syntax.scss
deleted file mode 100644
index 367d9cd8e38..00000000000
--- a/assets/css/_colors/light-syntax.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-/*!
-* The syntax light mode code snippet colors.
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
-*/
-
-@mixin light-syntax {
-  /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
-  .highlight .hll { background-color: #ffffcc }
-  .highlight .c { color: #999988; font-style: italic } /* Comment */
-  .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-  .highlight .k { color: #000000; font-weight: bold } /* Keyword */
-  .highlight .o { color: #000000; font-weight: bold } /* Operator */
-  .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-  .highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
-  .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
-  .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-  .highlight .gd { color: #d01040; background-color: #ffdddd } /* Generic.Deleted */
-  .highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
-  .highlight .gr { color: #aa0000 } /* Generic.Error */
-  .highlight .gh { color: #999999 } /* Generic.Heading */
-  .highlight .gi { color: #008080; background-color: #ddffdd } /* Generic.Inserted */
-  .highlight .go { color: #888888 } /* Generic.Output */
-  .highlight .gp { color: #555555 } /* Generic.Prompt */
-  .highlight .gs { font-weight: bold } /* Generic.Strong */
-  .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
-  .highlight .gt { color: #aa0000 } /* Generic.Traceback */
-  .highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
-  .highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
-  .highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
-  .highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
-  .highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
-  .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-  .highlight .m { color: #009999 } /* Literal.Number */
-  .highlight .s { color: #d01040 } /* Literal.String */
-  .highlight .na { color: #008080 } /* Name.Attribute */
-  .highlight .nb { color: #0086B3 } /* Name.Builtin */
-  .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
-  .highlight .no { color: #008080 } /* Name.Constant */
-  .highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
-  .highlight .ni { color: #800080 } /* Name.Entity */
-  .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
-  .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
-  .highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
-  .highlight .nn { color: #555555 } /* Name.Namespace */
-  .highlight .nt { color: #000080 } /* Name.Tag */
-  .highlight .nv { color: #008080 } /* Name.Variable */
-  .highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
-  .highlight .w { color: #bbbbbb } /* Text.Whitespace */
-  .highlight .mf { color: #009999 } /* Literal.Number.Float */
-  .highlight .mh { color: #009999 } /* Literal.Number.Hex */
-  .highlight .mi { color: #009999 } /* Literal.Number.Integer */
-  .highlight .mo { color: #009999 } /* Literal.Number.Oct */
-  .highlight .sb { color: #d01040 } /* Literal.String.Backtick */
-  .highlight .sc { color: #d01040 } /* Literal.String.Char */
-  .highlight .sd { color: #d01040 } /* Literal.String.Doc */
-  .highlight .s2 { color: #d01040 } /* Literal.String.Double */
-  .highlight .se { color: #d01040 } /* Literal.String.Escape */
-  .highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
-  .highlight .si { color: #d01040 } /* Literal.String.Interpol */
-  .highlight .sx { color: #d01040 } /* Literal.String.Other */
-  .highlight .sr { color: #009926 } /* Literal.String.Regex */
-  .highlight .s1 { color: #d01040 } /* Literal.String.Single */
-  .highlight .ss { color: #990073 } /* Literal.String.Symbol */
-  .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
-  .highlight .vc { color: #008080 } /* Name.Variable.Class */
-  .highlight .vg { color: #008080 } /* Name.Variable.Global */
-  .highlight .vi { color: #008080 } /* Name.Variable.Instance */
-  .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
-
-  /*--- custom light colors ---*/
-  --highlight-bg-color: #f7f7f7;
-  --highlighter-rouge-color: #353a3d;
-  --highlight-lineno-color: #c2c6cc;
-  --highlight-lineno-border-color: #e9ecef;
-
-  --inline-code-bg: #f3f3f3;
-} // light-syntax
diff --git a/assets/css/lib/bootstrap-toc.min.css b/assets/css/lib/bootstrap-toc.min.css
deleted file mode 100644
index 3c6210780b4..00000000000
--- a/assets/css/lib/bootstrap-toc.min.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/*!
- * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/)
- * Copyright 2015 Aidan Feldman
- * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */nav[data-toggle=toc] .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}nav[data-toggle=toc] .nav-link.active,nav[data-toggle=toc] .nav-link.active:focus,nav[data-toggle=toc] .nav-link.active:hover{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}nav[data-toggle=toc] .nav-link+ul{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav>li>a:hover{padding-left:29px}nav[data-toggle=toc] .nav .nav>li>.active,nav[data-toggle=toc] .nav .nav>li>.active:focus,nav[data-toggle=toc] .nav .nav>li>.active:hover{padding-left:28px;font-weight:500}nav[data-toggle=toc] .nav-link.active+ul{display:block}
\ No newline at end of file
diff --git a/assets/css/page.scss b/assets/css/page.scss
deleted file mode 100644
index 10ef9fa3e60..00000000000
--- a/assets/css/page.scss
+++ /dev/null
@@ -1,10 +0,0 @@
----
-# The default style for layout Page
-# v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# MIT License
----
-
-{% include_relative _addon/main.scss %}
-{% include_relative _addon/syntax.scss %}
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 00000000000..d437fb52399
--- /dev/null
+++ b/assets/css/style.scss
@@ -0,0 +1,7 @@
+---
+---
+
+// see: /_sass/addon/commons.scss
+$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
+
+@import "jekyll-theme-chirpy";
diff --git a/assets/img/favicons/android-icon-144x144.png b/assets/img/favicons/android-icon-144x144.png
index 782cf3a9437..520e7051cf9 100644
Binary files a/assets/img/favicons/android-icon-144x144.png and b/assets/img/favicons/android-icon-144x144.png differ
diff --git a/assets/img/favicons/android-icon-192x192.png b/assets/img/favicons/android-icon-192x192.png
index db2d8e67a4c..e65796e26c3 100644
Binary files a/assets/img/favicons/android-icon-192x192.png and b/assets/img/favicons/android-icon-192x192.png differ
diff --git a/assets/img/favicons/android-icon-36x36.png b/assets/img/favicons/android-icon-36x36.png
index 0b560f44853..8843afb3bbe 100644
Binary files a/assets/img/favicons/android-icon-36x36.png and b/assets/img/favicons/android-icon-36x36.png differ
diff --git a/assets/img/favicons/android-icon-48x48.png b/assets/img/favicons/android-icon-48x48.png
index 7b01aa734ab..3dac48f961c 100644
Binary files a/assets/img/favicons/android-icon-48x48.png and b/assets/img/favicons/android-icon-48x48.png differ
diff --git a/assets/img/favicons/android-icon-72x72.png b/assets/img/favicons/android-icon-72x72.png
index a841bb8066e..cd57f1983fc 100644
Binary files a/assets/img/favicons/android-icon-72x72.png and b/assets/img/favicons/android-icon-72x72.png differ
diff --git a/assets/img/favicons/android-icon-96x96.png b/assets/img/favicons/android-icon-96x96.png
index a9004f855a7..d094f93831e 100644
Binary files a/assets/img/favicons/android-icon-96x96.png and b/assets/img/favicons/android-icon-96x96.png differ
diff --git a/assets/img/favicons/apple-icon-114x114.png b/assets/img/favicons/apple-icon-114x114.png
index 59ea4a178bc..1594a9bfd38 100644
Binary files a/assets/img/favicons/apple-icon-114x114.png and b/assets/img/favicons/apple-icon-114x114.png differ
diff --git a/assets/img/favicons/apple-icon-120x120.png b/assets/img/favicons/apple-icon-120x120.png
index b44e035d906..b5284b68252 100644
Binary files a/assets/img/favicons/apple-icon-120x120.png and b/assets/img/favicons/apple-icon-120x120.png differ
diff --git a/assets/img/favicons/apple-icon-144x144.png b/assets/img/favicons/apple-icon-144x144.png
index 782cf3a9437..520e7051cf9 100644
Binary files a/assets/img/favicons/apple-icon-144x144.png and b/assets/img/favicons/apple-icon-144x144.png differ
diff --git a/assets/img/favicons/apple-icon-152x152.png b/assets/img/favicons/apple-icon-152x152.png
index 4bdb9384ad1..ef63a639cd1 100644
Binary files a/assets/img/favicons/apple-icon-152x152.png and b/assets/img/favicons/apple-icon-152x152.png differ
diff --git a/assets/img/favicons/apple-icon-180x180.png b/assets/img/favicons/apple-icon-180x180.png
index f1f5d357932..78454976166 100644
Binary files a/assets/img/favicons/apple-icon-180x180.png and b/assets/img/favicons/apple-icon-180x180.png differ
diff --git a/assets/img/favicons/apple-icon-57x57.png b/assets/img/favicons/apple-icon-57x57.png
index 0874717aca7..2bee5dbfb35 100644
Binary files a/assets/img/favicons/apple-icon-57x57.png and b/assets/img/favicons/apple-icon-57x57.png differ
diff --git a/assets/img/favicons/apple-icon-60x60.png b/assets/img/favicons/apple-icon-60x60.png
index c841d6ed19a..9cbf452e440 100644
Binary files a/assets/img/favicons/apple-icon-60x60.png and b/assets/img/favicons/apple-icon-60x60.png differ
diff --git a/assets/img/favicons/apple-icon-72x72.png b/assets/img/favicons/apple-icon-72x72.png
index a841bb8066e..cd57f1983fc 100644
Binary files a/assets/img/favicons/apple-icon-72x72.png and b/assets/img/favicons/apple-icon-72x72.png differ
diff --git a/assets/img/favicons/apple-icon-76x76.png b/assets/img/favicons/apple-icon-76x76.png
index 3dc2e8bbc7f..dba88878b1a 100644
Binary files a/assets/img/favicons/apple-icon-76x76.png and b/assets/img/favicons/apple-icon-76x76.png differ
diff --git a/assets/img/favicons/apple-icon-precomposed.png b/assets/img/favicons/apple-icon-precomposed.png
index 8eb50f63a68..6b9f2b45311 100644
Binary files a/assets/img/favicons/apple-icon-precomposed.png and b/assets/img/favicons/apple-icon-precomposed.png differ
diff --git a/assets/img/favicons/apple-icon.png b/assets/img/favicons/apple-icon.png
index 8eb50f63a68..6b9f2b45311 100644
Binary files a/assets/img/favicons/apple-icon.png and b/assets/img/favicons/apple-icon.png differ
diff --git a/assets/img/favicons/browserconfig.xml b/assets/img/favicons/browserconfig.xml
index 723f626a72c..2cc14993183 100644
--- a/assets/img/favicons/browserconfig.xml
+++ b/assets/img/favicons/browserconfig.xml
@@ -2,10 +2,6 @@
 layout: compress
 
 # A part of the Favicons
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
 ---
 <?xml version="1.0" encoding="utf-8"?>
 <browserconfig>
@@ -17,4 +13,4 @@ layout: compress
       <TileColor>#ffffff</TileColor>
     </tile>
   </msapplication>
-</browserconfig>
\ No newline at end of file
+</browserconfig>
diff --git a/assets/img/favicons/favicon-16x16.png b/assets/img/favicons/favicon-16x16.png
index 5033c246cc1..271d085013e 100644
Binary files a/assets/img/favicons/favicon-16x16.png and b/assets/img/favicons/favicon-16x16.png differ
diff --git a/assets/img/favicons/favicon-32x32.png b/assets/img/favicons/favicon-32x32.png
index 7f903ae1269..05e1753a1ce 100644
Binary files a/assets/img/favicons/favicon-32x32.png and b/assets/img/favicons/favicon-32x32.png differ
diff --git a/assets/img/favicons/favicon-96x96.png b/assets/img/favicons/favicon-96x96.png
index a9004f855a7..d094f93831e 100644
Binary files a/assets/img/favicons/favicon-96x96.png and b/assets/img/favicons/favicon-96x96.png differ
diff --git a/assets/img/favicons/favicon.ico b/assets/img/favicons/favicon.ico
index b02d8bfd463..79bca9ffd15 100644
Binary files a/assets/img/favicons/favicon.ico and b/assets/img/favicons/favicon.ico differ
diff --git a/assets/img/favicons/manifest.json b/assets/img/favicons/manifest.json
index a6e323e9922..9eddf1aa4c6 100644
--- a/assets/img/favicons/manifest.json
+++ b/assets/img/favicons/manifest.json
@@ -2,10 +2,6 @@
 layout: compress
 #
 # A part of the Favicons
-# Chirpy v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
 ---
 
 {% assign icon_url = "/assets/img/favicons" | relative_url %}
diff --git a/assets/img/favicons/ms-icon-144x144.png b/assets/img/favicons/ms-icon-144x144.png
index 782cf3a9437..520e7051cf9 100644
Binary files a/assets/img/favicons/ms-icon-144x144.png and b/assets/img/favicons/ms-icon-144x144.png differ
diff --git a/assets/img/favicons/ms-icon-150x150.png b/assets/img/favicons/ms-icon-150x150.png
index 2b56368f4f8..96af34f85ae 100644
Binary files a/assets/img/favicons/ms-icon-150x150.png and b/assets/img/favicons/ms-icon-150x150.png differ
diff --git a/assets/img/favicons/ms-icon-310x310.png b/assets/img/favicons/ms-icon-310x310.png
index f95a77a25aa..9fda6ee80c1 100644
Binary files a/assets/img/favicons/ms-icon-310x310.png and b/assets/img/favicons/ms-icon-310x310.png differ
diff --git a/assets/img/favicons/ms-icon-70x70.png b/assets/img/favicons/ms-icon-70x70.png
index 685290b73da..cc7fec09605 100644
Binary files a/assets/img/favicons/ms-icon-70x70.png and b/assets/img/favicons/ms-icon-70x70.png differ
diff --git a/assets/js/_commons/back-to-top.js b/assets/js/_commons/back-to-top.js
index 810d9a60450..1807332a079 100644
--- a/assets/js/_commons/back-to-top.js
+++ b/assets/js/_commons/back-to-top.js
@@ -1,18 +1,20 @@
 /*
 Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
 */
-$(window).scroll(function() {
-  if ($(this).scrollTop() > 50
-      && $('#sidebar-trigger').css('display') == 'none') {
-    $('#back-to-top').fadeIn();
-  } else {
-    $('#back-to-top').fadeOut();
-  }
-});
-
 $(function() {
-  $('#back-to-top').click(function() {
-    $('body,html').animate({scrollTop: 0}, 800);
+  $(window).scroll(() => {
+    if ($(this).scrollTop() > 50 &&
+      $("#sidebar-trigger").css("display") === "none") {
+      $("#back-to-top").fadeIn();
+    } else {
+      $("#back-to-top").fadeOut();
+    }
+  });
+
+  $("#back-to-top").click(() => {
+    $("body,html").animate({
+      scrollTop: 0
+    }, 800);
     return false;
   });
-});
\ No newline at end of file
+});
diff --git a/assets/js/_commons/checkbox.js b/assets/js/_commons/checkbox.js
new file mode 100644
index 00000000000..b600d0a76c5
--- /dev/null
+++ b/assets/js/_commons/checkbox.js
@@ -0,0 +1,12 @@
+/*
+ * Create a more beautiful checkbox
+ */
+
+$(function() {
+  /* hide browser default checkbox */
+  $("input[type=checkbox]").addClass("unloaded");
+  /* create checked checkbox */
+  $("input[type=checkbox][checked]").before("<i class=\"fas fa-check-circle checked\"></i>");
+  /* create normal checkbox */
+  $("input[type=checkbox]:not([checked])").before("<i class=\"far fa-circle\"></i>");
+});
diff --git a/assets/js/_commons/copy-link.js b/assets/js/_commons/copy-link.js
index 24cc8dcfc5b..2d5e99d3ff8 100644
--- a/assets/js/_commons/copy-link.js
+++ b/assets/js/_commons/copy-link.js
@@ -1,20 +1,18 @@
 /*
-* Copy current page url to clipboard.
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT License
-*/
+ * Copy current page url to clipboard.
+ */
 
 function copyLink(url) {
-  if (!url || 0 === url.length)
-  url = window.location.href;
-  var $temp = $("<input>");
+  if (!url || 0 === url.length) {
+    url = window.location.href;
+  }
 
+  const $temp = $("<input>");
   $("body").append($temp);
   $temp.val(url).select();
   document.execCommand("copy");
   $temp.remove();
 
   alert("Link copied successfully!");
-}
\ No newline at end of file
+
+}
diff --git a/assets/js/_commons/search-display.js b/assets/js/_commons/search-display.js
index a34babd2a30..1d0518f722a 100644
--- a/assets/js/_commons/search-display.js
+++ b/assets/js/_commons/search-display.js
@@ -1,101 +1,100 @@
 /*
 * This script make #search-result-wrapper switch to unloaded or shown automatically.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT License
 */
 
 $(function() {
 
-  var btnSbTrigger = $('#sidebar-trigger');
-  var btnSearchTrigger = $('#search-trigger');
-  var btnCancel = $('#search-cancel');
-  var btnClear = $('#search-cleaner');
-
-  var main = $('#main');
-  var topbarTitle = $('#topbar-title');
-  var searchWrapper = $('#search-wrapper');
-  var resultWrapper = $('#search-result-wrapper');
-  var results = $('#search-results');
-  var input = $('#search-input');
-  var hints = $('#search-hints');
-
-
-  /*--- Actions in small screens (Sidebar unloaded) ---*/
-
-  var scrollBlocker = (function() {
-    var offset = 0;
+  const btnSbTrigger = $("#sidebar-trigger");
+  const btnSearchTrigger = $("#search-trigger");
+  const btnCancel = $("#search-cancel");
+  const btnClear = $("#search-cleaner");
+
+  const main = $("#main");
+  const topbarTitle = $("#topbar-title");
+  const searchWrapper = $("#search-wrapper");
+  const resultWrapper = $("#search-result-wrapper");
+  const results = $("#search-results");
+  const input = $("#search-input");
+  const hints = $("#search-hints");
+
+  const scrollBlocker = (function () {
+    let offset = 0;
     return {
-      block: function() {
-        offset = $(window).scrollTop();
+      block() {
+        offset = window.scrollY;
+        $("html,body").scrollTop(0);
       },
-      release: function() {
-        $('html,body').scrollTop(offset);
+      release() {
+        $("html,body").scrollTop(offset);
       },
-      getOffset: function() {
+      getOffset() {
         return offset;
       }
-    }
-  })();
+    };
+  }());
 
-  var mobileSearchBar = (function() {
+
+  /*--- Actions in small screens (Sidebar unloaded) ---*/
+
+  const mobileSearchBar = (function () {
     return {
-      on: function() {
-        btnSbTrigger.addClass('unloaded');
-        topbarTitle.addClass('unloaded');
-        btnSearchTrigger.addClass('unloaded');
-        searchWrapper.addClass('d-flex');
-        btnCancel.addClass('loaded');
+      on() {
+        btnSbTrigger.addClass("unloaded");
+        topbarTitle.addClass("unloaded");
+        btnSearchTrigger.addClass("unloaded");
+        searchWrapper.addClass("d-flex");
+        btnCancel.addClass("loaded");
       },
-      off: function() {
-        btnCancel.removeClass('loaded');
-        searchWrapper.removeClass('d-flex');
-        btnSbTrigger.removeClass('unloaded');
-        topbarTitle.removeClass('unloaded');
-        btnSearchTrigger.removeClass('unloaded');
+      off() {
+        btnCancel.removeClass("loaded");
+        searchWrapper.removeClass("d-flex");
+        btnSbTrigger.removeClass("unloaded");
+        topbarTitle.removeClass("unloaded");
+        btnSearchTrigger.removeClass("unloaded");
       }
-    }
-  })();
+    };
+  }());
 
-  var resultSwitch = (function() {
-    var visable = false;
+  const resultSwitch = (function () {
+    let visible = false;
 
     return {
-      on: function() {
-        if (!visable) {
-          resultWrapper.removeClass('unloaded');
-          main.addClass('hidden');
-
-          visable = true;
+      on() {
+        if (!visible) {
+          // the block method must be called before $(#main) unloaded.
           scrollBlocker.block();
+          resultWrapper.removeClass("unloaded");
+          main.addClass("unloaded");
+          visible = true;
         }
       },
-      off: function() {
-        if (visable) {
+      off() {
+        if (visible) {
           results.empty();
-          if (hints.hasClass('unloaded')) {
-            hints.removeClass('unloaded');
+          if (hints.hasClass("unloaded")) {
+            hints.removeClass("unloaded");
           }
-          resultWrapper.addClass('unloaded');
-          btnClear.removeClass('visable');
-          main.removeClass('hidden');
-
-          input.val('');
-          visable = false;
+          resultWrapper.addClass("unloaded");
+          btnClear.removeClass("visible");
+          main.removeClass("unloaded");
 
+          // now the release method must be called after $(#main) display
           scrollBlocker.release();
+
+          input.val("");
+          visible = false;
         }
       },
-      isVisable: function() {
-        return visable;
+      isVisible() {
+        return visible;
       }
-    }
-  })();
+    };
+
+  }());
 
 
   function isMobileView() {
-    return btnCancel.hasClass('loaded');
+    return btnCancel.hasClass("loaded");
   }
 
   btnSearchTrigger.click(function() {
@@ -110,45 +109,45 @@ $(function() {
   });
 
   input.focus(function() {
-    searchWrapper.addClass('input-focus');
+    searchWrapper.addClass("input-focus");
   });
 
   input.focusout(function() {
-    searchWrapper.removeClass('input-focus');
+    searchWrapper.removeClass("input-focus");
   });
 
-  input.on('keyup', function(e) {
-    if (e.keyCode == 8 && input.val() == '') {
+  input.on("keyup", function(e) {
+    if (e.keyCode === 8 && input.val() === "") {
       if (!isMobileView()) {
         resultSwitch.off();
       } else {
-        hints.removeClass('unloaded');
+        hints.removeClass("unloaded");
       }
     } else {
-      if (input.val() != '') {
+      if (input.val() !== "") {
         resultSwitch.on();
 
-        if (!btnClear.hasClass('visible')) {
-          btnClear.addClass('visable');
+        if (!btnClear.hasClass("visible")) {
+          btnClear.addClass("visible");
         }
 
         if (isMobileView()) {
-          hints.addClass('unloaded');
+          hints.addClass("unloaded");
         }
       }
     }
   });
 
-  btnClear.on('click', function() {
-    input.val('');
+  btnClear.on("click", function() {
+    input.val("");
     if (isMobileView()) {
-      hints.removeClass('unloaded');
+      hints.removeClass("unloaded");
       results.empty();
     } else {
       resultSwitch.off();
     }
     input.focus();
-    btnClear.removeClass('visable');
+    btnClear.removeClass("visible");
   });
 
-});
\ No newline at end of file
+});
diff --git a/assets/js/_commons/sidebar.js b/assets/js/_commons/sidebar.js
index bf6551bef36..014411a1885 100644
--- a/assets/js/_commons/sidebar.js
+++ b/assets/js/_commons/sidebar.js
@@ -1,34 +1,30 @@
 /**
  * Expand or close the sidebar in mobile screens.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
  */
 
 $(function() {
 
-  var sidebarUtil = (function() {
+  const sidebarUtil = (function () {
     const ATTR_DISPLAY = "sidebar-display";
-    var isExpanded = false;
-    var body = $('body');
+    let isExpanded = false;
+    const body = $("body");
 
     return {
-      toggle: function() {
-        if (isExpanded == false) {
-          body.attr(ATTR_DISPLAY, '');
+      toggle() {
+        if (isExpanded === false) {
+          body.attr(ATTR_DISPLAY, "");
         } else {
           body.removeAttr(ATTR_DISPLAY);
         }
 
         isExpanded = !isExpanded;
       }
-    }
+    };
 
-  })();
+  }());
 
   $("#sidebar-trigger").click(sidebarUtil.toggle);
 
-  $('#mask').click(sidebarUtil.toggle);
+  $("#mask").click(sidebarUtil.toggle);
 
 });
diff --git a/assets/js/_commons/tooltip-loader.js b/assets/js/_commons/tooltip-loader.js
new file mode 100644
index 00000000000..90c6a98f43c
--- /dev/null
+++ b/assets/js/_commons/tooltip-loader.js
@@ -0,0 +1,6 @@
+/**
+ * Initial Bootstrap Tooltip.
+*/
+$(function () {
+  $("[data-toggle=\"tooltip\"]").tooltip();
+});
diff --git a/assets/js/_commons/topbar-switch.js b/assets/js/_commons/topbar-switch.js
index 30b1963d564..55fbab6dfda 100644
--- a/assets/js/_commons/topbar-switch.js
+++ b/assets/js/_commons/topbar-switch.js
@@ -1,67 +1,69 @@
 /*
  * Hide Header on scroll down
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
  */
 
 $(function() {
 
-  var didScroll;
-  var lastScrollTop = 0;
-  var delta = 5;
-  var topbarHeight = $('#topbar-wrapper').outerHeight();
+  const topbarWrapper = $("#topbar-wrapper");
+  const toc = $("#toc-wrapper");
+  const access = $(".access");
+  const searchInput = $("#search-input");
 
-  $(window).scroll(function(event) {
-    if ($("#topbar-title").is(":hidden")) { /* Not in small screens */
-      didScroll = true;
-    }
-  });
+  let didScroll;
+  let lastScrollTop = 0;
 
-  setInterval(function() {
-    if (didScroll) {
-      hasScrolled();
-      didScroll = false;
-    }
-  }, 250);
+  const delta = 5;
+  const topbarHeight = topbarWrapper.outerHeight();
 
   function hasScrolled() {
     var st = $(this).scrollTop();
 
     /* Make sure they scroll more than delta */
-    if (Math.abs(lastScrollTop - st) <= delta)
+    if (Math.abs(lastScrollTop - st) <= delta) {
       return;
+    }
 
     if (st > lastScrollTop && st > topbarHeight) {
       /* Scroll Down */
-      $('#topbar-wrapper').removeClass('topbar-down').addClass('topbar-up');
+      topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
 
-      if ( $('#toc-wrapper').length > 0) {
-        $('#toc-wrapper').removeClass('topbar-down');
+      if (toc.length > 0) {
+        toc.removeClass("topbar-down");
       }
 
-      if ( $('.access').length > 0) {
-        $('.access').removeClass('topbar-down');
+      if (access.length > 0) {
+        access.removeClass("topbar-down");
       }
 
-      if ($('#search-input').is(':focus')) {
-        $('#search-input').blur(); /* remove focus */
+      if (searchInput.is(":focus")) {
+        searchInput.blur(); /* remove focus */
       }
 
-    } else {
+    } else if (st + $(window).height() < $(document).height()) {
       /* Scroll Up */
-      if (st + $(window).height() < $(document).height()) {
-        $('#topbar-wrapper').removeClass('topbar-up').addClass('topbar-down');
-        if ( $('#toc-wrapper').length > 0) {
-          $('#toc-wrapper').addClass('topbar-down');
-        }
-        if ( $('.access').length > 0) {
-          $('.access').addClass('topbar-down');
-        }
+      topbarWrapper.removeClass("topbar-up").addClass("topbar-down");
+      if (toc.length > 0) {
+        toc.addClass("topbar-down");
+      }
+      if (access.length > 0) {
+        access.addClass("topbar-down");
       }
     }
 
     lastScrollTop = st;
   }
-});
\ No newline at end of file
+
+  $(window).scroll(function(event) {
+    if ($("#topbar-title").is(":hidden")) { /* Not in small screens */
+      didScroll = true;
+    }
+  });
+
+  setInterval(function() {
+    if (didScroll) {
+      hasScrolled();
+      didScroll = false;
+    }
+  }, 250);
+
+});
diff --git a/assets/js/_commons/topbar-title.js b/assets/js/_commons/topbar-title.js
index 136a24f0cf1..6bc78055087 100644
--- a/assets/js/_commons/topbar-title.js
+++ b/assets/js/_commons/topbar-title.js
@@ -1,47 +1,47 @@
 /*
- * Topbar title auto change while scrolling in mobile screens.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
+ * Top bar title auto change while scrolling in mobile screens.
 */
 
 $(function() {
 
-  var DEFAULT = $("#topbar-title").text().trim();
-  var title = ($("div.post>h1").length > 0) ?
-          $("div.post>h1").text().trim() : $("h1").text().trim();
+  const topbarTitle = $("#topbar-title");
+  const postTitle = $("div.post>h1");
+
+  const DEFAULT = topbarTitle.text().trim();
+
+  let title = (postTitle.length > 0) ?
+    postTitle.text().trim() : $("h1").text().trim();
 
   if ($("#page-category").length || $("#page-tag").length) {
-    /* The title in Category or Tag page will be '<title> <count_of_posts>' */
+    /* The title in Category or Tag page will be "<title> <count_of_posts>" */
     if (/\s/.test(title)) {
-      title = title.replace(/[0-9]/g, '').trim();
+      title = title.replace(/[0-9]/g, "").trim();
     }
   }
 
   /* Replace topbar title while scroll screens. */
   $(window).scroll(function () {
     if ($("#post-list").length /* in Home page */
-      || $("div.post>h1").is(":hidden") /* is tab pages */
-      || $("#topbar-title").is(":hidden") /* not mobile screens */
+      || postTitle.is(":hidden") /* is tab pages */
+      || topbarTitle.is(":hidden") /* not mobile screens */
       || $("#sidebar.sidebar-expand").length) { /* when the sidebar trigger is clicked */
       return false;
     }
 
     if ($(this).scrollTop() >= 95) {
-      if ($("#topbar-title").text() != title) {
-        $("#topbar-title").text(title);
+      if (topbarTitle.text() !== title) {
+        topbarTitle.text(title);
       }
     } else {
-      if ($("#topbar-title").text() != DEFAULT) {
-        $("#topbar-title").text(DEFAULT);
+      if (topbarTitle.text() !== DEFAULT) {
+        topbarTitle.text(DEFAULT);
       }
     }
   });
 
   /* Click title remove hover effect. */
-  $('#topbar-title').click(function() {
-    $('body,html').animate({scrollTop: 0}, 800);
+  topbarTitle.click(function() {
+    $("body,html").animate({scrollTop: 0}, 800);
   });
 
-});
\ No newline at end of file
+});
diff --git a/assets/js/_copyright b/assets/js/_copyright
new file mode 100644
index 00000000000..6af9119fdf1
--- /dev/null
+++ b/assets/js/_copyright
@@ -0,0 +1,5 @@
+/*!
+ * Chirpy v3.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
diff --git a/assets/js/_utils/category-collapse.js b/assets/js/_utils/category-collapse.js
index d1ff2204eb4..904b4481252 100644
--- a/assets/js/_utils/category-collapse.js
+++ b/assets/js/_utils/category-collapse.js
@@ -1,33 +1,30 @@
 /*
  * Tab 'Categories' expand/close effect.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
  */
 
 $(function() {
-  var child_prefix = "l_";
-  var parent_prefix = "h_";
+  const childPrefix = "l_";
+  const parentPrefix = "h_";
+  const collapse = $(".collapse");
 
   /* close up top-category */
-  $(".collapse").on("hide.bs.collapse", function() { /* Bootstrap collapse events. */
-    var parent_id = parent_prefix + $(this).attr('id').substring(child_prefix.length);
-    if (parent_id) {
-      $("#" + parent_id + " .far.fa-folder-open").attr("class", "far fa-folder fa-fw");
-      $("#" + parent_id + " i.fas").addClass("rotate");
-      $("#" + parent_id).removeClass("hide-border-bottom");
+  collapse.on("hide.bs.collapse", function () { /* Bootstrap collapse events. */
+    const parentId = parentPrefix + $(this).attr("id").substring(childPrefix.length);
+    if (parentId) {
+      $(`#${parentId} .far.fa-folder-open`).attr("class", "far fa-folder fa-fw");
+      $(`#${parentId} i.fas`).addClass("rotate");
+      $(`#${parentId}`).removeClass("hide-border-bottom");
     }
   });
 
   /* expand the top category */
-  $(".collapse").on("show.bs.collapse", function() {
-    var parent_id = parent_prefix + $(this).attr('id').substring(child_prefix.length);
-    if (parent_id) {
-      $("#" + parent_id + " .far.fa-folder").attr("class", "far fa-folder-open fa-fw");
-      $("#" + parent_id + " i.fas").removeClass("rotate");
-      $("#" + parent_id).addClass("hide-border-bottom");
+  collapse.on("show.bs.collapse", function() {
+    const parentId = parentPrefix + $(this).attr("id").substring(childPrefix.length);
+    if (parentId) {
+      $(`#${parentId} .far.fa-folder`).attr("class", "far fa-folder-open fa-fw");
+      $(`#${parentId} i.fas`).removeClass("rotate");
+      $(`#${parentId}`).addClass("hide-border-bottom");
     }
   });
 
-});
\ No newline at end of file
+});
diff --git a/assets/js/_utils/img-hyperlink.js b/assets/js/_utils/img-hyperlink.js
new file mode 100644
index 00000000000..2722eac330e
--- /dev/null
+++ b/assets/js/_utils/img-hyperlink.js
@@ -0,0 +1,8 @@
+/*
+ * Find out the <a> tag contains an image and mark it.
+ */
+
+$(function() {
+  const MARK = "img-hyperlink";
+  $("a:has(img)").addClass(MARK);
+});
diff --git a/assets/js/_utils/lang-badge.js b/assets/js/_utils/lang-badge.js
new file mode 100644
index 00000000000..bad815d4058
--- /dev/null
+++ b/assets/js/_utils/lang-badge.js
@@ -0,0 +1,20 @@
+/**
+ *  Add language indicator to code snippets
+ */
+
+$(function() {
+  const prefix = "language-";
+  const regex = new RegExp(`^${prefix}([a-z])+$`);
+
+  $(`div[class^=${prefix}`).each(function() {
+    let classes = $(this).attr("class").split(" ");
+
+    classes.forEach((_class) => {
+      if (regex.test(_class)) {
+        let lang = _class.substring(prefix.length);
+        $(this).attr("lang", `${lang}`);
+      }
+    });
+
+  });
+});
diff --git a/assets/js/_utils/pageviews.js b/assets/js/_utils/pageviews.js
index 931b5a5195d..caa68cb8133 100644
--- a/assets/js/_utils/pageviews.js
+++ b/assets/js/_utils/pageviews.js
@@ -1,103 +1,42 @@
-/**
- * Count pageviews form GA or local cache file.
+/*
+ * Count page views form GA or local cache file.
  *
- * Dependences:
+ * Dependencies:
  *   - jQuery
  *   - countUp.js <https://github.com/inorganik/countUp.js>
- *
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
  */
 
-function countUp(min, max, destId) {
-  if (min < max) {
-    var numAnim = new CountUp(destId, min, max);
-    if (!numAnim.error) {
-      numAnim.start();
-    } else {
-      console.error(numAnim.error);
-    }
-  }
-}
-
-
-function countPV(path, rows) {
-  /* path permalink looks like: '/posts/post-title/' */
-  var fileName = path.replace(/\/posts\//g, '').replace(/\//g, '.html'); /* e.g. post-title.html */
-  var count = 0;
-
-  var _v2_url = path.replace(/posts\//g, ''); /* the v2.0+ blog permalink: "/post-title/" */
-
-  for (var i = 0; i < rows.length; ++i) {
-    var gaPath = rows[i][0];
-    if (gaPath == path ||
-      gaPath == _v2_url ||
-      gaPath.concat('/') == _v2_url ||
-      gaPath.slice(gaPath.lastIndexOf('/') + 1) === fileName) { /* old permalink record */
-      count += parseInt(rows[i][1]);
-    }
-  }
-
-  return count;
-}
-
-
-function tacklePV(rows, path, elem, hasInit) {
-  var count = countPV(path, rows);
-  count = (count == 0 ? 1 : count);
-
-  if (!hasInit) {
-    elem.text(new Intl.NumberFormat().format(count));
-  } else {
-    var initCount = parseInt(elem.text().replace(/,/g, ''));
-    if (count > initCount) {
-      countUp(initCount, count, elem.attr('id'));
-    }
-  }
-}
-
-
-function displayPageviews(data) {
-  if (data === undefined) {
-    return;
-  }
-
-  var hasInit = getInitStatus();
-  var rows = data.rows;
-
-  if ($("#post-list").length > 0) { /* the Home page */
-    $(".post-preview").each(function() {
-      var path = $(this).children("div").children("h1").children("a").attr("href");
-      tacklePV(rows, path, $(this).find('.pageviews'), hasInit);
-    });
-
-  } else if ($(".post").length > 0) { /* the post */
-    var path = window.location.pathname;
-    tacklePV(rows, path, $('#pv'), hasInit);
-  }
-}
-
-
-var getInitStatus = (function() {
-  var hasInit = false;
-  return function() {
+const getInitStatus = (function () {
+  let hasInit = false;
+  return () => {
     let ret = hasInit;
     if (!hasInit) {
       hasInit = true;
     }
     return ret;
-  }
-})();
+  };
+}());
 
+const PvOpts = (function () {
+  return {
+    isEnabled() {
+      return "true" === $("meta[name=pv-cache-enabled]").attr("content");
+    },
+    getProxyEndpoint() {
+      return $("meta[name=pv-proxy-endpoint]").attr("content");
+    },
+    getLocalData() {
+      return $("meta[name=pv-cache-data]").attr("content");
+    }
+  }
+}());
 
-var PvCache = (function() {
+const PvCache = (function () {
   const KEY_PV = "pv";
   const KEY_CREATION = "pv_created_date";
-  const KEY_PV_TYPE = "pv_type";
+  const KEY_PV_SRC = "pv_source";
 
-  var PvType = {
+  const Source = {
     ORIGIN: "origin",
     PROXY: "proxy"
   };
@@ -111,122 +50,181 @@ var PvCache = (function() {
   }
 
   return {
-    getData: function() {
-      return JSON.parse(localStorage.getItem(KEY_PV) );
+    getData() {
+      // get data from browser cache
+      return JSON.parse(localStorage.getItem(KEY_PV));
     },
-    saveOriginCache: function(pv) {
+    saveOriginCache(pv) {
       set(KEY_PV, pv);
-      set(KEY_PV_TYPE, PvType.ORIGIN );
-      set(KEY_CREATION, new Date().toJSON() );
+      set(KEY_PV_SRC, Source.ORIGIN);
+      set(KEY_CREATION, new Date().toJSON());
     },
-    saveProxyCache: function(pv) {
+    saveProxyCache(pv) {
       set(KEY_PV, pv);
-      set(KEY_PV_TYPE, PvType.PROXY );
-      set(KEY_CREATION, new Date().toJSON() );
+      set(KEY_PV_SRC, Source.PROXY);
+      set(KEY_CREATION, new Date().toJSON());
     },
-    isOriginCache: function() {
-      return get(KEY_PV_TYPE) == PvType.ORIGIN;
+    isFromOrigin() {
+      return get(KEY_PV_SRC) === Source.ORIGIN;
     },
-    isProxyCache: function() {
-      return get(KEY_PV_TYPE) == PvType.PROXY;
+    isFromProxy() {
+      return get(KEY_PV_SRC) === Source.PROXY;
     },
-    isExpired: function() {
-      if (PvCache.isOriginCache() ) {
+    isExpired() {
+      if (PvCache.isFromOrigin()) {
         let date = new Date(get(KEY_CREATION));
-        date.setDate(date.getDate() + 1); /* fetch origin-data every day */
+        date.setDate(date.getDate() + 1); /* update origin records every day */
         return Date.now() >= date.getTime();
 
-      } else if (PvCache.isProxyCache() ) {
-        let date = new Date(get(KEY_CREATION) );
-        date.setHours(date.getHours() + 1); /* proxy-data is updated every hour */
+      } else if (PvCache.isFromProxy()) {
+        let date = new Date(get(KEY_CREATION));
+        date.setHours(date.getHours() + 1); /* update proxy records per hour */
         return Date.now() >= date.getTime();
       }
       return false;
     },
-    getAllPagevies: function() {
+    getAllPageviews() {
       return PvCache.getData().totalsForAllResults["ga:pageviews"];
     },
-    newerThan: function(pv) {
-      return PvCache.getAllPagevies() > pv.totalsForAllResults["ga:pageviews"];
+    newerThan(pv) {
+      return PvCache.getAllPageviews() > pv.totalsForAllResults["ga:pageviews"];
     },
-    inspectKeys: function() {
-      if (localStorage.getItem(KEY_PV) == null
-        || localStorage.getItem(KEY_PV_TYPE) == null
-        || localStorage.getItem(KEY_CREATION) == null) {
+    inspectKeys() {
+      if (localStorage.getItem(KEY_PV) === null
+        || localStorage.getItem(KEY_PV_SRC) === null
+        || localStorage.getItem(KEY_CREATION) === null) {
         localStorage.clear();
       }
     }
   };
 
-})(); /* PvCache */
+}()); /* PvCache */
+
 
+function countUp(min, max, destId) {
+  if (min < max) {
+    let numAnim = new CountUp(destId, min, max);
+    if (!numAnim.error) {
+      numAnim.start();
+    } else {
+      console.error(numAnim.error);
+    }
+  }
+}
+
+
+function countPV(path, rows) {
+  let count = 0;
+
+  if (typeof rows !== "undefined" ) {
+    for (let i = 0; i < rows.length; ++i) {
+      const gaPath = rows[parseInt(i, 10)][0];
+      if (gaPath === path) { /* path format see: site.permalink */
+        count += parseInt(rows[parseInt(i, 10)][1], 10);
+        break;
+      }
+    }
+  }
+
+  return count;
+}
+
+
+function tacklePV(rows, path, elem, hasInit) {
+  let count = countPV(path, rows);
+  count = (count === 0 ? 1 : count);
+
+  if (!hasInit) {
+    elem.text(new Intl.NumberFormat().format(count));
+  } else {
+    const initCount = parseInt(elem.text().replace(/,/g, ""), 10);
+    if (count > initCount) {
+      countUp(initCount, count, elem.attr("id"));
+    }
+  }
+}
 
-function fetchOriginPageviews(pvData) {
-  if (pvData === undefined) {
+
+function displayPageviews(data) {
+  if (typeof data === "undefined") {
     return;
   }
-  displayPageviews(pvData);
-  PvCache.saveOriginCache(JSON.stringify(pvData));
+
+  let hasInit = getInitStatus();
+  const rows = data.rows; /* could be undefined */
+
+  if ($("#post-list").length > 0) { /* the Home page */
+    $(".post-preview").each(function() {
+      const path = $(this).find("a").attr("href");
+      tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
+    });
+
+  } else if ($(".post").length > 0) { /* the post */
+    const path = window.location.pathname;
+    tacklePV(rows, path, $("#pv"), hasInit);
+  }
 }
 
 
 function fetchProxyPageviews() {
-  let proxy = JSON.parse(proxyData); /* see file '/assets/data/pv-data.json' */
   $.ajax({
-    type: 'GET',
-    url: proxy.url,
-    dataType: 'jsonp',
+    type: "GET",
+    url: PvOpts.getProxyEndpoint(),
+    dataType: "jsonp",
     jsonpCallback: "displayPageviews",
-    success: function(data, textStatus, jqXHR) {
+    success: (data, textStatus, jqXHR) => {
       PvCache.saveProxyCache(JSON.stringify(data));
     },
-    error: function(jqXHR, textStatus, errorThrown) {
+    error: (jqXHR, textStatus, errorThrown) => {
       console.log("Failed to load pageviews from proxy server: " + errorThrown);
     }
   });
 }
 
 
-$(function() {
+function fetchPageviews(fetchOrigin = true, filterOrigin = false) {
+  if (PvOpts.isEnabled() && fetchOrigin) {
+    fetch(PvOpts.getLocalData())
+      .then((response) => response.json())
+      .then((data) => {
+        if (filterOrigin) {
+          if (PvCache.newerThan(data)) {
+            return;
+          }
+        }
+        displayPageviews(data);
+        PvCache.saveOriginCache(JSON.stringify(data));
+      })
+      .then(() => fetchProxyPageviews());
 
-  if ($('.pageviews').length > 0) {
+  } else {
+    fetchProxyPageviews();
+  }
+
+}
 
-    PvCache.inspectKeys();
 
+$(function() {
+  if ($(".pageviews").length > 0) {
+    PvCache.inspectKeys();
     let cache = PvCache.getData();
 
     if (cache) {
-      if (PvCache.isExpired()) {
-        if (PvCache.isProxyCache() ) {
-          let originPvData = pageviews ? JSON.parse(pageviews) : undefined;
-          if (originPvData) {
-            if (PvCache.newerThan(originPvData)) {
-              displayPageviews(cache);
-            } else {
-              fetchOriginPageviews(originPvData);
-            }
-          }
+      displayPageviews(cache);
 
-          fetchProxyPageviews();
-
-        } else if (PvCache.isOriginCache() ) {
-          fetchOriginPageviews(originPvData);
-          fetchProxyPageviews();
-        }
+      if (PvCache.isExpired()) {
+        fetchPageviews(true, PvCache.isFromProxy());
 
-      } else { /* still valid */
-        displayPageviews(cache);
+      } else {
 
-        if (PvCache.isOriginCache() ) {
-          fetchProxyPageviews();
+        if (PvCache.isFromOrigin()) {
+          fetchPageviews(false);
         }
 
       }
 
     } else {
-      let originPvData = pageviews ? JSON.parse(pageviews) : undefined;
-      fetchOriginPageviews(originPvData);
-      fetchProxyPageviews();
+      fetchPageviews();
     }
 
   }
diff --git a/assets/js/_utils/smooth-scroll.js b/assets/js/_utils/smooth-scroll.js
new file mode 100644
index 00000000000..57adac2c4db
--- /dev/null
+++ b/assets/js/_utils/smooth-scroll.js
@@ -0,0 +1,81 @@
+/*
+  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.
+*/
+
+$(function() {
+  $("a[href*='#']")
+    .not("[href='#']")
+    .not("[href='#0']")
+    .click(function(event) {
+
+      if (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) {
+        if (location.hostname === this.hostname) {
+
+          const REM = 16; /* 16px */
+
+          const hash = decodeURI(this.hash);
+          let isFnRef = RegExp(/^#fnref:/).test(hash);
+          let isFn = RegExp(/^#fn:/).test(hash);
+          let selector = hash.includes(":") ? hash.replace(/\:/, "\\:") : hash;
+          let target = $(selector);
+
+          if (target.length) {
+            event.preventDefault();
+
+            if (history.pushState) { /* add hash to URL */
+              history.pushState(null, null, hash);
+            }
+
+            let curOffset = $(this).offset().top;
+            let destOffset = target.offset().top;
+            const scrollUp = (destOffset < curOffset);
+            const topbarHeight = $("#topbar-wrapper").outerHeight();
+
+            if (scrollUp && isFnRef) {
+              /* Avoid the top-bar covering `fnref` when scrolling up
+                because `fnref` has no `%anchor`(see: module.scss) style. */
+              destOffset -= (topbarHeight + REM / 2);
+            }
+
+            $("html,body").animate({
+              scrollTop: destOffset
+            }, 800, () => {
+
+              const $target = $(target);
+              $target.focus();
+
+              const SCROLL_MARK = "scroll-focus";
+
+              /* clean up old scroll mark */
+              if ($(`[${SCROLL_MARK}=true]`).length) {
+                $(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
+              }
+
+              /* Clean :target links */
+              if ($(":target").length) { /* element that visited by the URL with hash */
+                $(":target").attr(SCROLL_MARK, false);
+              }
+
+              /* set scroll mark to footnotes */
+              if (isFn || isFnRef) {
+                $target.attr(SCROLL_MARK, 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.focus(); /* Set focus again */
+              }
+            });
+          }
+        }
+      }
+
+    }); /* click() */
+});
diff --git a/assets/js/_utils/timeago.js b/assets/js/_utils/timeago.js
index d78a65d143a..b14ea11032f 100644
--- a/assets/js/_utils/timeago.js
+++ b/assets/js/_utils/timeago.js
@@ -1,78 +1,80 @@
 /*
- * Caculate the Timeago
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2019 Cotes Chung
- * MIT Licensed
+ * Calculate the Timeago
  */
 
 $(function() {
 
-  function timeago(date, isLastmod) {
-    var now = new Date();
-    var past = new Date(date);
-    var seconds = Math.floor((now - past) / 1000);
+  const timeagoElem = $(".timeago");
 
-    var year = Math.floor(seconds / 31536000);
-    if (year >= 1) {
-      return year + " year" + (year > 1 ? "s" : "") + " ago";
-    }
+  let toRefresh = timeagoElem.length;
+
+  let intervalId = void 0;
+
+  function timeago(iso, preposition) {
+    let now = new Date();
+    let past = new Date(iso);
+    let prep = (typeof preposition !== "undefined" ? `${preposition} ` : "");
 
-    var month = Math.floor(seconds / 2592000);
-    if (month >= 1) {
-      return month + " month" + (month > 1 ? "s" : "") + " ago";
+    if (past.getFullYear() !== now.getFullYear()) {
+      toRefresh -= 1;
+      return prep + past.toLocaleString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
     }
 
-    var week = Math.floor(seconds / 604800);
-    if (week >= 1) {
-      return week + " week" + (week > 1 ? "s" : "") + " ago";
+    if (past.getMonth() !== now.getMonth()) {
+      toRefresh -= 1;
+      return prep + past.toLocaleString("en-US", {
+        month: "short",
+        day: "numeric"
+      });
     }
 
-    var day = Math.floor(seconds / 86400);
+    let seconds = Math.floor((now - past) / 1000);
+
+    let day = Math.floor(seconds / 86400);
     if (day >= 1) {
+      toRefresh -= 1;
       return day + " day" + (day > 1 ? "s" : "") + " ago";
     }
 
-    var hour = Math.floor(seconds / 3600);
+    let hour = Math.floor(seconds / 3600);
     if (hour >= 1) {
       return hour + " hour" + (hour > 1 ? "s" : "") + " ago";
     }
 
-    var minute = Math.floor(seconds / 60);
+    let minute = Math.floor(seconds / 60);
     if (minute >= 1) {
       return minute + " minute" + (minute > 1 ? "s" : "") + " ago";
     }
 
-    return (isLastmod? "just" : "Just") + " now";
+    return "just now";
   }
 
-
   function updateTimeago() {
     $(".timeago").each(function() {
       if ($(this).children("i").length > 0) {
-        var isLastmod = $(this).hasClass('lastmod');
-        var node = $(this).children("i");
-        var date = node.text();   /* ISO Dates: 'YYYY-MM-DDTHH:MM:SSZ' */
-        $(this).text(timeago(date, isLastmod));
+        let node = $(this).children("i");
+        let date = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
+        $(this).text(timeago(date, $(this).attr("prep")));
         $(this).append(node);
       }
     });
 
-    if (vote == 0 && intervalId != undefined) {
-      clearInterval(intervalId);  /* stop interval */
+    if (toRefresh === 0 && typeof intervalId !== "undefined") {
+      clearInterval(intervalId); /* stop interval */
     }
-    return vote;
+    return toRefresh;
   }
 
-
-  var vote = $(".timeago").length;
-  if (vote == 0) {
+  if (toRefresh === 0) {
     return;
   }
 
-  if (updateTimeago() > 0) {      /* run immediately */
-    vote = $(".timeago").length;  /* resume */
-    var intervalId = setInterval(updateTimeago, 60000); /* loop every minutes */
+  if (updateTimeago() > 0) { /* run immediately */
+    intervalId = setInterval(updateTimeago, 60000); /* run every minute */
   }
 
-});
\ No newline at end of file
+});
diff --git a/assets/js/data/cache-list.js b/assets/js/data/cache-list.js
index 31db1b8e9d2..32b4c844880 100644
--- a/assets/js/data/cache-list.js
+++ b/assets/js/data/cache-list.js
@@ -2,76 +2,31 @@
 layout: compress
 
 # The list to be cached by PWA
-# Chirpy v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# MIT Licensed
 ---
 
 const include = [
+  /* --- CSS --- */
 
-  /*--- CSS ---*/
+  '{{ "/assets/css/style.css" | relative_url }}',
 
-  '{{ "/assets/css/home.css" | relative_url }}',
-  '{{ "/assets/css/categories.css" | relative_url }}',
-  '{{ "/assets/css/tags.css" | relative_url }}',
-  '{{ "/assets/css/archives.css" | relative_url }}',
-  '{{ "/assets/css/page.css" | relative_url }}',
-  '{{ "/assets/css/post.css" | relative_url }}',
-  '{{ "/assets/css/category-tag.css" | relative_url }}',
-  '{{ "/assets/css/lib/bootstrap-toc.min.css" | relative_url }}',
-
-  /*--- Javascripts ---*/
-
-  '{{ "/assets/js/home.min.js" | relative_url }}',
-  '{{ "/assets/js/page.min.js" | relative_url }}',
-  '{{ "/assets/js/post.min.js" | relative_url }}',
-
-  /*--- HTML ---*/
-
-  /* Tabs */
-  {% for tab in site.data.tabs %}
-    {% capture item %}
-      {%- unless tab.name == 'Home' -%}
-        /tabs/{{ tab.name | downcase }}
-      {%- endunless -%}
-      {{- "/" -}}
-    {% endcapture %}
-    '{{ item | relative_url }}',
-  {% endfor %}
-
-  /* The posts of first Home page and recent update list */
-  {% assign post_list = "" | split: "" %}
-  {% assign sum = 0 %}
-
-  {% for post in site.posts %}
-    {% assign post_list = post_list | push: post.url %}
-    {% assign sum = sum | plus: 1 %}
-    {% if sum >= site.paginate %}
-      {% break %}
-    {% endif %}
-  {% endfor %}
-
-  {% include update-list.html %}
-  {% for item in update_list %}
-    {% assign url = item | split: "::" | last | prepend: "/posts/" | append: "/" %}
-    {% assign post_list = post_list | push: url %}
-  {% endfor %}
-
-  {% assign post_list = post_list | uniq %}
+  /* --- Javascripts --- */
+  '{{ "/assets/js/dist/home.min.js" | relative_url }}',
+  '{{ "/assets/js/dist/page.min.js" | relative_url }}',
+  '{{ "/assets/js/dist/post.min.js" | relative_url }}',
+  '{{ "/assets/js/dist/categories.min.js" | relative_url }}',
+  '{{ "/assets/js/data/search.json" | relative_url }}',
+  '{{ "/app.js" | relative_url }}',
+  '{{ "/sw.js" | relative_url }}',
 
-  {% for url in post_list %}
-    '{{ url }}',
+  /* --- HTML --- */
+  '{{ "/index.html" | relative_url }}',
+  '{{ "/404.html" | relative_url }}',
+  {% for tab in site.tabs %}
+    '{{ tab.url }}',
   {% endfor %}
 
-  /* Trending tags */
-  {% include trending-tags.html %}
-  {% for tag in trending_tags %}
-    {% capture tag_url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
-    '{{ tag_url | relative_url }}',
-  {% endfor %}
 
-  /*--- Icons ---*/
+  /* --- Icons --- */
 
   {%- capture icon_url -%}
     {{ "/assets/img/favicons" | relative_url }}
@@ -94,18 +49,13 @@ const include = [
   '{{ icon_url }}/favicon-16x16.png',
   '{{ icon_url }}/ms-icon-144x144.png',
   '{{ icon_url }}/manifest.json',
-  '{{ icon_url }}/browserconfig.xml',
-
-  /*--- Others ---*/
-
-  '{{ "/assets/js/data/search.json" | relative_url }}',
-  '{{ "/404.html" | relative_url }}',
-
-  '{{ "/app.js" | relative_url }}',
-  '{{ "/sw.js" | relative_url }}'
+  '{{ icon_url }}/browserconfig.xml'
 ];
 
 const exclude = [
-  '/assets/js/data/pv-cache.js',
+  {%- if site.google_analytics.pv.proxy_url and site.google_analytics.pv.enabled -%}
+    '{{ site.google_analytics.pv.proxy_url }}',
+  {%- endif -%}
+  '/assets/js/data/pageviews.json',
   '/img.shields.io/'
 ];
diff --git a/assets/js/data/search.json b/assets/js/data/search.json
index de8111d8631..87badbac3a6 100644
--- a/assets/js/data/search.json
+++ b/assets/js/data/search.json
@@ -10,9 +10,8 @@ layout: compress
     "categories": "{{ post.categories | join: ', '}}",
     "tags": "{{ post.tags | join: ', ' }}",
     "date": "{{ post.date }}",
-    {% assign _content = post.content %}
-    {% include no-linenos.html %}
-    "snippet": "{{ _content | strip_html | strip_newlines | remove_chars | escape | truncate: 300 | replace: '\', '\\\\' }}"
+    {% include no-linenos.html content=post.content %}
+    "snippet": "{{ content | strip_html | strip_newlines | remove_chars | escape | truncate: 300 | replace: '\', '\\\\' }}"
   }{% unless forloop.last %},{% endunless %}
   {% endfor %}
 ]
diff --git a/assets/js/dist/categories.min.js b/assets/js/dist/categories.min.js
new file mode 100644
index 00000000000..7a62550a1e3
--- /dev/null
+++ b/assets/js/dist/categories.min.js
@@ -0,0 +1,6 @@
+/*!
+ * Chirpy v3.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
+function copyLink(e){e&&0!==e.length||(e=window.location.href);const o=$("<input>");$("body").append(o),o.val(e).select(),document.execCommand("copy"),o.remove(),alert("Link copied successfully!")}$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before('<i class="fas fa-check-circle checked"></i>'),$("input[type=checkbox]:not([checked])").before('<i class="far fa-circle"></i>')}),$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),s=$("#search-cleaner"),a=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),d=$("#search-results"),c=$("#search-input"),i=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),f={on(){e.addClass("unloaded"),l.addClass("unloaded"),o.addClass("unloaded"),n.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),o.removeClass("unloaded")}},p=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(d.empty(),i.hasClass("unloaded")&&i.removeClass("unloaded"),r.addClass("unloaded"),s.removeClass("visible"),a.removeClass("unloaded"),u.release(),c.val(""),e=!1)},isVisible(){return e}}}();function h(){return t.hasClass("loaded")}o.click(function(){f.on(),p.on(),c.focus()}),t.click(function(){f.off(),p.off()}),c.focus(function(){n.addClass("input-focus")}),c.focusout(function(){n.removeClass("input-focus")}),c.on("keyup",function(e){8===e.keyCode&&""===c.val()?h()?i.removeClass("unloaded"):p.off():""!==c.val()&&(p.on(),s.hasClass("visible")||s.addClass("visible"),h()&&i.addClass("unloaded"))}),s.on("click",function(){c.val(""),h()?(i.removeClass("unloaded"),d.empty()):p.off(),c.focus(),s.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#topbar-wrapper"),t=$("#toc-wrapper"),s=$(".access"),a=$("#search-input");let l,n=0;const r=o.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var e=$(this).scrollTop();Math.abs(n-e)<=5||(e>n&&e>r?(o.removeClass("topbar-down").addClass("topbar-up"),0<t.length&&t.removeClass("topbar-down"),0<s.length&&s.removeClass("topbar-down"),a.is(":focus")&&a.blur()):e+$(window).height()<$(document).height()&&(o.removeClass("topbar-up").addClass("topbar-down"),0<t.length&&t.addClass("topbar-down"),0<s.length&&s.addClass("topbar-down")),n=e)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),t=e.text().trim();let s=(0<o.length?o:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(s)&&(s=s.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==s&&e.text(s):e.text()!==t&&e.text(t))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){const e=$(".collapse");e.on("hide.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder-open`).attr("class","far fa-folder fa-fw"),$(`#${e} i.fas`).addClass("rotate"),$(`#${e}`).removeClass("hide-border-bottom"))}),e.on("show.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder`).attr("class","far fa-folder-open fa-fw"),$(`#${e} i.fas`).removeClass("rotate"),$(`#${e}`).addClass("hide-border-bottom"))})});
\ No newline at end of file
diff --git a/assets/js/dist/home.min.js b/assets/js/dist/home.min.js
new file mode 100644
index 00000000000..acf1740ca6b
--- /dev/null
+++ b/assets/js/dist/home.min.js
@@ -0,0 +1,6 @@
+/*!
+ * Chirpy v3.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
+function copyLink(e){e&&0!==e.length||(e=window.location.href);const o=$("<input>");$("body").append(o),o.val(e).select(),document.execCommand("copy"),o.remove(),alert("Link copied successfully!")}$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before('<i class="fas fa-check-circle checked"></i>'),$("input[type=checkbox]:not([checked])").before('<i class="far fa-circle"></i>')}),$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),a=$("#search-cleaner"),s=$("#main"),n=$("#topbar-title"),l=$("#search-wrapper"),r=$("#search-result-wrapper"),i=$("#search-results"),c=$("#search-input"),d=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),h={on(){e.addClass("unloaded"),n.addClass("unloaded"),o.addClass("unloaded"),l.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),l.removeClass("d-flex"),e.removeClass("unloaded"),n.removeClass("unloaded"),o.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),s.addClass("unloaded"),e=!0)},off(){e&&(i.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),s.removeClass("unloaded"),u.release(),c.val(""),e=!1)},isVisible(){return e}}}();function p(){return t.hasClass("loaded")}o.click(function(){h.on(),f.on(),c.focus()}),t.click(function(){h.off(),f.off()}),c.focus(function(){l.addClass("input-focus")}),c.focusout(function(){l.removeClass("input-focus")}),c.on("keyup",function(e){8===e.keyCode&&""===c.val()?p()?d.removeClass("unloaded"):f.off():""!==c.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),p()&&d.addClass("unloaded"))}),a.on("click",function(){c.val(""),p()?(d.removeClass("unloaded"),i.empty()):f.off(),c.focus(),a.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#topbar-wrapper"),t=$("#toc-wrapper"),a=$(".access"),s=$("#search-input");let n,l=0;const r=o.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(n=!0)}),setInterval(function(){n&&(function(){var e=$(this).scrollTop();Math.abs(l-e)<=5||(e>l&&e>r?(o.removeClass("topbar-down").addClass("topbar-up"),0<t.length&&t.removeClass("topbar-down"),0<a.length&&a.removeClass("topbar-down"),s.is(":focus")&&s.blur()):e+$(window).height()<$(document).height()&&(o.removeClass("topbar-up").addClass("topbar-down"),0<t.length&&t.addClass("topbar-down"),0<a.length&&a.addClass("topbar-down")),l=e)}(),n=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),t=e.text().trim();let a=(0<o.length?o:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==a&&e.text(a):e.text()!==t&&e.text(t))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){let s=$(".timeago").length,e=void 0;function o(){return $(".timeago").each(function(){if(0<$(this).children("i").length){let e=$(this).children("i");var o=e.text();$(this).text(function(e,o){let t=new Date,a=new Date(e);return e=void 0!==o?`${o} `:"",a.getFullYear()!==t.getFullYear()?(--s,e+a.toLocaleString("en-US",{year:"numeric",month:"short",day:"numeric"})):a.getMonth()!==t.getMonth()?(--s,e+a.toLocaleString("en-US",{month:"short",day:"numeric"})):(o=Math.floor((t-a)/1e3),1<=(e=Math.floor(o/86400))?(--s,e+" day"+(1<e?"s":"")+" ago"):1<=(e=Math.floor(o/3600))?e+" hour"+(1<e?"s":"")+" ago":1<=(o=Math.floor(o/60))?o+" minute"+(1<o?"s":"")+" ago":"just now")}(o,$(this).attr("prep"))),$(this).append(e)}}),0===s&&void 0!==e&&clearInterval(e),s}0!==s&&0<o()&&(e=setInterval(o,6e4))});
\ No newline at end of file
diff --git a/assets/js/dist/page.min.js b/assets/js/dist/page.min.js
new file mode 100644
index 00000000000..2592e7eae24
--- /dev/null
+++ b/assets/js/dist/page.min.js
@@ -0,0 +1,6 @@
+/*!
+ * Chirpy v3.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
+function copyLink(e){e&&0!==e.length||(e=window.location.href);const t=$("<input>");$("body").append(t),t.val(e).select(),document.execCommand("copy"),t.remove(),alert("Link copied successfully!")}$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before('<i class="fas fa-check-circle checked"></i>'),$("input[type=checkbox]:not([checked])").before('<i class="far fa-circle"></i>')}),$(function(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),s=$("#search-cleaner"),a=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),c=$("#search-results"),i=$("#search-input"),d=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),l.addClass("unloaded"),t.addClass("unloaded"),n.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),t.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(c.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),r.addClass("unloaded"),s.removeClass("visible"),a.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible(){return e}}}();function h(){return o.hasClass("loaded")}t.click(function(){p.on(),f.on(),i.focus()}),o.click(function(){p.off(),f.off()}),i.focus(function(){n.addClass("input-focus")}),i.focusout(function(){n.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?h()?d.removeClass("unloaded"):f.off():""!==i.val()&&(f.on(),s.hasClass("visible")||s.addClass("visible"),h()&&d.addClass("unloaded"))}),s.on("click",function(){i.val(""),h()?(d.removeClass("unloaded"),c.empty()):f.off(),i.focus(),s.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let t=!1;const o=$("body");return{toggle(){!1===t?o.attr(e,""):o.removeAttr(e),t=!t}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),o=$("#toc-wrapper"),s=$(".access"),a=$("#search-input");let l,n=0;const r=t.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var e=$(this).scrollTop();Math.abs(n-e)<=5||(e>n&&e>r?(t.removeClass("topbar-down").addClass("topbar-up"),0<o.length&&o.removeClass("topbar-down"),0<s.length&&s.removeClass("topbar-down"),a.is(":focus")&&a.blur()):e+$(window).height()<$(document).height()&&(t.removeClass("topbar-up").addClass("topbar-down"),0<o.length&&o.addClass("topbar-down"),0<s.length&&s.addClass("topbar-down")),n=e)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),t=$("div.post>h1"),o=e.text().trim();let s=(0<t.length?t:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(s)&&(s=s.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||t.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==s&&e.text(s):e.text()!==o&&e.text(o))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(t){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){const n=decodeURI(this.hash);let o=RegExp(/^#fnref:/).test(n),s=RegExp(/^#fn:/).test(n);var l=n.includes(":")?n.replace(/\:/,"\\:"):n;let a=$(l);if(a.length){t.preventDefault(),history.pushState&&history.pushState(null,null,n);l=$(this).offset().top;let e=a.offset().top;t=e<l,l=$("#topbar-wrapper").outerHeight();t&&o&&(e-=l+8),$("html,body").animate({scrollTop:e},800,()=>{const e=$(a);e.focus();var t="scroll-focus";if($(`[${t}=true]`).length&&$(`[${t}=true]`).attr(t,!1),$(":target").length&&$(":target").attr(t,!1),(s||o)&&e.attr(t,!0),e.is(":focus"))return!1;e.attr("tabindex","-1"),e.focus()})}}})});
\ No newline at end of file
diff --git a/assets/js/dist/post.min.js b/assets/js/dist/post.min.js
new file mode 100644
index 00000000000..8698a9a66cd
--- /dev/null
+++ b/assets/js/dist/post.min.js
@@ -0,0 +1,6 @@
+/*!
+ * Chirpy v3.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
+function copyLink(e){e&&0!==e.length||(e=window.location.href);const t=$("<input>");$("body").append(t),t.val(e).select(),document.execCommand("copy"),t.remove(),alert("Link copied successfully!")}$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before('<i class="fas fa-check-circle checked"></i>'),$("input[type=checkbox]:not([checked])").before('<i class="far fa-circle"></i>')}),$(function(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),s=$("#main"),n=$("#topbar-title"),l=$("#search-wrapper"),r=$("#search-result-wrapper"),i=$("#search-results"),c=$("#search-input"),d=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),h={on(){e.addClass("unloaded"),n.addClass("unloaded"),t.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),e.removeClass("unloaded"),n.removeClass("unloaded"),t.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),s.addClass("unloaded"),e=!0)},off(){e&&(i.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),s.removeClass("unloaded"),u.release(),c.val(""),e=!1)},isVisible(){return e}}}();function p(){return o.hasClass("loaded")}t.click(function(){h.on(),f.on(),c.focus()}),o.click(function(){h.off(),f.off()}),c.focus(function(){l.addClass("input-focus")}),c.focusout(function(){l.removeClass("input-focus")}),c.on("keyup",function(e){8===e.keyCode&&""===c.val()?p()?d.removeClass("unloaded"):f.off():""!==c.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),p()&&d.addClass("unloaded"))}),a.on("click",function(){c.val(""),p()?(d.removeClass("unloaded"),i.empty()):f.off(),c.focus(),a.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let t=!1;const o=$("body");return{toggle(){!1===t?o.attr(e,""):o.removeAttr(e),t=!t}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),o=$("#toc-wrapper"),a=$(".access"),s=$("#search-input");let n,l=0;const r=t.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(n=!0)}),setInterval(function(){n&&(function(){var e=$(this).scrollTop();Math.abs(l-e)<=5||(e>l&&e>r?(t.removeClass("topbar-down").addClass("topbar-up"),0<o.length&&o.removeClass("topbar-down"),0<a.length&&a.removeClass("topbar-down"),s.is(":focus")&&s.blur()):e+$(window).height()<$(document).height()&&(t.removeClass("topbar-up").addClass("topbar-down"),0<o.length&&o.addClass("topbar-down"),0<a.length&&a.addClass("topbar-down")),l=e)}(),n=!1)},250)}),$(function(){const e=$("#topbar-title"),t=$("div.post>h1"),o=e.text().trim();let a=(0<t.length?t:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||t.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==a&&e.text(a):e.text()!==o&&e.text(o))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){let s=$(".timeago").length,e=void 0;function t(){return $(".timeago").each(function(){if(0<$(this).children("i").length){let e=$(this).children("i");var t=e.text();$(this).text(function(e,t){let o=new Date,a=new Date(e);return e=void 0!==t?`${t} `:"",a.getFullYear()!==o.getFullYear()?(--s,e+a.toLocaleString("en-US",{year:"numeric",month:"short",day:"numeric"})):a.getMonth()!==o.getMonth()?(--s,e+a.toLocaleString("en-US",{month:"short",day:"numeric"})):(t=Math.floor((o-a)/1e3),1<=(e=Math.floor(t/86400))?(--s,e+" day"+(1<e?"s":"")+" ago"):1<=(e=Math.floor(t/3600))?e+" hour"+(1<e?"s":"")+" ago":1<=(t=Math.floor(t/60))?t+" minute"+(1<t?"s":"")+" ago":"just now")}(t,$(this).attr("prep"))),$(this).append(e)}}),0===s&&void 0!==e&&clearInterval(e),s}0!==s&&0<t()&&(e=setInterval(t,6e4))}),$(function(){$("a:has(img)").addClass("img-hyperlink")}),$(function(){const t="language-",o=new RegExp(`^${t}([a-z])+$`);$(`div[class^=${t}`).each(function(){let e=$(this).attr("class").split(" ");e.forEach(e=>{o.test(e)&&(e=e.substring(t.length),$(this).attr("lang",`${e}`))})})}),$(function(){$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(t){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){const l=decodeURI(this.hash);let o=RegExp(/^#fnref:/).test(l),a=RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/\:/,"\\:"):l;let s=$(n);if(s.length){t.preventDefault(),history.pushState&&history.pushState(null,null,l);n=$(this).offset().top;let e=s.offset().top;t=e<n,n=$("#topbar-wrapper").outerHeight();t&&o&&(e-=n+8),$("html,body").animate({scrollTop:e},800,()=>{const e=$(s);e.focus();var t="scroll-focus";if($(`[${t}=true]`).length&&$(`[${t}=true]`).attr(t,!1),$(":target").length&&$(":target").attr(t,!1),(a||o)&&e.attr(t,!0),e.is(":focus"))return!1;e.attr("tabindex","-1"),e.focus()})}}})});
\ No newline at end of file
diff --git a/assets/js/dist/pvreport.min.js b/assets/js/dist/pvreport.min.js
new file mode 100644
index 00000000000..520361f1a31
--- /dev/null
+++ b/assets/js/dist/pvreport.min.js
@@ -0,0 +1,6 @@
+/*!
+ * Chirpy v3.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
+const getInitStatus=function(){let t=!1;return()=>{var e=t;return t=t||!0,e}}(),PvOpts={isEnabled(){return"true"===$("meta[name=pv-cache-enabled]").attr("content")},getProxyEndpoint(){return $("meta[name=pv-proxy-endpoint]").attr("content")},getLocalData(){return $("meta[name=pv-cache-data]").attr("content")}},PvCache=function(){const t="pv",a="pv_created_date",r="pv_source",n={ORIGIN:"origin",PROXY:"proxy"};function o(e){return localStorage.getItem(e)}function i(e,t){localStorage.setItem(e,t)}return{getData(){return JSON.parse(localStorage.getItem(t))},saveOriginCache(e){i(t,e),i(r,n.ORIGIN),i(a,(new Date).toJSON())},saveProxyCache(e){i(t,e),i(r,n.PROXY),i(a,(new Date).toJSON())},isFromOrigin(){return o(r)===n.ORIGIN},isFromProxy(){return o(r)===n.PROXY},isExpired(){if(PvCache.isFromOrigin()){let e=new Date(o(a));return e.setDate(e.getDate()+1),Date.now()>=e.getTime()}if(PvCache.isFromProxy()){let e=new Date(o(a));return e.setHours(e.getHours()+1),Date.now()>=e.getTime()}return!1},getAllPageviews(){return PvCache.getData().totalsForAllResults["ga:pageviews"]},newerThan(e){return PvCache.getAllPageviews()>e.totalsForAllResults["ga:pageviews"]},inspectKeys(){null!==localStorage.getItem(t)&&null!==localStorage.getItem(r)&&null!==localStorage.getItem(a)||localStorage.clear()}}}();function countUp(t,a,r){if(t<a){let e=new CountUp(r,t,a);e.error?console.error(e.error):e.start()}}function countPV(t,a){let r=0;if(void 0!==a)for(let e=0;e<a.length;++e)if(a[parseInt(e,10)][0]===t){r+=parseInt(a[parseInt(e,10)][1],10);break}return r}function tacklePV(e,t,a,r){let n=countPV(t,e);n=0===n?1:n,r?(r=parseInt(a.text().replace(/,/g,""),10),n>r&&countUp(r,n,a.attr("id"))):a.text((new Intl.NumberFormat).format(n))}function displayPageviews(e){if(void 0!==e){let t=getInitStatus();const a=e.rows;0<$("#post-list").length?$(".post-preview").each(function(){var e=$(this).find("a").attr("href");tacklePV(a,e,$(this).find(".pageviews"),t)}):0<$(".post").length&&(e=window.location.pathname,tacklePV(a,e,$("#pv"),t))}}function fetchProxyPageviews(){$.ajax({type:"GET",url:PvOpts.getProxyEndpoint(),dataType:"jsonp",jsonpCallback:"displayPageviews",success:(e,t,a)=>{PvCache.saveProxyCache(JSON.stringify(e))},error:(e,t,a)=>{console.log("Failed to load pageviews from proxy server: "+a)}})}function fetchPageviews(e=!0,t=!1){PvOpts.isEnabled()&&e?fetch(PvOpts.getLocalData()).then(e=>e.json()).then(e=>{t&&PvCache.newerThan(e)||(displayPageviews(e),PvCache.saveOriginCache(JSON.stringify(e)))}).then(()=>fetchProxyPageviews()):fetchProxyPageviews()}$(function(){var e;0<$(".pageviews").length&&(PvCache.inspectKeys(),(e=PvCache.getData())?(displayPageviews(e),PvCache.isExpired()?fetchPageviews(!0,PvCache.isFromProxy()):PvCache.isFromOrigin()&&fetchPageviews(!1)):fetchPageviews())});
\ No newline at end of file
diff --git a/categories/tutorial.html b/categories/tutorial.html
deleted file mode 100644
index b6b080683fc..00000000000
--- a/categories/tutorial.html
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: category
-title: Tutorial
-category: Tutorial
----
diff --git a/docs/README.zh-CN.md b/docs/README.zh-CN.md
new file mode 100644
index 00000000000..117b867ed0e
--- /dev/null
+++ b/docs/README.zh-CN.md
@@ -0,0 +1,218 @@
+# Chirpy
+
+Language: [English](https://github.com/cotes2020/jekyll-theme-chirpy#readme) | 简体中文
+
+[![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
+[![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b)](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
+[![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
+[![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
+
+一个不一样的 Jekyll 主题，采用响应式设计，方便记录、管理、分享您的知识和经验。[懂的进 »](https://chirpy.cotes.info)
+
+[![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png)](https://chirpy.cotes.info)
+
+## 功能一览
+
+- 文章置顶
+- 可配置的全局主题颜色
+- 文章最后修改日期
+- 文章目录
+- 自动推荐相关文章
+- 语法高亮
+- 二级目录
+- 数学表达式
+- Mermaid 图表
+- 搜索
+- Atom 订阅
+- Disqus 评论
+- Google 分析
+- GA 浏览报告（高级功能）
+- SEO 优化
+- 网站性能优化
+
+
+## 前提要求
+
+参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/) 安装 `Ruby`，`RubyGems`，`Jekyll` 和 `Bundler`，Docker 粉可免。
+
+
+## 安装
+
+有二法可得此主题:
+
+- **从 RubyGems 安装** - 易于版本升级，隔离无关的主题项目文件，让您的仓库舒适清爽。
+- **从 GitHub 上 Fork** - 对个性化二次开发友好，但是难于升级，只适合专业开发人员使用。
+
+### RubyGems 安装
+
+在您的 Jekyll 站点的 `Gemfile` 添加:
+
+```ruby
+gem "jekyll-theme-chirpy"
+```
+
+然后，添加这行到您的 Jekyll 站点的 `_config.yml`:
+
+```yaml
+theme: jekyll-theme-chirpy
+```
+
+接着执行:
+
+```console
+$ bundle
+```
+
+最后, 拷贝额外所需主题的 gem 文件（详见 [starter 项目][starter] 的文件目录）至您的 Jekyll 站点, 然后把主题的 `_config.yml` 全部内容附加到您的 Jekyll 站点的同名文件。
+
+> **提示**: 定位主题的 gem 文件，可以执行:
+>
+```console
+$ bundle info --path jekyll-theme-chirpy
+```
+
+或者您可以 [使用 starter template][use-starter] 来快速创建 Jekyll 站点，以省去复制主题 gem 文件的时间。
+
+### 在 GitHub 上 Fork
+
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 然后克隆到本地。(友情提示：默认分支的代码处于开发状态，如果您想博客更加稳定，请切换到最新的 [Tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) 开始写作。)
+
+安装依赖：
+
+```console
+$ bundle
+```
+
+接着执行文件初始化:
+
+```console
+$ bash tools/init.sh
+```
+
+> 如果您不打算部署到 GitHub Pages, 在上述命令后附加参数选项 `--no-gh`。
+
+上述脚本完成了以下工作:
+
+1. 从您的仓库中删除了:
+    - `.travis.yml`
+    - `_posts` 下的文件
+    - `docs` 目录
+
+2. 如果使用了参数 `--no-gh`，则会怒删 `.github`。否则，将会配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。
+
+3. 自动提交一个 Commit 以保存上述文件的更改。
+
+## 使用
+
+### 配置文件
+
+根据个人需要去修改 `_config.yml` 的变量，大部分都有注释介绍用法。典型的几个选项是：
+
+- `url`
+- `avatar`
+- `timezone`
+- `lang`
+
+### 本地运行
+
+发布之前，在本地预览:
+
+```terminal
+$ bundle exec jekyll s
+```
+
+或者用 Docker 运行:
+
+```terminal
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
+```
+
+访问本地服务：<http://localhost:4000>
+
+### 部署
+
+部署开始前，把  `_config.yml` 的 `url` 改为 `https://<username>.github.io`(或者您的私有域名，如：`https://yourdomain.com`)。另外，如果您想使用 [Project 类型网站](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites)，修改配置文件的 `baseurl` 为项目名称，以斜杠开头，如：`/project`。
+
+现在您可以选择下列其中一个方式去站点部署。
+
+#### 部署到 GitHub Pages
+
+由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
+
+快速检查 GitHub Actions 构建需要的文件:
+
+- 确保您的 Jekyll 站点存在文件 `.github/workflows/pages-deploy.yml`。没有的话，新建并填入[示例工作流][workflow]的内容, 注意参数 `on.push.branches` 的值必须和您的仓库默认分支名相同。
+- 检查您的 Jekyll 站点是否有文件 `tools/test.sh` 和 `tools/deploy.sh`. 没有的话, 从本仓库拷贝到您的 Jekyll 项目.
+
+在 GitHub 把您的仓库命名为 `<GH-USERNAME>.github.io`，然后开始发布：
+
+1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
+
+2. 回到 GitHub 上的仓库， 通过 _Settings_ → _Options_ → _GitHub Pages_ 选择分支 `gh-pages` 作为[_发布源_](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site):
+
+    ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
+
+3. 按照 GitHub 指示的地址去访问您的网站。
+
+#### 部署到其他 Pages 平台
+
+在 GitHub 之外的平台，例如 GitLab，就没法享受 **GitHub Actions** 的便利了。因此我们需要在本地构建站点（或者在其他第三方 CI 平台），然后推送站点文件到服务器上。
+
+在项目根目录，运行:
+
+```console
+$ JEKYLL_ENV=production bundle exec jekyll b
+```
+
+或者通过 Docker 构建:
+
+```terminal
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
+```
+
+生成的静态文件将会在 `_site`， 把内部的文件上传到服务器即可。
+
+## 文档
+
+若想要更多细节以及更佳的阅读体验，请参阅 [线上教程](https://chirpy.cotes.info/categories/tutorial/)。 与此同时，[Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki) 也有一份教程的拷贝。
+
+## 参与贡献
+
+三人行必有我师，欢迎提报告 bug, 帮助改进代码质量，或者提交新功能。具体操作规则请参考 [贡献指南](../.github/CONTRIBUTING.md)，谢谢 🙏。
+
+## 鸣谢
+
+这个主题的开发主要基于 [Jekyll](https://jekyllrb.com/) 生态、[Bootstrap](https://getbootstrap.com/)、[Font Awesome](https://fontawesome.com/) 和其他一些出色的工具 (相关文件中可以找到这些工具的版权信息).
+
+:tada: 感谢所有参与代码贡献的小伙伴, 他们的 GayHub ID 在这个[列表](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors)。 另外, 提交过 issues(或者未被合并 PR) 的高富帅和白富美也不会被遗忘,他/她们帮助报告 bug、分享新点子或者启发了我写出更通俗易懂的文档。
+
+还有，感谢 [JetBrains][jb] 提供开源 License！
+
+## 赞助
+
+如果您喜欢这个主题或者它对您有帮助，请考虑打赏作者，您的支持将会极大地鼓励作者，并帮助作者更好地维护项目！
+
+[![Buy Me a Coffee](https://img.shields.io/badge/-请作者喝杯咖啡-ff813f?logo=buy-me-a-coffee&logoColor=white)](https://www.buymeacoffee.com/coteschung)
+[![Wechat Pay](https://img.shields.io/badge/-微信打赏作者-brightgreen?logo=wechat&logoColor=white)][cn-donation]
+[![Alipay](https://img.shields.io/badge/-支付宝打赏作者-blue?logo=alipay&logoColor=white)][cn-donation]
+
+## 许可证书
+
+本项目开源，基于 [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) 许可。
+
+[starter]: https://github.com/cotes2020/chirpy-starter
+[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
+
+<!-- ReadMe links -->
+
+[jb]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
+[cn-donation]: https://cotes.gitee.io/alipay-wechat-donation/
diff --git a/feed.xml b/feed.xml
index 30e01fc11b5..aca721ed46c 100644
--- a/feed.xml
+++ b/feed.xml
@@ -1,44 +1,41 @@
 ---
 layout: compress
 # Atom Feed, reference: https://validator.w3.org/feed/docs/atom.html
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
 ---
 
 {% capture source %}
 <feed xmlns="http://www.w3.org/2005/Atom">
-  <id>{{ site.url }}</id>
+  <id>{{ "/" | absolute_url }}</id>
   <title>{{ site.title }}</title>
   <subtitle>{{ site.description }}</subtitle>
   <updated>{{ site.time | date_to_xmlschema }}</updated>
   <author>
-    <name>{{ site.author }}</name>
-    <uri>{{ site.url }}</uri>
+    <name>{{ site.social.name }}</name>
+    <uri>{{ "/" | absolute_url }}</uri>
   </author>
-  <link href="/feed.xml" rel="self" type="application/atom+xml" />
-  <link href="{{ site.url }}" rel="alternate" type="text/html" />
+  <link rel="self" type="application/atom+xml" href="{{ page.url | absolute_url }}"/>
+  <link rel="alternate" type="text/html" hreflang="{{ site.lang | default: 'en' }}"
+    href="{{ '/' | absolute_url }}"/>
   <generator uri="https://jekyllrb.com/" version="{{ jekyll.version }}">Jekyll</generator>
-  <rights> © {{ 'now' | date: '%Y' }} {{ site.author }} </rights>
+  <rights> © {{ 'now' | date: '%Y' }} {{ site.social.name }} </rights>
   <icon>{{ site.baseurl }}/assets/img/favicons/favicon.ico</icon>
   <logo>{{ site.baseurl }}/assets/img/favicons/favicon-96x96.png</logo>
 
 {% for post in site.posts limit: 5 %}
-  {% assign post_absolute_url = site.url | append: post.url %}
+  {% assign post_absolute_url = post.url | absolute_url %}
   <entry>
     <title>{{ post.title }}</title>
     <link href="{{ post_absolute_url }}" rel="alternate" type="text/html" title="{{ post.title }}" />
     <published>{{ post.date | date_to_xmlschema }}</published>
-  {% if post.seo.date_modified %}
-    <updated>{{ post.seo.date_modified | date_to_xmlschema }}</updated>
+  {% if post.last_modified_at %}
+    <updated>{{ post.last_modified_at | date_to_xmlschema }}</updated>
   {% else %}
-    <updated>{{ site.time | date_to_xmlschema }}</updated>
+    <updated>{{ post.date | date_to_xmlschema }}</updated>
   {% endif %}
     <id>{{ post_absolute_url }}</id>
     <content src="{{ post_absolute_url }}" />
     <author>
-      <name>{{ site.author }}</name>
+      <name>{{ site.social.name }}</name>
     </author>
 
   {% if post.categories %}
@@ -51,13 +48,13 @@ layout: compress
     <summary>{{ post.summary | strip }}</summary>
   {% else %}
     <summary>
-      {% assign content = post.content %}
-      {% include no-linenos.html %}
-      {{ content | strip_html | truncate: 200 }}</summary>
+      {% include no-linenos.html content=post.content %}
+      {{ content  | strip_html | truncate: 400 }}
+    </summary>
   {% endif %}
 
   </entry>
 {% endfor %}
 </feed>
 {% endcapture %}
-{{ source | replace: '&', '&amp;' }}
\ No newline at end of file
+{{ source | replace: '&', '&amp;' }}
diff --git a/gulpfile.js/index.js b/gulpfile.js/index.js
new file mode 100644
index 00000000000..14692fb6bf8
--- /dev/null
+++ b/gulpfile.js/index.js
@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+
+"use strict";
+
+const js = require('./tasks/js');
+
+exports.default = js.build;
+
+/* keep-alive develop mode, without uglify */
+exports.dev = js.liveRebuild;
diff --git a/gulpfile.js/tasks/js.js b/gulpfile.js/tasks/js.js
new file mode 100644
index 00000000000..169b89e721f
--- /dev/null
+++ b/gulpfile.js/tasks/js.js
@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+
+"use strict";
+
+const { src, dest, watch, series, parallel} = require('gulp');
+
+const concat = require('gulp-concat');
+const rename = require("gulp-rename");
+const uglify = require('gulp-uglify');
+const insert = require('gulp-insert');
+const fs = require('fs');
+
+const JS_ROOT = 'assets/js';
+const jsDest = `${ JS_ROOT }/dist/`;
+
+function concatJs(files, output) {
+  return src(files)
+    .pipe(concat(output))
+    .pipe(rename({ extname: '.min.js' }))
+    .pipe(dest(jsDest));
+}
+
+function minifyJs() {
+  return src(`${ jsDest }/*.js`)
+    .pipe(insert.prepend(fs.readFileSync(`${ JS_ROOT }/_copyright`, 'utf8')))
+    .pipe(uglify({output: {comments: /^!|@preserve|@license|@cc_on/i}}))
+    .pipe(dest(jsDest));
+}
+
+const homeJs = () => {
+  return concatJs([
+      `${JS_ROOT}/_commons/*.js`,
+      `${JS_ROOT}/_utils/timeago.js`
+    ],
+    'home'
+  );
+};
+
+const postJs = () => {
+  return concatJs([
+      `${JS_ROOT}/_commons/*.js`,
+      `${JS_ROOT}/_utils/timeago.js`,
+      `${JS_ROOT}/_utils/img-hyperlink.js`,
+      `${JS_ROOT}/_utils/lang-badge.js`,
+      // 'smooth-scroll.js' must be called after ToC is ready
+      `${JS_ROOT}/_utils/smooth-scroll.js`
+    ], 'post'
+  );
+};
+
+const categoriesJs = () => {
+  return concatJs([
+      `${JS_ROOT}/_commons/*.js`,
+      `${JS_ROOT}/_utils/category-collapse.js`
+    ], 'categories'
+  );
+};
+
+const pageJs = () => {
+  return concatJs([
+      `${JS_ROOT}/_commons/*.js`,
+      `${JS_ROOT}/_utils/smooth-scroll.js`
+    ], 'page'
+  );
+};
+
+// GA pageviews report
+const pvreportJs = () => {
+  return concatJs(`${JS_ROOT}/_utils/pageviews.js`, 'pvreport');
+};
+
+const buildJs = parallel(homeJs, postJs, categoriesJs, pageJs, pvreportJs);
+
+exports.build = series(buildJs, minifyJs);
+
+exports.liveRebuild = () => {
+  buildJs();
+
+  watch([
+      `${ JS_ROOT }/_commons/*.js`,
+      `${ JS_ROOT }/_utils/*.js`,
+      `${ JS_ROOT }/lib/*.js`
+    ],
+    buildJs
+  )
+}
+
diff --git a/index.html b/index.html
index e105ba92de3..1357b080933 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,4 @@
 ---
 layout: home
-breadcrumb:
-  -
-    label: Posts
-
 # Index page
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
----
\ No newline at end of file
+---
diff --git a/jekyll-theme-chirpy.gemspec b/jekyll-theme-chirpy.gemspec
new file mode 100644
index 00000000000..bc27fd56a39
--- /dev/null
+++ b/jekyll-theme-chirpy.gemspec
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+Gem::Specification.new do |spec|
+  spec.name          = "jekyll-theme-chirpy"
+  spec.version       = "3.3.1"
+  spec.authors       = ["Cotes Chung"]
+  spec.email         = ["cotes.chung@gmail.com"]
+
+  spec.summary       = "Chirpy is a minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation."
+  spec.homepage      = "https://github.com/cotes2020/jekyll-theme-chirpy"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").select { |f|
+    f.match(%r!^((assets\/(css|img|js\/[a-z])|_(includes|layouts|sass|config|data|tabs|plugins))|README|LICENSE|index|feed|app|sw|404|robots)!i)
+  }
+
+  spec.metadata = {
+    "bug_tracker_uri"   => "https://github.com/cotes2020/jekyll-theme-chirpy/issues",
+    "documentation_uri" => "https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/README.md",
+    "homepage_uri"      => "https://cotes2020.github.io/chirpy-demo",
+    "source_code_uri"   => "https://github.com/cotes2020/jekyll-theme-chirpy",
+    "wiki_uri"          => "https://github.com/cotes2020/jekyll-theme-chirpy/wiki",
+    "plugin_type"       => "theme"
+  }
+
+  spec.add_runtime_dependency "jekyll", "~> 4.1"
+  spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
+  spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16"
+  spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7"
+  spec.add_runtime_dependency "jekyll-archives", "~> 2.2"
+  spec.add_runtime_dependency "jekyll-sitemap", "~> 1.4"
+
+end
diff --git a/package.json b/package.json
new file mode 100644
index 00000000000..b2f8966368f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "jekyll-theme-chirpy",
+  "version": "3.3.1",
+  "description": "A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation.",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cotes2020/jekyll-theme-chirpy.git"
+  },
+  "author": "Cotes Chung",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cotes2020/jekyll-theme-chirpy/issues"
+  },
+  "homepage": "https://github.com/cotes2020/jekyll-theme-chirpy#readme",
+  "dependencies": {
+    "gulp": "^4.0.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-insert": "^0.5.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-uglify": "^3.0.2",
+    "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
+  }
+}
diff --git a/robots.txt b/robots.txt
index ad4a840fdd7..681b4c62402 100644
--- a/robots.txt
+++ b/robots.txt
@@ -1,15 +1,10 @@
 ---
-# The robots rules
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
-layout: null
 permalink: robots.txt
+# The robots rules
 ---
 
 User-agent: *
 
 Disallow: /norobots/
 
-Sitemap: {{ site.url | append: site.baseurl }}/sitemap.xml
\ No newline at end of file
+Sitemap: {{ '/sitemap.xml' | absolute_url }}
diff --git a/sitemap.xml b/sitemap.xml
deleted file mode 100644
index 7b0bb70c6a2..00000000000
--- a/sitemap.xml
+++ /dev/null
@@ -1,91 +0,0 @@
----
-layout: compress
-
-# The Sitemap template
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
----
-
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-
-{% for post in site.posts %}
-  <url>
-    <loc>{{ site.url | append: site.baseurl | append: post.url }}</loc>
-    <lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
-
-    {% if post.sitemap.changefreq %}
-      <changefreq>{{ post.sitemap.changefreq }}</changefreq>
-    {% else %}
-      <changefreq>monthly</changefreq>
-    {% endif %}
-
-    {% if post.sitemap.priority %}
-      <priority>{{ post.sitemap.priority }}</priority>
-    {% else %}
-      <priority>0.5</priority>
-    {% endif %}
-  </url>
-{% endfor %}
-
-{% for page in site.pages %}
-
-  {% assign pass = false %}
-
-  {% for fuzzy in site.sitemap_exclude.fuzzy %}
-    {% if page.url contains fuzzy %}
-      {% assign pass = true %}
-      {% break %}
-    {% endif %}
-  {% endfor %}
-
-  {% unless pass %}
-    {% for accurate in site.sitemap_exclude.accurate %}
-      {% assign len = accurate | size %}
-      {% capture beg %}{{ 0 | minus: len }}{% endcapture %}
-      {% capture tail %}{{ page.url | slice: beg, len }}{% endcapture %}
-
-      {% if tail == accurate %}
-        {% assign pass = true %}
-        {% break %}
-      {% endif %}
-
-    {% endfor %}
-  {% endunless %}
-
-  {% if pass %}
-    {% continue %}
-  {% endif %}
-
-  {% capture lastmod %}
-    {% if page.lastmod %}
-      {{ page.lastmod }}
-    {% elsif page.date %}
-      {{ page.date }}
-    {% else %}
-      {{ site.time }}
-    {% endif %}
-  {% endcapture %}
-
-   <url>
-    <loc>{{ site.url | append: site.baseurl | append: page.url | remove: "index.html" }}</loc>
-    <lastmod>{{ lastmod | date_to_xmlschema }}</lastmod>
-
-    {% if page.sitemap.changefreq %}
-      <changefreq>{{ page.sitemap.changefreq }}</changefreq>
-    {% else %}
-      <changefreq>monthly</changefreq>
-    {% endif %}
-
-    {% if page.sitemap.priority %}
-      <priority>{{ page.sitemap.priority }}</priority>
-    {% else %}
-      <priority>0.3</priority>
-    {% endif %}
-  </url>
-
-{% endfor %}
-
-</urlset>
\ No newline at end of file
diff --git a/sw.js b/sw.js
index 91329e3e1a6..1b0724167fa 100644
--- a/sw.js
+++ b/sw.js
@@ -1,27 +1,23 @@
 ---
 layout: compress
-
-# Chirpy v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# MIT Licensed
+# PWA service worker
 ---
 
 self.importScripts('{{ "/assets/js/data/cache-list.js" | relative_url }}');
 
 var cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M" }}';
 
-
 function isExcluded(url) {
+  const regex = /(^http(s)?|^\/)/; /* the regex for CORS url or relative url */
   for (const rule of exclude) {
-    if (url.indexOf(rule) != -1) {
+    if (!regex.test(url) ||
+      url.indexOf(rule) != -1) {
       return true;
     }
   }
   return false;
 }
 
-
 self.addEventListener('install', (e) => {
   self.skipWaiting();
   e.waitUntil(
@@ -31,25 +27,26 @@ self.addEventListener('install', (e) => {
   );
 });
 
-
 self.addEventListener('fetch', (e) => {
   e.respondWith(
     caches.match(e.request).then((r) => {
-      /* console.log('[Service Worker] Fetching resource: ' + e.request.url); */
+      /* console.log(`[sw] method: ${e.request.method}, fetching: ${e.request.url}`); */
       return r || fetch(e.request).then((response) => {
         return caches.open(cacheName).then((cache) => {
           if (!isExcluded(e.request.url)) {
-            /* console.log('[Service Worker] Caching new resource: ' + e.request.url); */
-            cache.put(e.request, response.clone());
+            if (e.request.method === "GET") {
+              /* console.log('[sw] Caching new resource: ' + e.request.url); */
+              cache.put(e.request, response.clone());
+            }
           }
           return response;
         });
+
       });
     })
   );
 });
 
-
 self.addEventListener('activate', (e) => {
   e.waitUntil(
     caches.keys().then((keyList) => {
diff --git a/tabs/tags.md b/tabs/tags.md
deleted file mode 100644
index 6a2152a7c06..00000000000
--- a/tabs/tags.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Tags
-type: tags
-# All the Tags of posts.
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
----
-
-{% comment %}
-  'site.tags' looks like a Map, e.g. site.tags.MyTag.[ Post0, Post1, ... ]
-  Print the {{ site.tags }} will help you to understand it.
-{% endcomment %}
-<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
-{% assign tags = "" | split: "" %}
-{% for t in site.tags %}
-  {% assign tags = tags | push: t[0] %}
-{% endfor %}
-
-{% assign sorted_tags = tags | sort_natural %}
-
-{% for t in sorted_tags %}
-  <div>
-    <a class="tag" href="{{ site.baseurl }}/tags/{{ t | replace: ' ', '-' | downcase | url_encode }}/">{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span></a>
-  </div>
-{% endfor %}
-
-</div>
diff --git a/tags/crossref.html b/tags/crossref.html
deleted file mode 100644
index 9a89b42eb91..00000000000
--- a/tags/crossref.html
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: tag
-title: crossref
-tag: crossref
----
diff --git a/tools/build.sh b/tools/build.sh
deleted file mode 100755
index 3381d5a91ef..00000000000
--- a/tools/build.sh
+++ /dev/null
@@ -1,121 +0,0 @@
-#!/bin/bash
-#
-# Build jekyll site and store site files in ./_site
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-CMD="JEKYLL_ENV=production bundle exec jekyll b"
-
-WORK_DIR=$(dirname $(dirname $(realpath "$0")))
-
-CONTAINER=${WORK_DIR}/.container
-
-DEST=${WORK_DIR}/_site
-
-
-_help() {
-  echo "Usage:"
-  echo
-  echo "   bash build.sh [options]"
-  echo
-  echo "Options:"
-  echo "   -b, --baseurl <URL>      The site relative url that start with slash, e.g. '/project'"
-  echo "   -h, --help               Print the help information"
-  echo "   -d, --destination <DIR>  Destination directory (defaults to ./_site)"
-}
-
-
-_init() {
-  cd $WORK_DIR
-
-  if [[ -d $CONTAINER ]]; then
-    rm -rf $CONTAINER
-  fi
-
-  if [[ -d _site ]]; then
-    jekyll clean
-  fi
-
-  local _temp=$(mktemp -d)
-  cp -r * $_temp
-  cp -r .git $_temp
-  mv $_temp $CONTAINER
-}
-
-
-_build() {
-  cd $CONTAINER
-  echo "$ cd $(pwd)"
-
-  bash _scripts/sh/create_pages.sh
-  bash _scripts/sh/dump_lastmod.sh
-
-  CMD+=" -d ${DEST}"
-  echo "\$ $CMD"
-  eval $CMD
-  echo -e "\nBuild success, the site files have been placed in '${DEST}'."
-
-  if [[ -d ${DEST}/.git ]]; then
-    if [[ ! -z $(git -C $DEST status -s) ]]; then
-      git -C $DEST add .
-      git -C $DEST commit -m "[Automation] Update site files." -q
-      echo -e "\nPlease push the changes of $DEST to remote master branch.\n"
-    fi
-  fi
-
-  cd .. && rm -rf $CONTAINER
-}
-
-
-_check_unset() {
-  if [[ -z ${1:+unset} ]]
-  then
-    _help
-    exit 1
-  fi
-}
-
-
-main() {
-  while [[ $# -gt 0 ]]
-  do
-    opt="$1"
-    case $opt in
-      -b|--baseurl)
-        _check_unset $2
-        if [[ $2 == \/* ]]
-        then
-          CMD+=" -b $2"
-        else
-          _help
-          exit 1
-        fi
-        shift
-        shift
-        ;;
-      -d|--destination)
-        _check_unset $2
-        DEST=$(realpath $2)
-        shift;
-        shift;
-        ;;
-      -h|--help)
-        _help
-        exit 0
-        ;;
-      *) # unknown option
-        _help
-        exit 1
-        ;;
-    esac
-  done
-
-  _init
-  _build
-}
-
-main "$@"
diff --git a/tools/bump.sh b/tools/bump.sh
new file mode 100755
index 00000000000..18b09d86352
--- /dev/null
+++ b/tools/bump.sh
@@ -0,0 +1,195 @@
+#!/usr/bin/env bash
+#
+# 1. Bump latest version number to files:
+#   - _sass/jekyll-theme-chirpy.scss
+#   - assets/js/.copyright.js
+#   - assets/js/dist/*.js (will be built by gulp later)
+#   - jekyll-theme-chirpy.gemspec
+#   - Gemfile.lock
+#   - package.json
+#
+# 2. Create a git-tag on release branch
+#
+# 3. Build a RubyGems package base on the latest git-tag
+#
+#
+# Requires: Git, Gulp, RubyGems
+
+set -eu
+
+manual_release=false
+
+ASSETS=(
+  "_sass/jekyll-theme-chirpy.scss"
+  "assets/js/_copyright"
+)
+
+GEM_SPEC="jekyll-theme-chirpy.gemspec"
+
+NODE_META="package.json"
+
+_check_src() {
+  if [[ ! -f $1 && ! -d $1 ]]; then
+    echo -e "Error: Missing file \"$1\"!\n"
+    exit -1
+  fi
+}
+
+check() {
+  if [[ -n $(git status . -s) ]]; then
+    echo "Error: Commit unstaged files first, and then run this tool againt."
+    exit -1
+  fi
+
+  # ensure the current branch is 'master'
+  if [[ "$(git branch --show-current)" != "master" && manual_release == "false" ]]; then
+    echo "Error: This operation must be performed on the 'master' branch!"
+    exit -1
+  fi
+
+  for i in "${!ASSETS[@]}"; do
+    _check_src "${ASSETS[$i]}"
+  done
+
+  _check_src "$NODE_META"
+  _check_src "$GEM_SPEC"
+}
+
+_bump_assets() {
+  for i in "${!ASSETS[@]}"; do
+    sed -i "s/v[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/v$1/" "${ASSETS[$i]}"
+  done
+
+  gulp
+}
+
+_bump_gemspec() {
+  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$1/" "$GEM_SPEC"
+}
+
+_bump_node() {
+  sed -i \
+    "s,[\"]version[\"]: [\"][[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+[\"],\"version\": \"$1\"," \
+    $NODE_META
+}
+
+bump() {
+  _bump_assets "$1"
+  _bump_gemspec "$1"
+  _bump_node "$1"
+
+  if [[ -n $(git status . -s) ]]; then
+    git add .
+    git commit -m "Bump version to $1"
+  fi
+}
+
+build_gem() {
+  rm -f ./*.gem
+  gem build "$GEM_SPEC"
+}
+
+release() {
+  _version="$1"
+  _major=""
+  _minor=""
+
+  IFS='.' read -r -a array <<< "$_version"
+
+  for elem in "${array[@]}"; do
+    if [[ -z $_major ]]; then
+      _major="$elem"
+    elif [[ -z $_minor ]]; then
+      _minor="$elem"
+    else
+      break
+    fi
+  done
+
+  _release_branch="$_major-$_minor-stable"
+
+  if $manual_release; then
+    echo -e "Bump version to $_version (manual release)\n"
+    bump "$_version"
+    exit 0
+  fi
+
+  if [[ -z $(git branch -v | grep "$_release_branch") ]]; then
+    git checkout -b "$_release_branch"
+  else
+    git checkout "$_release_branch"
+    # cherry-pick the latest commit from master branch to release branch
+    git cherry-pick "$(git rev-parse master)"
+  fi
+
+  echo -e "Bump version to $_version\n"
+  bump "$_version"
+
+  echo -e "Create tag v$_version\n"
+  git tag "v$_version"
+
+  echo -e "Build the gem pakcage for v$_version\n"
+  build_gem
+
+  # head back to master branch
+  git checkout master
+  # cherry-pick the latest commit from release branch to master branch
+  git cherry-pick "$_release_branch" -x
+
+}
+
+help() {
+  echo "Bump new version to Chirpy project"
+  echo "Usage:"
+  echo
+  echo "   bash /path/to/bump.sh [options]"
+  echo
+  echo "Options:"
+  echo "     -m, --manual         Manual relase, bump version only."
+  echo "     -h, --help           Print this help information."
+}
+
+main() {
+  check
+
+  _latest_tag="$(git describe --tags $(git rev-list --tags --max-count=1))"
+
+  echo "Input a version number (hint: latest version is ${_latest_tag:1})"
+
+  read _version
+
+  if [[ $_version =~ ^[[:digit:]]+\.[[:digit:]]+\.[[:digit:]]$ ]]; then
+
+    if git tag --list | egrep -q "^v$_version$"; then
+      echo "Error: version '$_version' already exists"
+      exit -1
+    fi
+
+    release "$_version"
+
+  else
+
+    echo "Error: Illegal version number: '$_version'"
+  fi
+
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+    -m | --manual)
+      manual_release=true
+      shift
+      ;;
+    -h | --help)
+      help
+      exit 0
+      ;;
+    *)
+      echo "unknown option '$opt'!"
+      exit 1
+      ;;
+  esac
+done
+
+main
diff --git a/tools/deploy.sh b/tools/deploy.sh
new file mode 100755
index 00000000000..17a490abc42
--- /dev/null
+++ b/tools/deploy.sh
@@ -0,0 +1,73 @@
+#!/usr/bin/env bash
+#
+# Deploy the content of _site to 'origin/<pages_branch>'
+
+set -eu
+
+PAGES_BRANCH="gh-pages"
+
+_no_branch=false
+_backup_dir="$(mktemp -d)"
+
+init() {
+  if [[ -z ${GITHUB_ACTION+x} ]]; then
+    echo "ERROR: This script is not allowed to run outside of GitHub Action."
+    exit -1
+  fi
+
+  # Gemfile could be changed by `bundle install` in actions workflow
+  if [[ -n $(git ls-files | grep Gemfile.lock) && -n \
+  $(git status Gemfile.lock --porcelain) ]]; then
+    git checkout -- Gemfile.lock
+  fi
+
+  if [[ -z $(git branch -av | grep "$PAGES_BRANCH") ]]; then
+    _no_branch=true
+    git checkout -b "$PAGES_BRANCH"
+  else
+    git checkout "$PAGES_BRANCH"
+  fi
+}
+
+backup() {
+  mv _site/* "$_backup_dir"
+  mv .git "$_backup_dir"
+
+  # When adding custom domain from Github website,
+  # the CANME only exist on `gh-pages` branch
+  if [[ -f CNAME ]]; then
+    mv CNAME "$_backup_dir"
+  fi
+}
+
+flush() {
+  rm -rf ./*
+  rm -rf .[^.] .??*
+
+  shopt -s dotglob nullglob
+  mv "$_backup_dir"/* .
+}
+
+deploy() {
+  git config --global user.name "GitHub Actions"
+  git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+
+  git update-ref -d HEAD
+  git add -A
+  git commit -m "[Automation] Site update No.${GITHUB_RUN_NUMBER}"
+
+  if $_no_branch; then
+    git push -u origin "$PAGES_BRANCH"
+  else
+    git push -f
+  fi
+}
+
+main() {
+  init
+  backup
+  flush
+  deploy
+}
+
+main
diff --git a/tools/init.sh b/tools/init.sh
new file mode 100755
index 00000000000..2ab78df82b6
--- /dev/null
+++ b/tools/init.sh
@@ -0,0 +1,85 @@
+#!/usr/bin/env bash
+#
+# Init the evrionment for new user.
+
+set -eu
+
+ACTIONS_WORKFLOW=pages-deploy.yml
+
+help() {
+  echo "Usage:"
+  echo
+  echo "   bash /path/to/init.sh [options]"
+  echo
+  echo "Options:"
+  echo "     --no-gh              Do not deploy to Github."
+  echo "     -h, --help           Print this help information."
+}
+
+check_init() {
+  local _has_inited=false
+
+  if [[ ! -d docs ]]; then
+    if [[ ! -d .github ]]; then
+      _has_inited=true # --no-gh
+    else
+      if [[ -f .github/workflows/$ACTIONS_WORKFLOW ]]; then
+        # on BSD, the `wc` could contains blank
+        local _count="$(find .github/workflows/ -type f -name "*.yml" | wc -l)"
+        if [[ ${_count//[[:blank:]]/} == 1 ]]; then
+          _has_inited=true
+        fi
+      fi
+    fi
+  fi
+
+  if $_has_inited; then
+    echo "Already initialized."
+    exit 0
+  fi
+}
+
+init_files() {
+
+  if $_no_gh; then
+    rm -rf .github
+  else
+    mv .github/workflows/$ACTIONS_WORKFLOW.hook .
+    rm -rf .github
+    mkdir -p .github/workflows
+    mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
+  fi
+
+  rm -f .travis.yml
+  rm -rf _posts/* docs
+
+  git add -A && git add .github -f
+  git commit -m "[Automation] Initialize the environment." -q
+
+  echo "[INFO] Initialization successful!"
+}
+
+check_init
+
+_no_gh=false
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+    --no-gh)
+      _no_gh=true
+      shift
+      ;;
+    -h | --help)
+      help
+      exit 0
+      ;;
+    *)
+      # unknown option
+      help
+      exit 1
+      ;;
+  esac
+done
+
+init_files
diff --git a/tools/publish.sh b/tools/publish.sh
deleted file mode 100755
index 9378d616e53..00000000000
--- a/tools/publish.sh
+++ /dev/null
@@ -1,98 +0,0 @@
-#!/bin/bash
-#
-# Initial the Categories/Tags pages and Lastmod for posts and then push to remote
-#
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-CATEGORIES=false
-TAGS=false
-LASTMOD=false
-
-WORK_DIR=$(dirname $(dirname $(realpath "$0")))
-
-check_status() {
-  local _change=$(git status . -s)
-
-  if [[ ! -z ${_change} ]]; then
-    echo "Warning: Commit the changes of the changes first:"
-    echo "$_change"
-    exit 1
-  fi
-}
-
-
-update_files() {
-  bash _scripts/sh/create_pages.sh
-  bash _scripts/sh/dump_lastmod.sh
-
-  find . | grep -E "(__pycache__|\.pyc|\.pyo$)" | xargs rm -rf
-}
-
-
-commit() {
-  msg="Updated"
-
-  if [[ ! -z $(git status categories -s) ]]; then
-    git add categories/
-    msg+=" the Categories"
-    CATEGORIES=true
-  fi
-
-  if [[ ! -z $(git status tags -s) ]]; then
-    git add tags/
-    if [[ $CATEGORIES = true ]]; then
-      msg+=","
-    else
-      msg+=" the"
-    fi
-    msg+=" Tags"
-    TAGS=true
-  fi
-
-  if [[ ! -z $(git status _data -s) ]]; then
-    git add _data
-    if [[ $CATEGORIES = true || $TAGS = true ]]; then
-      msg+=","
-    else
-      msg+=" the"
-    fi
-    msg+=" Lastmod"
-    LASTMOD=true
-  fi
-
-  if [[ $CATEGORIES = true || $TAGS = true || $LASTMOD = true ]]; then
-    msg+=" for post(s)."
-    git commit -m "[Automation] $msg" -q
-  else
-    msg="Nothing changed."
-  fi
-
-}
-
-
-push() {
-  git push origin master -q
-  echo "[INFO] Published successfully!"
-}
-
-
-main() {
-
-  cd $WORK_DIR
-
-  check_status
-
-  update_files
-
-  commit
-
-  push
-}
-
-
-main
diff --git a/tools/pv.sh b/tools/pv.sh
deleted file mode 100755
index 98f73baf488..00000000000
--- a/tools/pv.sh
+++ /dev/null
@@ -1,25 +0,0 @@
-#!/bin/bash
-#
-# Fetch Google Analytics Pageviews reporting cache
-# and save as 'assets/data/pagevies.json'
-#
-# Requirement:
-#   - jq
-#   - wget
-#
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT Licensed
-
-
-set -eu
-
-WORK_DIR=$(dirname $(dirname $(realpath "$0")))
-URL_FILE=${WORK_DIR}/assets/data/proxy.json
-PV_CACHE=${WORK_DIR}/assets/data/pageviews.json
-
-
-PROXY_URL=$(jq -r '.proxyUrl' $URL_FILE)
-
-wget $PROXY_URL -O $PV_CACHE
diff --git a/tools/run.sh b/tools/run.sh
index 339ea7e72ee..8072e414897 100755
--- a/tools/run.sh
+++ b/tools/run.sh
@@ -1,147 +1,5 @@
-#!/bin/bash
-
-# Run jekyll site at http://127.0.0.1:4000
-#
-# Requirement:
-#   Option '-r, --realtime' needs fswatch › http://emcrisostomo.github.io/fswatch/
+#!/usr/bin/env bash
 #
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-WORK_DIR=$(dirname $(dirname $(realpath "$0")))
-
-CONTAINER=.container
-SYNC_TOOL=_scripts/sh/sync_monitor.sh
-
-cmd="bundle exec jekyll s"
-realtime=false
-
-
-_help() {
-  echo "Usage:"
-  echo
-  echo "   bash run.sh [options]"
-  echo
-  echo "Options:"
-  echo "     -H, --host    <HOST>    Host to bind to"
-  echo "     -P, --port    <PORT>    Port to listen on"
-  echo "     -b, --baseurl <URL>     The site relative url that start with slash, e.g. '/project'"
-  echo "     -h, --help              Print the help information"
-  echo "     -t, --trace             Show the full backtrace when an error occurs"
-  echo "     -r, --realtime          Make the modified content updated in real time"
-}
-
-
-_cleanup() {
-  if [[ -d _site || -d .jekyll-cache ]]; then
-    jekyll clean
-  fi
-
-  rm -rf ${WORK_DIR}/${CONTAINER}
-  ps aux | grep fswatch | awk '{print $2}' | xargs kill -9 > /dev/null 2>&1
-}
-
-
-_init() {
-
-  if [[ -d ${WORK_DIR}/${CONTAINER} ]]; then
-    rm -rf ${WORK_DIR}/${CONTAINER}
-  fi
-
-  temp=$(mktemp -d)
-  cp -r ${WORK_DIR}/* $temp
-  cp -r ${WORK_DIR}/.git $temp
-  mv $temp ${WORK_DIR}/${CONTAINER}
-
-  trap _cleanup INT
-}
-
-
-_check_unset() {
-  if [[ -z ${1:+unset} ]]; then
-    _help
-    exit 1
-  fi
-}
-
-
-_check_command() {
-  if [[ -z $(command -v $1) ]]; then
-    echo "Error: command '$1' not found !"
-    echo "Hint: Get '$1' on <$2>"
-    exit 1
-  fi
-}
-
-
-main() {
-  _init
-
-  cd ${WORK_DIR}/${CONTAINER}
-  bash _scripts/sh/create_pages.sh
-  bash _scripts/sh/dump_lastmod.sh
-
-  if [[ $realtime = true ]]; then
-    fswatch -0 -e "\\$CONTAINER" -e "\.git" ${WORK_DIR} | xargs -0 -I {} bash ./${SYNC_TOOL} {} $WORK_DIR . &
-  fi
-
-  echo "\$ $cmd"
-  eval $cmd
-}
-
-
-while (( $# ))
-do
-  opt="$1"
-  case $opt in
-    -H|--host)
-      _check_unset $2
-      cmd+=" -H $2"
-      shift # past argument
-      shift # past value
-      ;;
-    -P|--port)
-      _check_unset $2
-      cmd+=" -P $2"
-      shift
-      shift
-      ;;
-    -b|--baseurl)
-      _check_unset $2
-      if [[ $2 == \/* ]]
-      then
-        cmd+=" -b $2"
-      else
-        _help
-        exit 1
-      fi
-      shift
-      shift
-      ;;
-    -t|--trace)
-      cmd+=" -t"
-      shift
-      ;;
-    -r|--realtime)
-      _check_command fswatch 'http://emcrisostomo.github.io/fswatch/'
-      realtime=true
-      shift
-      ;;
-    -h|--help)
-      _help
-      exit 0
-      ;;
-    *)
-      # unknown option
-      _help
-      exit 1
-      ;;
-  esac
-done
-
+# Run jekyll serve and then launch the site
 
-main
+bundle exec jekyll s -H 0.0.0.0 -l
diff --git a/tools/test.sh b/tools/test.sh
index b556ff2981e..0a22ba01690 100755
--- a/tools/test.sh
+++ b/tools/test.sh
@@ -1,20 +1,65 @@
-#!/bin/bash
+#!/usr/bin/env bash
 #
 # Using HTML-proofer to test site.
 #
 # Requirement: https://github.com/gjtorikian/html-proofer
 #
-# Usage: bash /path/to/test.sh
-#
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# MIT Licensed
+# Usage: bash /path/to/test.sh [indicated path]
 
 DEST=_site
 URL_IGNORE=cdn.jsdelivr.net
 
-bundle exec htmlproofer $DEST \
+_build=false
+
+help() {
+  echo "Usage:"
+  echo
+  echo "   bash ./tools/test.sh [options]"
+  echo
+  echo "Options:"
+  echo "     --build                  Run Jekyll build before test."
+  echo "     -d, --dir   <path>       Specify the test path."
+  echo "     -h, --help               Print this information."
+}
+
+if [[ -n $1 && -d $1 ]]; then
+  DEST=$1
+fi
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+    --build)
+      _build=true
+      shift
+      ;;
+    -d | --dir)
+      if [[ ! -d $2 ]]; then
+        echo -e "Error: path '$2' doesn't exist\n"
+        help
+        exit 1
+      fi
+      DEST=$2
+      shift
+      shift
+      ;;
+    -h | --help)
+      help
+      exit 0
+      ;;
+    *)
+      # unknown option
+      help
+      exit 1
+      ;;
+  esac
+done
+
+if $_build; then
+  JEKYLL_ENV=production bundle exec jekyll b
+fi
+
+bundle exec htmlproofer "$DEST" \
   --disable-external \
   --check-html \
   --empty_alt_ignore \