Bump version to 2.6.2

Introduced by #119

.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

.github/CODE_OF_CONDUCT.md

@@ -11,8 +11,7 @@ appearance, race, religion, or sexual identity and orientation.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment
-include:
+Examples of behavior that contributes to creating a positive environment include:
 
 * Using welcoming and inclusive language
 * Being respectful of differing viewpoints and experiences
@@ -22,12 +21,10 @@ include:
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
+* 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
+* 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
 
@@ -55,7 +52,7 @@ 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
+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.
@@ -68,9 +65,9 @@ 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
-
-[homepage]: https://www.contributor-covenant.org
+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
+<https://www.contributor-covenant.org/faq>
+
+[homepage]: https://www.contributor-covenant.org

.github/CONTRIBUTING.md

@@ -7,15 +7,9 @@ To ensure that the blog design is not confused, this project does not accept sug
 Generally, contribute to the project by:
 
 1. Fork this project on GitHub and clone it locally.
-2. Create a new branch named `feature/my-feature` (or `feature/fix-a-bug`), which branch from `develop`:
-
-    ```console
-    $ git checkout -b feature/<my-feature> develop
-    ```
-    > Please note that the new branch name must include the prefix `feature/`.
-
+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** to the `develop` branch of upstream, i.e., `cotes2020/jekyll-theme-chirpy:develop`.
+4. Submit a new pull request.
 
 ---
 

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,7 +4,7 @@ about: Create a report to help us improve
 labels: bug
 ---
 
-<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+<!-- 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]" -->
@@ -12,38 +12,44 @@ labels: bug
 - [ ] 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**
+### To Reproduce
 
 Steps to reproduce the behavior:
-
+<!--
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
+-->
 
-
-**Expected behavior**
+### Expected behavior
 <!-- A clear and concise description of what you expected to happen. -->
 
-**Screenshots**
+### Screenshots
 <!-- If applicable, add screenshots to help explain your problem. -->
 
-**Desktop**
+### Software
 <!-- Please complete the following information -->
- - OS: [e.g. iOS]
- - Browser: [e.g. chrome, safari]
- - Version: [e.g. 22]
+- 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 "` -->
 
-**Smartphone**
-<!-- please complete the following information -->
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser: [e.g. stock browser, safari]
- - Version: [e.g. 22]
+### 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)]
+-->
 
-**Additional context**
+### 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. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,14 +4,14 @@ about: Suggest an idea for this project
 labels: enhancement
 ---
 
-<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+<!-- 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 `develop` branch of the latest code.
+- [ ] I was in the `master` branch of the latest code.
 
 
 ## Is your feature request related to a problem? Please describe

.github/ISSUE_TEMPLATE/question.md

@@ -4,7 +4,7 @@ about: Ask what ever you want
 labels: question
 ---
 
-<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
 
 ## Checklist
 
@@ -15,6 +15,5 @@ labels: question
 - [ ] 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. -->
+<!-- Please describe your question in detial. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,25 +16,24 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] Documentation update
 
-## How has this been tested?
+## 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/build.sh && bash ./tools/test.sh` (at the root of the project) locally and passed
+- [ ] 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**
+### Test Configuration
 
-* Browerser type & version:
-* Operating system:
-* Bundler version:
-* Ruby version:
-* Jekyll version:
+- Browerser type & version:
+- Operating system:
+- Bundler version:
+- Ruby version:
+- Jekyll version:
 
-
-## Checklist:
+### 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
@@ -42,4 +41,4 @@ Please describe the tests that you ran to verify your changes. Provide instructi
 - [ ] 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
+- [ ] Any dependent changes have been merged and published in downstream modules

.github/workflows/ci.yml

@@ -1,8 +1,8 @@
 name: 'Continuous Integration'
 on:
   push:
-    branches:
-      - '*'
+    branches-ignore:
+      - 'production'
     tags-ignore:
       - '*'
     paths-ignore:
@@ -24,47 +24,38 @@ jobs:
       matrix:
         os: [ubuntu-latest, macos-latest]
 
-    steps:
-      - uses: actions/setup-ruby@v1
-        with:
-          ruby-version: '2.6.x'
+    env:
+      GEMS_PATH: ~/vendor/bundle
 
+    steps:
       - name: Checkout
         uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.6.x
 
       - name: Bundle Caching
-        id: bundle-cache
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
-          path: vendor/bundle
+          path: ${{ env.GEMS_PATH }}
           key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
           restore-keys: |
             ${{ runner.os }}-gems-
 
-      - name: Install GNU-Coreutils(for macOS)
-        if: runner.os == 'macOS'
-        run: |
-          brew install coreutils
-
-      - name: Bundle config
-        run: |
-          bundle config path vendor/bundle
-
       - name: Bundle Install
-        if: steps.bundle-cache.outputs.cache-hit != 'true'
         run: |
-          bundle install
-
-      - name: Bundle Install locally
-        if: steps.bundle-cache.outputs.cache-hit == 'true'
-        run: |
-          bundle install --local
+          bundle config path ${{ env.GEMS_PATH }}
+          bundle install --jobs 4 --retry 3
 
       - name: Build Site
+        env:
+          JEKYLL_ENV: production
         run: |
-          bash tools/build.sh
+          bundle exec jekyll b
 
       - name: Test Site
         run: |

.github/workflows/issue-pr-interceptor.yml

@@ -0,0 +1,16 @@
+name: "Intercept bad issue/PRs"
+
+on: [issues, pull_request]
+
+jobs:
+  autoclose:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Autoclose issues that did not follow issue template
+      uses: roots/issue-closer@v1.1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-pattern: "\\[x\\] I have read"
+        issue-close-message: "Hi @${issue.user.login} :wave:,\n\nThis issue is being automatically closed because it does not follow the issue template."
+        pr-pattern: "\\[x\\] Bug|\\[x\\] New feat|\\[x\\] Break|\\[x\\] Doc"
+        pr-close-message: "Hi @${pull_request.user.login} :wave:,\n\nThis PR is being automatically closed because it does not follow the PR template."

.github/workflows/issues-cleaner.yml

@@ -1,24 +0,0 @@
-name: "Close stale issues"
-on:
-  schedule:
-  - cron: "0 0 * * *"
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    steps:
-    - env:
-        DAYS_TO_STALE: ${{ 5 }}
-        DAYS_TO_CLOSE: ${{ 2 }}
-      uses: actions/stale@v3
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        stale-issue-message: 'This issue is stale because it has been open ${{ env.DAYS_TO_STALE }} days with no activity. Remove stale label or comment or this will be closed in ${{ env.DAYS_TO_CLOSE }} days'
-        stale-issue-label: 'stale'
-        exempt-issue-labels: 'pending, in progress'
-        stale-pr-message: 'This PR is stale because it has been open ${{ env.DAYS_TO_STALE }} days with no activity. Remove stale label or comment or this will be closed in ${{ env.DAYS_TO_CLOSE }} days'
-        stale-pr-label: 'stale'
-        exempt-pr-labels: 'pending, in progress'
-        days-before-stale: ${{ env.DAYS_TO_STALE }}
-        days-before-close: ${{ env.DAYS_TO_CLOSE }}
-        # debug-only: true

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

@@ -4,96 +4,68 @@ on:
     branches:
       - master
     paths-ignore:
-      - '.gitignore'
-      - 'README.md'
-      - 'LICENSE'
+      - .gitignore
+      - README.md
+      - LICENSE
 
 jobs:
-  build-n-test:
+  continuous-delivery:
+
     runs-on: ubuntu-latest
 
-    steps:
-      - uses: actions/setup-ruby@v1
-        with:
-          ruby-version: '2.6.x'
+    env:
+      GEMS_PATH: ~/vendor/bundle
 
+    steps:
       - name: Checkout
         uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.6.x
 
       - name: Bundle Caching
-        id: bundle-cache
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
-          path: vendor/bundle
+          path: ${{ env.GEMS_PATH }}
           key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
           restore-keys: |
             ${{ runner.os }}-gems-
 
-      - name: Bundle config
-        run: |
-          bundle config path vendor/bundle
-
       - name: Bundle Install
-        if: steps.bundle-cache.outputs.cache-hit != 'true'
         run: |
-          bundle install
+          bundle config path ${{ env.GEMS_PATH }}
+          bundle install --jobs 4 --retry 3
 
-      - name: Bundle Install locally
-        if: steps.bundle-cache.outputs.cache-hit == 'true'
+      - name: Check baseurl
         run: |
-          bundle install --local
+          baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
+          if [[ -n $baseurl ]]; then
+            echo "SPEC_TEST=_site_no_baseurl" >> $GITHUB_ENV
+          fi
 
       - name: Build Site
+        env:
+          JEKYLL_ENV: production
         run: |
-          bash tools/build.sh -b ""
+          bundle exec jekyll b
+
+          if [[ -n $SPEC_TEST ]]; then
+            # Bypass the defects of htmlproofer
+            bundle exec jekyll b -b "" -d "$SPEC_TEST"
+          fi
 
       - name: Test Site
         run: |
-          bash tools/test.sh
-
-  deploy:
-    needs: build-n-test
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/setup-ruby@v1
-        with:
-          ruby-version: '2.6.x'
-
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Bundle Caching
-        id: bundle-cache
-        uses: actions/cache@v1
-        with:
-          path: vendor/bundle
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
-          restore-keys: |
-            ${{ runner.os }}-gems-
-
-      - name: Bundle config
-        run: |
-          bundle config path vendor/bundle
-
-      - name: Bundle Install
-        if: steps.bundle-cache.outputs.cache-hit != 'true'
-        run: |
-          bundle install
-
-      - name: Bundle Install locally
-        if: steps.bundle-cache.outputs.cache-hit == 'true'
-        run: |
-          bundle install --local
-
-      - name: Build site
-        run: |
-          bash tools/build.sh
-
+          if [[ -n $SPEC_TEST ]]; then
+            bash tools/test.sh -d "$SPEC_TEST"
+          else
+            bash tools/test.sh
+          fi
+          
       - name: Deploy
         run: |
           bash tools/deploy.sh

.gitignore

@@ -1,17 +1,8 @@
 # hidden files
 .*
+!.github
 
-# python compiled files
-*.pyc
-
-# jekyll debug
+# jekyll cache 
 _site
-
-# Jeykll Gemfile.lock
 Gemfile.lock
-
-# yui-compressor
-*.jar
-
-# bundle cache
 vendor

.travis.yml

@@ -13,17 +13,14 @@ install:
 addons:
   apt:
     packages:
-    - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
+      - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
 
 script:
