Bump version to 2.6.1

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

@@ -2,15 +2,15 @@
 
 I want to thank you for sparing a time to improve this project! Here are some guidelines for contributing：
 
-To ensure that the blog design is not confused, this project does not accept suggestions for design changes, such as color scheme, fonts, typography, etc. If your request is about an enhancement, it is recommended to first submit a `Feature Request` type issue to discuss whether your idea fits the project. 
+To ensure that the blog design is not confused, this project does not accept suggestions for design changes, such as color scheme, fonts, typography, etc. If your request is about an enhancement, it is recommended to first submit a [`Feature Request`](https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?labels=enhancement&template=feature_request.md) issue to discuss whether your idea fits the project. 
 
 Generally, contribute to the project by:
 
-1. Fork this project.
-2. Create a new branch `my-new-feature`(or `fix-a-bug`), then complete the development, commit and push.
-3. Submit a new `Pull Request`.
-
+1. Fork this project on GitHub and clone it locally.
+2. Create a new branch from `master` and give it a descriptive name (e.g., `my-new-feature`, `fix-a-bug`).
+3. After completing the development, commit and push to remote.
+4. Submit a new pull request.
 
 ---
 
-:tada:Your volunteering will make the open source world more beautiful, thanks again!:tada:
+:tada: Your volunteering will make the open source world more beautiful, thanks again! :tada:

.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,7 +4,7 @@ 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]" -->

.github/ISSUE_TEMPLATE/question.md

