Merge branch 'release/2.5'

Allows to specify an empty base-url.

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at cotes.chung@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

.github/CONTRIBUTING.md

@@ -0,0 +1,22 @@
+# How to Contribute
+
+I want to thank you for sparing a time to improve this project! Here are some guidelines for contributing：
+
+To ensure that the blog design is not confused, this project does not accept suggestions for design changes, such as color scheme, fonts, typography, etc. If your request is about an enhancement, it is recommended to first submit a [`Feature Request`](https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?labels=enhancement&template=feature_request.md) issue to discuss whether your idea fits the project. 
+
+Generally, contribute to the project by:
+
+1. Fork this project on GitHub and clone it locally.
+2. Create a new branch named `feature/my-feature` (or `feature/fix-a-bug`), which branch from `develop`:
+
+    ```console
+    $ git checkout -b feature/<my-feature> develop
+    ```
+    > Please note that the new branch name must include the prefix `feature/`.
+
+3. After completing the development, commit and push to remote.
+4. Submit a new **pull request** to the `develop` branch of upstream, i.e., `cotes2020/jekyll-theme-chirpy:develop`.
+
+---
+
+:tada: Your volunteering will make the open source world more beautiful, thanks again! :tada:

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,49 @@
+---
+name: Bug Report
+about: Create a report to help us improve
+labels: bug
+---
+
+<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+
+## Checklist
+<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+- [ ] I have read the [tutorials](https://chirpy.cotes.info/categories/tutorial/) and know the correct effect of the functional design.
+- [ ] There are no similar reports on existing issues (including closed ones).
+- [ ] I found the bug on the latest code of `master` branch.
+
+
+## Describe the bug
+<!-- A clear and concise description of what the bug is. -->
+
+**To Reproduce**
+
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+
+**Expected behavior**
+<!-- A clear and concise description of what you expected to happen. -->
+
+**Screenshots**
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+**Desktop**
+<!-- Please complete the following information -->
+ - OS: [e.g. iOS]
+ - Browser: [e.g. chrome, safari]
+ - Version: [e.g. 22]
+
+**Smartphone**
+<!-- please complete the following information -->
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser: [e.g. stock browser, safari]
+ - Version: [e.g. 22]
+
+**Additional context**
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,30 @@
+---
+name: Feature Request
+about: Suggest an idea for this project
+labels: enhancement
+---
+
+<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+
+## Checklist
+<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+- [ ] I have read the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/CONTRIBUTING.md).
+- [ ] There are no similar request on existing issues (including closed ones).
+- [ ] I have read the [project progress](https://github.com/cotes2020/jekyll-theme-chirpy/projects) and know the current progress of the project.
+- [ ] I was in the `develop` branch of the latest code.
+
+
+## Is your feature request related to a problem? Please describe
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+
+## Describe the solution you'd like
+<!-- A clear and concise description of what you want to happen. -->
+
+
+## Describe alternatives you've considered
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+
+## Additional context
+<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,20 @@
+---
+name: Question
+about: Ask what ever you want
+labels: question
+---
+
+<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+
+## Checklist
+
+<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+
+- [ ] I have read the [tutorials](https://chirpy.cotes.info/categories/tutorial/) and know the correct effect of the functional design.
+- [ ] There are no similar question on existing issues (including closed ones).
+- [ ] I searched the Internet for related problems, but still couldn't solve it.
+- [ ] My question is based on the latest code of `master` branch.
+
+
+## Description
+<!-- Please describe your question. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,45 @@
+## Description
+
+<!-- 
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
+-->
+
+e.g. Fixes #(issue)
+
+## Type of change
+
+<!-- 
+Please select the desired item checkbox and change it to "[x]", then delete options that are not relevant.
+-->
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Documentation update
+
+## How has this been tested?
+
+<!-- 
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
+-->
+
+- [ ] I have run `bash ./tools/build.sh && bash ./tools/test.sh` (at the root of the project) locally and passed
+- [ ] I have tested this feature in the browser
+
+**Test Configuration**
+
+* Browerser type & version:
+* Operating system:
+* Bundler version:
+* Ruby version:
+* Jekyll version:
+
+
+## Checklist:
+<!-- Select checkboxes by change the "[ ]" to "[x]" -->
+- [ ] My code follows the [Google style guidelines](https://google.github.io/styleguide/)
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] Any dependent changes have been merged and published in downstream modules

.github/workflows/ci.yml

@@ -0,0 +1,71 @@
+name: 'Continuous Integration'
+on:
+  push:
+    branches:
+      - '*'
+    tags-ignore:
+      - '*'
+    paths-ignore:
+      - '.github/**'
+      - '!.github/workflows/ci.yml'
+      - '.travis.yml'
+      - '.gitignore'
+      - 'docs/**'
+      - 'README.md'
+      - 'LICENSE'
+  pull_request:
+    paths:
+      - '**'
+
+jobs:
+  ci:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest]
+
+    steps:
+      - uses: actions/setup-ruby@v1
+        with:
+          ruby-version: '2.6.x'
+
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Bundle Caching
+        id: bundle-cache
+        uses: actions/cache@v1
+        with:
+          path: vendor/bundle
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          restore-keys: |
+            ${{ runner.os }}-gems-
+
+      - name: Install GNU-Coreutils(for macOS)
+        if: runner.os == 'macOS'
+        run: |
+          brew install coreutils
+
+      - name: Bundle config
+        run: |
+          bundle config path vendor/bundle
+
+      - name: Bundle Install
+        if: steps.bundle-cache.outputs.cache-hit != 'true'
+        run: |
+          bundle install
+
+      - name: Bundle Install locally
+        if: steps.bundle-cache.outputs.cache-hit == 'true'
+        run: |
+          bundle install --local
+
+      - name: Build Site
+        run: |
+          bash tools/build.sh
+
+      - name: Test Site
+        run: |
+          bash tools/test.sh

.github/workflows/issues-cleaner.yml

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

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

@@ -0,0 +1,99 @@
+name: 'Automatic build'
+on:
+  push:
+    branches:
+      - master
+    paths-ignore:
+      - '.gitignore'
+      - 'README.md'
+      - 'LICENSE'
+
+jobs:
+  build-n-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/setup-ruby@v1
+        with:
+          ruby-version: '2.6.x'
+
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Bundle Caching
+        id: bundle-cache
+        uses: actions/cache@v1
+        with:
+          path: vendor/bundle
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          restore-keys: |
+            ${{ runner.os }}-gems-
+
+      - name: Bundle config
+        run: |
+          bundle config path vendor/bundle
+
+      - name: Bundle Install
+        if: steps.bundle-cache.outputs.cache-hit != 'true'
+        run: |
+          bundle install
+
+      - name: Bundle Install locally
+        if: steps.bundle-cache.outputs.cache-hit == 'true'
+        run: |
+          bundle install --local
+
+      - name: Build Site
+        run: |
+          bash tools/build.sh -b ""
+
+      - name: Test Site
+        run: |
+          bash tools/test.sh
+
+  deploy:
+    needs: build-n-test
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/setup-ruby@v1
+        with:
+          ruby-version: '2.6.x'
+
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Bundle Caching
+        id: bundle-cache
+        uses: actions/cache@v1
+        with:
+          path: vendor/bundle
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          restore-keys: |
+            ${{ runner.os }}-gems-
+
+      - name: Bundle config
+        run: |
+          bundle config path vendor/bundle
+
+      - name: Bundle Install
+        if: steps.bundle-cache.outputs.cache-hit != 'true'
+        run: |
+          bundle install
+
+      - name: Bundle Install locally
+        if: steps.bundle-cache.outputs.cache-hit == 'true'
+        run: |
+          bundle install --local
+
+      - name: Build site
+        run: |
+          bash tools/build.sh
+
+      - name: Deploy
+        run: |
+          bash tools/deploy.sh

.gitignore

@@ -1,4 +1,7 @@
+# hidden files
 .*
+
+# python compiled files
 *.pyc
 
 # jekyll debug
@@ -9,3 +12,6 @@ Gemfile.lock
 
 # yui-compressor
 *.jar
+
+# bundle cache
+vendor

.travis.yml

@@ -1,13 +1,14 @@
+os: linux
+dist: bionic
+
 language: ruby
-rvm: 2.5.3
+rvm: 2.6.5
 
 before_install:
-  - pyenv global 3.7.1
+  - bundle config path 'vendor/bundle'
 
 install:
-  - pip install --upgrade pip
-  - pip install ruamel.yaml
-  - bundle install --path vendor/bundle --quiet
+  - bundle install --quiet
 
 addons:
   apt:
@@ -15,7 +16,11 @@ addons:
     - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
 
 script:
-  - bash _scripts/travis/cibuild.sh
+  - >-
+    git clone https://${GH_PAT}@github.com/${GH_USER}/${BUILDER_REPO}.git
+    ${HOME}/${BUILDER_REPO} --depth=1 -q
+  - cp -r ${HOME}/${BUILDER_REPO}/framework/* .
+  - bash _cibuild.sh
 
 branches:
   only: master
@@ -26,15 +31,13 @@ git:
 cache:
   directories:
     - $TRAVIS_BUILD_DIR/vendor/bundle
-    - $TRAVIS_BUILD_DIR/tmp/.htmlproofer
 
 notifications:
   email:
     recipients:
-      - secure: "GdZFhI2fu6MHwHeGkI9AI8NJexfT+cncJKoOTBxrMPywxvfm6HZ1vZTOwLD9mwG4XZUSznruD4NwRiXMBKs/94n8Z2f0QagCp2is/TuQWBVDUn1bowTbx1S7da6I3qTBGyIHvQWySwFgJuK9/uUeHdQF9ojMejESKZWfc6NjlgYie3Us3ax+Lygq6o4x+8+YPqlC/XwEKUUMUpXZT8Yubxg+s1mLwY9zmp2kJwB1snf6u498FPCWtCuQdGc91HEL4McfUfevnkNKttJQFwdE+mFkLoLn1FcXN0WQ8hPVTQvD/5TaCvACuB1oQ4dm4cnnoIRC5iuQntkP2Am7jPLnHLwxHDqB8vLDNxi1phbfGTk89ffY4n5FirF7DiYIn7hDDbDBlE4++9Pv/i7xgLp9+NzAzz25tdcfKZfXujrwE6b/2NbtXer/eWXyi7d6V/qWO6x8m7/IerX2/VrbXyQIgTvIDe2sSAraM77MMIiQ2KS6yhPIfjyCsC1sokFNRqUWut2UkqMFKOmAnSi/jTQY6/t1aOXGHtVRwgjFoyvBTk9F9NElxt3mseK26Mad3yAv5xLqhqHPFZJbVHJ8dP6RQvWwuvMK1uSqobTl+t0qBvvdSbt1/Oc/ubN1T2clObx1faF2luoMFhRtN+H5s7wfEMrO+sJAuSZnAHuDRpDIwCs="
+      - secure: "fFLqX7uOzFA8RE2AUFlU1mmxMw+rdV6DnODJ/1Gl+3ecNtrv5LeH3c5a4a5ShQqYTrx9BPfD40VRN7UB+lzOdXiWLI9yDGRPPxGG26/WfrKpdQPZilc8zAOEeDnLAJeGZLsUvgmNb3KCXW6S8NPqqh34CfWcTIzjCARhRgO33wcs8X5wP5cugtNqO5Ew/pUcfWcmiuXNX0GNT6l+nL5A7yN+IO5mRHqSRmlfYd5EHhGMTIL4La+Cd1CNv1m4Dl0Ah2cDeJwi5wLnVbqAgunLhAYmDtxIOCVYMTBrP37UiNe/7QeFelyJfODsmMg1mx3WCykbXydC753WVoAlTg6nNoeeI9fmK+/tuLK+sx/KnYfTVGBXQYq39DyV/2o/IfCzEAKImlzFKGD8R13+ddu4B5UML+cby5KBvhTKIGaC5tKoe39z/31UPpy11/EHMCof2BUOzIgu5Hsv4OSNJlw3oRE31oOPn8xP4e7uWR8bRUhAgzN0Cn0ht+UfpemfGAXrp0M3IXQdc9L4azEFqxRhivMTLK/P6INay7IM+DJ30Ht2dWylGw/sxcRTqyNm3YomJQnXIO4xeqTSLulWr80FFHTys3JEDJYrcKvJmpwLFEAOZtwKsZ6ZShrOIA4LE5fgQtakH3ZLJG9a7jVSlMcNIfaSKgjdDQOe6CoRQL7KouA="
     on_success: never
 
 env:
   global:
     - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
-    - secure: "QNAqDoDQ+mF/3DFxKbc7fnYa5+FysJTX9Vs4XneH6iH63MS2lNtHfC7uT/M0/sRJaygK9eAdb+RaIeADE7CAMzqP3qdWx7l2N6qWab/kyK9KujUBsvoTGX6lDQTwC2Z+zlr5uUScHfLOhqHh6dbm6glziy2NB4dn9pVBXQrmBn09Rf9LImRT2u2h8gzmdl19hZ9TsW1/ROOb/1Soc3JElGRPrIxKI7ufHLQZt0UzZkYXGejQJwtstEEkRSmhfkJjlASeaeuyOFBvkWXjL1nKPsElwEKsAR+4II98JKA83YVqa9TJT2YSnXeLEFIhYDVSG6RLAMEU4rrITzRYC/hWKBKje4G0PDEM/cpnytk9Xhq+7oUFRmXCq3ZQgTQgzWhzl1kExC8b96hiWmQ+lVCw+Q2BG6+NloEEuOHOM839CTXfiitjRJ8KYUdLgW6IaruaingySBsbh1Vl+Dhu73QZ5H40KLdIH6woLXWAgtxkjpaL6DTeWDO6xMiwDreBa/2CJRT5R1tiG45CurZ+AkQ+yAAfSOEwGtE29oZl0sWeWMwVTaAClc0IJaG1+h8jxIVuQqHvK3fzd5RdlDtShrfCCVvQD0n29wXrdeNEg90F92kvdtmw8XgKc2P/Cl5uNzvVeTbFF3ZIHYpCVV4LW4Hn8clgYu+WUa/w4pVrBSdQOUw="

404.html

@@ -1,13 +1,14 @@
 ---
 # The 404 page
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT License
 layout: page
 title: "404: Page not found"
-
 permalink: /404.html
 
-redirect_from:  # Same as site.blocklist
+redirect_from:  # part of site.sitemap_exclude
   - /norobots/
   - /assets/
   - /tabs/

Gemfile

@@ -1,17 +1,14 @@
-source 'https://rubygems.org'
+source "https://rubygems.org"
 
-gem 'jekyll', '>=3.8.6'
+gem "jekyll", ">=3.8.6"
 
 # Official Plugins
 group :jekyll_plugins do
-  gem 'jekyll-paginate'
-  gem 'jekyll-redirect-from'
-  gem 'jekyll-seo-tag'
+  gem "jekyll-paginate"
+  gem "jekyll-redirect-from"
+  gem "jekyll-seo-tag", "~> 2.6.1"
 end
 
 group :test do
-  gem 'html-proofer'
+  gem "html-proofer"
 end
-
-# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
-gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

README.md

@@ -1,159 +1,195 @@
-# Jekyll Theme Chirpy
+# Chirpy
 
-[![Build Status](https://travis-ci.com/cotes2020/jekyll-theme-chirpy.svg?branch=master)](https://travis-ci.com/cotes2020/jekyll-theme-chirpy)
+🌏 English • [简体中文](docs/README_zh-CN.md)
+
+[![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
 [![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-red.svg)](https://996.icu)
+[![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
-![devices-mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)
+A minimal, sidebar, responsive web design Jekyll theme, focusing on text presentation, aim to help you easily record and share your knowledge. [Live Demo »](https://chirpy.cotes.info)
 
-A minimal, portfolio, sidebar, bootstrap Jekyll theme with responsive web design and focuses on text presentation. Hope you like it! [Live Demo »](https://chirpy.cotes.info)
+[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
+
+## Table of Contents
+
+* [Features](#features)
+* [Installation](#installation)
+* [Usage](#usage)
+* [Contributing](#contributing)
+* [Credits](#credits)
+* [Support](#support)
+* [License](#license)
 
 ## Features
 
-* Posts' Last Modified Date
+* Pinned Posts
+* Configurable theme mode
+* Double-level Categories
+* Last modified date for posts
 * Table of Contents
-* Disqus Comments
+* Automatically recommend related posts
 * Syntax highlighting
-* Two Level Categories
+* Mathematical expressions
 * Search
-* HTML Compress
 * Atom Feeds
+* Disqus Comments
 * Google Analytics
-* GA Pageviews (Advanced)
-* SEO Tag
-* Performance Optimization
-
-## Getting Started
-
-### Preparation
-
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (Ruby, RubyGem, Bundler and Jekyll). In addition, to use the funny script tools, we also need to install [Python](https://www.python.org/downloads/)(version 3.5 or abover) and [ruamel.yaml](https://pypi.org/project/ruamel.yaml/).
-
-Next, [fork](https://github.com/cotes2020/jekyll-theme-chirpy/fork) **Chirpy** and then clone your replicated repository locally.
+* GA Pageviews reporting (Advanced)
+* SEO and Performance Optimization
 
 
-### Install Jekyll Plugins
+## Installation
 
-Go to root directory of the repository and run the following:
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, and clone the fork to local by:
+
+```terminal
+$ git clone git@github.com:<username>/jekyll-theme-chirpy -b master --single-branch
+```
+
+### Setting up the local envrionment
+
+If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems` and `Bundler`. 
+
+Before running or building for the first time, please complete the installation of the Jekyll plugins. Go to the root directory of project and run:
 
 ```terminal
 $ bundle install
 ```
 
-`bundle` will install all the dependent Jekyll Plugins listed in file `Gemfile` automatically.
+`bundle` will automatically install all the dependencies specified by `Gemfile`.
 
+What's more, in order to generate some extra files (*categories*, *tags* and *last modified list*), we need to use some tool scripts. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
 
-### File Structure
+* Debian
 
-The main files and related brief introductions are listed below.
-
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-│   └── travis      # CI stuff, remove it
-├── .travis.yml     # remove it, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── build.sh        # script tool
-├── run.sh          # script tool
-├── init.sh         # script tool
-├── pv.sh           
-├── feed.xml
-├── index.html
-├── robots.txt
-├── search.json
-└── sitemap.xml
+  ```console
+  $ sudo apt-get install coreutils
   ```
 
+* macOS
+
+  ```console
+  $ brew install coreutils
+  ```
+
+
+## Usage
+
+Running [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) requires some extra files, which cannot be generated by Jekyll native commands, so please strictly follow the methods mentioned below to run or deploy your website.
+
+### Initialization
+
+Go to the root directory of the project and start initialization:
+
+```console
+$ bash tools/init.sh
+```
+
+> If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+
+What it does is:
+
+1. Remove some files or directories from your repository:
+    - `.travis.yml`
+    - everything under `.github/`
+    - files under `_posts/`
+    - folder `docs/` 
+
+2. Unless the option `--no-gh` was enabled, setup the GitHub action workflow by renaming `pages-deploy.yml.hook` of directory `.github/workflows/` to `pages-deploy.yml`.
+
+3. Automatically create a commit to save the changes.
 
 ### Configuration
 
-Customize the variables in file `_config.yml` as needed.
-
-
-### Atom Feed
-
-The Atom feed url of your site will be:
-
-```
-<SITE_URL>/feed.xml
-```
-
-The `SITE_URL` was defined by variable `url` in file `_config.yml`.
+Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
+* `url`
+* `avatar`
+* `timezone`
+* `theme_mode`
 
 
 ### Run Locally
 
-You may want to preview the site before publishing, so just run the script tool:
+You may want to preview the site contents before publishing, so just run it by:
 
 ```terminal
-$ bash run.sh
+$ bash tools/run.sh
 ```
 
->**Note**: The *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
-
-Open a brower and visit <http://localhost:4000>.
+Then open a browser and visit to <http://localhost:4000>.
 
 Few days later, you may find that the file changes does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine.
 
+### Deployment
 
-###  Deploying to GitHub Pages
+Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [_project site_](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
 
-Before the deployment begins, ensure the `url` in `_config.yml` has been set to `https://<username>.github.io`.
+Assuming you have already gone through the [initialization](#initialization), you can now choose any of the following methods to deploy your website.
 
-#### Option 1: Built by GitHub Pages
+#### Deploy on GitHub Pages
 
-By deploying your site in this way, you can push the source code to GitHub repository directly.
+For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts to generate additional page files. Therefore, we can use GitHub Actions to build the site, store the built site files on a new branch, and use that branch as the source of the Pages service.
 
-> **Note**: If you want to add any third-party Jekyll plugins or custom scripts to your project, please refer to [*Option 2: Build locally*](#option-2-build-locally).
+1. Push any commit to `origin/master` to trigger the GitHub Actions workflow. Once the build is complete, a new remote branch called `gh-pages` will appear, which is used to store the built site files.
 
-**1**. Rename your repository as `<username>.github.io`.
+2. Unless you prefer to project sites, rename your repository to `<username>.github.io` on GitHub.
 
-**2**. Commit the changes of your repository, then run the initialization script:
+3. Choose branch `gh-pages` as your GitHub Pages source.
+
+4. Visit your website at the address indicated by GitHub.
+
+#### Deploy on Other Platforms
+
+On platforms other than GitHub, e.g. GitLab, we cannot enjoy the convenience of **GitHub Actions**. However, we have a tool to make up for this shortcoming.
+
+Commit the changes of your repository first, then run the publish script:
 
 ```console
-$ bash init.sh
+$ bash tools/publish.sh
 ```
 
-It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
+> Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
 
-**3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repository `<username>.github.io`.
+It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit, then push to `origin/master`. Its output is similar to the following log:
 
-**4**. Visit `https://<username>.github.io` and enjoy.
+```terminal
+[INFO] Success to update lastmod for 4 post(s).
+[INFO] Succeed! 3 category-pages created.
+[INFO] Succeed! 4 tag-pages created.
+[INFO] Published successfully!
+```
 
+Lastly, enable the pages service according to the instructions of the platform you choose.
 
-#### Option 2: Build Locally
+#### Deploy on Private Server
 
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts will not work. If you want to use any another third-party Jekyll plugins, **your have to build locally rather than on GitHub Pages**.
-
-**1**. On GitHub website, create a brand new repository with name `<username>.github.io` and then clone it locally.
-
-**2**. Build your site by:
+In the root of the source project, build your site by:
 
 ```console
-$ bash build.sh -d /path/to/<username>.github.io/
+$ bash tools/build.sh -d /path/to/site/
 ```
 
-The build results will be stored in the root directory of `<username>.github.io` and don't forget to push the changes of `<username>.github.io` to branch `master` on GitHub.
+The generated site files will be placed in the root of `/path/to/site/`. Now you should upload those files to your web server, such as Nginx.
 
-**3**. Go to GitHub website and enable GitHub Pages service for the new repository `<username>.github.io`.
+### Documentation
 
-**4**. Visit `https://<username>.github.io` and enjoy.
+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).
 
-## Documentation
+## Contributing
 
-For more information, please see the [tutorial](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).
+The old saying, "Two heads are better than one." Consequently, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
+
+
+## Credits
+
+This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files).
+
+:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
+
+
+## Support
+
+If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart: Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
 
 
 ## License

_config.yml

@@ -1,4 +1,6 @@
 # The Site Settings
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT licensed
 
@@ -6,16 +8,21 @@
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
 #--------------------------
 
-title: Chirpy
+title: Chirpy                          # the main title
 
-description: 'A text-based Jekyll theme.'
+tagline: A text-focused Jekyll theme.  # it will display as the sub-title
 
-# Replace with your domain, e.g. 'https://username.github.io'
-url: 'https://www.example.com'
+description: >-                        # used by seo meta and the atom feed
+  A minimal, portfolio, sidebar,
+  bootstrap Jekyll theme with responsive web design
+  and focuses on text presentation.
+
+# Replace with the website url, e.g. 'https://username.github.io'
+url: 'protocol://domain'
 
 author: your_full_name                  # change to your full name
 
-avatar: /assets/img/sample/avatar.jpg   # Support network resources.
+avatar: /assets/img/sample/avatar.jpg   # support internet resources
 
 github:
   username: github_username             # change to your github username
@@ -38,34 +45,44 @@ google_site_verification: google_meta_tag_verification # change to your verifica
 
 #--------------------------
 
+
+# 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:
-  # Fill with your Google Analytics ID
-  id: ''
+  id: ''          # Fill with your Google Analytics ID
+  pv:
     # The Google Analytics pageviews switch.
     # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
-  pv: false
-  # superProxy baseURL and URL, only valid when `google_analytics.pv` is set to 'true'
-  proxy_baseurl: ''
+    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:
-  shortname: 'disqus'   # Change to your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
-  comments: true        # boolean type, the global switch for posts comments.
+  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
 
-# The year your website was first run.
-first_run: 2019
+
+# Prefer color scheme setting, available values:
+#
+#     dual   - Follow the system prefer color by default, and a toggle will display
+#              in the left bottom of Sidebar, which used for switch the theme between dark and light.
+#
+#     light  - Use the light color scheme
+#
+#     dark   - Use the dark color scheme
+#
+theme_mode: dual
 
 # boolean type, global switch for ToC in posts.
 toc: true
 
-
-# if your site type is Project Pages site, change below value to '/projectname'
-baseurl: ''
-
 paginate: 10
 
 markdown: kramdown
@@ -84,6 +101,8 @@ 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/
 
 defaults:
@@ -109,6 +128,7 @@ defaults:
     scope:
       path: tags
     values:
+      tab_active: Tags
       location: Tag
       breadcrumb:
         -
@@ -121,6 +141,7 @@ defaults:
     scope:
       path: categories
     values:
+      tab_active: Categories
       location: Category
       breadcrumb:
         -
@@ -140,6 +161,7 @@ defaults:
           label: Home
           url: /
 
+
 sass:
   sass_dir: /assets/css
   style: compressed
@@ -147,28 +169,34 @@ sass:
 compress_html:
   clippings: all
   comments: ["<!-- ", " -->"]
-  endings: [html, head, body, dt, dd, rt, rp, optgroup, option, colgroup, caption, thead, tbody, tfoot, tr, td, th]
+  endings: [html, head, body, dt, dd, rt, rp,
+            optgroup, option, colgroup, caption,
+            thead, tbody, tfoot, tr, td, th]
   profile: false
   blanklines: false
   ignore:
     envs: []
 
 exclude:
-  - vendor/       # Avoid Jekyll mistakenly read the vender directory on Travis-CI's VM .
+  - vendor        # Avoid Jekyll mistakenly read the vendor directory on Travis-CI's VM .
   - Gemfile.lock
   - Gemfile
-  - run.sh
-  - build.sh
-  - init.sh
-  - pv.sh
+  - tools
+  - docs
+  - README.md
+  - LICENSE
 
 sitemap_exclude:  # Sitemap will exclude the following items.
-  - /norobots/
+  fuzzy:
     - /assets/
+  accurate:
+    - /norobots/
     - /tabs/
     - /categories/
     - /tags/
     - /posts/
-  - /404.html
-  - /redirects.json
-  - /search.json
+    - 404.html
+    - feed.xml
+    - sitemap.xml
+    - robots.txt
+    - redirects.json

_data/contact.yml

@@ -0,0 +1,31 @@
+#  The contact options.
+#  v2.3
+#  https://github.com/cotes2020/jekyll-theme-chirpy
+#  © 2020 Cotes Chung
+#  MIT Licensed
+
+-
+  type: github
+  icon: 'fab fa-github-alt'
+-
+  type: twitter
+  icon: 'fab fa-twitter'
+-
+  type: email
+  icon: 'fas fa-envelope'
+  noblank: true            # open link in current tab
+-
+  type: rss
+  icon: 'fas fa-rss'
+  noblank: true
+
+# Uncomment and complete the url below to enable more contact options
+# -
+#   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
+#   url:  ''                  # Fill with your mastodon account page
+# -
+#   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>
+#   url:  ''                  # Fill with your Linkedin homepage
+# -
+#   icon: 'fab fa-stack-overflow'
+#   url:  ''                  # Fill with your stackoverflow homepage

_data/date_format.yml

@@ -0,0 +1,11 @@
+#  The date format
+#  v2.1
+#  https://github.com/cotes2020/jekyll-theme-chirpy
+#  © 2020 Cotes Chung
+#  MIT Licensed
+
+
+tooltip: "%a, %b %e, %Y, %l:%M %p %z"
+post:
+  long: "%b %e, %Y"
+  short: "%b %e"

_data/label.yml

@@ -1,17 +1,19 @@
 # The label text of site.
+#  v2.0
+#  https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT Licensed
 
-tabs:
-  - { name: "Home", icon: 'fas fa-home' }
-  - { name: "Categories", path: tabs, url: categories, icon: 'fas fa-stream' }
-  - { name: "Tags", path: tabs, url: tags, icon: 'fas fa-tags' }
-  - { name: "Archives", path: tabs, url: archives, icon: 'fas fa-archive'}
-  - { name: "About", path: tabs, url: about, icon: 'fas fa-info'}
 
 panel:
   lastmod: "Recent Update"
   trending_tags: "Trending Tags"
   toc: "Contents"
 
+post:
+  relate_posts: "Further Reading"
+  button:
+    next: Newer
+    previous: Older
+
 search_hint: "Search"   # text show on search bar

_data/rights.yml

@@ -0,0 +1,17 @@
+#  License data.
+#
+#  v2.1
+#  https://github.com/cotes2020/jekyll-theme-chirpy
+#  © 2020 Cotes Chung
+#  MIT Licensed
+
+
+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.

_data/share.yml

@@ -0,0 +1,34 @@
+#  Sharing options at the bottom of the post.
+#  Icons from <https://fontawesome.com/>
+#
+#  v2.1
+#  https://github.com/cotes2020/jekyll-theme-chirpy
+#  © 2020 Cotes Chung
+#  MIT Licensed
+
+label: "Share"
+
+platforms:
+  -
+    type: Twitter
+    icon: "fab fa-twitter"
+    link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"
+  -
+    type: Facebook
+    icon: "fab fa-facebook-square"
+    link: "https://www.facebook.com/sharer/sharer.php?title=TITLE&u=URL"
+  -
+    type: Telegram
+    icon: "fab fa-telegram"
+    link: "https://telegram.me/share?text=TITLE&url=URL"
+
+  # Uncomment below if you need to.
+  # -
+  #   type: Linkedin
+  #   icon: "fab fa-linkedin"
+  #   link: "https://www.linkedin.com/sharing/share-offsite/?url=URL"
+  #
+  # -
+  #   type: Weibo
+  #   icon: "fab fa-weibo"
+  #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"

_data/tabs.yml

@@ -0,0 +1,30 @@
+#  The tab data.
+#  v2.1
+#  https://github.com/cotes2020/jekyll-theme-chirpy
+#  © 2020 Cotes Chung
+#  MIT Licensed
+
+
+-
+  name: Home
+  icon: "fas fa-home"
+-
+  name: Categories
+  icon: "fas fa-stream"
+  path: tabs
+  url: categories
+-
+  name: "Tags"
+  icon: "fas fa-tags"
+  path: tabs
+  url: tags
+-
+  name: "Archives"
+  path: tabs
+  url: archives
+  icon: "fas fa-archive"
+-
+  name: "About"
+  icon: "fas fa-info"
+  path: tabs
+  url: about

_includes/css-selector.html

@@ -0,0 +1,54 @@
+<!--
+  CSS selector for site.
+  Chirpy v2.3
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT Licensed
+-->
+
+{% if page.layout == 'home' %}
+  <link rel="preload" href="{{ '/assets/css/home.css' | relative_url }}" as="style">
+  <link rel="stylesheet" href="{{ '/assets/css/home.css' | relative_url }}">
+
+{% elsif page.layout == 'page' %}
+
+  {% if page.type == 'categories' %}
+
+    <link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
+    <link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
+
+  {% elsif page.type == 'tags' %}
+
+    <link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
+    <link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
+
+  {% elsif page.type == 'archives' %}
+
+    <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
+    <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
+
+  {% else %}
+
+    <link rel="preload" href="{{ '/assets/css/page.css' | relative_url }}" as="style">
+    <link rel="stylesheet" href="{{ '/assets/css/page.css' | relative_url }}">
+
+  {% endif %}
+
+{% elsif page.layout == 'category' or page.layout == 'tag' %}
+
+  <link rel="preload" href="{{ '/assets/css/category-tag.css' | relative_url }}" as="style">
+  <link rel="stylesheet" href="{{ '/assets/css/category-tag.css' | relative_url }}">
+
+{% elsif page.layout == 'post' %}
+
+  <link rel="preload" as="style" href="{{ '/assets/css/post.css' | relative_url }}">
+  <link rel="stylesheet" href="{{ '/assets/css/post.css' | relative_url }}">
+
+  {% if site.toc and page.toc %}
+
+    <link rel="preload" as="style" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}" />
+
+  {% endif %}
+
+{% endif %}

_includes/date-format.html

@@ -1,8 +0,0 @@
-<!--
- Define the liquid date formats.
- © 2019 Cotes Chung
- Published under the MIT License
--->
-
-{% assign TOOLTIP_DATE = "%a, %b %e, %Y, %l:%M %p %z" %}
-{% assign POST_DATE = "%b %e, %Y" %}

_includes/disqus.html

@@ -1,15 +1,19 @@
 <!--
   The Disqus lazy loading.
   Powered by: https://osvaldas.info/lazy-loading-disqus-comments
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2019 Cotes Chung
   MIT License
 -->
 
-<div id="disqus" class="pt-2 pb-4">
-  <p class="font-italic text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
+<div id="disqus" class="pt-2 pb-2">
+  <p class="font-italic text-center text-muted small">
+    Comments powered by <a href="https://disqus.com/">Disqus</a>.
+  </p>
 </div>
 
-<script src="{{ site.baseurl }}/assets/lib/jquery.disqusloader.min.js"></script>
+<script src="{{ site.baseurl }}/assets/js/lib/jquery.disqusloader.min.js"></script>
 <script>
   var options = {
     scriptUrl: '//{{ site.disqus.shortname }}.disqus.com/embed.js',

_includes/favicons.html

@@ -1,6 +1,8 @@
 <!--
   The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
   Generated by: https://www.favicon-generator.org/
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2019 Cotes Chung
   Published under the MIT license
 -->

_includes/fixlinenos.html

@@ -3,7 +3,10 @@
   https://github.com/penibelst/jekyll-compress-html/issues/101
   https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
 -->
-{% if _content contains '<pre class="highlight">' %}
-  {% assign _content = _content | replace: '<pre class="highlight"><code', '<code' %}
-  {% assign _content = _content | replace: '</code></pre>', '</code>' %}
+{% if include.content contains '<pre class="highlight">' %}
+  {% assign content = include.content | replace: '<pre class="highlight"><code', '<code' %}
+  {% assign content = content | replace: '</code></pre>', '</code>' %}
+  {{ content }}
+{% else %}
+  {{ include.content }}
 {% endif %}

_includes/footer.html

@@ -1,24 +1,33 @@
 <!--
   The Footer
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2017-2019 Cotes Chung
   MIT License
 -->
 
 <footer class="d-flex w-100 justify-content-center">
   <div class="d-flex justify-content-between align-items-center">
-    <div class="copyright">
-      {% assign first = site.first_run | plus: 0 %}
-      {% assign last = 'now' | date: "%Y" | plus: 0 %}
+    <div class="footer-left">
       <p class="mb-0">
-        © {% if last > first %}{{ first }}-{% endif %}{{-last-}}
-        <a href="{{ site.social.links[0] }}" class="ml-1">{{ site.social.name }}</a>.
-        <br>Powered by <a href="https://jekyllrb.com" target="_blank">Jekyll</a> & <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>, hosted on <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>.
+        © {{ 'now' | date: "%Y" }}
+        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+        {% if site.data.rights.brief %}
+        <span data-toggle="tooltip" data-placement="top"
+          title="{{ site.data.rights.verbose }}">{{ site.data.rights.brief }}</span>
+        {% endif %}
       </p>
     </div>
-    <div class="license">
+
+    <div class="footer-right">
       <p class="mb-0">
-        The blog posts on this site are licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
+        Powered by
+        <a href="https://jekyllrb.com" target="_blank">Jekyll</a>
+        with
+        <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>
+        theme.
       </p>
     </div>
+
   </div> <!-- div.d-flex -->
 </footer>

_includes/google-analytics.html

@@ -1,5 +1,7 @@
 <!--
   The GA snippet
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2017-2019 Cotes Chung
   MIT License
 -->

_includes/head.html

@@ -1,29 +1,31 @@
 <!--
   The Head
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2017-2019 Cotes Chung
   MIT License
 -->
 
 <head>
-  <title>
-  {%- if page.layout == "home" -%}
-    {{- site.title -}}
-  {%- else -%}
-    {{ page.title }} | {{ site.title }}
-  {%- endif -%}
-  </title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+  <title>
+  {%- unless page.layout == "home" -%}
+    {{ page.title | append: " | "}}
+  {%- endunless -%}
+    {{ site.title }}
+  </title>
+
   {% seo title=false %}
 
   {% include favicons.html %}
 
-  <!-- google fonts -->
+  <!-- Google Fonts -->
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
   <link rel="dns-prefetch" href="https://fonts.gstatic.com">
 
-  <!-- ga -->
+  <!-- GA -->
   {% if jekyll.environment == 'production' %}
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
@@ -31,81 +33,43 @@
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
 
-    {% if site.google_analytics.proxy_baseurl and site.google_analytics.pv %}
-      <link rel="preconnect" href="{{ site.google_analytics.proxy_baseurl }}" crossorigin="use-credentials">
-      <link rel="dns-prefetch" href="{{ site.google_analytics.proxy_baseurl }}">
+    {% 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 }}">
     {% endif %}
   {% endif %}
 
+  <!-- jsDelivr CDN -->
   <link rel="preconnect" href="cdn.jsdelivr.net">
   <link rel="dns-prefetch" href="cdn.jsdelivr.net">
 
+  <!-- Bootstrap -->
+  <link rel="preload" as="style"
+    href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+    integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin>
+
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
     integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
 
+  <!-- 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="{{ site.baseurl }}/assets/css/main.css">
+  {% include css-selector.html %}
 
-  {% if page.layout == 'home' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/home.css">
-  {% endif %}
+  <!-- JavaScripts -->
 
-  {% if page.title == 'Categories' and page.layout == 'page' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/categories.css">
-  {% endif %}
+  <link rel="preload" as="script" href="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
+    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
 
-  {% if page.title == 'Tags' and page.layout == 'page' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tags.css">
-  {% endif %}
-
-  {% if page.layout == 'category' or page.layout == 'tag' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/category-tag.css">
-  {% endif %}
-
-  {% if page.title == 'Archives' and page.layout == 'page' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/archives.css">
-  {% endif %}
-
-  {% if page.title == 'About' and page.layout == 'page' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/syntax.css">
-  {% endif %}
-
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 
-  <script>
-    window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/lib/jquery-3.4.1.min.js"><\/script>');
-  </script>
+  <script src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" async></script>
 
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"
-    integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous" async></script>
-
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
-    integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous" async></script>
-
-  <script src="{{ site.baseurl }}/assets/js/dist/commons.js" async></script>
-
-  {% if page.layout == 'home' or page.layout == 'post' %}
-    <script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js" async></script>
-    {% if site.google_analytics.pv %}
-      <script src="{{ site.baseurl }}/assets/lib/countUp.min.js" async></script>
-      <script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
-    {% endif %}
-  {% endif %}
-
-  {% if page.layout == 'post' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/post.css">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/syntax.css">
-    {% if site.toc and page.toc %}
-      <link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
-      <script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js" async></script>
-      <script src="{{ site.baseurl }}/assets/js/dist/toc.min.js" async></script>
-    {% endif %}
-  {% endif %}
+  {% include js-selector.html %}
 
 </head>

_includes/js-selector.html

@@ -0,0 +1,41 @@
+<!--
+  JS selector for site.
+  Chirpy v2.3
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT Licensed
+-->
+
+{% if page.layout == 'home' %}
+
+  <script src="{{ '/assets/js/home.min.js' | relative_url }}" async></script>
+
+{% elsif page.layout == 'post' %}
+
+  <script src="{{ '/assets/js/post.min.js' | relative_url }}" async></script>
+
+  {% if page.math %}
+    <!-- MathJax -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
+  {% endif %}
+
+{% elsif page.layout == 'page' %}
+
+  {% if page.type == 'categories' %}
+    <script src="{{ '/assets/js/categories.min.js' | relative_url }}" async></script>
+  {% else %}
+    <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
+  {% endif %}
+
+{% else %}
+
+  <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
+
+{% endif %}
+
+
+<!-- PWA -->
+{% if jekyll.environment == 'production' %}
+  <script src="{{ '/app.js' | relative_url }}" defer></script>
+{% endif %}

_includes/lozad.html

@@ -1,7 +1,8 @@
-<!-- image lazy load -->
+<!-- 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 observer = lozad();
+  const imgs = document.querySelectorAll('#post-wrapper img');
+  const observer = lozad(imgs);
   observer.observe();
 </script>

_includes/mode-toggle.html

@@ -0,0 +1,118 @@
+<!--
+  Switch the mode between dark and light.
+
+  v2.1
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+-->
+
+<i class="mode-toggle fas fa-sun" dark-mode-invisible></i>
+<i class="mode-toggle fas fa-moon" light-mode-invisible></i>
+
+<script type="text/javascript">
+
+  class ModeToggle {
+    static get MODE_KEY() { return "mode"; }
+    static get DARK_MODE() { return "dark"; }
+    static get LIGHT_MODE() { return "light"; }
+
+    constructor() {
+      if (this.mode != null) {
+        if (this.mode == ModeToggle.DARK_MODE) {
+          if (!this.isSysDarkPrefer) {
+            this.setDark();
+          }
+        } else {
+          if (this.isSysDarkPrefer) {
+            this.setLight();
+          }
+        }
+      }
+
+      var self = this;
+
+      /* always follow the system prefers */
+      this.sysDarkPrefers.addListener(function() {
+        if (self.mode != null) {
+          if (self.mode == ModeToggle.DARK_MODE) {
+            if (!self.isSysDarkPrefer) {
+              self.setDark();
+            }
+
+          } else {
+            if (self.isSysDarkPrefer) {
+              self.setLight();
+            }
+          }
+
+          self.clearMode();
+        }
+      });
+
+    } /* constructor() */
+
+
+    setDark() {
+      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
+    }
+
+    setLight() {
+      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
+    }
+
+    clearMode() {
+      $('html').removeAttr(ModeToggle.MODE_KEY);
+      sessionStorage.removeItem(ModeToggle.MODE_KEY);
+    }
+
+    get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
+
+    get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
+
+    get isDarkMode() { return this.mode == ModeToggle.DARK_MODE; }
+
+    get isLightkMode() { return this.mode == ModeToggle.LIGHT_MODE; }
+
+    get hasMode() { return this.mode != null; }
+
+    get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
+
+    flipMode() {
+      if (this.hasMode) {
+        if (this.isSysDarkPrefer) {
+          if (this.isLightkMode) {
+            this.clearMode();
+          } else {
+            this.setLight();
+          }
+
+        } else {
+          if (this.isDarkMode) {
+            this.clearMode();
+          } else {
+            this.setDark();
+          }
+        }
+
+      } else {
+        if (this.isSysDarkPrefer) {
+          this.setLight();
+        } else {
+          this.setDark();
+        }
+      }
+
+    } /* flipMode() */
+
+  } /* ModeToggle */
+
+  let toggle = new ModeToggle();
+
+  $(".mode-toggle").click(function() {
+    toggle.flipMode();
+  });
+
+</script>