-  - >-
-    git clone https://${GH_PAT}@github.com/${GH_USER}/${BUILDER_REPO}.git
-    ${HOME}/${BUILDER_REPO} --depth=1 -q
-  - cp -r ${HOME}/${BUILDER_REPO}/framework/* .
-  - bash _cibuild.sh
+  - git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
+  - eval "$BUILD_CMD"
 
 branches:
-  only: master
+  only: production
 
 git:
   depth: false # for posts lastmod
@@ -40,4 +37,4 @@ notifications:
 
 env:
   global:
-    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
+    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

Gemfile

@@ -1,14 +1,26 @@
 source "https://rubygems.org"
 
-gem "jekyll", ">=3.8.6"
+gem "jekyll", ">= 3.8.6", "< 5.0"
 
-# Official Plugins
+# plugins
 group :jekyll_plugins do
   gem "jekyll-paginate"
   gem "jekyll-redirect-from"
   gem "jekyll-seo-tag", "~> 2.6.1"
+  gem "jekyll-archives"
+  gem "jekyll-sitemap"
 end
 
 group :test do
-  gem "html-proofer"
+  gem "html-proofer", "~> 3.16.0"
 end
+
+# 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?

README.md

@@ -1,54 +1,54 @@
 # Chirpy
 
-🌏 English • [简体中文](docs/README_zh-CN.md)
+Language: English | [简体中文](docs/README_zh-CN.md)
 
 [![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)
-* [Installation](#installation)
-* [Usage](#usage)
-* [Contributing](#contributing)
-* [Credits](#credits)
-* [Support](#support)
-* [License](#license)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [Credits](#credits)
+- [Supporting](#supporting)
+- [License](#license)
 
 ## 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
+- Search
+- Atom Feeds
+- Disqus Comments
+- Google Analytics
+- GA Pageviews reporting (Advanced)
+- SEO and Performance Optimization
 
 ## Installation
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, and clone the fork to local by:
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, rename the repository to `USERNAME.github.io` (where `USERNAME` is your GitHub username), and then open terminal and clone the fork to local by:
 
 ```terminal
-$ git clone git@github.com:<username>/jekyll-theme-chirpy -b master --single-branch
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
 ```
 
 ### Setting up the local envrionment
 
-If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems` and `Bundler`. 
+If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
 
 Before running or building for the first time, please complete the installation of the Jekyll plugins. Go to the root directory of project and run:
 
@@ -58,25 +58,16 @@ $ bundle install
 
 `bundle` will automatically install all the dependencies specified by `Gemfile`.
 
-What's more, in order to generate some extra files (*categories*, *tags* and *last modified list*), we need to use some tool scripts. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
+### Setting up Docker environment (optional)
 
-* Debian
-
-  ```console
-  $ sudo apt-get install coreutils
-  ```
-
-* macOS
-
-  ```console
-  $ brew install coreutils
-  ```
+If you're a loyal fan of [**Docker**](https://www.docker.com/) or just too lazy to install the packages mentioned in [_Setting up the local envrionment_](#setting-up-the-local-envrionment), please make sure you have **Docker Engine** installed and running, and then get Docker image `jekyll/jekyll` from Docker Hub by the following command:
 
+```console
+$ docker pull jekyll/jekyll
+```
 
 ## Usage
 
-Running [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) requires some extra files, which cannot be generated by Jekyll native commands, so please strictly follow the methods mentioned below to run or deploy your website.
-
 ### Initialization
 
 Go to the root directory of the project and start initialization:
@@ -85,91 +76,88 @@ Go to the root directory of the project and start initialization:
 $ bash tools/init.sh
 ```
 
-> If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+> **Note**: If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
 
 What it does is:
 
 1. Remove some files or directories from your repository:
-    - `.travis.yml`
-    - everything under `.github/`
-    - files under `_posts/`
-    - folder `docs/` 
 
-2. Unless the option `--no-gh` was enabled, setup the GitHub action workflow by renaming `pages-deploy.yml.hook` of directory `.github/workflows/` to `pages-deploy.yml`.
+    - `.travis.yml`
+    - files under `_posts`
+    - folder `docs`
+
+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.
 
 ### Configuration
 
 Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
-* `url`
-* `avatar`
-* `timezone`
-* `theme_mode`
 
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
 
 ### Run Locally
 
 You may want to preview the site contents before publishing, so just run it by:
 
 ```terminal
-$ bash tools/run.sh
+$ bundle exec jekyll s
 ```
 
 Then open a browser and visit to <http://localhost:4000>.
 
-Few days later, you may find that the file changes 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.
+### Run on Docker
+
+Run the site on Docker with the following command:
+
+```terminal
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
+```
 
 ### Deployment
 
 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. For example, `/project`.
 
-Assuming you have already gone through the [initialization](#initialization), you can now choose any of the following methods to deploy your website.
+Assuming you have already gone through the [initialization](#initialization), you can now choose ONE of the following methods to deploy your website.
 
 #### Deploy on GitHub Pages
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts 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 Pages service.
+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 Pages service.
 
-1. Push any commit to `origin/master` to trigger the GitHub Actions workflow. Once the build is complete, a new remote branch called `gh-pages` will appear, which is used to store the built site files.
+1. Push any commit to `origin/master` 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.
 
-2. Unless you prefer to project sites, rename your repository to `<username>.github.io` on GitHub.
+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_:
+    ![gh-pages-sources](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/gh-pages-sources.png)
 
-3. Choose branch `gh-pages` as your GitHub Pages source.
-
-4. Visit your website at the address indicated by GitHub.
+3. Visit your website at the address indicated by GitHub.
 
 #### Deploy on Other Platforms
 
-On platforms other than GitHub, e.g. GitLab, we cannot enjoy the convenience of **GitHub Actions**. However, we have a tool to make up for this shortcoming.
+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.
 
-Commit the changes of your repository first, then run the publish script:
+Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/publish.sh
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-> 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, then push to `origin/master`. Its output is similar to the following log:
+Or, build the site with Docker by:
 
 ```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!
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
 ```
 
-Lastly, enable the pages service according to the instructions of the platform you choose.
-
-#### Deploy on Private Server
-
-In the root of the source project, build your site by:
-
-```console
-$ bash tools/build.sh -d /path/to/site/
-```
-
-The generated site files will be placed in the root of `/path/to/site/`. Now you should upload those files to your web server, such as Nginx.
+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
 
@@ -179,19 +167,16 @@ For more details and the better reading experience, please check out the [tutori
 
 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).
 
 :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.
 
-
-## Support
+## Supporting
 
 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.
 
-
 ## License
 
-This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
+This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.

_config.yml

@@ -7,7 +7,6 @@
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
 #--------------------------
-
 title: Chirpy                          # the main title
 
 tagline: A text-focused Jekyll theme.  # it will display as the sub-title
@@ -17,8 +16,8 @@ description: >-                        # used by seo meta and the atom feed
   bootstrap Jekyll theme with responsive web design
   and focuses on text presentation.
 
-# Replace with the website url, e.g. 'https://username.github.io'
-url: 'protocol://domain'
+# fill in the base hostname & protocol for your site, e.g., 'https://username.github.io'
+url: ''
 
 author: your_full_name                  # change to your full name
 
@@ -42,7 +41,6 @@ social:
     # - https://www.linkedin.com/in/username
 
 google_site_verification: google_meta_tag_verification # change to your verification string
-
 #--------------------------
 
 
@@ -80,7 +78,7 @@ disqus:
 #
 theme_mode: dual
 
-# boolean type, global switch for ToC in posts.
+# boolean type, the global switch for ToC in posts.
 toc: true
 
 paginate: 10
@@ -105,16 +103,21 @@ kramdown:
 # 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
@@ -124,12 +127,17 @@ defaults:
       path: _drafts
     values:
       comments: false
+  -
+    scope:
+      path: index.html
+    values:
+      breadcrumb:
+        -
+          label: Posts
   -
     scope:
       path: tags
     values:
-      tab_active: Tags
-      location: Tag
       breadcrumb:
         -
           label: Home
@@ -141,8 +149,6 @@ defaults:
     scope:
       path: categories
     values:
-      tab_active: Categories
-      location: Category
       breadcrumb:
         -
           label: Home
@@ -152,7 +158,8 @@ defaults:
           url: /tabs/categories/
   -
     scope:
-      path: tabs
+      path: ''
+      type: tabs             # see `site.collections`
     values:
       layout: page
       dynamic_title: true    # Hide title in mobile screens.
@@ -161,24 +168,21 @@ defaults:
           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: []
 
 exclude:
-  - vendor        # Avoid Jekyll mistakenly read the vendor directory on Travis-CI's VM .
+  - vendor
   - Gemfile.lock
   - Gemfile
   - tools
@@ -186,17 +190,11 @@ exclude:
   - 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
+jekyll-archives:
+  enabled: [categories, tags]
+  layouts:
+    category: category
+    tag: tag
+  permalinks:
+    tag: '/tags/:name/'
+    category: '/categories/:name/'

_data/contact.yml

@@ -21,11 +21,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

_data/meta.yml

@@ -0,0 +1,3 @@
+name: Chirpy
+version: 2.6.2
+homepage: https://github.com/cotes2020/jekyll-theme-chirpy/

_data/tabs.yml

@@ -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

_includes/css-selector.html

@@ -12,20 +12,21 @@
 
 {% elsif page.layout == 'page' %}
 
-  {% if page.type == 'categories' %}
+  {% if page.collection == 'tabs' and page.title != 'About' %}
 
-    <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 }}">
+    {% if page.title == '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.title == '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.title == 'Archives'%}
+      <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
+      <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
+   
+    {% endif %}
 
   {% else %}
 

_includes/fixlinenos.html

@@ -1,12 +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 include.content contains '<pre class="highlight">' %}
-  {% assign content = include.content | replace: '<pre class="highlight"><code', '<code' %}
-  {% assign content = content | replace: '</code></pre>', '</code>' %}
-  {{ content }}
-{% else %}
-  {{ include.content }}
-{% endif %}

_includes/footer.html

@@ -22,9 +22,9 @@
     <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="{{ site.data.meta.homepage }}" target="_blank" rel="noopener">{{ site.data.meta.name }}</a>
         theme.
       </p>
     </div>

_includes/google-analytics.html

@@ -5,12 +5,12 @@
   © 2017-2019 Cotes Chung
   MIT License
 -->
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async 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');
-
-  ga('create', '{{ site.google_analytics.id }}', 'auto');
-  ga('send', 'pageview');
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  
+  gtag('js', new Date());
+  gtag('config', '{{ site.google_analytics.id }}');
 </script>

_includes/head.html

@@ -9,6 +9,9 @@
 <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">
+  <meta name="theme" content="{{ site.data.meta.name }} v{{ site.data.meta.version }}">
+
+  {% seo title=false %}
 
   <title>
   {%- unless page.layout == "home" -%}
@@ -17,8 +20,6 @@
     {{ site.title }}
   </title>
 
-  {% seo title=false %}
-
   {% include favicons.html %}
 
   <!-- Google Fonts -->
@@ -44,10 +45,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 +59,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/dist/jquery.min.js"></script>
 
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></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 async
+    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>
+</head>

_includes/js-selector.html

@@ -8,34 +8,34 @@
 
 {% if page.layout == 'home' %}
 
-  <script src="{{ '/assets/js/home.min.js' | relative_url }}" async></script>
+  <script async src="{{ '/assets/js/home.min.js' | relative_url }}"></script>
 
 {% elsif page.layout == 'post' %}
 
-  <script src="{{ '/assets/js/post.min.js' | relative_url }}" async></script>
+  <script async src="{{ '/assets/js/post.min.js' | relative_url }}"></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>
+    <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
   {% endif %}
 
 {% elsif page.layout == 'page' %}
 
-  {% if page.type == 'categories' %}
-    <script src="{{ '/assets/js/categories.min.js' | relative_url }}" async></script>
+  {% if page.title == 'Categories' and page.collection == 'tabs' %}
+    <script async src="{{ '/assets/js/categories.min.js' | relative_url }}"></script>
   {% else %}
-    <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
+    <script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>
   {% endif %}
 
 {% else %}
 
-  <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
+  <script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>
 
 {% endif %}
 
 
-<!-- PWA -->
 {% if jekyll.environment == 'production' %}
-  <script src="{{ '/app.js' | relative_url }}" defer></script>
+  <!-- PWA -->
+  <script defer src="{{ '/app.js' | relative_url }}"></script>
 {% endif %}

_includes/mode-toggle.html

@@ -74,7 +74,7 @@
 
     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; }
 
@@ -83,7 +83,7 @@
     flipMode() {
       if (this.hasMode) {
         if (this.isSysDarkPrefer) {
-          if (this.isLightkMode) {
+          if (this.isLightMode) {
             this.clearMode();
           } else {
             this.setLight();
@@ -115,4 +115,4 @@
     toggle.flipMode();
   });
 
-</script>
+</script>

_includes/panel.html

@@ -10,49 +10,38 @@
 
   <div class="access">
 
-  {% if site.data.updates %}
-
-    {% include update-list.html %}
-
-    {% if update_list.size > 0 %}
-
+  {% include update-list.html %}
+  
+  {% 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 -}}</span>
       <ul class="post-content pl-0 pb-1 ml-1 mt-2">
 
       {% for item in update_list %}
-        {% assign post_url = item | split: "::" | last | url_encode | 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>
-        {% 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 %}
-
-  {% endif %} <!-- site.data.updates -->
+    </div> <!-- #access-lastmod -->
+  
+  {% 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 -}}</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>
       {% endfor %}
+
       </div>
     </div>
   {% endif %}
@@ -60,9 +49,9 @@
 
   {% 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">
+    <span class="pl-3 pt-2 mb-2">
       {{- site.data.label.panel.toc -}}
-    </h3>
+    </span>
     <nav id="toc" data-toggle="toc"></nav>
   </div>
   {% endif %}

_includes/post-paginator.html

@@ -10,17 +10,15 @@
 <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 +49,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 -->
+</ul> <!-- .pagination -->

_includes/post-sharing.html

@@ -16,7 +16,7 @@
     {% 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 +25,4 @@
         data-toggle="tooltip" data-placement="top" title="Copy link"></i>
 
   </span>
-</div>
+</div>

_includes/refactor-content.html

@@ -0,0 +1,27 @@
+<!--
+  Refactor the HTML structure.
+-->
+
+{% assign _content = include.content %}
+
+<!--
+  Suroundding the markdown table with '<div class="table-wrapper">. and '</div>'
+-->
+{% if _content contains '<table>' %}
+  {% assign _content = _content | replace: '<table>', '<div class="table-wrapper"><table>' %}
+  {% assign _content = _content | replace: '</table>', '</table></div>' %}
+  {% assign _content = _content | 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' %}
+  {% assign _content = _content | replace: '</code></pre></div>', '</code></div>' %}
+{% endif %}
+
+{{ _content }}

_includes/sidebar.html

@@ -7,6 +7,7 @@
 -->
 
 <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">
@@ -25,31 +26,25 @@
       </div>
       <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
     </div>
-  </div>
+  </div><!-- #profile-wrapper -->
 
   <ul class="nav flex-column">
-  {% assign page_urls = page.url | split: "/" %}
-
-  {% for item in site.data.tabs %}
-    {% assign ref = site.baseurl | append: "/" %}
-
-    {% if item.path %}
-      {% assign ref = ref | append: item.path | append: "/" %}
-      {% if item.url %}
-        {% assign ref = ref | append: item.url | append: "/" %}
-      {% endif %}
-    {% endif %}
-
-    <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>
+    <!-- home -->
+    <li class="nav-item d-flex justify-content-center {% if page.layout == 'home' %}active{% endif %}">
+      <a href="{{ '/' | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
+        <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 d-flex justify-content-center {% if tab.url == page.url %}active{% endif %}">
+      <a href="{{ tab.url | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
+        <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 -->
 
@@ -72,7 +67,7 @@
         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('@'))
+        javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
       {%- elsif entry.type == 'rss' -%}
         {{ "/feed.xml" | relative_url }}
       {%- else -%}
@@ -81,10 +76,10 @@
     {% endcapture %}
 
     {% if url != '' %}
-    <a href="{{ url }}" {% unless entry.noblank %}target="_blank"{% endunless %}>
+    <a href="{{ url }}" aria-label="{{ entry.type }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
       <i class="{{ entry.icon }}"></i>
     </a>
     {% endif %}
   {% endfor %}
 
-</div>
+</div>

_includes/topbar.html

@@ -29,22 +29,23 @@
     <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 }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
     <span id="search-cancel" >Cancel</span>
   </div>
 
-</div>
+</div>

_includes/trending-tags.html

@@ -8,24 +8,33 @@
 
 {% 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 tag_str = tag | first | replace: " ", "-" | append: "::" | append: size %}
+  {% assign tag_list =  tag_list | push: tag_str %}
+{% endfor %}
+
+{% assign size_list = size_list | sort | reverse %}
+
+{% assign tag_list = tag_list | sort_natural %}
 
 {% assign trending_tags = "" | split: "" %}
 
-{% for iter in all_tags %}
-  {% assign count = count | plus: 1 %}
-  {% assign tag = iter | split: "::" | last  %}
-
-  {% assign trending_tags = trending_tags | push: tag %}
-
-  {% if count >= MAX %}
-    {% break %}
-  {% endif %}
+{% 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 %}

_includes/update-list.html

@@ -10,11 +10,13 @@
 
 {% assign all_list = "" | split: "" %}
 
-{% for entry in site.data.updates %}
-  {% capture elem %}
-    {{- entry.lastmod -}}::{{- entry.filename -}}
-  {% endcapture %}
-  {% assign all_list = all_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 all_list = all_list | sort | reverse %}

_layouts/category.html

@@ -10,11 +10,11 @@ layout: page
   <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] %}
+    {% 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>
@@ -22,4 +22,4 @@ layout: page
     </li>
     {% endfor %}
   </ul>
-</div>
+</div>

_layouts/default.html

@@ -36,7 +36,7 @@ layout: compress
     <div id="main-wrapper">
       <div id="main">
 
-        {% include fixlinenos.html content=content %}
+        {% include refactor-content.html content=content %}
 
         {% include footer.html %}
 
@@ -48,16 +48,16 @@ layout: compress
 
     <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 search-loader.html %}
+
+    {% if site.google_analytics.id and jekyll.environment == 'production' %}
       {% include google-analytics.html %}
     {% endif %}
 
-    {% include search-loader.html %}
-
   </body>
 
-</html>
+</html>

_layouts/home.html

@@ -9,7 +9,7 @@ layout: page
 
 
 {% 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 -->
@@ -51,7 +51,7 @@ layout: page
   <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 %}
+      {% if post.pin == true %}
         <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 %}

_layouts/post.html

@@ -31,22 +31,10 @@ layout: default
         </div>
 
         <!-- lastmod -->
-        {%- capture filename -%}
-          {{ page.url | split: "/" | last }}
-        {%- endcapture -%}
-
-        {% for item in site.data.updates %}
-          {% assign encode_filename = item.filename | url_encode %}
-          {% if filename == encode_filename %}
-            {% assign lastmod = item.lastmod %}
-            {% break %}
-          {% endif %}
-        {% endfor %}
-
-        {% if lastmod %}
+        {% if page.last_modified_at %}
         <div>
           Updated
-          {% include timeago.html date=lastmod class="lastmod" tooltip=true %}
+          {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
         </div>
         {% endif %}
 
@@ -61,12 +49,18 @@ layout: default
       </div> <!-- .post-meta -->
 
       <div class="post-content">
+        {%- capture img_placehodler -%}
+          data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
+        {% endcapture%}
+
         {% if page.image %}
-          <img src="{{ page.image }}">
+          <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="post-preview-img">
         {% 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=' }}
+          {% assign replacement = '<img src="' | append: img_placehodler | append: '" data-src=' %}
+          {{ content | replace: '<img src=', replacement }}
         {% else %}
           {{ content }}
         {% endif %}

_layouts/tag.html

@@ -11,10 +11,10 @@ layout: page
   <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] %}
+    {% 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>
@@ -22,4 +22,4 @@ layout: page
     </li>
     {% endfor %}
   </ul>
-</div>
+</div>

_plugins/posts-lastmod-hook.rb

@@ -0,0 +1,11 @@
+# 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

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

@@ -5,22 +5,25 @@ date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
 math: true
+image: /assets/img/sample/devices-mockup.png
 ---
 
-This Jekyll template totally compatible with Markdown syntax. Now, let's take a look for the text and typography in here.
+This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
+
 
 ## Titles
 
-***
+---
+
 # H1
 
 <h2 data-toc-skip>H2</h2>
 
 <h3 data-toc-skip>H3</h3>
 
-#### H4
+<h4>H4</h4>
 
-***
+---
 
 ## Paragraph
 
@@ -36,17 +39,33 @@ Beside the lake, beneath the trees,
 
 Fluttering and dancing in the breeze.
 
+## List
+
+### Ordered list
+
+1. first item
+2. second item
+3. third item
+
+### Unordered list
+
+- item 1
+	- sub item 1
+	- sub item 2
+
+- item 2
+
 ## Block Quote
 
 > This line to shows the Block Quote.
 
 ## Tables
 
-|Company|Contact|Country|
-|:---|:--|---:|
-|Alfreds Futterkiste | Maria Anders | Germany
-|Island Trading | Helen Bennett | UK
-|Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy
+| Company                      | contact          | Country |
+|:-----------------------------|:-----------------|--------:|
+| Alfreds Futterkiste          | Maria Anders     | Germany |
+| Island Trading               | Helen Bennett    | UK      |
+| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |
 
 ## Link
 
@@ -58,10 +77,33 @@ Fluttering and dancing in the breeze.
 Click the hook will locate the footnote[^footnote].
 
 
-## Image
+## Images
 
-![Desktop View]({{ "/assets/img/sample/mockup.png" | relative_url }})
+By default, the image is centered and the image caption can be displayed at the bottom:
 
+![Desktop View](/assets/img/sample/mockup.png)
+_Full screen width and center alignment_
+
+You can change the size of the picture:
+
+![Desktop View](/assets/img/sample/mockup.png){: width="400"}
+_400px image width_
+
+In addition, you can use class `normal` , `left` and `right` to specify the image position (but in these case, the image caption is prohibited), for example:
+
+- Normal position
+  
+  ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
+
+- Float to the left
+
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
+
+- Float to the right
+
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
 
 ## Inline code
 

_posts/2019-08-08-write-a-new-post.md

@@ -8,7 +8,7 @@ tags: [writing]
 
 ## Naming and Path
 
-Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. The `EXTENSION` must be one of `md` and `markdown`. From `v2.4.1`, you can create sub-directories under `_posts/` to categorize posts.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`. From `v2.4.1`, you can create sub-directories under `_posts/` to categorize posts.
 
 ## Front Matter
 
@@ -31,67 +31,13 @@ In order to accurately record the release date of a post, you should not only se
 
 ### Categories and Tags
 
-The `categories` of each post is designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity.
-
-The list of posts belonging to the same _category_/_tag_ is recorded on a separate page. At the same time, the number of these _category_/_tag_ type pages is equal to the number of `categories` / `tags` elements for all posts, which means that the two number must be exactly the same.
-
-For instance, let's say there is a post with front matter:
+The `categories` of each post is designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity. For instance:
 
 ```yaml
 categories: [Animal, Insect]
-tags: bee
+tags: [bee]
 ```
 
-Then we should have two _category_ type pages placed in folder `categories` of root and one _tag_ type page placed in folder `tags`  of root:
-
-```sh
-.
-├── categories
-│   ├── animal.html         # a category type page
-│   └── insect.html
-├── tags
-│   └── bee.html            # a tag type page
-...
-```
-    
-and the content of a _category_ type page is
-
-```yaml
----
-layout: category
-title: CATEGORY_NAME        # e.g. Insect
-category: CATEGORY_NAME     # e.g. Insect
----
-```
-
-the content of a _tag_ type page is
-
-```yaml
----
-layout: tag
-title: TAG_NAME             # e.g. bee
-tag: TAG_NAME               # e.g. bee
----
-```
-
-With the increasing number of posts, the number of categories and tags will increase several times!  If we still manually create these *category*/_tag_ type files, it will obviously be a super time-consuming job, and it is very likely to miss some of them, i.e., when you click on the missing `category` or `tag` link from a post or somewhere, the browser will complain to you "404 Not Found". The good news is we got a lovely script tool `_scripts/sh/create_pages.sh` to finish the boring tasks. Basically we will use it via `run.sh`, `build.sh`, `deploy.sh` or `publish.sh` that placed in `tools/` instead of running it separately. Check out its use case [here]({{ "/posts/getting-started/#deployment" | relative_url }}).
-
-## Last modified date
-
-The last modified date of a post is obtained according to the post's latest git commit date, and the modified date of all posts are designed to be stored in the file `_data/updates.yml`. Then contents of that file may be as follows:
-
-```yaml
--
-  filename: getting-started             # the post filename without date and extension
-  lastmod: 2020-04-13 00:38:56 +0800    # the post last modified date
--
-  ... 
-```
-
-You can choose to create this file manually, But the better approach is to let it be automatically generated by a script tool, and `_scripts/sh/dump_lastmod.sh` was born for this! Similar to the other script (`create_pages.sh`) mentioned above, it is also be called from the other superior tools, so it doesn't have to be used separately.
-
-When some posts have been modified since their published date and also the file `_data/updates.yml` was created correctly, a list with the label **Recent Updates** will be displayed in the right panel of the desktop view, which records the five most recently modified posts.
-
 ## Table of Contents
 
 By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml` and set the value of variable `toc` to `false`. If you want to turn off TOC for specific post, add the following to post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
@@ -102,7 +48,6 @@ toc: false
 ---
 ```
 
