Merge branch 'hotfix/5.0.1'

`<a>` tags in headings are set to apply the style of `%anchor` in `module.scss` and `common.scss`.
Therefore, if I put a link in a heading, the link will have the same style as the anchor,
which means that the font size becomes smaller and the link will not be displayed unless I hover the mouse over it.
My suggestion is to set an `anchor` class for the `<a>` tag of the anchor and apply style settings to the `anchor` class, not to the `a` tag.

.github/CONTRIBUTING.md

@@ -1,16 +1,43 @@
 # How to Contribute
 
-I want to thank you for sparing a time to improve this project! Here are some guidelines for contributing：
+We want to thank you for sparing time to improve this project! Here are some guidelines for contributing：
 
-To ensure that the blog design is not confused, this project does not accept suggestions for design changes, such as color scheme, fonts, typography, etc. If your request is about an enhancement, it is recommended to first submit a [`Feature Request`](https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?labels=enhancement&template=feature_request.md) issue to discuss whether your idea fits the project. 
+To ensure that the blog design is not confused, this project does not accept suggestions for design changes, such as color scheme, fonts, typography, etc. If your request is about an enhancement, it is recommended to first submit a [_Feature Request_](https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?labels=enhancement&template=feature_request.md) issue to discuss whether your idea fits the project.
+
+## Basic Process
 
 Generally, contribute to the project by:
 
 1. Fork this project on GitHub and clone it locally.
