Bump version to 4.2.0

the default scrollbar on Windows looks like shit

.github/FUNDING.yml

@@ -1 +1,3 @@
-custom: ['https://www.buymeacoffee.com/coteschung', 'https://cotes.gitee.io/alipay-wechat-donation']
+custom:
+  - https://www.buymeacoffee.com/coteschung
+  - https://cotes.gitee.io/alipay-wechat-donation

.github/ISSUE_TEMPLATE/question.md

@@ -16,4 +16,4 @@ labels: question
 - [ ] My question is based on the latest code of `master` branch.
 
 ## Description
-<!-- Please describe your question in detial. -->
+<!-- Please describe your question in detail. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -27,7 +27,7 @@ Please describe the tests that you ran to verify your changes. Provide instructi
 
 ### Test Configuration
 
-- Browerser type & version:
+- Browser type & version:
 - Operating system:
 - Bundler version:
 - Ruby version:

.github/workflows/ci.yml

@@ -24,9 +24,6 @@ jobs:
       matrix:
         os: [ubuntu-latest, macos-latest]
 
-    env:
-      GEMS_PATH: ~/vendor/bundle
-
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -34,22 +31,10 @@ jobs:
           fetch-depth: 0  # for posts's lastmod
 
       - name: Setup Ruby
-        uses: actions/setup-ruby@v1
+        uses: ruby/setup-ruby@v1
         with:
           ruby-version: 2.7
-
-      - name: Bundle Caching
-        uses: actions/cache@v2
-        with:
-          path: ${{ env.GEMS_PATH }}
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-gems-
-
-      - name: Bundle Install
-        run: |
-          bundle config path ${{ env.GEMS_PATH }}
-          bundle install --jobs 4 --retry 3
+          bundler-cache: true
 
       - name: Build Site
         env:

.github/workflows/issue-interceptor.yml

@@ -0,0 +1,18 @@
+name: Intercept bad issues
+
+on:
+  issues:
+    types: [opened, edited]
+
+jobs:
+  auto_close_issues:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Auto close issues that did not follow template
+        uses: lucasbento/auto-close-issues@v1.0.2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-close-message: ":wave: Hi @${issue.user.login},\n\nThis issue is being automatically closed because it does not follow the issue template. Please DO NOT open another similar issue, try to edit the current issue according to the template, then it will be reopened automatically."
+          closed-issues-label: "🙁 Not following issue template"

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

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

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

@@ -13,9 +13,6 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    env:
-      GEMS_PATH: ~/vendor/bundle
-
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -23,22 +20,10 @@ jobs:
           fetch-depth: 0  # for posts's lastmod
 
       - name: Setup Ruby
-        uses: actions/setup-ruby@v1
+        uses: ruby/setup-ruby@v1
         with:
           ruby-version: 2.7
-
-      - name: Bundle Caching
-        uses: actions/cache@v2
-        with:
-          path: ${{ env.GEMS_PATH }}
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-gems-
-
-      - name: Bundle Install
-        run: |
-          bundle config path ${{ env.GEMS_PATH }}
-          bundle install --jobs 4 --retry 3
+          bundler-cache: true
 
       - name: Check baseurl
         run: |

.gitignore

@@ -1,15 +1,17 @@
 # hidden files
 .*
-!.github
+!.git*
+!.editorconfig
+!.nojekyll
+!.travis.yml
 
-# jekyll cache
+# bundler cache
 _site
 vendor
+Gemfile.lock
 
 # rubygem
 *.gem
-# yard docs
-doc
 
 # npm dependencies
 node_modules

.travis.yml

@@ -1,25 +1,40 @@
 os: linux
 dist: bionic
 
-language: ruby
-rvm: 2.7.0
+language: minimal
 
-cache: bundler
+if: tag =~ /^v(\d)+(\.(\d)+){2}$/
 
-addons:
-  apt:
-    packages:
-      - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
+jobs:
+  include:
+    - name: Deploy
+      language: ruby
+      rvm: 2.7.0
+      addons:
+        apt:
+          packages:
+            # required to avoid SSL error (for htmlproofer)
+            - libcurl4-openssl-dev
+      cache:
+        directories:
+          - $TRAVIS_BUILD_DIR/vendor/bundle
+      before_install:
+        # match the Gemfile.lock, travis' bundler is 2.1.2
+        - gem install bundler:2.2.4
+        - bundle config path 'vendor/bundle'
+      install:
+        # overriding to drop the travis `--development` flag
+        - bundle install --jobs=3 --retry=3
+      script:
+        - eval "$BUILD_CMD"
+      git:
+        depth: false # for posts' lastmod
 
-script:
+    - name: Flush Starter
+      script: eval "$FLUSH_STARTER"
+
+before_script:
   - git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
-  - eval "$BUILD_CMD"
-
-branches:
-  only: production
-
-git:
-  depth: false # for posts lastmod
 
 notifications:
   email:

404.html

@@ -1,20 +0,0 @@
----
-layout: page
-title: "404: Page not found"
-permalink: /404.html
-
-redirect_from:
-  - /norobots/
-  - /assets/
-  - /tabs/
-  - /categories/
-  - /tags/
-  - /posts/
-
-dynamic_title: true
----
-
-<div class="lead">
-  <p>Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. </p>
-  <p><a href="{{ site.baseurl }}/">Head back Home</a> to try finding it again, or search for it on the <a href="{{ site.baseurl }}/tabs/archives">Archives page</a>.</p>
-</div>

Gemfile

@@ -1,15 +1,8 @@
+# frozen_string_literal: true
+
 source "https://rubygems.org"
 
-gem "jekyll", "~> 4.1"
-
-# plugins
-group :jekyll_plugins do
-  gem "jekyll-paginate", "~> 1.1"
-  gem "jekyll-redirect-from", "~> 0.16"
-  gem "jekyll-seo-tag", "~> 2.7"
-  gem "jekyll-archives", "~> 2.2"
-  gem "jekyll-sitemap", "~> 1.4"
-end
+gemspec
 
 group :test do
   gem "html-proofer", "~> 3.18"

Gemfile.lock

