Fixed HTML tag.

for mobile views

.github/CONTRIBUTING.md

@@ -2,19 +2,13 @@
 
 I want to thank you for sparing a time to improve this project! Here are some guidelines for contributing：
 
-## Bug Reporting
+To ensure that the blog design is not confused, this project do not accept suggestions for design changes, such as colors scheme, fonts, typography, etc. If your request is about enhancement, it is recommended to first submit a `Feature Request` type issue to discuss whether your idea fits the project. 
 
-If you found a bug, please ensure it doesn't appear in other existing [issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues). After that, [create a new issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues/new/choose) with template `Bug Report` and follow it's illustration to describe the situation.
+Generally, contribute to the project by:
 
-
-## Code Optimization
-
-If you are willing to improve some of the existing code, such as performance optimization, code simplification, or even correct spelling errors of variable names, please submit a new PR to help us.
-
-
-## Feature Request
-
-Basically, it is recommended to first submit a `Feature Request` issue to discuss whether your idea fits the project. Once the discussion is complete and the request is approved, fork this project, complete the development of new features, and submit a Pull Request. What's more, the PR should be merged into `master` branch without conflict.
+1. Fork this project.
+2. Create a new branch `my-new-freature`(or `fix-a-bug`), then complete the development, commit and push.
+3. Submit a new `Pull Request`.
 
 
 ---

.github/ISSUE_TEMPLATE/bug_report.md

@@ -26,14 +26,14 @@ Steps to reproduce the behavior:
 
 **Desktop (please complete the following information):**
  - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+ - 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]
+ - 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

@@ -1,7 +1,7 @@
 ---
 name: Feature Request
 about: Suggest an idea for this project
-labels: feature-suggestion
+labels: enhancement
 ---
 
 <!-- Please make sure your request does not appear in other existing issues (including closed ones). Thanks for your cooperation. Now, I can't wait to listen your idea! -->

.github/ISSUE_TEMPLATE/question.md

@@ -43,14 +43,14 @@ 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]
+ - 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]
+ - Browser: [e.g. stock browser, safari]
+ - Version: [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here. 

.github/workflows/ci.yml

@@ -1,14 +1,21 @@
 name: build
 on:
   push:
+    branches-ignore:
+      - stable
+    tags-ignore:
+      - '*'
     paths-ignore:
-    - 'docs/**'
-    - 'README.md'
-    - 'LICENSE'
-    - '.travis.yml'
+      - '.github/**'
+      - '!.github/workflows/**'
+      - '.travis.yml'
+      - '.gitignore'
+      - 'docs/**'
+      - 'README.md'
+      - 'LICENSE'
   pull_request:
     paths:
-    - "**"
+      - "**"
 
 jobs:
   ci:
@@ -22,12 +29,10 @@ jobs:
         with:
           ruby-version: '2.6.x'
 
-      - uses: actions/setup-python@v1
-        with:
-          python-version: '3.7.x'
-
       - name: Checkout
         uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
 
       - name: Bundle Caching
         id: bundle-cache
@@ -38,20 +43,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-gems-
 
-      - id: get-pip-cache-path
-        run: |
-          echo "::set-output name=path::`pip show pip | grep "Location" | awk '{print $2}'`"
-
-      - name: Pip caching
-        id: pip-cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.get-pip-cache-path.outputs.path }}
-          key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }}
-          restore-keys: |
-            ${{ runner.os }}-pip-
-
-      - name: Install gnu-coreutils for macOS
+      - name: Install GNU-Coreutils(for macOS)
         if: runner.os == 'macOS'
         run: |
           brew install coreutils
@@ -70,11 +62,6 @@ jobs:
         run: |
           bundle install --local
 
-      - name: Pip installing
-        if: steps.pip-cache.outputs.cache-hit != 'true'
-        run: |
-          pip install -r _scripts/py/requirements.txt
-
       - name: Build Site
         run: |
           bash tools/build.sh

.travis.yml

@@ -5,11 +5,10 @@ language: ruby
 rvm: 2.6.5
 
 before_install:
-  - pyenv global 3.7.5
+  - bundle config path 'vendor/bundle'
 
 install:
-  - pip install -r _scripts/py/requirements.txt
-  - bundle install --path vendor/bundle --quiet
+  - bundle install --quiet
 
 addons:
   apt:
@@ -24,7 +23,7 @@ script:
   - bash _cibuild.sh
 
 branches:
-  only: master
+  only: stable
 
 git:
   depth: false # for posts lastmod

Gemfile

@@ -12,6 +12,3 @@ end
 group :test do
   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,35 +1,18 @@