@@ -4,23 +4,16 @@ 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
+
 <!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+
 - [ ] I have read the [tutorials](https://chirpy.cotes.info/categories/tutorial/) and know the correct effect of the functional design.
 - [ ] There are no similar question on existing issues (including closed ones).
 - [ ] I searched the Internet for related problems, but still couldn't solve it.
 - [ ] My question is based on the latest code of `master` branch.
 
-
-## I don't understand what the ReadMe/Wiki says
-<!-- 
-Point out the parts that are hard for you to understand. 
--->
-
-
-## I have other questions
-<!-- 
-Please describe your question.
--->
+## Description
+<!-- Please describe your question in detial. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,11 +1,10 @@
-# Description
+## Description
 
 <!-- 
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
 -->
 
-Fixes #(issue)
-
+e.g. Fixes #(issue)
 
 ## Type of change
 
@@ -17,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:
-* Jekyl 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
@@ -43,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

@@ -2,7 +2,7 @@ name: 'Continuous Integration'
 on:
   push:
     branches-ignore:
-      - stable
+      - 'production'
     tags-ignore:
       - '*'
     paths-ignore:
@@ -15,7 +15,7 @@ on:
       - 'LICENSE'
   pull_request:
     paths:
-      - "**"
+      - '**'
 
 jobs:
   ci:
@@ -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/issues-cleaner.yml

@@ -12,7 +12,7 @@ jobs:
         DAYS_TO_CLOSE: ${{ 2 }}
       uses: actions/stale@v3
       with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        repo-token: ${{ secrets.GH_PAT }}
         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'

.github/workflows/issues-filter.yml

@@ -0,0 +1,18 @@
+name: "Close Irregular Issues"
+
+on:
+  issues:
+    types: [opened, edited]
+
+jobs:
+  auto_close_issues:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Automatically close issues that don't follow the issue template
+        uses: lucasbento/auto-close-issues@v1.0.2
+        with:
+          github-token: ${{ secrets.GH_PAT }}
+          issue-close-message: "@${issue.user.login}: hello! :wave:\n\nThis issue is being automatically closed because it does not follow the issue template. \n> Follow the template to edit this issue and it will automatically reopen."
+          closed-issues-label: "🙁 Not following issue template"

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

@@ -0,0 +1,71 @@
+name: 'Automatic build'
+on:
+  push:
+    branches:
+      - master
+    paths-ignore:
+      - .gitignore
+      - README.md
+      - LICENSE
+
+jobs:
+  continuous-delivery:
+
+    runs-on: ubuntu-latest
+
+    env:
+      GEMS_PATH: ~/vendor/bundle
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.6.x
+
+      - name: Bundle Caching
+        uses: actions/cache@v2
+        with:
+          path: ${{ env.GEMS_PATH }}
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          restore-keys: |
+            ${{ runner.os }}-gems-
+
+      - name: Bundle Install
+        run: |
+          bundle config path ${{ env.GEMS_PATH }}
+          bundle install --jobs 4 --retry 3
+
+      - name: Check baseurl
+        run: |
+          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: |
+          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: |
+          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: stable
+  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,261 +1,182 @@
 # 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)
-* [Installing](#installing)
-* [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
 
-## Installing
+## Installation
 
-### Prerequisites
+[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:
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of basic environment (`Ruby`, `RubyGems` and `Bundler`). 
-
-To improve the writing experience, we need to use some script tools. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
-
-* Debian
-
-```console
-$ sudo apt-get install coreutils
+```terminal
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
 ```
 
-* macOS
+### Setting up the local envrionment
 
-```console
-$ brew install coreutils
-```
+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`.
 
-
-### Jekyll Plugins
-
-[Fork **Chirpy** from GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/fork), then clone your forked repo to local:
-
-```console
-$ git clone git@github.com:USER/jekyll-theme-chirpy.git -b master
-```
-
-and replace the `USER` above to your GitHub username.
-
-The first time you run or build the project on local machine, perform the installation of Jekyll plugins. Go to the root of repo and run:
+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:
 
 ```terminal
 $ bundle install
 ```
 
-`bundle` will automatically install all the dependent Jekyll Plugins that listed in the `Gemfile`.
+`bundle` will automatically install all the dependencies specified by `Gemfile`.
 
+### Setting up Docker environment (optional)
+
+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
 
+### Initialization
 
-### Directory Structure
+Go to the root directory of the project and start initialization:
 
-The main files and related brief introductions are listed below.
-
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-├── .travis.yml     # remove it
-├── .github         # remove this, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── tools           # script tools
-├── docs
-├── feed.xml
-├── index.html
-├── robots.txt
-└── sitemap.xml
+```console
+$ bash tools/init.sh
 ```
 
+> **Note**: If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
 
-As mentioned above, some files or directories should be removed from your repo:
+What it does is:
 
-- .travis.yml
-- .github
+1. Remove some files or directories from your repository:
 
+    - `.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`
-	
-	Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
 
+### Run Locally
 
-* `avatar`
-    
-    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one(a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as small as possible(may be *<https://tinypng.com/>* will help).
-
-* `timezone`
-
-    To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
-
-* `theme_mode`
-  
-	There are three options for the theme color scheme:
-	
-	- **dual** 	- The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
-
-	- **dark**	- Always show dark mode.
-	- **light**	- Always show light mode.
-
-
-###  Run Locally
-
-You may want to preview the site content before publishing, so just run the script tool:
+You may want to preview the site contents before publishing, so just run it by:
 
 ```terminal
-$ bash tools/run.sh
+$ bundle exec jekyll s
 ```
 
-Open a modern browser and visit at <http://localhost:4000>.
+Then open a browser and visit to <http://localhost:4000>.
 
-Few days later, you may find that the file modification(e.g. edits to a post) does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine. Type `-h` for more information.
+### Run on Docker
 
-###  Deploying to GitHub Pages
-
-Before the deployment begins, checkout the file `_config.yml` and make sure that the `url` has been configured. What's more, if you prefer the [Project site on GitHub](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and also use the default domain `<username>.github.io`, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
-
-#### Option 1: Built by GitHub Pages
-
-By deploying the site in this way, you're allowed to push the source code directly to the remote.
-
-> **Note**: If you want to use any third-party Jekyll plugins that not in [this list](https://pages.github.com/versions/), stop reading the current approach and go to [*Option 2: Build locally*](#option-2-build-locally).
-
-**1**. Rename the repository to:
-
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
-
-**2**. Commit the changes of the repo first, then run the publish script:
-
-```console
-$ bash tools/publish.sh
-```
-
-> Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
-
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit, and then push to `origin/master`. Its output is similar to the following log:
+Run the site on Docker with the following command:
 
 ```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 \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
 ```
 
-**3**. Go to GitHub website and enable GitHub Pages service for the repo.
+### Deployment
 
-**4**. Check it out:
+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`.
 
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
+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
 
-#### Option 2: Build Locally
+For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the Pages service.
 
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts won't work. If you want to use any another plugins that not in the [whitelist](https://pages.github.com/versions/), **you have to generate the site locally rather than on GitHub Pages**.
+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.
 
-**1**. Browse to GitHub website, create a brand new repo named: 
+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)
 
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
+3. Visit your website at the address indicated by GitHub.
 
-and clone it.
+#### Deploy on Other Platforms
 
-**2**. In the root of the source project, build your site by:
+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.
+
+Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/build.sh -d /path/to/local/project/
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-The generated static files will be placed in the root of `/path/to/local/project`. Commit and push the changes to the `master` branch on GitHub.
+Or, build the site with Docker by:
 
-**3**. Go to GitHub website and enable Pages service for the new repository.
-
-**4**. Visit at:
-
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
-
-#### Finishing work
-
-No matter which way you choose to deploy the website on GitHub, please enforce the `HTTPS` for it. See official docs: [Securing your GitHub Pages site with HTTPS](https://help.github.com/en/github/working-with-github-pages/securing-your-github-pages-site-with-https).
+```terminal
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
+```
 
+Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.
 
 ### Documentation
 
-For more details and the better reading experience, please check out the [tutorial in demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
+For more details and the better reading experience, please check out the [tutorials on demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
 
 ## Contributing
 
 The old saying, "Two heads are better than one." Consequently, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
 
-
 ## Credits
 
-This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools(their copyright information can be found in the relevant files).
+This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files).
 
-:tada:Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
+:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
 
+## Supporting
 
-## Support
-
-If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart:Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
-
+If you 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/date_format.yml

@@ -6,4 +6,6 @@
 
 
 tooltip: "%a, %b %e, %Y, %l:%M %p %z"
-post: "%b %e, %Y"
+post:
+  long: "%b %e, %Y"
+  short: "%b %e"

_data/meta.yml

@@ -0,0 +1,3 @@
+name: Chirpy
+version: 2.6.1
+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/disqus.html

@@ -7,8 +7,10 @@
   MIT License
 -->
 
-<div id="disqus" class="pt-2 pb-4">
-  <p class="font-italic text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
+<div id="disqus" class="pt-2 pb-2">
+  <p class="font-italic text-center text-muted small">
+    Comments powered by <a href="https://disqus.com/">Disqus</a>.
+  </p>
 </div>
 
 <script src="{{ site.baseurl }}/assets/js/lib/jquery.disqusloader.min.js"></script>

_includes/fixlinenos.html

@@ -1,9 +0,0 @@
-<!--
-  Fixed kramdown code highlight rendering:
-  https://github.com/penibelst/jekyll-compress-html/issues/101
-  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
--->
-{% if _content contains '<pre class="highlight">' %}
-  {% assign _content = _content | replace: '<pre class="highlight"><code', '<code' %}
-  {% assign _content = _content | replace: '</code></pre>', '</code>' %}
-{% endif %}

_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,42 +8,34 @@
 
 {% if page.layout == 'home' %}
 
-  {% if site.google_analytics.pv.cache and site.google_analytics.pv.enabled %}
-    <script src="{{ '/assets/js/data/pv-cache.js' | relative_url }}"></script>
-  {% endif %}
-
-  <script src="{{ '/assets/js/home.min.js' | relative_url }}" async></script>
+  <script async src="{{ '/assets/js/home.min.js' | relative_url }}"></script>
 
 {% elsif page.layout == 'post' %}
 
-  {% if site.google_analytics.pv.cache and site.google_analytics.pv.enabled %}
-    <script src="{{ '/assets/js/data/pv-cache.js' | relative_url }}"></script>
-  {% endif %}
-
-  <script src="{{ '/assets/js/post.min.js' | relative_url }}" async></script>
+  <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/no-linenos.html

@@ -1,12 +1,14 @@
 {% comment %}
-  Remove line numbers from code snippets.
+  Remove the line number of the code snippet.
   v2.2
   https://github.com/cotes2020/jekyll-theme-chirpy
   © 2020 Cotes Chung
   Published under the MIT License
 {% endcomment %}
 
-{% if _content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
-  {% assign _content = _content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
-  {% assign _content = _content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
+{% assign content = include.content %}
+
+{% if content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
+  {% assign content = content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
+  {% assign content = content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
 {% endif %}

_includes/panel.html

@@ -10,54 +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 | prepend: "/posts/" | append: "/" %}
-        {% assign post = site.posts | where: "url", post_url | first %}
-
-        {% if post %}
-          {% assign url = post.url | relative_url %}
-
-          <li><a href="{{ url }}">{{ post.title }}</a></li>
-
-          {% assign sum = sum | plus: 1 %}
-          {% if sum >= MAX_SIZE %} {% break %} {% endif %}
-
-        {% endif %}
-
+        {% assign index = item | split: "::" | last | plus: 0 %}
+        {% assign post = site.posts[index] %}
+        {% assign url = post.url | relative_url %}
+        <li><a href="{{ url }}">{{ post.title }}</a></li>
       {% endfor %}
 
       </ul>
-    </div><!-- #access-lastmod -->
-
-    {% endif %}
-
-  {% 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 %}
@@ -65,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/related-posts.html

@@ -84,7 +84,7 @@
 
 
 {% if index_list.size > 0 %}
-  <div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
+  <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
     <h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
@@ -93,15 +93,13 @@
       <div class="card">
         <a href="{{ post.url | relative_url }}">
           <div class="card-body">
-            <span class="timeago small">
-                {{ post.date | date: site.data.date_format.post }}
-                <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-            </span>
+            {% include timeago.html date=post.date class="small" %}
             <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
             <div class="text-muted small">
-              {% assign content = post.content %}
-              {% include no-linenos.html %}
-              <p>{{ content | markdownify | strip_html | truncate: 200 | replace: '&', '&amp;' }}</p>
+              <p>
+                {% include no-linenos.html content=post.content %}
+                {{ content | markdownify | strip_html | truncate: 200 }}
+              </p>
             </div>
           </div>
         </a>

_includes/search-results.html

@@ -9,11 +9,14 @@
   <div class="col-12 col-xl-11 post-content">
     <div id="search-hints">
       <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags }}</h4>
+
       {% include trending-tags.html %}
+
       {% 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 %}
+      {% endfor %}
+
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

_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/timeago.html

@@ -0,0 +1,27 @@
+<!--
+  Date format snippet
+
+  v2.4.1
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+-->
+<span class="timeago {% if include.class %}{{ include.class }}{% endif %}"
+  {% if include.tooltip %}
+    data-toggle="tooltip"
+    data-placement="bottom"
+    title="{{ include.date | date: site.data.date_format.tooltip }}"
+  {% endif %}>
+
+  {% assign this_year = site.time | date: "%Y" %}
+  {% assign post_year = include.date | date: "%Y" %}
+
+  {% if post_year == this_year %}
+    {{ include.date | date: site.data.date_format.post.short }}
+  {% else %}
+    {{ include.date | date: site.data.date_format.post.long }}
+  {% endif %}
+
+  <i class="unloaded">{{ include.date | date_to_xmlschema }}</i>
+
+</span>

_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.collection == 'tabs' %}
+        {{- 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

@@ -7,15 +7,22 @@
 {% endcomment %}
 
 {% assign MAX_SIZE = 5 %}
-{% assign sum = 0 %}
-{% assign update_list = "" | split: "" %}
 
-{% for entry in site.data.updates %}
-  {% capture elem %}
-    {{- entry.lastmod -}}::{{- entry.filename -}}
-  {% endcapture %}
+{% assign all_list = "" | split: "" %}
 
-  {% assign update_list = update_list | push: elem %}
+{% for post in site.posts %}
+  {% if post.last_modified_at %}
+    {% capture elem %}
+      {{- post.last_modified_at | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}}
+    {% endcapture %}
+    {% assign all_list = all_list | push: elem %}
+  {% endif %}
 {% endfor %}
 
-{% assign update_list = update_list | sort | reverse %}
+{% assign all_list = all_list | sort | reverse %}
+
+{% assign update_list = "" | split: "" %}
+
+{% for entry in all_list limit:MAX_SIZE %}
+  {% assign update_list = update_list | push: entry %}
+{% endfor %}

_layouts/category.html

@@ -10,16 +10,16 @@ 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>
-      <span class="text-muted small">{{ post.date | date: site.data.date_format.post }}</span>
+      <span class="text-muted small">{{ post.date | date: site.data.date_format.post.long }}</span>
     </li>
     {% endfor %}
   </ul>
-</div>
+</div>

_layouts/default.html

@@ -36,31 +36,28 @@ layout: compress
     <div id="main-wrapper">
       <div id="main">
 
-        {% capture _content %}
-          {{ content }}
-        {% endcapture %}
-
-        {% include fixlinenos.html %}
-        {{ _content }}
+        {% include refactor-content.html content=content %}
 
         {% include footer.html %}
+
       </div>
+
       {% include search-results.html %}
 
     </div> <!-- #main-wrapper -->
 
     <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,27 +51,23 @@ 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 %}
     </div>
     <div class="post-content">
       <p>
-      {% assign _content = post.content %}
-      {% include no-linenos.html %}
-      {{ _content | markdownify | strip_html | truncate: 200 }}
+        {% include no-linenos.html content=post.content %}
+        {{ content | markdownify | strip_html | truncate: 200 }}
       </p>
     </div>
 
     <div class="post-meta text-muted">
       <!-- posted date -->
       <i class="far fa-clock fa-fw"></i>
-      <span class="timeago" data-toggle="tooltip" data-placement="bottom"
-        title="{{ post.date | date: site.data.date_format.tooltip }}">
-      {{ post.date | date: site.data.date_format.post }}
-      <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-      </span>
+      {% include timeago.html date=post.date tooltip=true %}
+
       <!-- page views -->
       {% if site.google_analytics.pv.enabled %}
       <i class="far fa-eye fa-fw"></i>

_layouts/post.html

@@ -19,37 +19,22 @@ layout: default
         <!-- Published date and author -->
         <div>
           Posted
-          <span class="timeago" data-toggle="tooltip" data-placement="bottom"
-           title="{{ page.date | date: site.data.date_format.tooltip }}">
-            {{ page.date | date: site.data.date_format.post }}
-            <i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
-          </span>
+          {% include timeago.html date=page.date tooltip=true %}
           by
           <span class="author">
           {% if page.author %}
             {{ page.author }}
-          {% else%}
+          {% else %}
             {{ site.author }}
           {% endif %}
           </span>
         </div>
 
         <!-- lastmod -->
-        {%- capture filename -%}
-          {{ page.url | split: "/" | last }}
-        {%- endcapture -%}
-
-        {% assign record = site.data.updates | where: "filename", filename | first %}
-
-        {% if record %}
+        {% if page.last_modified_at %}
         <div>
           Updated
-          <span class="timeago lastmod"
-            data-toggle="tooltip" data-placement="bottom"
-             title="{{ record.lastmod | date: site.data.date_format.tooltip }}">
-            {{ record.lastmod | date: site.data.date_format.post }}
-            <i class="unloaded">{{ record.lastmod | date_to_xmlschema}}</i>
-          </span>
+          {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
         </div>
         {% endif %}
 
@@ -64,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 %}
@@ -102,7 +93,7 @@ layout: default
         {% endif %}
 
         <div class="post-tail-bottom
-          d-flex justify-content-between align-items-center pt-5 pb-2">
+          d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
           {% if site.data.rights.license %}
           <div class="license-wrapper">
             This post is licensed under
@@ -119,6 +110,7 @@ layout: default
 
     </div> <!-- .post -->
 
+
   </div> <!-- #post-wrapper -->
 
   {% include panel.html %}
@@ -126,21 +118,20 @@ layout: default
 </div> <!-- .row -->
 
 <div class="row">
-  <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
+  <div class="col-12 col-lg-11 col-xl-8">
+    <div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
 
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    {% include related-posts.html %}
 
-      {% include post-nav.html %}
+    {% include post-nav.html %}
 
-      {% if site.disqus.comments and page.comments %}
-        {% include disqus.html %}
-      {% endif %}
+    {% if site.disqus.comments and page.comments %}
+      {% include disqus.html %}
+    {% endif %}
 
-      {% include related-posts.html %}
+    </div> <!-- #post-extend-wrapper -->
 
-    </div> <!-- .pl-1 pr-1 -->
-
-  </div> <!-- #post-extend-wrapper -->
+  </div> <!-- .col-* -->
 
 </div> <!-- .row -->
 

_layouts/tag.html

@@ -11,15 +11,15 @@ 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>
-      <span class="text-muted small">{{ post.date | date: site.data.date_format.post }}</span>
+      <span class="text-muted small">{{ post.date | date: site.data.date_format.post.long }}</span>
     </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 with the format `YYYY-MM-DD-title.md` then put it into `_post` of the root directory.
+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,69 +31,16 @@ 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 `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:
 
-The list of posts belonging to the same category/tag is recorded on a separate page. The number of such *category*/*tag* type pages is equal to the number of `categories`/`tags` for all posts, they must match perfectly. 
-
-let's say there is a post with front matter:
 ```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:
-
-```terminal
-jekyll-theme-chirpy
-├── categories
-│   ├── animal.html
-│   └── insect.html
-├── tags
-│   └── bee.html
-...
-```
-    
-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, it will complain to you '404'). The good news is that we got a lovely script tool `_scripts/sh/create_pages.sh` to finish the boring task. Basically we will use it via `tools/publish.sh` instead of running it separately. Check out its use case [here]({{ "/posts/getting-started/#option-1-built-by-github-pages" | relative_url }}).
-
-## Last modified date
-    
-The last modified date of a post is obtained according to its latest git commit date, and all the modified date of the posts should be stored in `_data/updates.yml`. For example:
-
-```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 as you may notice, the better approach is to let it be automatically generated by a tool script. And `_scripts/sh/dump_lastmod.sh` was born for this! Similar to the another script `_scripts/sh/create_pages.sh` mentioned above, it is also be called from `tools/publish.sh`, 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 articles.
-
 ## 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 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/):
+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/):
 
 ```yaml
 ---
@@ -101,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:
@@ -112,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:
@@ -123,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
 
@@ -134,7 +88,6 @@ pin: true
 ---
 ```
 
-
 ## Code Block
 
 Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
@@ -145,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 !
 
@@ -158,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%}` .
 
@@ -170,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

@@ -7,194 +7,125 @@ tags: [getting started]
 pin: true
 ---
 
-## Prerequisites
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of basic environment (`Ruby`, `RubyGems` and `Bundler`). 
+## Installation
 
-To improve the writing experience, we need to use some script tools. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
+[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:
 
-* Debian
-
-```console
-$ sudo apt-get install coreutils
+```terminal
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
 ```
 
-* macOS
+### Setting up the local envrionment
 
-```console
-$ brew install coreutils
-```
+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`. 
 
-
-## Jekyll Plugins
-
-[Fork **Chirpy** from GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/fork), then clone your forked repo to local:
-
-```console
-$ git clone git@github.com:USER/jekyll-theme-chirpy.git -b master
-```
-
-and replace the `USER` above to your GitHub username.
-
-The first time you run or build the project on local machine, perform the installation of Jekyll plugins. Go to the root of repo and run:
+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:
 
 ```terminal
 $ bundle install
 ```
 
-`bundle` will automatically install all the dependent Jekyll Plugins that listed in the `Gemfile`.
+`bundle` will automatically install all the dependencies specified by `Gemfile`.
 
+### Setting up Docker environment (optional)
 
-## Directory Structure
+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:
 
-The main files and related brief introductions are listed below.
-
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-├── .travis.yml     # remove it
-├── .github         # remove this, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── tools           # script tools
-├── feed.xml
-├── index.html
-├── robots.txt
-└── sitemap.xml
+```console
+$ docker pull jekyll/jekyll
 ```
 
+## Usage
 
-As mentioned above, some files or directories should be removed from your repo:
+### Initialization
 
-- .travis.yml
-- .github
+Go to the root directory of the project and start initialization:
 
+```console
+$ bash tools/init.sh
+```
 
-## Configuration
+> **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`
+    - 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`
-    
-    Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
 
+### Run Locally
 
-* `avatar`
-    
-    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one (a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as small as possible (may be *<https://tinypng.com/>* will help).
-
-* `timezone`
-
-    To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
-
-* `theme_mode`
-  
-    There are three options for the theme color scheme:
-    
-    - **dual**  - The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
-
-    - **dark**  - Always show dark mode.
-    - **light** - Always show light mode.
-
-
-##  Run Locally
-
-You may want to preview the site content before publishing, so just run the script tool:
+You may want to preview the site contents before publishing, so just run it by:
 
 ```terminal
-$ bash tools/run.sh
+$ bundle exec jekyll s
 ```
 
-Open a browser and visit <http://localhost:4000>.
+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
 
-##  Deploying to GitHub Pages
-
-Before the deployment begins, checkout the file `_config.yml` and make sure that the `url` has been configured. What's more, if you prefer the [Project site on GitHub](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and also use the default domain `<username>.github.io`, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
-
-
-### Option 1: Built by GitHub Pages
-
-By deploying the site in this way, you're allowed to push the source code directly to the remote.
-
-> **Note**: If you want to use any third-party Jekyll plugins that not in [this list](https://pages.github.com/versions/), stop reading the current approach and go to [*Option 2: Build locally*](#option-2-build-locally).
-
-**1**. Rename the repository to:
-
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
-
-**2**. Commit the changes of the repo first, then run the publish script:
-
-```console
-$ bash tools/publish.sh
-```
-
-> Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
-
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit, and then push to `origin/master`. Its output is similar to the following log:
+Run the site on Docker with the following command:
 
 ```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 --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
 ```
 
-**3**. Go to GitHub website and enable GitHub Pages service for the repo.
 
-**4**. Check it out:
+### Deployment
 
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
+Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [_project site_](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
 
+Assuming you have already gone through the [initialization](#initialization), you can now choose ONE of the following methods to deploy your website.
 
-### Option 2: Build Locally
+#### Deploy on GitHub Pages
 
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts won't work. If you want to use any another plugins that not in the [whitelist](https://pages.github.com/versions/), **you have to generate the site locally rather than on GitHub Pages**.
+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**. Browse to GitHub website, create a brand new repo named: 
+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.
 
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
+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"}
 
-and clone it.
+3. Visit your website at the address indicated by GitHub.
 
-**2**. In the root of the source project, build your site by:
+#### Deploy on Other Platforms
+
+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.
+
+Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/build.sh -d /path/to/local/project/
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-The generated static files will be placed in the root of `/path/to/local/project`. Commit and push the changes to the `master` branch on GitHub.
+Or, build the site with Docker by:
 
-**3**. Go to GitHub website and enable Pages service for the new repository.
+```terminal
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
+```
 
-**4**. Visit at:
-
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
-
-### Finishing work
-
-No matter which way you choose to deploy the website on GitHub, please enforce the `HTTPS` for it. See official docs: [Securing your GitHub Pages site with HTTPS](https://help.github.com/en/github/working-with-github-pages/securing-your-github-pages-site-with-https).
+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,154 +0,0 @@
-#!/usr/local/bin/bash
-#
-# Create HTML pages for Categories and Tags in posts.
-#
-# Usage:
-#     Call from the '_posts' sibling directory.
-#
-# v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-TYPE_CATEGORY=0
-TYPE_TAG=1
-
-category_count=0
-tag_count=0
-
-
-_read_yaml() {
-  local _endline=$(grep -n "\-\-\-" $1 | cut -d: -f 1 | sed -n '2p')
-  head -$_endline $1
-}
-
-
-read_categories() {
-  local _yaml=$(_read_yaml $1)
-  local _categories=$(echo "$_yaml" | grep "^categories:")
-  local _category=$(echo "$_yaml" | grep "^category:")
-
-  if [[ ! -z "$_categories" ]]; then
-    echo "$_categories" | sed "s/categories: *//;s/\[//;s/\]//;s/, */,/g;s/\"//g;s/'//g"
-  elif [[ ! -z "_category" ]]; then
-    echo "$_category" | sed "s/category: *//;s/\[//;s/\]//;s/, */,/g;s/\"//g;s/'//g"
-  fi
-}
-
-
-read_tags() {
-  local _yaml=$(_read_yaml $1)
-  echo "$_yaml" | grep "^tags:" | sed "s/tags: *//;s/\[//;s/\]//;s/, */,/g;s/\"//g;s/'//g"
-}
-
-
-init() {
-  if [[ -d categories ]]; then
-    rm -rf categories
-  fi
-
-  if [[ -d tags ]]; then
-    rm -rf tags
-  fi
-
-  mkdir categories tags
-}
-
-
-create_category() {
-  local _name=$1
-  local _filepath="categories/$(echo $_name | sed 's/ /-/g' | awk '{print tolower($0)}').html"
-
-  if [[ ! -f $_filepath ]]; then
-    echo "---" > $_filepath
-    echo "layout: category" >> $_filepath
-    echo "title: $_name" >> $_filepath
-    echo "category: $_name" >> $_filepath
-    echo "---" >> $_filepath
-
-    ((category_count=category_count+1))
-  fi
-}
-
-
-create_tag() {
-  local _name=$1
-  local _filepath="tags/$( echo $_name | sed "s/ /-/g;s/'//g" | awk '{print tolower($0)}' ).html"
-
-  if [[ ! -f $_filepath ]]; then
-
-    echo "---" > $_filepath
-    echo "layout: tag" >> $_filepath
-    echo "title: $_name" >> $_filepath
-    echo "tag: $_name" >> $_filepath
-    echo "---" >> $_filepath
-
-    ((tag_count=tag_count+1))
-  fi
-}
-
-
-#########################################
-# Create HTML pages for Categories/Tags.
-# Arguments:
-#   $1 - an array string
-#   $2 - type specified option
-#########################################
-create_pages() {
-  if [[ $1 == '' ]]; then
-    exit 0
-  fi
-
-  # split string to array
-  IFS_BAK=$IFS
-  IFS=','
-  local _string=$1
-
-  case $2 in
-
-    $TYPE_CATEGORY)
-      for i in ${_string#,}; do
-        create_category $i
-      done
-      ;;
-
-    $TYPE_TAG)
-      for i in ${_string#,}; do
-        create_tag $i
-      done
-      ;;
-
-    *)
-      ;;
-
-    esac
-
-    IFS=$IFS_BAK
-  }
-
-
-main() {
-  init
-
-  for _file in $(ls "_posts")
-  do
-    local _path="_posts/$_file"
-    local _categories=$(read_categories "$_path")
-    local _tags=$(read_tags "$_path")
-
-    create_pages "$_categories" $TYPE_CATEGORY
-    create_pages "$_tags" $TYPE_TAG
-  done
-
-  if [[ $category_count -gt 0 ]]; then
-    echo "[INFO] Succeed! $category_count category-pages created."
-  fi
-
-  if [[ $tag_count -gt 0 ]]; then
-    echo "[INFO] Succeed! $tag_count tag-pages created."
-  fi
-}
-
-main

_scripts/sh/dump_lastmod.sh

@@ -1,89 +0,0 @@
-#!/bin/bash
-#
-# Find out the posts that have been modified and record
-# its lastmod information to file '_data/updates.yml'
-#
-# Usage:
-#     Call from the '_posts' sibling directory.
-#
-# v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-POST_DIR=_posts
-OUTPUT_DIR=_data
-OUTPUT_FILE=updates.yml
-
-
-_init() {
-  if [[ ! -d "$OUTPUT_DIR" ]]; then
-    mkdir "$OUTPUT_DIR"
-  fi
-
-  if [[ -f "$OUTPUT_DIR/$OUTPUT_FILE" ]]; then
-    rm -f "$OUTPUT_DIR/$OUTPUT_FILE"
-  fi
-
-  touch "$OUTPUT_DIR/$OUTPUT_FILE"
-}
-
-
-_has_changed() {
-  local _log_count=`git log --pretty=%ad $1 | wc -l | sed 's/ *//'`
-  _log_count=$(($_log_count + 0))
-
-  if [[ $_log_count > 1 ]]; then
-    return 0 # true
-  fi
-
-  return 1 # false
-}
-
-
-###################################
-# Storage the posts' lastmod.
-#
-# Args:
-#     - $1 the post's filename
-#     - $2 the post's filepath
-# Output:
-#     the file '_data/updates.yml'
-###################################
-_dump() {
-  local _lasmod="`git log -1 --pretty=%ad --date=iso $2`"
-
-  echo "-" >> "$OUTPUT_DIR/$OUTPUT_FILE"
-  echo "  filename: '$1'" >> "$OUTPUT_DIR/$OUTPUT_FILE"
-  echo "  lastmod: '$_lasmod'" >> "$OUTPUT_DIR/$OUTPUT_FILE"
-}
-
-
-main() {
-
-  _init
-
-  local _count=0
-
-  for _file in $(ls -r "$POST_DIR")
-  do
-    _filepath="$POST_DIR/$_file"
-    _filename="${_file%.*}"     # jekyll cannot read the extension of a file, so omit it.
-    _filename=${_filename:11}   # remove the date
-
-    if _has_changed "$_filepath"; then
-      _dump "$_filename" "$_filepath"
-      ((_count=_count+1))
-    fi
-
-  done
-
-  if [[ $_count > 0 ]]; then
-    echo "[INFO] Success to update lastmod for $_count post(s)."
-  fi
-}
-
-
-main

_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,19 +476,18 @@ 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;
     }
   }
   a {
-    @include semi-bold;
-    color: var(---footer-link);
+    color: var(--footer-link);
     &:link {
       @include no-text-decoration;
     }
@@ -523,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 {
@@ -554,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;
@@ -568,7 +556,7 @@ footer {
 
 #access-lastmod {
   ul {
-    >li {
+    > li {
       height: 1.8rem;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -663,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;
@@ -694,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;
   }
@@ -702,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;
   }
 }
@@ -735,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 {
@@ -751,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 ---*/
 
@@ -815,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 {
@@ -836,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 {
@@ -902,7 +942,7 @@ table {
 }
 
 .tooltip-inner { /* Overrided BS4 Tooltip */
-  font-size: .7rem;
+  font-size: 0.7rem;
   max-width: 220px;
   text-align: left;
 }
@@ -930,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});
   }
 
@@ -943,7 +983,7 @@ table {
     }
   }
 
-  #avatar>a {
+  #avatar > a {
     width: 5rem;
     height: 5rem;
   }
@@ -953,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;
@@ -965,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;
@@ -1053,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;
   }
 
@@ -1065,7 +1105,7 @@ table {
   }
 
   #search-wrapper {
-    &.loaded~a {
+    &.loaded ~ a {
       margin-right: 1rem;
     }
     .fa-times-circle {
@@ -1093,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 {
@@ -1108,7 +1148,7 @@ table {
 
 
 @media all and (min-width: 577px) and (max-width: 1199px) {
-  footer>.d-flex>div {
+  footer>.d-flex > div {
     width: 312px;
   }
 }
@@ -1149,7 +1189,7 @@ table {
     text-align: left;
   }
 
-  footer>div.d-flex {
+  footer > div.d-flex {
     width: 92%;
   }
 
@@ -1186,7 +1226,7 @@ table {
     width: calc(100% - 210px);
   }
 
-  #search-results>div {
+  #search-results > div {
     max-width: 700px;
   }
 
@@ -1224,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;
@@ -1236,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%;
@@ -1267,7 +1307,7 @@ table {
     width: calc(100% - 260px);
   }
 
-  #search-results>div {
+  #search-results > div {
     max-width: 46%;
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1285,7 +1325,7 @@ table {
     font-size: 1.03rem;
   }
 
-  footer>div.d-felx {
+  footer > div.d-felx {
     width: 85%;
   }
 
@@ -1293,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;
     }
   }
@@ -1325,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;
     }
   }
@@ -1361,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;
@@ -1379,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%;
       }
@@ -1397,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;
@@ -1411,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;
       }
     }
@@ -1437,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};
     }
   }