-
 ## Comments
 
 Similar to TOC, the [Disqus](https://disqus.com/) comments is loaded by default in each post, and the global switch is defined by variable `comments` in file `_config.yml` . If you want to close the comment for specific post, add the following to the **Front Matter** of the post:
@@ -113,7 +58,6 @@ comments: false
 ---
 ```
 
-
 ## Mathematics
 
 For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
@@ -124,6 +68,15 @@ math: true
 ---
 ```
 
+## Preview Image
+
+If you want to add an image to the top of the post contents, specify the url for the image by:
+
+```yaml
+---
+image: /path/to/image-file
+---
+```
 
 ## Pinned Posts
 
@@ -135,7 +88,6 @@ pin: true
 ---
 ```
 
-
 ## Code Block
 
 Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
@@ -146,7 +98,7 @@ This is a common code snippet, without syntax highlight and line number.
 
 ## Specific Language
 
-Using <code class="highlighter-rouge">```Language</code> you will get code snippets with line Numbers and syntax highlight.
+Using <code class="highlighter-rouge">```language</code> you will get code snippets with line numbers and syntax highlight.
 
 > **Note**: The Jekyll style `{% raw %}{%{% endraw %} highlight LANGUAGE {% raw %}%}{% endraw %}` or `{% raw %}{%{% endraw %} highlight LANGUAGE linenos {% raw %}%}{% endraw %}` are not allowed to be used in this theme !
 
@@ -159,7 +111,7 @@ items:
       quantity:  4
 ```
 
-#### Liquid Codes
+### Liquid Codes
 
 If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
 
@@ -171,7 +123,6 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 ```
 {% endraw %}
 
-
 ## Learn More
 
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).

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

@@ -10,15 +10,15 @@ pin: true
 
 ## Installation
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, and clone the fork to local by:
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, rename the repository to `USERNAME.github.io` (where `USERNAME` is your GitHub username), and then open terminal and clone the fork to local by:
 
 ```terminal
-$ git clone git@github.com:<username>/jekyll-theme-chirpy -b master --single-branch
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
 ```
 
 ### Setting up the local envrionment
 
-If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems` and `Bundler`. 
+If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`. 
 
 Before running or building for the first time, please complete the installation of the Jekyll plugins. Go to the root directory of project and run:
 
@@ -28,25 +28,16 @@ $ bundle install
 
 `bundle` will automatically install all the dependencies specified by `Gemfile`.
 
-What's more, in order to generate some extra files (*categories*, *tags* and *last modified list*), we need to use some tool scripts. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
+### Setting up Docker environment (optional)
 
-* Debian
-
-  ```console
-  $ sudo apt-get install coreutils
-  ```
-
-* macOS
-
-  ```console
-  $ brew install coreutils
-  ```
+If you're a loyal fan of [**Docker**](https://www.docker.com/) or just too lazy to install the packages mentioned in [_Setting up the local envrionment_](#setting-up-the-local-envrionment), please make sure you have **Docker Engine** installed and running, and then get Docker image `jekyll/jekyll` from Docker Hub by the following command:
 
+```console
+$ docker pull jekyll/jekyll
+```
 
 ## Usage
 
-Running [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) requires some extra files, which cannot be generated by Jekyll native commands, so please strictly follow the methods mentioned below to run or deploy your website.
-
 ### Initialization
 
 Go to the root directory of the project and start initialization:
@@ -55,88 +46,86 @@ Go to the root directory of the project and start initialization:
 $ bash tools/init.sh
 ```
 
-> If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+> **Note**: If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
 
 What it does is:
 
 1. Remove some files or directories from your repository:
-    - `.travis.yml`
-    - everything under `.github/`
-    - files under `_posts/`
-    - folder `docs/` 
 
-2. Unless the option `--no-gh` was enabled, setup the GitHub action workflow by renaming `pages-deploy.yml.hook` of directory `.github/workflows/` to `pages-deploy.yml`.
+    - `.travis.yml`
+    - files under `_posts`
+    - folder `docs`
+
+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.
 
 ### Configuration
 
 Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
-* `url`
-* `avatar`
-* `timezone`
-* `theme_mode`
 
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
 
 ### Run Locally
 
 You may want to preview the site contents before publishing, so just run it by:
 
 ```terminal
-$ bash tools/run.sh
+$ bundle exec jekyll s
 ```
 
 Then open a browser and visit to <http://localhost:4000>.
 
-Few days later, you may find that the file changes 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.
+### Run on Docker
+
+Run the site on Docker with the following command:
+
+```terminal
+$ docker run --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
+```
+
 
 ### Deployment
 
 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. For example, `/project`.
 
-Assuming you have already gone through the [initialization](#initialization), you can now choose any of the following methods to deploy your website.
+Assuming you have already gone through the [initialization](#initialization), you can now choose ONE of the following methods to deploy your website.
 
 #### Deploy on GitHub Pages
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts 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 Pages service.
+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 Pages service.
 
-1. Push any commit to `origin/master` to trigger the GitHub Actions workflow. Once the build is complete, a new remote branch called `gh-pages` will appear, which is used to store the built site files.
+1. Push any commit to `origin/master` 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.
 
-2. Unless you prefer to project sites, rename your repository to `<username>.github.io` on GitHub.
+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_:
+    ![gh-pages-sources](/assets/img/sample/gh-pages-sources.png){: width="650" class="normal"}
 
-3. Choose branch `gh-pages` as your GitHub Pages source.
-
-4. Visit your website at the address indicated by GitHub.
+3. Visit your website at the address indicated by GitHub.
 
 #### Deploy on Other Platforms
 
-On platforms other than GitHub, e.g. GitLab, we cannot enjoy the convenience of **GitHub Actions**. However, we have a tool to make up for this shortcoming.
+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.
 
-Commit the changes of your repository first, then run the publish script:
+Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/publish.sh
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-> 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, then push to `origin/master`. Its output is similar to the following log:
+Or, build the site with Docker by:
 
 ```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!
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
 ```
 
-Lastly, enable the pages service according to the instructions of the platform you choose.
-
-#### Deploy on Private Server
-
-In the root of the source project, build your site by:
-
-```console
-$ bash tools/build.sh -d /path/to/site/
-```
-
-The generated site files will be placed in the root of `/path/to/site/`. Now you should upload those files to your web server, such as Nginx.
+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.

_posts/2019-08-11-customize-the-favicon.md

@@ -11,17 +11,29 @@ In [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/), the image fi
 
 With a square image (PNG, JPG or GIF) in hand, open the site [*Favicon & App Icon Generator*](https://www.favicon-generator.org/) and upload your original image.
 
-![upload-image]({{ "/assets/img/sample/upload-image.png" | relative_url }})
+![upload-image](/assets/img/sample/upload-image.png)
 
 Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.
 
-![download-icons]({{ "/assets/img/sample/download-icons.png" | relative_url }})
+![download-icons](/assets/img/sample/download-icons.png){: width="600"}
 
 Download the generated package, unzip and delete the following two from the extracted files:
 
 - browserconfig.xml
 - manifest.json
  
-Now, copy the rest image files (`.PNG` and `.ICO`) to cover the original one in folder `assets/img/favicons/`.
+Now, copy the remaining image files (`.PNG` and `.ICO`) from the extracted `.zip` file to cover the original files in the folder `assets/img/favicons/`.
 
-Lastly, don't forget to rebuild your site so that the icon becomes your custom edition.
+The following table helps you understand the changes to the icon file:
+
+> ✓ means keep, ✗ means delete.
+
+| File(s)             | From Favicon & App Icon Generator | From Chirpy |
+|---------------------|:---------------------------------:|:-----------:|
+| `*.PNG`             | ✓                                 | ✗           |
+| `*.ICO`             | ✓                                 | ✗           |
+| `browserconfig.xml` | ✗                                 | ✓           |
+| `manifest.json`     | ✗                                 | ✓           |
+
+
+The next time you build the site, the icon will be replaced with a customized edition.

_scripts/sh/create_pages.sh

@@ -1,162 +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
-
-  if [[ ! -d _posts ]]; then
-    exit 0
-  fi
-
-  mkdir categories tags
-}
-
-
-create_category() {
-  if [[ ! -z $1 ]]; then
-    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
-  fi
-}
-
-
-create_tag() {
-  if [[ ! -z $1 ]]; then
-    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
-  fi
-}
-
-
-#########################################
-# Create HTML pages for Categories/Tags.
-# Arguments:
-#   $1 - an array string
-#   $2 - type specified option
-#########################################
-create_pages() {
-  if [[ ! -z $1 ]]; then
-    # 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
-  fi
-
-}
-
-
-main() {
-
-  init
-
-  for _file in $(find "_posts" -type f \( -iname \*.md -o -iname \*.markdown \))
-  do
-    local _categories=$(read_categories "$_file")
-    local _tags=$(read_tags "$_file")
-
-    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

_scripts/sh/dump_lastmod.sh

@@ -1,94 +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
-
-  if [[ ! -d $POST_DIR ]]; then
-    exit 0
-  fi
-}
-
-
-_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`"
-
-  if [[ ! -f "$OUTPUT_DIR/$OUTPUT_FILE" ]]; then
-    touch "$OUTPUT_DIR/$OUTPUT_FILE"
-  fi
-
-  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 $(find ${POST_DIR} -type f \( -iname \*.md -o -iname \*.markdown \))
-  do
-    _filename=$(basename $_file | sed 's/[0-9]\([0-9]*-\)//g;s/\..*//' ) # remove date and extension
-
-    if _has_changed "$_file"; then
-      _dump "$_filename" "$_file"
-      ((_count=_count+1))
-    fi
-
-  done
-
-  if [[ $_count > 0 ]]; then
-    echo "[INFO] Success to update lastmod for $_count post(s)."
-  fi
-}
-
-
-main

_scripts/sh/sync_monitor.sh

@@ -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

_tabs/about.md

@@ -1,5 +1,7 @@
 ---
 title: About
+icon: fas fa-info
+order: 4
 
 # The About page
 # v2.0
@@ -8,4 +10,5 @@ title: About
 # MIT License
 ---
 
-> **Note**: Add Markdown syntax content to file `tabs/about.md` and it will show up on this page.
+
+> **Note**: Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page.

_tabs/archives.md

@@ -1,6 +1,8 @@
 ---
 title: Archives
-type: archives
+icon: fas fa-archive
+order: 3
+
 # The Archives of posts.
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
@@ -37,4 +39,4 @@ type: archives
     {% assign last_month = "" %}
   {% endif %}
 {% endfor %}
-</div>
+</div>

_tabs/categories.md

@@ -1,6 +1,8 @@
 ---
 title: Categories
-type: categories
+icon: fas fa-stream
+order: 1
+
 # All the Categories of posts
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
@@ -64,8 +66,9 @@ type: categories
 
       <!-- 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 %}

_tabs/tags.md

@@ -1,6 +1,8 @@
 ---
 title: Tags
-type: tags
+icon: fas fa-tags
+order: 2
+
 # All the Tags of posts.
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy

assets/css/_addon/fonts.scss

@@ -2,7 +2,6 @@
  * 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');
+@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700;900&display=swap');

assets/css/_addon/main.scss

@@ -64,7 +64,7 @@ body {
 
 /*--- sidebar layout ---*/
 
-$tab-count: {{ site.data.tabs | size }};
+$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
 
 $sidebar-display: "sidebar-display";
 
@@ -85,10 +85,9 @@ $sidebar-display: "sidebar-display";
   .site-title {
     text-align: center;
     a {
-      // color: var(--site-title-color);
       font-weight: 900;
       font-size: 1.5rem;
-      letter-spacing: .5px;
+      letter-spacing: 0.5px;
       &:hover {
         color: #fff;
         text-decoration: none;
@@ -102,17 +101,17 @@ $sidebar-display: "sidebar-display";
     color: #828282;
     line-height: 1.2rem;
     word-spacing: 1px;
-    margin: .5rem 1.5rem 2rem 1.5rem;
+    margin: 0.5rem 1.5rem 2rem 1.5rem;
   }
 
   .sidebar-bottom {
-    .icon-border+a { // the icon behide mode-toggle
-      margin-left: .1rem;
+    .icon-border + a { // the icon behide mode-toggle
+      margin-left: 0.1rem;
     }
   }
   .nav-link {
     border-radius: 0;
-    font-size: .95rem;
+    font-size: 0.95rem;
     font-weight: 600;
     letter-spacing: 1px;
   }
@@ -134,8 +133,8 @@ $sidebar-display: "sidebar-display";
     display: -webkit-box;
     display: -ms-flexbox;
 
-    >li:last-child {
-      >a {
+    > li:last-child {
+      > a {
         margin-right: -3px;
         max-width: calc(100% - 3px);
       }
@@ -161,15 +160,15 @@ $sidebar-display: "sidebar-display";
       $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.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 {
+        > li.active:nth-child(#{$i}):last-child::after,
+        > li.nav-item:nth-child(#{$i}):last-child:hover::after {
           @include fix-cursor($top);
         }
       }
@@ -182,10 +181,10 @@ $sidebar-display: "sidebar-display";
     font-size: 1.2rem;
     margin: 2rem 2.5rem 1.6rem;
     a {
-      margin-bottom: .5rem; // icons may have multi lines
+      margin-bottom: 0.5rem; // icons may have multi lines
     }
 
-    a:hover, #mode-toggle-wrapper>i:hover {
+    a:hover, #mode-toggle-wrapper > i:hover {
       color: #fff;
     }
 
@@ -205,13 +204,13 @@ $sidebar-display: "sidebar-display";
       width: 3px;
       height: 3px;
       border-radius: 50%;
-      margin-top: .75rem;
+      margin-top: 0.75rem;
     }
   }
 } // #sidebar
 
 @media (hover: hover) {
-  #sidebar ul>li:last-child::after {
+  #sidebar ul > li:last-child::after {
     -webkit-transition: top .5s ease;
     -moz-transition: top .5s ease;
     -o-transition: top .5s ease;
@@ -229,7 +228,7 @@ $sidebar-display: "sidebar-display";
 }
 
 #avatar {
-  >a {
+  > a {
     display: block;
     width: 6rem;
     height: 6rem;
@@ -242,7 +241,7 @@ $sidebar-display: "sidebar-display";
     transition: border-color 0.35s ease-in-out;
   }
 
-  &:hover>a {
+  &:hover > a {
     border-color: #fff;
   }
 
@@ -296,7 +295,7 @@ $sidebar-display: "sidebar-display";
 #breadcrumb {
   font-size: 1rem;
   color: gray;
-  padding-left: .5rem;
+  padding-left: 0.5rem;
   a:hover {
     @extend %link-hover;
   }
@@ -324,7 +323,7 @@ $sidebar-display: "sidebar-display";
   padding: 0 .5rem;
   i {
     z-index: 2;
-    font-size: .9rem;
+    font-size: 0.9rem;
     color: var(--search-icon-color);
   }
   .fa-times-circle { /* button 'clean up' */
@@ -342,7 +341,7 @@ $sidebar-display: "sidebar-display";
   background: center;
   border: 0;
   border-radius: 0;
-  padding: .18rem .3rem;
+  padding: 0.18rem .3rem;
   color: var(--text-color);
 }
 
@@ -367,12 +366,12 @@ $sidebar-display: "sidebar-display";
     font-size: 1rem;
     background: var(--search-tag-bg);
     border: none;
-    padding: .5rem;
+    padding: 0.5rem;
     margin: 0 1rem 1rem 0;
     &::before {
       content: "#";
       color: var(--text-muted-color);
-      padding-right: .2rem;
+      padding-right: 0.2rem;
     }
   }
 }
@@ -389,17 +388,17 @@ $sidebar-display: "sidebar-display";
       @extend %link-hover;
     }
   }
-  >div {
+  > div {
     max-width: 100%;
     &:not(:last-child) {
       margin-bottom: 1rem;
     }
     i { // icons
       color: #818182;
-      margin-right: .15rem;
+      margin-right: 0.15rem;
       font-size: 80%;
     }
-    >p {
+    > p {
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
@@ -448,7 +447,7 @@ $sidebar-display: "sidebar-display";
   @include pl-pr(0);
 }
 
-#main>div.row:first-child>div {
+#main > div.row:first-child > div {
   &:nth-child(1), &:nth-child(2) {
     margin-top: $topbar-height; /* same as the height of topbar */
   }
@@ -461,11 +460,6 @@ $sidebar-display: "sidebar-display";
 #post-wrapper {
   min-height: calc(100vh - #{$topbar-height}
     - #{$footer-height} - #{$post-extend-min-height})!important;
-  .post-content {
-    a:hover {
-      @extend %link-hover;
-    }
-  }
 }
 
 #topbar-wrapper.row,
@@ -482,13 +476,13 @@ footer {
   font-size: 0.8rem;
   color: #7a7b7d;
   background-color: var(--footer-bg-color);
-  >div.d-flex {
+  > div.d-flex {
     line-height: 1.2rem;
     width: 95%;
     max-width: 1045px;
     border-top: 1px solid var(--main-border-color);
     margin-bottom: 1rem;
-    >div {
+    > div {
       width: 350px;
     }
   }
@@ -522,29 +516,24 @@ footer {
   &.topbar-down {
     top: 6rem;
   }
-  >div {
+  > div {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
     &:not(:last-child) {
       margin-bottom: 4rem;
     }
   }
-  h3 {
-    padding-top: .5rem;
-    padding-bottom: .5rem;
-    margin-top: 0;
-    margin-bottom: 0;
-    letter-spacing: -0.02em;
-    @include label(inherit, 600);
+  span {
+    @include panel-label;
   }
   .post-content {
-    font-size: .9rem;
+    font-size: 0.9rem;
   }
 }
 
 
 #access-tags {
-  >div.post-content>div {
+  > div.post-content > div {
     max-width: 80%;
   }
   .post-tag {
@@ -553,8 +542,8 @@ footer {
     font-size: 0.85rem;
     background: none;
     border: 1px solid var(--btn-border-color);
-    border-radius: .8rem;
-    padding: .3rem .5rem;
+    border-radius: 0.8rem;
+    padding: 0.3rem .5rem;
     margin: 0 .35rem .5rem 0;
     &:hover {
       background-color: #2a408e;
@@ -567,7 +556,7 @@ footer {
 
 #access-lastmod {
   ul {
-    >li {
+    > li {
       height: 1.8rem;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -662,21 +651,25 @@ kbd {
 }
 
 sup {
-  @extend %anchor;
+  z-index: 1;
+  &:target {
+    @extend %anchor;
+    z-index: 0;
+  }
 }
 
 .footnotes ol {
-  margin-top: .5rem;
-  >li {
-    padding-top: .2rem;
+  margin-top: 0.5rem;
+  > li {
+    padding-top: 0.2rem;
     margin-top: -0.2rem;
-    >p {
-      padding-left: .2em;
+    > p {
+      padding-left: 0.2em;
     }
     &:not(:last-child) {
       margin-bottom: -.8rem;
     }
-    &:target>p {
+    &:target > p {
       background-color: var(--footnote-target-bg);
       width: fit-content;
       -webkit-transition: background-color 1.5s ease-in-out;
@@ -693,7 +686,7 @@ sup {
     -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#{&} {
+  @at-root sup:target > a#{&} {
     background-color: var(--footnote-target-bg);
     padding: 0 2px;
   }
@@ -701,11 +694,11 @@ sup {
 
 .reversefootnote {
   @at-root a#{&} {
-    font-size: .6rem;
+    font-size: 0.6rem;
     position: absolute;
     line-height: 1;
-    padding-top: .5em;
-    margin-left: .5em;
+    padding-top: 0.5em;
+    margin-left: 0.5em;
     border-bottom-style: none !important;
   }
 }
@@ -734,12 +727,17 @@ a {
 
 } // a
 
+img {
+  max-width: 100%;
+}
+
 .post {
   h1 {
     margin-top: 3rem;
+    margin-bottom: 1rem;
   }
   em { /* MarkDown italic */
-    padding-right: .2rem;
+    padding-right: 0.2rem;
   }
   a:hover {
     code {
@@ -750,43 +748,41 @@ a {
 
 
 /*--- Begin of Markdown table style ---*/
+div.post-content .table-wrapper {
+  overflow-x: auto;
 
-div.post-content {
-  >table, li>table {
+  > table {
     min-width: 60%;
-    display: block;
     overflow-x: auto;
-    border-collapse: collapse;
     border-spacing: 0;
     margin-bottom: 1.5rem;
+
+    thead {
+      border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+      th {
+        @extend %table-cell;
+      }
+    }
+
+    tbody {
+      tr {
+        &:nth-child(2n) {
+          background-color: var(--tb-even-bg);
+        }
+        &:nth-child(2n + 1) {
+          background-color: var(--tb-odd-bg);
+        }
+        & {
+          border-bottom: 1px solid var(--tb-border-color);
+        }
+        td {
+          @extend %table-cell;
+        }
+      }
+    }
   }
 }
 
-table {
-  thead {
-    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
-    +tbody tr {
-      &:nth-child(2n) {
-        background-color: var(--tb-even-bg);
-      }
-      &:nth-child(2n + 1) {
-        background-color: var(--tb-odd-bg);
-      }
-      & {
-        border-bottom: 1px solid var(--tb-border-color);
-      }
-    }
-    th {
-      @extend %table-cell;
-    }
-  }
-
-  tbody td {
-    @extend %table-cell;
-  }
-
-} // table
-
 
 /*--- post ---*/
 
@@ -814,16 +810,61 @@ table {
   margin-top: 2rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  a {
-    @extend %link-color;
-    @extend %link-underline;
-    &:hover {
-      @extend %link-hover;
+
+  @mixin img($caption: false) {
+    > img:not([style]) {
+      margin: 0.5rem 0;
+
+      &:not(.normal):not(.left):not(.right) {
+        @include align-center;
+
+        @if $caption {
+          @include img-caption;
+        }
+      }
+
+      &.left {
+        float: left;
+        margin: 0.75rem 1rem 1rem 0;
+      }
+
+      &.right {
+        float: right;
+        margin: 0.75rem 0 1rem 1rem;
+      }
+
     }
   }
+
+  @mixin img-caption {
+    + em {
+      display: block;
+      text-align: center;
+      font-style: normal;
+      font-size: 80%;
+      padding: 0;
+      color: #6d6c6c;
+    }
+  }
+
+  a {
+    &:not(.img-hyperlink) {
+      @extend %link-color;
+      @extend %link-underline;
+      &:hover {
+        @extend %link-hover;
+      }
+    }
+    &.img-hyperlink {
+      @include img;
+      @include img-caption;
+    }
+  }
+
   p {
     font-size: 1.08rem;
-  }
+    @include img(true);
+  }// p
 }
 
 .tag:hover {
@@ -835,12 +876,12 @@ table {
   min-width: 2rem;
   text-align: center;
   background: var(--tag-bg);
-  border-radius: .3rem;
+  border-radius: 0.3rem;
   padding: 0 .4rem;
   color: inherit;
   line-height: 1.3rem;
   &:not(:last-child) {
-    margin-right: .2rem;
+    margin-right: 0.2rem;
   }
 
   &:hover {
@@ -901,7 +942,7 @@ table {
 }
 
 .tooltip-inner { /* Overrided BS4 Tooltip */
-  font-size: .7rem;
+  font-size: 0.7rem;
   max-width: 220px;
   text-align: left;
 }
@@ -929,7 +970,7 @@ table {
 
   $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});
   }
 
@@ -942,7 +983,7 @@ table {
     }
   }
 
-  #avatar>a {
+  #avatar > a {
     width: 5rem;
     height: 5rem;
   }
@@ -952,7 +993,7 @@ table {
   }
 
   /* table text in small screens */
-  div>table, p~table {
+  div > table, p ~ table {
     width: 100%;
     table-layout: fixed;
     word-wrap: break-word;
@@ -964,10 +1005,10 @@ table {
 
   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;
@@ -1052,8 +1093,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;
   }
 
@@ -1064,7 +1105,7 @@ table {
   }
 
   #search-wrapper {
-    &.loaded~a {
+    &.loaded ~ a {
       margin-right: 1rem;
     }
     .fa-times-circle {
@@ -1092,11 +1133,11 @@ table {
     justify-content: center!important;
   }
 
-  sup {
+  sup:target {
     padding-top: 3.4rem;
   }
 
-  .footnotes ol>li {
+  .footnotes ol > li {
     padding-top: 3.5rem;
     margin-top: -4.3rem;
     &:first-child {
@@ -1107,7 +1148,7 @@ table {
 
 
 @media all and (min-width: 577px) and (max-width: 1199px) {
-  footer>.d-flex>div {
+  footer>.d-flex > div {
     width: 312px;
   }
 }
@@ -1148,7 +1189,7 @@ table {
     text-align: left;
   }
 
-  footer>div.d-flex {
+  footer > div.d-flex {
     width: 92%;
   }
 
@@ -1185,7 +1226,7 @@ table {
     width: calc(100% - 210px);
   }
 
-  #search-results>div {
+  #search-results > div {
     max-width: 700px;
   }
 
@@ -1223,7 +1264,7 @@ table {
     padding: 0;
   }
 
-  #main>div.row {
+  #main > div.row {
     -webkit-box-pack: center!important;
     -ms-flex-pack: center!important;
     justify-content: center!important;
@@ -1235,7 +1276,7 @@ table {
 
 @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%;
@@ -1266,7 +1307,7 @@ table {
     width: calc(100% - 260px);
   }
 
-  #search-results>div {
+  #search-results > div {
     max-width: 46%;
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1284,7 +1325,7 @@ table {
     font-size: 1.03rem;
   }
 
-  footer>div.d-felx {
+  footer > div.d-felx {
     width: 85%;
   }
 
@@ -1292,16 +1333,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;
     }
   }
@@ -1324,10 +1365,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;
     }
   }
@@ -1360,14 +1401,14 @@ table {
       -webkit-box-pack: normal !important;
       -ms-flex-pack: normal !important;
       justify-content: normal !important;
-      >a {
+      > a {
         width: 6.2rem;
         height: 6.2rem;
       }
     }
 
     .profile-text {
-      margin-left: .5rem;
+      margin-left: 0.5rem;
       /* .d-flex */
       display: -webkit-box!important;
       display: -ms-flexbox!important;
@@ -1378,7 +1419,7 @@ table {
       /* .align-content-center */
       -ms-flex-line-pack: center!important;
       align-content: center!important;
-      >div {
+      > div {
         text-align: left !important;
         width: 100%;
       }
@@ -1396,12 +1437,12 @@ table {
 
     .site-subtitle {
       word-spacing: 0;
-      margin: .3rem 0 0 0;
+      margin: 0.3rem 0 0 0;
     }
 
     ul {
       margin-left: 3%;
-      >li>a {
+      > li > a {
         padding-left: 2.5rem;
         -webkit-box-pack: start!important;
         -ms-flex-pack: start!important;
@@ -1410,14 +1451,14 @@ table {
     }
 
     .nav-link {
-      >span {
+      > span {
         letter-spacing: 3px;
       }
-      >i {
+      > i {
         @include icon-round(1.65rem);
         line-height: 1rem;
-        font-size: .6rem;
-        padding: .5em 0 0 .1em;
+        font-size: 0.6rem;
+        padding: 0.5em 0 0 .1em;
         display: inline-block!important;
       }
     }
@@ -1436,36 +1477,36 @@ table {
         i {
           text-align: center;
           width: 1.25em;
-          padding-top: .44rem;
+          padding-top: 0.44rem;
         }
       }
 
       #mode-toggle-wrapper {
-        font-size: .9rem;
+        font-size: 0.9rem;
         i {
           @include icon-round(2rem);
-          padding-top: .44rem;
+          padding-top: 0.44rem;
           bottom: 0;
         }
       }
 
       .icon-border {
         @include ml-mr(.2rem);
-        margin-top: .85rem;
+        margin-top: 0.85rem;
         +a {
           margin-left: 0;
         }
       }
     } // .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};
     }
   }
@@ -1483,7 +1524,7 @@ table {
     max-width: calc(#{$main-content-max-width} + 20px)
   }
 
-  #main>div.row {
+  #main > div.row {
     padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
   }
 
@@ -1503,7 +1544,7 @@ table {
 }
 
 @media (min-width: 1920px) {
-  #main>div.row {
+  #main > div.row {
     padding-left: 190px;
   }
 

assets/css/_addon/module.scss

@@ -7,7 +7,7 @@
 * MIT Licensed
 */
 
-/*---------- scss placeholder ---------*/
+/* ---------- scss placeholder --------- */
 
 %tag-hover {
   background: var(--tag-hover);
@@ -15,12 +15,12 @@
 }
 
 %table-cell {
-  padding: .35rem .8rem;
+  padding: 0.4rem 1rem;
   font-size: 95%;
 }
 
 %link-hover {
-  color: #d2603a!important;
+  color: #d2603a !important;
   border-bottom: 1px solid #d2603a;
   text-decoration: none;
 }
@@ -54,7 +54,7 @@
   margin-top: -2.5rem;
 }
 
-/*---------- scss mixin ---------*/
+/* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
   text-decoration: none;
@@ -64,7 +64,7 @@
   color: $color;
   transition: color 0.35s ease-in-out;
   user-select: none;
-  margin: 0 .25rem;
+  margin: 0 0.25rem;
 }
 
 @mixin icon-round($diameter) {
@@ -98,3 +98,22 @@
   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%);
+}

assets/css/_addon/syntax.scss

@@ -9,8 +9,8 @@
 @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 +19,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,9 +29,9 @@ html[mode=dark] {
   }
 }
 
-/*-- Codes Snippet --*/
+/* -- Codes Snippet -- */
 
-%highlight-pre-bg {
+%code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
@@ -38,23 +39,38 @@ html[mode=dark] {
   border-radius: 5px;
 }
 
-.highlighter-rouge {
-  background-color: var(--highlight-bg-color);
+%code-snippet-padding {
+  padding: 0.8rem 1rem;
+}
+
+$code-font-size: 0.85rem;
+
+div > pre {
+  @extend %code-snippet-bg;
   @extend %code-snippet-radius;
+  @extend %code-snippet-padding;
+}
+
+.highlighter-rouge {
+  @extend %code-snippet-bg;
+  @extend %code-snippet-radius;
+
   color: var(--highlighter-rouge-color);
   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: 0.8rem 0;
+    padding: 0 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
@@ -66,6 +82,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 +100,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,19 +107,24 @@ code {
   -ms-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
+
   &.highlighter-rouge {
+    font-size: $code-font-size;
     padding: 3px 5px;
-    margin: 0 .15rem;
+    margin: 0 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;
   }
@@ -126,7 +145,7 @@ div {
       display: none;
     }
     td.rouge-code {
-      padding: .8rem 1rem;
+      @extend %code-snippet-padding;
     }
   }
 }

assets/css/_addon/variables.scss

@@ -7,7 +7,7 @@
 * MIT Licensed
 */
 
-/*--- ↓ width and height ----*/
+/* --- ↓ width and height ---- */
 
 $tab-height: 3.3rem;
 $tab-cursor-height: 1.6rem;

assets/css/_colors/dark-syntax.scss

@@ -7,87 +7,82 @@
 */
 
 @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 ------*/
-
+  /* -----  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 */
+
+  pre { color: #818c96; } /* override Bootstrap */
   kbd { background-color: black; }
-}
+
+  /* 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 .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 */
+}

assets/css/_colors/dark-typography.scss

@@ -26,12 +26,10 @@
   --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);
 
@@ -71,7 +69,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 +81,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
-  --footer-link: rgb(171 171 171);
+  --footer-link: rgb(171, 171, 171);
 
   .post-content img {
     filter: brightness(90%);
@@ -98,10 +95,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 +123,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

assets/css/_colors/light-syntax.scss

@@ -8,73 +8,72 @@
 
 @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 */
+  .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 ---*/
+  /* --- 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

assets/css/_colors/light-typography.scss

@@ -7,118 +7,70 @@
 */
 
 @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;
-
   --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-box-shadow: #eaeaea;
 
   /* 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;
 
   /* 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);
-
+  --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: #424242;
-}
+} // light-scheme

assets/css/archives.scss

@@ -33,7 +33,7 @@
       background-image: linear-gradient(
         to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
     }
-    >div {
+    > div {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -111,12 +111,12 @@
   } // #archives .date
 
   ul {
-    >li {
-      >div>a {
+    > li {
+      > div > a {
         /* post title in Archvies */
         margin-left: 2.5rem;
         position: relative;
-        top: .1rem;
+        top: 0.1rem;
       }
       &::after {
         @extend %date-timeline;
@@ -129,10 +129,10 @@
         top: -1.61rem;
       }
     }
-    &:not(:last-child)>li:last-child::after {
+    &:not(:last-child) > li:last-child::after {
       height: 3.4rem;
     }
-    &:last-child>li:last-child::after {
+    &:last-child > li:last-child::after {
       display: none;
     }
   } // #archives ul

assets/css/categories.scss

@@ -22,7 +22,7 @@
     border-left: none;
     border-right: none;
     padding-left: 2rem;
-    >i {
+    > i {
       @extend %category-icon-color;
     }
     &:first-child {
@@ -32,7 +32,7 @@
 
   }
 
-  .card-header>span>i:first-child {
+  .card-header > span > i:first-child {
     @extend %category-icon-color;
   }
 
@@ -50,9 +50,9 @@
   border-radius: 50%;
   text-align: center;
   color: #6c757d!important;
-  >i.fas {
+  > i.fas {
     position: relative;
-    height: .7rem;
+    height: 0.7rem;
     width: 1rem;
     transition: 300ms ease all;
   }
@@ -68,4 +68,4 @@
   -ms-transform: rotate(-90deg); /* IE 9 */
   -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
-}
+}

assets/css/category-tag.scss

@@ -10,9 +10,9 @@
 {% include_relative _addon/main.scss %}
 
 #page-category, #page-tag {
-  ul>li {
+  ul > li {
     line-height: 1.5rem;
-    padding: .6rem 0;
+    padding: 0.6rem 0;
     &::before { // dot
       background: #999;
       width: 5px;
@@ -21,25 +21,25 @@
       display: block;
       content: "";
       position: relative;
-      top: .6rem;
-      margin-right: .5rem;
+      top: 0.6rem;
+      margin-right: 0.5rem;
     }
-    >a { /* post's title */
+    > a { /* post's title */
       font-size: 1.1rem;
       @extend %no-bottom-border;
     }
-    >span:last-child {
+    > span:last-child {
       white-space: nowrap;
     }
     /* 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;
 }
 
@@ -59,15 +59,15 @@ a:hover {
 
 @media all and (max-width: 576px) {
   #page-category, #page-tag {
-    ul>li {
+    ul > li {
       &::before {
         margin: 0 .5rem;
       }
-      >a {
+      > a {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
     }
   }
-}
+}

assets/css/home.scss

@@ -10,7 +10,7 @@
 
 #post-list {
   margin-top: 1rem;
-  padding-right: .5rem;
+  padding-right: 0.5rem;
 
   .post-preview {
     padding-top: 1.5rem;
@@ -21,13 +21,13 @@
       font-size: 1.4rem;
       margin: 0;
       ~i { // pinned icon
-        font-size: .86rem;
+        font-size: 0.86rem;
       }
     }
 
     .post-meta {
       i {
-        font-size: .73rem;
+        font-size: 0.73rem;
         &:not(:first-child) { // post-meta icons on the homepage
           margin-left: 1.5rem;
         }
@@ -35,8 +35,8 @@
     }
 
     .post-content {
-      margin-top: .6rem;
-      margin-bottom: .6rem;
+      margin-top: 0.6rem;
+      margin-bottom: 0.6rem;
       color: var(--post-list-text-color);
       >p {
         /* Make preview shorter on the homepage */
@@ -128,7 +128,7 @@
   }
 
   .pagination {
-    font-size: .85rem;
+    font-size: 0.85rem;
     .page-item .page-link {
       width: 2.2rem;
       height: 2.2rem;
@@ -142,4 +142,4 @@
   #post-list {
     padding-right: 0;
   }
-}
+}

assets/css/post.scss

@@ -27,16 +27,25 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
-.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%);
+.post-content {
+  > ol, > ul, > dl {
+    padding-left: 2rem;
+    li+li {
+      margin-top: 0.3rem;
+    }
+  }
+  li {
+    > ol, > ul, > dl { // sub list
+      padding-left: 2rem;
+    }
+    > p {
+      margin: 1rem 0 0.8rem;
+    }
+  }
+  .post-preview-img {
+    margin-top: 0;
+    margin-bottom: 2.5rem;
+    @include align-center;
   }
 }
 
@@ -80,20 +89,20 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   p {
     font-size: 1.1rem;
     line-height: 1.5rem;
-    margin-top: .3rem;
+    margin-top: 0.3rem;
     white-space: normal;
   }
 
   a, span {
     &::before {
       color: var(--text-muted-color);
-      font-size: .65rem;
+      font-size: 0.65rem;
       text-transform: uppercase;
     }
     &:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
-      left: .5px;
+      left: 0.5px;
       &::before {
         content: $prompt-older
       }
@@ -101,7 +110,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     &:last-child {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
-      right: .5px;
+      right: 0.5px;
       &::before {
         content: $prompt-newer
       }
@@ -123,7 +132,6 @@ $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;
@@ -133,15 +141,15 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   &.topbar-down {
     top: 6rem;
   }
-  >h3 {
-    @include label(inherit, 600);
+  > span {
+    @include panel-label;
   }
 }
 
 #toc li>a {
   line-height: 1rem;
-  padding-top: .5rem;
-  padding-bottom: .5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 
@@ -164,7 +172,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     &: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 20px 35px -4px rgba(0, 0, 0, 0.15);
     }
   }
 
@@ -173,8 +181,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;
@@ -225,7 +233,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     font-size: 1.2rem;
     a {
       &:not(:last-child) {
-        margin-right: .25rem;
+        margin-right: 0.25rem;
       }
       &:hover {
         text-decoration: none;
@@ -235,7 +243,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
       }
     }
     >i {
-      padding-top: .35rem;
+      padding-top: 0.35rem;
       &:hover {
         @extend %btn-share-hovor;
       }
@@ -283,7 +291,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     font-weight: 400;
   }
   span:last-child {
-    font-size: .85rem;
+    font-size: 0.85rem;
   }
 } // .license-wrapper
 
@@ -312,8 +320,8 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
         content: "\2022";
         color: rgba(158, 158, 158, 0.8);
         font-weight: bold;
-        padding-left: .5rem;
-        padding-right: .3rem;
+        padding-left: 0.5rem;
+        padding-right: 0.3rem;
       }
       &.flex-column {
         -webkit-box-orient: horizontal!important;
@@ -333,19 +341,10 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 /* 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;
   }
-
 }

assets/css/tags.scss

@@ -12,7 +12,7 @@
 .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 +22,4 @@
     font-size: 0.7em;
     font-family: 'Oswald', sans-serif;
   }
-}
+}

assets/js/_commons/back-to-top.js

@@ -3,16 +3,16 @@ 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();
+      && $("#sidebar-trigger").css("display") === "none") {
+    $("#back-to-top").fadeIn();
   } else {
-    $('#back-to-top').fadeOut();
+    $("#back-to-top").fadeOut();
   }
 });
 
 $(function() {
-  $('#back-to-top').click(function() {
-    $('body,html').animate({scrollTop: 0}, 800);
+  $("#back-to-top").click(function() {
+    $("body,html").animate({scrollTop: 0}, 800);
     return false;
   });
 });

assets/js/_commons/copy-link.js

@@ -1,20 +1,22 @@
 /*
-* 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.
+ * v2.1
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2020 Cotes Chung
+ * MIT License
+ */
 
 function copyLink(url) {
-  if (!url || 0 === url.length)
-  url = window.location.href;
+  if (!url || 0 === url.length) {
+    url = window.location.href;
+  }
+  
   var $temp = $("<input>");
-
   $("body").append($temp);
   $temp.val(url).select();
   document.execCommand("copy");
   $temp.remove();
 
   alert("Link copied successfully!");
-}
+
+}

assets/js/_commons/search-display.js

@@ -8,18 +8,18 @@
 
 $(function() {
 
-  var btnSbTrigger = $('#sidebar-trigger');
-  var btnSearchTrigger = $('#search-trigger');
-  var btnCancel = $('#search-cancel');
-  var btnClear = $('#search-cleaner');
+  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');
+  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) ---*/
@@ -27,75 +27,76 @@ $(function() {
   var scrollBlocker = (function() {
     var offset = 0;
     return {
-      block: function() {
+      block() {
         offset = $(window).scrollTop();
       },
-      release: function() {
-        $('html,body').scrollTop(offset);
+      release() {
+        $("html,body").scrollTop(offset);
       },
-      getOffset: function() {
+      getOffset() {
         return offset;
       }
-    }
-  })();
+    };
+  }());
 
   var 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;
 
     return {
-      on: function() {
+      on() {
         if (!visable) {
-          resultWrapper.removeClass('unloaded');
-          main.addClass('hidden');
+          resultWrapper.removeClass("unloaded");
+          main.addClass("hidden");
 
           visable = true;
           scrollBlocker.block();
         }
       },
-      off: function() {
+      off() {
         if (visable) {
           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');
+          resultWrapper.addClass("unloaded");
+          btnClear.removeClass("visable");
+          main.removeClass("hidden");
 
-          input.val('');
+          input.val("");
           visable = false;
 
           scrollBlocker.release();
         }
       },
-      isVisable: function() {
+      isVisable() {
         return visable;
       }
-    }
-  })();
+    };
+
+  }());
 
 
   function isMobileView() {
-    return btnCancel.hasClass('loaded');
+    return btnCancel.hasClass("loaded");
   }
 
   btnSearchTrigger.click(function() {
@@ -110,45 +111,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("visable");
         }
 
         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("visable");
   });
 
-});
+});

assets/js/_commons/sidebar.js

@@ -11,24 +11,24 @@ $(function() {
   var sidebarUtil = (function() {
     const ATTR_DISPLAY = "sidebar-display";
     var isExpanded = false;
-    var body = $('body');
+    var 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);
 
 });

assets/js/_commons/topbar-switch.js

@@ -11,7 +11,47 @@ $(function() {
   var didScroll;
   var lastScrollTop = 0;
   var delta = 5;
-  var topbarHeight = $('#topbar-wrapper').outerHeight();
+  var topbarHeight = $("#topbar-wrapper").outerHeight();
+
+  function hasScrolled() {
+    var st = $(this).scrollTop();
+
+    /* Make sure they scroll more than delta */
+    if (Math.abs(lastScrollTop - st) <= delta) {
+      return;
+    }
+
+    if (st > lastScrollTop && st > topbarHeight) {
+      /* Scroll Down */
+      $("#topbar-wrapper").removeClass("topbar-down").addClass("topbar-up");
+
+      if ($("#toc-wrapper").length > 0) {
+        $("#toc-wrapper").removeClass("topbar-down");
+      }
+
+      if ($(".access").length > 0) {
+        $(".access").removeClass("topbar-down");
+      }
+
+      if ($("#search-input").is(":focus")) {
+        $("#search-input").blur(); /* remove focus */
+      }
+
+    } else {
+      /* 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");
+        }
+      }
+    }
+
+    lastScrollTop = st;
+  }
 
   $(window).scroll(function(event) {
     if ($("#topbar-title").is(":hidden")) { /* Not in small screens */
@@ -26,42 +66,4 @@ $(function() {
     }
   }, 250);
 
-  function hasScrolled() {
-    var st = $(this).scrollTop();
-
-    /* Make sure they scroll more than delta */
-    if (Math.abs(lastScrollTop - st) <= delta)
-      return;
-
-    if (st > lastScrollTop && st > topbarHeight) {
-      /* Scroll Down */
-      $('#topbar-wrapper').removeClass('topbar-down').addClass('topbar-up');
-
-      if ( $('#toc-wrapper').length > 0) {
-        $('#toc-wrapper').removeClass('topbar-down');
-      }
-
-      if ( $('.access').length > 0) {
-        $('.access').removeClass('topbar-down');
-      }
-
-      if ($('#search-input').is(':focus')) {
-        $('#search-input').blur(); /* remove focus */
-      }
-
-    } else {
-      /* 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');
-        }
-      }
-    }
-
-    lastScrollTop = st;
-  }
 });

assets/js/_commons/topbar-title.js

@@ -13,9 +13,9 @@ $(function() {
           $("div.post>h1").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();
     }
   }
 
@@ -29,19 +29,19 @@ $(function() {
     }
 
     if ($(this).scrollTop() >= 95) {
-      if ($("#topbar-title").text() != title) {
+      if ($("#topbar-title").text() !== title) {
         $("#topbar-title").text(title);
       }
     } else {
-      if ($("#topbar-title").text() != DEFAULT) {
+      if ($("#topbar-title").text() !== DEFAULT) {
         $("#topbar-title").text(DEFAULT);
       }
     }
   });
 
   /* Click title remove hover effect. */
-  $('#topbar-title').click(function() {
-    $('body,html').animate({scrollTop: 0}, 800);
+  $("#topbar-title").click(function() {
+    $("body,html").animate({scrollTop: 0}, 800);
   });
 
 });

assets/js/_utils/category-collapse.js

@@ -7,26 +7,26 @@
  */
 
 $(function() {
-  var child_prefix = "l_";
-  var parent_prefix = "h_";
+  var childPrefix = "l_";
+  var parentPrefix = "h_";
 
   /* 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");
+    var 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");
+    var 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");
     }
   });
 

assets/js/_utils/img-hyperlink.js

@@ -0,0 +1,16 @@
+/*
+ * Find out the <a> tag contains an image and mark it.
+ *
+ * v2.5.1
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2020 Cotes Chung
+ * MIT Licensed
+ */
+
+$(function() {
+
+  var MARK="img-hyperlink";
+
+  $("a:has(img)").addClass(MARK);
+  
+});

assets/js/_utils/pageviews.js

@@ -11,84 +11,19 @@
  * 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) {
-  var count = 0;
-
-  if (rows !== undefined ) {
-    for (var i = 0; i < rows.length; ++i) {
-      var gaPath = rows[i][0];
-      if (gaPath == path) { /* path format see: site.permalink */
-        count += parseInt(rows[i][1]);
-        break;
-      }
-    }
-  }
-
-  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; /* could be undefined */
-
-  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 getInitStatus = (function () {
   var hasInit = false;
-  return function() {
+  return () => {
     let ret = hasInit;
     if (!hasInit) {
       hasInit = true;
     }
     return ret;
-  }
-})();
+  };
+}());
 
 
-var PvCache = (function() {
+var PvCache = (function () {
   const KEY_PV = "pv";
   const KEY_CREATION = "pv_created_date";
   const KEY_PV_SRC = "pv_source";
@@ -107,26 +42,26 @@ var PvCache = (function() {
   }
 
   return {
-    getData: function() {
+    getData() {
       return JSON.parse(localStorage.getItem(KEY_PV) );
     },
-    saveOriginCache: function(pv) {
+    saveOriginCache(pv) {
       set(KEY_PV, pv);
       set(KEY_PV_SRC, Source.ORIGIN );
       set(KEY_CREATION, new Date().toJSON() );
     },
-    saveProxyCache: function(pv) {
+    saveProxyCache(pv) {
       set(KEY_PV, pv);
       set(KEY_PV_SRC, Source.PROXY );
       set(KEY_CREATION, new Date().toJSON() );
     },
-    isFromOrigin: function() {
-      return get(KEY_PV_SRC) == Source.ORIGIN;
+    isFromOrigin() {
+      return get(KEY_PV_SRC) === Source.ORIGIN;
     },
-    isFromProxy: function() {
-      return get(KEY_PV_SRC) == Source.PROXY;
+    isFromProxy() {
+      return get(KEY_PV_SRC) === Source.PROXY;
     },
-    isExpired: function() {
+    isExpired() {
       if (PvCache.isFromOrigin() ) {
         let date = new Date(get(KEY_CREATION));
         date.setDate(date.getDate() + 1); /* update origin records every day */
@@ -139,30 +74,110 @@ var PvCache = (function() {
       }
       return false;
     },
-    getAllPagevies: function() {
+    getAllPagevies() {
       return PvCache.getData().totalsForAllResults["ga:pageviews"];
     },
-    newerThan: function(pv) {
+    newerThan(pv) {
       return PvCache.getAllPagevies() > pv.totalsForAllResults["ga:pageviews"];
     },
-    inspectKeys: function() {
-      if (localStorage.getItem(KEY_PV) == null
-        || localStorage.getItem(KEY_PV_SRC) == 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) {
+    var numAnim = new CountUp(destId, min, max);
+    if (!numAnim.error) {
+      numAnim.start();
+    } else {
+      console.error(numAnim.error);
+    }
+  }
+}
+
+
+function countPV(path, rows) {
+  var count = 0;
+
+  if (typeof rows !== "undefined" ) {
+    for (var i = 0; i < rows.length; ++i) {
+      var 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) {
+  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, ""), 10);
+    if (count > initCount) {
+      countUp(initCount, count, elem.attr("id"));
+    }
+  }
+}
+
+
+function displayPageviews(data) {
+  if (typeof data === "undefined") {
+    return;
+  }
+
+  var hasInit = getInitStatus();
+  var rows = data.rows; /* could be undefined */
+
+  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);
+  }
+}
+
+
+function fetchProxyPageviews() {
+  $.ajax({
+    type: "GET",
+    url: proxyEndpoint, /* see: /assets/js/_pv-config.js */
+    dataType: "jsonp",
+    jsonpCallback: "displayPageviews",
+    success: (data, textStatus, jqXHR) => {
+      PvCache.saveProxyCache(JSON.stringify(data));
+    },
+    error: (jqXHR, textStatus, errorThrown) => {
+      console.log("Failed to load pageviews from proxy server: " + errorThrown);
+    }
+  });
+}
 
 
 function fetchPageviews(fetchOrigin = true, filterOrigin = false) {
   /* pvCacheEnabled › see: /assets/js/_pv-config.js */
   if (pvCacheEnabled && fetchOrigin) {
-    fetch('/assets/js/data/pageviews.json')
-      .then(response => response.json())
-      .then(data => {
+    fetch("/assets/js/data/pageviews.json")
+      .then((response) => response.json())
+      .then((data) => {
         if (filterOrigin) {
           if (PvCache.newerThan(data)) {
             return;
@@ -180,25 +195,9 @@ function fetchPageviews(fetchOrigin = true, filterOrigin = false) {
 }
 
 
-function fetchProxyPageviews() {
-  $.ajax({
-    type: 'GET',
-    url: proxyEndpoint, /* see: /assets/js/_pv-config.js */
-    dataType: 'jsonp',
-    jsonpCallback: "displayPageviews",
-    success: function(data, textStatus, jqXHR) {
-      PvCache.saveProxyCache(JSON.stringify(data));
-    },
-    error: function(jqXHR, textStatus, errorThrown) {
-      console.log("Failed to load pageviews from proxy server: " + errorThrown);
-    }
-  });
-}
-
-
 $(function() {
 
-  if ($('.pageviews').length > 0) {
+  if ($(".pageviews").length > 0) {
 
     PvCache.inspectKeys();
     let cache = PvCache.getData();

assets/js/_utils/timeago.js

@@ -8,24 +8,28 @@
 
 $(function() {
 
+  var toRefresh = $(".timeago").length;
+
+  var intervalId = void 0;
+
   function timeago(iso, isLastmod) {
     let now = new Date();
     let past = new Date(iso);
 
-    if (past.getFullYear() != now.getFullYear()) {
+    if (past.getFullYear() !== now.getFullYear()) {
       toRefresh -= 1;
       return past.toLocaleString("en-US", {
-         year: 'numeric',
-         month: 'short',
-         day: 'numeric'
+        year: "numeric",
+        month: "short",
+        day: "numeric"
       });
     }
 
-    if (past.getMonth() != now.getMonth()) {
+    if (past.getMonth() !== now.getMonth()) {
       toRefresh -= 1;
       return past.toLocaleString("en-US", {
-         month: 'short',
-         day: 'numeric'
+        month: "short",
+        day: "numeric"
       });
     }
 
@@ -47,37 +51,33 @@ $(function() {
       return minute + " minute" + (minute > 1 ? "s" : "") + " ago";
     }
 
-    return (isLastmod? "just" : "Just") + " now";
+    return (isLastmod ? "just" : "Just") + " now";
   }
 
-
   function updateTimeago() {
     $(".timeago").each(function() {
       if ($(this).children("i").length > 0) {
         var basic = $(this).text();
-        var isLastmod = $(this).hasClass('lastmod');
+        var isLastmod = $(this).hasClass("lastmod");
         var node = $(this).children("i");
-        var date = node.text();   /* ISO Date: 'YYYY-MM-DDTHH:MM:SSZ' */
+        var date = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
         $(this).text(timeago(date, isLastmod));
         $(this).append(node);
       }
     });
 
-    if (toRefresh == 0 && intervalId != undefined) {
-      clearInterval(intervalId);  /* stop interval */
+    if (toRefresh === 0 && typeof intervalId !== "undefined") {
+      clearInterval(intervalId); /* stop interval */
     }
     return toRefresh;
   }
 
-
-  var toRefresh = $(".timeago").length;
-
-  if (toRefresh == 0) {
+  if (toRefresh === 0) {
     return;
   }
 
   if (updateTimeago() > 0) { /* run immediately */
-    var intervalId = setInterval(updateTimeago, 60000); /* run every minute */
+    intervalId = setInterval(updateTimeago, 60000); /* run every minute */
   }
 
-});
+});

assets/js/_utils/toc-filter.js

@@ -7,8 +7,8 @@
  */
 
 $(function() {
-  if ($("#post-wrapper .post-content h1").length == 0
-      && $("#post-wrapper .post-content h2").length == 0) {
+  if ($("#post-wrapper .post-content h1").length === 0
+      && $("#post-wrapper .post-content h2").length === 0) {
     $("#toc-wrapper").addClass("unloaded");
   }
 });

assets/js/_utils/tooltip-loader.js

@@ -6,5 +6,5 @@
  * MIT License
 */
 $(function () {
-  $('[data-toggle="tooltip"]').tooltip();
+  $("[data-toggle=\"tooltip\"]").tooltip();
 });

assets/js/data/cache-list.js

@@ -40,34 +40,6 @@ const include = [
     '{{ item | relative_url }}',
   {% endfor %}
 
-  /* The posts of first Home page and recent update list */
-  {% assign post_list = "" | split: "" %}
-
-  {% for post in site.posts limit: site.paginate %}
-    {% capture post_url %}{{ post.url | relative_url }}{% endcapture %}
-    {% assign post_list = post_list | push: post_url %}
-  {% endfor %}
-
-  {% include update-list.html %}
-
-  {% for item in update_list %}
-    {% assign url = item | split: "::" | last | url_encode | prepend: "/posts/" | append: "/" | relative_url %}
-    {% assign post_list = post_list | push: url %}
-  {% endfor %}
-
-  {% assign post_list = post_list | uniq %}
-
-  {% for url in post_list %}
-    '{{ 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 ---*/
 
   {%- capture icon_url -%}

assets/js/post.min.js

@@ -13,3 +13,5 @@ layout: compress
 {% include_relative lib/_bootstrap-toc.min.js %}
 
 {% include_relative _utils/toc-filter.js %}
+
+{% include_relative _utils/img-hyperlink.js %}

docs/README_zh-CN.md

@@ -1,8 +1,9 @@
 # Chirpy
 
-🌏 [English](../README.md) • 简体中文
+Language: [English](../README.md) | 简体中文
 
 [![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)
 
@@ -14,45 +15,43 @@
 
 ## 目录
 
-* [功能一览](#功能一览)
-* [安装](#安装)
-* [使用](#使用)
-* [参与贡献](#参与贡献)
-* [感谢](#感谢)
-* [赞助](#赞助)
-* [许可证书](#许可证书)
+- [功能一览](#功能一览)
+- [安装](#安装)
+- [使用](#使用)
+- [参与贡献](#参与贡献)
+- [感谢](#感谢)
+- [赞助](#赞助)
+- [许可证书](#许可证书)
 
 ## 功能一览
 
-* 文章置顶
-* 可配置的全局主题颜色
-* 文章最后修改日期
-* 文章目录
-* 自动推荐相关文章
-* 语法高亮
-* 二级目录
-* 数学表达式
-* 搜索
-* Atom 订阅
-* Disqus 评论
-* Google 分析
-* GA 浏览报告（高级功能）
-* SEO 优化
-* 网站性能优化
-
+- 文章置顶
+- 可配置的全局主题颜色
+- 文章最后修改日期
+- 文章目录
+- 自动推荐相关文章
+- 语法高亮
+- 二级目录
+- 数学表达式
+- 搜索
+- Atom 订阅
+- Disqus 评论
+- Google 分析
+- GA 浏览报告（高级功能）
+- SEO 优化
+- 网站性能优化
 
 ## 安装
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork)，然后克隆到本地：
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork)，把仓库改名为 `USERNAME.github.io`（其中 `USERNAME` 是你的 GitHub 用户名）， 然后克隆到本地：
 
 ```terminal
-$ git clone git@github.com:<username>/jekyll-theme-chirpy -b master --single-branch
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
 ```
 
 ### 设置本地环境
 
-如果你想在本地运行或构建, 参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/)安装 `Ruby`， `RubyGems` 和 `Bundler`。
-
+如果你想在本地运行或构建, 参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/)安装 `Ruby`，`RubyGems`，`Jekyll` 和 `Bundler`。
 
 首次运行或构建时, 请先安装 Jekyll plugins。在项目根目录运行：
 
@@ -62,25 +61,17 @@ $ bundle install
 
 `bundle` 会自动安装 `Gemfile` 内指定的依赖插件。
 
-另外，为了生成一些额外的文件（ Post 的分类、标签以及更新时间列表），需要用到一些脚本工具。如果你电脑的操作系统是 Debian 或者 macOS，请确保已经安装了[GNU coreutils](https://www.gnu.org/software/coreutils/)，否则，通过以下方式完成安装：
+### 配置 Docker 镜像（可选）
 
-* Debian
+如果你是 [**Docker**](https://www.docker.com/) 的铁粉，或者不想在本地安装上述 [_设置本地环境_](#设置本地环境) 提到的包, 那么请确保先安装并运行了 **Docker Engine** 然后从 Docker Hub 获取镜像 `jekyll/jekyll`:
 
-  ```console
-  $ sudo apt-get install coreutils
-  ```
-
-* macOS
-
-  ```console
-  $ brew install coreutils
-  ```
+```console
+$ docker pull jekyll/jekyll
+```
 
 
 ## 使用
 
-运行 [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) 需要一些额外的文件, 它们不能通过 Jekyll 原生的命令生成，所以请严格依照下列说明去运行或部署此项目。
-
 ### 初始化
 
 在项目根目录，开始初始化:
@@ -94,36 +85,44 @@ $ bash tools/init.sh
 上述脚本完成了以下工作:
 
 1. 从你的仓库中删除了:
-    - `.travis.yml`
-    - `.github` 下的文件和目录
-    - `_posts` 下的文件
-    - `docs` 目录
 
-2. 配置了 GitHub Actions：把 `.github/workflows/` 的文件 `pages-deploy.yml.hook` 重命名为 `pages-deploy.yml`。
+	- `.travis.yml`
+	- `_posts` 下的文件
+	- `docs` 目录
 
-3. 自动提交一个 Commit 以保存文件的更改。
+2. 如果使用了参数 `--no-gh`，则会怒删 `.github`。否则，将会配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。
+
+3. 自动提交一个 Commit 以保存上述文件的更改。
 
 ### 配置文件
 
 根据个人需要去修改 `_config.yml` 的变量，大部分都有注释介绍用法。典型的几个选项是：
 
-* `url`
-* `avatar`
-* `timezone`
-* `theme_mode`
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
 
 ### 本地运行
 
-使用以下工具可轻松运行:
+发布之前，在本地预览:
 
 ```terminal
-$ bash tools/run.sh
+$ bundle exec jekyll s
 ```
 
 访问本地服务： <http://localhost:4000>
 
-如果你想在本地服务运行后，把修改源文件的更改实时刷新，可使用选项 `-r` (或 `--realtime`)，不过要先安装依赖 [**fswatch**](http://emcrisostomo.github.io/fswatch/) 。
+### 用 Docker 运行
 
+在项目根目录运行命令:
+
+```terminal
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
+```
 
 ### 部署
 
@@ -133,70 +132,56 @@ $ bash tools/run.sh
 
 #### 部署到 GitHub Pages
 
-由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用脚本工具去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
+由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
 
-1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
+1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
 
-2. 除非你是使用 project 站点, 否则重命名你的仓库为 `<username>.github.io`。
+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://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/gh-pages-sources.png)
 
-3. 选择分支 `gh-pages` 作为 GitHub Pages 的源.
-
-4. 按照 GitHub 指示的地址去访问你的网站。
+3. 按照 GitHub 指示的地址去访问你的网站。
 
 #### 部署到其他 Pages 平台
 
-在 GitHub 之外的平台，例如 GitLab，就没法享受 **GitHub Actions** 的便利了。不过先别慌，可以通过工具来弥补这个遗憾。
+在 GitHub 之外的平台，例如 GitLab，就没法享受 **GitHub Actions** 的便利了。因此我们需要在本地构建站点（或者在其他第三方 CI 平台），然后推送站点文件到服务器上。
 
-先把本地仓库的 upstream 改为新平台的仓库地址，推送一发。以后每次更新内容后，提交 commit ，然后运行:
+在项目根目录，运行:
 
 ```console
-$ bash tools/publish.sh
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
->**注**: *最后更新* 列表根据文章的 git 修改记录生成，所以运行前先把 `_posts` 目录的修改提交。
-
-它会自动生成文章的 *最后修改日期* 和 *分类 / 标签* 页面，并自动提交一个 commit 并推送到 `origin/master` 。输出日志类似如下：
+或者通过 Docker 构建:
 
 ```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!
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
 ```
 
-最后，根据平台的说明文档为项目开启 Pages 服务。
-
-#### 部署到私人服务器
-
-在项目更目录，运行:
-
-```console
-$ bash tools/build.sh -d /path/to/site/
-```
-
-生成的静态文件将会在 `/path/to/site/`， 把内部的文件上传到服务器即可。
+生成的静态文件将会在 `_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、分享新点子或者启发了我写出更通俗易懂的文档。
 
-
 ## 赞助
 
 如果您喜欢这个主题或者它对您有帮助，请考虑打赏作者：在 [项目主页](https://github.com/cotes2020/jekyll-theme-chirpy) 点击按钮 <kbd>:heart: Sponsor</kbd> 选择适合的链接即可完成（国内一般选第二个链接，支付宝/微信赞助），您的打赏将会极大地鼓励作者，并帮助作者更好地维护项目！
 
-
 ## 许可证书
 
 本项目开源，基于 [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) 许可。

feed.xml

@@ -30,10 +30,10 @@ layout: compress
     <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 }}" />
@@ -51,13 +51,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;' }}
+{{ source | replace: '&', '&amp;' }}

index.html

@@ -1,12 +1,9 @@
 ---
 layout: home
-breadcrumb:
-  -
-    label: Posts
 
 # Index page
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT License
----
+---

sitemap.xml

@@ -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>

sw.js

@@ -13,8 +13,10 @@ 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;
     }
   }

tools/build.sh

@@ -1,118 +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)
-        local _baseurl="$2"
-        if [[ -z "$_baseurl" ]]; then
-          _baseurl='""'
-        fi
-        CMD+=" -b $_baseurl"
-        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 "$@"

tools/bump-version.sh

@@ -0,0 +1,53 @@
+#!/usr/bin/env bash
+#
+# Bump latest version to file `_data/meta.yml`
+#
+# v2.5.1
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# Published under MIT License
+
+set -eu
+
+META_FILE="_data/meta.yml"
+
+bump() {
+  _version_field="version: $1"
+
+  if [[ ! -f $META_FILE ]]; then
+    echo "name: Chirpy" > $META_FILE
+    echo "$_version_field" >> $META_FILE
+    echo "homepage: https://github.com/cotes2020/jekyll-theme-chirpy/" >> $META_FILE
+  else
+    sed -i "s/^version:.*/$_version_field/g" $META_FILE
+  fi
+
+  if [[ -n $(git status $META_FILE -s) ]]; then
+    git add $META_FILE
+    git commit -m "Bump version to $1"
+  fi
+}
+
+_latest_tag="$(git describe --tags --abbrev=0)"
+
+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
+
+  echo "Bump version to $version"
+  bump "$version"
+
+  echo "Create tag v$version"
+  git tag "v$version"
+
+else
+
+  echo "Error: Illegal version number: '$version'"
+fi

tools/deploy.sh

@@ -7,37 +7,61 @@
 # © 2020 Cotes Chung
 # Published under MIT License
 
-
 set -eu
 
 PAGES_BRANCH="gh-pages"
 
 _no_branch=false
+_backup_dir="$(mktemp -d)"
 
-if [[ -z `git branch -av | grep $PAGES_BRANCH` ]]; then
-  _no_branch=true
-  git checkout -b $PAGES_BRANCH
-else
-  git checkout $PAGES_BRANCH
-fi
+init() {
+  if [[ -z $(git branch -av | grep "$PAGES_BRANCH") ]]; then
+    _no_branch=true
+    git checkout -b "$PAGES_BRANCH"
+  else
+    git checkout "$PAGES_BRANCH"
+  fi
+}
 
-mv _site ../
-mv .git ../
+backup() {
+  mv _site/* "$_backup_dir"
+  mv .git "$_backup_dir"
 
-rm -rf * && rm -rf .[^.] .??*
+  # When adding custom domain from Github website,
+  # the CANME only exist on `gh-pages` branch
+  if [[ -f CNAME ]]; then
+    mv CNAME "$_backup_dir"
+  fi
+}
 
-mv ../_site/* .
-mv ../.git .
+flush() {
+  rm -rf ./*
+  rm -rf .[^.] .??*
 
-git config --global user.name "GitHub Actions"
-git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+  shopt -s dotglob nullglob
+  mv "$_backup_dir"/* .
+}
 
-git update-ref -d HEAD
-git add -A
-git commit -m "[Automation] Site update No.${GITHUB_RUN_NUMBER}"
+deploy() {
+  git config --global user.name "GitHub Actions"
+  git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
 
-if [[ $_no_branch = true ]]; then
-  git push -u origin $PAGES_BRANCH
-else
-  git push -f
-fi
+  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

tools/init.sh

@@ -9,7 +9,6 @@
 
 set -eu
 
-
 ACTIONS_WORKFLOW=pages-deploy.yml
 
 help() {
@@ -25,25 +24,29 @@ help() {
 check_init() {
   local _has_inited=false
 
-  if [[ -d .github ]]; then
-    if [[ -f .github/workflows/$ACTIONS_WORKFLOW
-      && $(find .github/workflows/ -type f -name "*.yml" | wc -l) == 1 ]]; then
-      _has_inited=true
+  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
-  else
-    _has_inited=true
   fi
 
-  if [[ $_has_inited = true ]]; then
+  if $_has_inited; then
     echo "Already initialized."
     exit 0
   fi
 }
 
-
 init_files() {
 
-  if [[ $_no_gh = true ]]; then
+  if $_no_gh; then
     rm -rf .github
   else
     mv .github/workflows/$ACTIONS_WORKFLOW.hook .
@@ -55,34 +58,32 @@ init_files() {
   rm -f .travis.yml
   rm -rf _posts/* docs
 
-  git add -A  && git add .github -f
+  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
+while (($#)); do
   opt="$1"
   case $opt in
     --no-gh)
       _no_gh=true
       shift
       ;;
-    -h|--help)
+    -h | --help)
       help
       exit 0
       ;;
-  *)
-    # unknown option
-    help
-    exit 1
-    ;;
+    *)
+      # unknown option
+      help
+      exit 1
+      ;;
   esac
 done
 

tools/publish.sh

@@ -1,96 +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 following changes first:"
-    echo "$_change"
-    exit 1
-  fi
-}
-
-
-update_files() {
-  bash _scripts/sh/create_pages.sh
-  bash _scripts/sh/dump_lastmod.sh
-}
-
-
-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

tools/pv.sh

@@ -15,12 +15,12 @@
 
 set -eu
 
-WORK_DIR=$(dirname $(dirname $(realpath "$0")))
-URL_FILE=${WORK_DIR}/_config.yml
-PV_CACHE=${WORK_DIR}/assets/js/data/pageviews.json
+WORK_DIR="$(dirname "$(dirname "$(realpath "$0")")")"
+URL_FILE="${WORK_DIR}/_config.yml"
+PV_CACHE="${WORK_DIR}/assets/js/data/pageviews.json"
 
-PROXY_URL=$(grep "proxy_endpoint:" $URL_FILE | sed "s/.*: '//g;s/'.*//")
+PROXY_URL="$(grep "proxy_endpoint:" "$URL_FILE" | sed "s/.*: '//g;s/'.*//")"
 
-wget $PROXY_URL -O $PV_CACHE
+wget "$PROXY_URL" -O "$PV_CACHE"
 
-echo "ls $PV_CACHE"
+echo "ls $PV_CACHE"

tools/run.sh

@@ -1,147 +1,11 @@
-#!/bin/bash
-
-# Run jekyll site at http://127.0.0.1:4000
+#!/usr/bin/env bash
 #
-# Requirement:
-#   Option '-r, --realtime' needs fswatch › http://emcrisostomo.github.io/fswatch/
+# Run jekyll serve and then launch the site
 #
-# v2.0
+# v2.6.1
 # https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# Published under MIT License
+# © 2020 Cotes Chung
+# MIT Licensed
 
-set -eu
+bundle exec jekyll s -l -o
 
-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
-
-
-main

tools/test.sh

@@ -4,7 +4,7 @@
 #
 # Requirement: https://github.com/gjtorikian/html-proofer
 #
-# Usage: bash /path/to/test.sh
+# Usage: bash /path/to/test.sh [indicated path]
 #
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
@@ -14,6 +14,56 @@
 DEST=_site
 URL_IGNORE=cdn.jsdelivr.net
 
+_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 \