@@ -1,113 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.7.0)
-      public_suffix (>= 2.0.2, < 5.0)
-    colorator (1.1.0)
-    concurrent-ruby (1.1.7)
-    em-websocket (0.5.2)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
-    ethon (0.12.0)
-      ffi (>= 1.3.0)
-    eventmachine (1.2.7)
-    ffi (1.14.2)
-    forwardable-extended (2.6.0)
-    html-proofer (3.18.5)
-      addressable (~> 2.3)
-      mercenary (~> 0.3)
-      nokogumbo (~> 2.0)
-      parallel (~> 1.3)
-      rainbow (~> 3.0)
-      typhoeus (~> 1.3)
-      yell (~> 2.0)
-    http_parser.rb (0.6.0)
-    i18n (1.8.5)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.2.0)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (~> 2.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.3)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (~> 0.4.0)
-      pathutil (~> 0.9)
-      rouge (~> 3.0)
-      safe_yaml (~> 1.0)
-      terminal-table (~> 2.0)
-    jekyll-archives (2.2.1)
-      jekyll (>= 3.6, < 5.0)
-    jekyll-paginate (1.1.0)
-    jekyll-redirect-from (0.16.0)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (2.1.0)
-      sassc (> 2.0.1, < 3.0)
-    jekyll-seo-tag (2.7.1)
-      jekyll (>= 3.8, < 5.0)
-    jekyll-sitemap (1.4.0)
-      jekyll (>= 3.7, < 5.0)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.3.0)
-      rexml
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.3.3)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
-    mini_portile2 (2.5.0)
-    nokogiri (1.11.1)
-      mini_portile2 (~> 2.5.0)
-      racc (~> 1.4)
-    nokogumbo (2.0.4)
-      nokogiri (~> 1.8, >= 1.8.4)
-    parallel (1.20.1)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (4.0.6)
-    racc (1.5.2)
-    rainbow (3.0.0)
-    rb-fsevent (0.10.4)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
-    rexml (3.2.4)
-    rouge (3.26.0)
-    safe_yaml (1.0.5)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    terminal-table (2.0.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
-    thread_safe (0.3.6)
-    typhoeus (1.4.0)
-      ethon (>= 0.9.0)
-    tzinfo (1.2.9)
-      thread_safe (~> 0.1)
-    tzinfo-data (1.2020.6)
-      tzinfo (>= 1.0.0)
-    unicode-display_width (1.7.0)
-    wdm (0.1.1)
-    yell (2.2.2)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  html-proofer (~> 3.18)
-  jekyll (~> 4.1)
-  jekyll-archives (~> 2.2)
-  jekyll-paginate (~> 1.1)
-  jekyll-redirect-from (~> 0.16)
-  jekyll-seo-tag (~> 2.7)
-  jekyll-sitemap (~> 1.4)
-  tzinfo (~> 1.2)
-  tzinfo-data
-  wdm (~> 0.1.1)
-
-BUNDLED WITH
-   2.2.4

README.md

@@ -1,58 +1,70 @@
-# Chirpy
+<div align="right">
+  <a href="https://github.com/cotes2020/jekyll-theme-chirpy#readme">EN</a> |
+  <a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md">中文 (简体)</a>
+</div>
 
-Language: English | [简体中文](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md)
+<div align="center">
+  <h1>Chirpy Jekyll Theme</h1>
+  <p>
+    <a href="https://rubygems.org/gems/jekyll-theme-chirpy">
+    <img alt="Gem Version" src="https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen"></img>
+  </a>
+    <a href="https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush">
+    <img alt="Build Status" src="https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push"></img>
+  </a>
+    <a href="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">
+    <img alt="Codacy Badge" src="https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b"></img>
+  </a>
+    <a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE">
+    <img alt="GitHub license" src="https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg"></img>
+  </a>
+    <a href="https://996.icu">
+    <img alt="996.icu" src="https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg"></img>
+  </a>
+  </p>
+</div>
 
-[![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 that focuses on text presentation. Designed to help you easily record and share your knowledge.
 
-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)
+[Live Demo »](https://chirpy.cotes.info)
 
-[![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png)](https://chirpy.cotes.info)
-
-## Table of Contents
-
-- [Features](#features)
-- [Installation](#installation)
-- [Prerequisites](#prerequisites)
-- [Usage](#usage)
-- [Contributing](#contributing)
-- [Credits](#credits)
-- [Supporting](#supporting)
-- [License](#license)
+<p align="center">
+  <a href="https://chirpy.cotes.info">
+    <img alt="Devices Mockup" src="https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png"></img>
+  </a>
+</p>
 
 ## Features
 
+- Localized Layout
+- Configurable Theme Mode
 - Pinned Posts
-- Configurable theme mode
-- Double-level Categories
-- Last modified date for posts
+- Hierarchical Categories
+- Last Modified Date for Posts
 - Table of Contents
-- Automatically recommend related posts
-- Syntax highlighting
-- Mathematical expressions
-- Mermaid diagram & flowchart
+- Automatically Recommend Related Posts
+- Syntax Highlighting
+- Mathematical Expressions
+- Mermaid Diagram & Flowchart
 - Search
 - Atom Feeds
 - Disqus Comments
 - Google Analytics
-- GA Pageviews reporting (Advanced)
-- SEO and Performance Optimization
-
+- GA Pageviews Reporting (Advanced)
+- SEO & Performance Optimization
 
 ## Prerequisites
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
+Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`. Please note that the version of `Ruby` must meet the requirements of the theme on [RubyGems.org](https://rubygems.org/gems/jekyll-theme-chirpy).
 
 ## Installation
 
 There are two ways to get the theme:
 
-  - Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy)
-  - Fork from GitHub
+- **[Install from RubyGems](#install-from-rubygems)** - Easy to update, isolate irrelevant project files so you can focus on writing.
+- **[Fork on GitHub](#fork-on-github)** - Convenient for custom development, but difficult to update, only suitable for web developers.
 
-### Install From Rubygems
+### Install from RubyGems
 
 Add this line to your Jekyll site's `Gemfile`:
 
@@ -72,22 +84,23 @@ And then execute:
 $ bundle
 ```
 
-Finally, copy the missing files (refer to the [starter project][starter] for the detailed file directory structure) from the theme's gem to your Jekyll site, and append all the variables of the theme's `_config.yml` to your Jekyll site.
+Next, go to the installed local theme path:
 
-> **Hint**: To locate the theme’s gem, execute:
->
 ```console
-$ bundle info --path jekyll-theme-chirpy
+$ cd "$(bundle info --path jekyll-theme-chirpy)"
 ```
 
-Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem.
+And then copy the critical files (for details, see [starter project][starter]) from the theme's gem to your Jekyll site.
 
-[starter]: https://github.com/cotes2020/chirpy-starter
-[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+> ⚠️ **Watch out for duplicate files!**
+>
+> If your Jekyll site is created by the `jekyll new` command, there will be `index.markdown` and `about.markdown` in the root directory of your site. Please be sure to remove them, otherwise they will overwrite the `index.html` and `_tabs/about.html` from this project, resulting in blank or messy pages.
 
-### Fork From GitHub
+As an alternative, which we recommend, you can create a Jekyll site [**using the starter template**][use-starter] to save time copying files from the theme's gem. We've prepared everything you need there!
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local.
+### Fork on GitHub
+
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and then clone your fork to local. (Please note that the default branch code is in development.  If you want the blog to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.)
 
 Install gem dependencies by:
 
@@ -105,16 +118,14 @@ $ bash tools/init.sh
 
 What it does is:
 
-  1. Remove some files or directories from your repository:
+1. Remove some files or directories from your repository:
+    - `.travis.yml`
+    - files under `_posts`
+    - folder `docs`
 
-      - `.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.
+2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
 
+3. Automatically create a commit to save the changes.
 
 ## Usage
 
@@ -122,10 +133,16 @@ What it does is:
 
 Update the variables of `_config.yml` as needed. Some of them are typical options:
 
-  - `url`
-  - `avatar`
-  - `timezone`
-  - `theme_mode`
+- `url`
+- `avatar`
+- `timezone`
+- `lang`
+
+### Customing Stylesheet
+
+If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
+
+Starting from `v4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
 
 ### Running Local Server
 
@@ -148,30 +165,30 @@ Open a browser and visit to _<http://localhost:4000>_.
 
 ### Deployment
 
-Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash, e.g, `/project-name`.
+Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash, e.g, `/project-name`.
 
-Now you can now choose ONE of the following methods to deploy your website.
+Now you can choose ONE of the following methods to deploy your Jekyll site.
 
 #### Deploy 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 GH Pages service.
 
-Ensure your Jekyll site has the file `/.github/workflows/pages-deploy.yml`.
-Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+Quickly check the files needed for GitHub Actions build:
 
-[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
+- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+- Ensure your Jekyll site has file `tools/test.sh` and `tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
 
-Rename your repoistory to `<GH-USERNAME>.github.io` on GitHub.
+And then rename your repository to `<GH-USERNAME>.github.io` on GitHub.
 
-And then publish your site by:
+Now publish your Jekyll site by:
 
-  1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
+1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
 
-  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_:
+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) through _Settings_ → _Options_ → _GitHub Pages_:
 
-      ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
+    ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
 
-  3. Visit your website at the address indicated by GitHub.
+3. Visit your website at the address indicated by GitHub.
 
 #### Deploy on Other Platforms
 
@@ -197,7 +214,7 @@ Unless you specified the output path, the generated site files will be placed in
 
 ## Documentation
 
-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).
+For more details and a better reading experience, please check out the [tutorials on the 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). Please note that the tutorials on the demo website or Wiki are based on the latest release, and the features of `master` branch usually ahead of the documentation.
 
 ## Contributing
 
@@ -205,20 +222,29 @@ The old saying, "Two heads are better than one." Consequently, welcome to report
 
 ## 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). The avatar and favicon design comes from [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/).
 
-:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
+:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas, or inspired me to write more readable documentation.
 
-Also, thank [JetBrains][JB] for providing the open source license.
+Last but not least, thank [JetBrains][jb] for providing the open source license.
 
-[![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][JB]
+## Sponsoring
 
-[JB]:https://www.jetbrains.com/?from=jekyll-theme-chirpy
+If you like this theme or find it helpful, please consider sponsoring me, because it will encourage and help me better maintain the project, I will be very grateful!
 
-## Supporting
-
-If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart: Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
+[![Buy Me a Coffee](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ff813f?logo=buy-me-a-coffee&logoColor=white)](https://www.buymeacoffee.com/coteschung)
+[![Wechat Pay](https://img.shields.io/badge/-Tip%20Me%20on%20WeChat-brightgreen?logo=wechat&logoColor=white)][cn-donation]
+[![Alipay](https://img.shields.io/badge/-Tip%20Me%20on%20Alipay-blue?logo=alipay&logoColor=white)][cn-donation]
 
 ## License
 
 This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
+
+[starter]: https://github.com/cotes2020/chirpy-starter
+[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
+
+<!-- ReadMe links -->
+
+[jb]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
+[cn-donation]: https://cotes.gitee.io/alipay-wechat-donation/

_config.yml

@@ -1,7 +1,23 @@
 # The Site Configuration
 
+# Import the theme
+theme: jekyll-theme-chirpy
+
+# Only if your site type is GitHub Project sites and doesn't have a custom domain,
+# change below value to '/projectname'.
+baseurl: ''
+
+# The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
+# If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed,
+# otherwise, the layout language will use the default value of 'en'.
+lang: en
+
+# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
+timezone: Asia/Shanghai
+
 # 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
@@ -14,8 +30,6 @@ description: >-                        # used by seo meta and the atom feed
 # fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
 url: ''
 
-author: your_full_name                  # change to your full name
-
 github:
   username: github_username             # change to your github username
 
@@ -23,7 +37,9 @@ twitter:
   username: twitter_username            # change to your twitter username
 
 social:
-  name: your_full_name                  # it will shows as the copyright owner in Footer
+  # Change to your full name.
+  # It will be displayed as the default author of the posts and the copyright owner in the Footer
+  name: your_full_name
   email: example@doamin.com             # change to your email address
   links:
     # The first element serves as the copyright owner's link
@@ -34,31 +50,16 @@ social:
     # - https://www.linkedin.com/in/username
 
 google_site_verification: google_meta_tag_verification # change to your verification string
-# --------------------------
 
+# ↑ --------------------------
 
-# Only if your site type is GitHub Project sites and doesn't have a custom domain,
-# change below value to '/projectname'.
-baseurl: ''
-
-# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
-timezone: Asia/Shanghai
 
 google_analytics:
-  id: ''          # Fill with your Google Analytics ID
+  id: ''              # fill in your Google Analytics ID
+  # Google Analytics pageviews report settings
   pv:
-    # The Google Analytics pageviews switch.
-    # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
-    enabled: false
-    # the next options only valid when `google_analytics.pv` is enabled.
-    proxy_url: ''
-    proxy_endpoint: ''
-    cache: false  # pv data local cache, good for the users from GFW area.
-
-disqus:
-  comments: false  # boolean type, the global switch for posts comments.
-  shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
-
+    proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
 
 # Prefer color scheme setting.
 #
@@ -69,7 +70,6 @@ disqus:
 # Available options:
 #
 #     light  - Use the light color scheme
-#
 #     dark   - Use the dark color scheme
 #
 theme_mode:   # [light|dark]
@@ -87,8 +87,14 @@ avatar: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/avatar.jpg
 # boolean type, the global switch for ToC in posts.
 toc: true
 
+disqus:
+  comments: false  # boolean type, the global switch for posts comments.
+  shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
+
 paginate: 10
 
+# ------------ The following options are not recommended to be modified ------------------
+
 kramdown:
   syntax_highlighter: rouge
   syntax_highlighter_opts:   # Rouge Options › https://github.com/jneen/rouge#full-options
@@ -100,10 +106,6 @@ kramdown:
       line_numbers: true
       start_line: 1
 
-# DO NOT change this unless you're a Pro user on Jekyll and Web development,
-# or you think you're smart enough to change other relevant URLs within this template.
-permalink: /posts/:title/
-
 collections:
   tabs:
     output: true
@@ -119,55 +121,22 @@ defaults:
       layout: post
       comments: true    # Enable comments in posts.
       toc: true         # Display TOC column in posts.
-      breadcrumb:
-        -
-          label: Posts
-          url: /
+      # DO NOT modify the following parameter unless you are confident enough
+      # to update the code of all other post links in this project.
+      permalink: /posts/:title/
   -
     scope:
       path: _drafts
     values:
       comments: false
-  -
-    scope:
-      path: index.html
-    values:
-      breadcrumb:
-        -
-          label: Posts
-  -
-    scope:
-      path: tags
-    values:
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Tags
-          url: /tabs/tags/
-  -
-    scope:
-      path: categories
-    values:
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Categories
-          url: /tabs/categories/
   -
     scope:
       path: ''
       type: tabs             # see `site.collections`
     values:
       layout: page
+      permalink: /:title/
       dynamic_title: true    # Hide title in mobile screens.
-      breadcrumb:
-        -
-          label: Home
-          url: /
 
 sass:
   style: compressed
@@ -182,17 +151,15 @@ compress_html:
     envs: [development]
 
 exclude:
-  - vendor
-  - Gemfile.lock
-  - Gemfile
+  - '*.gem'
+  - '*.gemspec'
   - tools
   - docs
   - README.md
   - LICENSE
   - gulpfile.js
   - node_modules
-  - package.json
-  - package-lock.json
+  - '*.json'
 
 jekyll-archives:
   enabled: [categories, tags]

_data/date_format.yml

@@ -1,7 +0,0 @@
-#  The date format
-
-tooltip: "%a, %b %e, %Y, %l:%M %p %z"
-
-post:
-  long: "%b %e, %Y"
-  short: "%b %e"

_data/label.yml

@@ -1,19 +0,0 @@
-# The label text of site.
-
-panel:
-  lastmod: Recent Update
-  trending_tags: Trending Tags
-  toc: Contents
-
-post:
-  relate_posts: Further Reading
-  share: Share
-  button:
-    next: Newer
-    previous: Older
-
-search_hint: Search   # text show on search bar
-
-pin_prompt: Pinned    # pinned prompt
-
-read_time_unit: min   # see posts' time to read

_data/locales/en.yml

@@ -0,0 +1,86 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Category
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Home
+  categories: Categories
+  tags: Tags
+  archives: Archives
+  about: About
+
+# the text displayed in the search bar & search results
+search:
+  hint: search
+  cancel: Cancel
+  no_results: Oops! No result founds.
+
+panel:
+  lastmod: Recent Update
+  trending_tags: Trending Tags
+  toc: Contents
+
+#  The liquid date format › http://strftime.net/
+date_format:
+  tooltip: '%a, %b %e, %Y, %l:%M %p %z'
+  post:
+    long: '%b %e, %Y'
+    short: '%b %e'
+    archive_month: '%b'
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: This post is licensed under :LICENSE_NAME by the author.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Some rights reserved.
+  verbose: >-
+    Except where otherwise noted, the blog posts on this site are licensed
+    under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
+  hint_template: :HEAD_BAK to try finding it again, or search for it on the :ARCHIVES_PAGE.
+  head_back: Head back Home
+  archives_page: Archives page
+
+# ----- Posts related labels -----
+
+post:
+  published: 'on'
+  updated: Updated
+  timeago:
+    day: days ago
+    hour: hours ago
+    minute: minutes ago
+    just_now: just now
+  words: words
+  pageview_measure: views
+  read_time:
+    unit: min
+    prompt: read
+  relate_posts: Further Reading
+  share: Share
+  button:
+    next: Newer
+    previous: Older
+    copy: Copied!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Pinned
+
+# categories page
+categories:
+  category_measure: categories
+  post_measure: posts

_data/locales/id-ID.yml

@@ -0,0 +1,86 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Postingan
+  category: Kategori
+  tag: Tagar
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Beranda
+  categories: Kategori
+  tags: Tagar
+  archives: Arsip
+  about: Tentang
+
+# the text displayed in the search bar & search results
+search:
+  hint: Cari
+  cancel: Batal
+  no_results: Ups! Tidak ada hasil yang ditemukan.
+
+panel:
+  lastmod: Postingan Terbaru
+  trending_tags: Tagar Terpopuler
+  toc: Konten
+
+#  The liquid date format › http://strftime.net/
+date_format:
+  tooltip: "%a, %e %b, %Y, %l:%M %p"
+  post:
+    long: "%e %b, %Y"
+    short: "%e %b"
+    archive_month: "%b"
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Postingan ini dilisensikan di bawah :LICENSE_NAME oleh penulis.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Sebagian konten dilindungi.
+  verbose: >-
+    Kecuali jika dinyatakan, Postingan blog di situs ini dilisensikan
+    di bawah Lisensi Creative Commons Attribution 4.0 International (CC BY 4.0) oleh penulis.
+
+meta: Didukung oleh :PLATFORM dengan tema :THEME.
+
+not_found:
+  statment: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
+  hint_template: :HEAD_BAK untuk mencoba mencari kembali, atau cari di :ARCHIVES_PAGE.
+  head_back: Kembali ke Beranda
+  archives_page: Halaman Arsip
+
+# ----- Posts related labels -----
+
+post:
+  published: "pada"
+  updated: Diperbarui
+  timeago:
+    day: hari yang lalu
+    hour: jam yang lalu
+    minute: menit yang lalu
+    just_now: baru saja
+  words: kata
+  pageview_measure: dilihat
+  read_time:
+    unit: menit
+    prompt: baca
+  relate_posts: Postingan Lainya
+  share: Bagikan
+  button:
+    next: Terbaru
+    previous: Terlama
+    copy: Disalin!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Disematkan
+
+# categories page
+categories:
+  category_measure: kategori
+  post_measure: Postingan

_data/locales/zh-CN.yml

@@ -0,0 +1,85 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: 文章
+  category: 分类
+  tag: 标签
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: 首页
+  categories: 分类
+  tags: 标签
+  archives: 归档
+  about: 关于
+
+# the text displayed in the search bar & search results
+search:
+  hint: 搜索
+  cancel: 取消
+  no_results: 搜索结果为空
+
+panel:
+  lastmod: 最近更新
+  trending_tags: 热门标签
+  toc: 文章内容
+
+#  The liquid date format › http://strftime.net/
+date_format:
+  tooltip: '%F, %R %z'
+  post:
+    long: '%F'
+    short: '%m-%d'
+    archive_month: '%m月'
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: 本文由作者按照 :LICENSE_NAME 进行授权
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: 保留部分权利。
+  verbose: >-
+    除非另有说明，本网站上的博客文章均由作者按照知识共享署名 4.0 国际 (CC BY 4.0) 许可协议进行授权。
+
+meta: 本站由 :PLATFORM 生成，采用 :THEME 主题。
+
+not_found:
+  statment: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
+  hint_template: :HEAD_BAK尝试再次查找它，或在:ARCHIVES_PAGE上搜索它。
+  head_back: 返回主页
+  archives_page: 归档页面
+
+# ----- Posts related labels -----
+
+post:
+  published: 发表于
+  updated: 更新于
+  timeago:
+    day: 天前
+    hour: 小时前
+    minute: 分钟前
+    just_now: 刚刚
+  words: 字
+  pageview_measure: 次浏览
+  read_time:
+    unit: 分钟
+    prompt: 阅读
+  relate_posts: 相关文章
+  share: 分享
+  button:
+    next: 下一篇
+    previous: 上一篇
+    copy: 已复制！
+  # pinned prompt of posts list on homepage
+  pin_prompt: 顶置
+
+# categories page
+categories:
+  category_measure: 个分类
+  post_measure: 篇文章

_data/rights.yml

@@ -1,11 +0,0 @@
-#  License data
-
-license:
-  name: CC BY 4.0
-  link: "https://creativecommons.org/licenses/by/4.0/"
-
-brief: Some rights reserved.
-
-verbose: >-
-  Except where otherwise noted, the blog posts on this site are licensed
-  under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.

_includes/css-selector.html

@@ -8,3 +8,8 @@
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css">
 {% endif %}
+
+{% if page.layout == 'page' or page.layout == 'post' %}
+  <!-- Manific Popup -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css">
+{% endif %}

_includes/disqus.html

@@ -1,25 +1,54 @@
 <!--
   The Disqus lazy loading.
-  Powered by: <https://github.com/osvaldasvalutis/disqusLoader.js>
 -->
 
-<div id="disqus" class="pt-2 pb-2">
-  <p class="text-center text-muted pb-5">
-    Loading comments from <a href="https://disqus.com/">Disqus</a> ...
+<div id="disqus_thread" class="pt-2 pb-2">
+  <p class="text-center text-muted small mb-5">
+    Comments powered by <a href="https://disqus.com/">Disqus</a>.
   </p>
 </div>
 
-<script src="{{ '/assets/js/lib/jquery.disqusloader.min.js' | relative_url }}"></script>
-<script>
-  const options = {
-    scriptUrl: '//{{ site.disqus.shortname }}.disqus.com/embed.js',
-
-    disqusConfig: function() {
-      this.page.title = '{{ page.title }}';
-      this.page.url = '{{ page.url | absolute_url }}';
-      this.page.identifier = '{{ page.url }}';
-    }
+<script type="text/javascript">
+  var disqus_config = function () {
+    this.page.url = '{{ page.url | absolute_url }}';
+    this.page.identifier = '{{ page.url }}';
   };
 
-  $.disqusLoader('#disqus', options);
+  /* Lazy loading */
+
+  var disqus_observer = new IntersectionObserver(function (entries) {
+    if(entries[0].isIntersecting) {
+        (function () {
+            var d = document, s = d.createElement('script');
+            s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+            s.setAttribute('data-timestamp', +new Date());
+            (d.head || d.body).appendChild(s);
+        })();
+
+        disqus_observer.disconnect();
+    }
+  }, { threshold: [0] });
+
+  disqus_observer.observe(document.querySelector('#disqus_thread'));
+
+  /* Auto switch theme */
+
+  function reloadDisqus() {
+    /* Disqus hasn't been loaded */
+    if (typeof DISQUS === "undefined") {
+      return;
+    }
+
+    if (document.readyState == 'complete') {
+      DISQUS.reset({ reload: true, config: disqus_config });
+    }
+  }
+
+  const modeToggle = document.querySelector(".mode-toggle");
+
+  if (modeToggle !== null) {
+    modeToggle.addEventListener('click', reloadDisqus);
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
+  }
+
 </script>

_includes/favicons.html

@@ -1,32 +1,17 @@
 <!--
   The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
-  Generated by: https://www.favicon-generator.org/
+  Generated by: https://realfavicongenerator.net/
 -->
 
-{% capture icon_url %}{{ site.baseurl }}/assets/img/favicons{% endcapture %}
+{% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}
 
-<link rel="shortcut icon" href="{{ icon_url }}/favicon.ico" type="image/x-icon">
-<link rel="icon" href="{{ icon_url }}/favicon.ico" type="image/x-icon">
-
-<link rel="apple-touch-icon" href="{{ icon_url }}/apple-icon.png">
-<link rel="apple-touch-icon" href="{{ icon_url }}/apple-icon-precomposed.png">
-<link rel="apple-touch-icon" sizes="57x57" href="{{ icon_url }}/apple-icon-57x57.png">
-<link rel="apple-touch-icon" sizes="60x60" href="{{ icon_url }}/apple-icon-60x60.png">
-<link rel="apple-touch-icon" sizes="72x72" href="{{ icon_url }}/apple-icon-72x72.png">
-<link rel="apple-touch-icon" sizes="76x76" href="{{ icon_url }}/apple-icon-76x76.png">
-<link rel="apple-touch-icon" sizes="114x114" href="{{ icon_url }}/apple-icon-114x114.png">
-<link rel="apple-touch-icon" sizes="120x120" href="{{ icon_url }}/apple-icon-120x120.png">
-<link rel="apple-touch-icon" sizes="144x144" href="{{ icon_url }}/apple-icon-144x144.png">
-<link rel="apple-touch-icon" sizes="152x152" href="{{ icon_url }}/apple-icon-152x152.png">
-<link rel="apple-touch-icon" sizes="180x180" href="{{ icon_url }}/apple-icon-180x180.png">
-
-<link rel="icon" type="image/png" sizes="192x192"  href="{{ icon_url }}/android-icon-192x192.png">
-<link rel="icon" type="image/png" sizes="32x32" href="{{ icon_url }}/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="96x96" href="{{ icon_url }}/favicon-96x96.png">
-<link rel="icon" type="image/png" sizes="16x16" href="{{ icon_url }}/favicon-16x16.png">
-
-<link rel="manifest" href="{{ icon_url }}/manifest.json">
-<meta name='msapplication-config' content='{{ icon_url }}/browserconfig.xml'>
-<meta name="msapplication-TileColor" content="#ffffff">
-<meta name="msapplication-TileImage" content="{{ icon_url }}/ms-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_path }}/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ favicon_path }}/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ favicon_path }}/favicon-16x16.png">
+<link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
+<link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
+<meta name="apple-mobile-web-app-title" content="{{ site.title }}">
+<meta name="application-name" content="{{ site.title }}">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="{{ favicon_path }}/browserconfig.xml">
 <meta name="theme-color" content="#ffffff">

_includes/footer.html

@@ -8,20 +8,28 @@
       <p class="mb-0">
         © {{ 'now' | date: "%Y" }}
         <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        {% if site.data.rights.brief %}
+        {% if site.data.locales[lang].copyright.brief %}
         <span data-toggle="tooltip" data-placement="top"
-          title="{{ site.data.rights.verbose }}">{{ site.data.rights.brief }}</span>
+          title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
         {% endif %}
       </p>
     </div>
 
     <div class="footer-right">
       <p class="mb-0">
-        Powered by
-        <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-        with
-        <a href="{{ site.data.meta.homepage }}" target="_blank" rel="noopener">{{ site.data.meta.name }}</a>
-        theme.
+        {% capture _platform %}
+          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
+        {% endcapture %}
+
+        {% capture _theme %}
+          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
+        {% endcapture %}
+
+        {{ site.data.locales[lang].meta
+          | default: 'Powered by :PLATFORM with :THEME theme.'
+          | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
+        }}
+
       </p>
     </div>
 

_includes/head.html

@@ -7,19 +7,21 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   {% if page.layout == 'home' or page.layout == 'post' %}
-    <meta name="pv-cache-enabled" content="{{ site.google_analytics.pv.enabled }}">
 
-    {% if site.google_analytics.pv.enabled %}
-      {% if site.google_analytics.pv.proxy_endpoint != ''
-        and site.google_analytics.pv.proxy_endpoint %}
-        <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
-      {% endif %}
-
-      {% if site.google_analytics.pv.cache %}
-        <meta name="pv-cache-data" content="{{ '/assets/js/data/pageviews.json' | relative_url }}">
-      {% endif %}
+    <!-- i18n for `_javascript/utils/timeago.js` -->
+    <meta name="day-prompt" content="{{ site.data.locales[lang].post.timeago.day }}">
+    <meta name="hour-prompt" content="{{ site.data.locales[lang].post.timeago.hour }}">
+    <meta name="minute-prompt" content="{{ site.data.locales[lang].post.timeago.minute }}">
+    <meta name="justnow-prompt" content="{{ site.data.locales[lang].post.timeago.just_now }}">
 
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
     {% endif %}
+
+    {% if site.google_analytics.pv.cache_path %}
+      <meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
+    {% endif %}
+
   {% endif %}
 
   {% seo title=false %}
@@ -45,36 +47,29 @@
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
 
-    {% if site.google_analytics.pv.proxy_url and site.google_analytics.pv.enabled %}
-      <link rel="preconnect" href="{{ site.google_analytics.pv.proxy_url }}" crossorigin="use-credentials">
-      <link rel="dns-prefetch" href="{{ site.google_analytics.pv.proxy_url }}">
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
+        | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
+
+      <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
+      <link rel="dns-prefetch" href="{{ proxy_url }}">
     {% endif %}
   {% endif %}
 
   <!-- jsDelivr CDN -->
-  <link rel="preconnect" href="cdn.jsdelivr.net">
-  <link rel="dns-prefetch" href="cdn.jsdelivr.net">
+  <link rel="preconnect" href="https://cdn.jsdelivr.net">
+  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
 
   <!-- Bootstrap -->
-  <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">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
 
   <!-- Font Awesome -->
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
-    integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
-    crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css">
 
   {% include css-selector.html %}
 
-  <!-- JavaScripts -->
+  <!-- JavaScript -->
 
   <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
 
-  <script defer
-    src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
-
-  {% include js-selector.html %}
-
 </head>

_includes/js-selector.html

@@ -2,20 +2,28 @@
   JS selector for site.
 -->
 
+<!-- layout specified -->
+
 {% if page.layout == 'home' or page.layout == 'post' %}
-  {% if site.google_analytics.pv.enabled %}
+  {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
     <!-- pv-report needs countup.js -->
     <script async src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
-    <script async src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
+    <script defer src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
   {% endif %}
 {% endif %}
 
+{% if page.layout == 'post' or page.layout == 'page' %}
+  <!-- image lazy-loading & popup -->
+  <script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js,npm/clipboard@2/dist/clipboard.min.js"></script>
+{% endif %}
+
 {% if page.layout == 'home'
+    or page.layout == 'categories'
     or page.layout == 'post'
-    or page.layout == 'categories' %}
+    or page.layout == 'page' %}
   {% assign type = page.layout %}
 {% else %}
-  {% assign type = "page" %}
+  {% assign type = "commons" %}
 {% endif %}
 
 {% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}
@@ -23,10 +31,31 @@
 
 {% if page.math %}
   <!-- MathJax -->
-  <script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <script>
+  /* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
+  MathJax = {
+    tex: {
+      inlineMath: [              /* start/end delimiter pairs for in-line math */
+        ['$','$'],
+        ['\\(','\\)']
+      ],
+      displayMath: [             /* start/end delimiter pairs for display math */
+        ['$$', '$$'],
+        ['\\[', '\\]']
+      ]
+    }
+  };
+  </script>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script type="text/javascript" id="MathJax-script" async
+    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+  </script>
 {% endif %}
 
+<!-- commons -->
+
+<script src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.16.1,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
+
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   <script defer src="{{ '/app.js' | relative_url }}"></script>

_includes/lang.html

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

_includes/lozad.html

@@ -1,10 +0,0 @@
-<!--
-  image lazy load: https://github.com/ApoorvSaxena/lozad.js
--->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
-
-<script type="text/javascript">
-  const imgs = document.querySelectorAll('.post-content img');
-  const observer = lozad(imgs);
-  observer.observe();
-</script>

_includes/no-zero-date.html

@@ -0,0 +1,13 @@
+{% comment %}
+  Remove the zero padding from a month/day string
+{% endcomment %}
+
+{% assign ret = include.date_str %}
+{% assign _first_chat = ret | slice: 0 %}
+
+{% if _first_chat == '0' %}
+  {% assign _last_idx = ret.size | minus: 1 %}
+  {% assign ret = ret | slice: 1, _last_idx %}
+{% endif %}
+
+{{ ret | replace: ' 0', ' ' }}

_includes/panel.html

@@ -2,6 +2,8 @@
   The Pannel on right side (Desktop views)
 -->
 
+{% include lang.html %}
+
 <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
 
   <div class="access">
@@ -11,7 +13,7 @@
   {% if update_list.size > 0 %}
 
     <div id="access-lastmod" class="post">
-      <span>{{- site.data.label.panel.lastmod | default: 'Recent Update' -}}</span>
+      <span>{{- site.data.locales[lang].panel.lastmod -}}</span>
       <ul class="post-content pl-0 pb-1 ml-1 mt-2">
 
       {% for item in update_list %}
@@ -30,7 +32,7 @@
 
   {% if trending_tags.size > 0 %}
     <div id="access-tags">
-      <span>{{- site.data.label.panel.trending_tags | default: 'Trending Tags' -}}</span>
+      <span>{{- site.data.locales[lang].panel.trending_tags -}}</span>
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
 
       {% for tag_name in trending_tags %}
@@ -48,7 +50,7 @@
     <script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
     <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
       <span class="pl-3 pt-2 mb-2">
-      {{- site.data.label.panel.toc | default: 'Contents' -}}
+      {{- site.data.locales[lang].panel.toc -}}
       </span>
       <nav id="toc" data-toggle="toc"></nav>
     </div>

_includes/post-nav.html

@@ -5,22 +5,24 @@
 <div class="post-navigation d-flex justify-content-between">
   {% if page.previous.url %}
   <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary"
-    prompt="{{ site.data.label.post.button.previous | default: 'previous' }}">
+    prompt="{{ site.data.locales[lang].post.button.previous }}">
     <p>{{ page.previous.title }}</p>
   </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled">
+  <span class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.locales[lang].post.button.previous }}">
     <p>-</p>
   </span>
   {% endif %}
 
   {% if page.next.url %}
   <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary"
-    prompt="{{ site.data.label.post.button.next | default: 'next' }}">
+    prompt="{{ site.data.locales[lang].post.button.next }}">
     <p>{{ page.next.title }}</p>
   </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled">
+  <span class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.locales[lang].post.button.next }}">
     <p>-</p>
   </span>
   {% endif %}

_includes/post-paginator.html

@@ -2,13 +2,14 @@
   The paginator for post list on HomgPage.
 -->
 
-<ul class="pagination mt-4 mb-0 pl-lg-2">
+<ul class="pagination align-items-center mt-4 mb-0 pl-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
     {% 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>
@@ -65,12 +66,19 @@
 
   {% endfor %}
 
+  <!-- mobile pagination -->
+  <li class="page-index align-middle">
+    <span>{{ paginator.page }}</span>
+    <span class="text-muted">/ {{ paginator.total_pages }}</span>
+  </li>
+
   <!-- right arrow -->
   {% 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>

_includes/post-sharing.html

@@ -3,7 +3,7 @@
 -->
 
 <div class="share-wrapper">
-  <span class="share-label text-muted mr-1">{{ site.data.label.post.share | default: 'Share' }}</span>
+  <span class="share-label text-muted mr-1">{{ site.data.locales[lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign url = page.url | absolute_url %}
@@ -16,8 +16,10 @@
         </a>
     {% endfor %}
 
-    <i class="fa-fw fas fa-link small" onclick="copyLink()"
-        data-toggle="tooltip" data-placement="top" title="Copy link"></i>
+    <i class="fa-fw fas fa-link small" onclick="copyLink('', '{{ site.data.locales[lang].post.button.copy.succeed }}')"
+        data-toggle="tooltip" data-placement="top"
+        title="{{ site.data.locales[lang].post.button.copy.title }}">
+    </i>
 
   </span>
 </div>

_includes/read-time.html

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

_includes/refactor-content.html

@@ -8,6 +8,7 @@
   In order to allow a wide table to scroll horizontally,
   we suround the markdown table with `<div class="table-wrapper">` and `</div>`
 -->
+
 {% if _content contains '<table>' %}
   {% assign _content = _content
     | replace: '<table>', '<div class="table-wrapper"><table>'
@@ -21,6 +22,7 @@
   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'
@@ -29,14 +31,20 @@
 {% endif %}
 
 <!-- Add attribute 'hide-bullet' to the checkbox list -->
+
 {% if _content contains '<li class="task-list-item"><' %}
   {% assign _content = _content
     | replace: '"task-list-item"><', '"task-list-item" hide-bullet><'
   %}
 {% endif %}
 
+
+<!-- images -->
+
 {% if _content contains '<img src="' %}
 
+  <!-- add CDN prefix if it exists -->
+
   {% if site.img_cdn != '' %}
     {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
   {% else %}
@@ -46,21 +54,93 @@
   {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
 
   <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-  {% assign lozad = true %}
-  {% assign img_placehodler
-    = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
 
-  {% assign lozad_replacement = '<img src="'
-    | append: img_placehodler
-    | append: '" data-src="' %}
+  {% assign _content = _content | replace: '<img src="', '<img data-proofer-ignore data-src="' %}
 
-  {% assign _content = _content | replace: '<img src="', lozad_replacement %}
+  <!-- add image placehoder to prevent layout reflow -->
+
+  {% assign _img_content = nil %}
+
+  {% assign _images = _content | split: '<img ' %}
+
+  {% for _img in _images %}
+    {% if forloop.first %}
+      {% assign _img_content = _img %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _width = nil %}
+    {% assign _height = nil %}
+    {% assign _attrs = _img | split: '>' | first | split: ' ' %}
+
+    {% for _attr in _attrs %}
+      {% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %}
+      {% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %}
+
+      {% case _key %}
+        {% when 'width' %}
+          {% assign _width = _value %}
+        {% when 'height' %}
+          {% assign _height = _value %}
+      {% endcase %}
+
+      {% if _width and _height %}
+        {% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %}
+        {% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img %}
+        {% break %}
+      {% endif %}
+
+    {% endfor %}
+
+    {% unless _width and _height %}
+      {% assign _img_content = _img_content | append: '<img ' | append: _img %}
+    {% endunless %}
+
+  {% endfor %}
+
+  {% assign _content = _img_content %}
 
 {% endif %}
 
+<!-- Add header for code snippets -->
+
+{% if _content contains '<div class="highlight"><code>' %}
+  {% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
+  {% assign _new_content = '' %}
+
+  {% for _snippet in _code_spippets %}
+
+    {% if forloop.last %}
+      {% assign _new_content = _new_content | append: _snippet %}
+
+    {% else %}
+
+      {% assign _left = _snippet | split: '><' | last%}
+
+      {% if _left contains 'file="' %}
+        {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+      {% else %}
+        {% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
+      {% endif %}
+
+      {% assign _new_content = _new_content | append: _snippet
+          | append: '<div class="code-header" text-data="'
+          | append: _text
+          | append: '"><button data-original-title="'
+          | append: site.data.locales[lang].post.button.copy
+          | append: '"><i class="far fa-clone"></i></button></div>'
+          | append: '<div class="highlight"><code>'
+      %}
+
+    {% endif %}
+
+  {% endfor %}
+
+  {% assign _content = _new_content %}
+
+{% endif %}
+
+
 <!-- return -->
-{{ _content }}
 
-{% if lozad %}
-  {% include lozad.html %}
-{% endif %}
+{{ _content }}

_includes/related-posts.html

@@ -81,7 +81,7 @@
 {% if index_list.size > 0 %}
   <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
     <h3 class="pt-2 mt-1 mb-4 ml-1"
-      data-toc-skip>{{ site.data.label.post.relate_posts | default: 'Further Reading' }}</h3>
+      data-toc-skip>{{ site.data.locales[lang].post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
       {% assign index = entry | plus: 0 %}

_includes/search-loader.html

@@ -1,21 +1,22 @@
 <!--
   Jekyll Simple Search loader
+  See: <https://github.com/christian-fei/Simple-Jekyll-Search>
 -->
 
 {% capture result_elem %}
 <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
   <a href="{{ site.url }}{url}">{title}</a>
   <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
-    <div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div>
-    <div><i class="fa fa-tag fa-fw"></i>{tags}</div>
+    {categories}
+    {tags}
   </div>
   <p>{snippet}</p>
 </div>
 {% endcapture %}
 
-{% capture not_found %}<p class="mt-5">Oops! No result founds.</p>{% endcapture %}
+{% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}
 
-<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js"></script>
 
 <script>
 SimpleJekyllSearch({
@@ -23,6 +24,23 @@ SimpleJekyllSearch({
   resultsContainer: document.getElementById('search-results'),
   json: '{{ '/assets/js/data/search.json' | relative_url }}',
   searchResultTemplate: '{{ result_elem | strip_newlines }}',
-  noResultsText: '{{ not_found }}'
+  noResultsText: '{{ not_found }}',
+  templateMiddleware: function(prop, value, template) {
+    if (prop === 'categories') {
+      if (value === '') {
+        return `${value}`;
+      } else {
+        return `<div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+      }
+    }
+
+    if (prop === 'tags') {
+      if (value === '') {
+        return `${value}`;
+      } else {
+        return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+      }
+    }
+  }
 });
 </script>

_includes/search-results.html

@@ -2,9 +2,9 @@
   The Search results
 -->
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-12 col-xl-11 post-content">
+  <div class="col-12 col-sm-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags | default: 'Trending Tags' }}</h4>
+      <h4 class="text-muted mb-4">{{ site.data.locales[lang].panel.trending_tags }}</h4>
 
       {% include trending-tags.html %}
 

_includes/sidebar.html

@@ -2,8 +2,7 @@
   The Side Bar
 -->
 
-<div id="sidebar" class="d-flex flex-column align-items-end">
-
+<div id="sidebar" class="d-flex flex-column align-items-end" lang="{{lang}}">
   <div class="profile-wrapper text-center">
     <div id="avatar">
       <a href="{{ '/' | relative_url }}" alt="avatar" class="mx-auto">
@@ -21,19 +20,19 @@
     </div>
 
     <div class="site-title mt-3">
-      <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
+      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
     </div>
-
-    <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
+    <div class="site-subtitle font-italic">{{ site.tagline }}</div>
 
   </div><!-- .profile-wrapper -->
 
   <ul class="w-100">
+
     <!-- home -->
     <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
       <a href="{{ '/' | relative_url }}" class="nav-link">
         <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ "HOME" }}</span>
+        <span>{{ site.data.locales[lang].tabs.home | upcase }}</span>
       </a>
     </li>
     <!-- the real tabs -->
@@ -41,7 +40,9 @@
     <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
       <a href="{{ tab.url | relative_url }}" class="nav-link">
         <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ tab.title | upcase }}</span>
+        {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
+
+        <span>{{ site.data.locales[lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
     {% endfor %}

_includes/timeago.html

@@ -1,27 +1,27 @@
 <!--
   Date format snippet
+  See: /assets/js/_utils/timeage.js
 -->
 
-{% assign tooltip_df = site.data.date_format.tooltip | default: '%a, %b %e, %Y, %l:%M %p %z' %}
-{% assign post_long_df = site.data.date_format.post.long | default: '%b %e, %Y' %}
-{% assign post_short_df = site.data.date_format.post.short | default: '%b %e' %}
+{% assign tooltip_df = site.data.locales[lang].date_format.tooltip %}
+{% assign post_long_df = site.data.locales[lang].date_format.post.long %}
+{% assign post_short_df = site.data.locales[lang].date_format.post.short %}
 
+{% if include.preposition %}
+  {{ include.preposition }}
+{% endif %}
 <span class="timeago {% if include.class %}{{ include.class }}{% endif %}"
   {% if include.tooltip %}
     data-toggle="tooltip"
     data-placement="bottom"
     title="{{ include.date | date: tooltip_df }}"
   {% endif %}>
-
-  {% assign this_year = site.time | date: "%Y" %}
-  {% assign post_year = include.date | date: "%Y" %}
-
-  {% if post_year == this_year %}
+  {%- assign this_year = site.time | date: "%Y" -%}
+  {%- assign post_year = include.date | date: "%Y" -%}
+  {%- if post_year == this_year -%}
     {{ include.date | date: post_short_df }}
-  {% else %}
+  {%- else -%}
     {{ include.date | date: post_long_df }}
-  {% endif %}
-
+  {%- endif -%}
   <i class="unloaded">{{ include.date | date_to_xmlschema }}</i>
-
 </span>

_includes/topbar.html

@@ -5,21 +5,43 @@
 <div id="topbar-wrapper" class="row justify-content-center topbar-down">
   <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
     <span id="breadcrumb">
-      {% for item in page.breadcrumb %}
-        {% if item.url %}
-        <span>
-          <a href="{{ site.baseurl }}{{ item.url | remove: '.html'}}">
-            {{ item.label }}
-          </a>
-        </span>
-        {% else %}
-          <span>{{ item.label }}</span>
+
+    {% assign paths = page.url | split: '/' %}
+
+    {% if paths.size == 0 or page.layout == 'home' %}
+      <!-- index page -->
+      <span>{{ site.data.locales[lang].tabs.home | capitalize }}</span>
+
+    {% else %}
+
+      {% for item in paths %}
+
+        {% if forloop.first %}
+          <span>
+            <a href="{{ '/' | relative_url }}">
+              {{ site.data.locales[lang].tabs.home | capitalize }}
+            </a>
+          </span>
+
+        {% elsif forloop.last %}
+
+          {% if page.collection == 'tabs' %}
+            <span>{{ site.data.locales[lang].tabs[item] | default: page.title }}</span>
+          {% else %}
+            <span>{{ page.title }}</span>
+          {% endif %}
+
+        {% elsif page.layout == 'category' or page.layout == 'tag' %}
+          <span>
+            <a href="{{ item | relative_url }}">
+              {{ site.data.locales[lang].tabs[item] | default: page.title }}
+            </a>
+          </span>
         {% endif %}
+
       {% endfor %}
 
-      {% unless page.layout == "home" %}
-        <span>{{ page.title }}</span>
-      {% endunless %}
+    {% endif %}
 
     </span><!-- endof #breadcrumb -->
 
@@ -27,11 +49,12 @@
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
-        {{- site.title -}}
-      {% elsif page.dynamic_title %}
-        {{- page.title -}}
+        {{- site.data.locales[lang].title | default: site.title -}}
+      {% elsif page.collection == 'tabs' %}
+        {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
+        {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
       {% else %}
-        {{- page.layout | capitalize -}}
+        {{- site.data.locales[lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
 
@@ -39,10 +62,10 @@
     <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
       <input class="form-control" id="search-input" type="search"
-        aria-label="search" placeholder="{{ site.data.label.search_hint | default: 'Search' }}...">
+        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[lang].search.hint | capitalize }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
-    <span id="search-cancel" >Cancel</span>
+    <span id="search-cancel" >{{ site.data.locales[lang].search.cancel }}</span>
   </div>
 
 </div>

_javascript/commons/search-display.js

@@ -17,14 +17,12 @@ $(function() {
   const input = $("#search-input");
   const hints = $("#search-hints");
 
-
-  /*--- Actions in small screens (Sidebar unloaded) ---*/
-
   const scrollBlocker = (function () {
     let offset = 0;
     return {
       block() {
-        offset = $(window).scrollTop();
+        offset = window.scrollY;
+        $("html,body").scrollTop(0);
       },
       release() {
         $("html,body").scrollTop(offset);
@@ -35,6 +33,9 @@ $(function() {
     };
   }());
 
+
+  /*--- Actions in small screens (Sidebar unloaded) ---*/
+
   const mobileSearchBar = (function () {
     return {
       on() {
@@ -60,11 +61,11 @@ $(function() {
     return {
       on() {
         if (!visible) {
-          resultWrapper.removeClass("unloaded");
-          main.addClass("hidden");
-
-          visible = true;
+          // the block method must be called before $(#main) unloaded.
           scrollBlocker.block();
+          resultWrapper.removeClass("unloaded");
+          main.addClass("unloaded");
+          visible = true;
         }
       },
       off() {
@@ -75,12 +76,13 @@ $(function() {
           }
           resultWrapper.addClass("unloaded");
           btnClear.removeClass("visible");
-          main.removeClass("hidden");
+          main.removeClass("unloaded");
+
+          // now the release method must be called after $(#main) display
+          scrollBlocker.release();
 
           input.val("");
           visible = false;
-
-          scrollBlocker.release();
         }
       },
       isVisible() {

_javascript/copyright

@@ -0,0 +1,5 @@
+/*!
+ * Chirpy v4.2.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */

_javascript/utils/clipboard.js

@@ -0,0 +1,81 @@
+/*
+ * Initial the clipboard.js object
+ *
+ * Dependencies:
+ *   - popper.js (https://github.com/popperjs/popper-core)
+ *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
+ */
+
+$(function() {
+  const btnSelector = '.code-header>button';
+  const ICON_SUCCESS = 'fas fa-check';
+  const ATTR_LOCKED = 'locked';
+  const TIMEOUT = 2000; // in milliseconds
+
+  const clipboard = new ClipboardJS(btnSelector, {
+    target(trigger) {
+      return trigger.parentNode.nextElementSibling;
+    }
+  });
+
+  $(btnSelector).tooltip({
+    trigger: 'click',
+    placement: 'left'
+  });
+
+  function getIcon(btn) {
+    let iconNode = $(btn).children();
+    return iconNode.attr('class');
+  }
+
+  const ICON_DEFAULT = getIcon(btnSelector);
+
+  function setTooltip(btn) {
+    $(btn).tooltip('hide')
+      .tooltip('show');
+  }
+
+  function hideTooltip(btn) {
+    setTimeout(function() {
+      $(btn).tooltip('hide');
+    }, TIMEOUT);
+  }
+
+  function setSuccessIcon(btn) {
+    let btnNode = $(btn);
+    let iconNode = btnNode.children();
+    btnNode.attr(ATTR_LOCKED, true);
+    iconNode.attr('class', ICON_SUCCESS);
+  }
+
+  function resumeIcon(btn) {
+    let btnNode = $(btn);
+    let iconNode = btnNode.children();
+
+    setTimeout(function() {
+      btnNode.removeAttr(ATTR_LOCKED);
+      iconNode.attr('class', ICON_DEFAULT);
+    }, TIMEOUT);
+  }
+
+  function isLocked(btn) {
+    let locked = $(btn).attr(ATTR_LOCKED);
+    return locked === 'true';
+  }
+
+  clipboard.on('success', (e) => {
+    e.clearSelection();
+
+    if (isLocked(e.trigger)) {
+      return;
+    }
+
+    setTooltip(e.trigger);
+    hideTooltip(e.trigger);
+
+    setSuccessIcon(e.trigger);
+    resumeIcon($(e.trigger));
+
+  });
+
+});

_javascript/utils/img-extra.js

@@ -0,0 +1,47 @@
+/**
+  Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
+  and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
+*/
+
+$(function() {
+
+  const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
+
+  if ($(`${IMG_SCOPE} img`).length <= 0 ) {
+    return;
+  }
+
+  /* lazy loading */
+
+  const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
+  const observer = lozad(imgList);
+  observer.observe();
+
+  /* popup */
+
+  $(`${IMG_SCOPE} p > img[data-src],${IMG_SCOPE} img[data-src].preview-img`).each(
+    function() {
+      let nextTag = $(this).next();
+      const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : '';
+      const src = $(this).attr('data-src'); // created by lozad.js
+
+      $(this).wrap(`<a href="${src}" title="${title}" class="popup"></a>`);
+    }
+  );
+
+  $('.popup').magnificPopup({
+    type: 'image',
+    closeOnContentClick: true,
+    showCloseBtn: false,
+    zoom: {
+      enabled: true,
+      duration: 300,
+      easing: 'ease-in-out'
+    }
+  });
+
+  /* markup the image links */
+
+  $(`${IMG_SCOPE} a`).has('img').addClass('img-link');
+
+});

_javascript/utils/pageviews.js

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

_javascript/utils/timeago.js

@@ -10,25 +10,18 @@ $(function() {
 
   let intervalId = void 0;
 
-  function timeago(iso, isLastmod) {
+  const dPrompt = $("meta[name=day-prompt]").attr("content");
+  const hrPrompt = $("meta[name=hour-prompt]").attr("content");
+  const minPrompt = $("meta[name=minute-prompt]").attr("content");
+  const justnowPrompt = $("meta[name=justnow-prompt]").attr("content");
+
+  function timeago(isoDate, dateStr) {
     let now = new Date();
-    let past = new Date(iso);
+    let past = new Date(isoDate);
 
-    if (past.getFullYear() !== now.getFullYear()) {
-      toRefresh -= 1;
-      return past.toLocaleString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric"
-      });
-    }
-
-    if (past.getMonth() !== now.getMonth()) {
-      toRefresh -= 1;
-      return past.toLocaleString("en-US", {
-        month: "short",
-        day: "numeric"
-      });
+    if (past.getFullYear() !== now.getFullYear()
+        || past.getMonth() !== now.getMonth()) {
+      return dateStr;
     }
 
     let seconds = Math.floor((now - past) / 1000);
@@ -36,30 +29,29 @@ $(function() {
     let day = Math.floor(seconds / 86400);
     if (day >= 1) {
       toRefresh -= 1;
-      return day + " day" + (day > 1 ? "s" : "") + " ago";
+      return ` ${day} ${dPrompt}`;
     }
 
     let hour = Math.floor(seconds / 3600);
     if (hour >= 1) {
-      return hour + " hour" + (hour > 1 ? "s" : "") + " ago";
+      return ` ${hour} ${hrPrompt}`;
     }
 
     let minute = Math.floor(seconds / 60);
     if (minute >= 1) {
-      return minute + " minute" + (minute > 1 ? "s" : "") + " ago";
+      return ` ${minute} ${minPrompt}`;
     }
 
-    return (isLastmod ? "just" : "Just") + " now";
+    return justnowPrompt;
   }
 
   function updateTimeago() {
     $(".timeago").each(function() {
       if ($(this).children("i").length > 0) {
-        $(this).text();
-        let isLastmod = $(this).hasClass("lastmod");
+        let dateStr = $(this).clone().children().remove().end().text();
         let node = $(this).children("i");
-        let date = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
-        $(this).text(timeago(date, isLastmod));
+        let iosDate = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
+        $(this).text(timeago(iosDate, dateStr));
         $(this).append(node);
       }
     });

_layouts/archives.html

@@ -3,8 +3,10 @@ layout: page
 # The Archives of posts.
 ---
 
+{% include lang.html %}
 
 <div id="archives" class="pl-xl-2">
+
 {% for post in site.posts %}
   {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
   {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
@@ -17,9 +19,10 @@ layout: page
     <li>
       <div>
         {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
-        {% capture this_month %}{{ post.date | date: "%b" }}{% endcapture %}
+        {% capture _mth_df %}{{ site.data.locales[lang].date_format.post.archive_month }}{% endcapture %}
+        {% capture this_month %}{{ post.date | date: _mth_df }}{% endcapture %}
         <span class="date day">{{ this_day }}</span>
-        <span class="date month small text-muted">{{ this_month }}</span>
+        <span class="date month small text-muted">{% include no-zero-date.html date_str=this_month %}</span>
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       </div>
     </li>

_layouts/categories.html

@@ -3,6 +3,7 @@ layout: page
 # All the Categories of posts
 ---
 
+{% include lang.html %}
 
 {% assign HEAD_PREFIX = "h_" %}
 {% assign LIST_PREFIX = "l_" %}
@@ -33,28 +34,23 @@ layout: page
 
   <div class="card categories">
     <!-- top-category -->
-    <div class="card-header d-flex justify-content-between hide-border-bottom"
-        id="{{ HEAD_PREFIX }}{{ group_index }}">
+    <div id="{{ HEAD_PREFIX }}{{ group_index }}"
+      class="card-header d-flex justify-content-between hide-border-bottom">
       <span>
-      {% if sub_categories_size > 0 %}
-        <i class="far fa-folder-open fa-fw"></i>
-      {% else %}
-        <i class="far fa-folder fa-fw"></i>
-      {% endif %}
-        <a href="{{ site.baseurl }}/categories/{{ category_name | slugify | url_encode }}/"
-          class="ml-1 mr-2">
-          {{ category_name }}
-        </a>
+        <i class="far fa-folder{% if sub_categories_size > 0 %}-open{% endif %} fa-fw"></i>
+
+        {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %}
+        <a href="{{ _category_url | relative_url }}" class="ml-1 mr-2">{{ category_name }}</a>
 
         <!-- content count -->
         {% assign top_posts_size = site.categories[category_name] | size %}
         <span class="text-muted small font-weight-light">
           {% if sub_categories_size > 0 %}
             {{ sub_categories_size }}
-            {% if sub_categories_size > 1 %}categories{% else %}category{% endif %},
+            {{ site.data.locales[lang].categories.category_measure }},
           {% endif %}
             {{ top_posts_size }}
-            post{% if top_posts_size > 1 %}s{% endif %}
+            {{ site.data.locales[lang].categories.post_measure }}
         </span>
       </span>
 
@@ -80,11 +76,14 @@ layout: page
         {% for sub_category in sub_categories %}
         <li class="list-group-item">
           <i class="far fa-folder fa-fw"></i>
-          <a href="{{ site.baseurl }}/categories/{{ sub_category | slugify | url_encode }}/"
-            class="ml-1 mr-2">{{ sub_category }}</a>
+
+          {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %}
+          <a href="{{ _sub_ctg_url | relative_url }}" class="ml-1 mr-2">{{ sub_category }}</a>
+
           {% assign posts_size = site.categories[sub_category] | size %}
-          <span class="text-muted small font-weight-light">{{ posts_size }}
-            post{% if posts_size > 1 %}s{% endif %}
+          <span class="text-muted small font-weight-light">
+            {{ posts_size }}
+            {{ site.data.locales[lang].categories.post_measure }}
           </span>
         </li>
         {% endfor %}

_layouts/category.html

@@ -3,6 +3,8 @@ layout: page
 # The Category layout
 ---
 
+{% include lang.html %}
+
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
@@ -11,13 +13,13 @@ layout: page
   </h1>
 
   <ul class="post-content pl-0">
-    {% assign post_long_df = site.data.date_format.post.long | default: '%b %e, %Y' %}
+    {% assign post_df = site.data.locales[lang].date_format.post.long %}
 
     {% 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: post_long_df }}</span>
+      <span class="text-muted small">{{ post.date | date: post_df }}</span>
     </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -5,13 +5,15 @@ layout: compress
 
 <!DOCTYPE html>
 
+{% include lang.html %}
+
 {% capture prefer_mode %}
   {% if site.theme_mode %}
     mode="{{ site.theme_mode }}"
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ site.lang | split: "_" | first | default: "en" }}" {{ prefer_mode }}>
+<html lang="{{ site.lang }}" {{ prefer_mode }}>
 
   {% include head.html %}
 
@@ -46,6 +48,8 @@ layout: compress
 
     {% include search-loader.html %}
 
+    {% include js-selector.html %}
+
   </body>
 
 </html>

_layouts/home.html

@@ -3,9 +3,11 @@ layout: page
 # The Home page layout
 ---
 
+{% include lang.html %}
+
+{% assign pinned = site.posts | where: "pin", "true" %}
+{% assign default = site.posts | where_exp: "item", "item.pin != true" %}
 
-{% assign pinned = site.posts | where_exp: "item", "item.pin == true"  %}
-{% assign default = site.posts | where_exp: "item", "item.pin != true"  %}
 {% assign posts = "" | split: "" %}
 
 <!-- Get pinned posts -->
@@ -39,7 +41,6 @@ layout: page
   {% endfor %}
 {% endif %}
 
-
 <div id="post-list">
 
 {% for post in posts %}
@@ -68,7 +69,7 @@ layout: page
         {% include read-time.html content=post.content %}
 
         <!-- page views -->
-        {% if site.google_analytics.pv.enabled %}
+        {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
         <i class="far fa-eye fa-fw"></i>
         <span id="pv_{{-post.title-}}" class="pageviews">
           <i class="fas fa-spinner fa-spin fa-fw"></i>
@@ -79,7 +80,7 @@ layout: page
       {% if post.pin %}
       <div class="pin">
         <i class="fas fa-thumbtack fa-fw"></i>
-        <span>{{ site.data.label.pin_prompt | default: 'Pinned' }}</span>
+        <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
       </div>
       {% endif %}
 

_layouts/page.html

@@ -7,7 +7,14 @@ layout: default
   <div class="col-12 col-lg-11 col-xl-8">
     <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 mb-md-4">
     {% if page.dynamic_title %}
-      <h1 class="dynamic-title">{{ page.title }}</h1>
+      <h1 class="dynamic-title">
+        {% if page.collection == 'tabs' %}
+          {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
+          {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
+        {% else %}
+          {{- page.title -}}
+        {% endif %}
+      </h1>
       <div class="post-content">
         {{ content }}
       </div>

_layouts/post.html

@@ -3,6 +3,8 @@ layout: default
 # The posts' layout
 ---
 
+{% include lang.html %}
+
 <div class="row">
 
   <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
@@ -14,28 +16,31 @@ layout: default
       <div class="post-meta text-muted d-flex flex-column">
         <!-- Published date and author -->
         <div>
-          {% include timeago.html date=page.date tooltip=true %}
-          by
-          <span class="author">
-            {{ page.author | default: site.author }}
+          <span class="semi-bold">
+            {{ page.author | default: site.social.name }}
           </span>
+          {% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %}
+          {% include timeago.html date=page.date tooltip=true preposition=_preposition %}
         </div>
 
         <div>
           <!-- lastmod -->
           {% if page.last_modified_at %}
           <span>
-            Updated
+            {{ site.data.locales[lang].post.updated }}
             {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
           </span>
           {% endif %}
 
           <!-- read time -->
-          {% include read-time.html content=content %}
+          {% include read-time.html content=content prompt=true %}
 
           <!-- page views -->
-          {% if site.google_analytics.pv.enabled %}
-          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
+          {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
+          <span id="pv" class="pageviews">
+            <i class="fas fa-spinner fa-spin fa-fw"></i>
+          </span>
+          {{ site.data.locales[lang].post.pageview_measure }}
           {% endif %}
 
         </div>
@@ -44,8 +49,12 @@ layout: default
 
       <div class="post-content">
 
-        {% if page.image %}
-          <img src="{{ page.image }}" class="preview-img" alt="Preview Image">
+        {% if page.image.src %}
+          <img src="{{ page.image.src }}"
+            class="preview-img"
+            alt="{{ page.image.alt | default: "Preview Image" }}"
+            {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
+            {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
         {% endif %}
 
         {{ content }}
@@ -56,6 +65,7 @@ layout: default
 
         <!-- categories -->
         {% if page.categories.size > 0 %}
+
         <div class="post-meta mb-3">
           <i class="far fa-folder-open fa-fw mr-1"></i>
           {% for category in page.categories %}
@@ -80,13 +90,16 @@ layout: default
 
         <div class="post-tail-bottom
           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
-            <a href="{{ site.data.rights.license.link }}">{{ site.data.rights.license.name }}</a>
-            by the author.
-          </div>
+          {% if site.data.locales[lang].copyright.license.template %}
+            {% capture _replacement %}
+            <a href="{{ site.data.locales[lang].copyright.license.link }}">
+              {{ site.data.locales[lang].copyright.license.name }}
+            </a>
+            {% endcapture %}
+            {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
           {% endif %}
+          </div>
 
           {% include post-sharing.html %}
 

_layouts/tag.html

@@ -3,6 +3,7 @@ layout: page
 # The layout for Tag page
 ---
 
+{% include lang.html %}
 
 <div id="page-tag">
   <h1 class="pl-lg-2">
@@ -11,13 +12,13 @@ layout: page
     <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
   <ul class="post-content pl-0">
-    {% assign post_long_df = site.data.date_format.post.long | default: '%b %e, %Y' %}
+    {% assign post_df = site.data.locales[lang].date_format.post.long %}
 
     {% 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: post_long_df }}</span>
+      <span class="text-muted small">{{ post.date | date: post_df }}</span>
     </li>
     {% endfor %}
   </ul>

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

@@ -6,7 +6,10 @@ categories: [Blogging, Demo]
 tags: [typography]
 math: true
 mermaid: true
-image: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
+image:
+  src: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
+  width: 850
+  height: 585
 ---
 
 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.
@@ -49,14 +52,13 @@ Fluttering and dancing in the breeze.
 ### Unordered list
 
 - Chapter
-	- Setcion
+	- Section
       - Paragraph
 
 ### Task list
 
 - [ ] TODO
 - [x] Completed
-- Hold on
 - [ ] Defeat COVID-19
   - [x] Vaccine production
   - [ ] Economic recovery
@@ -97,34 +99,34 @@ Click the hook will locate the footnote[^footnote], and here is another footnote
 
 - Default (with caption)
 
-![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png)
+![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" }
 _Full screen width and center alignment_
 
 <br>
 
-- Specify width
+- Shadow
 
-![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="400"}
-_400px image width_
+![Window shadow](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/window.png){: .shadow width="1548" height="864" style="max-width: 90%" }
+_shadow effect (visible in light mode)_
 
 <br>
 
 - Left aligned
 
-![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="350" .normal}
+![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal}
 
 <br>
 
 - Float to left
 
-  ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="240" .left}
+  ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .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."
 
 <br>
 
 - Float to right
 
-  ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="240" .right}
+  ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .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."
 
 <br>
@@ -146,7 +148,7 @@ The mathematics powered by [**MathJax**](https://www.mathjax.org/):
 
 $$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
 
-When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are
+When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
 
 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
@@ -174,44 +176,23 @@ SHELL=/usr/local/bin/bash
 PYENV_SHELL=bash
 ```
 
-#### Ruby
-
-```ruby
-def sum_eq_n?(arr, n)
-  return true if arr.empty? && n == 0
-  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
-end
-```
-
 #### Shell
 
-```shell
+```bash
 if [ $? -ne 0 ]; then
     echo "The command was not successful.";
     #do the needful / exit
 fi;
 ```
 
-#### Liquid
+### Specific filename
 
-{% raw %}
-```liquid
-{% if product.title contains 'Pack' %}
-  This product's title contains the word Pack.
-{% endif %}
-```
-{% endraw %}
-
-#### Java
-
-```java
-private void writeObject(java.io.ObjectOutputStream s)
-  throws java.io.IOException {
-  // Write out any hidden serialization magic
-  s.defaultWriteObject();
-  for (E e: map.keySet()) s.writeObject(e);
-}
+```sass
+@import
+  "colors/light-typography",
+  "colors/dark-typography"
 ```
+{: file='_sass/jekyll-theme-chirpy.scss'}
 
 ## Reverse Footnote
 

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

@@ -4,6 +4,7 @@ author: Cotes Chung
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]
+render_with_liquid: false
 ---
 
 ## Naming and Path
@@ -72,7 +73,7 @@ math: true
 
 [**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagrams generation tool. To enable it on your post, add the following to the YAML block:
 
-```yml
+```yaml
 ---
 mermaid: true
 ---
@@ -84,14 +85,21 @@ Then you can use it like other markdown language: surround the graph code with `
 
 ### Preview image
 
-If you want to add an image to the top of the post contents, specify the url for the image by:
+If you want to add an image to the top of the post contents, specify the attribute `src`, `width`, `height` and `alt` for the image:
 
 ```yaml
 ---
-image: /path/to/image-file
+image:
+  src: /path/to/image/file
+  width: 1000   # in pixels
+  height: 400   # in pixels
+  alt: image alternative text
 ---
 ```
 
+Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. Later section ["Image size"](#image-size) will also mention this.
+
+
 ### Image caption
 
 Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
@@ -100,14 +108,16 @@ Add italics to the next line of an image，then it will become the caption and a
 ![img-description](/path/to/image)
 _Image Caption_
 ```
+{: .nolineno}
 
 ### Image size
 
-You can specify the width (and height) of a image with `width`:
+In order to prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image:
 
 ```markdown
-![Desktop View](/assets/img/sample/mockup.png){: width="400"}
+![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }
 ```
+{: .nolineno}
 
 ### Image position
 
@@ -118,22 +128,34 @@ By default, the image is centered, but you can specify the position by using one
   Image will be left aligned in below sample:
 
   ```markdown
-  ![Desktop View](/assets/img/sample/mockup.png){: .normal}
+  ![Desktop View](/assets/img/sample/mockup.png){: .normal }
   ```
+  {: .nolineno}
 
 - **Float to the left**
 
   ```markdown
-  ![Desktop View](/assets/img/sample/mockup.png){: .left}
+  ![Desktop View](/assets/img/sample/mockup.png){: .left }
   ```
+  {: .nolineno}
 
 - **Float to the right**
 
   ```markdown
-  ![Desktop View](/assets/img/sample/mockup.png){: .right}
+  ![Desktop View](/assets/img/sample/mockup.png){: .right }
   ```
+  {: .nolineno}
 
-**Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
+> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
+
+### Image shadow
+
+The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: .shadow }
+```
+{: .nolineno}
 
 ### CDN URL
 
@@ -142,6 +164,7 @@ If you host the images on the CDN, you can save the time of repeatedly writing t
 ```yaml
 img_cdn: https://cdn.com
 ```
+{: file='_config.yml' .nolineno}
 
 Once `img_cdn` is assigned, the CDN url will be added to the path of all images (images of site avatar and posts) starting with `/`.
 
@@ -150,12 +173,14 @@ For instance, when using images:
 ```markdown
 ![The flower](/path/to/flower.png)
 ```
+{: .nolineno}
 
 The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path:
 
 ```html
 <img src="https://cdn.com/path/to/flower.png" alt="The flower">
 ```
+{: .nolineno}
 
 ## Pinned Posts
 
@@ -169,31 +194,51 @@ pin: true
 
 ## Code Block
 
-Markdown symbols ```` ``` ```` can easily create a code block as following examples.
+Markdown symbols ```` ``` ```` can easily create a code block as follows:
 
 ```
-This is a common code snippet, without syntax highlight and line number.
+This is a plaintext code snippet.
 ```
 
-## Specific Language
+### Specifying Language
 
-Using ```` ```language ```` 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 !
+Using ```` ```{language} ```` you will get a code block with syntax highlight:
 
+````markdown
 ```yaml
-# Yaml code snippet
-items:
-    - part_no:   A4786
-      descrip:   Water Bucket (Filled)
-      price:     1.47
-      quantity:  4
+key: value
 ```
+````
+
+> **Limination**: The Jekyll style `highlight` tag ais not compatible with this theme.
+
+### Line Number
+
+By default, all languages except `plaintext`, `console` and `terminal` will display line numbers. When you want to hide the line number of the code block, you can append `{: .nolineno}` at the next line:
+
+````markdown
+```shell
+echo 'No more line numbers!'
+```
+{: .nolineno}
+````
+
+### Specifying the Filename
+
+You may have noticed that the code language will be displayed on the left side of the header of the code block. If you want to replace it with the file name, you can add the attribute `file` to achieve this:
+
+````markdown
+```shell
+# content
+```
+{: file="path/to/file" }
+````
 
 ### 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%}` .
+If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
 
+````markdown
 {% raw %}
 ```liquid
 {% if product.title contains 'Pack' %}
@@ -201,6 +246,9 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 {% endif %}
 ```
 {% endraw %}
+````
+
+Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
 
 ## Learn More
 

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

@@ -9,28 +9,30 @@ pin: true
 
 ## Prerequisites
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
+Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`. Please note that the version of `Ruby` must meet the requirements of the theme on [RubyGems.org](https://rubygems.org/gems/jekyll-theme-chirpy).
 
 ## Installation
 
 There are two ways to get the theme:
 
-  - Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy)
-  - Fork from GitHub
+- **[Install from RubyGems](#install-from-rubygems)** - Easy to update, isolate irrelevant project files so you can focus on writing.
+- **[Fork on GitHub](#fork-on-github)** - Convenient for custom development, but difficult to update, only suitable for web developers.
 
-### Install From Rubygems
+### Install from RubyGems
 
 Add this line to your Jekyll site's `Gemfile`:
 
 ```ruby
 gem "jekyll-theme-chirpy"
 ```
+{: .nolineno file='Gemfile' }
 
 And add this line to your Jekyll site's `_config.yml`:
 
 ```yaml
 theme: jekyll-theme-chirpy
 ```
+{: .nolineno file='_config.yml' }
 
 And then execute:
 
@@ -38,22 +40,23 @@ And then execute:
 $ bundle
 ```
 
-Finally, copy the missing files (refer to the [starter project][starter] for the detailed file directory structure) from the theme's gem to your Jekyll site, and append all the variables of the theme's `_config.yml` to your Jekyll site.
+Next, go to the installed local theme path:
 
-> **Hint**: To locate the theme’s gem, execute:
->
 ```console
-$ bundle info --path jekyll-theme-chirpy
+$ cd "$(bundle info --path jekyll-theme-chirpy)"
 ```
 
-Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem.
+And then copy the critical files (for details, see [starter project][starter]) from the theme's gem to your Jekyll site.
 
-[starter]: https://github.com/cotes2020/chirpy-starter
-[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+> ⚠️ **Watch out for duplicate files!**
+>
+> If your Jekyll site is created by the `jekyll new` command, there will be `index.markdown` and `about.markdown` in the root directory of your site. Please be sure to remove them, otherwise they will overwrite the `index.html` and `_tabs/about.html` from this project, resulting in blank or messy pages.
 
-### Fork From GitHub
+As an alternative, which we recommend, you can create a Jekyll site [**using the starter template**][use-starter] to save time copying files from the theme's gem. We've prepared everything you need there!
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local.
+### Fork on GitHub
+
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and then clone your fork to local. (Please note that the default branch code is in development.  If you want the blog to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.)
 
 Install gem dependencies by:
 
@@ -71,16 +74,14 @@ $ bash tools/init.sh
 
 What it does is:
 
-  1. Remove some files or directories from your repository:
+1. Remove some files or directories from your repository:
+    - `.travis.yml`
+    - files under `_posts`
+    - folder `docs`
 
-      - `.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.
+2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
 
+3. Automatically create a commit to save the changes.
 
 ## Usage
 
@@ -88,10 +89,16 @@ What it does is:
 
 Update the variables of `_config.yml` as needed. Some of them are typical options:
 
-  - `url`
-  - `avatar`
-  - `timezone`
-  - `theme_mode`
+- `url`
+- `avatar`
+- `timezone`
+- `lang`
+
+### Customing Stylesheet
+
+If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
+
+Starting from `v4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
 
 ### Running Local Server
 
@@ -114,30 +121,30 @@ Open a browser and visit to _<http://localhost:4000>_.
 
 ### Deployment
 
-Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash, e.g, `/project-name`.
+Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash, e.g, `/project-name`.
 
-Now you can now choose ONE of the following methods to deploy your website.
+Now you can choose ONE of the following methods to deploy your Jekyll site.
 
 #### Deploy 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 GH Pages service.
 
-Ensure your Jekyll site has the file `/.github/workflows/pages-deploy.yml`.
-Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+Quickly check the files needed for GitHub Actions build:
 
-[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
+- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+- Ensure your Jekyll site has file `tools/test.sh` and `tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
 
-Rename your repoistory to `<GH-USERNAME>.github.io` on GitHub.
+And then rename your repository to `<GH-USERNAME>.github.io` on GitHub.
 
-And then publish your site by:
+Now publish your Jekyll site by:
 
-  1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
+1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
 
-  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_:
+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) through _Settings_ → _Options_ → _GitHub Pages_:
 
-      ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
+    ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png){: width="850" height="153" }
 
-  3. Visit your website at the address indicated by GitHub.
+3. Visit your website at the address indicated by GitHub.
 
 #### Deploy on Other Platforms
 
@@ -160,3 +167,7 @@ $ docker run -it --rm \
 ```
 
 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.
+
+[starter]: https://github.com/cotes2020/chirpy-starter
+[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook

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

@@ -4,36 +4,34 @@ author: Cotes Chung
 date: 2019-08-11 00:34:00 +0800
 categories: [Blogging, Tutorial]
 tags: [favicon]
-toc: false
 ---
 
-In [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/), the image files of [Favicons](https://www.favicon-generator.org/about/) are placed in `assets/img/favicons/`. You may need to replace them with your own. So let's see how to customize these Favicons.
+The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. You may need to replace them with your own. The following sections will guide you how to create and replace the default favicons.
 
-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.
+## Generate the favicon
 
-![upload-image](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190811/upload-image.png)
+Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click button <kbd>Select your Favicon image</kbd> to upload your image file.
 
-Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.
+In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.
 
-![download-icons](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190811/download-icons.png){: width="600"}
+## Download & Replace
 
 Download the generated package, unzip and delete the following two from the extracted files:
 
-- browserconfig.xml
-- manifest.json
+- `browserconfig.xml`
+- `site.webmanifest`
 
-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/`.
+Now, copy the remaining image files (`PNG` and `ICO`) to cover the original files in the folder `assets/img/favicons/` of your Jekyll site.
 
-The following table helps you understand the changes to the icon file:
+The following table will helps you understand the changes to the favicon files:
 
-> ✓ means keep, ✗ means delete.
-
-| File(s)             | From Favicon & App Icon Generator | From Chirpy |
+| File(s)             | From Online Tool                  | From Chirpy |
 |---------------------|:---------------------------------:|:-----------:|
 | `*.PNG`             | ✓                                 | ✗           |
 | `*.ICO`             | ✓                                 | ✗           |
 | `browserconfig.xml` | ✗                                 | ✓           |
-| `manifest.json`     | ✗                                 | ✓           |
+| `site.webmanifest`  | ✗                                 | ✓           |
 
+> Note: ✓ means keep, ✗ means delete.
 
-The next time you build the site, the icon will be replaced with a customized edition.
+The next time you build the site, the favicon will be replaced with a customized edition.

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

@@ -7,7 +7,7 @@ tags: [google analytics, pageviews]
 ---
 
 
-This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme based blog that you just built. This requires technical knowledge and it's recommended to keep the `google_analytics.pv` disabled unless you have a good reason. If your website has low traffic, the page views count would discourage you to write more blogs. With that said, let's start with the setup.
+This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme based blog that you just built. This requires technical knowledge and it's recommended to keep the `google_analytics.pv.*` empty unless you have a good reason. If your website has low traffic, the page views count would discourage you to write more blogs. With that said, let's start with the setup.
 
 ## Set up Google Analytics
 
@@ -16,10 +16,10 @@ This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme bas
 First, you need to setup your account on Google analytics. While your create your account, you must create your first **Property** as well.
 
 1. Head to <https://analytics.google.com/> and click on **Start Measuring**
-2. Enter your desired *Account Name* and choose the desired checkboxes
-3. Enter your desired *Property Name*. This is the name of the tracker project that appears on your Google Analytics dashboard
-4. Enter the required information *About your business*
-5. Hit *Create* and accept any license popup to setup your Google Analytics account and create your property
+2. Enter your desired _Account Name_ and choose the desired checkboxes
+3. Enter your desired _Property Name_. This is the name of the tracker project that appears on your Google Analytics dashboard
+4. Enter the required information _About your business_
+5. Hit _Create_ and accept any license popup to setup your Google Analytics account and create your property
 
 ### Create Data Stream
 
@@ -33,25 +33,23 @@ With your property created, you now need to set up Data Stream to track your blo
 
 It should look like this:
 
-![google-analytics-data-stream](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/01-google-analytics-data-stream.png)
+![google-analytics-data-stream](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/01-google-analytics-data-stream.png){: width="1086" height="542"}
 
 Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml` file
 
 ```yaml
 google_analytics:
-  id: 'G-V6XXXXXXX'          # Fill with your Google Analytics ID
+  id: 'G-V6XXXXXXX'   # fill in your Google Analytics ID
+  # Google Analytics pageviews report settings
   pv:
-    # The Google Analytics pageviews switch.
-    enabled: false
-    # the next options only valid when `google_analytics.pv` is enabled.
-    proxy_url: ''
-    proxy_endpoint: ''
-    cache: false  # pv data local cache, good for the users from GFW area.
+    proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
 ```
+{: file="_config.yml"}
 
 When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.
 
-![google-analytics-realtime](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/02-google-analytics-realtime.png)
+![google-analytics-realtime](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/02-google-analytics-realtime.png){: width="616" height="557"}
 
 ## Setup Page Views
 
@@ -75,9 +73,9 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
 
 8. Click on **Enable APIs and Services** button on the top
 
-9. Enable the following APIs: *Google Analytics API*
+9. Enable the following APIs: _Google Analytics API_
 
-10. On the left, Click on *OAuth Consent Screen* and accept **Configure Consent Screen**. Select **External** since your blog is probably hosted for the public. Click on **Publish** under *Publishing Status*
+10. On the left, Click on _OAuth Consent Screen_ and accept **Configure Consent Screen**. Select **External** since your blog is probably hosted for the public. Click on **Publish** under _Publishing Status_
 
 11. Click on **Credentials** on the left and create a new **OAuth Client IDs** credential. Make sure to add a entry under `Authorized redirect URIs` that matches: `https://<project-id>.<region>.r.appspot.com/admin/auth`
 
@@ -116,10 +114,10 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
 1. Clone the **Google Analytics superProxy** project on Github: <https://github.com/googleanalytics/google-analytics-super-proxy> to your local.
 
 2. Remove the first 2 lines in the [`src/app.yaml`](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file:
-	```diff
+  ```diff
 - application: your-project-id
 - version: 1
-	```
+  ```
 
 3. In `src/config.py`, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from you App Engine Dashboard.
 
@@ -143,7 +141,9 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
     # XSRF Settings
     XSRF_KEY = 'OnceUponATimeThereLivedALegend'
     ```
-**Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
+    {: file="src/config.py"}
+
+    **Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
 
 5. From inside the src/ directory, deploy the app
 
@@ -185,7 +185,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
 
 If everything went good, you'll get this screen:
 
-![superProxy-deployed](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/03-superProxy-deployed.png)
+![superProxy-deployed](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/03-superProxy-deployed.png){: width="1366" height="354"}
 
 ### Create Google Analytics Query
 
@@ -194,47 +194,41 @@ Head to `https://PROJECT_ID.REGION_ID.r.appspot.com/admin` and create a query af
 The query parameters are as follows:
 
 - **start-date**: fill in the first day of blog posting
-
 - **end-date**: fill in `today` (this is a parameter supported by GA Report, which means that it will always end according to the current query date)
-
 - **metrics**: select `ga:pageviews`
-
 - **dimensions**: select `ga:pagePath`
 
 In order to reduce the returned results and reduce the network bandwidth, we add custom filtering rules [^ga-filters]:
 
-- **filters**: fill in `ga:pagePath=~^/posts/.*/$;ga:pagePath!@=`
+- **filters**: fill in `ga:pagePath=~^/posts/.*/$;ga:pagePath!@=`.
 
-  Among them, `;` means using _logical AND_ to concatenate two rules.
+    Among them, `;` means using _logical AND_ to concatenate two rules.
 
-  If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`.
+    If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`.
 
 After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at the bottom of the page, and fill in the **Encoded URI for the query** of SuperProxy on GAE.
 
 After the query is saved on GAE, a **Public Endpoint** (public access address) will be generated, and we will get the query result in JSON format when accessing it. Finally, click <kbd>Enable Endpoint</kbd> in **Public Request Endpoint** to make the query effective, and click <kbd>Start Scheduling</kbd> in **Scheduling** to start the scheduled task.
 
-![superproxy-query](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/04-superproxy-query.png)
+![superproxy-query](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/04-superproxy-query.png){: width="1100" height="126"}
 
 
 ## Configure Chirpy to Display Page View
 
 Once all the hard part is done, it is very easy to enable the Page View on Chirpy theme. Your superProxy dashboard should look something like below and you can grab the required values.
 
-![superproxy-dashboard](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/05-superproxy-dashboard.png)
+![superproxy-dashboard](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/05-superproxy-dashboard.png){: width="1210" height="694"}
 
 Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:
 
 ```yaml
 google_analytics:
-  id: 'G-XXXXXXXXXX'   # Fill with your Google Analytics ID
+  id: 'G-V6XXXXXXX'   # fill in your Google Analytics ID
   pv:
-    # The Google Analytics pageviews switch.
-    enabled: true
-    # the next options only valid when `google_analytics.pv` is enabled.
-    proxy_url: 'https://PROJECT_ID.REGION_ID.r.appspot.com'
     proxy_endpoint: 'https://PROJECT_ID.REGION_ID.r.appspot.com/query?id=<ID FROM SUPER PROXY>'
-    cache: false      # pv data local cache, good for the users from GFW area.
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
 ```
+{: file="_config.yml"}
 
 Now, you should see the Page View enabled on your blog.
 

_sass/addon/module.scss

@@ -1,14 +1,15 @@
 /*
 * Mainly scss modules, only imported to `assets/css/main.scss`
-*
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
 */
 
 /* ---------- scss placeholder --------- */
 
+%heading {
+  color: var(--heading-color);
+  font-weight: 400;
+  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
+}
+
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
@@ -38,11 +39,6 @@
   border-bottom: none;
 }
 
-%heading {
-  font-weight: 400;
-  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
-}
-
 %section {
   #post-wrapper & {
     line-height: 1.2;
@@ -100,6 +96,7 @@
 
 @mixin panel-label {
   @include label(inherit);
+
   display: block;
   line-height: 1.2;
   padding-top: 0.5rem;

_sass/addon/syntax.scss

@@ -1,9 +1,5 @@
 /*
 * The syntax highlight.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
 */
 
 @import "colors/light-syntax";
@@ -31,20 +27,20 @@ html[mode=dark] {
 
 /* -- Codes Snippet -- */
 
+$code-radius: 6px;
+
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
-  border-radius: 6px;
+  border-radius: $code-radius;
 }
 
 %code-snippet-padding {
-  padding: 1.5rem;
+  padding: 1.2rem;
 }
 
-$code-font-size: 0.85rem;
-
 div > pre {
   @extend %code-snippet-bg;
   @extend %code-snippet-radius;
@@ -69,26 +65,14 @@ div > pre {
   }
 
   overflow: auto;
-  .lineno {
-    margin-left: 0.2rem;
-    padding-right: 0.5rem;
-    min-width: 2.2rem;
-    text-align: right;
-    color: var(--highlight-lineno-color);
-    border-right: 1px solid var(--highlight-lineno-border-color);
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -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;
@@ -97,10 +81,30 @@ div > pre {
       word-break: normal; /* Fixed iOS safari linenos code break */
     }
   }
+
   td {
     padding: 0;
     border: 0;
   }
+
+  .lineno {
+    padding-right: 0.5rem;
+    min-width: 2.2rem;
+    text-align: right;
+    color: var(--highlight-lineno-color);
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+
+  /* set the dollar sign to non-selectable */
+  .gp {
+    user-select: none;
+  }
+
 } //.highlight
 
 code {
@@ -131,7 +135,7 @@ code {
 }
 
 td.rouge-code {
-  padding: 1.5rem 1.5rem 1.5rem 1rem;
+  padding: 1.2rem 1.5rem 1.2rem 1rem;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
@@ -148,7 +152,8 @@ div {
   &[class^='highlighter-rouge'],
   &.language-plaintext.highlighter-rouge,
   &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge {
+  &.language-terminal.highlighter-rouge,
+  &.nolineno {
     pre.lineno {
       display: none;
     }
@@ -158,19 +163,76 @@ div {
   }
 }
 
-div[class^='language-']::before {
-  content: attr(lang);
-  position: absolute;
-  right: 1.8rem;
-  margin-top: 3px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--highlight-lineno-color);
-  text-transform: uppercase;
+.code-header {
+  background: var(--code-header-bg);
+  border-top-left-radius: $code-radius;
+  border-top-right-radius: $code-radius;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1.85rem;
+
+  // text data
+  &::before {
+    content: attr(text-data);
+    color: var(--lang-badge-color);
+    padding-left: 1em;
+
+    // language
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    // file name
+    @at-root [file] #{&} {
+      font-size: 0.85rem;
+      text-transform: none;
+    }
+  }
+
+  // clipboard
+  button {
+    border: 1px solid var(--code-header-bg);
+    border-radius: $code-radius;
+    padding: 0;
+    width: 1.95rem;
+    background-color: inherit;
+    color: var(--highlight-lineno-color);
+
+    &[locked=true] {
+      color: var(--clipboard-checked-color);
+      border-color: var(--clipboard-checked-color);
+    }
+
+    &:not([locked]):hover {
+      background-color: gray;
+      color: white;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    i {
+      font-size: 0.9rem;
+    }
+
+  }
+
 }
 
-@media (min-width: 768px) {
-  div[class^='language-']::before {
-    right: 3.1rem;
+@media all and (max-width: 576px) {
+  .post-content {
+    > div[class^='language-'] {
+      @include ml-mr(-1.25rem);
+
+      border-radius: 0;
+
+      .code-header {
+        border-radius: 0;
+        padding-left: 0.4rem;
+        padding-right: 0.5rem;
+      }
+    }
   }
 }

_sass/addon/variables.scss

@@ -1,27 +1,34 @@
 /*
-* Mainly scss variables
-*
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
-*/
+ * The SCSS variables
+ */
 
-/* --- ↓ width and height ---- */
+/* sidebar */
 
-$tab-height: 3.2rem;
-$tab-cursor-height: 1.6rem;
+$sidebar-width: 260px !default;        // the basic width
+$sidebar-width-small: 210px !default;  // screen width: >= 850px, <= 1199px (iPad landscape)
+$sidebar-width-large: 350px !default;  // screen width: >= 1650px
 
-$sidebar-width-small: 210px;
-$sidebar-width-medium: 260px;
-$sidebar-width-large: 350px;
+/* tabs of sidebar */
 
-$topbar-height: 3rem;
+$tab-count: 5 !default;   // backward compatible (version <= 4.0.2)
+$tab-height: 3.2rem !default;
+$tab-cursor-height: 1.6rem !default;
 
-$footer-height: 5rem;
+$cursor-width: 3px !default;    // the cursor width of the selected tab
 
-$main-content-max-width: 1150px;
+/* other framework sizes */
 
-$panel-max-width: 300px;
+$topbar-height: 3rem !default;
 
-$post-extend-min-height: 35rem;
+$footer-height: 5rem !default;
+$footer-height-mobile: 6rem !default;   // screen width: <= 576px
+
+$main-content-max-width: 1150px !default;
+
+$panel-max-width: 300px !default;
+
+$post-extend-min-height: 35rem !default;
+
+/* syntax highlight */
+
+$code-font-size: 0.85rem !default;

_sass/colors/dark-syntax.scss

@@ -3,20 +3,6 @@
  */
 
 @mixin dark-syntax {
-  /* -----  My styles ------ */
-  --highlight-bg-color: #252525;
-  --highlighter-rouge-color: #de6b18;
-  --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #303435;
-  --inline-code-bg: #272822;
-
-  .highlight {
-    .gp { color: #818c96; }
-  }
-
-  pre { color: #bfbfbf; } /* override Bootstrap */
-  kbd { background-color: black; }
-
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
   .highlight pre { background-color: var(--highlight-bg-color); }
   .highlight .hll { background-color: var(--highlight-bg-color); }
@@ -81,4 +67,21 @@
   .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 */
+
+  /* -----  custom styles ------ */
+
+  --highlight-bg-color: #252525;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --inline-code-bg: #272822;
+  --code-header-bg: #353535;
+  --lang-badge-color: #6c6c6d;
+  --clipboard-checked-color: #2bcc2b;
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+  kbd { background-color: black; }
 }

_sass/colors/dark-typography.scss

@@ -3,25 +3,23 @@
  */
 
 @mixin dark-scheme {
-  /* framework */
-  --main-wrapper-bg: rgb(27, 27, 30);
+  /* Framework color */
   --body-bg: var(--main-wrapper-bg);
-  --topbar-wrapper-bg: rgb(39, 40, 43);
-  --search-wrapper-bg: rgb(34, 34, 39);
-  --search-icon-color: rgb(100, 102, 105);
-  --input-focus-border-color: rgb(112, 114, 115);
   --mask-bg: rgb(68, 69, 70);
-  --footer-bg-color: var(--main-wrapper-bg);
+  --main-wrapper-bg: rgb(27, 27, 30);
+  --main-border-color: rgb(44, 45, 45);
+  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
+  --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
 
-  /* common color */
+  /* Common color */
   --text-color: rgb(175, 176, 177);
   --text-muted-color: rgb(107, 116, 124);
-  --link-color: rgb(138, 180, 248);
-  --link-underline-color: rgb(82, 108, 150);
-  --main-border-color: rgb(44, 45, 45);
-  --button-bg: rgb(39, 40, 43);
+  --heading-color: #cccccc;
   --blockquote-border-color: rgb(66, 66, 66);
   --blockquote-text-color: rgb(117, 117, 117);
+  --link-color: rgb(138, 180, 248);
+  --link-underline-color: rgb(82, 108, 150);
+  --button-bg: rgb(39, 40, 43);
   --btn-border-color: rgb(63, 65, 68);
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
@@ -35,8 +33,12 @@
   --nav-cursor-color: rgb(183, 182, 182);
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
 
-  /* Top Bar */
+  /* Topbar */
   --topbar-text-color: var(--text-color);
+  --topbar-wrapper-bg: rgb(39, 40, 43);
+  --search-wrapper-bg: rgb(34, 34, 39);
+  --search-icon-color: rgb(100, 102, 105);
+  --input-focus-border-color: rgb(112, 114, 115);
 
   /* Home page */
   --post-list-text-color: rgb(175, 176, 177);
@@ -81,6 +83,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
+  --footer-bg-color: var(--main-wrapper-bg);
   --footer-link: rgb(171, 171, 171);
 
   .post-content img {

_sass/colors/light-syntax.scss

@@ -68,8 +68,11 @@
 
   /* --- custom light colors --- */
   --highlight-bg-color: #f7f7f7;
-  --highlighter-rouge-color: #353a3d;
+  --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
-  --highlight-lineno-border-color: #e9ecef;
   --inline-code-bg: #f3f3f3;
+  --code-header-bg: #eaeaea;
+  --lang-badge-color: #a4a7ab;
+  --clipboard-checked-color: #43c743;
+
 } // light-syntax

_sass/colors/light-typography.scss

@@ -3,21 +3,24 @@
  */
 
 @mixin light-scheme {
-  /* Common */
+  /* Framework color */
   --body-bg: #fafafa;
   --mask-bg: #c1c3c5;
   --main-wrapper-bg: white;
   --main-border-color: #f3f3f3;
-  --btn-border-color: #e9ecef;
-  --text-color: #333333;
+  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
+  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
+
+  /* Common color */
+  --text-color: #34343c;
+  --text-muted-color: gray;
+  --heading-color: black;
   --blockquote-border-color: #eee;
   --blockquote-text-color: #9a9a9a;
   --link-color: #2a408e;
   --link-underline-color: #dee2e6;
-  --text-muted-color: gray;
-  --tb-odd-bg: #fbfcfd;
-  --tb-border-color: #eaeaea;
   --button-bg: #fff;
+  --btn-border-color: #e9ecef;
   --btn-backtotop-color: #686868;
   --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
@@ -25,15 +28,12 @@
   --checkbox-checked-color: #07a8f7;
 
   /* Sidebar */
-  --sidebar-bg: radial-gradient(
-    circle,
-    rgba(42, 30, 107, 1) 0%,
-    rgba(35, 37, 46, 1) 100%);
+  --sidebar-bg: radial-gradient(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);
+  --topbar-wrapper-bg: white;
   --search-wrapper-bg: #f5f5f5;
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
@@ -57,10 +57,13 @@
   --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
   --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
+  --footnote-target-bg: lightcyan;
   --tag-bg: rgba(0, 0, 0, 0.075);
   --tag-border: #dee2e6;
   --tag-shadow: var(--btn-border-color);
   --tag-hover: rgb(222, 226, 230);
+  --tb-odd-bg: #fbfcfd;
+  --tb-border-color: #eaeaea;
   --categories-hover-bg: var(--btn-border-color);
   --dash-color: silver;
 
@@ -71,6 +74,5 @@
 
   /* Footer */
   --footer-bg-color: #ffffff;
-  --footnote-target-bg: lightcyan;
   --footer-link: #424242;
 } // light-scheme

_sass/jekyll-theme-chirpy.scss

@@ -1,22 +1,24 @@
 /*!
  * The styles for Jekyll theme Chirpy
  *
- * Chirpy v3.0.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
- * © 2021 Cotes Chung
+ * Chirpy v4.2.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * © 2019 Cotes Chung
  * MIT Licensed
  */
 
-@import "colors/light-typography";
-@import "colors/dark-typography";
+@import
+  "colors/light-typography",
+  "colors/dark-typography",
 
-@import "addon/module";
-@import "addon/variables";
-@import 'addon/syntax';
-@import "addon/commons";
+  "addon/module",
+  "addon/variables",
+  "variables-hook",
+  "addon/syntax",
+  "addon/commons",
 
-@import "layout/home";
-@import "layout/post";
-@import "layout/tags";
-@import "layout/archives";
-@import "layout/categories";
-@import "layout/category-tag";
+  "layout/home",
+  "layout/post",
+  "layout/tags",
+  "layout/archives",
+  "layout/categories",
+  "layout/category-tag";

_sass/layout/archives.scss

@@ -14,34 +14,12 @@
 
 #archives {
   letter-spacing: 0.03rem;
-  li {
-    font-size: 1.1rem;
-    line-height: 3rem;
-    &:nth-child(odd) {
-      background-color: var(--main-wrapper-bg, #fff);
-      background-image: linear-gradient(
-        to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
-    }
-    > div {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
 
   span.lead {
     font-size: 1.5rem;
     position: relative;
     left: 8px;
 
-    &:not(:first-child) {
-      position: relative;
-      left: 4px;
-      &::after {
-        left: 67px;
-      }
-    }
-
     &::after { /* Year dot */
       content: "";
       display: block;
@@ -59,8 +37,64 @@
       box-shadow: 0 0 2px 0 #c2c6cc;
       z-index: 1;
     }
+
+    &:not(:first-child) {
+      position: relative;
+      left: 4px;
+      &::after {
+        left: 67px;
+      }
+    }
+
   } // #archives span.lead
 
+  ul {
+    li {
+      font-size: 1.1rem;
+      line-height: 3rem;
+
+      div {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        a {
+          /* post title in Archvies */
+          margin-left: 2.5rem;
+          position: relative;
+          top: 0.1rem;
+        }
+      }
+
+      &:nth-child(odd) {
+        background-color: var(--main-wrapper-bg, #fff);
+        background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
+      }
+
+      &::after {
+        @extend %date-timeline;
+
+        height: 2.8rem;
+        top: -1.3rem;
+      }
+
+      &:first-child::before {
+        @extend %date-timeline;
+
+        height: 3.06rem;
+        top: -1.61rem;
+      }
+    }
+
+    &:not(:last-child) > li:last-child::after {
+      height: 3.4rem;
+    }
+
+    &:last-child > li:last-child::after {
+      display: none;
+    }
+  } // #archives ul
+
   .date {
     white-space: nowrap;
     display: inline-block;
@@ -97,36 +131,8 @@
     }
   } // #archives .date
 
-  ul {
-    > li {
-      > div > a {
-        /* post title in Archvies */
-        margin-left: 2.5rem;
-        position: relative;
-        top: 0.1rem;
-      }
-      &::after {
-        @extend %date-timeline;
-        height: 2.8rem;
-        top: -1.3rem;
-      }
-      &:first-child::before {
-        @extend %date-timeline;
-        height: 3.06rem;
-        top: -1.61rem;
-      }
-    }
-    &:not(:last-child) > li:last-child::after {
-      height: 3.4rem;
-    }
-    &:last-child > li:last-child::after {
-      display: none;
-    }
-  } // #archives ul
-
 } // #archives
 
-
 @media all and (max-width: 576px) {
   #archives {
     margin-top: -1rem;

_sass/layout/categories.scss

@@ -11,6 +11,14 @@
   .card-header {
     padding-right: 12px;
   }
+
+  i {
+    &.far,
+    &.fas {
+      font-size: 86%; // fontawesome icons
+    }
+  }
+
   .list-group-item {
     border-left: none;
     border-right: none;
@@ -29,12 +37,6 @@
     @extend %category-icon-color;
   }
 
-  i {
-    &.far, &.fas {
-      font-size: 86%; // fontawesome icons
-    }
-  }
-
 } // .categories
 
 .category-trigger {
@@ -42,7 +44,7 @@
   height: 1.7rem;
   border-radius: 50%;
   text-align: center;
-  color: #6c757d!important;
+  color: #6c757d !important;
   > i.fas {
     position: relative;
     height: 0.7rem;

_sass/layout/category-tag.scss

@@ -2,10 +2,17 @@
   Style for page Category and Tag
 */
 
-#page-category, #page-tag {
+.dash {
+  margin: 0 .5rem .6rem .5rem;
+  border-bottom: 2px dotted var(--dash-color);
+}
+
+#page-category,
+#page-tag {
   ul > li {
     line-height: 1.5rem;
     padding: 0.6rem 0;
+
     &::before { // dot
       background: #999;
       width: 5px;
@@ -17,14 +24,16 @@
       top: 0.6rem;
       margin-right: 0.5rem;
     }
+
     > a { /* post's title */
-      font-size: 1.1rem;
       @extend %no-bottom-border;
+
+      font-size: 1.1rem;
     }
+
     > span:last-child {
       white-space: nowrap;
-    }
-    /* post's date */
+    } /* post's date */
   }
 }
 
@@ -36,22 +45,19 @@
   font-size: 1.25rem;
 }
 
-a:hover {
-  #page-category &,
-  #page-tag &,
-  #access-lastmod & {
+#page-category,
+#page-tag,
+#access-lastmod {
+  a:hover {
     @extend %link-hover;
+
     margin-bottom: -1px; // Avoid jumping
   }
 }
 
-.dash {
-  margin: 0 .5rem .6rem .5rem;
-  border-bottom: 2px dotted var(--dash-color);
-}
-
 @media all and (max-width: 576px) {
-  #page-category, #page-tag {
+  #page-category,
+  #page-tag {
     ul > li {
       &::before {
         margin: 0 .5rem;

_sass/layout/home.scss

@@ -2,6 +2,54 @@
   Style for Homepage
 */
 
+.pagination {
+  color: var(--btn-patinator-text-color);
+  font-family: 'Lato', sans-serif;
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  .page-item {
+    .page-link {
+      color: inherit;
+      width: 2.5rem;
+      height: 2.5rem;
+      padding: 0;
+      display: -webkit-box;
+      -webkit-box-pack: center;
+      -webkit-box-align: center;
+      border-radius: 50%;
+      border: 1px solid var(--btn-paginator-border-color);
+      background-color: var(--button-bg);
+      &:hover {
+        background-color: var(--btn-paginator-hover-color);
+      }
+    }
+    &.active {
+      .page-link {
+        background-color: var(--btn-active-bg);
+        border-color: var(--btn-active-border-color);
+        box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
+        color: var(--btn-text-color);
+      }
+    }
+    &.disabled {
+      cursor: not-allowed;
+      .page-link {
+        color: rgba(108, 117, 125, 0.57);
+        border-color: var(--btn-paginator-border-color);
+        background-color: var(--button-bg);
+      }
+    }
+    &:first-child .page-link,
+    &:last-child .page-link {
+      border-radius: 50%;
+    }
+  } // .page-item
+
+} // .pagination
+
 #post-list {
   margin-top: 1rem;
   padding-right: 0.5rem;
@@ -11,6 +59,10 @@
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--main-border-color);
 
+    a:hover {
+      @extend %link-hover;
+    }
+
     h1 {
       font-size: 1.4rem;
       margin: 0;
@@ -55,64 +107,18 @@
 
 } // #post-list
 
-.pagination {
-  font-size: 1rem;
-  a:hover {
-    text-decoration: none;
-  }
-
-  .page-item {
-    .page-link {
-      color: var(--btn-patinator-text-color);
-      width: 2.5rem;
-      height: 2.5rem;
-      padding: 0;
-      text-align: center;
-      display: -webkit-box;
-      display: flex;
-      -webkit-box-pack: center;
-      justify-content: center;
-      -webkit-box-align: center;
-      align-items: center;
-      border-radius: 50%;
-      border: 1px solid var(--btn-paginator-border-color);
-      font-family: 'Lato', sans-serif;
-      background-color: var(--button-bg);
-      &:hover {
-        background-color: var(--btn-paginator-hover-color)
-      }
-    }
-    &.active {
-      .page-link {
-        background-color: var(--btn-active-bg);
-        border-color: var(--btn-active-border-color);
-        box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
-        color: var(--btn-text-color);
-      }
-    }
-    &.disabled {
-      cursor: not-allowed;
-      .page-link {
-        color: rgba(108, 117, 125, 0.57);
-        border-color: var(--btn-paginator-border-color);
-        background-color: var(--button-bg);
-      }
-    }
-    &:first-child .page-link,
-    &:last-child .page-link {
-      border-radius: 50%;
-    }
-    &:not(:last-child) {
-      margin-right: 0.7rem;
-    }
-  } // .page-item
-
-} // .pagination
-
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
-    justify-content: center;
+    justify-content: space-evenly;
+
+    .page-item {
+      &:not(:first-child):not(:last-child) {
+        display: none;
+      }
+
+    }
+
   }
 }
 
@@ -140,11 +146,24 @@
 
   .pagination {
     font-size: 0.85rem;
-    .page-item .page-link {
-      width: 2.2rem;
-      height: 2.2rem;
+
+    .page-item {
+      &:not(:last-child) {
+        margin-right: 0.7rem;
+      }
+
+      .page-link {
+        width: 2rem;
+        height: 2rem;
+      }
+
     }
-  }
+
+    .page-index {
+      display: none;
+    }
+
+  } // .pagination
 
 }
 

_sass/layout/post.scss

@@ -4,7 +4,7 @@
 
 @mixin btn-sharing-color($light-color, $important: false) {
   @if $important {
-    color: var(--btn-share-color, $light-color)!important;
+    color: var(--btn-share-color, $light-color) !important;
   } @else {
     color: var(--btn-share-color, $light-color);
   }
@@ -29,21 +29,14 @@
       @include dot;
     }
   }
-
-  #pv::after {
-    content: " views";
-  }
-
-  .readtime::after {
-    content: " read";
-  }
 }
 
 .post-content {
   .preview-img {
-    margin-top: 0;
-    margin-bottom: 2.5rem;
     @include align-center;
+
+    margin-top: 0;
+    margin-bottom: 2.5rem !important;
   }
 }
 
@@ -63,25 +56,50 @@
 
   .btn {
     @include btn-post-nav;
+
     color: var(--link-color);
+
     &:hover {
       background: #2a408e;
       color: #fff;
       border-color: #2a408e;
     }
+
     &.disabled {
       @include btn-post-nav;
+
       pointer-events: auto;
       cursor: not-allowed;
       background: none;
       color: gray;
+
       &:hover {
         border-color: none;
       }
     }
+
     &.btn-outline-primary.disabled:focus {
       box-shadow: none;
     }
+
+    &::before {
+      color: var(--text-muted-color);
+      font-size: 0.65rem;
+      text-transform: uppercase;
+      content: attr(prompt);
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      left: 0.5px;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      right: 0.5px;
+    }
   }
 
   p {
@@ -91,24 +109,6 @@
     white-space: normal;
   }
 
-  a {
-    &::before {
-      color: var(--text-muted-color);
-      font-size: 0.65rem;
-      text-transform: uppercase;
-      content: attr(prompt);
-    }
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      left: 0.5px;
-    }
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      right: 0.5px;
-    }
-  }
 } // .post-navigation
 
 @keyframes fade-up {
@@ -139,17 +139,20 @@
   }
 }
 
-#toc li>a {
+#toc li > a {
   line-height: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+
+  &.nav-link:not(.active) {
+    color: inherit;
+  }
 }
 
-
-/*--- Related Posts ---*/
+/* --- Related Posts --- */
 
 #related-posts {
-  >h3 {
+  > h3 {
     @include label(1.1rem, 600);
   }
   .card {
@@ -165,7 +168,7 @@
     &:hover {
       -webkit-transform: translate3d(0, -3px, 0);
       transform: translate3d(0, -3px, 0);
-      box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15);
+      box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
     }
   }
 
@@ -190,7 +193,7 @@
   ul {
     list-style-type: none;
     padding-inline-start: 1.5rem;
-    >li::before {
+    > li::before {
       background: #c2c9d4;
       width: 5px;
       height: 5px;
@@ -216,12 +219,13 @@
 }
 
 %btn-share-hovor {
-  color: var(--btn-share-hover-color)!important;
+  color: var(--btn-share-hover-color) !important;
 }
 
 .share-wrapper {
   vertical-align: middle;
   user-select: none;
+
   .share-icons {
     font-size: 1.2rem;
     a {
@@ -230,12 +234,12 @@
       }
       &:hover {
         text-decoration: none;
-        >i {
+        > i {
           @extend %btn-share-hovor;
         }
       }
     }
-    >i {
+    > i {
       padding-top: 0.35rem;
       &:hover {
         @extend %btn-share-hovor;
@@ -243,7 +247,7 @@
     }
     .fab {
       &.fa-twitter {
-        @include btn-sharing-color(rgba(29, 161, 242, 1.00));
+        @include btn-sharing-color(rgba(29, 161, 242, 1));
       }
       &.fa-facebook-square {
         @include btn-sharing-color(rgb(66, 95, 156));
@@ -264,9 +268,9 @@
 
 } // .share-wrapper
 
-
 .share-label {
   @include label(inherit, 400, inherit);
+
   &::after {
     content: ":";
   }
@@ -274,40 +278,27 @@
 
 .license-wrapper {
   line-height: 1.2rem;
-  >a {
+  > a {
     font-weight: 600;
     &:hover {
       @extend %link-hover;
     }
   }
-  i {
-    font-weight: 400;
-  }
+
   span:last-child {
     font-size: 0.85rem;
   }
 } // .license-wrapper
 
-
 @media all and (max-width: 576px) {
   .post-tail-bottom {
-    -ms-flex-wrap: wrap-reverse!important;
-    flex-wrap: wrap-reverse!important;
+    -ms-flex-wrap: wrap-reverse !important;
+    flex-wrap: wrap-reverse !important;
     >div:first-child {
       width: 100%;
       margin-top: 1rem;
     }
   }
-
-  .post-content > div[class^='language-'] {
-    @include ml-mr(-1.25rem);
-    border-radius: 0;
-
-    &::before { // the lang badge
-      right: 1rem;
-    }
-  }
-
 }
 
 @media all and (max-width: 768px) {
@@ -323,21 +314,15 @@
         @include dot(0.5rem, 0.2rem);
       }
       &.flex-column {
-        -webkit-box-orient: horizontal!important;
-        -webkit-box-direction: normal!important;
-        -ms-flex-direction: row!important;
-        flex-direction: row!important;
+        -webkit-box-orient: horizontal !important;
+        -webkit-box-direction: normal !important;
+        -ms-flex-direction: row !important;
+        flex-direction: row !important;
       }
     }
   } // .post
 }
 
-@media all and (min-width: 768px) and (max-width: 830px) {
-  .post img {
-    max-width: calc(100% + 2rem);
-  }
-}
-
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .post-navigation {

_sass/variables-hook.scss

@@ -0,0 +1,3 @@
+/*
+  Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
+*/

assets/404.html

@@ -0,0 +1,33 @@
+---
+layout: page
+title: "404: Page not found"
+permalink: /404.html
+
+redirect_from:
+  - /norobots/
+  - /assets/
+  - /posts/
+
+dynamic_title: true
+---
+
+{% include lang.html %}
+
+<div class="lead">
+
+  {%- capture _head_back -%}
+    <a href="{{ '/' | relative_url }}">{{ site.data.locales[lang].not_found.head_back }}</a>
+  {%- endcapture -%}
+
+  {%- capture _archives_page -%}
+    <a href="{{ 'archives' | relative_url }}">{{ site.data.locales[lang].not_found.archives_page }}</a>
+  {%- endcapture -%}
+
+  <p>{{site.data.locales[lang].not_found.statment }}</p>
+
+  <p>{{ site.data.locales[lang].not_found.hint_template
+    | replace: ':HEAD_BAK', _head_back
+    | replace: ':ARCHIVES_PAGE', _archives_page }}
+  </p>
+
+</div>

assets/css/style.scss

@@ -1,7 +1,12 @@
 ---
 ---
 
-// see: /_sass/addon/commons.scss
+/*
+  If the number of TAB files has changed, the following variable is required.
+  And it must be defined before `@import`.
+*/
 $tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
 
-@import "jekyll-theme-chirpy";
+@import "{{ site.theme }}";
+
+/* append your custom style below */

assets/feed.xml

@@ -1,5 +1,6 @@
 ---
 layout: compress
+permalink: /feed.xml
 # Atom Feed, reference: https://validator.w3.org/feed/docs/atom.html
 ---
 
@@ -10,14 +11,14 @@ layout: compress
   <subtitle>{{ site.description }}</subtitle>
   <updated>{{ site.time | date_to_xmlschema }}</updated>
   <author>
-    <name>{{ site.author }}</name>
+    <name>{{ site.social.name }}</name>
     <uri>{{ "/" | absolute_url }}</uri>
   </author>
   <link rel="self" type="application/atom+xml" href="{{ page.url | absolute_url }}"/>
-  <link rel="alternate" type="text/html" hreflang="{{ site.lang | default: 'en' }}"
+  <link rel="alternate" type="text/html" hreflang="{{ site.lang }}"
     href="{{ '/' | absolute_url }}"/>
   <generator uri="https://jekyllrb.com/" version="{{ jekyll.version }}">Jekyll</generator>
-  <rights> © {{ 'now' | date: '%Y' }} {{ site.author }} </rights>
+  <rights> © {{ 'now' | date: '%Y' }} {{ site.social.name }} </rights>
   <icon>{{ site.baseurl }}/assets/img/favicons/favicon.ico</icon>
   <logo>{{ site.baseurl }}/assets/img/favicons/favicon-96x96.png</logo>
 
@@ -35,7 +36,7 @@ layout: compress
     <id>{{ post_absolute_url }}</id>
     <content src="{{ post_absolute_url }}" />
     <author>
-      <name>{{ site.author }}</name>
+      <name>{{ post.author | default: site.social.name }}</name>
     </author>
 
   {% if post.categories %}