_includes/no-linenos.html

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

_includes/panel.html

@@ -1,61 +1,66 @@
 <!--
   The Pannel on right side (Desktop views)
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2017-2019 Cotes Chung
   MIT License
 -->
 
-<div id="panel-wrapper" class="col-xl-3 pl-2 topbar-down">
+<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
 
   <div class="access">
-  {% assign lastmod_list = "" | split: "" %}
-  {% assign index = 0 %}
 
-  {% for post in site.posts %}
-    {% if post.seo.date_modified > post.date and post.seo.date_modified != nil %}
-      {% capture item %}
-        {{ post.seo.date_modified }}::{{ index }}
-      {% endcapture %}
-      {% assign lastmod_list = lastmod_list | push: item %}
-    {% endif %}
-    {% assign index = index | plus: 1 %}
-  {% endfor %}
+  {% if site.data.updates %}
 
-  {% if lastmod_list.size > 0 %}
-    <div id="access-lastmod" class="post mb-4">
+    {% include update-list.html %}
+
+    {% if update_list.size > 0 %}
+
+    <div id="access-lastmod" class="post">
       <h3 data-toc-skip>
         {{- site.data.label.panel.lastmod -}}
       </h3>
       <ul class="post-content pl-0 pb-1 ml-1 mt-2">