@@ -1484,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);
   }
 
@@ -1504,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(146, 146, 146);
+  --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: inherit;
-}
+  --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,25 +27,30 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
-.author {
-  @include semi-bold;
-}
-
-.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;
   }
 }
 
 .post-tail-wrapper {
-  margin-top: 4rem;
+  margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
@@ -84,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
       }
@@ -105,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
       }
@@ -127,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;
@@ -137,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;
 }
 
 
@@ -168,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);
     }
   }
 
@@ -177,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;
@@ -209,6 +213,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 #post-extend-wrapper {
   min-height: 2rem;
+  #disqus_thread {
+    margin-bottom: 2rem;
+  }
 }
 
 .post-tail-bottom a {
@@ -226,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;
@@ -236,7 +243,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
       }
     }
     >i {
-      padding-top: .35rem;
+      padding-top: 0.35rem;
       &:hover {
         @extend %btn-share-hovor;
       }
@@ -284,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
 
@@ -313,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;
@@ -334,47 +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;
   }
-
-}
-
-/*
-  The following resposive design aim to
-  make #post-extend-wrapper margin-right same as pannel's width
-*/
-@media all and (min-width: 1200px) {
-  #post-extend-wrapper {
-    margin-right: 25%;
-  }
-}
-
-@media all and (min-width: 1460px) {
-  #post-extend-wrapper {
-    margin-right: 300px;
-  }
-}
-
-@media all and (min-width: 1650px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 10 + 300px);
-  }
-}
-
-@media all and (min-width: 1700px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 8 + 300px);
-  }
 }

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/_home-post.js