-2. Create a new branch from `master` and give it a descriptive name (e.g., `my-new-feature`, `fix-a-bug`).
-3. After completing the development, commit and push to remote.
-4. Submit a new pull request.
+2. Create a new branch from the default branch and give it a descriptive name (e.g., `my-new-feature`, `fix-a-bug`).
+3. After completing the development, submit a new _Pull Request_.
+
+## Modifying JavaScript
+
+If your contribution involves JS modification, please read the following sections.
+
+### Inline Scripts
+
+If you need to add comments to the inline JS (the JS code between the tags `<script>` and `</script>`), please use `/**/` instead of two slashes `//`. Because the HTML will be compressed by [jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html) during deployment, but it cannot handle the `//` properly. And this will disrupt the structure of the compressed HTML.
+
+### External Scripts
+
+If you need to add or modify JavaScripts in the directory `_javascript`, you need to install [Gulp.js](https://gulpjs.com/docs/en/getting-started/quick-start).
+
+During development, real-time debugging can be performed through the following commands:
+
+```console
+$ bash tools/run.sh
+```
+
+Open another terminal tab and run:
+
+```console
+$ gulp dev # Type 'Ctrl + C' to stop
+```
+
+After debugging, run the command `gulp` (without any argument) will automatically output the compressed files to the directory `assests/js/dist/`.
 
 ---
 
-:tada: Your volunteering will make the open source world more beautiful, thanks again! :tada:
+:tada: Your volunteering will make the open-source world more beautiful, thanks again! :tada:

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -6,12 +6,15 @@ about: Create a report to help us improve
 <!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
 
 ## Checklist
-<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
-- [ ] I have read the [tutorials](https://chirpy.cotes.info/categories/tutorial/) and know the correct effect of the functional design.
-- [ ] There are no similar reports on existing issues (including closed ones).
-- [ ] I found the bug on the latest code of `master` branch.
+
+<!-- Please complete the following list of tasks, and then check it by changing the "[ ]" to "[x]" -->
+
+- [ ] I have read the [tutorials](https://cotes2020.github.io/chirpy-demo/categories/tutorial/) and know the correct effect of the functional design.
+- [ ] There are no similar reports on [existing issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue) (including closed ones).
+- [ ] I found the bug on the latest code of the `master` branch.
 
 ## Describe the bug
+
 <!-- A clear and concise description of what the bug is. -->
 
 ### To Reproduce
@@ -25,12 +28,15 @@ Steps to reproduce the behavior:
 -->
 
 ### Expected behavior
+
 <!-- A clear and concise description of what you expected to happen. -->
 
 ### Screenshots
+
 <!-- If applicable, add screenshots to help explain your problem. -->
 
 ### Software
+
 <!-- Please complete the following information -->
 - Ruby version: <!-- by running: `ruby -v` -->
 - Gem version: <!-- by running: `gem -v`-->
@@ -39,12 +45,14 @@ Steps to reproduce the behavior:
 - Theme version: <!-- by running: `gem list | grep jekyll-theme-chirpy` -->
 
 ### Desktop
+
 <!-- If necessary, uncomment and fill in the following list:
 - OS: [e.g. macOS 10.15.6]
 - Browser: [e.g. Chrome 85.0.4183.83 (64-bit)]
 -->
 
 ### Smartphone
+
 <!-- If necessary, uncomment and fill in the following list:
 - Device: [e.g. iPhone 6]
 - OS: [e.g. iOS 13.6.1]
@@ -52,4 +60,5 @@ Steps to reproduce the behavior:
 -->
 
 ### Additional context
+
 <!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,24 +7,29 @@ labels: enhancement
 <!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
 
 ## Checklist
-<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+
+<!-- Please complete the following list of tasks, and then check it by changing the "[ ]" to "[x]" -->
 - [ ] I have read the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/CONTRIBUTING.md).
-- [ ] There are no similar request on existing issues (including closed ones).
+- [ ] There is no similar request on [existing issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue) (including closed ones).
 - [ ] I have read the [project progress](https://github.com/cotes2020/jekyll-theme-chirpy/projects) and know the current progress of the project.
 - [ ] I was in the `master` branch of the latest code.
 
 
 ## Is your feature request related to a problem? Please describe
+
 <!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
 
 
 ## Describe the solution you'd like
+
 <!-- A clear and concise description of what you want to happen. -->
 
 
 ## Describe alternatives you've considered
+
 <!-- A clear and concise description of any alternative solutions or features you've considered. -->
 
 
 ## Additional context
+
 <!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/question.md

@@ -1,6 +1,6 @@
 ---
 name: Question
-about: Ask what ever you want
+about: Ask whatever you want
 labels: question
 ---
 
@@ -8,12 +8,13 @@ labels: question
 
 ## Checklist
 
-<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+<!-- Please complete the following list of tasks, and then check it by changing the "[ ]" to "[x]" -->
 
-- [ ] I have read the [tutorials](https://chirpy.cotes.info/categories/tutorial/) and know the correct effect of the functional design.
-- [ ] There are no similar question on existing issues (including closed ones).
-- [ ] I searched the Internet for related problems, but still couldn't solve it.
-- [ ] My question is based on the latest code of `master` branch.
+- [ ] I have read the [newlest tutorials](https://cotes2020.github.io/chirpy-demo/categories/tutorial/) and know the correct effect of the functional design.
+- [ ] There is no similar question on [existing issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue) (including closed ones).
+- [ ] I have tried to find the answer on [Jekyll Forum](https://talk.jekyllrb.com/) and [StackOverflow](https://stackoverflow.com/questions/tagged/jekyll).
+- [ ] My question is based on the latest code of the `master` branch.
 
 ## Description
+
 <!-- Please describe your question in detail. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -29,16 +29,14 @@ Please describe the tests that you ran to verify your changes. Provide instructi
 
 - Browser type & version:
 - Operating system:
-- Bundler version:
-- Ruby version:
-- Jekyll version:
+- Ruby version: <!-- by running: `ruby -v` -->
+- Bundler version: <!-- by running: `bundle -v`-->
+- Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->
 
 ### Checklist
+
 <!-- Select checkboxes by change the "[ ]" to "[x]" -->
-- [ ] My code follows the [Google style guidelines](https://google.github.io/styleguide/)
-- [ ] I have performed a self-review of my own code
-- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have performed a self-review of my code
+- [ ] I have commented on my code, particularly in hard-to-understand areas
 - [ ] I have made corresponding changes to the documentation
 - [ ] My changes generate no new warnings
-- [ ] I have added tests that prove my fix is effective or that my feature works
-- [ ] Any dependent changes have been merged and published in downstream modules

.nojekyll

@@ -0,0 +1 @@
+

.travis.yml

@@ -3,7 +3,9 @@ dist: bionic
 
 language: minimal
 
-if: tag =~ /^v(\d)+(\.(\d)+){2}$/
+branches:
+  only:
+    - /^release\/(\d)+(\.(\d)+){1}$/
 
 jobs:
   include:

README.md

@@ -1,124 +1,66 @@
-<div align="right">
-
-  EN /
-  [中文(简体)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md)
-
-</div>
-
 <div align="center">
 
   # Chirpy Jekyll Theme
 
+  A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
+
   [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
   [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
-  [![Codacy Badge](https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b)](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
+  [![Codacy Badge](https://app.codacy.com/project/badge/Grade/4e556876a3c54d5e8f2d2857c4f43894)](https://www.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=cotes2020/jekyll-theme-chirpy&amp;utm_campaign=Badge_Grade)
   [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
   [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
-  A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
+  [**Live Demo →**](https://cotes2020.github.io/chirpy-demo)
 
-  **[Live Demo →](https://chirpy.cotes.info)**
-
-  [![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/commons/devices-mockup.png)](https://chirpy.cotes.info)
+  [![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@f4e0354b674f65a53b8917f0f786ed2956898cc1/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
 
 </div>
 
 ## Features
 
 - Localized Layout
-- Configurable Theme Mode
+- Dark/Light Theme Mode
 - Pinned Posts
 - Hierarchical Categories
 - Last Modified Date for Posts
 - Table of Contents
-- Automatically Recommend Related Posts
+- Auto-generated Related Posts
 - Syntax Highlighting
 - Mathematical Expressions
 - Mermaid Diagram & Flowchart
+- Disqus/Utterances Comments
 - Search
 - Atom Feeds
-- Disqus Comments
 - Google Analytics
-- GA Pageviews Reporting (Advanced)
+- GA Pageviews Reporting
 - SEO & Performance Optimization
 
-## Prerequisites
 
-Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
+## Quick Start
 
-## Installation
+Before starting, please follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`.
 
-### Creating a New Site
+### Step 1. Creating a New Site
 
-There are two ways to create a new repository for this theme:
+Create a new repository from the [**Chirpy Starter**](https://github.com/cotes2020/chirpy-starter/generate) and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.
 
-- **[Using the Chirpy Starter](#option-1-using-the-chirpy-starter)** - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
+### Step 2. Installing Dependencies
 
-- **[Forking on GitHub](#option-2-forking-on-github)** - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
-
-#### Option 1. Using the Chirpy Starter
-
-Create a new repository from the [**Chirpy Starter**][use-starter] and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.
-
-#### Option 2. Forking on GitHub
-
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and rename it to `<GH_USERNAME>.github.io`. Please note that the default branch code is in development.  If you want the site to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.
-
-And then execute:
-
-```console
-$ bash tools/init.sh
-```
-
-> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
-
-The above command will:
-
-1. Removes some files or directories from your repository:
-    - `.travis.yml`
-    - files under `_posts`
-    - folder `docs`
-
-2. If the option `--no-gh` is provided, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
-
-3. Removes item `Gemfile.lock` from `.gitignore`.
-
-4. Creates a new commit to save the changes automatically.
-
-### Installing Dependencies
-
-Before running for the first time, go the root directory of your site, and install dependencies as follows:
+Before running for the first time, go to the root directory of your site, and install dependencies as follows:
 
 ```console
 $ bundle
 ```
 
-## Usage
+### Step 3. Running Local Server
 
-### Configuration
-
-Update the variables of `_config.yml` as needed. Some of them are typical options:
-
-- `url`
-- `avatar`
-- `timezone`
-- `lang`
-
-### Customing Stylesheet
-
-If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
-
-Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
-
-### Running Local Server
-
-You may want to preview the site contents before publishing, so just run it by:
+Run the following command in the root directory of the site:
 
 ```console
 $ bundle exec jekyll s
 ```
 
-Or run the site on Docker with the following command:
+Or run with Docker:
 
 ```console
 $ docker run -it --rm \
@@ -129,96 +71,19 @@ $ docker run -it --rm \
 
 After a while, the local service will be published at _<http://127.0.0.1:4000>_.
 
-### Deployment
-
-Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash, e.g, `/project-name`.
-
-Now you can choose ONE of the following methods to deploy your Jekyll site.
-
-#### Deploy by Using Github Actions
-
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GitHub Pages service.
-
-Quickly check the files needed for GitHub Actions build:
-
-- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
-
-- Ensure your Jekyll site has file `tools/deploy.sh`. Otherwise, copy it from here to your Jekyll site.
-
-- Furthermore, if you have committed `Gemfile.lock` to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lockfile:
-
-  ```console
-  $ bundle lock --add-platform x86_64-linux
-  ```
-
-After the above steps, rename your repository to `<GH_USERNAME>.github.io` on GitHub.
-
-Now publish your Jekyll site by:
-
-1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
-
-2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving.
-
-    ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/posts/20190809/gh-pages-sources.png)
-
-3. Visit your website at the address indicated by GitHub.
-
-#### Manually Build and Deploy
-
-On self-hosted servers, you cannot enjoy the convenience of **GitHub Actions**. Therefore, you should build the site on your local machine and then upload the site files to the server.
-
-Go to the root of the source project, and build your site as follows:
-
-```console
-$ JEKYLL_ENV=production bundle exec jekyll b
-```
-
-Or build the site on Docker:
-
-```console
-$ docker run -it --rm \
-    --env JEKYLL_ENV=production \
-    --volume="$PWD:/srv/jekyll" \
-    jekyll/jekyll \
-    jekyll build
-```
-
-Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to the target server.
-
-### Upgrading
-
-It depends on how you use the theme:
-
-- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`), editing the `Gemfile` and update the version number of the them gem, for example:
-    ```diff
-    - gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
-    + gem "jekyll-theme-chirpy", "~> 3.3", ">= 3.3.0"
-    ```
-
-    And then execute the following command:
-
-    ```console
-    $ bundle update jekyll-theme-chirpy
-    ```
-
-    As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme.
-
-- If you forked from the source project (there will be `gemspec` in the `Gemfile` of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade.
-The merge is likely to conflict with your local modifications. Please be patient and careful to resolve these conflicts.
-
 ## Documentation
 
-For more details and a better reading experience, please check out the [tutorials on the demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Please note that the tutorials on the demo website or Wiki are based on the latest release, and the features of `master` branch usually ahead of the documentation.
+For more details on usage, please refer to the tutorial on the [demo website](https://cotes2020.github.io/chirpy-demo/). At the same time, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Please note that the tutorial is based on the [latest release](https://github.com/cotes2020/jekyll-theme-chirpy/releases), and the features of the default branch are usually ahead of the documentation.
 
 ## Contributing
 
-The old saying, "Two heads are better than one." Consequently, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
+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). The avatar and favicon design comes from [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/).
+This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files). The avatar and favicon design come from [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/).
 
-:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas, or inspired me to write more readable documentation.
+:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
 
 Last but not least, thank [JetBrains][jb] for providing the open source license.
 
@@ -226,7 +91,7 @@ Last but not least, thank [JetBrains][jb] for providing the open source license.
 
 If you like this theme or find it helpful, please consider sponsoring me, because it will encourage and help me better maintain the project, I will be very grateful!
 
-[![Buy Me a Coffee](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ff813f?logo=buy-me-a-coffee&logoColor=white)](https://www.buymeacoffee.com/coteschung)
+[![Ko-fi](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ff5f5f?logo=ko-fi&logoColor=white)](https://ko-fi.com/coteschung)
 [![Wechat Pay](https://img.shields.io/badge/-Tip%20Me%20on%20WeChat-brightgreen?logo=wechat&logoColor=white)][cn-donation]
 [![Alipay](https://img.shields.io/badge/-Tip%20Me%20on%20Alipay-blue?logo=alipay&logoColor=white)][cn-donation]
 
@@ -234,13 +99,6 @@ If you like this theme or find it helpful, please consider sponsoring me, becaus
 
 This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
 
-[starter]: https://github.com/cotes2020/chirpy-starter
-[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
-[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
-[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
-[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
-[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags
-
 <!-- ReadMe links -->
 
 [jb]: https://www.jetbrains.com/?from=jekyll-theme-chirpy

_config.yml

@@ -79,7 +79,7 @@ theme_mode:   # [light|dark]
 # will be added to all image (site avatar & posts' images) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: 'https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5'
+img_cdn: 'https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@f4e0354b674f65a53b8917f0f786ed2956898cc1'
 
 # the avatar on sidebar, support local or CORS resources
 avatar: '/commons/avatar.jpg'
@@ -87,9 +87,15 @@ avatar: '/commons/avatar.jpg'
 # boolean type, the global switch for ToC in posts.
 toc: true
 
-disqus:
-  comments: false  # boolean type, the global switch for posts comments.
-  shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
+comments:
+  active:         # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
+  # The active options are as follows:
+  disqus:
+    shortname:    # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
+  # utterances settings › https://utteranc.es/
+  utterances:
+    repo:         # <gh-username>/<repo>
+    issue_term:   # < url | pathname | title | ...>
 
 paginate: 10
 
@@ -111,7 +117,6 @@ collections:
     output: true
     sort_by: order
 
-
 defaults:
   -
     scope:
@@ -136,7 +141,6 @@ defaults:
     values:
       layout: page
       permalink: /:title/
-      dynamic_title: true    # Hide title in mobile screens.
 
 sass:
   style: compressed
@@ -159,7 +163,7 @@ exclude:
   - LICENSE
   - gulpfile.js
   - node_modules
-  - '*.json'
+  - package*.json
 
 jekyll-archives:
   enabled: [categories, tags]

_data/locales/en.yml

@@ -59,7 +59,8 @@ not_found:
 # ----- Posts related labels -----
 
 post:
-  published: 'on'
+  written_by: By
+  posted: Posted
   updated: Updated
   timeago:
     day: days ago

_data/locales/id-ID.yml

@@ -59,7 +59,8 @@ not_found:
 # ----- Posts related labels -----
 
 post:
-  published: "pada"
+  written_by: Oleh
+  posted: Diterbitkan
   updated: Diperbarui
   timeago:
     day: hari yang lalu

_data/locales/ko-KR.yml

@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: 포스트
+  category: 카테고리
+  tag: 태그
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: 홈
+  categories: 카테고리
+  tags: 태그
+  archives: 아카이브
+  about: 정보
+
+# the text displayed in the search bar & search results
+search:
+  hint: 검색
+  cancel: 취소
+  no_results: 검색 결과가 없습니다.
+
+panel:
+  lastmod: 최근 업데이트
+  trending_tags: 인기 태그
+  toc: 바로가기
+
+#  The liquid date format › http://strftime.net/
+date_format:
+  tooltip: '%F, %R %z'
+  post:
+    long: '%Y년 %m월 %d일'
+    short: '%m월 %d일'
+    archive_month: '%b월'
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: 이 기사는 저작권자의 :LICENSE_NAME 라이센스를 따릅니다.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: 일부 권리 보유
+  verbose: >-
+    명시되지 않는 한 이 사이트의 블로그 게시물은 작성자의
+    Creative Commons Attribution 4.0 International(CC BY 4.0) 라이선스에 따라 사용이 허가되었습니다.
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: 해당 URL은 존재하지 않습니다.
+  hint_template: :HEAD_BAK을 눌러 다시 찾거나 :ARCHIVES_PAGE에서 검색해 주세요.
+  head_back: 홈으로 돌아가기
+  archives_page: 아카이브 페이지
+
+# ----- Posts related labels -----
+
+post:
+  written_by: By
+  posted: 게시
+  updated: 업데이트
+  timeago:
+    day: 일 전
+    hour: 시간 전
+    minute: 분 전
+    just_now: 방금
+  words: 단어
+  pageview_measure: 조회
+  read_time:
+    unit: 분
+    prompt: 읽는 시간
+  relate_posts: 관련된 글
+  share: 공유하기
+  button:
+    next: 다음 글
+    previous: 이전 글
+    copy_code:
+      succeed: 복사되었습니다!
+    share_link:
+      title: 링크 복사하기
+      succeed: 링크가 복사되었습니다!
+  # pinned prompt of posts list on homepage
+  pin_prompt: 핀
+
+# categories page
+categories:
+  category_measure: 카테고리
+  post_measure: 포스트

_data/locales/zh-CN.yml

@@ -58,7 +58,8 @@ not_found:
 # ----- Posts related labels -----
 
 post:
-  published: 发表于
+  written_by: 作者
+  posted: 发表于
   updated: 更新于
   timeago:
     day: 天前

_includes/comments.html

@@ -0,0 +1,5 @@
+<!--  The comments switcher -->
+{% if page.comments and site.comments.active %}
+  {% capture path %}comments/{{ site.comments.active }}.html{% endcapture %}
+  {% include {{ path }} %}
+{% endif %}

_includes/comments/disqus.html

@@ -1,7 +1,6 @@
 <!--
   The Disqus lazy loading.
 -->
-
 <div id="disqus_thread" class="pt-2 pb-2">
   <p class="text-center text-muted small">
     Comments powered by <a href="https://disqus.com/">Disqus</a>.
@@ -9,6 +8,7 @@
 </div>
 
 <script type="text/javascript">
+
   var disqus_config = function () {
     this.page.url = '{{ page.url | absolute_url }}';
     this.page.identifier = '{{ page.url }}';
@@ -20,7 +20,7 @@
     if(entries[0].isIntersecting) {
         (function () {
             var d = document, s = d.createElement('script');
-            s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+            s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
             s.setAttribute('data-timestamp', +new Date());
             (d.head || d.body).appendChild(s);
         })();
@@ -46,8 +46,8 @@
 
   const modeToggle = document.querySelector(".mode-toggle");
 
-  if (modeToggle !== null) {
-    modeToggle.addEventListener('click', reloadDisqus);
+  if (typeof modeToggle !== "undefined") {
+    /*  modeToggle.addEventListener('click', reloadDisqus); // not pretty for 'color-scheme'  */
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
   }
 

_includes/comments/utterances.html

@@ -0,0 +1,51 @@
+<!-- https://utteranc.es/ -->
+<script src="https://utteranc.es/client.js"
+        repo="{{ site.comments.utterances.repo }}"
+        issue-term="{{ site.comments.utterances.issue_term }}"
+        crossorigin="anonymous"
+        async>
+</script>
+
+<script type="text/javascript">
+  $(function() {
+    const origin = "https://utteranc.es";
+    const iframe = "iframe.utterances-frame";
+    const lightTheme = "github-light";
+    const darkTheme = "github-dark";
+    let initTheme = lightTheme;
+
+    if ($("html[mode=dark]").length > 0
+        || ($("html[mode]").length == 0
+            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+      initTheme = darkTheme;
+    }
+
+    addEventListener("message", (event) => {
+      let theme;
+
+      /* credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> */
+      if (event.origin === origin) {
+        /* page initial */
+        theme = initTheme;
+
+      } else if (event.source === window && event.data &&
+            event.data.direction === ModeToggle.ID) {
+        /* global theme mode changed */
+        const mode = event.data.message;
+        theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
+
+      } else {
+        return;
+      }
+
+      const message = {
+        type: "set-theme",
+        theme: theme
+      };
+
+      const utterances = document.querySelector(iframe).contentWindow;
+      utterances.postMessage(message, origin);
+    });
+
+  });
+</script>

_includes/footer.html

@@ -3,7 +3,7 @@
 -->
 
 <footer class="d-flex w-100 justify-content-center">
-  <div class="d-flex justify-content-between align-items-center">
+  <div class="d-flex justify-content-between align-items-center text-muted">
     <div class="footer-left">
       <p class="mb-0">
         © {{ 'now' | date: "%Y" }}

_includes/js-selector.html

@@ -4,7 +4,7 @@
 
 <!-- layout specified -->
 
-{% if page.layout == 'home' or page.layout == 'post' %}
+{% if page.layout == 'post' %}
   {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
     <!-- pv-report needs countup.js -->
     <script async src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>

_includes/language-alias.html

@@ -41,8 +41,6 @@
     {{ 'Perl' }}
   {% when 'php','php3','php4','php5' %}
     {{ 'PHP' }}
-  {% when 'plaintext', 'text' %}
-    {{ 'Text' }}
   {% when 'py' %}
     {{ 'Python' }}
   {% when 'rb' %}
@@ -65,7 +63,7 @@
     {{ 'Vue.js' }}
   {% when 'yml' %}
     {{ 'YAML' }}
-  {% when 'css', 'html', 'scss', 'ssh', 'toml', 'xml', 'yaml' %}
+  {% when 'css', 'html', 'scss', 'ssh', 'toml', 'xml', 'yaml', 'json' %}
     {{ _lang | upcase }}
   {% else %}
     {{ _lang | capitalize }}

_includes/mermaid.html

@@ -3,8 +3,34 @@
 -->
 
 <script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
+
 <script>
   $(function() {
+    function updateMermaid(event) {
+      if (event.source === window && event.data &&
+            event.data.direction === ModeToggle.ID) {
+
+        const mode = event.data.message;
+
+        if (typeof mermaid === "undefined") {
+          return;
+        }
+
+        let expectedTheme = (mode === ModeToggle.DARK_MODE? "dark" : "default");
+        let config = { theme: expectedTheme };
+
+        /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
+        $(".mermaid").each(function() {
+          let svgCode = $(this).prev().children().html();
+          $(this).removeAttr("data-processed");
+          $(this).html(svgCode);
+        });
+
+        mermaid.initialize(config);
+        mermaid.init(undefined, ".mermaid");
+      }
+    }
+
     let initTheme = "default";
 
     if ($("html[mode=dark]").length > 0
@@ -25,5 +51,7 @@
     });
 
     mermaid.initialize(mermaidConf);
+
+    window.addEventListener("message", updateMermaid);
   });
 </script>

_includes/mode-toggle.html

@@ -2,14 +2,12 @@
   Switch the mode between dark and light.
 -->
 
-<i class="mode-toggle fas fa-adjust"></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"; }
+    static get ID() { return "mode-toggle"; }
 
     constructor() {
       if (this.hasMode) {
@@ -24,10 +22,10 @@
         }
       }
 
-      var self = this;
+      let self = this;
 
       /* always follow the system prefers */
-      this.sysDarkPrefers.addListener(function() {
+      this.sysDarkPrefers.addEventListener("change", () => {
         if (self.hasMode) {
           if (self.isDarkMode) {
             if (!self.isSysDarkPrefer) {
@@ -43,11 +41,33 @@
           self.clearMode();
         }
 
-        self.updateMermaid();
+        self.notify();
+
       });
 
     } /* constructor() */
 
+    get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
+
+    get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
+
+    get isDarkMode() { return this.mode === ModeToggle.DARK_MODE; }
+
+    get isLightMode() { return this.mode === ModeToggle.LIGHT_MODE; }
+
+    get hasMode() { return this.mode != null; }
+
+    get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
+
+    /* get the current mode on screen */
+    get modeStatus() {
+      if (this.isDarkMode
+        || (!this.hasMode && this.isSysDarkPrefer)) {
+        return ModeToggle.DARK_MODE;
+      } else {
+        return ModeToggle.LIGHT_MODE;
+      }
+    }
 
     setDark() {
       $('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
@@ -64,82 +84,45 @@
       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 isLightMode() { return this.mode == ModeToggle.LIGHT_MODE; }
-
-    get hasMode() { return this.mode != null; }
-
-    get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
-
-    /* get the current mode on screen */
-    get modeStatus() {
-      if (this.isDarkMode
-        || (!this.hasMode && this.isSysDarkPrefer) ) {
-        return ModeToggle.DARK_MODE;
-      } else {
-        return ModeToggle.LIGHT_MODE;
-      }
+    /* Notify another plugins that the theme mode has changed */
+    notify() {
+      window.postMessage({
+        direction: ModeToggle.ID,
+        message: this.modeStatus
+      }, "*");
     }
 
-    updateMermaid() {
-      if (typeof mermaid !== "undefined") {
-        let expectedTheme = (this.modeStatus === ModeToggle.DARK_MODE? "dark" : "default");
-        let config = { theme: expectedTheme };
-
-        /* re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $(".mermaid").each(function() {
-          let svgCode = $(this).prev().children().html();
-          $(this).removeAttr("data-processed");
-          $(this).html(svgCode);
-        });
-
-        mermaid.initialize(config);
-        mermaid.init(undefined, ".mermaid");
-      }
-    }
-
-    flipMode() {
-      if (this.hasMode) {
-        if (this.isSysDarkPrefer) {
-          if (this.isLightMode) {
-            this.clearMode();
-          } else {
-            this.setLight();
-          }
-
-        } else {
-          if (this.isDarkMode) {
-            this.clearMode();
-          } else {
-            this.setDark();
-          }
-        }
-
-      } else {
-        if (this.isSysDarkPrefer) {
-          this.setLight();
-        } else {
-          this.setDark();
-        }
-      }
-
-      this.updateMermaid();
-
-    } /* flipMode() */
-
   } /* ModeToggle */
 
-  let toggle = new ModeToggle();
+  const toggle = new ModeToggle();
 
-  $(".mode-toggle").click(function() {
+  function flipMode() {
+    if (toggle.hasMode) {
+      if (toggle.isSysDarkPrefer) {
+        if (toggle.isLightMode) {
+          toggle.clearMode();
+        } else {
+          toggle.setLight();
+        }
 
-    toggle.flipMode();
+      } else {
+        if (toggle.isDarkMode) {
+          toggle.clearMode();
+        } else {
+          toggle.setDark();
+        }
+      }
 
-  });
+    } else {
+      if (toggle.isSysDarkPrefer) {
+        toggle.setLight();
+      } else {
+        toggle.setDark();
+      }
+    }
+
+    toggle.notify();
+
+  } /* flipMode() */
 
 </script>

_includes/panel.html

@@ -1,59 +0,0 @@
-<!--
-  The Pannel on right side (Desktop views)
--->
-
-{% include lang.html %}
-
-<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
-
-  <div class="access">
-
-  {% include update-list.html %}
-
-  {% if update_list.size > 0 %}
-
-    <div id="access-lastmod" class="post">
-      <span>{{- site.data.locales[lang].panel.lastmod -}}</span>
-      <ul class="post-content pl-0 pb-1 ml-1 mt-2">
-
-      {% for item in update_list %}
-        {% assign index = item | split: "::" | last | plus: 0 %}
-        {% assign post = site.posts[index] %}
-        {% assign url = post.url | relative_url %}
-        <li><a href="{{ url }}">{{ post.title }}</a></li>
-      {% endfor %}
-
-      </ul>
-    </div> <!-- #access-lastmod -->
-
-  {% endif %}
-
-  {% include trending-tags.html %}
-
-  {% if trending_tags.size > 0 %}
-    <div id="access-tags">
-      <span>{{- site.data.locales[lang].panel.trending_tags -}}</span>
-      <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-
-      {% for tag_name in trending_tags %}
-        {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
-      {% endfor %}
-
-      </div>
-    </div>
-  {% endif %}
-  </div> <!-- .access -->
-
-  {% if include.toc %}
-    <!-- BS-toc.js will be loaded at medium priority -->
-    <script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
-    <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-      <span class="pl-3 pt-2 mb-2">
-      {{- site.data.locales[lang].panel.toc -}}
-      </span>
-      <nav id="toc" data-toggle="toc"></nav>
-    </div>
-  {% endif %}
-
-</div> <!-- #panel-wrapper -->

_includes/read-time.html

@@ -22,9 +22,9 @@
 <!-- return element -->
 <span class="readtime" data-toggle="tooltip" data-placement="bottom"
   title="{{ words }} {{ site.data.locales[lang].post.words }}">
-  {{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}
+  <em>{{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}</em>
   {%- if include.prompt -%}
-    {% assign _prompt_words = read_prompt | number_of_words: 'auto' %}
-    {% unless _prompt_words > 1 %}{{" "}}{% endunless %}{{ read_prompt }}
+    {%- assign _prompt_words = read_prompt | number_of_words: 'auto' -%}
+    {%- unless _prompt_words > 1 -%}{{ " " }}{%- endunless -%}{{ read_prompt }}
   {%- endif -%}
 </span>

_includes/refactor-content.html

@@ -38,63 +38,101 @@
   %}
 {% endif %}
 
-
 <!-- images -->
 
-{% if _content contains '<img src="' %}
-
-  <!-- add CDN prefix if it exists -->
-
-  {% if site.img_cdn != '' %}
-    {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
-  {% else %}
-    {% assign img_path_replacement = '<img src="' | append: site.baseurl | append: '/' %}
-  {% endif %}
-
-  {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
-
-  <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-
-  {% assign _content = _content | replace: '<img src="', '<img data-proofer-ignore data-src="' %}
-
-  <!-- add image placehoder to prevent layout reflow -->
+{% assign IMG_TAG = '<img ' %}
 
+{% if _content contains IMG_TAG %}
   {% assign _img_content = nil %}
+  {% assign _img_snippets = _content | split: IMG_TAG %}
 
-  {% assign _images = _content | split: '<img ' %}
-
-  {% for _img in _images %}
+  {% for _img_snippet in _img_snippets %}
     {% if forloop.first %}
-      {% assign _img_content = _img %}
+      {% assign _img_content = _img_snippet %}
       {% continue %}
     {% endif %}
 
     {% assign _width = nil %}
     {% assign _height = nil %}
-    {% assign _attrs = _img | split: '>' | first | split: ' ' %}
+    {% assign _src = nil %}
+
+    {% assign _left = _img_snippet | split: '>' | first %}
+    {% assign _right = _img_snippet | remove: _left %}
+
+    {% assign _left = _left | remove: ' /' %}
+    {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+    {% assign _attrs = _left | split: ' ' %}
 
     {% for _attr in _attrs %}
-      {% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %}
-      {% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %}
+      {% assign _pair = _attr | split: '=' %}
+      {% if _pair.size < 2 %}
+        {% continue %}
+      {% endif %}
+
+      {% capture _key %}{{ _pair | first }}{% endcapture %}
+      {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
 
       {% case _key %}
         {% when 'width' %}
           {% assign _width = _value %}
         {% when 'height' %}
           {% assign _height = _value %}
+        {% when 'src' %}
+          {% assign _src = _value %}
       {% endcase %}
 
-      {% if _width and _height %}
-        {% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %}
-        {% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img %}
+      {% if _width and _height and _src %}
         {% break %}
       {% endif %}
-
     {% endfor %}
 
-    {% unless _width and _height %}
-      {% assign _img_content = _img_content | append: '<img ' | append: _img %}
-    {% endunless %}
+    {% if _src %}
+      {% unless _src contains '://' %}
+
+        <!-- Add CDN URL -->
+        {% if site.img_cdn %}
+          {% assign _src_prefix = site.img_cdn %}
+        {% else %}
+          {% assign _src_prefix = site.baseurl %}
+        {% endif %}
+
+        <!-- Add image path -->
+        {% if page.img_path %}
+          {% assign _path = page.img_path %}
+          {% assign last_char = _path | slice: -1 %}
+
+          {% unless last_char == '/' %}
+            {% assign _path = _path | append: '/' %}
+          {% endunless %}
+
+          {% assign _src_prefix = _src_prefix | append: _path %}
+        {% endif %}
+
+        {% assign _final_src = _src_prefix | append: _src %}
+        {% assign _left = _left | replace: _src, _final_src %}
+
+      {% endunless %}
+
+      <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+
+      {% assign _left = _left | replace: 'src=', 'data-src=' %}
+
+    {% endif %}
+
+    <!-- Add SVG placehoder to prevent layout reflow -->
+
+    {% if _width and _height %}
+      {%- capture _svg -%}
+        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
+      {%- endcapture -%}
+
+      {% assign _left =  _svg | append: ' ' | append: _left %}
+    {% endif %}
+
+    <!-- Bypass the HTML-proofer test -->
+    {% assign _left = _left | append: ' data-proofer-ignore' %}
+
+    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
 
   {% endfor %}
 
@@ -118,16 +156,16 @@
       {% assign _left = _snippet | split: '><' | last%}
 
       {% if _left contains 'file="' %}
-        {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
         {% assign _label_icon = 'far fa-file-code' %}
       {% else %}
         {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
-        {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
+        {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
         {% assign _label_icon = 'fas fa-code small' %}
       {% endif %}
 
       {% capture _label %}
-        <span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
+        <span label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
       {% endcapture %}
 
       {% assign _new_content = _new_content | append: _snippet
@@ -147,6 +185,45 @@
 
 {% endif %}
 
+<!-- Create heading anchors -->
+
+{% assign heading_levels = '2,3,4,5' | split: ',' %}
+{% assign _heading_content = _content %}
+
+{% for level in heading_levels %}
+  {% capture mark_start %}<h{{ level }} id="{% endcapture %}
+  {% capture mark_end %}</h{{ level }}>{% endcapture %}
+
+  {% if _heading_content contains mark_start %}
+    {% assign _new_content = nil %}
+    {% assign heading_snippets = _heading_content | split: mark_start %}
+
+    {% for snippet in heading_snippets %}
+      {% if forloop.first %}
+        {% assign _new_content = snippet %}
+        {% continue %}
+      {% endif %}
+
+      {% assign id = snippet | split: '"' | first %}
+      {% capture anchor %}<a href="#{{ id }}" class="anchor"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+
+      {% assign left = snippet | split: mark_end | first %}
+      {% assign _start_index = left | size %}
+      {% assign _end_index = snippet | size | minus: 1 %}
+      {% assign right = snippet | slice: _start_index, _end_index %}
+
+      {% assign _new_content = _new_content | append: mark_start
+          | append: left | append: anchor | append: mark_end | append: right
+      %}
+
+    {% endfor %}
+
+    {% assign _heading_content = _new_content %}
+
+  {% endif %}
+{% endfor %}
+
+{% assign _content = _heading_content %}
 
 <!-- return -->
 

_includes/related-posts.html

@@ -94,7 +94,7 @@
             <div class="text-muted small">
               <p>
                 {% include no-linenos.html content=post.content %}
-                {{ content | markdownify | strip_html | truncate: 200 }}
+                {{ content | markdownify | strip_html | truncate: 200 | escape }}
               </p>
             </div>
           </div>

_includes/search-loader.html

@@ -5,7 +5,7 @@
 
 {% capture result_elem %}
 <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
-  <a href="{{ site.url }}{url}">{title}</a>
+  <a href="{url}">{title}</a>
   <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
     {categories}
     {tags}

_includes/search-results.html

@@ -4,15 +4,7 @@
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
   <div class="col-12 col-sm-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted mb-4">{{ site.data.locales[lang].panel.trending_tags }}</h4>
-
       {% include trending-tags.html %}
-
-      {% for tag in trending_tags %}
-        {% capture url %}/tags/{{ tag | slugify | 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

@@ -6,16 +6,18 @@
   <div class="profile-wrapper text-center">
     <div id="avatar">
       <a href="{{ '/' | relative_url }}" alt="avatar" class="mx-auto">
-        {% capture avatar_url %}
-          {%- if site.avatar contains '://' -%}
-            {{ site.avatar }}
-          {%- elsif site.img_cdn != '' and site.img_cdn -%}
-            {{ site.avatar | prepend: site.img_cdn }}
-          {%- else -%}
-            {{ site.avatar | relative_url }}
-          {%- endif -%}
-        {% endcapture %}
-        <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
+        {% if site.avatar != '' and site.avatar %}
+          {% capture avatar_url %}
+            {%- if site.avatar contains '://' -%}
+              {{ site.avatar }}
+            {%- elsif site.img_cdn != '' and site.img_cdn -%}
+              {{ site.avatar | prepend: site.img_cdn }}
+            {%- else -%}
+              {{ site.avatar | relative_url }}
+            {%- endif -%}
+          {% endcapture %}
+          <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
+        {% endif %}
       </a>
     </div>
 
@@ -51,6 +53,16 @@
 
   <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
 
+    {% unless site.theme_mode %}
+      <button class="mode-toggle btn" aria-label="Switch Mode">
+        <i class="fas fa-adjust"></i>
+      </button>
+
+      {% if site.data.contact.size > 0 %}
+        <span class="icon-border"></span>
+      {% endif %}
+    {% endunless %}
+
     {% for entry in site.data.contact %}
       {% capture url %}
         {%- if entry.type == 'github' -%}
@@ -69,7 +81,6 @@
 
       {% if url %}
       <a href="{{ url }}" aria-label="{{ entry.type }}"
-        {% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
         {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
         <i class="{{ entry.icon }}"></i>
       </a>
@@ -77,16 +88,6 @@
 
     {% endfor %}
 
-    {% unless site.theme_mode %}
-      {% if site.data.contact.size > 0 %}
-        <span class="icon-border order-2"></span>
-      {% endif %}
-
-      <span id="mode-toggle-wrapper" class="order-1">
-        {% include mode-toggle.html %}
-      </span>
-    {% endunless %}
-
   </div> <!-- .sidebar-bottom -->
 
 </div><!-- #sidebar -->

_includes/timeago.html

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

_includes/toc.html

@@ -0,0 +1,16 @@
+{% assign enable_toc = false %}
+{% if site.toc and page.toc %}
+  {% if page.content contains '<h2' or page.content contains '<h3' %}
+    {% assign enable_toc = true %}
+  {% endif %}
+{% endif %}
+
+{% if enable_toc %}
+<!-- BS-toc.js will be loaded at medium priority -->
+<script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
+
+<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
+  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[lang].panel.toc -}}</div>
+  <nav id="toc" data-toggle="toc"></nav>
+</div>
+{% endif %}

_includes/topbar.html

@@ -50,7 +50,7 @@
     <div id="topbar-title">
       {% if page.layout == 'home' %}
         {{- site.data.locales[lang].title | default: site.title -}}
-      {% elsif page.collection == 'tabs' %}
+      {% elsif page.collection == 'tabs' or page.dynamic_title %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
         {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
       {% else %}

_includes/trending-tags.html

@@ -34,3 +34,17 @@
     {% endif %}
   {% endfor %}
 {% endfor %}
+
+{% if trending_tags.size > 0 %}
+  <div id="access-tags">
+    <div class="panel-heading">{{- site.data.locales[lang].panel.trending_tags -}}</div>
+    <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
+
+    {% for tag_name in trending_tags %}
+      {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
+      <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
+    {% endfor %}
+
+    </div>
+  </div>
+{% endif %}

_includes/update-list.html

@@ -22,3 +22,19 @@
 {% for entry in all_list limit:MAX_SIZE %}
   {% assign update_list = update_list | push: entry %}
 {% endfor %}
+
+{% if update_list.size > 0 %}
+
+  <div id="access-lastmod" class="post">
+    <div class="panel-heading">{{- site.data.locales[lang].panel.lastmod -}}</div>
+    <ul class="post-content pl-0 pb-1 ml-1 mt-2">
+      {% for item in update_list %}
+        {% assign index = item | split: "::" | last | plus: 0 %}
+        {% assign post = site.posts[index] %}
+        {% assign url = post.url | relative_url %}
+      <li><a href="{{ url }}">{{ post.title }}</a></li>
+      {% endfor %}
+    </ul>
+  </div> <!-- #access-lastmod -->
+
+{% endif %}

_javascript/commons/mode-toggle.js

@@ -0,0 +1,13 @@
+/*
+ * Listener for theme mode toggle
+ */
+$(function() {
+  $(".mode-toggle").click((e) => {
+    const $target = $(e.target);
+    let $btn = ($target.prop("tagName") === "button".toUpperCase() ?
+      $target : $target.parent());
+
+    $btn.blur(); // remove the clicking outline
+    flipMode();
+  });
+});

_javascript/commons/topbar-switch.js

@@ -3,50 +3,50 @@
  */
 
 $(function() {
+  const $topbarWrapper = $("#topbar-wrapper");
+  const $panel = $("#panel-wrapper");
+  const $searchInput = $("#search-input");
 
-  const topbarWrapper = $("#topbar-wrapper");
-  const toc = $("#toc-wrapper");
-  const access = $(".access");
-  const searchInput = $("#search-input");
+  const CLASS_TOPBAR_UP = "topbar-up";
+  const CLASS_TOPBAR_DOWN = "topbar-down";
+  const ATTR_TOC_SCROLLING_UP = "toc-scrolling-up"; // topbar locked
 
   let didScroll;
   let lastScrollTop = 0;
 
-  const delta = 5;
-  const topbarHeight = topbarWrapper.outerHeight();
+  const delta = $topbarWrapper.outerHeight();
+  const topbarHeight = $topbarWrapper.outerHeight();
 
   function hasScrolled() {
-    var st = $(this).scrollTop();
+    let st = $(this).scrollTop();
 
     /* Make sure they scroll more than delta */
     if (Math.abs(lastScrollTop - st) <= delta) {
       return;
     }
 
-    if (st > lastScrollTop && st > topbarHeight) {
-      /* Scroll Down */
-      topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
+    if (st > lastScrollTop ) { // Scroll Down
+      if (st > topbarHeight) {
+        $topbarWrapper.removeClass(CLASS_TOPBAR_DOWN).addClass(CLASS_TOPBAR_UP);
+        $panel.removeClass(CLASS_TOPBAR_DOWN);
 
-      if (toc.length > 0) {
-        toc.removeClass("topbar-down");
+        if ($searchInput.is(":focus")) {
+          $searchInput.blur(); /* remove focus */
+        }
       }
+    } else  {// Scroll up
+      // did not reach the bottom of the document, i.e., still have space to scroll up
+      if (st + $(window).height() < $(document).height()) {
+        let tocScrollingUp = $topbarWrapper.attr(ATTR_TOC_SCROLLING_UP);
+        if (typeof tocScrollingUp !== "undefined") {
+          if (tocScrollingUp === "false") {
+            $topbarWrapper.removeAttr(ATTR_TOC_SCROLLING_UP);
+          }
 
-      if (access.length > 0) {
-        access.removeClass("topbar-down");
-      }
-
-      if (searchInput.is(":focus")) {
-        searchInput.blur(); /* remove focus */
-      }
-
-    } else if (st + $(window).height() < $(document).height()) {
-      /* Scroll Up */
-      topbarWrapper.removeClass("topbar-up").addClass("topbar-down");
-      if (toc.length > 0) {
-        toc.addClass("topbar-down");
-      }
-      if (access.length > 0) {
-        access.addClass("topbar-down");
+        } else {
+          $topbarWrapper.removeClass(CLASS_TOPBAR_UP).addClass(CLASS_TOPBAR_DOWN);
+          $panel.addClass(CLASS_TOPBAR_DOWN);
+        }
       }
     }
 
@@ -54,7 +54,7 @@ $(function() {
   }
 
   $(window).scroll(function(event) {
-    if ($("#topbar-title").is(":hidden")) { /* Not in small screens */
+    if ($("#topbar-title").is(":hidden")) {
       didScroll = true;
     }
   });

_javascript/copyright

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

_javascript/utils/smooth-scroll.js

@@ -8,49 +8,61 @@
 */
 
 $(function() {
+  const $topbarWrapper = $("#topbar-wrapper");
+  const topbarHeight = $topbarWrapper.outerHeight();
+  const $topbarTitle = $("#topbar-title");
+
+  const ATTR_TOC_SCROLLING = "toc-scrolling-up";
+  const SCROLL_MARK = "scroll-focus";
+  const REM = 16; // in pixels
+  let tocScrollUpCount = 0;
+
   $("a[href*='#']")
     .not("[href='#']")
     .not("[href='#0']")
     .click(function(event) {
-
       if (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) {
         if (location.hostname === this.hostname) {
-
-          const REM = 16; /* 16px */
-
           const hash = decodeURI(this.hash);
-          let isFnRef = RegExp(/^#fnref:/).test(hash);
-          let isFn = RegExp(/^#fn:/).test(hash);
-          let selector = hash.includes(":") ? hash.replace(/\:/, "\\:") : hash;
-          let target = $(selector);
+          let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
+          let toFootnote = toFootnoteRef? false : RegExp(/^#fn:/).test(hash);
+          let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
+          let $target = $(selector);
 
-          if (target.length) {
+          let parent = $(this).parent().prop("tagName");
+          let isAnchor = RegExp(/^H\d/).test(parent);
+          let isMobileViews = !$topbarTitle.is(":hidden");
+
+          if (typeof $target !== "undefined") {
             event.preventDefault();
 
             if (history.pushState) { /* add hash to URL */
               history.pushState(null, null, hash);
             }
 
-            let curOffset = $(this).offset().top;
-            let destOffset = target.offset().top;
-            const scrollUp = (destOffset < curOffset);
-            const topbarHeight = $("#topbar-wrapper").outerHeight();
+            let curOffset = isAnchor? $(this).offset().top : $(window).scrollTop();
+            let destOffset = $target.offset().top -= REM / 2;
 
-            if (scrollUp && isFnRef) {
-              /* Avoid the top-bar covering `fnref` when scrolling up
-                because `fnref` has no `%anchor`(see: module.scss) style. */
-              destOffset -= (topbarHeight + REM / 2);
+            if (destOffset < curOffset) { // scroll up
+              if (!isAnchor && !toFootnote) { // trigger by ToC item
+                if (!isMobileViews) { // on desktop/tablet screens
+                  $topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
+                  // Send message to `${JS_ROOT}/commons/topbar-switch.js`
+                  $topbarWrapper.attr(ATTR_TOC_SCROLLING, true);
+                  tocScrollUpCount += 1;
+                }
+              }
+
+              if ((isAnchor || toFootnoteRef) && isMobileViews) {
+                destOffset -= topbarHeight;
+              }
             }
 
-            $("html,body").animate({
+            $("html").animate({
               scrollTop: destOffset
-            }, 800, () => {
-
-              const $target = $(target);
+            }, 500, () => {
               $target.focus();
 
-              const SCROLL_MARK = "scroll-focus";
-
               /* clean up old scroll mark */
               if ($(`[${SCROLL_MARK}=true]`).length) {
                 $(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
@@ -62,7 +74,7 @@ $(function() {
               }
 
               /* set scroll mark to footnotes */
-              if (isFn || isFnRef) {
+              if (toFootnote || toFootnoteRef) {
                 $target.attr(SCROLL_MARK, true);
               }
 
@@ -72,6 +84,14 @@ $(function() {
                 $target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
                 $target.focus(); /* Set focus again */
               }
+
+              if (typeof $topbarWrapper.attr(ATTR_TOC_SCROLLING) !== "undefined") {
+                tocScrollUpCount -= 1;
+
+                if (tocScrollUpCount <= 0) {
+                  $topbarWrapper.attr(ATTR_TOC_SCROLLING, "false");
+                }
+              }
             });
           }
         }

_javascript/utils/timeago.js

@@ -3,11 +3,8 @@
  */
 
 $(function() {
-
   const timeagoElem = $(".timeago");
-
-  let toRefresh = timeagoElem.length;
-
+  let tasks = timeagoElem.length;
   let intervalId = void 0;
 
   const dPrompt = $("meta[name=day-prompt]").attr("content");
@@ -15,20 +12,19 @@ $(function() {
   const minPrompt = $("meta[name=minute-prompt]").attr("content");
   const justnowPrompt = $("meta[name=justnow-prompt]").attr("content");
 
-  function timeago(isoDate, dateStr) {
+  function timeago(date, initDate) {
     let now = new Date();
-    let past = new Date(isoDate);
+    let past = new Date(date);
 
     if (past.getFullYear() !== now.getFullYear()
         || past.getMonth() !== now.getMonth()) {
-      return dateStr;
+      return initDate;
     }
 
     let seconds = Math.floor((now - past) / 1000);
 
     let day = Math.floor(seconds / 86400);
     if (day >= 1) {
-      toRefresh -= 1;
       return ` ${day} ${dPrompt}`;
     }
 
@@ -47,22 +43,30 @@ $(function() {
 
   function updateTimeago() {
     $(".timeago").each(function() {
-      if ($(this).children("i").length > 0) {
-        let dateStr = $(this).clone().children().remove().end().text();
-        let node = $(this).children("i");
-        let iosDate = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
-        $(this).text(timeago(iosDate, dateStr));
-        $(this).append(node);
+      if ($(this)[0].hasAttribute("date") === false) {
+        tasks -= 1;
+        return;
       }
+
+      let date = $(this).attr("date");
+      let initDate = $(this).text();
+      let relativeDate = timeago(date, initDate);
+
+      if (relativeDate === initDate) {
+        $(this).removeAttr("date");
+      } else {
+        $(this).text(relativeDate);
+      }
+
     });
 
-    if (toRefresh === 0 && typeof intervalId !== "undefined") {
+    if (tasks === 0 && typeof intervalId !== "undefined") {
       clearInterval(intervalId); /* stop interval */
     }
-    return toRefresh;
+    return tasks;
   }
 
-  if (toRefresh === 0) {
+  if (tasks === 0) {
     return;
   }
 

_layouts/default.html

@@ -13,10 +13,14 @@ layout: compress
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ site.lang }}" {{ prefer_mode }}>
+<html lang="{{ site.lang }}"{{ prefer_mode }}>
 
   {% include head.html %}
 
+  {% unless site.theme_mode %}
+    {% include mode-toggle.html %}
+  {% endunless %}
+
   <body data-spy="scroll" data-target="#toc">
 
     {% include sidebar.html %}
@@ -26,7 +30,7 @@ layout: compress
     <div id="main-wrapper">
       <div id="main">
 
-        {% include refactor-content.html content=content %}
+        {{ content }}
 
         {% include footer.html %}
 

_layouts/home.html

@@ -53,13 +53,13 @@ layout: page
     <div class="post-content">
       <p>
         {% include no-linenos.html content=post.content %}
-        {{ content | markdownify | strip_html | truncate: 200 }}
+        {{ content | markdownify | strip_html | truncate: 200 | escape }}
       </p>
     </div>
 
-    <div class="post-meta text-muted d-flex justify-content-between">
+    <div class="post-meta text-muted d-flex">
 
-      <div>
+      <div class="mr-auto">
         <!-- posted date -->
         <i class="far fa-calendar fa-fw"></i>
         {% include timeago.html date=post.date tooltip=true %}
@@ -68,12 +68,15 @@ layout: page
         <i class="far fa-clock fa-fw"></i>
         {% include read-time.html content=post.content %}
 
-        <!-- page views -->
-        {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
-        <i class="far fa-eye fa-fw"></i>
-        <span id="pv_{{-post.title-}}" class="pageviews">
-          <i class="fas fa-spinner fa-spin fa-fw"></i>
-        </span>
+        <!-- categories -->
+        {% if post.categories.size > 0 %}
+          <i class="far fa-folder-open fa-fw"></i>
+          <span>
+          {% for category in post.categories %}
+            {{ category }}
+            {%- unless forloop.last -%},{%- endunless -%}
+          {% endfor %}
+          </span>
         {% endif %}
       </div>
 

_layouts/page.html

@@ -1,41 +1,64 @@
 ---
 layout: default
-# The page layout
 ---
 
+{% include lang.html %}
+
 <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 mb-md-4">
-    {% if page.dynamic_title %}
+
+  <!-- core -->
+  <div id="core-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">
+
+    {% capture _content %}
+      {% if layout.refactor or page.layout == 'page' %}
+        {% include refactor-content.html content=content %}
+      {% else %}
+        {{ content }}
+      {% endif %}
+    {% endcapture %}
+
+    {% if page.layout == 'page' or page.collection == 'tabs'%}
+      {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
       <h1 class="dynamic-title">
-        {% if page.collection == 'tabs' %}
-          {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
-          {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
-        {% else %}
-          {{- page.title -}}
-        {% endif %}
+        {{ title }}
       </h1>
       <div class="post-content">
-        {{ content }}
+        {{ _content }}
       </div>
     {% else %}
-      {{ content }}
+      {{ _content }}
     {% endif %}
-    </div> <!-- #page -->
-  </div><!-- .col-12 -->
 
-  {% include panel.html %}
+    </div>
+  </div> <!-- #core-wrapper -->
+
+  <!-- pannel -->
+  <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
+
+    <div class="access">
+      {% include update-list.html %}
+      {% include trending-tags.html %}
+    </div>
+
+    {% for _include in layout.pannel_includes %}
+      {% assign _include_path = _include | append: '.html' %}
+      {% include {{ _include_path }} %}
+    {% endfor %}
+  </div>
 
 </div>
 
-{% if site.disqus.comments and page.comments %}
+<!-- tail -->
+{% if layout.tail_includes %}
 <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 id="tail-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+      {% for _include in layout.tail_includes %}
+        {% assign _include_path = _include | append: '.html' %}
+        {% include {{ _include_path }} %}
+      {% endfor %}
+    </div>
+  </div>
 </div> <!-- .row -->
 {% endif %}

_layouts/post.html

@@ -1,143 +1,144 @@
 ---
-layout: default
-# The posts' layout
+layout: page
+refactor: true
+pannel_includes:
+  - toc
+tail_includes:
+  - related-posts
+  - post-nav
+  - comments
 ---
 
 {% include lang.html %}
 
-<div class="row">
+{% if page.image.src %}
+  {% capture bg %}
+    {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
+  {% endcapture %}
+  <img src="{{ page.image.src }}" class="preview-img {{ bg | strip }}"
+      alt="{{ page.image.alt | default: "Preview Image" }}"
 
-  <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
+      {% if page.image.width %}
+        width="{{ page.image.width }}"
+      {% elsif page.image.w %}
+        width="{{ page.image.w }}"
+      {% endif %}
 
-    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+      {% if page.image.height %}
+        height="{{ page.image.height }}"
+      {% elsif page.image.h %}
+        height="{{ page.image.h }}"
+      {% endif %}>
+{% endif %}
 
-      <h1 data-toc-skip>{{ page.title }}</h1>
+<h1 data-toc-skip>{{ page.title }}</h1>
 
-      <div class="post-meta text-muted d-flex flex-column">
-        <!-- Published date and author -->
-        <div>
-          <span class="semi-bold">
-            {{ page.author | default: site.social.name }}
-          </span>
-          {% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %}
-          {% include timeago.html date=page.date tooltip=true preposition=_preposition %}
-        </div>
+<div class="post-meta text-muted">
 
-        <div>
-          <!-- lastmod -->
-          {% if page.last_modified_at %}
-          <span>
-            {{ site.data.locales[lang].post.updated }}
-            {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
-          </span>
-          {% endif %}
+  <!-- author -->
+  <div>
+    {% capture author_name %}{{ page.author.name | default: site.social.name }}{% endcapture %}
+    {% assign author_link = nil %}
 
-          <!-- read time -->
-          {% include read-time.html content=content prompt=true %}
-
-          <!-- page views -->
-          {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
-          <span id="pv" class="pageviews">
-            <i class="fas fa-spinner fa-spin fa-fw"></i>
-          </span>
-          {{ site.data.locales[lang].post.pageview_measure }}
-          {% endif %}
-
-        </div>
-
-      </div> <!-- .post-meta -->
-
-      <div class="post-content">
-
-        {% if page.image.src %}
-          <img src="{{ page.image.src }}"
-            class="preview-img"
-            alt="{{ page.image.alt | default: "Preview Image" }}"
-            {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
-            {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
-        {% endif %}
-
-        {{ content }}
-
-      </div>
-
-      <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 | slugify | url_encode }}/'>{{ category }}</a>
-            {%- unless forloop.last -%}, {%- endunless -%}
-          {% endfor %}
-        </div>
-        {% endif %}
-
-        <!-- tags -->
-        {% if page.tags.size > 0 %}
-        <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 | slugify | url_encode }}/"
-            class="post-tag no-text-decoration" >
-            {{- tag -}}
-          </a>
-          {% endfor %}
-          </div>
-        {% endif %}
-
-        <div class="post-tail-bottom
-          d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
-          <div class="license-wrapper">
-          {% if site.data.locales[lang].copyright.license.template %}
-            {% capture _replacement %}
-            <a href="{{ site.data.locales[lang].copyright.license.link }}">
-              {{ site.data.locales[lang].copyright.license.name }}
-            </a>
-            {% endcapture %}
-            {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
-          {% endif %}
-          </div>
-
-          {% include post-sharing.html %}
-
-        </div><!-- .post-tail-bottom -->
-
-      </div><!-- div.post-tail -->
-
-    </div> <!-- .post -->
-
-
-  </div> <!-- #post-wrapper -->
-
-  {% assign enable_toc = false %}
-
-  {% if site.toc and page.toc %}
-    {% if content contains '<h2' or content contains '<h3' %}
-      {% assign enable_toc = true %}
+    {% if page.author.link %}
+      {% assign author_link = page.author.link %}
+    {% elsif author_name == site.social.name %}
+      {% assign author_link = site.social.links[0] %}
     {% endif %}
+
+    {{ site.data.locales[lang].post.written_by }}
+    <em>
+      {% if author_link %}
+        <a href="{{ author_link }}">{{ author_name }}</a>
+      {% else %}
+        {{ author_name }}
+      {% endif %}
+    </em>
+  </div>
+
+  <div class="d-flex">
+    <div>
+      <!-- published date -->
+      <span>
+        {{ site.data.locales[lang].post.posted }}
+        {% include timeago.html date=page.date tooltip=true %}
+      </span>
+
+      <!-- lastmod date -->
+      {% if page.last_modified_at %}
+      <span>
+        {{ site.data.locales[lang].post.updated }}
+        {% include timeago.html date=page.last_modified_at tooltip=true %}
+      </span>
+      {% endif %}
+
+      <!-- read time -->
+      {% include read-time.html content=content prompt=true %}
+
+      <!-- page views -->
+      {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
+      <span>
+        <em id="pv" class="pageviews">
+          <i class="fas fa-spinner fa-spin fa-fw"></i>
+        </em>
+        {{ site.data.locales[lang].post.pageview_measure }}
+      </span>
+      {% endif %}
+    </div>
+
+  </div> <!-- .d-flex -->
+
+</div> <!-- .post-meta -->
+
+<div class="post-content">
+  {{ content }}
+</div>
+
+<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 | slugify | url_encode }}/'>{{ category }}</a>
+      {%- unless forloop.last -%}, {%- endunless -%}
+    {% endfor %}
+  </div>
   {% endif %}
 
-  {% include panel.html toc=enable_toc %}
+  <!-- tags -->
+  {% if page.tags.size > 0 %}
+  <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 | slugify | url_encode }}/"
+          class="post-tag no-text-decoration" >
+        {{- tag -}}
+      </a>
+      {% endfor %}
+  </div>
+  {% endif %}
 
-</div> <!-- .row -->
+  <div class="post-tail-bottom
+    d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
+    <div class="license-wrapper">
 
-<div class="row">
-  <div class="col-12 col-lg-11 col-xl-8">
-    <div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+      {% if site.data.locales[lang].copyright.license.template %}
 
-    {% include related-posts.html %}
+        {% capture _replacement %}
+        <a href="{{ site.data.locales[lang].copyright.license.link }}">
+          {{ site.data.locales[lang].copyright.license.name }}
+        </a>
+        {% endcapture %}
 
-    {% include post-nav.html %}
+        {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
 
-    {% if site.disqus.comments and page.comments %}
-      {% include disqus.html %}
-    {% endif %}
+      {% endif %}
+    </div>
 
-    </div> <!-- #post-extend-wrapper -->
+    {% include post-sharing.html %}
 
-  </div> <!-- .col-* -->
+  </div><!-- .post-tail-bottom -->
 
-</div> <!-- .row -->
+</div><!-- div.post-tail-wrapper -->

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

@@ -1,6 +1,8 @@
 ---
 title: Text and Typography
-author: Cotes Chung
+author:
+  name: Cotes Chung
+  link: https://github.com/cotes2020
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
@@ -8,8 +10,8 @@ math: true
 mermaid: true
 image:
   src: /commons/devices-mockup.png
-  width: 850
-  height: 585
+  width: 800
+  height: 500
 ---
 
 This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
@@ -52,8 +54,8 @@ Fluttering and dancing in the breeze.
 ### Unordered list
 
 - Chapter
-	- Section
-      - Paragraph
+  - Section
+    - Paragraph
 
 ### Task list
 
@@ -72,7 +74,6 @@ Sun
 Moon
 : the natural satellite of the earth, visible by reflected light from the sun
 
-
 ## Block Quote
 
 > This line to shows the Block Quote.
@@ -89,12 +90,10 @@ Moon
 
 <http://127.0.0.1:4000>
 
-
 ## Footnote
 
 Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
 
-
 ## Images
 
 - Default (with caption)
@@ -141,7 +140,6 @@ _shadow effect (visible in light mode)_
   cherry :active, c, after b a, 1d
 ```
 
-
 ## Mathematics
 
 The mathematics powered by [**MathJax**](https://www.mathjax.org/):
@@ -152,12 +150,10 @@ When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
 
 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
-
 ## Inline code
 
 This is an example of `Inline Code`.
 
-
 ## Code block
 
 ### Common

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

@@ -1,15 +1,19 @@
 ---
 title: Writing a New Post
-author: Cotes Chung
+author:
+  name: Cotes Chung
+  link: https://github.com/cotes2020
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]
 render_with_liquid: false
 ---
 
+This post will guide you how to write a post on _Chirpy_ theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set.
+
 ## Naming and Path
 
-Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_posts/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_posts` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`. If you want to save time of creating files, please consider using the plugin [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) to accomplish this.
 
 ## Front Matter
 
@@ -24,24 +28,38 @@ 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.
+> **Note**: The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
 
-### Timezone of date
+### Timezone of Date
 
-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`.
+In order to accurately record the release date of a post, you should not only set up the `timezone` of _\_config.yml_ but also provide the post's timezone in variable `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. For instance:
+The `categories` of each post are designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity. For instance:
 
 ```yaml
+---
 categories: [Animal, Insect]
 tags: [bee]
+---
+```
+
+### Author Information
+
+The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it as follows:
+
+```yaml
+---
+author:
+  name: Full Name
+  link: https://example.com
+---
 ```
 
 ## Table of Contents
 
-By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml` and set the value of variable `toc` to `false`. If you want to turn off TOC for specific post, add the following to post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
+By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to _\_config.yml_ and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
 
 ```yaml
 ---
@@ -51,7 +69,9 @@ toc: false
 
 ## Comments
 
-Similar to TOC, the [Disqus](https://disqus.com/) comments is loaded by default in each post, and the global switch is defined by variable `comments` in file `_config.yml` . If you want to close the comment for specific post, add the following to the **Front Matter** of the post:
+The global switch of comments is defined by variable `comments.active` in the file _\_config.yml_. After selecting a comment system for this variable, comments will be turned on for all posts.
+
+If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
 
 ```yaml
 ---
@@ -79,28 +99,11 @@ mermaid: true
 ---
 ```
 
-Then you can use it like other markdown language: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
+Then you can use it like other markdown languages: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
 
 ## Images
 
-### Preview image
-
-If you want to add an image to the top of the post contents, specify the attribute `src`, `width`, `height` and `alt` for the image:
-
-```yaml
----
-image:
-  src: /path/to/image/file
-  width: 1000   # in pixels
-  height: 400   # in pixels
-  alt: image alternative text
----
-```
-
-Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. Later section ["Image size"](#image-size) will also mention this.
-
-
-### Image caption
+### Caption
 
 Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
 
@@ -110,7 +113,7 @@ _Image Caption_
 ```
 {: .nolineno}
 
-### Image size
+### Size
 
 In order to prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image:
 
@@ -119,9 +122,16 @@ In order to prevent the page content layout from shifting when the image is load
 ```
 {: .nolineno}
 
-### Image position
+Starting from _Chirpy v5.0.0_, `height` and `width` support abbreviations (`height` → `h`, `width` → `w`). The following example has the same effect as the above:
 
-By default, the image is centered, but you can specify the position by using one of class `normal` , `left` and `right`. For example:
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }
+```
+{: .nolineno}
+
+### Position
+
+By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`. For example:
 
 - **Normal position**
 
@@ -148,7 +158,7 @@ By default, the image is centered, but you can specify the position by using one
 
 > **Limitation**: Once the position of the image is specified, the image caption should not be added.
 
-### Image shadow
+### Shadow
 
 The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
 
@@ -159,14 +169,14 @@ The screenshots of the program window can be considered to show the shadow effec
 
 ### CDN URL
 
-If you host the images on the CDN, you can save the time of repeatedly writing the CDN url by assigning the variable `img_cdn` of `_config.yml` file:
+If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of _\_config.yml_ file:
 
 ```yaml
 img_cdn: https://cdn.com
 ```
 {: file='_config.yml' .nolineno}
 
-Once `img_cdn` is assigned, the CDN url will be added to the path of all images (images of site avatar and posts) starting with `/`.
+Once `img_cdn` is assigned, the CDN URL will be added to the path of all images (images of site avatar and posts) starting with `/`.
 
 For instance, when using images:
 
@@ -182,6 +192,50 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor
 ```
 {: .nolineno}
 
+### Image Path
+
+When a post contains many images, it will be a time-consuming task to repeatedly define the path of the images. To solve this, we can define this path in the YAML block of the post:
+
+```yml
+---
+img_path: /img/path/
+---
+```
+{: .nolineno }
+
+And then, the image source of Markdown can write the file name directly:
+
+```md
+![The flower](flower.png)
+```
+{: .nolineno }
+
+The output will be:
+
+```html
+<img src="/img/path/flower.png" alt="The flower">
+```
+{: .nolineno }
+
+
+### Preview Image
+
+If you want to add an image to the top of the post contents, specify the attribute `src`, `width`, `height`, and `alt` for the image:
+
+```yaml
+---
+image:
+  src: /path/to/image/file
+  width: 1000   # in pixels
+  height: 400   # in pixels
+  alt: image alternative text
+---
+```
+
+Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. The above section "[Size](#size)" also mentions this.
+
+Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height` → `h`, `width` → `w`. In addition, the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `src` only needs the image file name.
+
 ## Pinned Posts
 
 You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
@@ -210,11 +264,11 @@ key: value
 ```
 ````
 
-> **Limination**: The Jekyll style `highlight` tag ais not compatible with this theme.
+> **Limitation**: The Jekyll style `highlight` tag is not compatible with this theme.
 
 ### Line Number
 
-By default, all languages except `plaintext`, `console` and `terminal` will display line numbers. When you want to hide the line number of the code block, you can append `{: .nolineno}` at the next line:
+By default, all languages except `plaintext`, `console`, and `terminal` will display line numbers. When you want to hide the line number of the code block, you can append `{: .nolineno}` at the next line:
 
 ````markdown
 ```shell
@@ -253,4 +307,3 @@ Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the pos
 ## Learn More
 
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
-

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

@@ -1,6 +1,8 @@
 ---
 title: Getting Started
-author: Cotes Chung
+author:
+  name: Cotes Chung
+  link: https://github.com/cotes2020
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
@@ -9,7 +11,7 @@ pin: true
 
 ## Prerequisites
 
-Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
+Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`.
 
 ## Installation
 
@@ -17,9 +19,8 @@ Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installat
 
 There are two ways to create a new repository for this theme:
 
-- **[Using the Chirpy Starter](#option-1-using-the-chirpy-starter)** - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
-
-- **[Forking on GitHub](#option-2-forking-on-github)** - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
+- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
+- [**Forking on GitHub**](#option-2-forking-on-github) - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
 
 #### Option 1. Using the Chirpy Starter
 
@@ -44,7 +45,7 @@ The above command will:
     - files under `_posts`
     - folder `docs`
 
-2. If the option `--no-gh` is provided, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
+2. If the option `--no-gh` is provided, the directory `.github` will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
 
 3. Removes item `Gemfile.lock` from `.gitignore`.
 
@@ -52,7 +53,7 @@ The above command will:
 
 ### Installing Dependencies
 
-Before running for the first time, go the root directory of your site, and install dependencies as follows:
+Before running for the first time, go to the root directory of your site, and install dependencies as follows:
 
 ```console
 $ bundle
@@ -71,7 +72,7 @@ Update the variables of `_config.yml` as needed. Some of them are typical option
 
 ### Customing Stylesheet
 
-If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
+If you need to customize the stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
 
 Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
 
@@ -96,7 +97,7 @@ After a while, the local service will be published at _<http://127.0.0.1:4000>_.
 
 ### Deployment
 
-Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash, e.g, `/project-name`.
+Before the deployment begins, check out the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starts with a slash, e.g, `/project-name`.
 
 Now you can choose ONE of the following methods to deploy your Jekyll site.
 
@@ -110,7 +111,7 @@ Quickly check the files needed for GitHub Actions build:
 
 - Ensure your Jekyll site has file `tools/deploy.sh`. Otherwise, copy it from here to your Jekyll site.
 
-- Furthermore, if you have committed `Gemfile.lock` to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lockfile:
+- Furthermore, if you have committed `Gemfile.lock` to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lock file:
 
   ```console
   $ bundle lock --add-platform x86_64-linux
@@ -124,7 +125,7 @@ Now publish your Jekyll site by:
 
 2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving.
 
-    ![gh-pages-sources](/posts/20190809/gh-pages-sources.png){: width="850" height="153" }
+    ![gh-pages-sources](/posts/20190809/gh-pages-sources.png){: width="1580" height="250" }
 
 3. Visit your website at the address indicated by GitHub.
 
@@ -154,21 +155,21 @@ Unless you specified the output path, the generated site files will be placed in
 
 It depends on how you use the theme:
 
-- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`), editing the `Gemfile` and update the version number of the them gem, for example:
+- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`), editing the `Gemfile` and update the version number of the theme gem, for example:
 
-    ```diff
+  ```diff
   - gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
   + gem "jekyll-theme-chirpy", "~> 3.3", ">= 3.3.0"
-    ```
-    {: .nolineno file="Gemfile" }
+  ```
+  {: .nolineno file="Gemfile" }
 
-    And then execute the following command:
+  And then execute the following command:
 
-    ```console
-    $ bundle update jekyll-theme-chirpy
-    ```
+  ```console
+  $ bundle update jekyll-theme-chirpy
+  ```
 
-    As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme.
+  As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme.
 
 - If you forked from the source project (there will be `gemspec` in the `Gemfile` of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade.
 The merge is likely to conflict with your local modifications. Please be patient and careful to resolve these conflicts.

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

@@ -1,16 +1,18 @@
 ---
 title: Customize the Favicon
-author: Cotes Chung
+author:
+  name: Cotes Chung
+  link: https://github.com/cotes2020
 date: 2019-08-11 00:34:00 +0800
 categories: [Blogging, Tutorial]
 tags: [favicon]
 ---
 
-The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. You may want to replace them with your own. The following sections will guide you how to create and replace the default favicons.
+The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
 
 ## Generate the favicon
 
-Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click button <kbd>Select your Favicon image</kbd> to upload your image file.
+Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click the button <kbd>Select your Favicon image</kbd> to upload your image file.
 
 In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.
 
@@ -21,16 +23,14 @@ Download the generated package, unzip and delete the following two from the extr
 - `browserconfig.xml`
 - `site.webmanifest`
 
-Now, copy the remaining image files (`PNG` and `ICO`) to cover the original files in the folder `assets/img/favicons/` of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
+And then copy the remaining image files (`PNG` and `ICO`) to cover the original files in the directory `assets/img/favicons/` of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
 
-The following table will helps you understand the changes to the favicon files:
+The following table will help you understand the changes to the favicon files:
 
 | File(s)             | From Online Tool                  | From Chirpy |
 |---------------------|:---------------------------------:|:-----------:|
 | `*.PNG`             | ✓                                 | ✗           |
 | `*.ICO`             | ✓                                 | ✗           |
-| `browserconfig.xml` | ✗                                 | ✓           |
-| `site.webmanifest`  | ✗                                 | ✓           |
 
 > Note: ✓ means keep, ✗ means delete.
 

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

@@ -1,6 +1,8 @@
 ---
 title: Enable Google Page Views
-author: Dinesh Prasanth Moluguwan Krishnamoorthy
+author:
+  name: Dinesh Prasanth Moluguwan Krishnamoorthy
+  link: https://github.com/SilleBille
 date: 2021-01-03 18:32:00 -0500
 categories: [Blogging, Tutorial]
 tags: [google analytics, pageviews]
@@ -13,20 +15,20 @@ This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme bas
 
 ### Create GA account and property
 
-First, you need to setup your account on Google analytics. While your create your account, you must create your first **Property** as well.
+First, you need to set up your account on Google analytics. While you create your account, you must create your first **Property** as well.
 
 1. Head to <https://analytics.google.com/> and click on **Start Measuring**
 2. Enter your desired _Account Name_ and choose the desired checkboxes
 3. Enter your desired _Property Name_. This is the name of the tracker project that appears on your Google Analytics dashboard
 4. Enter the required information _About your business_
-5. Hit _Create_ and accept any license popup to setup your Google Analytics account and create your property
+5. Hit _Create_ and accept any license popup to set up your Google Analytics account and create your property
 
 ### Create Data Stream
 
-With your property created, you now need to set up Data Stream to track your blog traffic. After you signup, the prompt should automatically take you to creating your first **Data Stream**. If not, follow these steps:
+With your property created, you now need to set up Data Stream to track your blog traffic. After you signup, the prompt should automatically take you to create your first **Data Stream**. If not, follow these steps:
 
 1. Go to **Admin** on the left column
-2. Select the desired property from the drop down on the second column
+2. Select the desired property from the drop-down on the second column
 3. Click on **Data Streams**
 4. Add a stream and click on **Web**
 5. Enter your blog's URL
@@ -47,13 +49,13 @@ google_analytics:
 ```
 {: file="_config.yml"}
 
-When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.
+When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with the Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pick up your changes. You should now be able to monitor your traffic in real time.
 
 ![google-analytics-realtime](/posts/20210103/02-google-analytics-realtime.png){: width="616" height="557"}
 
 ## Setup Page Views
 
-There is a detailed [tutorial](https://developers.google.com/analytics/solutions/google-analytics-super-proxy) available to set up Google Analytics superProxy. But, if you are interested to just quickly get your Chirpy-based blog display page views, follow along. These steps were tested on a Linux machine. If you are running Windows, you can use Git bash terminal to run Unix-like commands.
+There is a detailed [tutorial](https://developers.google.com/analytics/solutions/google-analytics-super-proxy) available to set up Google Analytics superProxy. But, if you are interested to just quickly get your Chirpy-based blog display page views, follow along. These steps were tested on a Linux machine. If you are running Windows, you can use the Git bash terminal to run Unix-like commands.
 
 ### Setup Google App Engine
 
@@ -67,7 +69,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
 
 5. Select **Python** language and **Standard** environment
 
-6. Enable billing account. Yeah, you have to link your credit card. But, you won't be billed unless you exceed your free quota. For a simple blog, free quota is more than sufficient.
+6. Enable billing account. Yeah, you have to link your credit card. But, you won't be billed unless you exceed your free quota. For a simple blog, the free quota is more than sufficient.
 
 7. Go to your App Engine dashboard on your browser and select **API & Services** from the left navigation menu
 
@@ -77,7 +79,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
 
 10. On the left, Click on _OAuth Consent Screen_ and accept **Configure Consent Screen**. Select **External** since your blog is probably hosted for the public. Click on **Publish** under _Publishing Status_
 
-11. Click on **Credentials** on the left and create a new **OAuth Client IDs** credential. Make sure to add a entry under `Authorized redirect URIs` that matches: `https://<project-id>.<region>.r.appspot.com/admin/auth`
+11. Click on **Credentials** on the left and create a new **OAuth Client IDs** credential. Make sure to add an entry under `Authorized redirect URIs` that matches: `https://<project-id>.<region>.r.appspot.com/admin/auth`
 
 12. Note down the **Your Client ID** and **Your Client Secret**. You'll need this in the next section.
 
@@ -113,15 +115,16 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
 
 1. Clone the **Google Analytics superProxy** project on Github: <https://github.com/googleanalytics/google-analytics-super-proxy> to your local.
 
-2. Remove the first 2 lines in the [`src/app.yaml`](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file:
-  ```diff
-- application: your-project-id
-- version: 1
-  ```
+2.  Remove the first 2 lines in the [`src/app.yaml`](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file:
 
-3. In `src/config.py`, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from you App Engine Dashboard.
+    ```diff
+    - application: your-project-id
+    - version: 1
+    ```
 
-4. Enter any random key for `XSRF_KEY`, your `config.py` should look similar to this
+3. In `src/config.py`, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from your App Engine Dashboard.
+
+4.  Enter any random key for `XSRF_KEY`, your `config.py` should look similar to this
 
     ```python
     #!/usr/bin/python2.7
@@ -145,7 +148,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
 
     **Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
 
-5. From inside the src/ directory, deploy the app
+5.  From inside the src/ directory, deploy the app
 
     ```console
     [root@bc96abf71ef8 src]# gcloud app deploy
@@ -202,17 +205,16 @@ In order to reduce the returned results and reduce the network bandwidth, we add
 
 - **filters**: fill in `ga:pagePath=~^/posts/.*/$;ga:pagePath!@=`.
 
-    Among them, `;` means using _logical AND_ to concatenate two rules.
+  Among them, `;` means using _logical AND_ to concatenate two rules.
 
-    If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`.
+  If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`.
 
-After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at the bottom of the page, and fill in the **Encoded URI for the query** of SuperProxy on GAE.
+After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at the bottom of the page and fill in the **Encoded URI for the query** of SuperProxy on GAE.
 
 After the query is saved on GAE, a **Public Endpoint** (public access address) will be generated, and we will get the query result in JSON format when accessing it. Finally, click <kbd>Enable Endpoint</kbd> in **Public Request Endpoint** to make the query effective, and click <kbd>Start Scheduling</kbd> in **Scheduling** to start the scheduled task.
 
 ![superproxy-query](/posts/20210103/04-superproxy-query.png){: width="1100" height="126"}
 
-
 ## Configure Chirpy to Display Page View
 
 Once all the hard part is done, it is very easy to enable the Page View on Chirpy theme. Your superProxy dashboard should look something like below and you can grab the required values.

_sass/addon/commons.scss

@@ -6,12 +6,9 @@
 @mixin mode-toggle($dark-mode: false) {
   @if $dark-mode {
     @include dark-scheme;
-
   } @else {
     @include light-scheme;
-
   }
-
 }
 
 html:not([mode]),
@@ -46,59 +43,20 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
-/* --- Scrollbar --- */
-
-$scrollbar-size: 7px;
-
-::-webkit-scrollbar {
-  width: $scrollbar-size;
-  height: $scrollbar-size;
-}
-
-::-webkit-scrollbar-track {
-  @at-root body#{&} {
-    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
-  }
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-bg);
-  border-radius: calc(#{$scrollbar-size} / 2);
-}
-
-.highlight {
-  border-color: transparent;
-  transition: border-color 0.5s ease;
-
-  &:hover {
-    border-color: var(--scrollbar-thumb-bg);
-    transition: border-color 0.2s ease;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    /* add border to act as background-color */
-    border-right-style: inset;
-    border-right-width: calc(100vw + 100vh);
-    border-color: inherit;
-    background-color: var(--highlight-bg-color);
-  }
-
-}
-
 /* --- Typography --- */
 
 h1 {
   @extend %heading;
 
-  font-size: 1.8rem;
+  font-size: 1.9rem;
 }
 
 h2 {
   @extend %heading;
   @extend %section;
-  @extend %anchor;
+  @extend %anchor-relative;
 
-  font-size: 1.4rem;
+  font-size: 1.5rem;
 }
 
 h3 {
@@ -106,7 +64,7 @@ h3 {
   @extend %section;
   @extend %anchor;
 
-  font-size: 1.25rem;
+  font-size: 1.2rem;
 }
 
 h4 {
@@ -149,7 +107,19 @@ blockquote {
 }
 
 kbd {
+  font-family: inherit;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.3rem;
+  min-width: 1.75rem;
+  text-align: center;
   margin: 0 0.3rem;
+  padding-top: 0.1rem;
+  color: var(--kbd-text-color);
+  background-color: var(--kbd-bg-color);
+  border-radius: 0.25rem;
+  border: solid 1px var(--kbd-wrap-color);
+  box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
 }
 
 footer {
@@ -158,8 +128,6 @@ footer {
   padding: 0 1rem;
   height: $footer-height;
   font-size: 0.8rem;
-  color: #7a7b7d;
-  background-color: var(--footer-bg-color);
 
   > div.d-flex {
     line-height: 1.2rem;
@@ -174,21 +142,58 @@ footer {
   }
 
   a {
-    color: var(--footer-link);
+    @extend %text-color;
+
     &:link {
       @include no-text-decoration;
     }
+
     &:hover {
       @extend %link-hover;
 
       @include no-text-decoration;
     }
   }
+
   .footer-right {
     text-align: right;
   }
 }
 
+i { // fontawesome icons
+  &.far,
+  &.fas {
+    @extend %no-cursor;
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+img[data-src] {
+  margin: 0.5rem 0;
+
+  &[data-loaded=true] {
+    animation: fade-in linear 0.5s;
+  }
+
+  &.left {
+    float: left;
+    margin: 0.75rem 1rem 1rem 0;
+  }
+
+  &.right {
+    float: right;
+    margin: 0.75rem 0 1rem 1rem;
+  }
+
+  &.shadow {
+    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+  }
+}
+
 /* --- Panels --- */
 
 .access {
@@ -202,27 +207,26 @@ footer {
     position: -webkit-sticky; /* Safari */
     position: sticky;
   }
-  &.topbar-down {
-    top: 6rem;
-  }
+
   > div {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
+
     &:not(:last-child) {
       margin-bottom: 4rem;
     }
   }
-  span {
-    @include panel-label;
-  }
+
   .post-content {
     font-size: 0.9rem;
   }
+
 }
 
-#access-tags {
-  > div.post-content > div {
-    max-width: 80%;
+#panel-wrapper {
+  // the headings
+  .panel-heading {
+    @include label(inherit);
   }
 
   .post-tag {
@@ -234,6 +238,7 @@ footer {
     border-radius: 0.8rem;
     padding: 0.3rem 0.5rem;
     margin: 0 0.35rem 0.5rem 0;
+
     &:hover {
       background-color: #2a408e;
       border-color: #2a408e;
@@ -241,10 +246,13 @@ footer {
       transition: none;
     }
   }
+
+  &.topbar-down > div {
+    top: 6rem;
+  }
 }
 
 #access-lastmod {
-
   li {
     height: 1.8rem;
     overflow: hidden;
@@ -270,21 +278,24 @@ footer {
 .footnotes > ol {
   padding-left: 2rem;
   margin-top: 0.5rem;
+
   > li {
     &:not(:last-child) {
       margin-bottom: 0.3rem;
     }
+
     > p {
       margin-left: 0.25em;
       margin-top: 0;
       margin-bottom: 0;
     }
+
     // [scroll-focus] added by `smooth-scroll.js`
     &:target:not([scroll-focus]),
     &[scroll-focus=true] > p {
       background-color: var(--footnote-target-bg);
       width: fit-content;
-      -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
+      -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
       transition: background-color 1.5s ease-in-out;
     }
   }
@@ -296,7 +307,7 @@ footer {
     @include pl-pr(2px);
 
     border-bottom-style: none !important;
-    -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
+    -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
     transition: background-color 1.5s ease-in-out;
   }
 
@@ -310,32 +321,18 @@ footer {
 .reversefootnote {
   @at-root a#{&} {
     font-size: 0.6rem;
-    position: absolute;
     line-height: 1;
-    padding-top: 0.5em;
-    margin-left: 0.5em;
+    position: relative;
+    bottom: 0.25em;
+    margin-left: 0.25em;
     border-bottom-style: none !important;
   }
 }
 
-.post {
-  h1 {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
-  }
-  em { /* MarkDown italic */
-    padding-right: 0.2rem;
-  }
-  a:hover {
-    code {
-      @extend %link-hover;
-    }
-  }
-}
-
 /* --- Begin of Markdown table style --- */
 
-.table-wrapper { // it will be created by Liquid
+// it will be created by Liquid
+.table-wrapper {
   overflow-x: auto;
   margin-bottom: 1.5rem;
 
@@ -346,6 +343,7 @@ footer {
 
     thead {
       border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+
       th {
         @extend %table-cell;
       }
@@ -354,22 +352,54 @@ footer {
     tbody {
       tr {
         border-bottom: 1px solid var(--tb-border-color);
+
         &:nth-child(2n) {
           background-color: var(--tb-even-bg);
         }
+
         &:nth-child(2n + 1) {
           background-color: var(--tb-odd-bg);
         }
+
         td {
           @extend %table-cell;
         }
       }
-    }
-  }
+    } // tbody
+  }// table
 }
 
 /* --- post --- */
 
+.post {
+  h1 {
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+  }
+
+  a {
+    &.img-link {
+      @extend %no-cursor;
+    }
+
+    // created by `_includes/img-extra.html`
+    &.popup {
+      cursor: zoom-in;
+
+      > img[data-src]:not(.normal):not(.left):not(.right) {
+        @include align-center;
+      }
+    }
+
+    &:hover {
+      code {
+        @extend %link-hover;
+      }
+    }
+  } // a
+
+}
+
 .pageviews .fa-spinner {
   font-size: 80%;
 }
@@ -377,16 +407,20 @@ footer {
 .post-meta {
   font-size: 0.85rem;
   word-spacing: 1px;
+
   a {
-    @extend %link-color;
-    @extend %link-underline;
     &:not(:last-child) {
       margin-right: 2px;
     }
+
     &:hover {
       @extend %link-hover;
     }
   }
+
+  em {
+    @extend %normal-font-style;
+  }
 }
 
 .post-content {
@@ -396,8 +430,16 @@ footer {
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  @mixin caption {
-    + em {
+  a {
+    &:not(.img-link) {
+      @extend %link-underline;
+
+      &:hover {
+        @extend %link-hover;
+      }
+    }
+
+    &.img-link + em {
       display: block;
       text-align: center;
       font-style: normal;
@@ -405,65 +447,9 @@ footer {
       padding: 0;
       color: #6d6c6c;
     }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  img[data-src] {
-    margin: 0.5rem 0;
-
-    &[data-loaded=true] {
-      animation: fade-in linear .5s;
-    }
-
-    &.left {
-      float: left;
-      margin: 0.75rem 1rem 1rem 0;
-    }
-
-    &.right {
-      float: right;
-      margin: 0.75rem 0 1rem 1rem;
-    }
-
-    &.shadow {
-      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-    }
-
-    @include caption;
 
   }
 
-  a {
-    blockquote & {
-      color: var(--link-color);
-    }
-
-    &:not(.img-link) {
-      @extend %link-color;
-      @extend %link-underline;
-      &:hover {
-        @extend %link-hover;
-      }
-    }
-
-    &.popup { // created by `_includes/img-extra.html`
-      cursor: zoom-in;
-
-      > img[data-src]:not(.normal):not(.left):not(.right) {
-        @include align-center;
-      }
-    }
-
-    &.img-link {
-      @include caption;
-    }
-
-  } // a
-
   ul {
     // attribute 'hide-bullet' was added by liquid
     .task-list-item[hide-bullet] {
@@ -473,6 +459,7 @@ footer {
         margin: 0 0.4rem 0.2rem -1.4rem;
         vertical-align: middle;
         color: var(--checkbox-color);
+
         &.checked {
           color: var(--checkbox-checked-color);
         }
@@ -546,6 +533,7 @@ footer {
   padding: 1px 3px;
   border-radius: 3px;
   color: var(--link-color);
+
   &:focus {
     box-shadow: none;
   }
@@ -553,10 +541,6 @@ footer {
 
 /* --- Effects classes --- */
 
-.semi-bold {
-  font-weight: 600 !important;
-}
-
 .loaded {
   display: block !important;
 
@@ -755,7 +739,6 @@ $sidebar-display: "sidebar-display";
       width: 100%;
 
       &:last-child {
-
         a {
           position: relative;
           left: $cursor-width / 2;
@@ -805,7 +788,6 @@ $sidebar-display: "sidebar-display";
   } // ul
 
   .sidebar-bottom {
-    font-size: 1.2rem;
     margin-bottom: 2.1rem;
 
     @include ml-mr(auto);
@@ -822,22 +804,31 @@ $sidebar-display: "sidebar-display";
     }
 
     i {
-      line-height: 1.75rem; // default line-height in body
-      vertical-align: middle;
+      font-size: 1.2rem;
+      line-height: 1.75rem;
     }
 
-    #mode-toggle-wrapper {
-      @extend %icon;
+    .mode-toggle {
+      padding: 0;
+      border: 0;
+      margin-bottom: 1px;
+      background-color: transparent;
 
-      i {
-        @extend %sidebar-links;
-        @extend %cursor-pointer;
+      @extend %icon;
+      @extend %sidebar-links;
+
+      > i {
         @extend %clickable-transition;
       }
 
+      &:hover > i {
+        color: var(--sidebar-active-color);
+      }
     }
 
     .icon-border {
+      @extend %no-cursor;
+
       background-color: var(--sidebar-muted-color);
       content: "";
       width: 3px;
@@ -845,10 +836,6 @@ $sidebar-display: "sidebar-display";
       border-radius: 50%;
     }
 
-    #mode-toggle-wrapper:hover > i {
-      color: var(--sidebar-active-color);
-    }
-
   } // .sidebar-bottom
 
 } // #sidebar
@@ -871,6 +858,7 @@ $sidebar-display: "sidebar-display";
   display: none;
   height: 100%;
   overflow: auto;
+
   .post-content {
     margin-top: 2rem;
   }
@@ -959,6 +947,7 @@ $sidebar-display: "sidebar-display";
   &:focus {
     box-shadow: none;
     background: center;
+
     &.form-control {
       &::-webkit-input-placeholder { @include input-placeholder; }
       &::-moz-placeholder { @include input-placeholder; }
@@ -969,7 +958,11 @@ $sidebar-display: "sidebar-display";
 }
 
 #search-hints {
-  display: none;
+  padding: 0 1rem;
+
+  h4 {
+    margin-bottom: 1.5rem;
+  }
 
   .post-tag {
     display: inline-block;
@@ -978,17 +971,21 @@ $sidebar-display: "sidebar-display";
     background: var(--search-tag-bg);
     border: none;
     padding: 0.5rem;
-    margin: 0 1rem 1rem 0;
+    margin: 0 1.25rem 1rem 0;
+
     &::before {
       content: "#";
       color: var(--text-muted-color);
       padding-right: 0.2rem;
     }
+
+    @extend %link-color;
   }
 }
 
 #search-results {
   padding-bottom: 6rem;
+
   a {
     &:hover {
       @extend %link-hover;
@@ -1039,7 +1036,9 @@ $sidebar-display: "sidebar-display";
   white-space: nowrap;
 }
 
-#page {
+#core-wrapper {
+  min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+
   .categories,
   #tags,
   #archives {
@@ -1076,20 +1075,24 @@ $sidebar-display: "sidebar-display";
   @include pl-pr(0);
 }
 
-#main > div.row:first-child > div {
-  &:nth-child(1),
-  &:nth-child(2) {
-    margin-top: $topbar-height; /* same as the height of topbar */
-  }
-  &:first-child {
-    /* 3rem for topbar, 6rem for footer */
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
-  }
-}
+#main {
+  .row:first-child {
+    > div {
+      &:nth-child(1),
+      &:nth-child(2) {
+        margin-top: $topbar-height; /* same as the height of topbar */
+      }
 
-#post-wrapper {
-  min-height: calc(
-    100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
+      &:first-child {
+        /* 3rem for topbar, 6rem for footer */
+        min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
+      }
+    }
+  }
+
+  div.row:first-of-type:last-of-type { // alone
+    margin-bottom: 4rem;
+  }
 }
 
 #topbar-wrapper.row,
@@ -1146,12 +1149,12 @@ $sidebar-display: "sidebar-display";
     min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
   }
 
-  #post-wrapper {
-    min-height: calc(
-      100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
+  #core-wrapper {
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+
     h1 {
       margin-top: 2.2rem;
-      font-size: 1.55rem;
+      font-size: 1.75rem;
     }
   }
 
@@ -1170,6 +1173,7 @@ $sidebar-display: "sidebar-display";
 
   footer {
     height: $footer-height;
+
     > div.d-flex {
       width: 100%;
       padding: 1.5rem 0;
@@ -1178,6 +1182,7 @@ $sidebar-display: "sidebar-display";
       -ms-flex-pack: distribute !important;
       justify-content: space-around !important;
     }
+
     .footer-left,
     .footer-right {
       text-align: center;
@@ -1201,13 +1206,13 @@ $sidebar-display: "sidebar-display";
   .footnotes ol > li {
     padding-top: 3.5rem;
     margin-top: -3.2rem;
+
     &:first-child {
       margin-top: -3.5rem;
     }
   }
 
   [#{$sidebar-display}] {
-
     #sidebar {
       transform: translateX(0);
     }
@@ -1272,6 +1277,7 @@ $sidebar-display: "sidebar-display";
     &.loaded ~ a {
       margin-right: 1rem;
     }
+
     .fa-times-circle {
       right: 5.2rem;
     }
@@ -1286,19 +1292,15 @@ $sidebar-display: "sidebar-display";
     letter-spacing: 0;
   }
 
-  #search-hints {
-    display: block;
-    padding: 0 1rem;
-  }
-
   #tags {
     -webkit-box-pack: center !important;
     -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 
-  #page h1.dynamic-title {
+  h1.dynamic-title {
     display: none;
+
     ~ .post-content {
       margin-top: 3rem;
     }
@@ -1373,7 +1375,6 @@ $sidebar-display: "sidebar-display";
 
 /* Compact icons in sidebar & panel hidden */
 @media all and (min-width: 850px) and (max-width: 1199px) {
-
   #sidebar {
     width: $sidebar-width-small;
 
@@ -1387,6 +1388,7 @@ $sidebar-display: "sidebar-display";
       span {
         width: 2rem;
       }
+
       .icon-border {
         left: -3px;
       }
@@ -1446,7 +1448,6 @@ $sidebar-display: "sidebar-display";
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-
   #main > div.row > div.col-xl-8 {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 75%;
@@ -1476,18 +1477,25 @@ $sidebar-display: "sidebar-display";
 
   #search-results > div {
     width: 46%;
+
     &:nth-child(odd) {
       margin-right: 1.5rem;
     }
+
     &:nth-child(even) {
       margin-left: 1.5rem;
     }
+
     &:last-child:nth-child(odd) {
       position: relative;
       right: 24.3%;
     }
   }
 
+  #search-hints {
+    display: none;
+  }
+
   .post-content {
     font-size: 1.03rem;
   }
@@ -1499,9 +1507,9 @@ $sidebar-display: "sidebar-display";
 }
 
 @media all and (min-width: 1400px) {
-
   #main > div.row {
     padding-left: calc((100% - #{$main-content-max-width}) / 2);
+
     > div.col-xl-8 {
       max-width: 850px;
     }
@@ -1509,6 +1517,7 @@ $sidebar-display: "sidebar-display";
 
   #search-result-wrapper {
     padding-right: 2rem;
+
     > div {
       max-width: 1110px;
     }
@@ -1527,13 +1536,13 @@ $sidebar-display: "sidebar-display";
 }
 
 @media all and (min-width: 1650px) {
-
   #breadcrumb {
     padding-left: 0;
   }
 
   #main > div.row > div.col-xl-8 {
     padding-left: 0;
+
     > div:first-child {
       padding-left: 0.55rem !important;
       padding-right: 1.9rem !important;
@@ -1581,6 +1590,7 @@ $sidebar-display: "sidebar-display";
         > a {
           width: 6.2rem;
           height: 6.2rem;
+
           &.mx-auto {
             margin-left: 0 !important;
           }
@@ -1645,6 +1655,7 @@ $sidebar-display: "sidebar-display";
       }
 
       > span,
+      > button.mode-toggle,
       > a {
         @include ml-mr(0.15rem);
 

_sass/addon/module.scss

@@ -10,6 +10,46 @@
   font-family: 'Lato', 'Microsoft Yahei', sans-serif;
 }
 
+%section {
+  #core-wrapper & {
+    margin-top: 2.5rem;
+    margin-bottom: 2rem;
+  }
+}
+
+%anchor {
+  .anchor {
+    font-size: 1rem;
+    margin-left: 0.5rem;
+  }
+
+  @media (hover: hover) {
+    .anchor {
+      border-bottom: none !important;
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
+    }
+
+    &:hover {
+      .anchor {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
+      }
+    }
+  }
+}
+
+%anchor-relative {
+  @extend %anchor;
+
+  .anchor {
+    position: relative;
+    bottom: 1px;
+  }
+}
+
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
@@ -39,26 +79,22 @@
   transition: color 0.35s ease-in-out;
 }
 
+%no-cursor {
+  user-select: none;
+}
+
 %no-bottom-border {
   border-bottom: none;
 }
 
-%section {
-  #post-wrapper & {
-    line-height: 1.2;
-    margin-bottom: 1rem;
-  }
-}
-
-%anchor {
-  padding-top: 3.5rem;
-  margin-top: -2.5rem;
-}
-
 %cursor-pointer {
   cursor: pointer;
 }
 
+%normal-font-style {
+  font-style: normal;
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
@@ -84,28 +120,12 @@
   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;
 }
 
-@mixin panel-label {
-  @include label(inherit);
-
-  display: block;
-  line-height: 1.2;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  margin-top: 0;
-  margin-bottom: 0;
-  letter-spacing: -0.02em;
-}
-
 @mixin align-center {
   position: relative;
   left: 50%;

_sass/addon/syntax.scss

@@ -38,13 +38,8 @@ $code-radius: 6px;
 }
 
 %code-snippet-padding {
-  padding: 1.2rem;
-}
-
-div > pre {
-  @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
-  @extend %code-snippet-padding;
+  padding-left: 1rem;
+  padding-right: 1.5rem;
 }
 
 .highlighter-rouge {
@@ -65,6 +60,8 @@ div > pre {
   }
 
   overflow: auto;
+  padding-top: 0.5rem;
+  padding-bottom: 1rem;
 
   pre {
     margin-bottom: 0;
@@ -74,19 +71,12 @@ div > pre {
   }
 
   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;
-  }
-
   .lineno {
     padding-right: 0.5rem;
     min-width: 2.2rem;
@@ -120,22 +110,26 @@ code {
     background-color: var(--inline-code-bg);
   }
 
-  @at-root a > &.highlighter-rouge {
+  a > &.highlighter-rouge {
     padding-bottom: 0; // show link's underlinke
     color: inherit;
   }
 
-  @at-root a:hover > &.highlighter-rouge {
+  a:hover > &.highlighter-rouge {
     border-bottom: none;
   }
 
   blockquote &.highlighter-rouge {
     color: inherit;
   }
+
+  .highlight > & {
+    color: transparent;
+  }
 }
 
 td.rouge-code {
-  padding: 1.2rem 1.5rem 1.2rem 1rem;
+  @extend %code-snippet-padding;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
@@ -157,63 +151,82 @@ div {
     pre.lineno {
       display: none;
     }
+
     td.rouge-code {
-      @extend %code-snippet-padding;
+      padding-left: 1.5rem;
     }
   }
 }
 
 .code-header {
-  background: var(--code-header-bg);
+  @extend %no-cursor;
+
+  $code-header-height: 2.25rem;
+
   border-top-left-radius: $code-radius;
   border-top-right-radius: $code-radius;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  line-height: 1.85rem;
+  height: $code-header-height;
 
-  // icons
-  i {
-    font-size: 1rem;
-    color: var(--lang-badge-muted-color);
+  &::before {
+    $dot-size: 0.75rem;
+    $dot-margin: 0.5rem;
 
-    &.small {
-      font-size: 70%;
-    }
+    content: "";
+    display: inline-block;
+    margin-left: 1rem;
+    width: $dot-size;
+    height: $dot-size;
+    border-radius: 50%;
+    background-color: var(--code-header-muted-color);
+    box-shadow:
+      ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
+      ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
   }
 
   // the label block
   span {
-    padding-left: 0.35rem;
-
-    &::after {
-      content: attr(text-data);
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: var(--lang-badge-color);
-    }
-
+    // label icon
     i {
-      margin: 0 0.5rem;
+      font-size: 1rem;
+      margin-right: 0.4rem;
+      color: var(--code-header-icon-color);
+
+      &.small {
+        font-size: 70%;
+      }
     }
 
     @at-root [file] #{&} > i {
       position: relative;
       top: 1px; // center the file icon
-      margin-left: 0.25rem;
     }
 
+    // label text
+    &::after {
+      content: attr(label-text);
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--code-header-text-color);
+    }
   }
 
   // clipboard
   button {
-    border: 1px solid var(--code-header-bg);
+    @extend %cursor-pointer;
+
+    border: 1px solid transparent;
     border-radius: $code-radius;
+    height: $code-header-height;
+    width: $code-header-height;
     padding: 0;
-    width: 1.95rem;
     background-color: inherit;
 
-    @extend %cursor-pointer;
+    i {
+      color: var(--code-header-icon-color);
+    }
 
     &[timeout] {
       &:hover {

_sass/addon/variables.scss

@@ -27,7 +27,7 @@ $main-content-max-width: 1150px !default;
 
 $panel-max-width: 300px !default;
 
-$post-extend-min-height: 35rem !default;
+$bottom-min-height: 35rem !default;
 
 /* syntax highlight */
 

_sass/colors/dark-syntax.scss

@@ -74,9 +74,9 @@
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;
   --inline-code-bg: #272822;
-  --code-header-bg: #353535;
-  --lang-badge-color: #858586;
-  --lang-badge-muted-color: #6c6c6d;
+  --code-header-text-color: #6a6a6a;
+  --code-header-muted-color: rgb(60 60 60);
+  --code-header-icon-color: rgb(86 86 86);
   --clipboard-checked-color: #2bcc2b;
 
   .highlight {
@@ -84,5 +84,4 @@
   }
 
   pre { color: #bfbfbf; } /* override Bootstrap */
-  kbd { background-color: black; }
 }

_sass/colors/dark-typography.scss

@@ -8,8 +8,6 @@
   --mask-bg: rgb(68, 69, 70);
   --main-wrapper-bg: rgb(27, 27, 30);
   --main-border-color: rgb(44, 45, 45);
-  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
-  --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
 
   /* Common color */
   --text-color: rgb(175, 176, 177);
@@ -67,6 +65,10 @@
   --card-bg: rgb(39, 40, 43);
   --card-border-color: rgb(53, 53, 60);
   --card-box-shadow: var(--main-wrapper-bg);
+  --preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
+  --kbd-wrap-color: #6a6a6a;
+  --kbd-text-color: #d3d3d3;
+  --kbd-bg-color: #242424;
 
   /* tags */
   --tag-border: rgb(59, 79, 88);
@@ -84,12 +86,8 @@
   --timeline-color: rgb(63, 65, 68);
   --timeline-year-dot-color: var(--timeline-color);
 
-  /* Footer */
-  --footer-bg-color: var(--main-wrapper-bg);
-  --footer-link: rgb(171, 171, 171);
-
-  .post-content img {
-    filter: brightness(90%);
+  .post img[data-src] {
+    filter: brightness(95%);
   }
 
   hr {
@@ -116,11 +114,13 @@
     .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);
       }
@@ -128,13 +128,21 @@
   }
 
   #archives li:nth-child(odd) {
-    background-image: linear-gradient(
-      to left,
-      rgb(26, 26, 30),
-      rgb(39, 39, 45),
-      rgb(39, 39, 45),
-      rgb(39, 39, 45),
-      rgb(26, 26, 30));
+    background-image:
+      linear-gradient(
+        to left,
+        rgb(26, 26, 30),
+        rgb(39, 39, 45),
+        rgb(39, 39, 45),
+        rgb(39, 39, 45),
+        rgb(26, 26, 30)
+      );
+  }
+
+  color-scheme: dark;
+
+  #disqus_thread {
+    color-scheme: none;
   }
 
 } // dark-scheme

_sass/colors/light-syntax.scss

@@ -71,9 +71,9 @@
   --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
   --inline-code-bg: #f3f3f3;
-  --code-header-bg: #eaeaea;
-  --lang-badge-color: rgb(128 128 128 / 87%);
-  --lang-badge-muted-color: rgb(128 128 128 / 36%);
+  --code-header-text-color: #a3a3b1;
+  --code-header-muted-color: #ebebeb;
+  --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
 } // light-syntax

_sass/colors/light-typography.scss

@@ -8,8 +8,6 @@
   --mask-bg: #c1c3c5;
   --main-wrapper-bg: white;
   --main-border-color: #f3f3f3;
-  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
-  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
 
   /* Common color */
   --text-color: #34343c;
@@ -66,6 +64,10 @@
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
+  --preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
+  --kbd-wrap-color: #bdbdbd;
+  --kbd-text-color: var(--text-color);
+  --kbd-bg-color: white;
 
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);
@@ -76,7 +78,4 @@
   --timeline-node-bg: #c2c6cc;
   --timeline-year-dot-color: #ffffff;
 
-  /* Footer */
-  --footer-bg-color: #ffffff;
-  --footer-link: #424242;
 } // light-scheme

_sass/jekyll-theme-chirpy.scss

@@ -1,7 +1,7 @@
 /*!
  * The styles for Jekyll theme Chirpy
  *
- * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v5.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

_sass/layout/archives.scss

@@ -41,6 +41,7 @@
     &:not(:first-child) {
       position: relative;
       left: 4px;
+
       &::after {
         left: 67px;
       }
@@ -98,6 +99,7 @@
   .date {
     white-space: nowrap;
     display: inline-block;
+
     &.month {
       width: 1.4rem;
       text-align: center;
@@ -120,6 +122,7 @@
         z-index: 1;
       }
     }
+
     &.day {
       font-size: 85%;
       font-family: 'Lato', sans-serif;
@@ -127,7 +130,7 @@
       margin-right: -2px;
       width: 1.2rem;
       position: relative;
-      left: -.15rem;
+      left: -0.15rem;
     }
   } // #archives .date
 
@@ -136,6 +139,7 @@
 @media all and (max-width: 576px) {
   #archives {
     margin-top: -1rem;
+
     ul {
       letter-spacing: 0;
     }

_sass/layout/category-tag.scss

@@ -3,7 +3,7 @@
 */
 
 .dash {
-  margin: 0 .5rem .6rem .5rem;
+  margin: 0 0.5rem 0.6rem 0.5rem;
   border-bottom: 2px dotted var(--dash-color);
 }
 
@@ -60,8 +60,9 @@
   #page-tag {
     ul > li {
       &::before {
-        margin: 0 .5rem;
+        margin: 0 0.5rem;
       }
+
       > a {
         white-space: nowrap;
         overflow: hidden;

_sass/layout/home.scss

@@ -22,24 +22,29 @@
       border-radius: 50%;
       border: 1px solid var(--btn-paginator-border-color);
       background-color: var(--button-bg);
+
       &:hover {
         background-color: var(--btn-paginator-hover-color);
       }
     }
+
     &.active {
       .page-link {
         background-color: var(--btn-paginator-hover-color);
         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%;
@@ -69,9 +74,14 @@
     .post-meta {
       i {
         font-size: 0.73rem;
+
+        &:not(:first-child) {
+          margin-left: 1.2rem;
+        }
       }
-      span:not(:last-child) {
-        margin-right: 1.2rem;
+
+      em {
+        @extend %normal-font-style;
       }
     }
 
@@ -79,6 +89,7 @@
       margin-top: 0.6rem;
       margin-bottom: 0.6rem;
       color: var(--post-list-text-color);
+
       > p {
         /* Make preview shorter on the homepage */
         margin: 0;
@@ -96,13 +107,13 @@
         padding-left: 3px;
         color: var(--pin-color);
       }
+
       > span {
         display: none;
       }
     }
 
   } // .post-preview
-
 } // #post-list
 
 /* Hide SideBar and TOC */
@@ -122,9 +133,9 @@
 
 /* Sidebar is visible */
 @media all and (min-width: 831px) {
-
   #post-list {
     margin-top: 1.5rem;
+
     .post-preview .post-meta {
       .pin {
         background: var(--pin-bg);

_sass/layout/post.scss

@@ -16,27 +16,37 @@
   border-color: var(--btn-border-color);
 }
 
-@mixin dot($pl: 0.2rem, $pr: 0.4rem) {
+@mixin dot($pl: 0.25rem, $pr: 0.25rem) {
   content: "\2022";
-  color: rgba(158, 158, 158, 0.8);
   padding-left: $pl;
   padding-right: $pr;
 }
 
-#post-wrapper .post-meta {
-  > div:nth-child(2) {
-    > span:not(:first-child)::before {
-      @include dot;
+%text-color {
+  color: var(--text-color);
+}
+
+h1 + .post-meta {
+  span + span::before {
+    @include dot;
+  }
+
+  em {
+    @extend %text-color;
+
+    a {
+      @extend %text-color;
     }
   }
 }
 
-.post-content {
-  .preview-img {
-    @include align-center;
+img.preview-img {
+  margin-top: 3.75rem;
+  margin-bottom: 0;
+  border-radius: 6px;
 
-    margin-top: 0;
-    margin-bottom: 2.5rem !important;
+  &.bg[data-loaded=true] {
+    background: var(--preview-img-bg);
   }
 }
 
@@ -44,6 +54,10 @@
   margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
+
+  .post-meta a {
+    @extend %link-underline;
+  }
 }
 
 .post-tags {
@@ -109,7 +123,7 @@
     white-space: normal;
   }
 
-} // .post-navigation
+} /* .post-navigation */
 
 @keyframes fade-up {
   from {
@@ -131,12 +145,6 @@
   top: 4rem;
   transition: top 0.2s ease-in-out;
   animation: fade-up 0.8s;
-  &.topbar-down {
-    top: 6rem;
-  }
-  > span {
-    @include panel-label;
-  }
 }
 
 #toc li a {
@@ -162,6 +170,11 @@ nav[data-toggle=toc] {
   > h3 {
     @include label(1.1rem, 600);
   }
+
+  em {
+    @extend %normal-font-style;
+  }
+
   .card {
     border-color: var(--card-border-color);
     background-color: var(--card-bg);
@@ -169,9 +182,11 @@ nav[data-toggle=toc] {
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
+
     h3 {
-      color: var(--text-color);
+      @extend %text-color;
     }
+
     &:hover {
       -webkit-transform: translate3d(0, -3px, 0);
       transform: translate3d(0, -3px, 0);
@@ -200,6 +215,7 @@ nav[data-toggle=toc] {
   ul {
     list-style-type: none;
     padding-inline-start: 1.5rem;
+
     > li::before {
       background: #c2c9d4;
       width: 5px;
@@ -214,14 +230,17 @@ nav[data-toggle=toc] {
   }
 }
 
-#post-extend-wrapper {
+#tail-wrapper {
   min-height: 2rem;
 
-  #disqus_thread {
-    min-height: 7.5rem;
+  > div:last-of-type {
     margin-bottom: 2rem;
   }
 
+  #disqus_thread {
+    min-height: 8.5rem;
+  }
+
 }
 
 .post-tail-bottom a {
@@ -238,17 +257,21 @@ nav[data-toggle=toc] {
 
   .share-icons {
     font-size: 1.2rem;
+
     a {
       &:not(:last-child) {
         margin-right: 0.25rem;
       }
+
       &:hover {
         text-decoration: none;
+
         > i {
           @extend %btn-share-hovor;
         }
       }
     }
+
     > i {
       position: relative;
       bottom: 1px;
@@ -259,28 +282,32 @@ nav[data-toggle=toc] {
         @extend %btn-share-hovor;
       }
     }
+
     .fab {
       &.fa-twitter {
         @include btn-sharing-color(rgba(29, 161, 242, 1));
       }
+
       &.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
+  } /* .share-icons */
 
   .fas.fa-link {
     @include btn-sharing-color(rgb(171, 171, 171));
   }
 
-} // .share-wrapper
+} /* .share-wrapper */
 
 .share-label {
   @include label(inherit, 400, inherit);
@@ -292,8 +319,10 @@ nav[data-toggle=toc] {
 
 .license-wrapper {
   line-height: 1.2rem;
+
   > a {
-    font-weight: 600;
+    color: var(--text-color);
+
     &:hover {
       @extend %link-hover;
     }
@@ -302,13 +331,19 @@ nav[data-toggle=toc] {
   span:last-child {
     font-size: 0.85rem;
   }
-} // .license-wrapper
+
+} /* .license-wrapper */
 
 @media all and (max-width: 576px) {
+  .preview-img[data-src] {
+    margin-top: 2.2rem;
+  }
+
   .post-tail-bottom {
     -ms-flex-wrap: wrap-reverse !important;
     flex-wrap: wrap-reverse !important;
-    >div:first-child {
+
+    > div:first-child {
       width: 100%;
       margin-top: 1rem;
     }
@@ -321,28 +356,17 @@ nav[data-toggle=toc] {
   }
 }
 
-@media all and (min-width: 768px) {
-  #post-wrapper {
-    .post-meta {
-      >div:not(:first-child)::before {
-        @include dot(0.5rem, 0.2rem);
-      }
-      &.flex-column {
-        -webkit-box-orient: horizontal !important;
-        -webkit-box-direction: normal !important;
-        -ms-flex-direction: row !important;
-        flex-direction: row !important;
-      }
-    }
-  } // .post
-}
-
 /* Hide SideBar and TOC */
-@media all and (max-width: 830px) {
+@media all and (max-width: 849px) {
   .post-navigation {
     padding-left: 0;
     padding-right: 0;
-    margin-left: -.5rem;
-    margin-right: -.5rem;
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+  .preview-img[data-src] {
+    max-width: 100vw;
+    border-radius: 0;
   }
 }

_sass/layout/tags.scss

@@ -10,6 +10,7 @@
   letter-spacing: 0;
   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;

assets/js/data/search.json

@@ -6,7 +6,7 @@ layout: compress
   {% for post in site.posts %}
   {
     "title": "{{ post.title | escape }}",
-    "url": "{{ site.baseurl }}{{ post.url }}",
+    "url": "{{ post.url | relative_url }}",
     "categories": "{{ post.categories | join: ', '}}",
     "tags": "{{ post.tags | join: ', ' }}",
     "date": "{{ post.date }}",

assets/js/dist/categories.min.js

@@ -1,6 +1,6 @@
 /*!
- * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */
-$(function(){$(window).scroll(()=>{$(this).scrollTop()>50&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){const o=$("#sidebar-trigger"),e=$("#search-trigger"),s=$("#search-cancel"),t=$("#search-cleaner"),a=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),d=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),f=function(){let o=0;return{block(){o=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(o)},getOffset:()=>o}}(),u={on(){o.addClass("unloaded"),l.addClass("unloaded"),e.addClass("unloaded"),n.addClass("d-flex"),s.addClass("loaded")},off(){s.removeClass("loaded"),n.removeClass("d-flex"),o.removeClass("unloaded"),l.removeClass("unloaded"),e.removeClass("unloaded")}},p=function(){let o=!1;return{on(){o||(f.block(),r.removeClass("unloaded"),a.addClass("unloaded"),o=!0)},off(){o&&(d.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),r.addClass("unloaded"),t.removeClass("visible"),a.removeClass("unloaded"),f.release(),i.val(""),o=!1)},isVisible:()=>o}}();function h(){return s.hasClass("loaded")}e.click(function(){u.on(),p.on(),i.focus()}),s.click(function(){u.off(),p.off()}),i.focus(function(){n.addClass("input-focus")}),i.focusout(function(){n.removeClass("input-focus")}),i.on("keyup",function(o){8===o.keyCode&&""===i.val()?h()?c.removeClass("unloaded"):p.off():""!==i.val()&&(p.on(),t.hasClass("visible")||t.addClass("visible"),h()&&c.addClass("unloaded"))}),t.on("click",function(){i.val(""),h()?(c.removeClass("unloaded"),d.empty()):p.off(),i.focus(),t.removeClass("visible")})}),$(function(){const o=function(){let o=!1;const e=$("body");return{toggle(){!1===o?e.attr("sidebar-display",""):e.removeAttr("sidebar-display"),o=!o}}}();$("#sidebar-trigger").click(o.toggle),$("#mask").click(o.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#topbar-wrapper"),e=$("#toc-wrapper"),s=$(".access"),t=$("#search-input");let a,l=0;const n=5,r=o.outerHeight();$(window).scroll(function(o){$("#topbar-title").is(":hidden")&&(a=!0)}),setInterval(function(){a&&(!function(){var a=$(this).scrollTop();Math.abs(l-a)<=n||(a>l&&a>r?(o.removeClass("topbar-down").addClass("topbar-up"),e.length>0&&e.removeClass("topbar-down"),s.length>0&&s.removeClass("topbar-down"),t.is(":focus")&&t.blur()):a+$(window).height()<$(document).height()&&(o.removeClass("topbar-up").addClass("topbar-down"),e.length>0&&e.addClass("topbar-down"),s.length>0&&s.addClass("topbar-down")),l=a)}(),a=!1)},250)}),$(function(){const o=$("#topbar-title"),e=$("div.post>h1"),s=o.text().trim();let t=e.length>0?e.text().trim():$("h1").text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(t)&&(t=t.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){if($("#post-list").length||e.is(":hidden")||o.is(":hidden")||$("#sidebar.sidebar-expand").length)return!1;$(this).scrollTop()>=95?o.text()!==t&&o.text(t):o.text()!==s&&o.text(s)}),o.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){const o=$(".collapse");o.on("hide.bs.collapse",function(){const o="h_"+$(this).attr("id").substring("l_".length);o&&($(`#${o} .far.fa-folder-open`).attr("class","far fa-folder fa-fw"),$(`#${o} i.fas`).addClass("rotate"),$(`#${o}`).removeClass("hide-border-bottom"))}),o.on("show.bs.collapse",function(){const o="h_"+$(this).attr("id").substring("l_".length);o&&($(`#${o} .far.fa-folder`).attr("class","far fa-folder-open fa-fw"),$(`#${o} i.fas`).removeClass("rotate"),$(`#${o}`).addClass("hide-border-bottom"))})});
+$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(e=>{const o=$(e.target);let t=o.prop("tagName")==="button".toUpperCase()?o:o.parent();t.blur(),flipMode()})}),$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),s=$("#search-cleaner"),a=$("#main"),l=$("#topbar-title"),r=$("#search-wrapper"),n=$("#search-result-wrapper"),d=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),f={on(){e.addClass("unloaded"),l.addClass("unloaded"),o.addClass("unloaded"),r.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),r.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),o.removeClass("unloaded")}},p=function(){let e=!1;return{on(){e||(u.block(),n.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(d.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),s.removeClass("visible"),a.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible(){return e}}}();function h(){return t.hasClass("loaded")}o.click(function(){f.on(),p.on(),i.focus()}),t.click(function(){f.off(),p.off()}),i.focus(function(){r.addClass("input-focus")}),i.focusout(function(){r.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?h()?c.removeClass("unloaded"):p.off():""!==i.val()&&(p.on(),s.hasClass("visible")||s.addClass("visible"),h()&&c.addClass("unloaded"))}),s.on("click",function(){i.val(""),h()?(c.removeClass("unloaded"),d.empty()):p.off(),i.focus(),s.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),s=$("#panel-wrapper"),a=$("#search-input"),l="topbar-up",r="topbar-down",n="toc-scrolling-up";let o,d=0;const i=t.outerHeight(),c=t.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(o=!0)}),setInterval(function(){o&&(function(){var e,o=$(this).scrollTop();Math.abs(d-o)<=i||(o>d?o>c&&(t.removeClass(r).addClass(l),s.removeClass(r),a.is(":focus")&&a.blur()):o+$(window).height()<$(document).height()&&(void 0!==(e=t.attr(n))?"false"===e&&t.removeAttr(n):(t.removeClass(l).addClass(r),s.addClass(r))),d=o)}(),o=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),t=e.text().trim();let s=(0<o.length?o:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(s)&&(s=s.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==s&&e.text(s):e.text()!==t&&e.text(t))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){const e=$(".collapse");e.on("hide.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder-open`).attr("class","far fa-folder fa-fw"),$(`#${e} i.fas`).addClass("rotate"),$("#"+e).removeClass("hide-border-bottom"))}),e.on("show.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder`).attr("class","far fa-folder-open fa-fw"),$(`#${e} i.fas`).removeClass("rotate"),$("#"+e).addClass("hide-border-bottom"))})});

assets/js/dist/commons.min.js

@@ -1,6 +1,6 @@
 /*!
- * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */
-$(function(){$(window).scroll(()=>{$(this).scrollTop()>50&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),s=$("#search-cancel"),t=$("#search-cleaner"),a=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),d=$("#search-result-wrapper"),r=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset:()=>e}}(),p={on(){e.addClass("unloaded"),l.addClass("unloaded"),o.addClass("unloaded"),n.addClass("d-flex"),s.addClass("loaded")},off(){s.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),o.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),d.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(r.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),d.addClass("unloaded"),t.removeClass("visible"),a.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible:()=>e}}();function h(){return s.hasClass("loaded")}o.click(function(){p.on(),f.on(),i.focus()}),s.click(function(){p.off(),f.off()}),i.focus(function(){n.addClass("input-focus")}),i.focusout(function(){n.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?h()?c.removeClass("unloaded"):f.off():""!==i.val()&&(f.on(),t.hasClass("visible")||t.addClass("visible"),h()&&c.addClass("unloaded"))}),t.on("click",function(){i.val(""),h()?(c.removeClass("unloaded"),r.empty()):f.off(),i.focus(),t.removeClass("visible")})}),$(function(){const e=function(){let e=!1;const o=$("body");return{toggle(){!1===e?o.attr("sidebar-display",""):o.removeAttr("sidebar-display"),e=!e}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#topbar-wrapper"),o=$("#toc-wrapper"),s=$(".access"),t=$("#search-input");let a,l=0;const n=5,d=e.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(a=!0)}),setInterval(function(){a&&(!function(){var a=$(this).scrollTop();Math.abs(l-a)<=n||(a>l&&a>d?(e.removeClass("topbar-down").addClass("topbar-up"),o.length>0&&o.removeClass("topbar-down"),s.length>0&&s.removeClass("topbar-down"),t.is(":focus")&&t.blur()):a+$(window).height()<$(document).height()&&(e.removeClass("topbar-up").addClass("topbar-down"),o.length>0&&o.addClass("topbar-down"),s.length>0&&s.addClass("topbar-down")),l=a)}(),a=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),s=e.text().trim();let t=o.length>0?o.text().trim():$("h1").text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(t)&&(t=t.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){if($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)return!1;$(this).scrollTop()>=95?e.text()!==t&&e.text(t):e.text()!==s&&e.text(s)}),e.click(function(){$("body,html").animate({scrollTop:0},800)})});
+$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(e=>{const o=$(e.target);let t=o.prop("tagName")==="button".toUpperCase()?o:o.parent();t.blur(),flipMode()})}),$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),s=$("#search-cleaner"),l=$("#main"),a=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),d=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),a.addClass("unloaded"),o.addClass("unloaded"),n.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),a.removeClass("unloaded"),o.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),l.addClass("unloaded"),e=!0)},off(){e&&(d.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),r.addClass("unloaded"),s.removeClass("visible"),l.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible(){return e}}}();function h(){return t.hasClass("loaded")}o.click(function(){p.on(),f.on(),i.focus()}),t.click(function(){p.off(),f.off()}),i.focus(function(){n.addClass("input-focus")}),i.focusout(function(){n.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?h()?c.removeClass("unloaded"):f.off():""!==i.val()&&(f.on(),s.hasClass("visible")||s.addClass("visible"),h()&&c.addClass("unloaded"))}),s.on("click",function(){i.val(""),h()?(c.removeClass("unloaded"),d.empty()):f.off(),i.focus(),s.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),s=$("#panel-wrapper"),l=$("#search-input"),a="topbar-up",n="topbar-down",r="toc-scrolling-up";let o,d=0;const i=t.outerHeight(),c=t.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(o=!0)}),setInterval(function(){o&&(function(){var e,o=$(this).scrollTop();Math.abs(d-o)<=i||(o>d?o>c&&(t.removeClass(n).addClass(a),s.removeClass(n),l.is(":focus")&&l.blur()):o+$(window).height()<$(document).height()&&(void 0!==(e=t.attr(r))?"false"===e&&t.removeAttr(r):(t.removeClass(a).addClass(n),s.addClass(n))),d=o)}(),o=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),t=e.text().trim();let s=(0<o.length?o:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(s)&&(s=s.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==s&&e.text(s):e.text()!==t&&e.text(t))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})});

assets/js/dist/home.min.js

@@ -1,6 +1,6 @@
 /*!
- * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */
-$(function(){$(window).scroll(()=>{$(this).scrollTop()>50&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),l=$("#main"),n=$("#topbar-title"),s=$("#search-wrapper"),r=$("#search-result-wrapper"),i=$("#search-results"),d=$("#search-input"),c=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset:()=>e}}(),p={on(){e.addClass("unloaded"),n.addClass("unloaded"),t.addClass("unloaded"),s.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),s.removeClass("d-flex"),e.removeClass("unloaded"),n.removeClass("unloaded"),t.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),l.addClass("unloaded"),e=!0)},off(){e&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),l.removeClass("unloaded"),u.release(),d.val(""),e=!1)},isVisible:()=>e}}();function h(){return o.hasClass("loaded")}t.click(function(){p.on(),f.on(),d.focus()}),o.click(function(){p.off(),f.off()}),d.focus(function(){s.addClass("input-focus")}),d.focusout(function(){s.removeClass("input-focus")}),d.on("keyup",function(e){8===e.keyCode&&""===d.val()?h()?c.removeClass("unloaded"):f.off():""!==d.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),h()&&c.addClass("unloaded"))}),a.on("click",function(){d.val(""),h()?(c.removeClass("unloaded"),i.empty()):f.off(),d.focus(),a.removeClass("visible")})}),$(function(){const e=function(){let e=!1;const t=$("body");return{toggle(){!1===e?t.attr("sidebar-display",""):t.removeAttr("sidebar-display"),e=!e}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#topbar-wrapper"),t=$("#toc-wrapper"),o=$(".access"),a=$("#search-input");let l,n=0;const s=5,r=e.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(!function(){var l=$(this).scrollTop();Math.abs(n-l)<=s||(l>n&&l>r?(e.removeClass("topbar-down").addClass("topbar-up"),t.length>0&&t.removeClass("topbar-down"),o.length>0&&o.removeClass("topbar-down"),a.is(":focus")&&a.blur()):l+$(window).height()<$(document).height()&&(e.removeClass("topbar-up").addClass("topbar-down"),t.length>0&&t.addClass("topbar-down"),o.length>0&&o.addClass("topbar-down")),n=l)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),t=$("div.post>h1"),o=e.text().trim();let a=t.length>0?t.text().trim():$("h1").text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){if($("#post-list").length||t.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)return!1;$(this).scrollTop()>=95?e.text()!==a&&e.text(a):e.text()!==o&&e.text(o)}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){let e=$(".timeago").length,t=void 0;const o=$("meta[name=day-prompt]").attr("content"),a=$("meta[name=hour-prompt]").attr("content"),l=$("meta[name=minute-prompt]").attr("content"),n=$("meta[name=justnow-prompt]").attr("content");function s(){return $(".timeago").each(function(){if($(this).children("i").length>0){let t=$(this).clone().children().remove().end().text(),s=$(this).children("i"),r=s.text();$(this).text(function(t,s){let r=new Date,i=new Date(t);if(i.getFullYear()!==r.getFullYear()||i.getMonth()!==r.getMonth())return s;let d=Math.floor((r-i)/1e3),c=Math.floor(d/86400);if(c>=1)return e-=1,` ${c} ${o}`;let u=Math.floor(d/3600);if(u>=1)return` ${u} ${a}`;let $=Math.floor(d/60);return $>=1?` ${$} ${l}`:n}(r,t)),$(this).append(s)}}),0===e&&void 0!==t&&clearInterval(t),e}0!==e&&s()>0&&(t=setInterval(s,6e4))});
+$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(t=>{const e=$(t.target);let o=e.prop("tagName")==="button".toUpperCase()?e:e.parent();o.blur(),flipMode()})}),$(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),s=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),i=$("#search-results"),d=$("#search-input"),c=$("#search-hints"),u=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),l.addClass("unloaded"),e.addClass("unloaded"),n.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),n.removeClass("d-flex"),t.removeClass("unloaded"),l.removeClass("unloaded"),e.removeClass("unloaded")}},f=function(){let t=!1;return{on(){t||(u.block(),r.removeClass("unloaded"),s.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),s.removeClass("unloaded"),u.release(),d.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),f.on(),d.focus()}),o.click(function(){p.off(),f.off()}),d.focus(function(){n.addClass("input-focus")}),d.focusout(function(){n.removeClass("input-focus")}),d.on("keyup",function(t){8===t.keyCode&&""===d.val()?h()?c.removeClass("unloaded"):f.off():""!==d.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),h()&&c.addClass("unloaded"))}),a.on("click",function(){d.val(""),h()?(c.removeClass("unloaded"),i.empty()):f.off(),d.focus(),a.removeClass("visible")})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#topbar-wrapper"),a=$("#panel-wrapper"),s=$("#search-input"),l="topbar-up",n="topbar-down",r="toc-scrolling-up";let e,i=0;const d=o.outerHeight(),c=o.outerHeight();$(window).scroll(function(t){$("#topbar-title").is(":hidden")&&(e=!0)}),setInterval(function(){e&&(function(){var t,e=$(this).scrollTop();Math.abs(i-e)<=d||(e>i?e>c&&(o.removeClass(n).addClass(l),a.removeClass(n),s.is(":focus")&&s.blur()):e+$(window).height()<$(document).height()&&(void 0!==(t=o.attr(r))?"false"===t&&o.removeAttr(r):(o.removeClass(l).addClass(n),a.addClass(n))),i=e)}(),e=!1)},250)}),$(function(){const t=$("#topbar-title"),e=$("div.post>h1"),o=t.text().trim();let a=(0<e.length?e:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||e.is(":hidden")||t.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?t.text()!==a&&t.text(a):t.text()!==o&&t.text(o))}),t.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){let o=$(".timeago").length,t=void 0;const s=$("meta[name=day-prompt]").attr("content"),l=$("meta[name=hour-prompt]").attr("content"),n=$("meta[name=minute-prompt]").attr("content"),r=$("meta[name=justnow-prompt]").attr("content");function e(){return $(".timeago").each(function(){var t,e;!1!==$(this)[0].hasAttribute("date")?(e=function(t,e){let o=new Date,a=new Date(t);return a.getFullYear()!==o.getFullYear()||a.getMonth()!==o.getMonth()?e:(t=Math.floor((o-a)/1e3),1<=(e=Math.floor(t/86400))?` ${e} `+s:1<=(e=Math.floor(t/3600))?` ${e} `+l:1<=(t=Math.floor(t/60))?` ${t} `+n:r)}($(this).attr("date"),t=$(this).text()))===t?$(this).removeAttr("date"):$(this).text(e):--o}),0===o&&void 0!==t&&clearInterval(t),o}0!==o&&0<e()&&(t=setInterval(e,6e4))});

assets/js/dist/pvreport.min.js

@@ -1,6 +1,6 @@
 /*!
- * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */
-const getInitStatus=function(){let e=!1;return()=>{let t=e;return e||(e=!0),t}}(),PvOpts=function(){function e(e){return $(e).attr("content")}function t(t){let a=e(t);return void 0!==a&&!1!==a}return{getProxyMeta:()=>e("meta[name=pv-proxy-endpoint]"),getLocalMeta:()=>e("meta[name=pv-cache-path]"),hasProxyMeta:()=>t("meta[name=pv-proxy-endpoint]"),hasLocalMeta:()=>t("meta[name=pv-cache-path]")}}(),PvStorage=function(){const e={KEY_PV:"pv",KEY_PV_SRC:"pv_src",KEY_CREATION:"pv_created_date"},t="same-origin",a="cors";function o(e){return localStorage.getItem(e)}function r(e,t){localStorage.setItem(e,t)}function n(t,a){r(e.KEY_PV,t),r(e.KEY_PV_SRC,a),r(e.KEY_CREATION,(new Date).toJSON())}return{keysCount:()=>Object.keys(e).length,hasCache:()=>null!==localStorage.getItem(e.KEY_PV),getCache:()=>JSON.parse(localStorage.getItem(e.KEY_PV)),saveLocalCache(e){n(e,t)},saveProxyCache(e){n(e,a)},isExpired(){let t=new Date(o(e.KEY_CREATION));return t.setHours(t.getHours()+1),Date.now()>=t.getTime()},isFromLocal:()=>o(e.KEY_PV_SRC)===t,isFromProxy:()=>o(e.KEY_PV_SRC)===a,newerThan:e=>PvStorage.getCache().totalsForAllResults["ga:pageviews"]>e.totalsForAllResults["ga:pageviews"],inspectKeys(){if(localStorage.length===PvStorage.keysCount())for(let t=0;t<localStorage.length;t++){switch(localStorage.key(t)){case e.KEY_PV:case e.KEY_PV_SRC:case e.KEY_CREATION:break;default:return void localStorage.clear()}}else localStorage.clear()}}}();function countUp(e,t,a){if(e<t){let o=new CountUp(a,e,t);o.error?console.error(o.error):o.start()}}function countPV(e,t){let a=0;if(void 0!==t)for(let o=0;o<t.length;++o){if(t[parseInt(o,10)][0]===e){a+=parseInt(t[parseInt(o,10)][1],10);break}}return a}function tacklePV(e,t,a,o){let r=countPV(t,e);if(r=0===r?1:r,o){const e=parseInt(a.text().replace(/,/g,""),10);r>e&&countUp(e,r,a.attr("id"))}else a.text((new Intl.NumberFormat).format(r))}function displayPageviews(e){if(void 0===e)return;let t=getInitStatus();const a=e.rows;if($("#post-list").length>0)$(".post-preview").each(function(){const e=$(this).find("a").attr("href");tacklePV(a,e,$(this).find(".pageviews"),t)});else if($(".post").length>0){const e=window.location.pathname;tacklePV(a,e,$("#pv"),t)}}function fetchProxyPageviews(){PvOpts.hasProxyMeta()&&$.ajax({type:"GET",url:PvOpts.getProxyMeta(),dataType:"jsonp",jsonpCallback:"displayPageviews",success:e=>{PvStorage.saveProxyCache(JSON.stringify(e))},error:(e,t,a)=>{console.log("Failed to load pageviews from proxy server: "+a)}})}function fetchLocalPageviews(e=!1){return fetch(PvOpts.getLocalMeta()).then(e=>e.json()).then(t=>{e&&PvStorage.isFromProxy()&&PvStorage.newerThan(t)||(displayPageviews(t),PvStorage.saveLocalCache(JSON.stringify(t)))})}$(function(){$(".pageviews").length<=0||(PvStorage.inspectKeys(),PvStorage.hasCache()?(displayPageviews(PvStorage.getCache()),PvStorage.isExpired()?PvOpts.hasLocalMeta()?fetchLocalPageviews(!0).then(fetchProxyPageviews):fetchProxyPageviews():PvStorage.isFromLocal()&&fetchProxyPageviews()):PvOpts.hasLocalMeta()?fetchLocalPageviews().then(fetchProxyPageviews):fetchProxyPageviews())});
+const getInitStatus=function(){let t=!1;return()=>{var e=t;return t=t||!0,e}}(),PvOpts=function(){function t(e){return $(e).attr("content")}function e(e){e=t(e);return void 0!==e&&!1!==e}return{getProxyMeta(){return t("meta[name=pv-proxy-endpoint]")},getLocalMeta(){return t("meta[name=pv-cache-path]")},hasProxyMeta(){return e("meta[name=pv-proxy-endpoint]")},hasLocalMeta(){return e("meta[name=pv-cache-path]")}}}(),PvStorage=function(){const a={KEY_PV:"pv",KEY_PV_SRC:"pv_src",KEY_CREATION:"pv_created_date"},t={LOCAL:"same-origin",PROXY:"cors"};function r(e){return localStorage.getItem(e)}function o(e,t){localStorage.setItem(e,t)}function n(e,t){o(a.KEY_PV,e),o(a.KEY_PV_SRC,t),o(a.KEY_CREATION,(new Date).toJSON())}return{keysCount(){return Object.keys(a).length},hasCache(){return null!==localStorage.getItem(a.KEY_PV)},getCache(){return JSON.parse(localStorage.getItem(a.KEY_PV))},saveLocalCache(e){n(e,t.LOCAL)},saveProxyCache(e){n(e,t.PROXY)},isExpired(){let e=new Date(r(a.KEY_CREATION));return e.setHours(e.getHours()+1),Date.now()>=e.getTime()},isFromLocal(){return r(a.KEY_PV_SRC)===t.LOCAL},isFromProxy(){return r(a.KEY_PV_SRC)===t.PROXY},newerThan(e){return PvStorage.getCache().totalsForAllResults["ga:pageviews"]>e.totalsForAllResults["ga:pageviews"]},inspectKeys(){if(localStorage.length===PvStorage.keysCount())for(let e=0;e<localStorage.length;e++)switch(localStorage.key(e)){case a.KEY_PV:case a.KEY_PV_SRC:case a.KEY_CREATION:break;default:return void localStorage.clear()}else localStorage.clear()}}}();function countUp(t,a,r){if(t<a){let e=new CountUp(r,t,a);e.error?console.error(e.error):e.start()}}function countPV(t,a){let r=0;if(void 0!==a)for(let e=0;e<a.length;++e)if(a[parseInt(e,10)][0]===t){r+=parseInt(a[parseInt(e,10)][1],10);break}return r}function tacklePV(e,t,a,r){let o=countPV(t,e);o=0===o?1:o,r?(r=parseInt(a.text().replace(/,/g,""),10),o>r&&countUp(r,o,a.attr("id"))):a.text((new Intl.NumberFormat).format(o))}function displayPageviews(e){if(void 0!==e){let t=getInitStatus();const a=e.rows;0<$("#post-list").length?$(".post-preview").each(function(){var e=$(this).find("a").attr("href");tacklePV(a,e,$(this).find(".pageviews"),t)}):0<$(".post").length&&(e=window.location.pathname,tacklePV(a,e,$("#pv"),t))}}function fetchProxyPageviews(){PvOpts.hasProxyMeta()&&$.ajax({type:"GET",url:PvOpts.getProxyMeta(),dataType:"jsonp",jsonpCallback:"displayPageviews",success:e=>{PvStorage.saveProxyCache(JSON.stringify(e))},error:(e,t,a)=>{console.log("Failed to load pageviews from proxy server: "+a)}})}function fetchLocalPageviews(t=!1){return fetch(PvOpts.getLocalMeta()).then(e=>e.json()).then(e=>{t&&PvStorage.isFromProxy()&&PvStorage.newerThan(e)||(displayPageviews(e),PvStorage.saveLocalCache(JSON.stringify(e)))})}$(function(){$(".pageviews").length<=0||(PvStorage.inspectKeys(),PvStorage.hasCache()?(displayPageviews(PvStorage.getCache()),PvStorage.isExpired()?PvOpts.hasLocalMeta()?fetchLocalPageviews(!0).then(fetchProxyPageviews):fetchProxyPageviews():PvStorage.isFromLocal()&&fetchProxyPageviews()):PvOpts.hasLocalMeta()?fetchLocalPageviews().then(fetchProxyPageviews):fetchProxyPageviews())});

docs/README.zh-CN.md

@@ -1,245 +0,0 @@
-<div align="right">
-
-  中文(简体) /
-  [EN](https://github.com/cotes2020/jekyll-theme-chirpy#readme)
-
-</div>
-
-<div align="center">
-
-  # Chirpy Jekyll Theme
-
-  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
-  [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
-  [![Codacy Badge](https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b)](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
-  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
-  [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
-
-  一款简约而强大、采用响应式设计的 Jekyll 主题，适合展示专业写作内容。
-
-  **[线上体验 →](https://chirpy.cotes.info)**
-
-  [![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/commons/devices-mockup.png)](https://chirpy.cotes.info)
-
-</div>
-
-## 功能一览
-
-- 本地化外观语言
-- 可配置的主题颜色
-- 文章置顶
-- 文章最后修改日期
-- 文章目录
-- 自动推荐相关文章
-- 语法高亮
-- 二级目录
-- 数学表达式
-- Mermaid 图表
-- 搜索
-- Atom 订阅
-- Disqus 评论
-- Google 分析
-- GA 浏览报告（高级功能）
-- SEO 优化
-- 网站性能优化
-
-## 前提要求
-
-参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/) 安装 `Ruby`，`RubyGems`，`Jekyll` 和 `Bundler`。
-
-## 安装
-
-### 创建新仓库
-
-有两种方式可以创建一个使用本主题的仓库：
-
-- **[使用 Chirpy Starter](#使用-chirpy-starter)** - 易于版本升级，隔离无关的主题项目文件，让您的仓库舒适清爽。
-
-- **[从 GitHub 上 Fork](#从-github-上-fork)** - 对个性化二次开发友好，但是难于升级。除非您决定魔改此款主题或者参与代码贡献，否则不推荐使用此方式。
-
-#### 使用 Chirpy Starter
-
-[使用 Chirpy Starter][use-starter] 来快速创建 Jekyll 站点，命名为 `<GH_USERNAME>.github.io`，其中 `GH_USERNAME` 是您的 GitHub username。
-
-#### 从 GitHub 上 Fork
-
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 并改名为 `<GH_USERNAME>.github.io`。友情提示：默认分支的代码处于开发状态，如果您想博客更加稳定，请切换到最新的 [Tag][latest-tag] 开始写作。
-
-接着执行文件初始化:
-
-```console
-$ bash tools/init.sh
-```
-
-> **注**：如果您不打算部署到 GitHub Pages， 在上述命令后附加参数选项 `--no-gh`。
-
-上述脚本将会:
-
-1. 从您的仓库中删除了:
-    - `.travis.yml`
-    - `_posts` 下的文件
-    - `docs` 目录
-
-2. 如果使用了参数 `--no-gh`，则会怒删文件夹 `.github`。否则，配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。
-
-3. 从 `.gitignore` 中删除 `Gemfile.lock`。
-
-4. 自动提交一个 Commit 以保存上述文件的更改。
-
-### 安装依赖：
-
-首次运行本项目，需要先安装依赖：
-
-```console
-$ bundle
-```
-
-## 使用
-
-### 配置文件
-
-根据个人需要去修改 `_config.yml` 的变量，大部分都有注释介绍用法。典型的几个选项是：
-
-- `url`
-- `avatar`
-- `timezone`
-- `lang`
-
-### 自定义样式
-
-如果您需要自定义样式， 拷贝主题的文件 `assets/css/style.scss` 到您站点的相同路径上，然后在该文件末尾添加样式。
-
-自 [`v4.1.0`][chirpy-4.1.0] 起，如果您想覆盖文件 `_sass/addon/variables.scss` 里定义的 SASS 变量的默认值，新建文件 `_sass/variables-hook.scss`，然后重写您需要的变量即可。
-
-### 本地运行
-
-发布之前，在本地预览:
-
-```terminal
-$ bundle exec jekyll s
-```
-
-或者用 Docker 运行:
-
-```terminal
-$ docker run -it --rm \
-    --volume="$PWD:/srv/jekyll" \
-    -p 4000:4000 jekyll/jekyll \
-    jekyll serve
-```
-
-稍候片刻，即可访问本地服务：_<http://localhost:4000>_
-
-### 部署
-
-部署开始前，把  `_config.yml` 的 `url` 改为 `https://<username>.github.io`（或者您的私有域名，如：`https://yourdomain.com`）。另外，如果您想使用 [Project 类型网站](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites)，修改配置文件的 `baseurl` 为项目名称，以斜杠开头，如：`/project`。
-
-现在您可以选择下列其中一个方式去站点部署。
-
-#### 使用 GitHub Actions 部署
-
-由于安全原因，默认的 GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
-
-快速检查 GitHub Actions 构建需要的文件:
-
-- 确保您的 Jekyll 站点存在文件 `.github/workflows/pages-deploy.yml`。没有的话，新建并填入「[示例 Workflow][workflow]」的内容，注意参数 `on.push.branches` 的值必须和您的仓库默认分支名相同。
-
-- 检查您的 Jekyll 站点是否有文件 `tools/deploy.sh`。没有的话， 从本仓库拷贝到您的 Jekyll 项目。
-
-- 再者，如果您已经把文件 `Gemfile.lock` 提交到了仓库里面，并且您运行本项目的操作系统不是 Linux，需要添加新的平台信息：
-
-  ```console
-  $ bundle lock --add-platform x86_64-linux
-  ```
-
-完成上述条目后，到 GitHub 把您的仓库命名为 `<GH-USERNAME>.github.io`，然后开始发布：
-
-1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
-
-2. 回到 GitHub 上的仓库，选择标签 _Settings_ → 点击左侧导航栏的 _Pages_ → _GitHub Pages_ 选择分支 `gh-pages` 的 `/(root)` 作为「[发布源][pages-src]」:
-
-    ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/posts/20190809/gh-pages-sources.png)
-
-3. 按照 GitHub 指示的地址去访问您的网站。
-
-#### 手动构建部署
-
-在 GitHub 之外的平台，就没法享受 **GitHub Actions** 的便利了。因此您需要在本地构建站点，然后推送站点文件到服务器上。
-
-在项目根目录，运行:
-
-```console
-$ JEKYLL_ENV=production bundle exec jekyll b
-```
-
-或者通过 Docker 构建:
-
-```terminal
-$ docker run -it --rm \
-    --env JEKYLL_ENV=production \
-    --volume="$PWD:/srv/jekyll" \
-    jekyll/jekyll \
-    jekyll build
-```
-
-生成的静态文件将会在 `_site`， 把内部的文件上传到服务器即可。
-
-### 升级
-
-这取决于您如何使用这个 theme：
-
-- 如果您是使用 theme gem（`Gemfile` 会有 `gem "jekyll-theme-chirpy"`），编辑 `Gemfile` 并更新 them gem 的版本号，譬如：
-    ```diff
-    - gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
-    + gem "jekyll-theme-chirpy", "~> 3.3", ">= 3.3.0"
-    ```
-
-    接着执行以下命令：
-
-    ```console
-    $ bundle update jekyll-theme-chirpy
-    ```
-
-    随着 theme 版本的升级，运行站点的必要文件（详见 [Chirpy Starter][starter]）以及配置选项会出现变化，请参阅「[升级指南](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide)」的改动细节去保持您仓库中的相关文件同步到最新版本。
-
-- 如果您是以 fork 的方式使用（您站点的 `Gemfile` 会有 `gemspec`），那么合并上游 [最新的 tag][latest-tag] 到您的 Repo 以完成升级。期间很有可能会产生冲突 (conflicts)，请务必耐心谨慎地解决它们。
-
-## 文档
-
-若想要更多细节以及更佳的阅读体验，请参阅「[线上教程](https://chirpy.cotes.info/categories/tutorial/)」。 与此同时，「[Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki)」也有一份教程的拷贝。请注意，Demo 网站和 Wiki 上的文档都是基于最新的发行版本，而 `master` 分支的功能往往领先于现有文档。
-
-## 参与贡献
-
-三人行必有我师，欢迎提报告 bug，帮助改进代码质量，或者提交新功能。具体操作规则请参考「[贡献指南](../.github/CONTRIBUTING.md)」，谢谢 🙏。
-
-## 鸣谢
-
-此款主题的开发主要基于 [Jekyll](https://jekyllrb.com/) 生态、[Bootstrap](https://getbootstrap.com/)、[Font Awesome](https://fontawesome.com/) 和其他一些出色的工具 (相关文件中可以找到这些工具的版权信息)。头像和图标的设计来自于 [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/)。
-
-:tada: 感谢所有参与代码贡献的小伙伴，他们的 GayHub ID 在这个「[列表](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors)」。 另外，提交过 issues（或者未被合并 PR）的高富帅和白富美也不会被遗忘，他/她们帮助报告 bug、分享新点子或者启发了我写出更通俗易懂的文档。
-
-还有，感谢 [JetBrains][jb] 提供开源 License！
-
-## 赞助
-
-如果您喜欢此款主题或者它对您有帮助，请考虑打赏作者，您的支持将会极大地鼓励作者，并帮助作者更好地维护项目！
-
-[![Buy Me a Coffee](https://img.shields.io/badge/-请作者喝杯咖啡-ff813f?logo=buy-me-a-coffee&logoColor=white)](https://www.buymeacoffee.com/coteschung)
-[![Wechat Pay](https://img.shields.io/badge/-微信打赏作者-brightgreen?logo=wechat&logoColor=white)][cn-donation]
-[![Alipay](https://img.shields.io/badge/-支付宝打赏作者-blue?logo=alipay&logoColor=white)][cn-donation]
-
-## 许可证书
-
-本项目开源，基于 [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) 许可。
-
-[starter]: https://github.com/cotes2020/chirpy-starter
-[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
-[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
-[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
-[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
-[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags
-
-<!-- ReadMe links -->
-
-[jb]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
-[cn-donation]: https://cotes.gitee.io/alipay-wechat-donation/

gulpfile.js/tasks/js.js

@@ -89,6 +89,5 @@ exports.liveRebuild = () => {
       `${ JS_SRC }/lib/*.js`
     ],
     buildJs
-  )
-}
-
+  );
+};

jekyll-theme-chirpy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-chirpy"
-  spec.version       = "4.3.0"
+  spec.version       = "5.0.1"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "4.3.0",
+  "version": "5.0.1",
   "description": "A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation.",
   "main": "index.js",
   "directories": {
@@ -25,6 +25,6 @@
     "gulp-insert": "^0.5.0",
     "gulp-rename": "^2.0.0",
     "gulp-uglify": "^3.0.2",
-    "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
+    "uglify-js": "^3.14.3"
   }
 }

tools/deploy.sh

@@ -98,6 +98,7 @@ flush() {
 
   shopt -s dotglob nullglob
   mv "$_backup_dir"/* .
+  [[ -f ".nojekyll" ]] || echo "" >".nojekyll"
 }
 
 deploy() {
@@ -134,25 +135,25 @@ main() {
 while (($#)); do
   opt="$1"
   case $opt in
-    -c | --config)
-      _config="$2"
-      shift
-      shift
-      ;;
-    --dry-run)
-      # build & test, but not deploy
-      _opt_dry_run=true
-      shift
-      ;;
-    -h | --help)
-      help
-      exit 0
-      ;;
-    *)
-      # unknown option
-      help
-      exit 1
-      ;;
+  -c | --config)
+    _config="$2"
+    shift
+    shift
+    ;;
+  --dry-run)
+    # build & test, but not deploy
+    _opt_dry_run=true
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    # unknown option
+    help
+    exit 1
+    ;;
   esac
 done
 

tools/init.sh

@@ -69,7 +69,7 @@ init_files() {
     rm -f "$_workflow.$TEMP_SUFFIX"
 
     ## Cleanup image settings in site config
-    sed -i.$TEMP_SUFFIX "s/^img_cdn:.*/img_cdn: ''/;s/^avatar:.*/avatar: ''/" _config.yml
+    sed -i.$TEMP_SUFFIX "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
     rm -f _config.yml.$TEMP_SUFFIX
 
   fi
@@ -83,7 +83,7 @@ init_files() {
   rm -rf _posts/* docs
 
   # save changes
-  git add -A && git add .github -f
+  git add -A
   git commit -m "[Automation] Initialize the environment." -q
 
   echo "[INFO] Initialization successful!"

tools/release.sh

@@ -28,6 +28,16 @@ check() {
   fi
 }
 
+## Remove unnecessary theme settings
+cleanup_config() {
+  cp _config.yml _config.yml.bak
+  sed -i "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
+}
+
+resume_config() {
+  mv _config.yml.bak _config.yml
+}
+
 release() {
   _default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
   _version="$(grep "spec.version" jekyll-theme-chirpy.gemspec | sed 's/.*= "//;s/".*//')" # X.Y.Z
@@ -49,9 +59,10 @@ release() {
 
   # build a gem package
   echo -e "Build the gem pakcage for v$_version\n"
+  cleanup_config
   rm -f ./*.gem
   gem build "$GEM_SPEC"
-
+  resume_config
 }
 
 main() {