-    {% assign MAX_SIZE = 5 %}
-    {% assign sum = 0 %}
-    {% assign lastmod_list = lastmod_list | sort | reverse %}
-    {% for item in lastmod_list %}
-      {% assign index = item | split: "::" | last | plus: 0 %}
-      {% assign post = site.posts[index] %}
-        <li><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></li>
-      {% assign sum = sum | plus: 1 %}
-      {% if sum >= MAX_SIZE %}
-        {% break %}
-      {% endif %}
-    {% endfor %}
-      </ul>
-    </div><!-- #access-lastmod -->
+
+      {% for item in update_list %}
+        {% assign post_url = item | split: "::" | last | url_encode | prepend: "/posts/" | append: "/" %}
+        {% assign post = site.posts | where: "url", post_url | first %}
+
+        {% if post %}
+          {% assign url = post.url | relative_url %}
+          <li><a href="{{ url }}">{{ post.title }}</a></li>
         {% endif %}
 
+      {% endfor %}
+
+      </ul>
+    </div><!-- #access-lastmod -->
+
+    {% endif %}
+
+  {% endif %} <!-- site.data.updates -->
+
+  {% include trending-tags.html %}
+
+  {% if trending_tags.size > 0 %}
     <div id="access-tags">
       <h3 data-toc-skip>
         {{- site.data.label.panel.trending_tags -}}
       </h3>
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-       {% include trending-tags.html %}
-      </div>
-    </div>
 
+      {% for tag in trending_tags %}
+        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
+      {% endfor %}
+      </div>
+    </div>
+  {% endif %}
   </div> <!-- .access -->
 
   {% if page.layout == 'post' and site.toc and page.toc %}
   <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <h3 data-toc-skip class="pl-3 pt-2">
+    <h3 data-toc-skip class="pl-3 pt-2 mb-2">
       {{- site.data.label.panel.toc -}}
     </h3>
     <nav id="toc" data-toggle="toc"></nav>

_includes/post-nav.html

@@ -0,0 +1,31 @@
+<!--
+  Navigation buttons at the bottom of the post.
+
+  v2.1
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+-->
+
+<div class="post-navigation d-flex justify-content-between">
+  {% if page.previous.url %}
+  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
+    <p>{{ page.previous.title }}</p>
+  </a>
+  {% else %}
+  <span class="btn btn-outline-primary disabled">
+    <p>-</p>
+  </span>
+  {% endif %}
+
+  {% if page.next.url %}
+  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
+    <p>{{ page.next.title }}</p>
+  </a>
+  {% else %}
+  <span class="btn btn-outline-primary disabled">
+    <p>-</p>
+  </span>
+  {% endif %}
+
+</div>

_includes/post-paginator.html