@@ -13,7 +13,7 @@
 
 {% if site.google_analytics.pv.enabled %}
 
-  const proxyData = '{"url": "{{ site.google_analytics.pv.proxy_endpoint }}"}';
+  {% include_relative _pv-config.js %}
 
   {% include_relative _utils/pageviews.js %}
 

assets/js/_pv-config.js

@@ -0,0 +1,14 @@
+/*!
+  PV configuration and Javascript conversion.
+*/
+
+const proxyEndpoint = "{{ site.google_analytics.pv.proxy_endpoint }}";
+
+
+{% if site.google_analytics.pv.cache and site.google_analytics.pv.enabled %}
+  {% assign enabled = true %}
+{% else %}
+  {% assign enabled = false %}
+{% endif %}
+
+const pvCacheEnabled = {{ enabled }};

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,6 +11,86 @@
  * MIT License
  */
 
+var getInitStatus = (function () {
+  var hasInit = false;
+  return () => {
+    let ret = hasInit;
+    if (!hasInit) {
+      hasInit = true;
+    }
+    return ret;
+  };
+}());
+
+
+var PvCache = (function () {
+  const KEY_PV = "pv";
+  const KEY_CREATION = "pv_created_date";
+  const KEY_PV_SRC = "pv_source";
+
+  var Source = {
+    ORIGIN: "origin",
+    PROXY: "proxy"
+  };
+
+  function get(key) {
+    return localStorage.getItem(key);
+  }
+
+  function set(key, val) {
+    localStorage.setItem(key, val);
+  }
+
+  return {
+    getData() {
+      return JSON.parse(localStorage.getItem(KEY_PV) );
+    },
+    saveOriginCache(pv) {
+      set(KEY_PV, pv);
+      set(KEY_PV_SRC, Source.ORIGIN );
+      set(KEY_CREATION, new Date().toJSON() );
+    },
+    saveProxyCache(pv) {
+      set(KEY_PV, pv);
+      set(KEY_PV_SRC, Source.PROXY );
+      set(KEY_CREATION, new Date().toJSON() );
+    },
+    isFromOrigin() {
+      return get(KEY_PV_SRC) === Source.ORIGIN;
+    },
+    isFromProxy() {
+      return get(KEY_PV_SRC) === Source.PROXY;
+    },
+    isExpired() {
+      if (PvCache.isFromOrigin() ) {
+        let date = new Date(get(KEY_CREATION));
+        date.setDate(date.getDate() + 1); /* update origin records every day */
+        return Date.now() >= date.getTime();
+
+      } else if (PvCache.isFromProxy() ) {
+        let date = new Date(get(KEY_CREATION) );
+        date.setHours(date.getHours() + 1); /* update proxy records per hour */
+        return Date.now() >= date.getTime();
+      }
+      return false;
+    },
+    getAllPagevies() {
+      return PvCache.getData().totalsForAllResults["ga:pageviews"];
+    },
+    newerThan(pv) {
+      return PvCache.getAllPagevies() > pv.totalsForAllResults["ga:pageviews"];
+    },
+    inspectKeys() {
+      if (localStorage.getItem(KEY_PV) === null
+        || localStorage.getItem(KEY_PV_SRC) === null
+        || localStorage.getItem(KEY_CREATION) === null) {
+        localStorage.clear();
+      }
+    }
+  };
+
+}()); /* PvCache */
+
 function countUp(min, max, destId) {
   if (min < max) {
     var numAnim = new CountUp(destId, min, max);
@@ -24,19 +104,15 @@ function countUp(min, max, destId) {
 
 
 function countPV(path, rows) {
-  /* path permalink looks like: '/posts/post-title/' */
-  var fileName = path.replace(/\/posts\//g, '').replace(/\//g, '.html'); /* e.g. post-title.html */
   var count = 0;
 
-  var _v2_url = path.replace(/posts\//g, ''); /* the v2.0+ blog permalink: "/post-title/" */
-
-  for (var i = 0; i < rows.length; ++i) {
-    var gaPath = rows[i][0];
-    if (gaPath == path ||
-      gaPath == _v2_url ||
-      gaPath.concat('/') == _v2_url ||
-      gaPath.slice(gaPath.lastIndexOf('/') + 1) === fileName) { /* old permalink record */
-      count += parseInt(rows[i][1]);
+  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;
+      }
     }
   }
 
@@ -46,187 +122,102 @@ function countPV(path, rows) {
 
 function tacklePV(rows, path, elem, hasInit) {
   var count = countPV(path, rows);
-  count = (count == 0 ? 1 : count);
+  count = (count === 0 ? 1 : count);
 
   if (!hasInit) {
     elem.text(new Intl.NumberFormat().format(count));
   } else {
-    var initCount = parseInt(elem.text().replace(/,/g, ''));
+    var initCount = parseInt(elem.text().replace(/,/g, ""), 10);
     if (count > initCount) {
-      countUp(initCount, count, elem.attr('id'));
+      countUp(initCount, count, elem.attr("id"));
     }
   }
 }
 
 
 function displayPageviews(data) {
-  if (data === undefined) {
+  if (typeof data === "undefined") {
     return;
   }
 
   var hasInit = getInitStatus();
-  var rows = data.rows;
+  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);
+      tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
     });
 
   } else if ($(".post").length > 0) { /* the post */
     var path = window.location.pathname;
-    tacklePV(rows, path, $('#pv'), hasInit);
+    tacklePV(rows, path, $("#pv"), hasInit);
   }
 }
 
 
-var getInitStatus = (function() {
-  var hasInit = false;
-  return function() {
-    let ret = hasInit;
-    if (!hasInit) {
-      hasInit = true;
-    }
-    return ret;
-  }
-})();
-
-
-var PvCache = (function() {
-  const KEY_PV = "pv";
-  const KEY_CREATION = "pv_created_date";
-  const KEY_PV_TYPE = "pv_type";
-
-  var PvType = {
-    ORIGIN: "origin",
-    PROXY: "proxy"
-  };
-
-  function get(key) {
-    return localStorage.getItem(key);
-  }
-
-  function set(key, val) {
-    localStorage.setItem(key, val);
-  }
-
-  return {
-    getData: function() {
-      return JSON.parse(localStorage.getItem(KEY_PV) );
-    },
-    saveOriginCache: function(pv) {
-      set(KEY_PV, pv);
-      set(KEY_PV_TYPE, PvType.ORIGIN );
-      set(KEY_CREATION, new Date().toJSON() );
-    },
-    saveProxyCache: function(pv) {
-      set(KEY_PV, pv);
-      set(KEY_PV_TYPE, PvType.PROXY );
-      set(KEY_CREATION, new Date().toJSON() );
-    },
-    isOriginCache: function() {
-      return get(KEY_PV_TYPE) == PvType.ORIGIN;
-    },
-    isProxyCache: function() {
-      return get(KEY_PV_TYPE) == PvType.PROXY;
-    },
-    isExpired: function() {
-      if (PvCache.isOriginCache() ) {
-        let date = new Date(get(KEY_CREATION));
-        date.setDate(date.getDate() + 1); /* fetch origin-data every day */
-        return Date.now() >= date.getTime();
-
-      } else if (PvCache.isProxyCache() ) {
-        let date = new Date(get(KEY_CREATION) );
-        date.setHours(date.getHours() + 1); /* proxy-data is updated every hour */
-        return Date.now() >= date.getTime();
-      }
-      return false;
-    },
-    getAllPagevies: function() {
-      return PvCache.getData().totalsForAllResults["ga:pageviews"];
-    },
-    newerThan: function(pv) {
-      return PvCache.getAllPagevies() > pv.totalsForAllResults["ga:pageviews"];
-    },
-    inspectKeys: function() {
-      if (localStorage.getItem(KEY_PV) == null
-        || localStorage.getItem(KEY_PV_TYPE) == null
-        || localStorage.getItem(KEY_CREATION) == null) {
-        localStorage.clear();
-      }
-    }
-  };
-
-})(); /* PvCache */
-
-
-function fetchOriginPageviews(pvData) {
-  if (pvData === undefined) {
-    return;
-  }
-  displayPageviews(pvData);
-  PvCache.saveOriginCache(JSON.stringify(pvData));
-}
-
-
 function fetchProxyPageviews() {
-  let proxy = JSON.parse(proxyData); /* see file '/assets/data/pv-data.json' */
   $.ajax({
-    type: 'GET',
-    url: proxy.url,
-    dataType: 'jsonp',
+    type: "GET",
+    url: proxyEndpoint, /* see: /assets/js/_pv-config.js */
+    dataType: "jsonp",
     jsonpCallback: "displayPageviews",
-    success: function(data, textStatus, jqXHR) {
+    success: (data, textStatus, jqXHR) => {
       PvCache.saveProxyCache(JSON.stringify(data));
     },
-    error: function(jqXHR, textStatus, errorThrown) {
+    error: (jqXHR, textStatus, errorThrown) => {
       console.log("Failed to load pageviews from proxy server: " + errorThrown);
     }
   });
 }
 
 
+function 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) => {
+        if (filterOrigin) {
+          if (PvCache.newerThan(data)) {
+            return;
+          }
+        }
+        displayPageviews(data);
+        PvCache.saveOriginCache(JSON.stringify(data));
+      })
+      .then(() => fetchProxyPageviews());
+
+  } else {
+    fetchProxyPageviews();
+  }
+
+}
+
+
 $(function() {
 
-  if ($('.pageviews').length > 0) {
+  if ($(".pageviews").length > 0) {
 
     PvCache.inspectKeys();
-
     let cache = PvCache.getData();
 
     if (cache) {
+      displayPageviews(cache);
+
       if (PvCache.isExpired()) {
-        if (PvCache.isProxyCache() ) {
-          let originPvData = pageviews ? JSON.parse(pageviews) : undefined;
-          if (originPvData) {
-            if (PvCache.newerThan(originPvData)) {
-              displayPageviews(cache);
-            } else {
-              fetchOriginPageviews(originPvData);
-            }
-          }
+        fetchPageviews(true, PvCache.isFromProxy());
 
-          fetchProxyPageviews();
+      } else {
 
-        } else if (PvCache.isOriginCache() ) {
-          fetchOriginPageviews(originPvData);
-          fetchProxyPageviews();
-        }
-
-      } else { /* still valid */
-        displayPageviews(cache);
-
-        if (PvCache.isOriginCache() ) {
-          fetchProxyPageviews();
+        if (PvCache.isFromOrigin()) {
+          fetchPageviews(false);
         }
 
       }
 
     } else {
-      let originPvData = pageviews ? JSON.parse(pageviews) : undefined;
-      fetchOriginPageviews(originPvData);
-      fetchProxyPageviews();
+      fetchPageviews();
     }
 
   }

assets/js/_utils/timeago.js

@@ -8,71 +8,76 @@
 
 $(function() {
 
-  function timeago(date, isLastmod) {
-    var now = new Date();
-    var past = new Date(date);
-    var seconds = Math.floor((now - past) / 1000);
+  var toRefresh = $(".timeago").length;
 
-    var year = Math.floor(seconds / 31536000);
-    if (year >= 1) {
-      return year + " year" + (year > 1 ? "s" : "") + " ago";
+  var intervalId = void 0;
+
+  function timeago(iso, isLastmod) {
+    let now = new Date();
+    let past = new Date(iso);
+
+    if (past.getFullYear() !== now.getFullYear()) {
+      toRefresh -= 1;
+      return past.toLocaleString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
     }
 
-    var month = Math.floor(seconds / 2592000);
-    if (month >= 1) {
-      return month + " month" + (month > 1 ? "s" : "") + " ago";
+    if (past.getMonth() !== now.getMonth()) {
+      toRefresh -= 1;
+      return past.toLocaleString("en-US", {
+        month: "short",
+        day: "numeric"
+      });
     }
 
-    var week = Math.floor(seconds / 604800);
-    if (week >= 1) {
-      return week + " week" + (week > 1 ? "s" : "") + " ago";
-    }
+    let seconds = Math.floor((now - past) / 1000);
 
-    var day = Math.floor(seconds / 86400);
+    let day = Math.floor(seconds / 86400);
     if (day >= 1) {
+      toRefresh -= 1;
       return day + " day" + (day > 1 ? "s" : "") + " ago";
     }
 
-    var hour = Math.floor(seconds / 3600);
+    let hour = Math.floor(seconds / 3600);
     if (hour >= 1) {
       return hour + " hour" + (hour > 1 ? "s" : "") + " ago";
     }
 
-    var minute = Math.floor(seconds / 60);
+    let minute = Math.floor(seconds / 60);
     if (minute >= 1) {
       return minute + " minute" + (minute > 1 ? "s" : "") + " ago";
     }
 
-    return (isLastmod? "just" : "Just") + " now";
+    return (isLastmod ? "just" : "Just") + " now";
   }
 
-
   function updateTimeago() {
     $(".timeago").each(function() {
       if ($(this).children("i").length > 0) {
-        var isLastmod = $(this).hasClass('lastmod');
+        var basic = $(this).text();
+        var isLastmod = $(this).hasClass("lastmod");
         var node = $(this).children("i");
-        var date = node.text();   /* ISO Dates: '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 (vote == 0 && intervalId != undefined) {
-      clearInterval(intervalId);  /* stop interval */
+    if (toRefresh === 0 && typeof intervalId !== "undefined") {
+      clearInterval(intervalId); /* stop interval */
     }
-    return vote;
+    return toRefresh;
   }
 
-
-  var vote = $(".timeago").length;
-  if (vote == 0) {
+  if (toRefresh === 0) {
     return;
   }
 
-  if (updateTimeago() > 0) {      /* run immediately */
-    vote = $(".timeago").length;  /* resume */
-    var intervalId = setInterval(updateTimeago, 60000); /* loop every minutes */
+  if (updateTimeago() > 0) { /* run immediately */
+    intervalId = setInterval(updateTimeago, 60000); /* run every minute */
   }
 
-});
+});

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,37 +40,6 @@ const include = [
     '{{ item | relative_url }}',
   {% endfor %}
 
-  /* The posts of first Home page and recent update list */
-  {% assign post_list = "" | split: "" %}
-  {% assign sum = 0 %}
-
-  {% for post in site.posts %}
-    {% assign post_list = post_list | push: post.url %}
-    {% assign sum = sum | plus: 1 %}
-    {% if sum >= site.paginate %}
-      {% break %}
-    {% endif %}
-  {% endfor %}
-
-  {% include update-list.html %}
-  {% for item in update_list %}
-    {% assign url = item | split: "::" | last | prepend: "/posts/" | append: "/" %}
-    {% assign post_list = post_list | push: url %}
-  {% endfor %}
-
-  {% assign post_list = post_list | uniq %}
-
-  {% 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 -%}
@@ -106,6 +75,9 @@ const include = [
 ];
 
 const exclude = [
-  '/assets/js/data/pv-cache.js',
+  {%- if site.google_analytics.pv.proxy_url and site.google_analytics.pv.enabled -%}
+    '{{ site.google_analytics.pv.proxy_url }}',
+  {%- endif -%}
+  '/assets/js/data/pageviews.json',
   '/img.shields.io/'
 ];

assets/js/data/pv-cache.js

@@ -1,11 +0,0 @@
----
-layout: compress
----
-
-{%- capture pv_data -%}
-  {%- if site.google_analytics.pv.cache and site.google_analytics.pv.enabled -%}
-    {% include_relative _pageviews.json %}
-  {%- endif -%}
-{%- endcapture -%}
-
-const pageviews = '{{ pv_data }}';

assets/js/data/search.json

@@ -10,9 +10,8 @@ layout: compress
     "categories": "{{ post.categories | join: ', '}}",
     "tags": "{{ post.tags | join: ', ' }}",
     "date": "{{ post.date }}",
-    {% assign _content = post.content %}
-    {% include no-linenos.html %}
-    "snippet": "{{ _content | strip_html | strip_newlines | remove_chars | escape | truncate: 300 | replace: '\', '\\\\' }}"
+    {% include no-linenos.html content=post.content %}
+    "snippet": "{{ content | strip_html | strip_newlines | remove_chars | escape | truncate: 300 | replace: '\', '\\\\' }}"
   }{% unless forloop.last %},{% endunless %}
   {% endfor %}
 ]

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,248 +15,172 @@
 
 ## 目录
 
-* [功能预览](#功能预览)
-* [安装](#安装)
-* [运行指南](#运行指南)
-* [参与贡献](#参与贡献)
-* [感谢](#感谢)
-* [赞助](#赞助)
-* [许可证书](#许可证书)
+- [功能一览](#功能一览)
+- [安装](#安装)
+- [使用](#使用)
+- [参与贡献](#参与贡献)
+- [感谢](#感谢)
+- [赞助](#赞助)
+- [许可证书](#许可证书)
 
-## 功能预览
-
-* 文章置顶
-* 可配置的全局主题颜色
-* 文章最后修改日期
-* 文章目录
-* 自动推荐相关文章
-* 语法高亮
-* 二级目录
-* 数学表达式
-* 搜索
-* Atom 订阅
-* Disqus 评论
-* Google 分析
-* GA 浏览报告（高级功能）
-* SEO 优化
-* 网站性能优化
+## 功能一览
 
+- 文章置顶
+- 可配置的全局主题颜色
+- 文章最后修改日期
+- 文章目录
+- 自动推荐相关文章
+- 语法高亮
+- 二级目录
+- 数学表达式
+- 搜索
+- Atom 订阅
+- Disqus 评论
+- Google 分析
+- GA 浏览报告（高级功能）
+- SEO 优化
+- 网站性能优化
 
 ## 安装
 
-### 准备工作
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork)，把仓库改名为 `USERNAME.github.io`（其中 `USERNAME` 是你的 GitHub 用户名）， 然后克隆到本地：
 
-按照 [Jekyll 官方文档](https://jekyllrb.com/docs/installation/) 完成基础环境的安装 (`Ruby`，`RubyGem`，`Bundler`)。
-
-为了使用项目内免费提供的脚本工具增进写作体验，如果你的机器系统是 Debian 或者 macOS，则需要确保安装了 [GNU coreutils](https://www.gnu.org/software/coreutils/)。否则，通过以下方式获得：
-
-* Debian
-
- ```console
- $ sudo apt-get install coreutils
- ```
-
-* macOS
-
- ```console
- $ brew install coreutils
- ```
-
-接着，[fork](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 一份代码，然后克隆你 Fork 的仓库到本地机器上。
-
-```console
-$ git clone git@github.com:USER/jekyll-theme-chirpy.git -b master
+```terminal
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
 ```
 
-把上述的`USER` 替换为你的 GitHub username。
+### 设置本地环境
 
+如果你想在本地运行或构建, 参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/)安装 `Ruby`，`RubyGems`，`Jekyll` 和 `Bundler`。
 
-### 安装 Jekyll 插件
-
-本地首次运行或编译，请在项目根目录下运行:
+首次运行或构建时, 请先安装 Jekyll plugins。在项目根目录运行：
 
 ```terminal
 $ bundle install
 ```
-`bundle` 命令会自动安装 `Gemfile` 内声明的依赖插件.
 
+`bundle` 会自动安装 `Gemfile` 内指定的依赖插件。
 
+### 配置 Docker 镜像（可选）
 
-## 运行指南
+如果你是 [**Docker**](https://www.docker.com/) 的铁粉，或者不想在本地安装上述 [_设置本地环境_](#设置本地环境) 提到的包, 那么请确保先安装并运行了 **Docker Engine** 然后从 Docker Hub 获取镜像 `jekyll/jekyll`:
 
-### 文件目录
-
-下面是主要的文件目录：
-
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-├── .travis.yml     # remove it
-├── .github         # remove this, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── tools           # script tools
-├── docs
-├── feed.xml
-├── index.html
-├── robots.txt
-└── sitemap.xml
+```console
+$ docker pull jekyll/jekyll
 ```
 
 
-你需要将以下文件或目录删除:
+## 使用
 
-- .travis.yml
-- .github
+### 初始化
 
+在项目根目录，开始初始化:
+
+```console
+$ bash tools/init.sh
+```
+
+> 如果你不打算部署到 GitHub Pages, 在上述命令后附加参数选项 `--no-gh`。
+
+上述脚本完成了以下工作:
+
+1. 从你的仓库中删除了:
+
+	- `.travis.yml`
+	- `_posts` 下的文件
+	- `docs` 目录
+
+2. 如果使用了参数 `--no-gh`，则会怒删 `.github`。否则，将会配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。
+
+3. 自动提交一个 Commit 以保存上述文件的更改。
 
 ### 配置文件
 
-根据个人需要去修改 `_config.yml` 的变量，大部分都有注释介绍用法。
+根据个人需要去修改 `_config.yml` 的变量，大部分都有注释介绍用法。典型的几个选项是：
 
-* `url`
-    
-    定义网站 URL，注意结尾不带 `/`。格式： `<protocol>://<domain>`.
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
 
-* `avatar`
-    
-    定义头像，示例的文件放置在：`/assets/img/sample/avatar.jpg`. 把它换成你自己的头像，路径不限定，越小越好。(压缩图像体积可上这个网站：*<https://tinypng.com/>* ).
+### 本地运行
 
-* `timezone`
-
-    定义时区 ，默认为 `亚洲/上海`，如果肉身翻墙要换城市可在此列表找到： [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) 或者 [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
-
-* `theme_mode`
-  
-    定义颜色方案，有三种可选：:
-    
-    - **dual**  - 自动跟随系统的 `深色`/`浅色` 设置，当系统或者浏览器不支持深色模式，则默认显示为浅色模式。无论如何，侧边栏左下角都会显示一个颜色切换按钮。
-    - **dark**  - 全程深色模式。
-    - **light** - 全程浅色模式。
-
-
-###  本地运行
-
-使用以下工具可轻松运行:
+发布之前，在本地预览:
 
 ```terminal
-$ bash tools/run.sh
+$ bundle exec jekyll s
 ```
 
 访问本地服务： <http://localhost:4000>
 
-如果你想在本地服务运行后，把修改源文件的更改实时刷新，可使用选项 `-r` (或 `--realtime`)，不过要先安装依赖 [**fswatch**](http://emcrisostomo.github.io/fswatch/) 。
+### 用 Docker 运行
 
-###  部署到 GitHub Pages
+在项目根目录运行命令:
+
+```terminal
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
+```
+
+### 部署
 
 部署开始前，把  `_config.yml` 的 `url` 改为 `https://<username>.github.io`(或者你的私有域名，如：`https://yourdomain.com`)。另外，如果你想使用 [Project 类型网站](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites)，修改配置文件的 `baseurl` 为项目名称，以斜杠开头，如：`/project`。
 
-#### 方法 1: 由 GitHub Pages 生成站点
+假设你已经完成了 [初始化](#初始化)，现在你可以选择下列其中一个方式去站点部署。
 
-依照本方法，你可以直接把源码推送到远端仓库。
+#### 部署到 GitHub Pages
 
-> **注**: 如果你想使用任何不在这个[列表](https://pages.github.com/versions/)上的插件，越过此方法，直接看 [*方法 2: 本地构建*](#方法-2-本地构建).
+由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
 
-**1**. 仓库改名为:
+1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
 
-|站点类型 | 仓库名称|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| `<username>.github.io` 以外的名字，譬如 `project`|
+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)
 
-**2**. 提交本地更改，然后运行:
+3. 按照 GitHub 指示的地址去访问你的网站。
+
+#### 部署到其他 Pages 平台
+
+在 GitHub 之外的平台，例如 GitLab，就没法享受 **GitHub Actions** 的便利了。因此我们需要在本地构建站点（或者在其他第三方 CI 平台），然后推送站点文件到服务器上。
+
+在项目根目录，运行:
 
 ```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
 ```
 
-**3**. 到 GitHub 网页为该项目开启 Pages 服务。
-
-**4**. 网站将运行在：
-
-|站点类型 | 网站 URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
-
-
-#### 方法 2: 本地构建
-
-由于安全原因，GitHub Pages 不允许第三方插件运行，如果你想突破规则，就要本地构建站点内容。
-
-**1**. 到 GitHub 网页，创建一个新的仓库，根据以下规则命名: 
-
-|站点类型 | 仓库名称|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| `<username>.github.io` 以外的名字， 例如 `project`|
-
-然后 Clone 新仓库到本地。
-
-**2**. 构建站点:
-
-```console
-$ bash tools/build.sh -d /path/to/local/project/
-```
-> `project` 为新仓库名称。
-
-生成的静态文件将会在 `/path/to/local/project`. 把新仓库的修改提交并推送到远端 `master` 分支.
-
-**3**. 回到 GithHub 网页，为该仓库开启 Pages 服务。
-
-**4**. 网站将运行在:
-
-|站点类型 | 站点 URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
-
-#### 结束工作
-
-无论你选择了哪种方式部署网站到 GitHub Pages, 请开启 `HTTPS` 功能。具体细节参考官方说明：[Securing your GitHub Pages site with HTTPS](https://help.github.com/en/github/working-with-github-pages/securing-your-github-pages-site-with-https)。
+生成的静态文件将会在 `_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、分享新点子或者启发了我写出更通俗易懂的文档。
-
+: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> 选择适合的链接即可完成（国内一般选第二个链接，支付宝/微信赞助），您的打赏将会极大地鼓励作者，并帮助作者更好地维护项目！
-
+如果您喜欢这个主题或者它对您有帮助，请考虑打赏作者：在 [项目主页](https://github.com/cotes2020/jekyll-theme-chirpy) 点击按钮 <kbd>:heart: Sponsor</kbd> 选择适合的链接即可完成（国内一般选第二个链接，支付宝/微信赞助），您的打赏将会极大地鼓励作者，并帮助作者更好地维护项目！
 
 ## 许可证书
 

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,121 +0,0 @@
-#!/bin/bash
-#
-# Build jekyll site and store site files in ./_site
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-CMD="JEKYLL_ENV=production bundle exec jekyll b"
-
-WORK_DIR=$(dirname $(dirname $(realpath "$0")))
-
-CONTAINER=${WORK_DIR}/.container
-
-DEST=${WORK_DIR}/_site
-
-
-_help() {
-  echo "Usage:"
-  echo
-  echo "   bash build.sh [options]"
-  echo
-  echo "Options:"
-  echo "   -b, --baseurl <URL>      The site relative url that start with slash, e.g. '/project'"
-  echo "   -h, --help               Print the help information"
-  echo "   -d, --destination <DIR>  Destination directory (defaults to ./_site)"
-}
-
-
-_init() {
-  cd $WORK_DIR
-
-  if [[ -d $CONTAINER ]]; then
-    rm -rf $CONTAINER
-  fi
-
-  if [[ -d _site ]]; then
-    jekyll clean
-  fi
-
-  local _temp=$(mktemp -d)
-  cp -r * $_temp
-  cp -r .git $_temp
-  mv $_temp $CONTAINER
-}
-
-
-_build() {
-  cd $CONTAINER
-  echo "$ cd $(pwd)"
-
-  bash _scripts/sh/create_pages.sh
-  bash _scripts/sh/dump_lastmod.sh
-
-  CMD+=" -d ${DEST}"
-  echo "\$ $CMD"
-  eval $CMD
-  echo -e "\nBuild success, the site files have been placed in '${DEST}'."
-
-  if [[ -d ${DEST}/.git ]]; then
-    if [[ ! -z $(git -C $DEST status -s) ]]; then
-      git -C $DEST add .
-      git -C $DEST commit -m "[Automation] Update site files." -q
-      echo -e "\nPlease push the changes of $DEST to remote master branch.\n"
-    fi
-  fi
-
-  cd .. && rm -rf $CONTAINER
-}
-
-
-_check_unset() {
-  if [[ -z ${1:+unset} ]]
-  then
-    _help
-    exit 1
-  fi
-}
-
-
-main() {
-  while [[ $# -gt 0 ]]
-  do
-    opt="$1"
-    case $opt in
-      -b|--baseurl)
-        _check_unset $2
-        if [[ $2 == \/* ]]
-        then
-          CMD+=" -b $2"
-        else
-          _help
-          exit 1
-        fi
-        shift
-        shift
-        ;;
-      -d|--destination)
-        _check_unset $2
-        DEST=$(realpath $2)
-        shift;
-        shift;
-        ;;
-      -h|--help)
-        _help
-        exit 0
-        ;;
-      *) # unknown option
-        _help
-        exit 1
-        ;;
-    esac
-  done
-
-  _init
-  _build
-}
-
-main "$@"

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

@@ -0,0 +1,67 @@
+#!/bin/bash
+#
+# Deploy the content of _site to 'origin/<pages_branch>'
+#
+# v2.5
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# Published under MIT License
+
+set -eu
+
+PAGES_BRANCH="gh-pages"
+
+_no_branch=false
+_backup_dir="$(mktemp -d)"
+
+init() {
+  if [[ -z $(git branch -av | grep "$PAGES_BRANCH") ]]; then
+    _no_branch=true
+    git checkout -b "$PAGES_BRANCH"
+  else
+    git checkout "$PAGES_BRANCH"
+  fi
+}
+
+backup() {
+  mv _site/* "$_backup_dir"
+  mv .git "$_backup_dir"
+
+  # When adding custom domain from Github website,
+  # the CANME only exist on `gh-pages` branch
+  if [[ -f CNAME ]]; then
+    mv CNAME "$_backup_dir"
+  fi
+}
+
+flush() {
+  rm -rf ./*
+  rm -rf .[^.] .??*
+
+  shopt -s dotglob nullglob
+  mv "$_backup_dir"/* .
+}
+
+deploy() {
+  git config --global user.name "GitHub Actions"
+  git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+
+  git update-ref -d HEAD
+  git add -A
+  git commit -m "[Automation] Site update No.${GITHUB_RUN_NUMBER}"
+
+  if $_no_branch; then
+    git push -u origin "$PAGES_BRANCH"
+  else
+    git push -f
+  fi
+}
+
+main() {
+  init
+  backup
+  flush
+  deploy
+}
+
+main