-# Jekyll Theme Chirpy
+# Chirpy
+
+🌏 English • [简体中文](docs/README_zh-CN.md)
 
 [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=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-%23FF4D5B.svg)](https://996.icu)
 
-Language: English | [简体中文](docs/README_zh-CN.md)
+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 exhibition. It will help you easily record, manage and share your knowledge and experience. 
-
-You will get the following features:
-
-* Auto Dark Mode
-* Posts' Last Modified Date
-* Table of Contents
-* Automatically Recommend Related Posts
-* Syntax highlighting
-* Two Level Categories
-* Search
-* Atom Feeds
-* Disqus Comments
-* Google Analytics
-* GA Pageviews (Advanced)
-* SEO Tag
-* Performance Optimization
-
-[**Live Demo** »](https://chirpy.cotes.info)
-
-![devices-mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)
+[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
 
 ## Table of Contents
 
+* [Features](#features)
 * [Installing](#installing)
 * [Usage](#usage)
 * [Contributing](#contributing)
@@ -37,14 +20,28 @@ You will get the following features:
 * [Support](#support)
 * [License](#license)
 
+## Features
+
+* Configurable theme mode
+* Two-level Categories
+* Last modified date for posts
+* Table of Contents
+* Automatically recommend related posts
+* Syntax highlighting
+* Search
+* Atom Feeds
+* Disqus Comments
+* Google Analytics
+* GA Pageviews reporting (Advanced)
+* SEO and Performance Optimization
 
 ## Installing
 
 ### Prerequisites
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (Ruby, RubyGem, Bundler and Jekyll). In order to use the script tools to save time, 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/).
+Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (`Ruby `, `RubyGems` and `Bundler`). 
 
-In addition, if your machine is running Debian or macOS, make sure you have the [GNU coreutils](https://www.gnu.org/software/coreutils/) installed. Otherwise, get it by:
+To improve the writing experience, we need to use some script tools. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
 
 * Debian
 
@@ -64,12 +61,12 @@ $ brew install coreutils
 [Fork **Chirpy** from GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/fork), then clone your forked repo to local:
 
 ```console
-$ git clone git@github.com:USER/jekyll-theme-chirpy.git
+$ git clone git@github.com:USER/jekyll-theme-chirpy.git -b master
 ```
 
-replace the `USER` above to your GitHub username.
+and replace the `USER` above to your GitHub username.
 
-The first time you run or build the project on your machine, perform the installation of Jekyll plugins. Go to the root of repo and run:
+The first time you run or build the project on local machine, perform the installation of Jekyll plugins. Go to the root of repo and run:
 
 ```terminal
 $ bundle install
@@ -118,22 +115,36 @@ As mentioned above, some files or directories should be removed from your repo:
 - .github
 
 
-### Customization
+### Configuration
 
-Basically, go to `_config.yml` and customize the variables as needed, some of them are typical options:
+Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
 
-* Avatar
+* `url`
+	
+	Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
+
+
+* `avatar`
     
-    `avatar` defines the source image location. The sample image is `/assets/img/sample/avatar.jpg`. It should be replaced by your own one. Notice that a huge image file will increase the load time of your site, so keep your avatar size as samll as possible(may be *<https://tinypng.com/>* will help).
+    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one(a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as samll as possible(may be *<https://tinypng.com/>* will help).
 
-* TimeZone
+* `timezone`
 
     To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
 
+* `theme_mode`
+  
+	There are three options for the theme color scheme:
+	
+	- **dual** 	- The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
+
+	- **dark**	- Always show dark mode.
+	- **light**	- Always show light mode.
+
 
 ###  Run Locally
 
-You may want to preview the site before publishing, so just run the script tool:
+You may want to preview the site content before publishing, so just run the script tool:
 
 ```terminal
 $ bash tools/run.sh
@@ -145,7 +156,7 @@ Few days later, you may find that the file modification(e.g. edits to a post) do
 
 ###  Deploying to GitHub Pages
 
-Before the deployment begins, ensure the `url` in file `_config.yml` has been set to `https://<username>.github.io`(or the custom domain, if you have. e.g. `https://yourdomain.com`). What's more, if you prefer to the [Project site](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites), change `baseurl` of file `_config.yml` to your project name, starting with a slash. e.g. `/project`.
+Before the deployment begins, checkout the file `_config.yml` and make sure that the `url` has been configured. What's more, if you prefer the [Project site on GitHub](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and also use the default domain `<username>.github.io`, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
 
 #### Option 1: Built by GitHub Pages
 
@@ -158,7 +169,7 @@ By deploying the site in this way, you're allowed to push the source code direct
 |Site Type | Repo's Name|
 |:---|:---|
 |User or Organization | `<username>.github.io`|
-|Project| any one except `<username>.github.io`, let's say `project`|
+|Project| Any one except `<username>.github.io`, let's say `project`|
 
 **2**. Commit the changes of the repo first, then run the initialization script:
 
@@ -168,7 +179,17 @@ $ bash tools/init.sh
 
 >**Note**: The *Recent Update* requires the posts' latest git-log date, so make sure the changes in `_posts` have been committed before running this command.
 
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
+it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit. Its output is similar to the following log:
+
+```terminal
+[INFO] Success to update lastmod for 4 post(s).
+[INFO] Succeed! 3 category-pages created.
+[INFO] Succeed! 4 tag-pages created.
+[Automation] Updated the Categories, Tags, Lastmod for post(s).
+ 11 files changed, 46 insertions(+), 3 deletions(-)
+ ...
+Updated the Categories, Tags, Lastmod for post(s).
+```
 
 **3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repo.
 
@@ -189,7 +210,7 @@ For security reasons, GitHub Pages runs on `safe` mode, which means the third-pa
 |Site Type | Repo's Name|
 |:---|:---|
 |User or Organization | `<username>.github.io`|
-|Project| any one except `<username>.github.io`, let's say `project`|
+|Project| Any one except `<username>.github.io`, let's say `project`|
 
 and clone it.
 
@@ -210,7 +231,10 @@ The generated static files will be placed in the root of `/path/to/local/project
 |User or Organization | `https://<username>.github.io/`|
 |Project| `https://<username>.github.io/project/`|
 
-and enjoy!
+#### Finishing work
+
+No matter which way you choose to deploy the website on GitHub, please enforce the `HTTPS` for it. See official docs: [Configuring a publishing source for your GitHub Pages site](https://help.github.com/en/github/working-with-github-pages/securing-your-github-pages-site-with-https).
+
 
 ### Documentation
 
@@ -218,19 +242,19 @@ For more details and the better reading experience, please check out the [tutori
 
 ## Contributing
 
-The old saying: "Tow heads are better than one. Five heads are better than two." So, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
+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 ID is on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget the guys who submitted the issues(or unmerged PR), they reported bugs, shared ideas or inspired me to write more readable documentation.
+:tada:Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
 
 
 ## 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 me and help me maintain this project.
+If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart:Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
 
 
 ## License

_config.yml

@@ -13,9 +13,11 @@ title: Chirpy                          # the main title
 tagline: A text-focused Jekyll theme.  # it will display as the sub-title
 
 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.
+  A minimal, portfolio, sidebar,
+  bootstrap Jekyll theme with responsive web design
+  and focuses on text presentation.
 
-# Replace with your domain, e.g. 'https://username.github.io'
+# Replace with the website url, e.g. 'https://username.github.io'
 url: 'protocol://domain'
 
 author: your_full_name                  # change to your full name
@@ -53,19 +55,30 @@ google_analytics:
   # Fill with your Google Analytics ID
   id: ''
   # 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: ''
-  proxy_url: ''
 
+  pv:
+    # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
+    enabled: false
+    # the next options only valid when `google_analytics.pv` is enabled.
+    proxy_url: ''
+    proxy_endpoint: ''
+    cache: false  # pv data local cache, good for the users from GFW area.
 
 disqus:
   comments: false  # boolean type, the global switch for posts comments.
   shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
-# The year your website first ran.
-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
@@ -113,6 +126,7 @@ defaults:
     scope:
       path: tags
     values:
+      tab_active: Tags
       location: Tag
       breadcrumb:
         -
@@ -125,6 +139,7 @@ defaults:
     scope:
       path: categories
     values:
+      tab_active: Categories
       location: Category
       breadcrumb:
         -
@@ -157,7 +172,9 @@ 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:
@@ -169,6 +186,7 @@ exclude:
   - Gemfile
   - tools
   - docs
+  - README.md
 
 sitemap_exclude:  # Sitemap will exclude the following items.
   fuzzy:

_data/date_format.yml

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

_data/label.yml

@@ -4,12 +4,6 @@
 # © 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"
@@ -18,5 +12,8 @@ panel:
 
 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,29 @@
+#  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: 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/date-format.html

@@ -1,10 +0,0 @@
-<!--
- Define the liquid date formats.
- v2.0
- https://github.com/cotes2020/jekyll-theme-chirpy
- © 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/footer.html

@@ -7,20 +7,27 @@
 -->
 
 <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="d-flex justify-content-between align-items-center">
+    <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>, theme by <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</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/head.html

@@ -34,9 +34,9 @@
     <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 %}
 
@@ -53,8 +53,6 @@
     integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
     crossorigin="anonymous">
 
-  <link rel="preload" as="style" href="{{ site.baseurl }}/assets/css/main.css">
-
   <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">
@@ -64,43 +62,52 @@
     integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
     crossorigin="anonymous">
 
-  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
-
   {% if page.layout == 'home' %}
     <link rel="preload" href="{{ site.baseurl }}/assets/css/home.css" as="style">
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/home.css">
-  {% endif %}
 
-  {% if page.title == 'Categories' and page.layout == 'page' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/categories.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/categories.css">
-  {% endif %}
+  {% elsif page.layout == 'page' %}
 
-  {% if page.title == 'Tags' and page.layout == 'page' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/tags.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tags.css">
-  {% endif %}
+    {% if page.title == 'Categories' %}
+      <link rel="preload" href="{{ site.baseurl }}/assets/css/categories.css" as="style">
+      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/categories.css">
 
-  {% if page.layout == 'category' or page.layout == 'tag' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/category-tag.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/category-tag.css">
-  {% endif %}
+    {% elsif page.title == 'Tags' %}
+      <link rel="preload" href="{{ site.baseurl }}/assets/css/tags.css" as="style">
+      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tags.css">
 
-  {% if page.title == 'Archives' and page.layout == 'page' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/archives.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/archives.css">
-  {% endif %}
+    {% elsif page.title == 'Archives' %}
+      <link rel="preload" href="{{ site.baseurl }}/assets/css/archives.css" as="style">
+      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/archives.css">
+
+    {% else %}
+      <link rel="preload" href="{{ site.baseurl }}/assets/css/page.css" as="style">
+      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/page.css">
+
+    {% endif %}
+
+  {% elsif page.layout == 'category' or page.layout == 'tag' %}
+      <link rel="preload" href="{{ site.baseurl }}/assets/css/category-tag.css" as="style">
+      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/category-tag.css">
+
+  {% elsif page.layout == 'post' %}
+    <link rel="preload" as="style" href="{{ site.baseurl }}/assets/css/post.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/post.css">
+
+    {% if site.toc and page.toc %}
+      <link rel="preload" as="style" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css">
+      <link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
+    {% endif %}
 
-  {% if page.title == 'About' and page.layout == 'page' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/syntax.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/syntax.css">
   {% endif %}
 
 
+  <!-- jquery -->
   <link rel="preload" as="script"
     href="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"
     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
 
+  <!-- popper -->
   <link rel="preload" as="script"
     href="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"
     integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin>
@@ -113,7 +120,7 @@
   </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>
+    integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous"></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>
@@ -122,28 +129,22 @@
 
   {% 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 %}
+    {% if site.google_analytics.pv.enabled %}
+      <script src="{{ site.baseurl }}/assets/data/pv-data.json"></script>
       <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="preload" as="style" href="{{ site.baseurl }}/assets/css/post.css">
-    <link rel="preload" as="style" href="{{ site.baseurl }}/assets/css/syntax.css">
-
-    <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="preload" as="style" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css">
-      <link rel="preload" as="script" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js">
-
-      <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 %}
-
+  {% if site.toc and page.toc and page.layout == 'post' %}
+    <link rel="preload" as="script" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js">
+    <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 %}
 
+  <script src="{{ site.baseurl }}/assets/js/dist/tooltip-loader.min.js" async></script>
+
+  <!-- PWA -->
+  <script src="{{ '/app.js' | relative_url }}" defer></script>
+
 </head>

_includes/lozad.html

@@ -1,7 +1,7 @@
-<!-- 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 el = document.querySelectorAll('#post-wrapper img');
+  const observer = lozad(el);
   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,12 @@
+{% comment %}
+  Remove line numbers from code snippets.
+  v2.2
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  Published under the MIT License
+{% endcomment %}
+
+{% if _content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
+  {% assign _content = _content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
+  {% assign _content = _content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
+{% endif %}

_includes/panel.html

@@ -6,50 +6,55 @@
   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 %}
+
+      {% for item in update_list %}
+        {% assign post_url = item | split: "::" | last | prepend: "/posts/" | append: "/" %}
+        {% assign post = site.posts | where: "url", post_url | first %}
+
+        {% if post %}
+          {% assign url = post.url | prepend: site.baseurl %}
+
+          <li><a href="{{ url }}">{{ post.title }}</a></li>
+
+          {% assign sum = sum | plus: 1 %}
+          {% if sum >= MAX_SIZE %} {% break %} {% endif %}
+
+        {% endif %}
+
+      {% endfor %}
+
       </ul>
     </div><!-- #access-lastmod -->
-  {% endif %}
+
+    {% endif %}
+
+  {% endif %} <!-- site.data.updates -->
 
     <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 %}
+      {% 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>
 
@@ -57,7 +62,7 @@
 
   {% 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-3">
       {{- 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

@@ -43,7 +43,7 @@
   {% assign score_list = score_list | sort | reverse %}
   {% assign count = 0 %}
   <div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
-    <h3 class="pt-2 mt-1 mb-4" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
+    <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: ":" %}
@@ -53,12 +53,14 @@
         <a href="{{ post.url | relative_url }}">
           <div class="card-body">
             <span class="timeago small">
-                {{ post.date | date: POST_DATE }}
+                {{ post.date | date: site.data.date_format.post }}
                 <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
             </span>
             <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>
+              {% assign content = post.content %}
+              {% include no-linenos.html %}
+              <p>{{ content | markdownify | strip_html | truncate: 200 | replace: '&', '&amp;' }}</p>
             </div>
           </div>
         </a>

_includes/search-results.html

@@ -8,8 +8,12 @@
 <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

@@ -15,7 +15,7 @@
         {% if start == '/' %}
           {% assign avatar_url = avatar_url | prepend: site.baseurl %}
         {% endif %}
-        <img src="{{ avatar_url }}">
+        <img src="{{ avatar_url }}" alt="avatar">
       </a>
     </div>
 
@@ -30,7 +30,7 @@
   <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 %}
@@ -41,8 +41,9 @@
     {% 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-3 unloaded"></i>
         <span>{{ item.name | upcase }}</span>
@@ -54,7 +55,15 @@
 
 </div><!-- #nav-wrapper -->
 
-<div class="contact d-flex justify-content-around mt-4">
+<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 %}
+
   <a href="https://github.com/{{ site.github.username }}" target="_blank">
     <i class="fab fa-github-alt"></i>
   </a>
@@ -68,4 +77,5 @@
   <a href="{{ site.baseurl }}/feed.xml" target="_blank">
     <i class="fas fa-rss"></i>
   </a>
+
 </div>

_includes/topbar.html

@@ -44,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,27 +1,31 @@
-<!--
+{% 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 %}
-{% endfor %}
+{% endfor %}

_includes/update_list.html

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

_layouts/category.html

@@ -6,8 +6,6 @@ layout: page
 # 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>
@@ -20,7 +18,7 @@ layout: page
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
       <a href="{{ post.url | absolute_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 }}</span>
     </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -8,16 +8,26 @@ layout: compress
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+
+{% capture prefer_mode %}
+  {% if site.theme_mode != "dual" %}
+    mode="{{ site.theme_mode }}"
+  {% endif %}
+{% endcapture %}
+
+<html lang="en" {{ prefer_mode }} >
 
   {% include head.html %}
 
   <body data-spy="scroll" data-target="#toc">
+
     <div id="sidebar" class="d-flex flex-column">
       {% include sidebar.html %}
     </div>
+
+    {% include topbar.html %}
+
     <div id="main-wrapper">
-      {% include topbar.html %}
       <div id="main">
 
         {% capture _content %}
@@ -30,7 +40,8 @@ layout: compress
         {% include footer.html %}
       </div>
       {% include search-results.html %}
-    </div>
+
+    </div> <!-- #main-wrapper -->
 
     <div id="mask"></div>
 

_layouts/home.html

@@ -7,8 +7,6 @@ layout: page
 # MIT Licensed
 ---
 
-{% include date-format.html %}
-
 <div id="post-list">
   {% for post in paginator.posts %}
   <div class="post-preview">
@@ -17,19 +15,22 @@ layout: page
     </h1>
     <div class="post-content">
       <p>
-      {{ post.content | strip_html | truncate: 200 | replace: '&', '&amp;' }}
+      {% assign _content = post.content %}
+      {% include no-linenos.html %}
+      {{ _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 }}
+      <span class="timeago" data-toggle="tooltip" data-placement="bottom"
+        title="{{ post.date | date: site.data.date_format.tooltip }}">
+      {{ post.date | date: site.data.date_format.post }}
       <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
       </span>
       <!-- page views -->
-      {% if site.google_analytics.pv %}
+      {% 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>
@@ -41,83 +42,5 @@ layout: page
 </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

@@ -9,7 +9,7 @@ layout: default
 
 <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">
@@ -18,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

@@ -8,63 +8,88 @@ layout: default
 ---
 
 <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 }}
+          Posted
+          <span class="timeago" data-toggle="tooltip" data-placement="bottom"
+           title="{{ page.date | date: site.data.date_format.tooltip }}">
+            {{ page.date | date: site.data.date_format.post }}
             <i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
           </span>
-          {% 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 %}
+          by
+          <span class="author">
+          {% if page.author %}
+            {{ page.author }}
+          {% else%}
+            {{ site.author }}
+          {% endif %}
+          </span>
         </div>
 
         <!-- lastmod -->
-        {% if page.seo.date_modified > page.date %}
+        {%- capture filename -%}
+          {{ page.url | split: "/" | last }}
+        {%- endcapture -%}
+
+        {% assign record = site.data.updates | where: "filename", filename | first %}
+
+        {% if record %}
         <div>
           Updated
-          <span class="timeago lastmod" data-toggle="tooltip" 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 class="timeago lastmod"
+            data-toggle="tooltip" data-placement="bottom"
+             title="{{ record.lastmod | date: site.data.date_format.tooltip }}">
+            {{ record.lastmod | date: site.data.date_format.post }}
+            <i class="unloaded">{{ record.lastmod | date_to_xmlschema}}</i>
           </span>
         </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 %}
 
       </div> <!-- .post-meta -->
 
       <div class="post-content">
+
         {% if page.image %}
-        <img src="{{ page.image }}">
-        {% endif %}
-        <!-- Add lozad class into image tags. see: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-        {% if content contains '<img src=' %}
-          {% capture loading %}{{ "/assets/img/commons/loading.png" | relative_url }}{% endcapture %}
-          {% assign replacement = '<img class="lozad" src=' | append: loading | append: ' data-src=' %}
-          {{ content | replace: '<img src=', replacement }}
-        {% else %}
-          {{ content }}
+          <img src="{{ page.image }}">
         {% endif %}
+
+        {{ content }}
+
       </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" >
@@ -73,9 +98,25 @@ layout: default
           {% endfor %}
           </div>
         {% endif %}
+
+        <div class="post-tail-bottom
+          d-flex justify-content-between align-items-center 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 %}
@@ -86,32 +127,15 @@ layout: default
   <div id="post-extend-wrapper" 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 post-nav.html %}
+
+      {% if site.disqus.comments and page.comments %}
+        {% include disqus.html %}
+      {% endif %}
+
       {% include related-posts.html %}
 
-      <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>
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
-          <p>-</p>
-      {% endif %}
-        </a>
-
-      {% if page.next.url %}
-        <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
-          <p>{{ page.next.title }}</p>
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
-          <p>-</p>
-      {% endif %}
-        </a>
-      </div> <!-- div.post-navigation -->
-
-    {% if site.disqus.comments and page.comments %}
-      {% include disqus.html %}
-    {% endif %}
-
     </div> <!-- .pl-1 pr-1 -->
 
   </div> <!-- #post-extend-wrapper -->

_layouts/tag.html

@@ -7,8 +7,6 @@ layout: page
 # 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>
@@ -20,7 +18,7 @@ layout: page
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
       <a href="{{ post.url | absolute_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 }}</span>
     </li>
     {% endfor %}
   </ul>

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

@@ -1,5 +1,6 @@
 ---
-title: "Text and Typography"
+title: Text and Typography
+author: Cotes Chung
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]

_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 with the format `YYYY-MM-DD-title.md` then put it into `_post` of the root directory.
 
 ## Front Matter
 
@@ -18,15 +19,77 @@ 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.
 
-- **Categories and Tags**
+### Timezone of date
 
-    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.
+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
+
+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. The number of such *category*/*tag* type pages is equal to the number of `categories`/`tags` for all posts, they must match perfectly. 
+
+let's say there is a post with front matter:
+```yaml
+categories: [Animal, Insect]
+tags: bee
+```
+
+then we should have two *category* type pages placed in folder `categories` of root and one *tag* type page placed in folder `tags`  of root:
+
+```terminal
+jekyll-theme-chirpy
+├── categories
+│   ├── animal.html
+│   └── insect.html
+├── tags
+│   └── bee.html
+...
+```
+    
+and the content of a *category* type page is
+
+```yaml
+---
+layout: category
+title: CATEGORY_NAME        # e.g. Insect
+category: CATEGORY_NAME     # e.g. Insect
+---
+```
+
+the content of a *tag* type page is
+
+```yaml
+---
+layout: tag
+title: TAG_NAME             # e.g. bee
+tag: TAG_NAME               # e.g. bee
+---
+```
+
+With the increasing number of posts, the number of categories and tags will increase several times!  If we still manually create these *category*/*tag* type files, it will obviously be a super time-consuming job, and it is very likely to miss some of them(i.e. when you click on the missing `category` or `tag` link from a post or somewhere, it will complain to you '404'). The good news is that we got a lovely script tool `_scripts/sh/create_pages.sh` to finish the boring task. Basically we will use it via `tools/init.sh` instead of running it separately. Check out its use case [here]({{ "/posts/getting-started/#option-1-built-by-github-pages" | relative_url }}).
+
+## Last modified date
+    
+The last modified date of a post is obtained according to its latest git commit date, and all the modified date of the posts should be stored in `_data/updates.yml`. For example:
+
+```yaml
+-
+  filename: getting-started             # the post filename without date and extension
+  lastmod: 2020-04-13 00:38:56 +0800    # the post last modified date
+-
+  ... 
+```
+
+You can choose to create this file manually, but as you may notice, the better approach is to let it be automatically generated by a tool script. And `_scripts/sh/dump_lastmod.py` was born for this! Similar to the another script `_scripts/sh/create_pages.sh` mentioned above, it is also be called from `tools/init.sh`, so it doesn't have to be used separately.
+
+When some posts have been modified since their published date and also the file `_data/updates.yml` was created correctly, a list with the label **Recent Updates** will be displayed in the right panel of the desktop view, which records the five most recently modified articles.
 
 ## Table of Contents
 

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

@@ -1,15 +1,16 @@
 ---
 title: Getting Started
+author: Cotes Chung
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
 ---
 
-## Preparation
+## Prerequisites
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (Ruby, RubyGem, Bundler and Jekyll). In order to use the script tools to save time, 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/).
+Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (`Ruby `, `RubyGems` and `Bundler`). 
 
-In addition, if your machine is running Debian or macOS, make sure you have the [GNU coreutils](https://www.gnu.org/software/coreutils/) installed. Otherwise, get it by:
+To improve the writing experience, we need to use some script tools. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
 
 * Debian
 
@@ -24,18 +25,26 @@ $ brew install coreutils
 ```
 
 
-## Install Jekyll Plugins
+## Jekyll Plugins
 
-Go to the root of repo and run:
+[Fork **Chirpy** from GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/fork), then clone your forked repo to local:
+
+```console
+$ git clone git@github.com:USER/jekyll-theme-chirpy.git -b master
+```
+
+and replace the `USER` above to your GitHub username.
+
+The first time you run or build the project on local machine, perform the installation of Jekyll plugins. Go to the root of repo and run:
 
 ```terminal
 $ bundle install
 ```
 
-`bundle` will install all the dependent Jekyll Plugins listed in file `Gemfile` automatically.
+`bundle` will automatically install all the dependent Jekyll Plugins that listed in the `Gemfile`.
 
 
-## File Structure
+## Directory Structure
 
 The main files and related brief introductions are listed below.
 
@@ -73,20 +82,34 @@ As mentioned above, some files or directories should be removed from your repo:
 
 ## Configuration
 
-Customize the variables in file `_config.yml` as needed.
+Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
 
-* Avatar
+* `url`
     
-    The sample avatar is `/assets/img/sample/avatar.jpg`. It should be replaced by your own one. Notice that a huge image file will increase the load time of your site, so keep your avatar size as samll as possible(may be *<https://tinypng.com/>* will help).
+    Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
 
-* TimeZone
+
+* `avatar`
+    
+    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one(a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as samll as possible(may be *<https://tinypng.com/>* will help).
+
+* `timezone`
 
     To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
 
+* `theme_mode`
+  
+    There are three options for the theme color scheme:
+    
+    - **dual**  - The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
+
+    - **dark**  - Always show dark mode.
+    - **light** - Always show light mode.
+
 
 ##  Run Locally
 
-You may want to preview the site before publishing, so just run the script tool:
+You may want to preview the site content before publishing, so just run the script tool:
 
 ```terminal
 $ bash tools/run.sh
@@ -98,7 +121,7 @@ Few days later, you may find that the file changes does not refresh in real time
 
 ##  Deploying to GitHub Pages
 
-Before the deployment begins, ensure the `url` in file `_config.yml` has been set to `https://<username>.github.io`(or the custom domain, if you have. e.g. `https://yourdomain.com`). What's more, if you prefer to the [Project site](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites), change `baseurl` of file `_config.yml` to your project name, starting with a slash. e.g. `/project`.
+Before the deployment begins, checkout the file `_config.yml` and make sure that the `url` has been configured. What's more, if you prefer the [Project site on GitHub](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and also use the default domain `<username>.github.io`, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
 
 
 ### Option 1: Built by GitHub Pages
@@ -112,7 +135,7 @@ By deploying the site in this way, you're allowed to push the source code direct
 |Site Type | Repo's Name|
 |:---|:---|
 |User or Organization | `<username>.github.io`|
-|Project| any one except `<username>.github.io`, let's say `project`|
+|Project| Any one except `<username>.github.io`, let's say `project`|
 
 **2**. Commit the changes of the repo first, then run the initialization script:
 
@@ -122,7 +145,18 @@ $ bash tools/init.sh
 
 > Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
 
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
+it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit. Its output is similar to the following log:
+
+```terminal
+[INFO] Success to update lastmod for 4 post(s).
+[INFO] Succeed! 3 category-pages created.
+[INFO] Succeed! 4 tag-pages created.
+[Automation] Updated the Categories, Tags, Lastmod for post(s).
+ 11 files changed, 46 insertions(+), 3 deletions(-)
+ ...
+Updated the Categories, Tags, Lastmod for post(s).
+```
+
 
 **3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repo.
 
@@ -143,7 +177,7 @@ For security reasons, GitHub Pages runs on `safe` mode, which means the third-pa
 |Site Type | Repo's Name|
 |:---|:---|
 |User or Organization | `<username>.github.io`|
-|Project| any one except `<username>.github.io`, let's say `project`|
+|Project| Any one except `<username>.github.io`, let's say `project`|
 
 and clone it.
 
@@ -164,4 +198,6 @@ The generated static files will be placed in the root of `/path/to/local/project
 |User or Organization | `https://<username>.github.io/`|
 |Project| `https://<username>.github.io/project/`|
 
-and enjoy!
+### Finishing work
+
+No matter which way you choose to deploy the website on GitHub, please enforce the `HTTPS` for it. See official docs: [Configuring a publishing source for your GitHub Pages site](https://help.github.com/en/github/working-with-github-pages/securing-your-github-pages-site-with-https).

_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]

_scripts/py/init_all.py

@@ -1,18 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-"""
-Automatic invokes all initial scripts for project.
-v2.0
-https://github.com/cotes2020/jekyll-theme-chirpy
-© 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,192 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-'''
-Generates HTML pages for Categories and Tags in posts.
-
-Dependencies:
-  - git
-  - ruamel.yaml
-
-v2.0
-https://github.com/cotes2020/jekyll-theme-chirpy
-© 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/requirements.txt

@@ -1,2 +0,0 @@
-ruamel.yaml==0.16.5
-ruamel.yaml.clib==0.1.2

_scripts/py/update_posts_lastmod.py

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

_scripts/sh/dump_lastmod.sh

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

_scripts/sh/sync_monitor.sh

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

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,102 @@
+/*
+* 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-family: 'Lato', 'Microsoft Yahei', sans-serif;
+}
+
+%section {
+  #post-wrapper & {
+    line-height: 1.2;
+    margin-bottom: 1rem;
+  }
+}
+
+%anchor {
+  .post-content &,
+  #page & {
+    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,126 @@
+/*
+* 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: 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: 2px 4px;
+    margin: 0 .15rem;
+    border-radius: 4px;
+  }
+  @at-root a>&.highlighter-rouge {
+    padding-bottom: 0; // show link's underlinke
+  }
+  @at-root a:hover>&.highlighter-rouge {
+    border-bottom: none;
+  }
+}
+
+td.rouge-code {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+/* Hide line numbers for defualt, console, and terminal code snippets */
+div {
+  &[class^='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,91 @@
+/*!
+* 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; } /* Generic.Deleted & Diff Deleted */
+  .highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
+
+
+  /*-----  My styles ------*/
+
+  --highlight-bg-color: #272822;
+  --highlighter-rouge-color: #de6b18;
+
+  --highlight-lineno-color: #6c6c6d;
+  --highlight-lineno-border-color: #3c4042;
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+  pre { color: #818c96 } /* override Bootstrap */
+  kbd { background-color: black; }
+}

assets/css/_colors/dark-typography.scss

@@ -0,0 +1,132 @@
+/*!
+* 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, 33);
+  --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-bg: rgb(39, 40, 33);
+  --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-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(52, 53, 42, 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-border-color: var(--main-wrapper-bg);
+  --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(146, 146, 146);
+
+  .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,79 @@
+/*!
+* 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: #000000; 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: #000000; 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;
+
+} // light-syntax

assets/css/_colors/light-typography.scss

@@ -0,0 +1,122 @@
+/*!
+* 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 */
+
+  --post-list-text-color: dimgray;
+
+  --btn-patinator-text-color: #555555;
+
+  --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: inherit;
+}

assets/css/_dark/dark-main.scss

@@ -1,60 +0,0 @@
-/*!
-* The main dark mode styles
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
-*/
-
-@media (prefers-color-scheme: dark) {
-  html {
-    /* framework */
-    --main-wrapper-bg: rgb(27, 27, 30);
-    --topbar-wrapper-bg: rgb(39, 40, 43);
-    --search-wrapper-bg: rgb(34, 34, 39);
-    --search-icon: rgb(100, 102, 105);
-    --input-focus-border: rgb(112, 114, 115);
-    --footer-bg: rgb(31, 30, 30);
-    --footer-border: rgb(44, 45, 45);
-    --mask-bg: rgb(68, 69, 70);
-
-    /* sidebar */
-    --nav-cursor: rgb(183, 182, 182);
-    --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
-
-    /* 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(99, 131, 182);
-    --main-border: rgb(63, 65, 68);
-    --button-bg: rgb(39, 40, 33);
-    --blockquote-border: rgb(66, 66, 66);
-    --blockquote-text: rgb(117, 117, 117);
-
-    --card-bg: rgb(39, 40, 33);
-    --card-header-bg: rgb(51, 50, 50);
-    --relate-post-title: rgb(164, 175, 181);
-
-    /* Home page */
-    --btn-active-bg: #1c345e;
-    --btn-active-border-color: #8ab4f8;
-
-    /* posts */
-    --toc-highlight: rgb(116, 178, 243);
-    --tag-bg: rgb(41, 40, 40);
-    --tag-hover: rgb(43, 56, 62);
-    --tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
-    --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
-
-    /* tags */
-    --tag-border: rgb(59, 79, 88);
-    --tag-shadow: rgb(32, 33, 33);
-
-    /* categories */
-    --categories-hover-bg: rgb(73, 75, 76);
-
-    /* archives */
-    --timeline-node-bg: rgb(150, 152, 156);
-  }
-}

assets/css/_dark/dark-syntax.scss

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

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

assets/css/categories.scss

@@ -1,42 +1,48 @@
 ---
+# Style for Tab Categories
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
-  Style for Tab Categories
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 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 {
-  border-left: none;
-  border-right: none;
-  padding-left: 2rem;
-}
+.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;
+    }
+    &:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
 
-.categories .collapsing .list-group-item:first-child,
-.categories .collapse .list-group-item: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;
@@ -44,45 +50,22 @@
   border-radius: 50%;
   text-align: center;
   color: #6c757d!important;
+  >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, #e9ecef);
+    background-color: var(--categories-hover-bg);
   }
 }
 
-.category-trigger>i.fas {
-  position: relative;
-  height: .7rem;
-  width: 1rem;
-  transition: 300ms ease all;
-}
-
 .rotate {
   -ms-transform: rotate(-90deg); /* IE 9 */
   -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
-}
-
-@media (prefers-color-scheme: dark) {
-  .categories.card,
-  .list-group-item {
-    background-color: var(--card-bg);
-  }
-
-  .categories .card-header {
-    background-color: var(--card-header-bg);
-  }
-
-  .categories .list-group-item {
-    border-left: none;
-    border-right: none;
-    padding-left: 2rem;
-    border-color: var(--main-border);
-  }
-
-  .categories .list-group-item:last-child {
-    border-bottom-color: var(--card-bg);
-  }
-}
+}

assets/css/category-tag.scss

@@ -1,40 +1,38 @@
 ---
+# 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
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT License
-*/
 
-#page-category ul>li,
-#page-tag ul>li {
-  line-height: 1.5rem;
-  padding: .6rem 0;
-}
 
-#page-category ul>li::before,
-#page-tag ul>li::before {
-  background: #999;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  display: block;
-  content: "";
-  position: relative;
-  top: .6rem;
-  margin-right: .5rem;
-}
+{% include_relative _addon/main.scss %}
 
-#page-tag ul>li>a,
-#page-category ul>li>a, { /* post's title */
-  font-size: 1.1rem;
-}
-
-#page-category ul>li>span:last-child,
-#page-tag ul>li>span:last-child { /* post's date */
-  white-space: nowrap;
+#page-category, #page-tag {
+  ul>li {
+    line-height: 1.5rem;
+    padding: .6rem 0;
+    &::before { // dot
+      background: #999;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      display: block;
+      content: "";
+      position: relative;
+      top: .6rem;
+      margin-right: .5rem;
+    }
+    >a { /* post's title */
+      font-size: 1.1rem;
+      @extend %no-bottom-border;
+    }
+    >span:last-child {
+      white-space: nowrap;
+    }
+    /* post's date */
+  }
 }
 
 #page-tag h1>i { // tag icon
@@ -45,29 +43,31 @@
   font-size: 1.25rem;
 }
 
-#page-category a:hover,
-#page-tag a:hover,
-#access-lastmod a:hover {
-  margin-bottom: -1px;  // Avoid jumping
+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 var(--main-border, silver);
+  border-bottom: 2px dotted var(--dash-color);
 }
 
 @media all and (max-width: 576px) {
-
-  #page-category ul>li::before,
-  #page-tag ul>li::before {
-    margin: 0 .5rem;
+  #page-category, #page-tag {
+    ul>li {
+      &::before {
+        margin: 0 .5rem;
+      }
+      >a {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
   }
-
-  #page-tag ul>li>a,
-  #page-category ul>li>a {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
 }

assets/css/home.scss

@@ -1,106 +1,100 @@
 ---
+# Style for Homepage
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
 
-/*!
-  Style for Homepage
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT License
-*/
+{% include_relative _addon/main.scss %}
 
 #post-list {
   margin-top: 1rem;
   padding-right: .5rem;
+  .post-meta {
+    i:not(:first-child) { // post-meta icons on HOME
+      margin-left: 1.5rem;
+    }
+  }
 }
 
 .pagination {
   font-size: 1rem;
-}
-
-.pagination a:hover {
-  text-decoration: none;
+  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);
+  >h1 {
+    font-size: 1.4rem;
+    margin: 0;
+  }
+  i.far { /* fontawesome icons */
+    font-size: 86%;
+  }
+  .post-content {
+    margin-top: .6rem;
+    margin-bottom: .6rem;
+    color: var(--post-list-text-color);
+    >p { /* Make preview shorter in Home page*/
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
 }
 
-.post-preview>h1 {
-  font-size: 1.4rem;
-  margin: 0;
-}
+.page-item {
+  .page-link {
+    color: var(--btn-patinator-text-color);
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    text-align: center;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid var(--btn-paginator-border-color);
+    font-family: 'Lato', sans-serif;
+    background-color: var(--button-bg);
+  }
+  &.active {
+    .page-link {
+      background-color: var(--btn-active-bg);
+      border-color: var(--btn-active-border-color);
+      box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
+      color: var(--btn-text-color);
+    }
+  }
+  &.disabled {
+    cursor: not-allowed;
+    .page-link {
+      color: rgba(108, 117, 125, 0.57);
+      border-color: var(--btn-paginator-border-color);
+      background-color: var(--button-bg);
+    }
+  }
+  &:first-child .page-link,
+  &:last-child .page-link {
+    border-radius: 50%;
+  }
+  &:not(:last-child) {
+    margin-right: 0.6rem;
+  }
 
-.post-preview i.far {
-  /* fontawesome icons */
-  font-size: 86%;
-}
+} // .page-item
 
-.post-preview .post-content {
-  margin-top: .6rem;
-  margin-bottom: .6rem;
-  color: var(--text-color, dimgray);
-}
-
-/* Make preview shorter in Home page*/
-.post-preview .post-content>p {
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.page-item .page-link {
-  color: var(--text-color, #555555);
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  text-align: center;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  align-items: center;
-  border-radius: 50%;
-  border: 1px solid var(--main-border, #f1f1f1);
-  font-family: 'Lato', sans-serif;
-  background-color: var(--button-bg);
-}
-
-.page-item.active .page-link {
-  background-color: var(--btn-active-bg, #2a408e);
-  border-color: var(--btn-active-border-color, #007bff);
-  box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
-  color: var(--text-color, #f8f8f8);
-}
-
-.page-item.disabled .page-link {
-  color: rgba(108, 117, 125, 0.57);
-  border-color: var(--main-border, #f1f1f1);
-  background-color: var(--button-bg);
-}
-
-.page-item.disabled {
-  cursor: not-allowed;
-}
-
-.page-item:first-child .page-link,
-.page-item:last-child .page-link {
-  border-radius: 50%;
-}
-
-.page-item:not(:last-child) {
-  margin-right: 0.6rem;
-}
-
-#post-list .post-meta i:not(:first-child) { // post-meta icons on HOME
-  margin-left: 1.5rem;
-}
 
 @media all and (max-width: 576px) {
   #post-list .post-meta>span i:not(:first-child) {
@@ -117,6 +111,11 @@
 
 /* Sidebar is visible */
 @media all and (min-width: 831px) {
+
+  #post-list {
+    margin-top: 1.5rem;
+  }
+
   .pagination {
     font-size: .85rem;
   }

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,95 +1,117 @@
 ---
+# Post-specific style
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
-  Individual styles for Post
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 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));
-  position: relative;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
+
+{% 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 var(--main-border, #e9ecef);
+@mixin btn-post-nav {
+  width: 50%;
+  position: relative;
+  border-color: var(--btn-border-color);
+}
+
+.author {
+  @include semi-bold;
+}
+
+.post {
+  img {
+    max-width: 100%;
+    margin-top: .5rem;
+    margin-bottom: 1.5rem;
+    position: relative;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
+}
+
+.post-tail-wrapper {
+  margin-top: 4rem;
+  border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
 
+.post-tags {
+  line-height: 2rem;
+}
+
 .post-navigation {
-  padding: 1rem .2rem;
-  margin-bottom: 2rem;
-}
+  padding-top: 3rem;
+  padding-bottom: 2rem;
 
-.post-navigation .btn,
-.post-navigation .btn.disabled {
-  width: 50%;
-  position: relative;
-  color: var(--link-color, #2a408e);
-  border-color: var(--main-border, #e9ecef);
-}
+  .btn {
+    @include btn-post-nav;
+    color: var(--link-color);
+    &:hover {
+      background: #2a408e;
+      color: #fff;
+      border-color: #2a408e;
+    }
+    &.disabled {
+      @include btn-post-nav;
+      pointer-events: auto;
+      cursor: not-allowed;
+      background: none;
+      color: gray;
+      &:hover {
+        border-color: none;
+      }
+    }
+    &.btn-outline-primary.disabled:focus {
+      box-shadow: none;
+    }
+  }
 
-.post-navigation .btn:hover {
-  background: #2a408e;
-  color: #fff;
-  border-color: #2a408e;
-}
+  p {
+    font-size: 1.1rem;
+    line-height: 1.5rem;
+    margin-top: .3rem;
+    white-space: normal;
+  }
 
-.post-navigation a.btn.disabled {
-  pointer-events: auto;
-  cursor: not-allowed;
-  background: none;
-  color: gray;
-  border-color: var(--main-border, #e9ecef);
-}
-
-.post-navigation a.btn.btn-outline-primary.disabled:focus {
-  box-shadow: none;
-}
-
-.post-navigation a > p {
-  font-size: 1.1rem;
-  line-height: 1.5rem;
-  margin-top: .3rem;
-  white-space: normal;
-}
-
-.post-navigation a:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  left: .5px;
-}
-
-.post-navigation a:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  right: .5px;
-}
-
-.post-navigation a::before {
-  color: var(--text-muted-color, gray);
-  font-size: .65rem;
-  text-transform: uppercase;
-}
-
-.post-navigation a:first-child::before {
-  content: "Older";
-}
-
-.post-navigation a:last-child::before {
-  content: "Newer";
-}
+  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 {
@@ -108,19 +130,15 @@
   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 {
-  top: 6rem;
-}
-
-#toc-wrapper>h3 {
-  font-size: 1rem;
-  font-family: 'Oswald', sans-serif;
-  color: gray;
+  &.topbar-down {
+    top: 6rem;
+  }
+  >h3 {
+    @include label(inherit, 600);
+  }
 }
 
 #toc li>a {
@@ -132,70 +150,155 @@
 
 /*--- Related Posts ---*/
 
-#related-posts > h3 {
-  color: gray;
-  font-size: 1.1rem;
-  font-family: 'Oswald', sans-serif;
-}
+#related-posts {
+  >h3 {
+    @include label(1.1rem, 600);
+  }
+  .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 {
-  border: 1px solid var(--main-wrapper-bg, #f1f1f1);
-  background-color: var(--card-bg);
-  box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922));
-  -webkit-transition: all .3s ease-in-out;;
-  -moz-transition: all .3s ease-in-out;;
-  transition: all .3s ease-in-out;
-}
+  .timeago {
+    color: var(--relate-post-date);
+  }
 
-#related-posts .card:hover {
-  -webkit-transform: translate3d(0, -3px, 0);
-  transform: translate3d(0, -3px, 0);
-  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08));
-}
+  p {
+    font-size: .9rem;
+    margin-bottom: .5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 
-#related-posts .card h3 {
-  color: var(--relate-post-title, #353a3d);
-}
+  a:hover {
+    text-decoration: none;
+  }
 
-#related-posts .timeago {
-  color: var(--text-muted-color, rgba(30,55,70,.4));
-}
-
-#related-posts p {
-  font-size: .9rem;
-  margin-bottom: .5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-#related-posts a:hover {
-  text-decoration: none;
-}
-
-#related-posts ul {
-  list-style-type: none;
-  padding-inline-start: 1.5rem;
-}
-
-#related-posts ul > li::before {
-  background: #c2c9d4;
-  width: 5px;
-  height: 5px;
-  border-radius: 1px;
-  display: block;
-  content: "";
-  position: relative;
-  top: 1rem;
-  right: 1rem;
+  ul {
+    list-style-type: none;
+    padding-inline-start: 1.5rem;
+    >li::before {
+      background: #c2c9d4;
+      width: 5px;
+      height: 5px;
+      border-radius: 1px;
+      display: block;
+      content: "";
+      position: relative;
+      top: 1rem;
+      right: 1rem;
+    }
+  }
 }
 
 #post-extend-wrapper {
   min-height: 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 {
     max-width: calc(100% + 1rem);
@@ -203,20 +306,23 @@
 }
 
 @media all and (min-width: 768px) {
-  .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 {
-    -webkit-box-orient: horizontal!important;
-    -webkit-box-direction: normal!important;
-    -ms-flex-direction: row!important;
-    flex-direction: row!important;
-  }
+  .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;
+      }
+      &.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) {
@@ -241,10 +347,12 @@
     margin-left: -.5rem;
     margin-right: -.5rem;
   }
+
 }
 
 /*
-  The following resposive design aim to make #post-extend-wrapper margin-right same as pannel's width
+  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 {
@@ -269,15 +377,3 @@
     margin-right: calc((100% - 1150px) / 8 + 300px);
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  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 {
-    /* Override BS */
-    color: var(--toc-highlight)!important;
-    border-left-color: var(--toc-highlight)!important;
-  }
-}

assets/css/syntax.scss

@@ -1,182 +0,0 @@
----
----
-/*
-* The syntax highlight.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
-*/
-
-@import "_dark/dark-syntax";
-
-/* the fallback color from https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */
-.highlight pre { background-color: var(--highlight-pre-bg) }
-.highlight .hll { background-color: var(--highlight-hll-bg, #ffffcc) }
-.highlight .c { color: var(--highlight-c, #999988); font-style: italic } /* Comment */
-.highlight .err { color: var(--highlight-err, #a61717); background-color: var(--highlight-err-bg, #e3d2d2) } /* Error */
-.highlight .k { color: var(--highlight-k, #000000); font-weight: bold } /* Keyword */
-.highlight .o { color: var(--highlight-o, #000000); font-weight: bold } /* Operator */
-.highlight .cm { color: var(--highlight-cm, #999988); font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: var(--highlight-cp, #999999); font-weight: bold; font-style: italic } /* Comment.Preproc */
-.highlight .c1 { color: var(--highlight-c1, #999988); font-style: italic } /* Comment.Single */
-.highlight .cs { color: var(--highlight-cs, #999999); font-weight: bold; font-style: italic } /* Comment.Special */
-.highlight .gd { color: var(--highlight-gd, #000000); background-color: var(#ffdddd) } /* Generic.Deleted */
-.highlight .ge { color: var(--highlight-ge, #000000); font-style: italic } /* Generic.Emph */
-.highlight .gr { color: var(--highlight-gr, #aa0000) } /* Generic.Error */
-.highlight .gh { color: var(--highlight-gh, #999999) } /* Generic.Heading */
-.highlight .gi { color: var(--highlight-gi, #000000); background-color: #ddffdd } /* Generic.Inserted */
-.highlight .go { color: var(#888888) } /* Generic.Output */
-.highlight .gp { color: var(#555555) } /* Generic.Prompt */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: var(--highlight-gu, #aaaaaa) } /* Generic.Subheading */
-.highlight .gt { color: var(--highlight-gt, #aa0000) } /* Generic.Traceback */
-.highlight .kc { color: var(--highlight-kc, #000000); font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: var(--highlight-kd, #000000); font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: var(--highlight-kn, #000000); font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: var(--highlight-kp, #000000); font-weight: bold } /* Keyword.Pseudo */
-.highlight .kr { color: var(--highlight-kr, #000000); font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: var(--highlight-kt, #445588); font-weight: bold } /* Keyword.Type */
-.highlight .m { color: var(--highlight-m, #009999) } /* Literal.Number */
-.highlight .s { color: var(--highlight-s, #d01040) } /* Literal.String */
-.highlight .na { color: var(--highlight-na, #008080) } /* Name.Attribute */
-.highlight .nb { color: var(--highlight-nb, #0086B3) } /* Name.Builtin */
-.highlight .nc { color: var(--highlight-nc, #445588); font-weight: bold } /* Name.Class */
-.highlight .no { color: var(--highlight-no, #008080) } /* Name.Constant */
-.highlight .nd { color: var(--highlight-nd, #3c5d5d); font-weight: bold } /* Name.Decorator */
-.highlight .ni { color: var(--highlight-ni, #800080) } /* Name.Entity */
-.highlight .ne { color: var(--highlight-ne, #990000); font-weight: bold } /* Name.Exception */
-.highlight .nf { color: var(--highlight-nf, #990000); font-weight: bold } /* Name.Function */
-.highlight .nl { color: var(--highlight-nl, #990000); font-weight: bold } /* Name.Label */
-.highlight .nn { color: var(--highlight-nn, #555555) } /* Name.Namespace */
-.highlight .nt { color: var(--highlight-nt, #000080) } /* Name.Tag */
-.highlight .nv { color: var(--highlight-nv, #008080) } /* Name.Variable */
-.highlight .ow { color: var(--highlight-ow, #000000); font-weight: bold } /* Operator.Word */
-.highlight .w { color: var(--highlight-w, #bbbbbb) } /* Text.Whitespace */
-.highlight .mf { color: var(--highlight-mf, #009999) } /* Literal.Number.Float */
-.highlight .mh { color: var(--highlight-mh, #009999) } /* Literal.Number.Hex */
-.highlight .mi { color: var(--highlight-mi, #009999) } /* Literal.Number.Integer */
-.highlight .mo { color: var(--highlight-mo, #009999) } /* Literal.Number.Oct */
-.highlight .sb { color: var(--highlight-sb, #d01040) } /* Literal.String.Backtick */
-.highlight .sc { color: var(--highlight-sc, #d01040) } /* Literal.String.Char */
-.highlight .sd { color: var(--highlight-sd, #d01040) } /* Literal.String.Doc */
-.highlight .s2 { color: var(--highlight-s2, #d01040) } /* Literal.String.Double */
-.highlight .se { color: var(--highlight-se, #d01040) } /* Literal.String.Escape */
-.highlight .sh { color: var(--highlight-sh, #d01040) } /* Literal.String.Heredoc */
-.highlight .si { color: var(--highlight-si, #d01040) } /* Literal.String.Interpol */
-.highlight .sx { color: var(--highlight-sx, #d01040) } /* Literal.String.Other */
-.highlight .sr { color: var(--highlight-sr, #009926) } /* Literal.String.Regex */
-.highlight .s1 { color: var(--highlight-s1, #d01040) } /* Literal.String.Single */
-.highlight .ss { color: var(--highlight-ss, #990073) } /* Literal.String.Symbol */
-.highlight .bp { color: var(--highlight-bp, #999999) } /* Name.Builtin.Pseudo */
-.highlight .vc { color: var(--highlight-vc, #008080) } /* Name.Variable.Class */
-.highlight .vg { color: var(--highlight-vg, #008080) } /* Name.Variable.Global */
-.highlight .vi { color: var(--highlight-vi, #008080) } /* Name.Variable.Instance */
-.highlight .il { color: var(--highlight-il, #009999) } /* Literal.Number.Integer.Long */
-
-
-/*-- Codes Snippet --*/
-
-div.highlight,
-figure.highlight,
-.highlighter-rouge {
-  background: var(--highlight-pre-bg, #f7f7f7)
-}
-
-.highlight {
-  overflow: auto;
-}
-
-.highlight .lineno {
-  margin: .8rem 0rem;
-  padding: 0 .5rem;
-  min-width: 2.2rem;
-  text-align: right;
-  color: var(--highlight-lineno, #c2c6cc);
-  border-right: 1px solid var(--highlight-lineno-border, #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 {
-  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;
-}
-
-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;
-}
-
-@media (prefers-color-scheme: light) {
-  .highlight {
-    -moz-box-shadow: inset 0 0 2px #c2c6cc;
-    -webkit-box-shadow: inset 0 0 2px #c2c6cc;
-    box-shadow: inset 0 0 2px #c2c6cc;
-  }
-
-  .highlighter-rouge {
-    color: black;
-  }
-
-  code.highlighter-rouge {
-    border: 1px solid #e9ecef;
-  }
-}

assets/css/tags.scss

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

assets/data/cache-list.js

@@ -0,0 +1,116 @@
+---
+# The list to be cached by PWA
+# Chirpy v2.2
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# MIT Licensed
+---
+
+const include = [
+
+  /*--- CSS ---*/
+
+  '{{ "/assets/css/home.css" | relative_url }}',
+  '{{ "/assets/css/categories.css" | relative_url }}',
+  '{{ "/assets/css/tags.css" | relative_url }}',
+  '{{ "/assets/css/archives.css" | relative_url }}',
+  '{{ "/assets/css/page.css" | relative_url }}',
+  '{{ "/assets/css/post.css" | relative_url }}',
+  '{{ "/assets/css/category-tag.css" | relative_url }}',
+  '{{ "/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" | relative_url }}',
+
+  /*--- Javascripts ---*/
+
+  '{{ "/assets/js/dist/commons.js" | relative_url }}',
+  '{{ "/assets/js/dist/timeago.min.js" | relative_url }}',
+  '{{ "/assets/js/dist/category-collapse.min.js" | relative_url }}',
+  '{{ "/assets/js/dist/toc.min.js" | relative_url }}',
+  '{{ "/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js" | relative_url }}',
+
+  /*--- HTML ---*/
+
+  /* Tabs */
+  {% for tab in site.data.tabs %}
+    {% capture item %}
+      {%- unless tab.name == 'Home' -%}
+        /tabs/{{ tab.name | downcase }}
+      {%- endunless -%}
+      {{- "/" -}}
+    {% endcapture %}
+    '{{ item | relative_url }}',
+  {% endfor %}
+
+  /* The posts of first Home page and recent update list */
+  {% assign post_list = "" | split: "" %}
+  {% assign sum = 0 %}
+
+  {% for post in site.posts %}
+    {% assign post_list = post_list | push: post.url %}
+    {% assign sum = sum | plus: 1 %}
+    {% if sum >= site.paginate %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+
+  {% include update_list.html %}
+  {% for item in update_list %}
+    {% assign url = item | split: "::" | last | prepend: "/posts/" | append: "/" %}
+    {% assign post_list = post_list | push: url %}
+  {% endfor %}
+
+  {% assign post_list = post_list | uniq %}
+
+  {% for url in post_list %}
+    '{{ url }}',
+  {% endfor %}
+
+  /* Trending tags */
+  {% include trending-tags.html %}
+  {% for tag in trending_tags %}
+    {% capture tag_url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+    '{{ tag_url | relative_url }}',
+  {% endfor %}
+
+  /*--- Icons ---*/
+
+  {%- capture icon_url -%}
+    {{ "/assets/img/favicons" | relative_url }}
+  {%- endcapture -%}
+  '{{ icon_url }}/favicon.ico',
+  '{{ icon_url }}/apple-icon.png',
+  '{{ icon_url }}/apple-icon-precomposed.png',
+  '{{ icon_url }}/apple-icon-57x57.png',
+  '{{ icon_url }}/apple-icon-60x60.png',
+  '{{ icon_url }}/apple-icon-72x72.png',
+  '{{ icon_url }}/apple-icon-76x76.png',
+  '{{ icon_url }}/apple-icon-114x114.png',
+  '{{ icon_url }}/apple-icon-120x120.png',
+  '{{ icon_url }}/apple-icon-144x144.png',
+  '{{ icon_url }}/apple-icon-152x152.png',
+  '{{ icon_url }}/apple-icon-180x180.png',
+  '{{ icon_url }}/android-icon-192x192.png',
+  '{{ icon_url }}/favicon-32x32.png',
+  '{{ icon_url }}/favicon-96x96.png',
+  '{{ icon_url }}/favicon-16x16.png',
+  '{{ icon_url }}/ms-icon-144x144.png',
+  '{{ icon_url }}/manifest.json',
+  '{{ icon_url }}/browserconfig.xml',
+
+  /*--- Others ---*/
+
+  {% if site.google_analytics.pv.enabled %}
+    '{{ "/assets/lib/countUp.min.js" | relative_url }}',
+    '{{ "/assets/js/dist/pageviews.min.js" | relative_url }}',
+  {% endif %}
+
+  '{{ "/assets/data/search.json" | relative_url }}',
+  '{{ "/404.html" | relative_url }}',
+
+  '{{ "/app.js" | relative_url }}',
+  '{{ "/sw.js" | relative_url }}'
+];
+
+const exclude = [
+  '/assets/data/pv-data.json',
+  '/img.shields.io/'
+];

assets/data/proxy.json

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

assets/data/pv-data.json

@@ -0,0 +1,12 @@
+---
+---
+
+const proxyData = '{"url": "{{ site.google_analytics.pv.proxy_endpoint }}"}';
+
+{%- capture pv_data -%}
+  {%- if site.google_analytics.pv.cache and site.google_analytics.pv.enabled -%}
+    {% include_relative _pageviews.json %}
+  {%- endif -%}
+{%- endcapture -%}
+
+const pageviews = '{{ pv_data }}';

assets/data/search.json

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

assets/img/favicons/manifest.json

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

assets/js/_src/_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/_src/_commons/search-display.js

@@ -10,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');
@@ -29,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/_src/_commons/sidebar.js

@@ -5,52 +5,30 @@
  * © 2018-2019 Cotes Chung
  * MIT License
  */
-$(function(){
 
-  var isExpanded = false;
+$(function() {
 
-  $("#sidebar-trigger").click(function() {
-    if (isExpanded == false) {
-      $("#sidebar").addClass("sidebar-expand");
-      openModal();
-      isExpanded = true;
-    }
-  });
+  var sidebarUtil = (function() {
+    const ATTR_DISPLAY = "sidebar-display";
+    var isExpanded = false;
+    var body = $('body');
 
-  $("#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 = '';
+      toggle: function() {
+        if (isExpanded == false) {
+          body.attr(ATTR_DISPLAY, '');
+        } else {
+          body.removeAttr(ATTR_DISPLAY);
+        }
+
+        isExpanded = !isExpanded;
       }
-    };
-  })('no-scroll');
+    }
 
-  function openModal() {
-    ModalHelper.afterOpen();
-  }
+  })();
 
-  function closeModal() {
-    ModalHelper.beforeClose();
-  }
+  $("#sidebar-trigger").click(sidebarUtil.toggle);
 
-});
+  $('#mask').click(sidebarUtil.toggle);
+
+});

assets/js/_src/pageviews.js

@@ -3,7 +3,7 @@
  *
  * Dependences:
  *   - jQuery
- *   - countUp.js(https://github.com/inorganik/countUp.js)
+ *   - countUp.js <https://github.com/inorganik/countUp.js>
  *
  * v2.0
  * https://github.com/cotes2020/jekyll-theme-chirpy
@@ -11,9 +11,9 @@
  * MIT License
  */
 
-function countUp(min, max, dest) {
+function countUp(min, max, destId) {
   if (min < max) {
-    var numAnim = new CountUp(dest, min, max);
+    var numAnim = new CountUp(destId, min, max);
     if (!numAnim.error) {
       numAnim.start();
     } else {
@@ -22,6 +22,7 @@ function countUp(min, max, dest) {
   }
 }
 
+
 function countPV(path, rows) {
   /* path permalink looks like: '/posts/post-title/' */
   var fileName = path.replace(/\/posts\//g, '').replace(/\//g, '.html'); /* e.g. post-title.html */
@@ -43,6 +44,21 @@ function countPV(path, rows) {
 }
 
 
+function tacklePV(rows, path, elem, hasInit) {
+  var count = countPV(path, rows);
+  count = (count == 0 ? 1 : count);
+
+  if (!hasInit) {
+    elem.text(new Intl.NumberFormat().format(count));
+  } else {
+    var initCount = parseInt(elem.text().replace(/,/g, ''));
+    if (count > initCount) {
+      countUp(initCount, count, elem.attr('id'));
+    }
+  }
+}
+
+
 function displayPageviews(data) {
   if (data === undefined) {
     return;
@@ -54,70 +70,156 @@ function displayPageviews(data) {
   if ($("#post-list").length > 0) { // the Home page
     $(".post-preview").each(function() {
       var path = $(this).children("h1").children("a").attr("href");
-      var count = countPV(path, rows);
-      count = (count == 0 ? 1 : count);
-
-      if (!hasInit) {
-        $(this).find('.pageviews').text(count);
-      } else {
-        var initCount = parseInt($(this).find('.pageviews').text());
-        if (count > initCount) {
-          countUp(initCount, count, $(this).find('.pageviews').attr('id'));
-        }
-      }
+      tacklePV(rows, path, $(this).find('.pageviews'), hasInit);
     });
 
   } else if ($(".post").length > 0) { // the post
     var path = window.location.pathname;
-    var count = countPV(path, rows);
-    count = (count == 0 ? 1 : count);
-
-    if (!hasInit) {
-      $('#pv').text(count);
-    } else {
-      var initCount = parseInt($('#pv').text());
-      if (count > initCount) {
-        countUp(initCount, count, 'pv');
-      }
-    }
+    tacklePV(rows, path, $('#pv'), hasInit);
   }
-
 }
 
 
 var getInitStatus = (function() {
   var hasInit = false;
   return function() {
-    if (hasInit) {
-      return true;
-    } else {
+    let ret = hasInit;
+    if (!hasInit) {
       hasInit = true;
-      return false;
     }
+    return ret;
   }
 })();
 
 
+var PvCache = (function() {
+  const KEY_PV = "pv";
+  const KEY_CREATION = "pv-created-date";
+  const KEY_PV_TYPE = "pv-type";
+
+  var PvType = {
+    ORIGIN: "origin",
+    PROXY: "proxy"
+  };
+
+  function get(key) {
+    return localStorage.getItem(key);
+  }
+
+  function set(key, val) {
+    localStorage.setItem(key, val);
+  }
+
+  return {
+    getData: function() {
+      return JSON.parse(localStorage.getItem(KEY_PV) );
+    },
+    saveOriginCache: function(pv) {
+      set(KEY_PV, pv);
+      set(KEY_PV_TYPE, PvType.ORIGIN );
+      set(KEY_CREATION, new Date().toJSON() );
+    },
+    saveProxyCache: function(pv) {
+      set(KEY_PV, pv);
+      set(KEY_PV_TYPE, PvType.PROXY );
+      set(KEY_CREATION, new Date().toJSON() );
+    },
+    isOriginCache: function() {
+      return get(KEY_PV_TYPE) == PvType.ORIGIN;
+    },
+    isProxyCache: function() {
+      return get(KEY_PV_TYPE) == PvType.PROXY;
+    },
+    isExpired: function() {
+      if (PvCache.isOriginCache() ) {
+        let date = new Date(get(KEY_CREATION));
+        date.setDate(date.getDate() + 1); // fetch origin-data every day
+        return Date.now() >= date.getTime();
+
+      } else if (PvCache.isProxyCache() ) {
+        let date = new Date(get(KEY_CREATION) );
+        date.setHours(date.getHours() + 1); // proxy-data is updated every hour
+        return Date.now() >= date.getTime();
+      }
+      return false;
+    },
+    getAllPagevies: function() {
+      return PvCache.getData().totalsForAllResults["ga:pageviews"];
+    },
+    newerThan: function(pv) {
+      return PvCache.getAllPagevies() > pv.totalsForAllResults["ga:pageviews"];
+    }
+  };
+
+})(); // PvCache
+
+
+function fetchOriginPageviews(pvData) {
+  if (pvData === undefined) {
+    return;
+  }
+  displayPageviews(pvData);
+  PvCache.saveOriginCache(JSON.stringify(pvData));
+}
+
+
+function fetchProxyPageviews() {
+  let proxy = JSON.parse(proxyData); // see file '/assets/data/pv-data.json'
+  $.ajax({
+    type: 'GET',
+    url: proxy.url,
+    dataType: 'jsonp',
+    jsonpCallback: "displayPageviews",
+    success: function(data, textStatus, jqXHR) {
+      PvCache.saveProxyCache(JSON.stringify(data));
+    },
+    error: function(jqXHR, textStatus, errorThrown) {
+      console.log("Failed to load pageviews from proxy server: " + errorThrown);
+    }
+  });
+}
+
+
 $(function() {
-  // load pageview if this page has .pageviews
+
   if ($('.pageviews').length > 0) {
 
-    // Get data from daily cache.
-    $.getJSON('/assets/data/pageviews.json', displayPageviews);
+    let cache = PvCache.getData();
 
-    $.getJSON('/assets/data/proxy.json', function(meta) {
-      $.ajax({
-        type: 'GET',
-        url: meta.proxyUrl,
-        dataType: 'jsonp',
-        jsonpCallback: "displayPageviews",
-        error: function(jqXHR, textStatus, errorThrown) {
-          console.log("Failed to load pageviews from proxy server: " + errorThrown);
+    if (cache) {
+      if (PvCache.isExpired()) {
+        if (PvCache.isProxyCache() ) {
+          let originPvData = pageviews ? JSON.parse(pageviews) : undefined;
+          if (originPvData) {
+            if (PvCache.newerThan(originPvData)) {
+              displayPageviews(cache);
+            } else {
+              fetchOriginPageviews(originPvData);
+            }
+          }
+
+          fetchProxyPageviews();
+
+        } else if (PvCache.isOriginCache() ) {
+          fetchOriginPageviews(originPvData);
+          fetchProxyPageviews();
         }
-      });
 
-    });
+      } else { // still valid
+        displayPageviews(cache);
 
-  } // endif
+        if (PvCache.isOriginCache() ) {
+          fetchProxyPageviews();
+        }
 
-});
+      }
+
+    } else {
+      let originPvData = pageviews ? JSON.parse(pageviews) : undefined;
+      fetchOriginPageviews(originPvData);
+      fetchProxyPageviews();
+    }
+
+  }
+
+});

assets/js/_src/tooltip-loader.js

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

assets/js/dist/_commons/copy-link.min.js

@@ -0,0 +1 @@
+function copyLink(a){if(!a||0===a.length){a=window.location.href}var b=$("<input>");$("body").append(b);b.val(a).select();document.execCommand("copy");b.remove();alert("Link copied successfully!")};

assets/js/dist/_commons/search-display.min.js

@@ -1 +1 @@
-$(function(){var j=$("#sidebar-trigger");var o=$("#search-trigger");var h=$("#search-wrapper + a");var b=$("#search-cleaner");var e=$("#main");var c=$("#topbar-title");var k=$("#search-wrapper");var i=$("#search-result-wrapper");var g=$("#search-results");var l=$("#search-input");var a=$("#search-hints");var d=(function(){var p=0;return{block:function(){p=$(window).scrollTop();$("body").addClass("no-scroll")},release:function(){$("body").removeClass("no-scroll");$("html,body").scrollTop(p)},getOffset:function(){return p}}})();var m=(function(){return{on:function(){j.addClass("unloaded");c.addClass("unloaded");o.addClass("unloaded");k.addClass("d-flex");h.addClass("loaded")},off:function(){h.removeClass("loaded");k.removeClass("d-flex");j.removeClass("unloaded");c.removeClass("unloaded");o.removeClass("unloaded")}}})();var n=(function(){var p=false;return{on:function(){if(!p){i.removeClass("unloaded");e.addClass("hidden");p=true;d.block()}},off:function(){if(p){g.empty();if(a.hasClass("unloaded")){a.removeClass("unloaded")}i.addClass("unloaded");b.removeClass("visable");e.removeClass("hidden");l.val("");p=false;d.release()}},isVisable:function(){return p}}})();function f(){return h.hasClass("loaded")}o.click(function(){m.on();n.on();l.focus()});h.click(function(){m.off();n.off()});l.focus(function(){k.addClass("input-focus")});l.focusout(function(){k.removeClass("input-focus")});l.on("keyup",function(p){if(p.keyCode==8&&l.val()==""){if(!f()){n.off()}else{a.removeClass("unloaded")}}else{if(l.val()!=""){n.on();if(!b.hasClass("visible")){b.addClass("visable")}if(f()){a.addClass("unloaded")}}}});b.on("click",function(){l.val("");if(f()){a.removeClass("unloaded");g.empty()}else{n.off()}l.focus();b.removeClass("visable")})});
+$(function(){var j=$("#sidebar-trigger");var o=$("#search-trigger");var h=$("#search-cancel");var b=$("#search-cleaner");var e=$("#main");var c=$("#topbar-title");var k=$("#search-wrapper");var i=$("#search-result-wrapper");var g=$("#search-results");var l=$("#search-input");var a=$("#search-hints");var d=(function(){var p=0;return{block:function(){p=$(window).scrollTop()},release:function(){$("html,body").scrollTop(p)},getOffset:function(){return p}}})();var m=(function(){return{on:function(){j.addClass("unloaded");c.addClass("unloaded");o.addClass("unloaded");k.addClass("d-flex");h.addClass("loaded")},off:function(){h.removeClass("loaded");k.removeClass("d-flex");j.removeClass("unloaded");c.removeClass("unloaded");o.removeClass("unloaded")}}})();var n=(function(){var p=false;return{on:function(){if(!p){i.removeClass("unloaded");e.addClass("hidden");p=true;d.block()}},off:function(){if(p){g.empty();if(a.hasClass("unloaded")){a.removeClass("unloaded")}i.addClass("unloaded");b.removeClass("visable");e.removeClass("hidden");l.val("");p=false;d.release()}},isVisable:function(){return p}}})();function f(){return h.hasClass("loaded")}o.click(function(){m.on();n.on();l.focus()});h.click(function(){m.off();n.off()});l.focus(function(){k.addClass("input-focus")});l.focusout(function(){k.removeClass("input-focus")});l.on("keyup",function(p){if(p.keyCode==8&&l.val()==""){if(!f()){n.off()}else{a.removeClass("unloaded")}}else{if(l.val()!=""){n.on();if(!b.hasClass("visible")){b.addClass("visable")}if(f()){a.addClass("unloaded")}}}});b.on("click",function(){l.val("");if(f()){a.removeClass("unloaded");g.empty()}else{n.off()}l.focus();b.removeClass("visable")})});

assets/js/dist/_commons/sidebar.min.js

@@ -1 +1 @@
-$(function(){var d=false;$("#sidebar-trigger").click(function(){if(d==false){$("#sidebar").addClass("sidebar-expand");b();d=true}});$("#mask").click(function(){$("#sidebar").removeClass("sidebar-expand");c();d=false});var a=(function(e){var f;return{afterOpen:function(){f=document.scrollingElement.scrollTop;document.body.classList.add(e);document.body.style.top=-f+"px"},beforeClose:function(){document.body.classList.remove(e);document.scrollingElement.scrollTop=f;document.body.style.top=""}}})("no-scroll");function b(){a.afterOpen()}function c(){a.beforeClose()}});
+$(function(){var a=(function(){const c="sidebar-display";var d=false;var b=$("body");return{toggle:function(){if(d==false){b.attr(c,"")}else{b.removeAttr(c)}d=!d}}})();$("#sidebar-trigger").click(a.toggle);$("#mask").click(a.toggle)});

assets/js/dist/_commons/tooltip.min.js

@@ -1 +0,0 @@
-$(function(){$('[data-toggle="tooltip"]').tooltip({placement:"auto"})});

assets/js/dist/commons.js

@@ -9,4 +9,4 @@
 {% include_relative _commons/sidebar.min.js %}
 {% include_relative _commons/topbar-switch.min.js %}
 {% include_relative _commons/topbar-title.min.js %}
-{% include_relative _commons/tooltip.min.js %}
+{% include_relative _commons/copy-link.min.js %}

assets/js/dist/pageviews.min.js

@@ -1 +1 @@
-function countUp(c,a,b){if(c<a){var d=new CountUp(b,c,a);if(!d.error){d.start()}else{console.error(d.error)}}}function countPV(f,e){var g=f.replace(/\/posts\//g,"").replace(/\//g,".html");var d=0;var c=f.replace(/posts\//g,"");for(var b=0;b<e.length;++b){var a=e[b][0];if(a==f||a==c||a.concat("/")==c||a.slice(a.lastIndexOf("/")+1)===g){d+=parseInt(e[b][1])}}return d}function displayPageviews(e){if(e===undefined){return}var b=getInitStatus();var d=e.rows;if($("#post-list").length>0){$(".post-preview").each(function(){var i=$(this).children("h1").children("a").attr("href");var h=countPV(i,d);h=(h==0?1:h);if(!b){$(this).find(".pageviews").text(h)}else{var g=parseInt($(this).find(".pageviews").text());if(h>g){countUp(g,h,$(this).find(".pageviews").attr("id"))}}})}else{if($(".post").length>0){var f=window.location.pathname;var c=countPV(f,d);c=(c==0?1:c);if(!b){$("#pv").text(c)}else{var a=parseInt($("#pv").text());if(c>a){countUp(a,c,"pv")}}}}}var getInitStatus=(function(){var a=false;return function(){if(a){return true}else{a=true;return false}}})();$(function(){if($(".pageviews").length>0){$.getJSON("/assets/data/pageviews.json",displayPageviews);$.getJSON("/assets/data/proxy.json",function(a){$.ajax({type:"GET",url:a.proxyUrl,dataType:"jsonp",jsonpCallback:"displayPageviews",error:function(b,d,c){console.log("Failed to load pageviews from proxy server: "+c)}})})}});
+function countUp(b,a,d){if(b<a){var c=new CountUp(d,b,a);if(!c.error){c.start()}else{console.error(c.error)}}}function countPV(f,e){var g=f.replace(/\/posts\//g,"").replace(/\//g,".html");var d=0;var c=f.replace(/posts\//g,"");for(var b=0;b<e.length;++b){var a=e[b][0];if(a==f||a==c||a.concat("/")==c||a.slice(a.lastIndexOf("/")+1)===g){d+=parseInt(e[b][1])}}return d}function tacklePV(e,f,d,b){var c=countPV(f,e);c=(c==0?1:c);if(!b){d.text(new Intl.NumberFormat().format(c))}else{var a=parseInt(d.text().replace(/,/g,""));if(c>a){countUp(a,c,d.attr("id"))}}}function displayPageviews(c){if(c===undefined){return}var a=getInitStatus();var b=c.rows;if($("#post-list").length>0){$(".post-preview").each(function(){var e=$(this).children("h1").children("a").attr("href");tacklePV(b,e,$(this).find(".pageviews"),a)})}else{if($(".post").length>0){var d=window.location.pathname;tacklePV(b,d,$("#pv"),a)}}}var getInitStatus=(function(){var a=false;return function(){let ret=a;if(!a){a=true}return ret}})();var PvCache=(function(){const e="pv";const b="pv-created-date";const d="pv-type";var c={ORIGIN:"origin",PROXY:"proxy"};function a(g){return localStorage.getItem(g)}function f(g,h){localStorage.setItem(g,h)}return{getData:function(){return JSON.parse(localStorage.getItem(e))},saveOriginCache:function(g){f(e,g);f(d,c.ORIGIN);f(b,new Date().toJSON())},saveProxyCache:function(g){f(e,g);f(d,c.PROXY);f(b,new Date().toJSON())},isOriginCache:function(){return a(d)==c.ORIGIN},isProxyCache:function(){return a(d)==c.PROXY},isExpired:function(){if(PvCache.isOriginCache()){let date=new Date(a(b));date.setDate(date.getDate()+1);return Date.now()>=date.getTime()}else{if(PvCache.isProxyCache()){let date=new Date(a(b));date.setHours(date.getHours()+1);return Date.now()>=date.getTime()}}return false},getAllPagevies:function(){return PvCache.getData().totalsForAllResults["ga:pageviews"]},newerThan:function(g){return PvCache.getAllPagevies()>g.totalsForAllResults["ga:pageviews"]}}})();function fetchOriginPageviews(a){if(a===undefined){return}displayPageviews(a);PvCache.saveOriginCache(JSON.stringify(a))}function fetchProxyPageviews(){let proxy=JSON.parse(proxyData);$.ajax({type:"GET",url:proxy.url,dataType:"jsonp",jsonpCallback:"displayPageviews",success:function(b,c,a){PvCache.saveProxyCache(JSON.stringify(b))},error:function(a,c,b){console.log("Failed to load pageviews from proxy server: "+b)}})}$(function(){if($(".pageviews").length>0){let cache=PvCache.getData();if(cache){if(PvCache.isExpired()){if(PvCache.isProxyCache()){let originPvData=pageviews?JSON.parse(pageviews):undefined;if(originPvData){if(PvCache.newerThan(originPvData)){displayPageviews(cache)}else{fetchOriginPageviews(originPvData)}}fetchProxyPageviews()}else{if(PvCache.isOriginCache()){fetchOriginPageviews(originPvData);fetchProxyPageviews()}}}else{displayPageviews(cache);if(PvCache.isOriginCache()){fetchProxyPageviews()}}}else{let originPvData=pageviews?JSON.parse(pageviews):undefined;fetchOriginPageviews(originPvData);fetchProxyPageviews()}}});

assets/js/dist/tooltip-loader.min.js

@@ -0,0 +1 @@
+$(function(){$('[data-toggle="tooltip"]').tooltip()});

docs/README_zh-CN.md

@@ -1,14 +1,26 @@
-# Jekyll Theme Chirpy
+# Chirpy
+
+🌏 [English](../README.md) • 简体中文
 
 [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=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-%23FF4D5B.svg)](https://996.icu)
 
-Language: [English](../README.md) | 简体中文
+一个不一样的响应式设计 Jekyll 主题（内附神秘工具），采用响应式设计，方便记录、管理、分享你的知识和经验。
 
-一个不一样的 Jekyll 主题（内附神秘工具），采用响应式设计，方便记录、管理、分享你的知识和经验。
+[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
 
-**功能一览**
+## 目录
+
+* [功能预览](#功能预览)
+* [安装](#安装)
+* [运行指南](#运行指南)
+* [参与贡献](#参与贡献)
+* [感谢](#感谢)
+* [赞助](#赞助)
+* [许可证书](#许可证书)
+
+## 功能预览
 
 * 自动暗夜模式
 * 文章最后修改日期
@@ -24,26 +36,14 @@ Language: [English](../README.md) | 简体中文
 * SEO 优化
 * 网站性能优化
 
-[**在线体验** »](https://chirpy.cotes.info)
-
-![devices-mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)
-
-## 目录
-
-* [安装](#安装)
-* [运行指南](#运行指南)
-* [参与贡献](#参与贡献)
-* [感谢](#感谢)
-* [赞助](#赞助)
-* [许可证书](#许可证书)
 
 ## 安装
 
 ### 准备工作
 
-按照 [Jekyll 官方文档](https://jekyllrb.com/docs/installation/) 完成基础环境的安装 (Ruby，RubyGem，Bundler 和 Jekyll)。为了使用项目内免费提供的脚本工具，你还需要安装 [Python](https://www.python.org/downloads/)( >= 3.5) 和 [ruamel.yaml](https://pypi.org/project/ruamel.yaml/)。
+按照 [Jekyll 官方文档](https://jekyllrb.com/docs/installation/) 完成基础环境的安装 (Ruby，RubyGem，Bundler 和 Jekyll)。
 
-如果你的机器系统是 Debian 或者 macOS，则需要确保安装了 [GNU coreutils](https://www.gnu.org/software/coreutils/)。否则，通过以下方式获得：
+为了使用项目内免费提供的脚本工具提升你的写作体验，如果你的机器系统是 Debian 或者 macOS，则需要确保安装了 [GNU coreutils](https://www.gnu.org/software/coreutils/)。否则，通过以下方式获得：
 
 * Debian
 
@@ -60,16 +60,16 @@ Language: [English](../README.md) | 简体中文
 接着，[fork](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 一份代码，然后克隆你 Fork 的仓库到本地机器上。
 
 ```console
-$ git clone git@github.com:USER/jekyll-theme-chirpy.git
+$ git clone git@github.com:USER/jekyll-theme-chirpy.git -b master
 ```
 
-`USER` 替换为你的 GitHub username。
+把上述的`USER` 替换为你的 GitHub username。
 
 
 
 ### 安装 Jekyll 插件
 
-在根目录下运行:
+本地首次运行或编译，请在项目根目录下运行:
 
 ```terminal
 $ bundle install

feed.xml

@@ -30,8 +30,8 @@ layout: compress
     <title>{{ post.title }}</title>
     <link href="{{ post_absolute_url }}" rel="alternate" type="text/html" title="{{ post.title }}" />
     <published>{{ post.date | date_to_xmlschema }}</published>
-  {% if post.lastmod %}
-    <updated>{{ post.lastmod | date_to_xmlschema }}</updated>
+  {% if post.seo.date_modified %}
+    <updated>{{ post.seo.date_modified | date_to_xmlschema }}</updated>
   {% else %}
     <updated>{{ site.time | date_to_xmlschema }}</updated>
   {% endif %}
@@ -50,7 +50,10 @@ layout: compress
   {% if post.summary %}
     <summary>{{ post.summary | strip }}</summary>
   {% else %}
-    <summary>{{ post.content | strip_html | truncate: 200 }}</summary>
+    <summary>
+      {% assign content = post.content %}
+      {% include no-linenos.html %}
+      {{ content | strip_html | truncate: 200 }}</summary>
   {% endif %}
 
   </entry>

sitemap.xml

@@ -10,22 +10,11 @@ layout: compress
 
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
 {% for post in site.posts %}
-  {% unless post.published == false %}
-
-    {% capture lastmod %}
-      {% if post.lastmod %}
-        {{ post.lastmod }}
-      {% elsif post.date %}
-          {{ post.date }}
-        {% else %}
-          {{ site.time }}
-        {% endif %}
-      {% endcapture %}
-
   <url>
     <loc>{{ site.url | append: site.baseurl | append: post.url }}</loc>
-    <lastmod>{{ lastmod | date_to_xmlschema }}</lastmod>
+    <lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
 
     {% if post.sitemap.changefreq %}
       <changefreq>{{ post.sitemap.changefreq }}</changefreq>
@@ -39,7 +28,6 @@ layout: compress
       <priority>0.5</priority>
     {% endif %}
   </url>
-  {% endunless %}
 {% endfor %}
 
 {% for page in site.pages %}

sw.js

@@ -0,0 +1,62 @@
+---
+layout: compress
+# Chirpy v2.2
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# MIT Licensed
+---
+
+self.importScripts('{{ "/assets/data/cache-list.js" | relative_url }}');
+
+var cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M" }}';
+
+
+function isExcluded(url) {
+  for (const rule of exclude) {
+    if (url.indexOf(rule) != -1) {
+      return true;
+    }
+  }
+  return false;
+}
+
+
+self.addEventListener('install', (e) => {
+  self.skipWaiting();
+  e.waitUntil(
+    caches.open(cacheName).then((cache) => {
+      return cache.addAll(include);
+    })
+  );
+});
+
+
+self.addEventListener('fetch', (e) => {
+  e.respondWith(
+    caches.match(e.request).then((r) => {
+      /* console.log('[Service Worker] Fetching resource: ' + e.request.url); */
+      return r || fetch(e.request).then((response) => {
+        return caches.open(cacheName).then((cache) => {
+          if (!isExcluded(e.request.url)) {
+            /* console.log('[Service Worker] Caching new resource: ' + e.request.url); */
+            cache.put(e.request, response.clone());
+          }
+          return response;
+        });
+      });
+    })
+  );
+});
+
+
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then((keyList) => {
+          return Promise.all(keyList.map((key) => {
+        if(key !== cacheName) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});

tabs/categories.md

@@ -13,17 +13,19 @@ title: Categories
 {% for category in sort_categories %}
   {% assign category_name = category | first %}
   {% assign posts_of_category = category | last %}
-  {% assign first_post = posts_of_category[0] %}
+  {% assign first_post = posts_of_category | first %}
 
   {% if category_name == first_post.categories[0] %}
-    {% assign sub_categories = "" %}
+    {% assign sub_categories = "" | split: "" %}
+
     {% for post in posts_of_category %}
-      {% if post.categories.size > 1 %}
-        {% assign sub_categories = sub_categories | append: post.categories[1] | append: "|" %}
-      {% endif %}
+      {% assign second_category = post.categories[1] %}
+      {% unless sub_categories contains second_category %}
+        {% assign sub_categories = sub_categories | push: second_category %}
+      {% endunless %}
     {% endfor %}
 
-    {% assign sub_categories = sub_categories | split: "|" | uniq | sort %}
+    {% assign sub_categories = sub_categories | sort %}
     {% assign sub_categories_size = sub_categories | size %}
 
   <div class="card categories">
@@ -35,10 +37,11 @@ title: Categories
       {% else %}
         <i class="far fa-folder fa-fw"></i>
       {% endif %}
-        <a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase | url_encode }}/">{{ category_name }}</a>
+        <a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase | url_encode }}/"
+          class="ml-1 mr-2">{{ category_name }}</a>
         <!-- content count -->
         {% assign top_posts_size = site.categories[category_name] | size %}
-        <span class="text-muted small font-weight-light pl-2">
+        <span class="text-muted small font-weight-light">
         {% if sub_categories_size > 0 %}
           {{ sub_categories_size }}
           {% if sub_categories_size > 1 %}categories{% else %}category{% endif %},
@@ -65,9 +68,11 @@ title: Categories
       <ul class="list-group">
         {% for sub_category in sub_categories %}
         <li class="list-group-item">
-          <i class="far fa-folder fa-fw"></i>&nbsp;<a href="{{ site.baseurl }}/categories/{{ sub_category | replace: ' ', '-' | downcase | url_encode }}/">{{ sub_category }}</a>
+          <i class="far fa-folder fa-fw"></i>
+          <a href="{{ site.baseurl }}/categories/{{ sub_category | replace: ' ', '-' | downcase | url_encode }}/"
+            class="ml-1 mr-2">{{ sub_category }}</a>
           {% assign posts_size = site.categories[sub_category] | size %}
-          <span class="text-muted small font-weight-light pl-2">{{ posts_size }}
+          <span class="text-muted small font-weight-light">{{ posts_size }}
             post{% if posts_size > 1 %}s{% endif %}
           </span>
         </li>

tools/build.sh

@@ -17,7 +17,7 @@ CONTAINER=${WORK_DIR}/.container
 DEST=${WORK_DIR}/_site
 
 
-help() {
+_help() {
   echo "Usage:"
   echo
   echo "   bash build.sh [options]"
@@ -29,7 +29,7 @@ help() {
 }
 
 
-init() {
+_init() {
   cd $WORK_DIR
 
   if [[ -d $CONTAINER ]]; then
@@ -40,18 +40,19 @@ init() {
     jekyll clean
   fi
 
-  temp=$(mktemp -d)
-  cp -r * $temp
-  cp -r .git $temp
-  mv $temp $CONTAINER
+  local _temp=$(mktemp -d)
+  cp -r * $_temp
+  cp -r .git $_temp
+  mv $_temp $CONTAINER
 }
 
 
-build() {
+_build() {
   cd $CONTAINER
-
   echo "$ cd $(pwd)"
-  python _scripts/py/init_all.py
+
+  bash _scripts/sh/create_pages.sh
+  bash _scripts/sh/dump_lastmod.sh
 
   CMD+=" -d ${DEST}"
   echo "\$ $CMD"
@@ -70,10 +71,10 @@ build() {
 }
 
 
-check_unset() {
+_check_unset() {
   if [[ -z ${1:+unset} ]]
   then
-    help
+    _help
     exit 1
   fi
 }
@@ -85,36 +86,36 @@ main() {
     opt="$1"
     case $opt in
       -b|--baseurl)
-        check_unset $2
+        _check_unset $2
         if [[ $2 == \/* ]]
         then
           CMD+=" -b $2"
         else
-          help
+          _help
           exit 1
         fi
         shift
         shift
         ;;
       -d|--destination)
-        check_unset $2
+        _check_unset $2
         DEST=$(realpath $2)
         shift;
         shift;
         ;;
       -h|--help)
-        help
+        _help
         exit 0
         ;;
       *) # unknown option
-        help
+        _help
         exit 1
         ;;
     esac
   done
 
-  init
-  build
+  _init
+  _build
 }
 
 main "$@"

tools/init.sh

@@ -15,16 +15,26 @@ LASTMOD=false
 WORK_DIR=$(dirname $(dirname $(realpath "$0")))
 
 check_status() {
-  if [[ ! -z $(git status -s) ]]; then
-    echo "Warning: Commit the changes of the repository first."
-    git status -s
-    exit 1
-  fi
+  local _watching_dirs=(
+    "_post"
+    "_data")
+
+  for i in "${!_watching_dirs[@]}"
+  do
+    local _dir=${_watching_dirs[${i}]}
+    if [[ ! -z $(git status $_dir -s) ]]; then
+      echo "Warning: Commit the changes of the directory '$_dir' first."
+      git status -s | grep $_dir
+      exit 1
+    fi
+  done
 }
 
 
 update_files() {
-  python _scripts/py/init_all.py
+  bash _scripts/sh/create_pages.sh
+  bash _scripts/sh/dump_lastmod.sh
+
   find . | grep -E "(__pycache__|\.pyc|\.pyo$)" | xargs rm -rf
 }
 
@@ -49,8 +59,8 @@ commit() {
     TAGS=true
   fi
 
-  if [[ ! -z $(git status _posts -s) ]]; then
-    git add _posts/
+  if [[ ! -z $(git status _data -s) ]]; then
+    git add _data
     if [[ $CATEGORIES = true || $TAGS = true ]]; then
       msg+=","
     else

tools/js-compress.sh

@@ -58,6 +58,11 @@ function compress() {
     if [[ -d "$src" ]]; then
       compress $src $2 $item   # recursion
     else
+
+      if [[ -z $(git status $src -s) ]]; then
+        continue
+      fi
+
       if [[ ! -d "$2/${sub_dir}" ]]; then
         mkdir -p $2/${sub_dir}
       fi

tools/run.sh

@@ -21,7 +21,7 @@ cmd="bundle exec jekyll s"
 realtime=false
 
 
-help() {
+_help() {
   echo "Usage:"
   echo
   echo "   bash run.sh [options]"
@@ -36,13 +36,17 @@ help() {
 }
 
 
-cleanup() {
+_cleanup() {
+  if [[ -d _site || -d .jekyll-cache ]]; then
+    jekyll clean
+  fi
+
   rm -rf ${WORK_DIR}/${CONTAINER}
   ps aux | grep fswatch | awk '{print $2}' | xargs kill -9 > /dev/null 2>&1
 }
 
 
-init() {
+_init() {
 
   if [[ -d ${WORK_DIR}/${CONTAINER} ]]; then
     rm -rf ${WORK_DIR}/${CONTAINER}
@@ -53,19 +57,19 @@ init() {
   cp -r ${WORK_DIR}/.git $temp
   mv $temp ${WORK_DIR}/${CONTAINER}
 
-  trap cleanup INT
+  trap _cleanup INT
 }
 
 
-check_unset() {
+_check_unset() {
   if [[ -z ${1:+unset} ]]; then
-    help
+    _help
     exit 1
   fi
 }
 
 
-check_command() {
+_check_command() {
   if [[ -z $(command -v $1) ]]; then
     echo "Error: command '$1' not found !"
     echo "Hint: Get '$1' on <$2>"
@@ -75,10 +79,11 @@ check_command() {
 
 
 main() {
-  init
+  _init
 
   cd ${WORK_DIR}/${CONTAINER}
-  python _scripts/py/init_all.py
+  bash _scripts/sh/create_pages.sh
+  bash _scripts/sh/dump_lastmod.sh
 
   if [[ $realtime = true ]]; then
     fswatch -0 -e "\\$CONTAINER" -e "\.git" ${WORK_DIR} | xargs -0 -I {} bash ./${SYNC_TOOL} {} $WORK_DIR . &
@@ -94,24 +99,24 @@ do
   opt="$1"
   case $opt in
     -H|--host)
-      check_unset $2
+      _check_unset $2
       cmd+=" -H $2"
       shift # past argument
       shift # past value
       ;;
     -P|--port)
-      check_unset $2
+      _check_unset $2
       cmd+=" -P $2"
       shift
       shift
       ;;
     -b|--baseurl)
-      check_unset $2
+      _check_unset $2
       if [[ $2 == \/* ]]
       then
         cmd+=" -b $2"
       else
-        help
+        _help
         exit 1
       fi
       shift
@@ -122,20 +127,21 @@ do
       shift
       ;;
     -r|--realtime)
-      check_command fswatch 'http://emcrisostomo.github.io/fswatch/'
+      _check_command fswatch 'http://emcrisostomo.github.io/fswatch/'
       realtime=true
       shift
       ;;
     -h|--help)
-      help
+      _help
       exit 0
       ;;
     *)
       # unknown option
-      help
+      _help
       exit 1
       ;;
   esac
 done
 
+
 main