@@ -0,0 +1,88 @@
+<!--
+  The paginator for post list on HomgPage.
+
+  v2.1
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+-->
+
+<ul class="pagination mt-4 mb-0 pl-lg-2">
+  <!-- left arrow -->
+  {% if paginator.previous_page %}
+  <li class="page-item">
+    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">
+      <i class="fas fa-angle-left"></i>
+    </a>
+  </li>
+  {% else %}
+  <li class="page-item disabled">
+    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
+  </li>
+  {% endif %}
+  <!-- endof left arrow -->
+
+  <!-- page numbers -->
+  {% assign left_ellipsis = false %}
+  {% assign right_ellipsis = false %}
+
+  {% for i in (1..paginator.total_pages) %}
+
+    {% assign pre = paginator.page | minus: 1 %}
+    {% assign next = paginator.page | plus: 1 %}
+    {% assign pre_less = pre | minus: 1 %}
+    {% assign next_more = next | plus: 1 %}
+    {% assign show = false %}
+
+    {% if paginator.page == 1 %}
+      {% if i <= 3 or i == paginator.total_pages %}
+        {% assign show = true %}
+      {% endif %}
+    {% elsif paginator.page == paginator.total_pages %}
+      {% if i == 1 or i >= pre_less %}
+        {% assign show = true %}
+      {% endif %}
+    {% else %}
+      {% if i == 1 or i == paginator.total_pages%}
+        {% assign show = true %}
+      {% elsif i >= pre and i <= next %}
+        {% assign show = true %}
+      {% endif %}
+    {% endif %}
+
+    {% if show %}
+        <!-- show number -->
+        <li class="page-item {% if i == paginator.page %} active{% endif %}">
+          <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+        </li>
+      {% else %}
+        <!-- hide number -->
+        {% if i < pre and left_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link btn-box-shadow">...</span>
+          </li>
+          {% assign left_ellipsis = true %}
+        {% elsif i > next and right_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link btn-box-shadow">...</span>
+          </li>
+          {% assign right_ellipsis = true %}
+        {% endif %}
+      {% endif %}
+
+  {% endfor %}
+
+  <!-- right arrow -->
+  {% if paginator.next_page %}
+  <li class="page-item">
+    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}">
+      <i class="fas fa-angle-right"></i>
+    </a>
+  </li>
+  {% else %}
+  <li class="page-item disabled">
+    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
+  </li>
+  {% endif %}
+
+</ul> <!-- .pagination -->

_includes/post-sharing.html

@@ -0,0 +1,28 @@
+<!--
+ Post sharing snippet
+
+ v2.1
+ https://github.com/cotes2020/jekyll-theme-chirpy
+ © 2019 Cotes Chung
+ Published under the MIT License
+-->
+
+<div class="share-wrapper">
+  <span class="share-label text-muted mr-1">{{ site.data.share.label }}</span>
+  <span class="share-icons">
+    {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
+    {% assign url = page.url | relative_url | prepend: site.url %}
+
+    {% for share in site.data.share.platforms %}
+      {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
+        <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
+          title="{{ share.type }}" target="_blank">
+          <i class="fa-fw {{ share.icon }}"></i>
+        </a>
+    {% endfor %}
+
+    <i class="fa-fw fas fa-link small" onclick="copyLink()"
+        data-toggle="tooltip" data-placement="top" title="Copy link"></i>
+
+  </span>
+</div>

_includes/related-posts.html

@@ -1,19 +1,34 @@
 <!--
- The related posts of current post.
- Placed in the bottom of every single post.
+ Recommend the other 3 posts according to the tags and categories of the current post,
+ if the number is not enough, use the other latest posts to supplement.
+
+ v2.0
+ https://github.com/cotes2020/jekyll-theme-chirpy
  © 2019 Cotes Chung
  Published under the MIT License
 -->
 
-{% assign MAX_SIZE = 3 %}
+<!-- The total size of related posts  -->
+{% assign TOTAL_SIZE = 3 %}
+
+<!-- An random integer that bigger than 0  -->
 {% assign TAG_SCORE = 1 %}
+
+<!-- Equals to TAG_SCORE / {max_categories_hierarchy}  -->
 {% assign CATEGORY_SCORE = 0.5 %}
 
-{% assign score_list = "" | split: "" %}
-{% assign post_index = 0 %}
+{% assign SEPARATOR = ":" %}
+
+{% assign score_list = "" | split: "" %}
+{% assign last_index = site.posts.size | minus: 1 %}
+
+{% for i in (0..last_index) %}
+  {% assign post = site.posts[i] %}
+
+  {% if post.url == page.url %}
+    {% continue %}
+  {% endif %}
 
-{% for post in site.posts %}
-  {% if post.url != page.url %}
   {% assign score = 0 %}
 
   {% for tag in post.tags %}
@@ -29,43 +44,67 @@
   {% endfor %}
 
   {% if score > 0 %}
-      {% capture score_item %}{{ score }}:{{ post_index }}{% endcapture %}
+    {% capture score_item %}{{ score }}{{ SEPARATOR }}{{ i }}{% endcapture %}
     {% assign score_list = score_list | push: score_item %}
   {% endif %}
 
-  {% endif %}
-  {% assign post_index = post_index | plus: 1 %}
 {% endfor %}
 
+
+{% assign index_list = "" | split: "" %}
+
 {% if score_list.size > 0 %}
   {% assign score_list = score_list | sort | reverse %}
-  {% assign count = 0 %}
-  <div id="related-posts" class="mt-4 mb-4 pb-3">
-    <h3 class="pt-2 mt-1 mb-4" data-toc-skip>Related Posts</h3>
+  {% for entry in score_list limit: TOTAL_SIZE %}
+    {% assign index = entry | split: SEPARATOR | last %}
+    {% assign index_list = index_list | push: index %}
+  {% endfor %}
+{% endif %}
+
+<!-- Fill with the other newlest posts  -->
+{% assign less = TOTAL_SIZE | minus: index_list.size %}
+
+{% if less > 0 %}
+
+  {% for i in (0..last_index) %}
+    {% assign post = site.posts[i] %}
+    {% if post.url != page.url  %}
+      {% capture cur_index %}{{ i }}{% endcapture %}
+      {% unless index_list contains cur_index %}
+        {% assign index_list = index_list | push: cur_index %}
+        {% assign less = less | minus: 1 %}
+        {% if less <= 0 %}
+          {% break %}
+        {% endif %}
+      {% endunless %}
+    {% endif %}
+  {% endfor %}
+
+{% endif %}
+
+
+{% 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 }}</h3>
     <div class="card-deck mb-4">
-    {% for score_item in score_list %}
-      {% assign data = score_item | split: ":" %}
-      {% assign index = data[1] | plus: 0 %}
+    {% for entry in index_list %}
+      {% assign index = entry | plus: 0 %}
       {% assign post = site.posts[index] %}
       <div class="card">
-        <a href="{{ post.url }}">
+        <a href="{{ post.url | relative_url }}">
           <div class="card-body">
-            <span class="timeago small">
-                {{ post.date | date: POST_DATE }}
-                <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-            </span>
-            <h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
+            {% include timeago.html date=post.date class="small" %}
+            <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
             <div class="text-muted small">
-              <p>{{ post.content | markdownify | strip_html | truncate: 200 | replace: '&', '&amp;' }}</p>
+              <p>
+                {% include no-linenos.html content=post.content %}
+                {{ content | markdownify | strip_html | truncate: 200 }}
+              </p>
             </div>
           </div>
         </a>
       </div>
-      {% assign count = count | plus: 1 %}
-      {% if count >= MAX_SIZE %}
-        {% break %}
-      {% endif %}
     {% endfor %}
     </div> <!-- .card-deck -->
-  </div>
+  </div> <!-- #related-posts -->
 {% endif %}

_includes/search-loader.html

@@ -1,9 +1,10 @@
 <!--
   Jekyll Simple Search loader
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2017-2019 Cotes Chung
   MIT License
 -->
-<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js" integrity="sha256-qcLR00zq6pJk4je3MLgAri8Nn+ZumUlXgTKR2H/xCY0=" crossorigin="anonymous"></script>
 
 {% 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">
@@ -18,12 +19,14 @@
 
 {% capture not_found %}<p class="mt-5">Oops! No result founds.</p>{% endcapture %}
 
+<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js"></script>
+
 <script>
 SimpleJekyllSearch({
   searchInput: document.getElementById('search-input'),
   resultsContainer: document.getElementById('search-results'),
-  json: '{{ site.baseurl }}/search.json',
-  searchResultTemplate: '{{ result_elem }}',
+  json: '{{ site.baseurl }}/assets/js/data/search.json',
+  searchResultTemplate: '{{ result_elem | strip_newlines }}',
   noResultsText: '{{ not_found }}'
 });
 </script>

_includes/search-results.html

@@ -1,13 +1,22 @@
 <!--
   The Search results
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2017-2019 Cotes Chung
   MIT License
 -->
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
   <div class="col-12 col-xl-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted">{{ site.data.label.panel.trending_tags }}</h4>
+      <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags }}</h4>
+
       {% include trending-tags.html %}
+
+      {% for tag in trending_tags %}
+        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
+      {% endfor %}
+
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

_includes/sidebar.html

@@ -1,5 +1,7 @@
 <!--
   The Side Bar
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2017-2019 Cotes Chung
   MIT License
 -->
@@ -8,26 +10,27 @@
   <div id="profile-wrapper" class="d-flex flex-column">
     <div id="avatar" class="d-flex justify-content-center">
       <a href="{{ site.baseurl }}/" alt="avatar">
-        {% assign avatar = site.avatar %}
-        {% if avatar | slice: 0 == '/' %}
-          {% assign avatar = avatar | prepend: site.baseurl %}
+        {% assign avatar_url = site.avatar %}
+        {% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
+        {% if start == '/' %}
+          {% assign avatar_url = avatar_url | prepend: site.baseurl %}
         {% endif %}
-        <img src="{{ avatar }}">
+        <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
       </a>
     </div>
 
     <div class="profile-text mt-3">
-      <div id="site-title">
-        <a href="{{ site.baseurl }}/">{{- site.title -}}</a>
+      <div class="site-title">
+        <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
       </div>
-      <div id="site-subtitle" class="font-italic">{{ site.description }}</div>
+      <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
     </div>
   </div>
 
   <ul class="nav flex-column">
   {% assign page_urls = page.url | split: "/" %}
 
-  {% for item in site.data.label.tabs %}
+  {% for item in site.data.tabs %}
     {% assign ref = site.baseurl | append: "/" %}
 
     {% if item.path %}
@@ -38,10 +41,11 @@
     {% endif %}
 
     <li class="nav-item d-flex justify-content-center
-      {% if item.url == page_urls.last or
-        item.name == "Home" and page.layout == "home" %}active{% endif %}">
+      {% if item.url == page_urls.last
+        or item.name == page.tab_active
+        or item.name == "Home" and page.layout == "home" %}active{% endif %}">
       <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
-        <i class="fa-fw {{ item.icon }} ml-3 mr-4 unloaded"></i>
+        <i class="fa-fw {{ item.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
         <span>{{ item.name | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
@@ -51,18 +55,36 @@
 
 </div><!-- #nav-wrapper -->
 
-<div class="contact d-flex justify-content-around mt-4">
-  <a href="https://github.com/{{ site.github.username }}" target="_blank">
-    <i class="fab fa-github-alt"></i>
-  </a>
-  <a href="https://twitter.com/{{ site.twitter.username }}" target="_blank">
-    <i class="fab fa-twitter"></i>
-  </a>
+<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
+
+  {% if site.theme_mode == "dual" %}
+  <span id="mode-toggle-wrapper">
+    {% include mode-toggle.html %}
+  </span>
+  <span class="icon-border"></span>
+  {% endif %}
+
+  {% for entry in site.data.contact %}
+    {% capture url %}
+      {%- if entry.type == 'github' -%}
+        https://github.com/{{ site.github.username }}
+      {%- elsif entry.type == 'twitter' -%}
+        https://twitter.com/{{ site.twitter.username }}
+      {%- elsif entry.type == 'email' -%}
         {% assign email = site.social.email | split: '@' %}
-  <a href="javascript:window.open('mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))">
-    <i class="fas fa-envelope"></i>
-  </a>
-  <a href="{{ site.baseurl }}/feed.xml" target="_blank">
-    <i class="fas fa-rss"></i>
+        javascript:window.open('mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))
+      {%- elsif entry.type == 'rss' -%}
+        {{ "/feed.xml" | relative_url }}
+      {%- else -%}
+        {{ entry.url }}
+      {%- endif -%}
+    {% endcapture %}
+
+    {% if url != '' %}
+    <a href="{{ url }}" {% unless entry.noblank %}target="_blank"{% endunless %}>
+      <i class="{{ entry.icon }}"></i>
     </a>
+    {% endif %}
+  {% endfor %}
+
 </div>

_includes/timeago.html

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

_includes/topbar.html

@@ -1,9 +1,11 @@
 <!--
   The Top Bar
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2017-2019 Cotes Chung
   MIT License
 -->
-<div id="topbar-wrapper" class="row justify-content-center bg-white topbar-down">
+<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 %}
@@ -42,7 +44,7 @@
       <input class="form-control" id="search-input" type="search" placeholder="{{ site.data.label.search_hint }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
-    <a href="javascript:;">Cancel</a>
+    <span id="search-cancel" >Cancel</span>
   </div>
 
 </div>

_includes/trending-tags.html

@@ -1,25 +1,30 @@
-<!--
+{% comment %}
   The trending tags list
-
+  v2.0
+  https://github.com/cotes2020/jekyll-theme-chirpy
   © 2019 Cotes Chung
   MIT Licensed
--->
+{% endcomment %}
 
 {% assign MAX = 10 %}
 
 {% capture tags_array %}
   {% for tag in site.tags %}
-    {{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
+    {{ tag[1] | size }}::{{ tag[0] | replace: ' ', '-' }}
   {% endfor %}
 {% endcapture %}
 
-{% assign trends = tags_array | split: " " | sort | reverse %}
+{% assign all_tags = tags_array | split: " " | sort | reverse %}
 {% assign count = 0 %}
 
-{% for trend in trends %}
+{% assign trending_tags = "" | split: "" %}
+
+{% for iter in all_tags %}
   {% assign count = count | plus: 1 %}
-  {% assign tag = trend | split: ":" | last  %}
-  <a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase }}/">{{ tag | replace: '-', ' ' }}</a>
+  {% assign tag = iter | split: "::" | last  %}
+
+  {% assign trending_tags = trending_tags | push: tag %}
+
   {% if count >= MAX %}
     {% break %}
   {% endif %}

_includes/update-list.html

@@ -0,0 +1,26 @@
+{% comment %}
+  Get the last 5 posts from lastmod list.
+  v2.2
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+{% endcomment %}
+
+{% assign MAX_SIZE = 5 %}
+
+{% assign all_list = "" | split: "" %}
+
+{% for entry in site.data.updates %}
+  {% capture elem %}
+    {{- entry.lastmod -}}::{{- entry.filename -}}
+  {% endcapture %}
+  {% assign all_list = all_list | push: elem %}
+{% endfor %}
+
+{% assign all_list = all_list | sort | reverse %}
+
+{% assign update_list = "" | split: "" %}
+
+{% for entry in all_list limit:MAX_SIZE %}
+  {% assign update_list = update_list | push: entry %}
+{% endfor %}

_layouts/category.html

@@ -1,12 +1,11 @@
 ---
 layout: page
 # The Category layout
-# © 2017-2019 Cotes Chung
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # MIT Licensed
 ---
 
-{% include date-format.html %}
-
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
@@ -17,9 +16,9 @@ layout: page
   <ul class="post-content pl-0">
     {% for post in site.categories[page.category] %}
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
-      <a href="{{ post.url | absolute_url }}">{{ post.title }}</a>
+      <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_DATE }}</span>
+      <span class="text-muted small">{{ post.date | date: site.data.date_format.post.long }}</span>
     </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -1,34 +1,50 @@
 ---
 layout: compress
 # Default layout
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT Licensed
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+
+{% if site.lang %}
+  {% assign lang = site.lang | split: "_" | first %}
+{% else %}
+  {% assign lang = 'en' %}
+{% endif %}
+
+{% capture prefer_mode %}
+  {% if site.theme_mode != "dual" %}
+    mode="{{ site.theme_mode }}"
+  {% endif %}
+{% endcapture %}
+
+<html lang="{{ lang }}" {{ prefer_mode }} >
 
   {% include head.html %}
 
   <body data-spy="scroll" data-target="#toc">
+
     <div id="sidebar" class="d-flex flex-column">
       {% include sidebar.html %}
     </div>
-    <div id="main-wrapper" class="bg-white">
+
     {% include topbar.html %}
+
+    <div id="main-wrapper">
       <div id="main">
 
-        {% capture _content %}
-          {{ content }}
-        {% endcapture %}
-
-        {% include fixlinenos.html %}
-        {{ _content }}
+        {% include fixlinenos.html content=content %}
 
         {% include footer.html %}
+
       </div>
+
       {% include search-results.html %}
-    </div>
+
+    </div> <!-- #main-wrapper -->
 
     <div id="mask"></div>
 

_layouts/home.html

@@ -1,33 +1,75 @@
 ---
 layout: page
 # The Home page layout
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT Licensed
 ---
 
-{% include date-format.html %}
+
+{% assign pinned = site.posts | where_exp: "item", "item.pin == true"  %}
+{% assign default = site.posts | where_exp: "item", "item.pin == nil "  %}
+{% assign posts = "" | split: "" %}
+
+<!-- Get pinned posts -->
+
+{% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
+{% assign pinned_num = pinned.size | minus: offset %}
+
+{% if pinned_num > 0 %}
+  {% for i in (offset..pinned.size) limit: pinned_num %}
+    {% assign posts = posts | push: pinned[i] %}
+  {% endfor %}
+{% else %}
+  {% assign pinned_num = 0 %}
+{% endif %}
+
+
+<!-- Get default posts -->
+
+{% assign default_beg = offset | minus: pinned.size %}
+
+{% if default_beg < 0 %}
+  {% assign default_beg = 0 %}
+{% endif %}
+
+{% assign default_num = paginator.posts | size | minus: pinned_num  %}
+{% assign default_end = default_beg | plus: default_num | minus: 1 %}
+
+{% if default_num > 0 %}
+  {% for i in (default_beg..default_end) %}
+    {% assign posts = posts | push: default[i] %}
+  {% endfor %}
+{% endif %}
+
 
 <div id="post-list">
-  {% for post in paginator.posts %}
+
+{% for post in posts %}
+
   <div class="post-preview">
-    <h1>
-      <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
-    </h1>
+    <div class="d-flex justify-content-between pr-xl-2">
+      <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
+      {% if post.pin %}
+        <i class="fas fa-thumbtack fa-fw text-muted mt-1 ml-2 mt-xl-2" data-toggle="tooltip" data-placement="left"
+        title="Pinned"></i>
+      {% endif %}
+    </div>
     <div class="post-content">
       <p>
-      {{ post.content | strip_html | truncate: 200 | replace: '&', '&amp;' }}
+        {% include no-linenos.html content=post.content %}
+        {{ content | markdownify | strip_html | truncate: 200 }}
       </p>
     </div>
 
-    <div class="post-meta text-muted pt-1">
+    <div class="post-meta text-muted">
       <!-- posted date -->
       <i class="far fa-clock fa-fw"></i>
-      <span class="timeago" data-toggle="tooltip" title="{{ post.date | date: TOOLTIP_DATE }}">
-      {{ post.date | date: POST_DATE }}
-      <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-      </span>
+      {% include timeago.html date=post.date tooltip=true %}
+
       <!-- page views -->
-      {% if site.google_analytics.pv %}
+      {% if site.google_analytics.pv.enabled %}
       <i class="far fa-eye fa-fw"></i>
       <span id="pv_{{-post.title-}}" class="pageviews">
         <i class="fas fa-spinner fa-spin fa-fw"></i>
@@ -35,87 +77,11 @@ layout: page
       {% endif %}
     </div>
   </div> <!-- .post-review -->
+
 {% endfor %}
+
 </div> <!-- #post-list -->
 
 {% if paginator.total_pages > 0 %}
-<ul class="pagination mt-4 mb-0 pl-lg-2">
-  <!-- left arrow -->
-  {% if paginator.previous_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">
-      <i class="fas fa-angle-left"></i>
-    </a>
-  </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
-  </li>
-  {% endif %}
-  <!-- endof left arrow -->
-
-  <!-- page numbers -->
-  {% assign left_ellipsis = false %}
-  {% assign right_ellipsis = false %}
-
-  {% for i in (1..paginator.total_pages) %}
-
-    {% assign pre = paginator.page | minus: 1 %}
-    {% assign next = paginator.page | plus: 1 %}
-    {% assign pre_less = pre | minus: 1 %}
-    {% assign next_more = next | plus: 1 %}
-    {% assign show = false %}
-
-    {% if paginator.page == 1 %}
-      {% if i <= 3 or i == paginator.total_pages %}
-        {% assign show = true %}
-      {% endif %}
-    {% elsif paginator.page == paginator.total_pages %}
-      {% if i == 1 or i >= pre_less %}
-        {% assign show = true %}
-      {% endif %}
-    {% else %}
-      {% if i == 1 or i == paginator.total_pages%}
-        {% assign show = true %}
-      {% elsif i >= pre and i <= next %}
-        {% assign show = true %}
-      {% endif %}
-    {% endif %}
-
-    {% if show %}
-        <!-- show number -->
-        <li class="page-item {% if i == paginator.page %} active{% endif %}">
-          <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
-        </li>
-      {% else %}
-        <!-- hide number -->
-        {% if i < pre and left_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign left_ellipsis = true %}
-        {% elsif i > next and right_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign right_ellipsis = true %}
-        {% endif %}
-      {% endif %}
-
-  {% endfor %}
-
-  <!-- right arrow -->
-  {% if paginator.next_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}">
-      <i class="fas fa-angle-right"></i>
-    </a>
-  </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
-  </li>
-  {% endif %}
-
-</ul> <!-- .pagination -->
+  {% include post-paginator.html %}
 {% endif %}

_layouts/page.html

@@ -1,13 +1,15 @@
 ---
 layout: default
 # The page layout
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT License
 ---
 
-<div class="row bg-white">
+<div class="row">
   <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 pl-xl-3">
+    <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>
       <div class="post-content">
@@ -16,11 +18,21 @@ layout: default
     {% else %}
       {{ content }}
     {% endif %}
-
     </div> <!-- #page -->
-
   </div><!-- .col-12 -->
 
   {% include panel.html %}
 
 </div>
+
+{% if site.disqus.comments and page.comments %}
+<div class="row">
+  <div class="col-12 col-lg-11 col-xl-8">
+    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+
+    {% include disqus.html %}
+
+    </div> <!-- .pl-1 pr-1 -->
+  </div> <!-- .col-12 -->
+</div> <!-- .row -->
+{% endif %}

_layouts/post.html

@@ -1,45 +1,60 @@
 ---
 layout: default
 # The posts' layout
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT Licensed
 ---
 
 <div class="row">
-  {% include date-format.html %}
 
   <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
+
     <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+
       <h1 data-toc-skip>{{ page.title }}</h1>
+
       <div class="post-meta text-muted d-flex flex-column">
-        <!-- Published Date and Categoreis -->
+        <!-- Published date and author -->
         <div>
-          <span class="timeago" data-toggle="tooltip" title="{{ page.date | date: TOOLTIP_DATE }}">
-            {{ page.date | date: POST_DATE }}
-            <i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
+          Posted
+          {% include timeago.html date=page.date tooltip=true %}
+          by
+          <span class="author">
+          {% if page.author %}
+            {{ page.author }}
+          {% else %}
+            {{ site.author }}
+          {% endif %}
           </span>
-          {% if page.categories.size > 0 %}on{% endif %}
-          {% for category in page.categories %}
-            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
-            {%- unless forloop.last -%}, {%- endunless -%}
-          {% endfor %}
         </div>
 
         <!-- lastmod -->
-        {% if page.seo.date_modified > page.date %}
+        {%- capture filename -%}
+          {{ page.url | split: "/" | last }}
+        {%- endcapture -%}
+
+        {% for item in site.data.updates %}
+          {% assign encode_filename = item.filename | url_encode %}
+          {% if filename == encode_filename %}
+            {% assign lastmod = item.lastmod %}
+            {% break %}
+          {% endif %}
+        {% endfor %}
+
+        {% if lastmod %}
         <div>
           Updated
-          <span class="timeago lastmod" data-toggle="tooltip" title="{{ page.seo.date_modified | date: TOOLTIP_DATE }}">
-            {{ page.seo.date_modified | date: POST_DATE }}
-            <i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
-          </span>
+          {% include timeago.html date=lastmod class="lastmod" tooltip=true %}
         </div>
         {% endif %}
 
         <!-- page views -->
-        {% if site.google_analytics.pv %}
+        {% if site.google_analytics.pv.enabled %}
         <div>
-          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span> views
+          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
+          views
         </div>
         {% endif %}
 
@@ -49,18 +64,31 @@ layout: default
         {% if page.image %}
           <img src="{{ page.image }}">
         {% endif %}
-        <!-- Add lozad class into image tags. see: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+        <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
         {% if content contains '<img src=' %}
-          {{ content | replace: '<img src=', '<img class="lozad" src="/assets/img/commons/loading.png" data-src=' }}
+          {{ content | replace: '<img src=', '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src=' }}
         {% else %}
           {{ content }}
         {% endif %}
       </div>
 
-      <div class="post-tail text-muted">
-        <!-- Tags -->
+      <div class="post-tail-wrapper text-muted">
+
+        <!-- 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 %}
+            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
+            {%- unless forloop.last -%}, {%- endunless -%}
+          {% endfor %}
+        </div>
+        {% endif %}
+
+        <!-- tags -->
         {% if page.tags.size > 0 %}
-        <div class="mb-4">
+        <div class="post-tags">
+          <i class="fa fa-tags fa-fw mr-1"></i>
           {% for tag in page.tags %}
           <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
             class="post-tag no-text-decoration" >
@@ -69,9 +97,26 @@ layout: default
           {% endfor %}
           </div>
         {% endif %}
+
+        <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>
+          {% endif %}
+
+          {% include post-sharing.html %}
+
+        </div><!-- .post-tail-bottom -->
+
       </div><!-- div.post-tail -->
 
     </div> <!-- .post -->
+
+
   </div> <!-- #post-wrapper -->
 
   {% include panel.html %}
@@ -79,39 +124,21 @@ layout: default
 </div> <!-- .row -->
 
 <div class="row">
-  <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
+  <div class="col-12 col-lg-11 col-xl-8">
+    <div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
 
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
     {% include related-posts.html %}
 
-      <div class="post-pager d-flex justify-content-between">
-      {% if page.previous.url %}
-        <a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
-      {% endif %}
-          <i class="fas fa-angle-left mr-1"></i>
-          OLDER POST
-        </a>
-
-      {% if page.next.url %}
-        <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
-      {% endif %}
-        NEWER POST
-        <i class="fas fa-angle-right ml-1"></i>
-        </a>
-      </div> <!-- div.post-pager -->
+    {% include post-nav.html %}
 
     {% if site.disqus.comments and page.comments %}
       {% include disqus.html %}
     {% endif %}
 
-    </div> <!-- .pl-1 pr-1 -->
-
     </div> <!-- #post-extend-wrapper -->
 
+  </div> <!-- .col-* -->
+
 </div> <!-- .row -->
 
 {% include lozad.html %}

_layouts/tag.html

@@ -1,12 +1,12 @@
 ---
 layout: page
 # The layout for Tag page
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT Licensed
 ---
 
-{% include date-format.html %}
-
 <div id="page-tag">
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
@@ -16,9 +16,9 @@ layout: page
   <ul class="post-content pl-0">
     {% for post in site.tags[page.tag] %}
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
-      <a href="{{ post.url | absolute_url }}">{{ post.title }}</a>
+      <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_DATE }}</span>
+      <span class="text-muted small">{{ post.date | date: site.data.date_format.post.long }}</span>
     </li>
     {% endfor %}
   </ul>

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

@@ -1,11 +1,13 @@
 ---
-title: "Text and Typography"
+title: Text and Typography
+author: Cotes Chung
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
+math: true
 ---
 
-This Jekyll template totally compatible with Markdown syntax. Now, let's take a look for the text and typography in this theme.
+This Jekyll template totally compatible with Markdown syntax. Now, let's take a look for the text and typography in here.
 
 ## Titles
 
@@ -48,7 +50,7 @@ Fluttering and dancing in the breeze.
 
 ## Link
 
-[http://127.0.0.1:4000](http://127.0.0.1:4000)
+<http://127.0.0.1:4000>
 
 
 ## Footnote
@@ -58,13 +60,22 @@ Click the hook will locate the footnote[^footnote].
 
 ## Image
 
-![Desktop View](/assets/img/sample/mockup.png)
+![Desktop View]({{ "/assets/img/sample/mockup.png" | relative_url }})
 
 
 ## Inline code
 
 This is an example of `Inline Code`.
 
+## Mathematics
+
+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
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
 ## Code Snippet
 

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

@@ -1,5 +1,6 @@
 ---
-title: "Writing a New Post"
+title: Writing a New Post
+author: Cotes Chung
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]
@@ -7,7 +8,7 @@ tags: [writing]
 
 ## Naming and Path
 
-Create a new file name with the format `YYYY-MM-DD-title.md` then put it into `_post` of the root directory.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. The `EXTENSION` must be one of `md` and `markdown`. From `v2.4.1`, you can create sub-directories under `_posts/` to categorize posts.
 
 ## Front Matter
 
@@ -18,23 +19,82 @@ Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-m
 title: TITLE
 date: YYYY-MM-DD HH:MM:SS +/-TTTT
 categories: [TOP_CATEGORIE, SUB_CATEGORIE]
-tags: [TAG]
+tags: [TAG]     # TAG names should always be lowercase
 ---
 ```
 
 > **Note**: The posts' ***layout*** has been set to `post` by default, so there is no need to add the variable ***layout*** in Front Matter block.
 
-- **The TimeZone of Date**
+### Timezone of date
 
-    To ensure that the posts' release date matches the city you live in, please modify the value of `timezone` in the file `_config.yml`. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
+In order to accurately record the release date of a post, you should not only setup the `timezone` of `_config.yml` but also provide the the post's timezone in field `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`.
 
-- **Categories and Tags**
+### Categories and Tags
 
-    The `categories` of each post is designed to contain up to two elements, and the number of elements in `tag` can be zero or infinite.
+The `categories` of each post is designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity.
+
+The list of posts belonging to the same _category_/_tag_ is recorded on a separate page. At the same time, the number of these _category_/_tag_ type pages is equal to the number of `categories` / `tags` elements for all posts, which means that the two number must be exactly the same.
+
+For instance, let's say there is a post with front matter:
+
+```yaml
+categories: [Animal, Insect]
+tags: bee
+```
+
+Then we should have two _category_ type pages placed in folder `categories` of root and one _tag_ type page placed in folder `tags`  of root:
+
+```sh
+.
+├── categories
+│   ├── animal.html         # a category type page
+│   └── insect.html
+├── tags
+│   └── bee.html            # a tag type page
+...
+```
+    
+and the content of a _category_ type page is
+
+```yaml
+---
+layout: category
+title: CATEGORY_NAME        # e.g. Insect
+category: CATEGORY_NAME     # e.g. Insect
+---
+```
+
+the content of a _tag_ type page is
+
+```yaml
+---
+layout: tag
+title: TAG_NAME             # e.g. bee
+tag: TAG_NAME               # e.g. bee
+---
+```
+
+With the increasing number of posts, the number of categories and tags will increase several times!  If we still manually create these *category*/_tag_ type files, it will obviously be a super time-consuming job, and it is very likely to miss some of them, i.e., when you click on the missing `category` or `tag` link from a post or somewhere, the browser will complain to you "404 Not Found". The good news is we got a lovely script tool `_scripts/sh/create_pages.sh` to finish the boring tasks. Basically we will use it via `run.sh`, `build.sh`, `deploy.sh` or `publish.sh` that placed in `tools/` instead of running it separately. Check out its use case [here]({{ "/posts/getting-started/#deployment" | relative_url }}).
+
+## Last modified date
+
+The last modified date of a post is obtained according to the post's latest git commit date, and the modified date of all posts are designed to be stored in the file `_data/updates.yml`. Then contents of that file may be as follows:
+
+```yaml
+-
+  filename: getting-started             # the post filename without date and extension
+  lastmod: 2020-04-13 00:38:56 +0800    # the post last modified date
+-
+  ... 
+```
+
+You can choose to create this file manually, But the better approach is to let it be automatically generated by a script tool, and `_scripts/sh/dump_lastmod.sh` was born for this! Similar to the other script (`create_pages.sh`) mentioned above, it is also be called from the other superior tools, so it doesn't have to be used separately.
+
+When some posts have been modified since their published date and also the file `_data/updates.yml` was created correctly, a list with the label **Recent Updates** will be displayed in the right panel of the desktop view, which records the five most recently modified posts.
 
 ## Table of Contents
 
-By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml` and set the variable `toc` to `false`. If you want to turn off TOC for specific post, add the following to post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
+By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml` and set the value of variable `toc` to `false`. If you want to turn off TOC for specific post, add the following to post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
 
 ```yaml
 ---
@@ -54,6 +114,28 @@ comments: false
 ```
 
 
+## Mathematics
+
+For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
+
+```yaml
+---
+math: true
+---
+```
+
+
+## Pinned Posts
+
+You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
+
+```yaml
+---
+pin: true
+---
+```
+
+
 ## Code Block
 
 Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
@@ -77,7 +159,7 @@ items:
       quantity:  4
 ```
 
-#### Liquid codes
+#### Liquid Codes
 
 If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
 
@@ -89,6 +171,8 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 ```
 {% endraw %}
 
+
 ## Learn More
+
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
 

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

@@ -1,131 +1,142 @@
 ---
 title: Getting Started
+author: Cotes Chung
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
+pin: true
 ---
 
-## Preparation
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (Ruby, RubyGem, Bundler and Jekyll). In addition, to use the funny script tools, we also need to install [Python](https://www.python.org/downloads/)(version 3.5 or abover) and [ruamel.yaml](https://pypi.org/project/ruamel.yaml/).
+## Installation
 
-Next, [fork](https://github.com/cotes2020/jekyll-theme-chirpy/fork) **Chirpy** and then clone your replicated repository locally.
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, and clone the fork to local by:
 
+```terminal
+$ git clone git@github.com:<username>/jekyll-theme-chirpy -b master --single-branch
+```
 
-## Install Jekyll Plugins
+### Setting up the local envrionment
 
-Go to root directory of the repository and run the following:
+If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems` and `Bundler`. 
+
+Before running or building for the first time, please complete the installation of the Jekyll plugins. Go to the root directory of project and run:
 
 ```terminal
 $ bundle install
 ```
 
-`bundle` will install all the dependent Jekyll Plugins listed in file `Gemfile` automatically.
+`bundle` will automatically install all the dependencies specified by `Gemfile`.
 
+What's more, in order to generate some extra files (*categories*, *tags* and *last modified list*), we need to use some tool scripts. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
 
-## File Structure
+* Debian
 
-The main files and related brief introductions are listed below.
+  ```console
+  $ sudo apt-get install coreutils
+  ```
 
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-│   └── travis      # CI stuff, remove it
-├── .travis.yml     # remove it, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── build.sh        # script tool
-├── run.sh          # script tool
-├── init.sh         # script tool
-├── pv.sh           
-├── feed.xml
-├── index.html
-├── robots.txt
-├── search.json
-└── sitemap.xml
+* macOS
+
+  ```console
+  $ brew install coreutils
   ```
 
 
-## Configuration
+## Usage
 
-Customize the variables in file `_config.yml` as needed.
+Running [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) requires some extra files, which cannot be generated by Jekyll native commands, so please strictly follow the methods mentioned below to run or deploy your website.
 
+### Initialization
 
-## Atom Feed
+Go to the root directory of the project and start initialization:
 
-The Atom feed url of your site will be:
-
-```
-<SITE_URL>/feed.xml
+```console
+$ bash tools/init.sh
 ```
 
-The `SITE_URL` was defined by variable `url` in file `_config.yml`.
+> If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+
+What it does is:
+
+1. Remove some files or directories from your repository:
+    - `.travis.yml`
+    - everything under `.github/`
+    - files under `_posts/`
+    - folder `docs/` 
+
+2. Unless the option `--no-gh` was enabled, setup the GitHub action workflow by renaming `pages-deploy.yml.hook` of directory `.github/workflows/` to `pages-deploy.yml`.
+
+3. Automatically create a commit to save the changes.
+
+### Configuration
+
+Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
+* `url`
+* `avatar`
+* `timezone`
+* `theme_mode`
 
 
-##  Run Locally
+### Run Locally
 
-You may want to preview the site before publishing, so just run the script tool:
+You may want to preview the site contents before publishing, so just run it by:
 
 ```terminal
-$ bash run.sh
+$ bash tools/run.sh
 ```
 
->**Note**: The *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
-
-Open a brower and visit <http://localhost:4000>.
+Then open a browser and visit to <http://localhost:4000>.
 
 Few days later, you may find that the file changes does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine.
 
-##  Deploying to GitHub Pages
+### Deployment
 
-Before the deployment begins, ensure the `url` in `_config.yml` has been set to `https://<username>.github.io`.
+Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [_project site_](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
 
-### Option 1: Built by GitHub Pages
+Assuming you have already gone through the [initialization](#initialization), you can now choose any of the following methods to deploy your website.
 
-By deploying your site in this way, you can push the source code to GitHub repository directly.
+#### Deploy on GitHub Pages
 
-> **Note**: If you want to add any third-party Jekyll plugins or custom scripts to your project, please refer to [*Option 2: Build locally*](#option-2-build-locally).
+For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts to generate additional page files. Therefore, we can use GitHub Actions to build the site, store the built site files on a new branch, and use that branch as the source of the Pages service.
 
-**1**. Rename your repository as `<username>.github.io`.
+1. Push any commit to `origin/master` to trigger the GitHub Actions workflow. Once the build is complete, a new remote branch called `gh-pages` will appear, which is used to store the built site files.
 
-**2**. Commit the changes of your repository, then run the initialization script:
+2. Unless you prefer to project sites, rename your repository to `<username>.github.io` on GitHub.
+
+3. Choose branch `gh-pages` as your GitHub Pages source.
+
+4. Visit your website at the address indicated by GitHub.
+
+#### Deploy on Other Platforms
+
+On platforms other than GitHub, e.g. GitLab, we cannot enjoy the convenience of **GitHub Actions**. However, we have a tool to make up for this shortcoming.
+
+Commit the changes of your repository first, then run the publish script:
 
 ```console
-$ bash init.sh
+$ bash tools/publish.sh
 ```
 
-It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
+> Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
 
-**3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repository `<username>.github.io`.
+It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit, then push to `origin/master`. Its output is similar to the following log:
 
-**4**. Visit `https://<username>.github.io` and enjoy.
+```terminal
+[INFO] Success to update lastmod for 4 post(s).
+[INFO] Succeed! 3 category-pages created.
+[INFO] Succeed! 4 tag-pages created.
+[INFO] Published successfully!
+```
 
+Lastly, enable the pages service according to the instructions of the platform you choose.
 
-### Option 2: Build Locally
+#### Deploy on Private Server
 
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts will not work. If you want to use any another third-party Jekyll plugins, **your have to build locally rather than on GitHub Pages**.
-
-**1**. On GitHub website, create a brand new repository with name `<username>.github.io` and then clone it locally.
-
-**2**. Build your site by:
+In the root of the source project, build your site by:
 
 ```console
-$ bash build.sh -d /path/to/<username>.github.io/
+$ bash tools/build.sh -d /path/to/site/
 ```
 
-The build results will be stored in the root directory of `<username>.github.io` and don't forget to push the changes of `<username>.github.io` to branch `master` on GitHub.
-
-**3**. Go to GitHub website and enable GitHub Pages service for the new repository `<username>.github.io`.
-
-**4**. Visit `https://<username>.github.io` and enjoy.
+The generated site files will be placed in the root of `/path/to/site/`. Now you should upload those files to your web server, such as Nginx.

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

@@ -1,5 +1,6 @@
 ---
-title: "Customize the Favicon"
+title: Customize the Favicon
+author: Cotes Chung
 date: 2019-08-11 00:34:00 +0800
 categories: [Blogging, Tutorial]
 tags: [favicon]
@@ -8,13 +9,13 @@ 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.
 
-Whit 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.
+With a square image (PNG, JPG or GIF) in hand, open the site [*Favicon & App Icon Generator*](https://www.favicon-generator.org/) and upload your original image.
 
-![upload-image](/assets/img/sample/upload-image.png)
+![upload-image]({{ "/assets/img/sample/upload-image.png" | relative_url }})
 
 Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.
 
-![download-icons](/assets/img/sample/download-icons.png)
+![download-icons]({{ "/assets/img/sample/download-icons.png" | relative_url }})
 
 Download the generated package, unzip and delete the following two from the extracted files:
 
@@ -23,4 +24,4 @@ Download the generated package, unzip and delete the following two from the extr
  
 Now, copy the rest image files (`.PNG` and `.ICO`) to cover the original one in folder `assets/img/favicons/`.
 
-At last, don't forget to rebuild your site so that the icon becomes your custom edition.
+Lastly, don't forget to rebuild your site so that the icon becomes your custom edition.

_scripts/py/init_all.py

@@ -1,16 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-"""
-Automatic invokes all initial scripts for project.
-© 2018-2019 Cotes Chung
-Licensed under MIT
-"""
-
-import update_posts_lastmod
-import pages_generator
-
-
-update_posts_lastmod
-
-pages_generator

_scripts/py/pages_generator.py

@@ -1,190 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-'''
-Generates HTML pages for Categories and Tags in posts.
-
-Dependencies:
-  - git
-  - ruamel.yaml
-
-© 2018-2019 Cotes Chung
-MIT License
-'''
-
-
-import os
-import glob
-import shutil
-import sys
-import subprocess
-
-from ruamel.yaml import YAML
-from utils.common import get_yaml
-from utils.common import check_py_version
-
-
-DRAFTS_DIR = '_drafts'
-POSTS_DIR = ['_posts']
-
-CATEGORIES_DIR = 'categories'
-CATEGORY_LAYOUT = 'category'
-
-TAG_DIR = 'tags'
-TAG_LAYOUT = 'tag'
-
-LEVEL = 3  # Tree level for current script file.
-
-
-def help():
-    print("Usage: "
-          "   python pages_generator.py [Option]\n\n"
-          "Options:\n"
-          "   -d, --drafts         Enable drafts\n"
-          "   -v, --verbose        Print verbose logs\n")
-
-
-def get_path(dir):
-    path = os.path.abspath(__file__)
-    count = LEVEL
-    r_index = len(path)
-    while r_index > 0:
-        r_index -= 1
-        if (path[r_index] == '/' or path[r_index] == '\\'):
-            count -= 1
-            if count == 0:
-                return path[:r_index + 1] + dir
-
-
-def get_categories():
-    all_categories = []
-    yaml = YAML()
-
-    for dir in POSTS_DIR:
-        path = get_path(dir)
-        for file in glob.glob(os.path.join(path, '*.md')):
-            meta = yaml.load(get_yaml(file)[0])
-
-            if 'category' in meta:
-                if type(meta['category']) == list:
-                    err_msg = (
-                        "[Error] File {} 'category' type"
-                        " can not be LIST!").format(file)
-                    raise Exception(err_msg)
-                else:
-                    if meta['category'] not in all_categories:
-                        all_categories.append(meta['category'])
-            else:
-                if 'categories' in meta:
-                    if type(meta['categories']) == str:
-                        error_msg = (
-                            "[Error] File {} 'categories' type"
-                            " can not be STR!").format(file)
-                        raise Exception(error_msg)
-
-                    for ctg in meta['categories']:
-                        if ctg not in all_categories:
-                            all_categories.append(ctg)
-                else:
-                    err_msg = (
-                        "[Error] File:{} at least "
-                        "have one category.").format(file)
-                    print(err_msg)
-
-    return all_categories
-
-
-def generate_category_pages(is_verbose):
-    categories = get_categories()
-    path = get_path(CATEGORIES_DIR)
-
-    if os.path.exists(path):
-        shutil.rmtree(path)
-
-    os.makedirs(path)
-
-    for category in categories:
-        new_page = path + '/' + category.replace(' ', '-').lower() + '.html'
-        with open(new_page, 'w+', encoding='utf-8') as html:
-            html.write("---\n")
-            html.write("layout: {}\n".format(CATEGORY_LAYOUT))
-            html.write("title: {}\n".format(category))
-            html.write("category: {}\n".format(category))
-            html.write("---")
-
-            if is_verbose:
-                print("[INFO] Created page: " + new_page)
-
-    change = subprocess.getoutput("git status categories -s")
-    if change:
-        print("[INFO] Succeed! {} category-pages created."
-              .format(len(categories)))
-
-
-def get_all_tags():
-    all_tags = []
-    yaml = YAML()
-
-    for dir in POSTS_DIR:
-        path = get_path(dir)
-        for file in glob.glob(os.path.join(path, '*.md')):
-            meta = yaml.load(get_yaml(file)[0])
-
-            if 'tags' in meta:
-                for tag in meta['tags']:
-                    if tag not in all_tags:
-                        all_tags.append(tag)
-            else:
-                raise Exception("Didn't find 'tags' in \
-                  post '{}' !".format(file))
-
-    return all_tags
-
-
-def generate_tag_pages(is_verbose):
-    all_tags = get_all_tags()
-    tag_path = get_path(TAG_DIR)
-
-    if os.path.exists(tag_path):
-        shutil.rmtree(tag_path)
-
-    os.makedirs(tag_path)
-
-    for tag in all_tags:
-        tag_page = tag_path + '/' + tag.replace(' ', '-').lower() + '.html'
-        with open(tag_page, 'w+', encoding='utf-8') as html:
-            html.write("---\n")
-            html.write("layout: {}\n".format(TAG_LAYOUT))
-            html.write("title: {}\n".format(tag))
-            html.write("tag: {}\n".format(tag))
-            html.write("---")
-
-            if is_verbose:
-                print("[INFO] Created page: " + tag_page)
-
-    change = subprocess.getoutput("git status tags -s")
-    if change:
-        print("[INFO] Succeed! {} tag-pages created.".format(len(all_tags)))
-
-
-def main():
-    check_py_version()
-
-    is_verbose = False
-
-    if len(sys.argv) > 1:
-        for arg in sys.argv:
-            if arg != sys.argv[0]:
-                if arg == '-d' or arg == '--drafts':
-                    POSTS_DIR.insert(0, DRAFTS_DIR)
-                elif arg == '-v' or arg == '--verbose':
-                    is_verbose = True
-                else:
-                    help()
-                    return
-
-    generate_category_pages(is_verbose)
-    generate_tag_pages(is_verbose)
-
-
-main()

_scripts/py/update_posts_lastmod.py

@@ -1,166 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-"""
-Update (or create if not existed) field 'seo.date_modified'
-in posts' Front Matter by their latest git commit date.
-
-Dependencies:
-  - git
-  - ruamel.yaml
-
-© 2018-2019 Cotes Chung
-Licensed under MIT
-"""
-
-import sys
-import glob
-import os
-import getopt
-import subprocess
-import shutil
-import datetime
-import time
-
-from enum import Enum
-from ruamel.yaml import YAML
-
-from utils.common import get_yaml
-from utils.common import check_py_version
-
-
-Date = Enum('Date', ('GIT', 'FS'))
-
-POSTS_PATH = '_posts'
-
-
-def help():
-    print("Usage: "
-          "   python update_posts_lastmod.py [options]\n"
-          "Options:\n"
-          "   -f, --file  <file path>        Read a file.\n"
-          "   -d, --dir   <directory path>   Read from a directory.\n"
-          "   -h, --help                     Print help information\n"
-          "   -v, --verbose                  Print verbose logs\n"
-          "   -t, --datetime  < git | fs >   Chose post's datetime source, "
-          "'git' for git-log, 'fs' for filesystem, default to 'git'.\n")
-
-
-def update_lastmod(path, verbose, date):
-    count = 0
-    yaml = YAML()
-
-    for post in glob.glob(path):
-
-        lastmod = ''
-
-        if date == Date.GIT:
-            git_log_count = subprocess.getoutput(
-                "git log --pretty=%ad \"{}\" | wc -l".format(post))
-
-            if git_log_count == "1":
-                continue
-
-            git_lastmod = subprocess.getoutput(
-                "git log -1 --pretty=%ad --date=iso \"{}\"".format(post))
-
-            if not git_lastmod:
-                continue
-
-            lates_commit = subprocess.check_output(
-                ['git', 'log', '-1', '--pretty=%B', post]).decode('utf-8')
-
-            if "[Automation]" in lates_commit and "Lastmod" in lates_commit:
-                continue
-
-            lastmod = git_lastmod
-
-        elif date == Date.FS:
-            t = os.path.getmtime(post)
-            dt = datetime.datetime.fromtimestamp(t)
-            lastmod = dt.strftime('%F %T') + time.strftime(' %z')
-
-        frontmatter, line_num = get_yaml(post)
-        meta = yaml.load(frontmatter)
-
-        if 'seo' in meta:
-            if ('date_modified' in meta['seo'] and
-                    meta['seo']['date_modified'] == lastmod):
-                continue
-            else:
-                meta['seo']['date_modified'] = lastmod
-        else:
-            meta.insert(line_num, 'seo', dict(date_modified=lastmod))
-
-        output = 'new.md'
-        if os.path.isfile(output):
-            os.remove(output)
-
-        with open(output, 'w', encoding='utf-8') as new, \
-                open(post, 'r', encoding='utf-8') as old:
-            new.write("---\n")
-            yaml.dump(meta, new)
-            new.write("---\n")
-            line_num += 2
-
-            lines = old.readlines()
-
-            for line in lines:
-                if line_num > 0:
-                    line_num -= 1
-                    continue
-                else:
-                    new.write(line)
-
-        shutil.move(output, post)
-        count += 1
-
-        if verbose:
-            print("[INFO] update 'lastmod' for:" + post)
-
-    if count > 0:
-        print("[INFO] Success to update lastmod for {} post(s).".format(count))
-
-
-def main(argv):
-    check_py_version()
-
-    path = os.path.join(POSTS_PATH, "*.md")
-    verbose = False
-    date = Date.GIT
-
-    try:
-        opts, args = getopt.getopt(
-            argv, "hf:d:vt:",
-            ["file=", "dir=", "help", "verbose", "datetime="])
-    except getopt.GetoptError:
-        help()
-        sys.exit(2)
-
-    for opt, arg in opts:
-        if opt == '-h':
-            help()
-            sys.exit()
-
-        elif opt == '-f' or opt == '--file':
-            path = arg
-
-        elif opt == '-d' or opt == '--dir':
-            path = os.path.join(arg, "*.md")
-
-        elif opt == '-v' or opt == '--verbose':
-            verbose = True
-
-        elif opt == '-t' or opt == '--datetime':
-            if arg == 'git':
-                date = Date.GIT
-            elif arg == 'fs':
-                date = Date.FS
-            else:
-                help()
-                sys.exit(2)
-
-    update_lastmod(path, verbose, date)
-
-
-main(sys.argv[1:])

_scripts/py/utils/common.py

@@ -1,43 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-'''
-Common functions to other scripts.
-
-© 2018-2019 Cotes Chung
-MIT License
-'''
-
-import sys
-
-
-def get_yaml(path):
-    """
-    Return the Yaml block of a post and the linenumbers of it.
-    """
-    end = False
-    yaml = ""
-    num = 0
-
-    with open(path, 'r', encoding='utf-8') as f:
-        for line in f.readlines():
-            if line.strip() == '---':
-                if end:
-                    break
-                else:
-                    end = True
-                    continue
-            else:
-                num += 1
-
-            yaml += line
-
-    return yaml, num
-
-
-def check_py_version():
-    if not sys.version_info.major == 3 and sys.version_info.minor >= 5:
-        print("WARNING: This script requires Python 3.5 or higher, "
-              "however you are using Python {}.{}."
-              .format(sys.version_info.major, sys.version_info.minor))
-        sys.exit(1)

_scripts/sh/create_pages.sh

@@ -0,0 +1,162 @@
+#!/usr/local/bin/bash
+#
+# Create HTML pages for Categories and Tags in posts.
+#
+# Usage:
+#     Call from the '_posts' sibling directory.
+#
+# v2.2
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# Published under MIT License
+
+set -eu
+
+TYPE_CATEGORY=0
+TYPE_TAG=1
+
+category_count=0
+tag_count=0
+
+
+_read_yaml() {
+  local _endline=$(grep -n "\-\-\-" $1 | cut -d: -f 1 | sed -n '2p')
+  head -$_endline $1
+}
+
+
+read_categories() {
+  local _yaml=$(_read_yaml $1)
+  local _categories=$(echo "$_yaml" | grep "^categories:")
+  local _category=$(echo "$_yaml" | grep "^category:")
+
+  if [[ ! -z "$_categories" ]]; then
+    echo "$_categories" | sed "s/categories: *//;s/\[//;s/\].*//;s/, */,/g;s/\"//g;s/'//g"
+  elif [[ ! -z "_category" ]]; then
+    echo "$_category" | sed "s/category: *//;s/\[//;s/\].*//;s/, */,/g;s/\"//g;s/'//g"
+  fi
+}
+
+
+read_tags() {
+  local _yaml=$(_read_yaml $1)
+  echo "$_yaml" | grep "^tags:" | sed "s/tags: *//;s/\[//;s/\].*//;s/, */,/g;s/\"//g;s/'//g"
+}
+
+
+init() {
+
+  if [[ -d categories ]]; then
+    rm -rf categories
+  fi
+
+  if [[ -d tags ]]; then
+    rm -rf tags
+  fi
+
+  if [[ ! -d _posts ]]; then
+    exit 0
+  fi
+
+  mkdir categories tags
+}
+
+
+create_category() {
+  if [[ ! -z $1 ]]; then
+    local _name=$1
+    local _filepath="categories/$(echo $_name | sed 's/ /-/g' | awk '{print tolower($0)}').html"
+
+    if [[ ! -f $_filepath ]]; then
+      echo "---" > $_filepath
+      echo "layout: category" >> $_filepath
+      echo "title: $_name" >> $_filepath
+      echo "category: $_name" >> $_filepath
+      echo "---" >> $_filepath
+
+      ((category_count=category_count+1))
+    fi
+  fi
+}
+
+
+create_tag() {
+  if [[ ! -z $1 ]]; then
+    local _name=$1
+    local _filepath="tags/$( echo $_name | sed "s/ /-/g;s/'//g" | awk '{print tolower($0)}' ).html"
+
+    if [[ ! -f $_filepath ]]; then
+
+      echo "---" > $_filepath
+      echo "layout: tag" >> $_filepath
+      echo "title: $_name" >> $_filepath
+      echo "tag: $_name" >> $_filepath
+      echo "---" >> $_filepath
+
+      ((tag_count=tag_count+1))
+    fi
+  fi
+}
+
+
+#########################################
+# Create HTML pages for Categories/Tags.
+# Arguments:
+#   $1 - an array string
+#   $2 - type specified option
+#########################################
+create_pages() {
+  if [[ ! -z $1 ]]; then
+    # split string to array
+    IFS_BAK=$IFS
+    IFS=','
+    local _string=$1
+
+    case $2 in
+
+      $TYPE_CATEGORY)
+        for i in ${_string#,}; do
+          create_category $i
+        done
+        ;;
+
+      $TYPE_TAG)
+        for i in ${_string#,}; do
+          create_tag $i
+        done
+        ;;
+
+      *)
+        ;;
+
+      esac
+
+      IFS=$IFS_BAK
+  fi
+
+}
+
+
+main() {
+
+  init
+
+  for _file in $(find "_posts" -type f \( -iname \*.md -o -iname \*.markdown \))
+  do
+    local _categories=$(read_categories "$_file")
+    local _tags=$(read_tags "$_file")
+
+    create_pages "$_categories" $TYPE_CATEGORY
+    create_pages "$_tags" $TYPE_TAG
+  done
+
+  if [[ $category_count -gt 0 ]]; then
+    echo "[INFO] Succeed! $category_count category-pages created."
+  fi
+
+  if [[ $tag_count -gt 0 ]]; then
+    echo "[INFO] Succeed! $tag_count tag-pages created."
+  fi
+}
+
+main

_scripts/sh/dump_lastmod.sh

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

_scripts/sh/sync_monitor.sh

@@ -1,13 +1,14 @@
 #!/bin/bash
 
-# Files sync monitoer
-#
+# Files sync monitor
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2019 Cotes Chung
 # MIT Licensed
 
 # $1 -> the origin file with absolute path.
 # $2 -> the origin sync directory
-# $3 -> the destination sync direcotry
+# $3 -> the destination sync directory
 
 # Omit the system temp file
 if [[ ! -f $1 ]]; then
@@ -32,6 +33,6 @@ if [[ -f "$1" ]]; then
 fi
 
 if [[ $related_dir == "_posts" ]]; then
-  python $3/_scripts/py/init_all.py
-  python $3/_scripts/py/update_posts_lastmod.py -f "$dest/$(basename $1)" -t fs
+  bash $3/_scripts/sh/create_pages.sh
+  bash $3/_scripts/sh/dump_lastmod.sh
 fi

_scripts/travis/cibuild.sh

@@ -1,36 +0,0 @@
-#!/bin/bash
-
-# Travis CI build jobs.
-#
-# © 2019 Cotes Chung
-# Published under MIT License
-
-if [[ $TRAVIS_PULL_REQUEST = "false" ]]; then # triggered by author
-
-  BUILDER=../blog-builder
-
-  git clone https://${GH_TOKEN}@github.com/cotes2020/blog-builder.git \
-    $BUILDER --depth=1 -q
-
-  cp -r $BUILDER/framework/* .
-  bash _cibuild.sh
-
-else # triggered by Pull Request
-
-  SAFE_DOMAIN="cdn.jsdelivr.net"
-
-  python _scripts/py/init_all.py
-
-  build_cmd="bundle exec jekyll build"
-
-  echo "\$ $build_cmd"
-  eval $build_cmd
-
-  bundle exec htmlproofer _site/ \
-            --disable-external \
-            --check-html \
-            --empty_alt_ignore \
-            --allow_hash_href \
-            --url_ignore $SAFE_DOMAIN
-
-fi

app.js

@@ -0,0 +1,12 @@
+---
+layout: compress
+# Chirpy v2.2
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# MIT Licensed
+---
+
+/* Registering Service Worker */
+if('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('{{ "/sw.js" | relative_url }}');
+};

assets/css/_addon/fonts.scss

@@ -0,0 +1,8 @@
+/*
+ * The field 'font-display' is added for Google-fonts.
+ *
+ * See: <https://fonts.google.com/>
+ *
+ */
+
+@import url('https://fonts.googleapis.com/css?family=Lato|Roboto+Condensed:400,700|Source+Sans+Pro:400,600,700,900&display=swap');

assets/css/_addon/module.scss

@@ -0,0 +1,100 @@
+/*
+* 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 ---------*/
+
+%tag-hover {
+  background: var(--tag-hover);
+  transition: background 0.35s ease-in-out;
+}
+
+%table-cell {
+  padding: .35rem .8rem;
+  font-size: 95%;
+}
+
+%link-hover {
+  color: #d2603a!important;
+  border-bottom: 1px solid #d2603a;
+  text-decoration: none;
+}
+
+%link-color {
+  color: var(--link-color);
+}
+
+%link-underline {
+  border-bottom: 1px solid var(--link-underline-color);
+}
+
+%no-bottom-border {
+  border-bottom: none;
+}
+
+%heading {
+  font-weight: 400;
+  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
+}
+
+%section {
+  #post-wrapper & {
+    line-height: 1.2;
+    margin-bottom: 1rem;
+  }
+}
+
+%anchor {
+  padding-top: 3.5rem;
+  margin-top: -2.5rem;
+}
+
+/*---------- scss mixin ---------*/
+
+@mixin no-text-decoration {
+  text-decoration: none;
+}
+
+@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
+  color: $color;
+  transition: color 0.35s ease-in-out;
+  user-select: none;
+  margin: 0 .25rem;
+}
+
+@mixin icon-round($diameter) {
+  border: 1px solid;
+  border-radius: 50%;
+  width: $diameter;
+  height: $diameter;
+}
+
+@mixin ml-mr($value) {
+  margin-left: $value;
+  margin-right: $value;
+}
+
+@mixin pl-pr($val) {
+  padding-left: $val;
+  padding-right: $val;
+}
+
+@mixin input-placeholder {
+  opacity: 0.6;
+}
+
+@mixin semi-bold {
+  font-weight: 600;
+}
+
+@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
+  color: $color;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
+}

assets/css/_addon/syntax.scss

@@ -0,0 +1,132 @@
+/*
+* The syntax highlight.
+* v2.0
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2018-2019 Cotes Chung
+* MIT Licensed
+*/
+
+@import "_colors/light-syntax";
+@import "_colors/dark-syntax";
+
+
+html:not([mode]), html[mode=light] {
+  @include light-syntax;
+}
+
+html[mode=dark] {
+  @include dark-syntax;
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not([mode]), html[mode=dark] {
+    @include dark-syntax;
+  }
+
+  html[mode=light] {
+    @include light-syntax;
+  }
+}
+
+/*-- Codes Snippet --*/
+
+%highlight-pre-bg {
+  background: var(--highlight-bg-color);
+}
+
+%code-snippet-radius {
+  border-radius: 5px;
+}
+
+.highlighter-rouge {
+  background-color: var(--highlight-bg-color);
+  @extend %code-snippet-radius;
+  color: var(--highlighter-rouge-color);
+  margin-bottom: 1.2em; /* Override BS Inline-code style */
+}
+
+.highlight {
+  @extend %code-snippet-radius;
+  background: var(--highlight-bg-color);
+  @at-root figure#{&} {
+    background: var(--highlight-bg-color);
+  }
+  overflow: auto;
+  .lineno {
+    margin: .8rem 0rem;
+    padding: 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;
+  }
+  table {
+    padding: 0;
+    border: 0;
+    td pre {
+      overflow: visible;  /* Fixed iOS safari overflow-x */
+      word-break: normal; /* Fixed iOS safari linenos code break */
+    }
+  }
+  td {
+    padding: 0;
+    border: 0;
+  }
+  pre {
+    margin-bottom: 0;
+    font-size: .85rem;
+    line-height: 1.4rem;
+    word-wrap: normal;
+    /* Fixed Safari overflow-x */
+  }
+
+} //.highlight
+
+code {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  -moz-hyphens: none;
+  hyphens: none;
+  &.highlighter-rouge {
+    padding: 3px 5px;
+    margin: 0 .15rem;
+    border-radius: 4px;
+    background-color: var(--inline-code-bg);
+  }
+  @at-root a>&.highlighter-rouge {
+    padding-bottom: 0; // show link's underlinke
+    color: inherit;
+  }
+  @at-root a:hover>&.highlighter-rouge {
+    border-bottom: none;
+  }
+  blockquote &.highlighter-rouge {
+    color: inherit;
+  }
+}
+
+td.rouge-code {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+/* Hide line numbers for default, console, and terminal code snippets */
+div {
+  &[class^='highlighter-rouge'],
+  &.language-plaintext.highlighter-rouge,
+  &.language-console.highlighter-rouge,
+  &.language-terminal.highlighter-rouge {
+    pre.lineno {
+      display: none;
+    }
+    td.rouge-code {
+      padding: .8rem 1rem;
+    }
+  }
+}

assets/css/_addon/variables.scss

@@ -0,0 +1,27 @@
+/*
+* Mainly scss variables
+*
+* v2.1
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2020 Cotes Chung
+* MIT Licensed
+*/
+
+/*--- ↓ width and height ----*/
+
+$tab-height: 3.3rem;
+$tab-cursor-height: 1.6rem;
+
+$sidebar-width-small: 210px;
+$sidebar-width-medium: 260px;
+$sidebar-width-large: 350px;
+
+$topbar-height: 3rem;
+
+$footer-height: 5rem;
+
+$main-content-max-width: 1150px;
+
+$panel-max-width: 300px;
+
+$post-extend-min-height: 35rem;

assets/css/_colors/dark-syntax.scss

@@ -0,0 +1,93 @@
+/*!
+* The syntax dark mode styles.
+* v2.0
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2018-2019 Cotes Chung
+* MIT Licensed
+*/
+
+@mixin dark-syntax {
+  /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
+  .highlight pre { background-color: #272822; }
+  .highlight .hll { background-color: #272822; }
+  .highlight .c { color: #75715e } /* Comment */
+  .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
+  .highlight .k { color: #66d9ef } /* Keyword */
+  .highlight .l { color: #ae81ff } /* Literal */
+  .highlight .n { color: #f8f8f2 } /* Name */
+  .highlight .o { color: #f92672 } /* Operator */
+  .highlight .p { color: #f8f8f2 } /* Punctuation */
+  .highlight .cm { color: #75715e } /* Comment.Multiline */
+  .highlight .cp { color: #75715e } /* Comment.Preproc */
+  .highlight .c1 { color: #75715e } /* Comment.Single */
+  .highlight .cs { color: #75715e } /* Comment.Special */
+  .highlight .ge { font-style: italic } /* Generic.Emph */
+  .highlight .gs { font-weight: bold } /* Generic.Strong */
+  .highlight .kc { color: #66d9ef } /* Keyword.Constant */
+  .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+  .highlight .kn { color: #f92672 } /* Keyword.Namespace */
+  .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+  .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+  .highlight .kt { color: #66d9ef } /* Keyword.Type */
+  .highlight .ld { color: #e6db74 } /* Literal.Date */
+  .highlight .m { color: #ae81ff } /* Literal.Number */
+  .highlight .s { color: #e6db74 } /* Literal.String */
+  .highlight .na { color: #a6e22e } /* Name.Attribute */
+  .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+  .highlight .nc { color: #a6e22e } /* Name.Class */
+  .highlight .no { color: #66d9ef } /* Name.Constant */
+  .highlight .nd { color: #a6e22e } /* Name.Decorator */
+  .highlight .ni { color: #f8f8f2 } /* Name.Entity */
+  .highlight .ne { color: #a6e22e } /* Name.Exception */
+  .highlight .nf { color: #a6e22e } /* Name.Function */
+  .highlight .nl { color: #f8f8f2 } /* Name.Label */
+  .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+  .highlight .nx { color: #a6e22e } /* Name.Other */
+  .highlight .py { color: #f8f8f2 } /* Name.Property */
+  .highlight .nt { color: #f92672 } /* Name.Tag */
+  .highlight .nv { color: #f8f8f2 } /* Name.Variable */
+  .highlight .ow { color: #f92672 } /* Operator.Word */
+  .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+  .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
+  .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+  .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+  .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+  .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+  .highlight .sc { color: #e6db74 } /* Literal.String.Char */
+  .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+  .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+  .highlight .se { color: #ae81ff } /* Literal.String.Escape */
+  .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+  .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+  .highlight .sx { color: #e6db74 } /* Literal.String.Other */
+  .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+  .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+  .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+  .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+  .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+  .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+  .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+  .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+  .highlight .gh { } /* Generic Heading & Diff Header */
+  .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+  .highlight .gd { color: #f92672; background-color: #561c08 } /* Generic.Deleted & Diff Deleted */
+  .highlight .gi { color: #a6e22e; background-color: #0b5858 } /* Generic.Inserted & Diff Inserted */
+
+
+  /*-----  My styles ------*/
+
+  --highlight-bg-color: #272822;
+  --highlighter-rouge-color: #de6b18;
+
+  --highlight-lineno-color: #6c6c6d;
+  --highlight-lineno-border-color: #3c4042;
+
+  --inline-code-bg: var(--highlight-bg-color);
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+  pre { color: #818c96 } /* override Bootstrap */
+  kbd { background-color: black; }
+}

assets/css/_colors/dark-typography.scss

@@ -0,0 +1,133 @@
+/*!
+* The main dark mode styles
+* v2.0
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2018-2019 Cotes Chung
+* MIT Licensed
+*/
+
+@mixin dark-scheme {
+  /* framework */
+  --main-wrapper-bg: rgb(27, 27, 30);
+  --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);
+
+  /* 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);
+  --blockquote-border-color: rgb(66, 66, 66);
+  --blockquote-text-color: rgb(117, 117, 117);
+
+  --btn-border-color: rgb(63, 65, 68);
+  --btn-backtotop-color: var(--text-color);
+  --btn-backtotop-border-color: var(--btn-border-color);
+  --btn-box-shadow: var(--main-wrapper-bg);
+
+  --card-header-bg: rgb(51, 50, 50);
+  --label-color: rgb(108, 117, 125);
+
+  /* Sidebar */
+  --nav-cursor-color: rgb(183, 182, 182);
+  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
+
+  /* Top Bar */
+  --topbar-text-color: var(--text-color);
+
+  /* Home page */
+  --post-list-text-color: rgb(175, 176, 177);
+  --btn-patinator-text-color: var(--text-color);
+  --btn-paginator-hover-color: rgb(64, 65, 66);
+  --btn-active-bg: rgba(28, 52, 94, 1);
+  --btn-active-border-color: rgb(66, 94, 138);
+  --btn-text-color: var(--text-color);
+  --btn-paginator-border-color: var(--btn-border-color);
+  --btn-paginator-shadow: var(--main-wrapper-bg);
+
+  /* Posts */
+  --toc-highlight: rgb(116, 178, 243);
+  --tag-bg: rgb(41, 40, 40);
+  --tag-hover: rgb(43, 56, 62);
+  --tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */
+  --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
+  --tb-border-color: var(--tb-odd-bg);
+  --footnote-target-bg: rgb(63, 81, 181);
+  --btn-share-color: #6c757d;
+  --btn-share-hover-color: #bfc1ca;
+  --relate-post-date: var(--text-muted-color);
+  --card-bg: rgb(39, 40, 43);
+  --card-border-color: rgb(53, 53, 60);
+  --card-box-shadow: var(--main-wrapper-bg);
+
+  /* tags */
+  --tag-border: rgb(59, 79, 88);
+  --tag-shadow: rgb(32, 33, 33);
+  --search-tag-bg: var(--tag-bg);
+
+  --dash-color: rgb(63, 65, 68);
+
+  /* categories */
+  --categories-border: rgb(64, 66, 69);
+  --categories-hover-bg: rgb(73, 75, 76);
+
+  /* archives */
+  --timeline-node-bg: rgb(150, 152, 156);
+  --timeline-color: rgb(63, 65, 68);
+  --timeline-year-dot-color: var(--timeline-color);
+
+  /* Footer */
+  --footer-link: rgb(171 171 171);
+
+  .post-content img {
+    filter: brightness(90%);
+  }
+
+  hr {
+    border-color: var(--main-border-color);
+  }
+
+  /* posts' toc, override BS */
+  nav[data-toggle=toc] .nav-link.active,
+  nav[data-toggle=toc] .nav-link.active:focus,
+  nav[data-toggle=toc] .nav-link.active:hover,
+  nav[data-toggle=toc] .nav>li>a:focus,
+  nav[data-toggle=toc] .nav>li>a:hover {
+    color: var(--toc-highlight)!important;
+    border-left-color: var(--toc-highlight)!important;
+  }
+
+  /* categories */
+  .categories.card,
+  .list-group-item {
+    background-color: var(--card-bg);
+  }
+
+  .categories {
+    .card-header {
+      background-color: var(--card-header-bg);
+    }
+    .list-group-item {
+      border-left: none;
+      border-right: none;
+      padding-left: 2rem;
+      border-color: var(--categories-border);
+      &:last-child {
+        border-bottom-color: var(--card-bg);
+      }
+    }
+  }
+
+  #archives li:nth-child(odd) {
+    background-image: linear-gradient(to left,
+      rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
+  }
+
+} // dark-scheme

assets/css/_colors/light-syntax.scss

@@ -0,0 +1,80 @@
+/*!
+* The syntax light mode code snippet colors.
+* v2.1
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2020 Cotes Chung
+* MIT Licensed
+*/
+
+@mixin light-syntax {
+  /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
+  .highlight .hll { background-color: #ffffcc }
+  .highlight .c { color: #999988; font-style: italic } /* Comment */
+  .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+  .highlight .k { color: #000000; font-weight: bold } /* Keyword */
+  .highlight .o { color: #000000; font-weight: bold } /* Operator */
+  .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+  .highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+  .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+  .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+  .highlight .gd { color: #d01040; background-color: #ffdddd } /* Generic.Deleted */
+  .highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
+  .highlight .gr { color: #aa0000 } /* Generic.Error */
+  .highlight .gh { color: #999999 } /* Generic.Heading */
+  .highlight .gi { color: #008080; background-color: #ddffdd } /* Generic.Inserted */
+  .highlight .go { color: #888888 } /* Generic.Output */
+  .highlight .gp { color: #555555 } /* Generic.Prompt */
+  .highlight .gs { font-weight: bold } /* Generic.Strong */
+  .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+  .highlight .gt { color: #aa0000 } /* Generic.Traceback */
+  .highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+  .highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+  .highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+  .highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+  .highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+  .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+  .highlight .m { color: #009999 } /* Literal.Number */
+  .highlight .s { color: #d01040 } /* Literal.String */
+  .highlight .na { color: #008080 } /* Name.Attribute */
+  .highlight .nb { color: #0086B3 } /* Name.Builtin */
+  .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+  .highlight .no { color: #008080 } /* Name.Constant */
+  .highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+  .highlight .ni { color: #800080 } /* Name.Entity */
+  .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+  .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+  .highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
+  .highlight .nn { color: #555555 } /* Name.Namespace */
+  .highlight .nt { color: #000080 } /* Name.Tag */
+  .highlight .nv { color: #008080 } /* Name.Variable */
+  .highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+  .highlight .w { color: #bbbbbb } /* Text.Whitespace */
+  .highlight .mf { color: #009999 } /* Literal.Number.Float */
+  .highlight .mh { color: #009999 } /* Literal.Number.Hex */
+  .highlight .mi { color: #009999 } /* Literal.Number.Integer */
+  .highlight .mo { color: #009999 } /* Literal.Number.Oct */
+  .highlight .sb { color: #d01040 } /* Literal.String.Backtick */
+  .highlight .sc { color: #d01040 } /* Literal.String.Char */
+  .highlight .sd { color: #d01040 } /* Literal.String.Doc */
+  .highlight .s2 { color: #d01040 } /* Literal.String.Double */
+  .highlight .se { color: #d01040 } /* Literal.String.Escape */
+  .highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
+  .highlight .si { color: #d01040 } /* Literal.String.Interpol */
+  .highlight .sx { color: #d01040 } /* Literal.String.Other */
+  .highlight .sr { color: #009926 } /* Literal.String.Regex */
+  .highlight .s1 { color: #d01040 } /* Literal.String.Single */
+  .highlight .ss { color: #990073 } /* Literal.String.Symbol */
+  .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+  .highlight .vc { color: #008080 } /* Name.Variable.Class */
+  .highlight .vg { color: #008080 } /* Name.Variable.Global */
+  .highlight .vi { color: #008080 } /* Name.Variable.Instance */
+  .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+
+  /*--- custom light colors ---*/
+  --highlight-bg-color: #f7f7f7;
+  --highlighter-rouge-color: #353a3d;
+  --highlight-lineno-color: #c2c6cc;
+  --highlight-lineno-border-color: #e9ecef;
+
+  --inline-code-bg: #f3f3f3;
+} // light-syntax

assets/css/_colors/light-typography.scss

@@ -0,0 +1,124 @@
+/*!
+* The syntax light mode typography colors
+* v2.1
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2020 Cotes Chung
+* MIT Licensed
+*/
+
+@mixin light-scheme {
+
+  --body-bg: #fafafa;
+
+  --mask-bg: #c1c3c5;
+
+  --main-wrapper-bg: white;
+
+  --main-border-color: #f3f3f3;
+
+  --btn-border-color: #e9ecef;
+
+  --text-color: #333333;
+
+  --blockquote-border-color: #eee;
+
+  --blockquote-text-color: #9a9a9a;
+
+  --link-color: #2a408e;
+
+  --link-underline-color: #dee2e6;
+
+  --text-muted-color: gray;
+
+  --tb-odd-bg: #fbfcfd;
+
+  --tb-border-color: #eaeaea;
+
+  --button-bg: #fff;
+
+  --btn-backtotop-color: #686868;
+
+  --btn-backtotop-border-color: #f1f1f1; //--main-border-color,
+
+  --btn-box-shadow: #eaeaea;
+
+  /* Sidebar */
+
+  --sidebar-bg: radial-gradient(
+    circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
+
+  --nav-cursor-color: #fcfcfc;
+
+  /* Topbar */
+
+  --topbar-wrapper-bg: white;
+
+  --topbar-text-color: rgb(78, 78, 78);
+
+  --search-wrapper-bg: #f5f5f5;
+
+  --search-tag-bg: #f8f9fa;
+
+  --search-icon-color: #c2c6cc;
+
+  --input-focus-border-color: var(--btn-border-color);
+
+  /* Home page */
+
+  --post-list-text-color: dimgray;
+
+  --btn-patinator-text-color: #555555;
+
+  --btn-paginator-hover-color: #e9ecef;
+
+  --btn-active-bg: #2a408e;
+
+  --btn-active-border-color: #007bff;
+
+  --btn-text-color: #f8f8f8;
+
+  --btn-paginator-border-color: #f1f1f1;
+
+  --btn-paginator-shadow: #4b92d2;
+
+  /* Posts */
+
+  --btn-share-hover-color: var(--link-color);
+
+  --card-border-color: #f1f1f1;
+
+  --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
+
+  --label-color: #808080;
+
+  --relate-post-date: rgba(30, 55, 70, .4);
+
+  --tag-bg: rgba(0, 0, 0, 0.075);
+
+  --tag-border: #dee2e6;
+
+  --tag-shadow: var(--btn-border-color);
+
+  --tag-hover: rgb(222, 226, 230);
+
+  --categories-hover-bg: var(--btn-border-color);
+
+  --dash-color: silver;
+
+
+  /* Archive */
+
+  --timeline-color: rgba(0, 0, 0, 0.075);
+
+  --timeline-node-bg: #c2c6cc;
+
+  --timeline-year-dot-color: #ffffff;
+
+  /* Footer */
+
+  --footer-bg-color: #ffffff;
+
+  --footnote-target-bg: lightcyan;
+
+  --footer-link: #424242;
+}

assets/css/_fonts.scss

@@ -1,312 +0,0 @@
-/*
- * The field 'font-display' is added for Google-fonts.
- *
- * See https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900|Oswald|Lato
- *
- */
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752HT8Ghe4.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fj8Ghe4.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhduz8A.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwkxduz8A.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmxduz8A.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlBduz8A.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmBduz8A.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmRduz8A.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmhduz8A.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwkxduz8A.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmxduz8A.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlBduz8A.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmBduz8A.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmRduz8A.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdu.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

assets/css/archives.scss

@@ -1,48 +1,61 @@
 ---
+# Style for Archives
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
-  Style for Archives
-  © 2019 Cotes Chung
-  MIT License
-*/
+
+
+{% include_relative _addon/main.scss %}
+
+%date-timeline {
+  content: "";
+  width: 4px;
+  left: 75px;
+  display: inline-block;
+  float: left;
+  position: relative;
+  background-color: var(--timeline-color);
+}
+
+%date-font {
+  font-family: 'Roboto Condensed', sans-serif;
+}
 
 #archives {
   letter-spacing: 0.03rem;
-}
-
-#archives li {
+  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);
     }
-
-#archives li:nth-child(odd) {
-  background-color: #fff;
-  background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
-}
-
-#archives li>div {
+    >div {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
+  }
 
-#archives span.lead {
+  span.lead {
     font-size: 1.5rem;
-  font-family: 'Oswald', sans-serif;
+    @extend %date-font;
     position: relative;
     left: 8px;
-}
 
-#archives span.lead:not(:first-child) {
+    &:not(:first-child) {
       position: relative;
       left: 4px;
-}
-
-#archives span.lead:not(:first-child)::after {
+      &::after {
         left: 67px;
       }
+    }
 
-#archives span.lead::after { /* Year dot */
+    &::after {
+      /* Year dot */
       content: "";
       display: block;
       position: relative;
@@ -54,41 +67,21 @@
       top: -26px;
       left: 63px;
       border: 3px solid;
-  background-color: #ffffff;
-  border-color: #c2c6cc;
+      background-color: var(--timeline-year-dot-color);
+      border-color: var(--timeline-node-bg);
       box-shadow: 0 0 2px 0 #c2c6cc;
       z-index: 1;
     }
+  } // #archives span.lead
 
-#archives .date {
+  .date {
     white-space: nowrap;
     display: inline-block;
-}
-
-#archives .date.month {
+    &.month {
       width: 1.4rem;
       text-align: center;
-  font-family: 'Oswald', sans-serif;
-}
-
-#archives .date.day {
-  font-size: 85%;
-  font-family: sans-serif;
-  text-align: center;
-  margin-right: -2px;
-  width: 1.2rem;
-  position: relative;
-  left: -.15rem;
-}
-
-#archives ul>li>div>a {
-/* post title in Archvies */
-  margin-left: 2.5rem;
-  position: relative;
-  top: .1rem;
-}
-
-#archives .date.month ~ a::before {
+      @extend %date-font;
+      ~a::before {
         /* A dot for Month and Day */
         content: "";
         display: inline-block;
@@ -101,48 +94,57 @@
         float: left;
         top: 1.35rem;
         left: 69px;
-  background-color: #c2c6cc;
+        background-color: var(--timeline-node-bg);
         box-shadow: 0 0 3px 0 #c2c6cc;
         z-index: 1;
       }
-
-/* timeline for date */
-#archives ul>li::after,
-#archives ul>li:first-child::before {
-  content: "";
-  width: 4px;
-  left: 75px;
-  display: inline-block;
-  float: left;
-  position: relative;
-  background-color: rgba(0, 0, 0, 0.075);
     }
+    &.day {
+      font-size: 85%;
+      font-family: 'Lato', sans-serif;
+      text-align: center;
+      margin-right: -2px;
+      width: 1.2rem;
+      position: relative;
+      left: -.15rem;
+    }
+  } // #archives .date
 
-#archives ul>li::after {
+  ul {
+    >li {
+      >div>a {
+        /* post title in Archvies */
+        margin-left: 2.5rem;
+        position: relative;
+        top: .1rem;
+      }
+      &::after {
+        @extend %date-timeline;
         height: 2.8rem;
         top: -1.3rem;
       }
-
-#archives ul>li:first-child::before {
+      &:first-child::before {
+        @extend %date-timeline;
         height: 3.06rem;
         top: -1.61rem;
       }
-
-#archives ul:not(:last-child)>li:last-child::after {
+    }
+    &:not(:last-child)>li:last-child::after {
       height: 3.4rem;
     }
-
-#archives ul:last-child>li:last-child::after {
+    &:last-child>li:last-child::after {
       display: none;
     }
+  } // #archives ul
+
+} // #archives
+
 
 @media all and (max-width: 576px) {
-
   #archives {
     margin-top: -1rem;
-  }
-
-  #archives ul {
+    ul {
       letter-spacing: 0;
     }
   }
+}

assets/css/categories.scss

@@ -1,61 +1,68 @@
 ---
+# Style for Tab Categories
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
-  Style for Tab Categories
-  © 2019 Cotes Chung
-  MIT License
-*/
 
-.categories {
-  margin-bottom: 2rem;
-}
 
-.categories .card-header {
-  padding-right: 12px;
-}
+{% include_relative _addon/main.scss %}
 
-.categories .card-header>span>i:first-child,
-.categories .list-group-item>i {
+%category-icon-color {
   color: gray;
 }
 
-.categories .list-group-item {
+.categories {
+  margin-bottom: 2rem;
+  .card-header {
+    padding-right: 12px;
+  }
+  .list-group-item {
     border-left: none;
     border-right: none;
     padding-left: 2rem;
+    >i {
+      @extend %category-icon-color;
     }
-
-.categories .collapsing .list-group-item:first-child,
-.categories .collapse .list-group-item:first-child {
+    &:first-child {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
 
-.categories i.far,
-.categories i.fas { // fontawesome icons
-  font-size: 86%;
   }
 
+  .card-header>span>i:first-child {
+    @extend %category-icon-color;
+  }
+
+  i {
+    &.far, &.fas {
+      font-size: 86%; // fontawesome icons
+    }
+  }
+
+} // .categories
+
 .category-trigger {
   width: 1.7rem;
   height: 1.7rem;
   border-radius: 50%;
   text-align: center;
   color: #6c757d!important;
-}
-
-@media (hover: hover) { // only works on desktop
-  .category-trigger:hover {
-    background-color: #e9ecef;
-  }
-}
-
-.category-trigger>i.fas {
+  >i.fas {
     position: relative;
     height: .7rem;
     width: 1rem;
     transition: 300ms ease all;
   }
+}
+
+@media (hover: hover) { // only works on desktop
+  .category-trigger:hover {
+    background-color: var(--categories-hover-bg);
+  }
+}
 
 .rotate {
   -ms-transform: rotate(-90deg); /* IE 9 */

assets/css/category-tag.scss

@@ -1,19 +1,19 @@
 ---
+# Style for page Category and Tag
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
-  Style for page Category and Tag
-  © 2019 Cotes Chung
-  MIT License
-*/
 
-#page-category ul>li,
-#page-tag ul>li {
+
+{% include_relative _addon/main.scss %}
+
+#page-category, #page-tag {
+  ul>li {
     line-height: 1.5rem;
     padding: .6rem 0;
-}
-
-#page-category ul>li::before,
-#page-tag ul>li::before {
+    &::before { // dot
       background: #999;
       width: 5px;
       height: 5px;
@@ -24,16 +24,16 @@
       top: .6rem;
       margin-right: .5rem;
     }
-
-#page-tag ul>li>a,
-#page-category ul>li>a, { /* post's title */
+    >a { /* post's title */
       font-size: 1.1rem;
+      @extend %no-bottom-border;
     }
-
-#page-category ul>li>span:last-child,
-#page-tag ul>li>span:last-child { /* post's date */
+    >span:last-child {
       white-space: nowrap;
     }
+    /* post's date */
+  }
+}
 
 #page-tag h1>i { // tag icon
   font-size: 1.2rem;
@@ -43,29 +43,31 @@
   font-size: 1.25rem;
 }
 
-#page-category a:hover,
-#page-tag a:hover,
-#access-lastmod a:hover {
+a:hover {
+  #page-category &,
+  #page-tag &,
+  #access-lastmod & {
+    @extend %link-hover;
     margin-bottom: -1px; // Avoid jumping
   }
+}
 
 .dash {
   margin: 0 .5rem .6rem .5rem;
-  border-bottom: 2px dotted silver;
+  border-bottom: 2px dotted var(--dash-color);
 }
 
 @media all and (max-width: 576px) {
-
-  #page-category ul>li::before,
-  #page-tag ul>li::before {
+  #page-category, #page-tag {
+    ul>li {
+      &::before {
         margin: 0 .5rem;
       }
-
-  #page-tag ul>li>a,
-  #page-category ul>li>a {
+      >a {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-
+    }
+  }
 }

assets/css/home.scss

@@ -1,49 +1,45 @@
 ---
+# Style for Homepage
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
 
-/*!
-  Style for Homepage
-  © 2019 Cotes Chung
-  MIT License
-*/
+{% include_relative _addon/main.scss %}
 
 #post-list {
   margin-top: 1rem;
   padding-right: .5rem;
-}
-
-.pagination {
-  font-size: 1rem;
-}
-
-.pagination a:hover {
-  text-decoration: none;
-}
 
   .post-preview {
     padding-top: 1.5rem;
     padding-bottom: 1rem;
-  border-bottom: 1px solid rgba(158, 158, 158, 0.17);
-}
+    border-bottom: 1px solid var(--main-border-color);
 
-.post-preview>h1 {
+    h1 {
       font-size: 1.4rem;
       margin: 0;
+      ~i { // pinned icon
+        font-size: .86rem;
+      }
     }
 
-.post-preview i.far {
-  /* fontawesome icons */
-  font-size: 86%;
+    .post-meta {
+      i {
+        font-size: .73rem;
+        &:not(:first-child) { // post-meta icons on the homepage
+          margin-left: 1.5rem;
+        }
+      }
     }
 
-.post-preview .post-content {
+    .post-content {
       margin-top: .6rem;
       margin-bottom: .6rem;
-  color: dimgray;
-}
-
-/* Make preview shorter in Home page*/
-.post-preview .post-content>p {
+      color: var(--post-list-text-color);
+      >p {
+        /* Make preview shorter on the homepage */
         margin: 0;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -51,9 +47,21 @@
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
       }
+    }
 
-.page-item .page-link {
-  color: #555555;
+  } // .post-preview
+
+} // #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;
@@ -65,37 +73,39 @@
       -webkit-box-align: center;
       align-items: center;
       border-radius: 50%;
-  border: 1px solid #f1f1f1;
+      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)
       }
-
-.page-item.active .page-link {
-  background-color: #2a408e;
-  box-shadow: 0 0 8px 0 #4b92d2 !important;
-  color: #f8f8f8;
     }
-
-.page-item.disabled .page-link {
-  color: rgba(108, 117, 125, 0.57);
-  border-color: #f1f1f1;
+    &.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);
       }
-
-.page-item.disabled {
+    }
+    &.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);
       }
-
-.page-item:first-child .page-link,
-.page-item:last-child .page-link {
+    }
+    &:first-child .page-link,
+    &:last-child .page-link {
       border-radius: 50%;
     }
-
-.page-item:not(:last-child) {
-  margin-right: 0.6rem;
+    &:not(:last-child) {
+      margin-right: 0.7rem;
     }
+  } // .page-item
 
-#post-list .post-meta i:not(:first-child) { // post-meta icons on HOME
-  margin-left: 1.5rem;
-}
+} // .pagination
 
 @media all and (max-width: 576px) {
   #post-list .post-meta>span i:not(:first-child) {
@@ -112,16 +122,21 @@
 
 /* Sidebar is visible */
 @media all and (min-width: 831px) {
-  .pagination {
-    font-size: .85rem;
+
+  #post-list {
+    margin-top: 1.5rem;
   }
 
+  .pagination {
+    font-size: .85rem;
     .page-item .page-link {
       width: 2.2rem;
       height: 2.2rem;
     }
   }
 
+}
+
 /* Pannel hidden */
 @media all and (max-width: 1200px) {
   #post-list {

assets/css/page.scss

@@ -0,0 +1,10 @@
+---
+# The default style for layout Page
+# v2.2
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# MIT License
+---
+
+{% include_relative _addon/main.scss %}
+{% include_relative _addon/syntax.scss %}

assets/css/post.scss

@@ -1,47 +1,113 @@
 ---
+# Post-specific style
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
-  Individual styles for Post
-  © 2019 Cotes Chung
-  MIT License
-*/
 
-.post img {
-  margin-top: .5rem;
-  margin-bottom: 1.5rem;
-  max-width: 100%;
-  height: auto;
-  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08));
+
+{% include_relative _addon/main.scss %}
+{% include_relative _addon/syntax.scss %}
+
+$prompt-older: "{{ site.data.label.post.button.previous }}";
+$prompt-newer: "{{ site.data.label.post.button.next }}";
+
+@mixin btn-sharing-color($light-color, $important: false) {
+  @if $important {
+    color: var(--btn-share-color, $light-color)!important;
+  } @else {
+    color: var(--btn-share-color, $light-color);
+  }
 }
 
-.post-tail {
-  margin-top: 3.5rem;
-  border-bottom: 1px double #e9ecef;
+@mixin btn-post-nav {
+  width: 50%;
+  position: relative;
+  border-color: var(--btn-border-color);
+}
+
+.post {
+  img {
+    max-width: 100%;
+    margin-top: .5rem;
+    margin-bottom: 1.5rem;
+    position: relative;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
+}
+
+.post-tail-wrapper {
+  margin-top: 6rem;
+  border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
 
-.post-pager {
-  margin: 1rem 0 2rem;
+.post-tags {
+  line-height: 2rem;
 }
 
-.post-pager .btn,
-.post-pager .btn.disabled {
-  color: #2a408e;
-  border-color: #2a408e;
-}
+.post-navigation {
+  padding-top: 3rem;
+  padding-bottom: 4rem;
 
-.post-pager .btn:hover {
+  .btn {
+    @include btn-post-nav;
+    color: var(--link-color);
+    &:hover {
       background: #2a408e;
       color: #fff;
+      border-color: #2a408e;
     }
-
-.post-pager a.btn.disabled {
+    &.disabled {
+      @include btn-post-nav;
       pointer-events: auto;
       cursor: not-allowed;
       background: none;
       color: gray;
-  border-color: gray;
+      &:hover {
+        border-color: none;
       }
+    }
+    &.btn-outline-primary.disabled:focus {
+      box-shadow: none;
+    }
+  }
+
+  p {
+    font-size: 1.1rem;
+    line-height: 1.5rem;
+    margin-top: .3rem;
+    white-space: normal;
+  }
+
+  a, span {
+    &::before {
+      color: var(--text-muted-color);
+      font-size: .65rem;
+      text-transform: uppercase;
+    }
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      left: .5px;
+      &::before {
+        content: $prompt-older
+      }
+    }
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      right: .5px;
+      &::before {
+        content: $prompt-newer
+      }
+    }
+  }
+} // .post-navigation
 
 @keyframes fade-up {
   from {
@@ -57,63 +123,56 @@
 }
 
 #toc-wrapper {
+  margin-top: 7rem;
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
-  top: 2rem;
+  top: 4rem;
   transition: top 0.2s ease-in-out;
   animation: fade-up .8s;
-}
-
-#toc-wrapper.topbar-down {
+  &.topbar-down {
     top: 6rem;
   }
-
-#toc-wrapper>h3 {
-  font-size: 1rem;
-  font-family: 'Oswald', sans-serif;
-  color: gray;
+  >h3 {
+    @include label(inherit, 600);
+  }
 }
 
 #toc li>a {
-  padding-top: 0;
+  line-height: 1rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
 }
 
 
 /*--- Related Posts ---*/
 
 #related-posts {
-  border-bottom: 1px double #e9ecef;
+  >h3 {
+    @include label(1.1rem, 600);
   }
-
-#related-posts>h3 {
-  color: gray;
-  font-size: 1.1rem;
-  font-family: 'Oswald', sans-serif;
-}
-
-#related-posts .card {
-  border: 1px solid #f1f1f1;
-  box-shadow: 0 0 5px 0 rgba(234, 234, 234, 0.7686274509803922);
-  -webkit-transition: all .3s ease-in-out;;
-  -moz-transition: all .3s ease-in-out;;
+  .card {
+    border: 1px solid var(--card-border-color);
+    background-color: var(--card-bg);
+    box-shadow: 0 0 5px 0 var(--card-box-shadow);
+    -webkit-transition: all .3s ease-in-out;
+    -moz-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
+    h3 {
+      color: var(--text-color);
+    }
+    &:hover {
+      -webkit-transform: translate3d(0, -3px, 0);
+      transform: translate3d(0, -3px, 0);
+      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+    }
   }
 
-#related-posts .card:hover {
-  -webkit-transform: translate3d(0, -8px, 0);
-  transform: translate3d(0, -8px, 0);
+  .timeago {
+    color: var(--relate-post-date);
   }
 
-#related-posts .card h3 {
-  color: #353a3d;
-}
-
-#related-posts .timeago {
-  color: rgba(30,55,70,.4);
-}
-
-#related-posts p {
+  p {
     font-size: .9rem;
     margin-bottom: .5rem;
     overflow: hidden;
@@ -123,16 +182,14 @@
     -webkit-box-orient: vertical;
   }
 
-#related-posts a:hover {
+  a:hover {
     text-decoration: none;
   }
 
-#related-posts ul {
+  ul {
     list-style-type: none;
     padding-inline-start: 1.5rem;
-}
-
-#related-posts ul>li::before {
+    >li::before {
       background: #c2c9d4;
       width: 5px;
       height: 5px;
@@ -143,11 +200,104 @@
       top: 1rem;
       right: 1rem;
     }
+  }
+}
 
 #post-extend-wrapper {
   min-height: 2rem;
+  #disqus_thread {
+    margin-bottom: 2rem;
+  }
 }
 
+.post-tail-bottom a {
+  color: inherit;
+}
+
+%btn-share-hovor {
+  color: var(--btn-share-hover-color)!important;
+}
+
+.share-wrapper {
+  vertical-align: middle;
+  user-select: none;
+  .share-icons {
+    font-size: 1.2rem;
+    a {
+      &:not(:last-child) {
+        margin-right: .25rem;
+      }
+      &:hover {
+        text-decoration: none;
+        >i {
+          @extend %btn-share-hovor;
+        }
+      }
+    }
+    >i {
+      padding-top: .35rem;
+      &:hover {
+        @extend %btn-share-hovor;
+      }
+    }
+    .fab {
+      &.fa-twitter {
+        @include btn-sharing-color(rgba(29, 161, 242, 1.00));
+      }
+      &.fa-facebook-square {
+        @include btn-sharing-color(rgb(66, 95, 156));
+      }
+      &.fa-telegram {
+        @include btn-sharing-color(rgb(39, 159, 217));
+      }
+      &.fa-weibo {
+        @include btn-sharing-color(rgb(229, 20, 43));
+      }
+    }
+
+  } // .share-icons
+
+  .fas.fa-link {
+    @include btn-sharing-color(rgb(171, 171, 171));
+  }
+
+} // .share-wrapper
+
+
+.share-label {
+  @include label(inherit, 400, inherit);
+  &::after {
+    content: ":";
+  }
+}
+
+.license-wrapper {
+  line-height: 1.2rem;
+  >a {
+    font-weight: 600;
+    &:hover {
+      @extend %link-hover;
+    }
+  }
+  i {
+    font-weight: 400;
+  }
+  span:last-child {
+    font-size: .85rem;
+  }
+} // .license-wrapper
+
+
+@media all and (max-width: 576px) {
+  .post-tail-bottom {
+    -ms-flex-wrap: wrap-reverse!important;
+    flex-wrap: wrap-reverse!important;
+    >div:first-child {
+      width: 100%;
+      margin-top: 1rem;
+    }
+  }
+}
 
 @media all and (max-width: 768px) {
   .post img {
@@ -156,21 +306,24 @@
 }
 
 @media all and (min-width: 768px) {
-  .post .post-meta>div:not(:first-child)::before {
+  .post {
+    .post-meta {
+      >div:not(:first-child)::before {
         content: "\2022";
         color: rgba(158, 158, 158, 0.8);
         font-weight: bold;
         padding-left: .5rem;
         padding-right: .3rem;
       }
-
-  .post .post-meta.flex-column {
+      &.flex-column {
         -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 {
@@ -187,31 +340,12 @@
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
   }
+
+  .post-navigation {
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: -.5rem;
+    margin-right: -.5rem;
   }
 
-/*
-  The following resposive design aim to make #post-extend-wrapper margin-right same as pannel's width
-*/
-@media all and (min-width: 1200px) {
-  #post-extend-wrapper {
-    margin-right: 25%;
-  }
-}
-
-@media all and (min-width: 1460px) {
-  #post-extend-wrapper {
-    margin-right: 300px;
-  }
-}
-
-@media all and (min-width: 1650px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 10 + 300px);
-  }
-}
-
-@media all and (min-width: 1700px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 8 + 300px);
-  }
 }

assets/css/syntax.scss

@@ -1,164 +0,0 @@
----
----
-/*
-* The syntax highlight.
-* © 2018-2019 Cotes Chung
-* MIT Licensed
-*/
-
-.highlight .hll { background-color: #ffc; }
-.highlight .c { color: #999; } /* Comment */
-.highlight .err { color: #a00; background-color: #faa } /* Error */
-.highlight .k { color: #069; } /* Keyword */
-.highlight .o { color: #555 } /* Operator */
-.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #099 } /* Comment.Preproc */
-.highlight .c1 { color: #999; } /* Comment.Single */
-.highlight .cs { color: #999; } /* Comment.Special */
-.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #f00 } /* Generic.Error */
-.highlight .gh { color: #030; } /* Generic.Heading */
-.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
-.highlight .go { color: #aaa } /* Generic.Output */
-.highlight .gp { color: #009; } /* Generic.Prompt */
-.highlight .gs { } /* Generic.Strong */
-.highlight .gu { color: #030; } /* Generic.Subheading */
-.highlight .gt { color: #9c6 } /* Generic.Traceback */
-.highlight .kc { color: #069; } /* Keyword.Constant */
-.highlight .kd { color: #069; } /* Keyword.Declaration */
-.highlight .kn { color: #069; } /* Keyword.Namespace */
-.highlight .kp { color: #069 } /* Keyword.Pseudo */
-.highlight .kr { color: #069; } /* Keyword.Reserved */
-.highlight .kt { color: #078; } /* Keyword.Type */
-.highlight .m { color: #f60 } /* Literal.Number */
-.highlight .s { color: #d44950 } /* Literal.String */
-.highlight .na { color: #4f9fcf } /* Name.Attribute */
-.highlight .nb { color: #366 } /* Name.Builtin */
-.highlight .nc { color: #0a8; } /* Name.Class */
-.highlight .no { color: #360 } /* Name.Constant */
-.highlight .nd { color: #99f } /* Name.Decorator */
-.highlight .ni { color: #999; } /* Name.Entity */
-.highlight .ne { color: #c00; } /* Name.Exception */
-.highlight .nf { color: #c0f } /* Name.Function */
-.highlight .nl { color: #99f } /* Name.Label */
-.highlight .nn { color: #0cf; } /* Name.Namespace */
-.highlight .nt { color: #2f6f9f; } /* Name.Tag */
-.highlight .nv { color: #033 } /* Name.Variable */
-.highlight .ow { color: #000; } /* Operator.Word */
-.highlight .w { color: #bbb } /* Text.Whitespace */
-.highlight .mf { color: #f60 } /* Literal.Number.Float */
-.highlight .mh { color: #f60 } /* Literal.Number.Hex */
-.highlight .mi { color: #f60 } /* Literal.Number.Integer */
-.highlight .mo { color: #f60 } /* Literal.Number.Oct */
-.highlight .sb { color: #c30 } /* Literal.String.Backtick */
-.highlight .sc { color: #c30 } /* Literal.String.Char */
-.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
-.highlight .s2 { color: #c30 } /* Literal.String.Double */
-.highlight .se { color: #c30; } /* Literal.String.Escape */
-.highlight .sh { color: #c30 } /* Literal.String.Heredoc */
-.highlight .si { color: #a00 } /* Literal.String.Interpol */
-.highlight .sx { color: #c30 } /* Literal.String.Other */
-.highlight .sr { color: #3aa } /* Literal.String.Regex */
-.highlight .s1 { color: #c30 } /* Literal.String.Single */
-.highlight .ss { color: #fc3 } /* Literal.String.Symbol */
-.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #033 } /* Name.Variable.Class */
-.highlight .vg { color: #033 } /* Name.Variable.Global */
-.highlight .vi { color: #033 } /* Name.Variable.Instance */
-.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
-
-/*-- Codes Snippet --*/
-
-div.highlight,
-figure.highlight,
-.highlighter-rouge {
-  background: #f7f7f7;
-}
-
-.highlight {
-  overflow: auto;
-  -moz-box-shadow: inset 0 0 2px #c2c6cc;
-  -webkit-box-shadow: inset 0 0 2px #c2c6cc;
-  box-shadow: inset 0 0 2px #c2c6cc;
-}
-
-.highlight .lineno {
-  margin: .8rem 0rem;
-  padding: 0 .5rem;
-  min-width: 2.2rem;
-  text-align: right;
-  color: #c2c6cc;
-  border-right: 1px solid #e9ecef;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
-.highlight table {
-  padding: 0;
-  border: 0;
-}
-
-.highlight td {
-  padding: 0;
-  border: 0;
-}
-
-.highlight pre {
-  margin-bottom: 0;
-  font-size: .85rem;
-  line-height: 1.4rem;
-  word-wrap: normal;  /* Fixed Safari overflow-x */
-}
-
-.highlight table td pre {
-  overflow: visible;  /* Fixed iOS safari overflow-x */
-  word-break: normal; /* Fixed iOS safari linenos code break */
-}
-
-/* Override BS Inline-code style */
-.highlighter-rouge {
-  color: black;
-  margin-bottom: 1.2em;
-}
-
-code {
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
-  -moz-hyphens: none;
-  hyphens: none;
-}
-
-code.highlighter-rouge {
-  padding: 2px 4px;
-  margin: 0 .3rem;
-  border-radius: 4px;
-  border: 1px solid #e9ecef;
-}
-
-td.rouge-code {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-/* code snippet radius */
-.highlighter-rouge,
-.highlight {
-  border-radius: 5px;
-}
-
-/* Hide line numbers for defualt, console, and terminal code snippets */
-div[class^='highlighter-rouge'] pre.lineno,
-div.language-console.highlighter-rouge pre.lineno,
-div.language-terminal.highlighter-rouge pre.lineno {
-  display: none;
-}
-
-div[class^='highlighter-rouge'] td.rouge-code,
-div.language-console.highlighter-rouge td.rouge-code,
-div.language-terminal.highlighter-rouge td.rouge-code {
-  padding: .8rem 1rem;
-}

assets/css/tags.scss

@@ -1,11 +1,13 @@
 ---
+# Styles for Tab Tags
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
 
-/*!
-  Styles for Tab Tags
-  © 2019 Cotes Chung
-  MIT License
-*/
+
+{% include_relative _addon/main.scss %}
 
 .tag {
   border-radius: 0.7em;
@@ -13,16 +15,11 @@
   margin-right: .8rem;
   line-height: 3rem;
   letter-spacing: 0;
-  border: 1px solid #dee2e6 !important;
-  box-shadow: 0 0 3px 0 #e9ecef;
-}
-
-.tag span {
+  border: 1px solid var(--tag-border) !important;
+  box-shadow: 0 0 3px 0 var(--tag-shadow);
+  span {
     margin-left: 0.6em;
     font-size: 0.7em;
     font-family: 'Oswald', sans-serif;
   }
-
-a.tag:hover {
-  text-decoration: none;
 }

assets/data/proxy.json

@@ -1,4 +0,0 @@
----
----
-
-{"proxyUrl":"{{ site.google_analytics.proxy_url }}"}

assets/img/favicons/browserconfig.xml

@@ -1,8 +1,11 @@
 ---
+layout: compress
+
 # A part of the Favicons
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2019 Cotes Chung
 # MIT License
-layout: compress
 ---
 <?xml version="1.0" encoding="utf-8"?>
 <browserconfig>

assets/img/favicons/manifest.json

@@ -1,48 +1,58 @@
 ---
+layout: compress
+#
 # A part of the Favicons
+# Chirpy v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2019 Cotes Chung
 # MIT License
-layout: compress
 ---
 
+{% assign icon_url = "/assets/img/favicons" | relative_url %}
+
 {
- "name": "App",
+  "name": "{{ site.title }}",
+  "short_name": "{{ site.title }}",
+  "description": "{{ site.description }}",
   "icons": [
     {
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-36x36.png",
+      "src": "{{ icon_url }}/android-icon-36x36.png",
       "sizes": "36x36",
-   "type": "image\/png",
+      "type": "image/png",
       "density": "0.75"
     },
     {
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-48x48.png",
+      "src": "{{ icon_url }}/android-icon-48x48.png",
       "sizes": "48x48",
-   "type": "image\/png",
+      "type": "image/png",
       "density": "1.0"
     },
     {
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-72x72.png",
+      "src": "{{ icon_url }}/android-icon-72x72.png",
       "sizes": "72x72",
-   "type": "image\/png",
+      "type": "image/png",
       "density": "1.5"
     },
     {
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-96x96.png",
+      "src": "{{ icon_url }}/android-icon-96x96.png",
       "sizes": "96x96",
-   "type": "image\/png",
+      "type": "image/png",
       "density": "2.0"
     },
     {
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-144x144.png",
+      "src": "{{ icon_url }}/android-icon-144x144.png",
       "sizes": "144x144",
-   "type": "image\/png",
+      "type": "image/png",
       "density": "3.0"
     },
     {
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-192x192.png",
+      "src": "{{ icon_url }}/android-icon-192x192.png",
       "sizes": "192x192",
-   "type": "image\/png",
+      "type": "image/png",
       "density": "4.0"
-  }
- ]
+    }],
+    "start_url": "{{ '/index.html' | relative_url }}",
+    "display": "fullscreen",
+    "theme_color": "#2a1e6b",
+    "background_color": "white"
 }

assets/js/_commons.js

@@ -0,0 +1,21 @@
+/*!
+  Aggregation of common JS.
+  Chirpy@2.3
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+*/
+
+{% include_relative _commons/back-to-top.js %}
+
+{% include_relative _commons/search-display.js %}
+
+{% include_relative _commons/sidebar.js %}
+
+{% include_relative _commons/topbar-switch.js %}
+
+{% include_relative _commons/topbar-title.js %}
+
+{% include_relative _commons/copy-link.js %}
+
+{% include_relative _utils/tooltip-loader.js %}

assets/js/_commons/copy-link.js

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

assets/js/_commons/search-display.js

@@ -1,5 +1,7 @@
 /*
 * This script make #search-result-wrapper switch to unloaded or shown automatically.
+* v2.0
+* https://github.com/cotes2020/jekyll-theme-chirpy
 * © 2018-2019 Cotes Chung
 * MIT License
 */
@@ -8,7 +10,7 @@ $(function() {
 
   var btnSbTrigger = $('#sidebar-trigger');
   var btnSearchTrigger = $('#search-trigger');
-  var btnCancel = $('#search-wrapper + a');
+  var btnCancel = $('#search-cancel');
   var btnClear = $('#search-cleaner');
 
   var main = $('#main');
@@ -27,10 +29,8 @@ $(function() {
     return {
       block: function() {
         offset = $(window).scrollTop();
-        $('body').addClass('no-scroll');
       },
       release: function() {
-        $('body').removeClass('no-scroll');
         $('html,body').scrollTop(offset);
       },
       getOffset: function() {

assets/js/_commons/sidebar.js

@@ -0,0 +1,34 @@
+/**
+ * Expand or close the sidebar in mobile screens.
+ * v2.0
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2018-2019 Cotes Chung
+ * MIT License
+ */
+
+$(function() {
+
+  var sidebarUtil = (function() {
+    const ATTR_DISPLAY = "sidebar-display";
+    var isExpanded = false;
+    var body = $('body');
+
+    return {
+      toggle: function() {
+        if (isExpanded == false) {
+          body.attr(ATTR_DISPLAY, '');
+        } else {
+          body.removeAttr(ATTR_DISPLAY);
+        }
+
+        isExpanded = !isExpanded;
+      }
+    }
+
+  })();
+
+  $("#sidebar-trigger").click(sidebarUtil.toggle);
+
+  $('#mask').click(sidebarUtil.toggle);
+
+});

assets/js/_commons/topbar-switch.js

@@ -1,8 +1,11 @@
 /*
  * Hide Header on scroll down
+ * v2.0
+ * https://github.com/cotes2020/jekyll-theme-chirpy
  * © 2018-2019 Cotes Chung
  * MIT License
  */
+
 $(function() {
 
   var didScroll;
@@ -11,7 +14,7 @@ $(function() {
   var topbarHeight = $('#topbar-wrapper').outerHeight();
 
   $(window).scroll(function(event) {
-    if ($("#topbar-title").is(":hidden")) { // Not in small screens
+    if ($("#topbar-title").is(":hidden")) { /* Not in small screens */
       didScroll = true;
     }
   });
@@ -26,12 +29,12 @@ $(function() {
   function hasScrolled() {
     var st = $(this).scrollTop();
 
-    // Make sure they scroll more than delta
+    /* Make sure they scroll more than delta */
     if (Math.abs(lastScrollTop - st) <= delta)
       return;
 
     if (st > lastScrollTop && st > topbarHeight) {
-      // Scroll Down
+      /* Scroll Down */
       $('#topbar-wrapper').removeClass('topbar-down').addClass('topbar-up');
 
       if ( $('#toc-wrapper').length > 0) {
@@ -43,11 +46,11 @@ $(function() {
       }
 
       if ($('#search-input').is(':focus')) {
-        $('#search-input').blur(); // remove focus
+        $('#search-input').blur(); /* remove focus */
       }
 
     } else {
-      // Scroll Up
+      /* Scroll Up */
       if (st + $(window).height() < $(document).height()) {
         $('#topbar-wrapper').removeClass('topbar-up').addClass('topbar-down');
         if ( $('#toc-wrapper').length > 0) {

assets/js/_commons/topbar-title.js

@@ -1,8 +1,11 @@
 /*
  * Topbar title auto change while scrolling in mobile screens.
+ * v2.0
+ * https://github.com/cotes2020/jekyll-theme-chirpy
  * © 2018-2019 Cotes Chung
  * MIT License
 */
+
 $(function() {
 
   var DEFAULT = $("#topbar-title").text().trim();
@@ -16,12 +19,12 @@ $(function(){
     }
   }
 
-  // Replace topbar title while scroll screens.
+  /* Replace topbar title while scroll screens. */
   $(window).scroll(function () {
-    if ($("#post-list").length // in Home page
-      || $("div.post>h1").is(":hidden") // is tab pages
-      || $("#topbar-title").is(":hidden") // not mobile screens
-      || $("#sidebar.sidebar-expand").length) { // when the sidebar trigger is clicked
+    if ($("#post-list").length /* in Home page */
+      || $("div.post>h1").is(":hidden") /* is tab pages */
+      || $("#topbar-title").is(":hidden") /* not mobile screens */
+      || $("#sidebar.sidebar-expand").length) { /* when the sidebar trigger is clicked */
       return false;
     }
 
@@ -34,9 +37,9 @@ $(function(){
         $("#topbar-title").text(DEFAULT);
       }
     }
-  })
+  });
 
-  // Click title remove hover effect.
+  /* Click title remove hover effect. */
   $('#topbar-title').click(function() {
     $('body,html').animate({scrollTop: 0}, 800);
   });

assets/js/_home-post.js

@@ -0,0 +1,22 @@
+/*!
+  JS group for layout Home or Post
+  Chirpy v2.3
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+*/
+
+{% include_relative _commons.js %}
+
+{% include_relative _utils/timeago.js %}
+
+
+{% if site.google_analytics.pv.enabled %}
+
+  {% include_relative _pv-config.js %}
+
+  {% include_relative _utils/pageviews.js %}
+
+  {% include_relative lib/_countUp.min.js %}
+
+{% endif %}

assets/js/_pv-config.js

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

assets/js/_src/_commons/sidebar.js

@@ -1,54 +0,0 @@
-/**
- * Expand or close the sidebar in mobile screens.
- * © 2018-2019 Cotes Chung
- * MIT License
- */
-$(function(){
-
-  var isExpanded = false;
-
-  $("#sidebar-trigger").click(function() {
-    if (isExpanded == false) {
-      $("#sidebar").addClass("sidebar-expand");
-      openModal();
-      isExpanded = true;
-    }
-  });
-
-  $("#mask").click(function() {
-    $("#sidebar").removeClass("sidebar-expand");
-    closeModal();
-    isExpanded = false;
-  });
-
-  /**
-  * ModalHelper helpers resolve the modal scrolling issue on mobile devices
-  * https://github.com/twbs/bootstrap/issues/15852
-  * requires document.scrollingElement polyfill https://github.com/yangg/scrolling-element
-  */
-  var ModalHelper = (function(bodyCls) {
-    var scrollTop;
-    return {
-      afterOpen: function() {
-        scrollTop = document.scrollingElement.scrollTop;
-        document.body.classList.add(bodyCls);
-        document.body.style.top = -scrollTop + 'px';
-      },
-      beforeClose: function() {
-        document.body.classList.remove(bodyCls);
-        // scrollTop lost after set position:fixed, restore it back.
-        document.scrollingElement.scrollTop = scrollTop;
-        document.body.style.top = '';
-      }
-    };
-  })('no-scroll');
-
-  function openModal() {
-    ModalHelper.afterOpen();
-  }
-
-  function closeModal() {
-    ModalHelper.beforeClose();
-  }
-
-});