Bump version to 4.3.0

Specify the version of the images in the CDN
Make the init tool compatible with BSD
2025-12-18 21:53:26 +00:00 · 2021-09-30 02:32:57 +08:00 · 2021-09-30 02:23:34 +08:00 · 2021-09-30 02:17:24 +08:00 · 2021-09-30 00:17:24 +08:00 · 2021-09-29 22:36:47 +08:00
51 changed files with 890 additions and 689 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -36,6 +36,7 @@ Steps to reproduce the behavior:
 - Gem version: <!-- by running: `gem -v`-->
 - Bundler version: <!-- by running: `bundle -v`-->
 - Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->
+- Theme version: <!-- by running: `gem list | grep jekyll-theme-chirpy` -->

 ### Desktop
 <!-- If necessary, uncomment and fill in the following list:
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,9 +2,9 @@

 <!-- 
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
-->

 e.g. Fixes #(issue)
+-->

 ## Type of change

@@ -22,7 +22,7 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
 -->

- [ ] I have run `bash ./tools/test.sh --build` (at the root of the project) locally and passed
+- [ ] I have run `bash ./tools/deploy.sh --dry-run` (at the root of the project) locally and passed
 - [ ] I have tested this feature in the browser

 ### Test Configuration
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,12 +36,5 @@ jobs:
          ruby-version: 2.7
          bundler-cache: true

-      - name: Build Site
-        env:
-          JEKYLL_ENV: production
-        run: |
-          bundle exec jekyll b
-
      - name: Test Site
-        run: |
-          bash tools/test.sh
+        run: bash tools/deploy.sh --dry-run
--- a/.github/workflows/pages-deploy.yml.hook
+++ b/.github/workflows/pages-deploy.yml.hook
@@ -25,29 +25,5 @@ jobs:
          ruby-version: 2.7
          bundler-cache: true

-      - name: Check baseurl
-        run: |
-          baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
-          if [[ -n $baseurl ]]; then
-            echo "BASE_URL=$baseurl" >> $GITHUB_ENV
-          fi
-
-      - name: Build Site
-        env:
-          JEKYLL_ENV: production
-        run: |
-          bundle exec jekyll b -d "_site$BASE_URL"
-
-      - name: Test Site
-        run: |
-          bash tools/test.sh
-
      - name: Deploy
-        run: |
-          if [[ -n $BASE_URL ]]; then
-            mv _site$BASE_URL _site-rename
-            rm -rf _site
-            mv _site-rename _site
-          fi
-
-          bash tools/deploy.sh
+        run: bash tools/deploy.sh
--- a/3
+++ b/3
@@ -17,3 +17,6 @@ end

 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
+
+# Jekyll <= 4.2.0 compatibility with Ruby 3.0
+gem "webrick", "~> 1.7"
--- a/README.md
+++ b/README.md
@@ -1,39 +1,28 @@
 <div align="right">
-  <a href="https://github.com/cotes2020/jekyll-theme-chirpy#readme">EN</a> |
-  <a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md">中文 (简体)</a>
+
+  EN /
+  [中文(简体)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md)
+
 </div>

 <div align="center">
-  <h1>Chirpy Jekyll Theme</h1>
-  <p>
-    <a href="https://rubygems.org/gems/jekyll-theme-chirpy">
-    <img alt="Gem Version" src="https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen"></img>
-  </a>
-    <a href="https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush">
-    <img alt="Build Status" src="https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push"></img>
-  </a>
-    <a href="https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard">
-    <img alt="Codacy Badge" src="https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b"></img>
-  </a>
-    <a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE">
-    <img alt="GitHub license" src="https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg"></img>
-  </a>
-    <a href="https://996.icu">
-    <img alt="996.icu" src="https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg"></img>
-  </a>
-  </p>
+
+  # 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)
+
+  A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
+
+  **[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)
+
 </div>

-A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation. Designed to help you easily record and share your knowledge.
-
-[Live Demo »](https://chirpy.cotes.info)
-
-<p align="center">
-  <a href="https://chirpy.cotes.info">
-    <img alt="Devices Mockup" src="https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png"></img>
-  </a>
-</p>
-
 ## Features

 - Localized Layout
@@ -55,58 +44,25 @@ A minimal, sidebar, responsive web design Jekyll theme that focuses on text pres

 ## Prerequisites

-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`. Please note that the version of `Ruby` must meet the requirements of the theme on [RubyGems.org](https://rubygems.org/gems/jekyll-theme-chirpy).
+Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.

 ## Installation

-There are two ways to get the theme:
+### Creating a New Site

- **[Install from RubyGems](#install-from-rubygems)** - Easy to update, isolate irrelevant project files so you can focus on writing.
- **[Fork on GitHub](#fork-on-github)** - Convenient for custom development, but difficult to update, only suitable for web developers.
+There are two ways to create a new repository for this theme:

-### Install from RubyGems
+- **[Using the Chirpy Starter](#option-1-using-the-chirpy-starter)** - Easy to upgrade, isolates irrelevant project files so you can focus on writing.

-Add this line to your Jekyll site's `Gemfile`:
+- **[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.

-```ruby
-gem "jekyll-theme-chirpy"
-```
+#### Option 1. Using the Chirpy Starter

-And add this line to your Jekyll site's `_config.yml`:
+Create a new repository from the [**Chirpy Starter**][use-starter] and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.

-```yaml
-theme: jekyll-theme-chirpy
-```
+#### Option 2. Forking on GitHub

-And then execute:
-
-```console
-$ bundle
-```
-
-Next, go to the installed local theme path:
-
-```console
-$ cd "$(bundle info --path jekyll-theme-chirpy)"
-```
-
-And then copy the critical files (for details, see [starter project][starter]) from the theme's gem to your Jekyll site.
-
-> ⚠️ **Watch out for duplicate files!**
->
-> If your Jekyll site is created by the `jekyll new` command, there will be `index.markdown` and `about.markdown` in the root directory of your site. Please be sure to remove them, otherwise they will overwrite the `index.html` and `_tabs/about.html` from this project, resulting in blank or messy pages.
-
-As an alternative, which we recommend, you can create a Jekyll site [**using the starter template**][use-starter] to save time copying files from the theme's gem. We've prepared everything you need there!
-
-### Fork on GitHub
-
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and then clone your fork to local. (Please note that the default branch code is in development.  If you want the blog to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.)
-
-Install gem dependencies by:
-
-```console
-$ bundle
-```
+[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:

@@ -114,18 +70,28 @@ And then execute:
 $ bash tools/init.sh
 ```

-> **Note**: If you don't plan to deploy your site on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.

-What it does is:
+The above command will:

-1. Remove some files or directories from your repository:
+1. Removes some files or directories from your repository:
    - `.travis.yml`
    - files under `_posts`
    - folder `docs`

-2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing 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, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.

-3. Automatically create a commit to save the changes.
+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:
+
+```console
+$ bundle
+```

 ## Usage

@@ -142,7 +108,7 @@ Update the variables of `_config.yml` as needed. Some of them are typical option

 If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.

-Starting from `v4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
+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

@@ -154,14 +120,14 @@ $ bundle exec jekyll s

 Or run the site on Docker with the following command:

-```terminal
+```console
 $ docker run -it --rm \
    --volume="$PWD:/srv/jekyll" \
    -p 4000:4000 jekyll/jekyll \
    jekyll serve
 ```

-Open a browser and visit to _<http://localhost:4000>_.
+After a while, the local service will be published at _<http://127.0.0.1:4000>_.

 ### Deployment

@@ -169,40 +135,47 @@ Before the deployment begins, checkout the file `_config.yml` and make sure the

 Now you can choose ONE of the following methods to deploy your Jekyll site.

-#### Deploy on GitHub Pages
+#### 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 GH Pages service.
+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 [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
- Ensure your Jekyll site has file `tools/test.sh` and `tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
+- 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.

-And then rename your repository to `<GH-USERNAME>.github.io` on GitHub.
+- 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 repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) through _Settings_ → _Options_ → _GitHub Pages_:
+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/posts/20190809/gh-pages-sources.png)
+    ![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.

-#### Deploy on Other Platforms
+#### Manually Build and Deploy

-On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Actions**. Therefore, we should build the site locally (or on some other 3rd-party CI platform) and then put the site files on the server.
+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, build your site by:
+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 with Docker by:
+Or build the site on Docker:

-```terminal
+```console
 $ docker run -it --rm \
    --env JEKYLL_ENV=production \
    --volume="$PWD:/srv/jekyll" \
@@ -210,7 +183,28 @@ $ docker run -it --rm \
    jekyll build
 ```

-Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.
+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

@@ -243,6 +237,9 @@ This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chi
 [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 -->

--- a/_config.yml
+++ b/_config.yml
@@ -3,8 +3,8 @@
 # Import the theme
 theme: jekyll-theme-chirpy

-# Only if your site type is GitHub Project sites and doesn't have a custom domain,
-# change below value to '/projectname'.
+# Change the following value to '/PROJECT_NAME' ONLY IF your site type is GitHub Pages Project sites
+# and doesn't have a custom domain.
 baseurl: ''

 # The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
@@ -79,10 +79,10 @@ theme_mode:   # [light|dark]
 # will be added to all image (site avatar & posts' images) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: ''
+img_cdn: 'https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5'

 # the avatar on sidebar, support local or CORS resources
-avatar: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/avatar.jpg
+avatar: '/commons/avatar.jpg'

 # boolean type, the global switch for ToC in posts.
 toc: true
--- a/_data/contact.yml
+++ b/_data/contact.yml
@@ -2,7 +2,7 @@

 -
  type: github
-  icon: 'fab fa-github-alt'
+  icon: 'fab fa-github'
 -
  type: twitter
  icon: 'fab fa-twitter'
--- a/_data/locales/en.yml
+++ b/_data/locales/en.yml
@@ -76,7 +76,11 @@ post:
  button:
    next: Newer
    previous: Older
-    copy: Copied!
+    copy_code:
+      succeed: Copied!
+    share_link:
+      title: Copy link
+      succeed: Link copied successfully!
  # pinned prompt of posts list on homepage
  pin_prompt: Pinned

--- a/_data/locales/id-ID.yml
+++ b/_data/locales/id-ID.yml
@@ -76,7 +76,11 @@ post:
  button:
    next: Terbaru
    previous: Terlama
-    copy: Disalin!
+    copy_code:
+      succeed: Disalin!
+    share_link:
+      title: Salin tautan
+      succeed: Tautan berhasil disalin!
  # pinned prompt of posts list on homepage
  pin_prompt: Disematkan

--- a/_data/locales/zh-CN.yml
+++ b/_data/locales/zh-CN.yml
@@ -75,7 +75,11 @@ post:
  button:
    next: 下一篇
    previous: 上一篇
-    copy: 已复制！
+    copy_code:
+      succeed: 已复制！
+    share_link:
+      title:  分享链接
+      succeed: 链接已复制！
  # pinned prompt of posts list on homepage
  pin_prompt: 顶置

--- a/_includes/disqus.html
+++ b/_includes/disqus.html
@@ -3,7 +3,7 @@
 -->

 <div id="disqus_thread" class="pt-2 pb-2">
-  <p class="text-center text-muted small mb-5">
+  <p class="text-center text-muted small">
    Comments powered by <a href="https://disqus.com/">Disqus</a>.
  </p>
 </div>
--- a/_includes/language-alias.html
+++ b/_includes/language-alias.html
@@ -0,0 +1,72 @@
+{% comment %}
+
+  Convert the alias of the syntax language to the official name
+
+  See: <https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers>
+
+{% endcomment %}
+
+{% assign _lang = include.language | default: '' %}
+
+{% case _lang %}
+  {% when 'actionscript', 'as', 'as3' %}
+    {{ 'ActionScript' }}
+  {% when 'applescript' %}
+    {{ 'AppleScript' }}
+  {% when 'brightscript', 'bs', 'brs' %}
+    {{ 'BrightScript' }}
+  {% when 'cfscript', 'cfc' %}
+    {{ 'CFScript' }}
+  {% when 'coffeescript', 'coffee', 'coffee-script' %}
+    {{ 'CoffeeScript' }}
+  {% when 'cs', 'csharp' %}
+   {{ 'C#' }}
+  {% when 'erl' %}
+    {{ 'Erlang' }}
+  {% when 'graphql' %}
+   {{ 'GraphQL' }}
+  {% when 'haskell', 'hs' %}
+   {{ 'Haskell' }}
+  {% when 'javascript', 'js' %}
+    {{ 'JavaScript' }}
+  {% when 'make', 'mf', 'gnumake', 'bsdmake' %}
+    {{ 'Makefile' }}
+  {% when 'md', 'mkd' %}
+    {{ 'Markdown' }}
+  {% when 'm' %}
+    {{ 'Matlab' }}
+  {% when 'objective_c', 'objc', 'obj-c', 'obj_c', 'objectivec' %}
+    {{ 'Objective-C' }}
+  {% when 'perl', 'pl' %}
+    {{ 'Perl' }}
+  {% when 'php','php3','php4','php5' %}
+    {{ 'PHP' }}
+  {% when 'plaintext', 'text' %}
+    {{ 'Text' }}
+  {% when 'py' %}
+    {{ 'Python' }}
+  {% when 'rb' %}
+    {{ 'Ruby' }}
+  {% when 'rs','no_run','ignore','should_panic' %}
+    {{ 'Rust' }}
+  {% when 'bash', 'zsh', 'ksh', 'sh' %}
+    {{ 'Shell' }}
+  {% when 'st', 'squeak' %}
+    {{ 'Smalltalk' }}
+  {% when 'tex'%}
+    {{ 'TeX' }}
+  {% when 'latex' %}
+    {{ 'LaTex' }}
+  {% when 'ts', 'typescript' %}
+    {{ 'TypeScript' }}
+  {% when 'vb', 'visualbasic' %}
+    {{ 'Visual Basic' }}
+  {% when 'vue', 'vuejs' %}
+    {{ 'Vue.js' }}
+  {% when 'yml' %}
+    {{ 'YAML' }}
+  {% when 'css', 'html', 'scss', 'ssh', 'toml', 'xml', 'yaml' %}
+    {{ _lang | upcase }}
+  {% else %}
+    {{ _lang | capitalize }}
+{% endcase %}
--- a/_includes/post-sharing.html
+++ b/_includes/post-sharing.html
@@ -16,9 +16,10 @@
        </a>
    {% endfor %}

-    <i class="fa-fw fas fa-link small" onclick="copyLink('', '{{ site.data.locales[lang].post.button.copy.succeed }}')"
+    <i id="copy-link" class="fa-fw fas fa-link small"
        data-toggle="tooltip" data-placement="top"
-        title="{{ site.data.locales[lang].post.button.copy.title }}">
+        title="{{ site.data.locales[lang].post.button.share_link.title }}"
+        title-succeed="{{ site.data.locales[lang].post.button.share_link.succeed }}">
    </i>

  </span>
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -119,16 +119,23 @@

      {% if _left contains 'file="' %}
        {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_icon = 'far fa-file-code' %}
      {% else %}
-        {% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
+        {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
+        {% capture _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>
+      {% endcapture %}
+
      {% assign _new_content = _new_content | append: _snippet
-          | append: '<div class="code-header" text-data="'
-          | append: _text
-          | append: '"><button data-original-title="'
-          | append: site.data.locales[lang].post.button.copy
-          | append: '"><i class="far fa-clone"></i></button></div>'
+          | append: '<div class="code-header">'
+          | append: _label
+          | append: '<button aria-label="copy" title-succeed="'
+          | append: site.data.locales[lang].post.button.copy_code.succeed
+          | append: '"><i class="far fa-clipboard"></i></button></div>'
          | append: '<div class="highlight"><code>'
      %}

--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -49,7 +49,7 @@

  </ul> <!-- ul.nav.flex-column -->

-  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
+  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">

    {% for entry in site.data.contact %}
      {% capture url %}
--- a/_javascript/copyright
+++ b/_javascript/copyright
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.2.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/_javascript/utils/clipboard.js
+++ b/_javascript/utils/clipboard.js
@@ -1,5 +1,5 @@
 /*
- * Initial the clipboard.js object
+ * Clipboard functions
 *
 * Dependencies:
 *   - popper.js (https://github.com/popperjs/popper-core)
@@ -9,17 +9,39 @@
 $(function() {
  const btnSelector = '.code-header>button';
  const ICON_SUCCESS = 'fas fa-check';
-  const ATTR_LOCKED = 'locked';
+  const ATTR_TIMEOUT = 'timeout';
  const TIMEOUT = 2000; // in milliseconds

+  function isLocked(node) {
+    if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) {
+      let timeout = $(node).attr(ATTR_TIMEOUT);
+      if (Number(timeout) > Date.now()) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function lock(node) {
+    $(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT);
+  }
+
+  function unlock(node) {
+    $(node).removeAttr(ATTR_TIMEOUT);
+  }
+
+  /* --- Copy code block --- */
+
+  // Initial the clipboard.js object
  const clipboard = new ClipboardJS(btnSelector, {
    target(trigger) {
-      return trigger.parentNode.nextElementSibling;
+      let codeBlock = trigger.parentNode.nextElementSibling;
+      return codeBlock.querySelector('code .rouge-code');
    }
  });

  $(btnSelector).tooltip({
-    trigger: 'click',
+    trigger: 'hover',
    placement: 'left'
  });

@@ -30,51 +52,79 @@ $(function() {

  const ICON_DEFAULT = getIcon(btnSelector);

-  function setTooltip(btn) {
-    $(btn).tooltip('hide')
-      .tooltip('show');
+  function showTooltip(btn) {
+    const succeedTitle = $(btn).attr('title-succeed');
+    $(btn).attr('data-original-title', succeedTitle).tooltip('show');
  }

  function hideTooltip(btn) {
-    setTimeout(function() {
-      $(btn).tooltip('hide');
-    }, TIMEOUT);
+    $(btn).tooltip('hide').removeAttr('data-original-title');
  }

  function setSuccessIcon(btn) {
    let btnNode = $(btn);
    let iconNode = btnNode.children();
-    btnNode.attr(ATTR_LOCKED, true);
    iconNode.attr('class', ICON_SUCCESS);
  }

  function resumeIcon(btn) {
    let btnNode = $(btn);
    let iconNode = btnNode.children();
-
-    setTimeout(function() {
-      btnNode.removeAttr(ATTR_LOCKED);
-      iconNode.attr('class', ICON_DEFAULT);
-    }, TIMEOUT);
-  }
-
-  function isLocked(btn) {
-    let locked = $(btn).attr(ATTR_LOCKED);
-    return locked === 'true';
+    iconNode.attr('class', ICON_DEFAULT);
  }

  clipboard.on('success', (e) => {
    e.clearSelection();

-    if (isLocked(e.trigger)) {
+    const trigger = e.trigger;
+    if (isLocked(trigger)) {
      return;
    }

-    setTooltip(e.trigger);
-    hideTooltip(e.trigger);
+    setSuccessIcon(trigger);
+    showTooltip(trigger);
+    lock(trigger);

-    setSuccessIcon(e.trigger);
-    resumeIcon($(e.trigger));
+    setTimeout(() => {
+      hideTooltip(trigger);
+      resumeIcon(trigger);
+      unlock(trigger);
+    }, TIMEOUT);
+
+  });
+
+  /* --- Post link sharing --- */
+
+  $('#copy-link').click((e) => {
+
+    let target = $(e.target);
+
+    if (isLocked(target)) {
+      return;
+    }
+
+    // Copy URL to clipboard
+
+    const url = window.location.href;
+    const $temp = $("<input>");
+
+    $("body").append($temp);
+    $temp.val(url).select();
+    document.execCommand("copy");
+    $temp.remove();
+
+    // Switch tooltip title
+
+    const defaultTitle = target.attr('data-original-title');
+    const succeedTitle = target.attr('title-succeed');
+
+    target.attr('data-original-title', succeedTitle).tooltip('show');
+    lock(target);
+
+    setTimeout(() => {
+      target.attr('data-original-title', defaultTitle);
+      unlock(target);
+    }, TIMEOUT);

  });

--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -7,7 +7,7 @@ tags: [typography]
 math: true
 mermaid: true
 image:
-  src: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
+  src: /commons/devices-mockup.png
  width: 850
  height: 585
 ---
@@ -99,34 +99,34 @@ Click the hook will locate the footnote[^footnote], and here is another footnote

 - Default (with caption)

-![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" }
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
 _Full screen width and center alignment_

 <br>

 - Shadow

-![Window shadow](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/window.png){: .shadow width="1548" height="864" style="max-width: 90%" }
+![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" style="max-width: 90%" }
 _shadow effect (visible in light mode)_

 <br>

 - Left aligned

-![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal}
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal}

 <br>

 - Float to left

-  ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .left}
+  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .left}
  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."

 <br>

 - Float to right

-  ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .right}
+  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .right}
  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."

 <br>
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -146,7 +146,7 @@ By default, the image is centered, but you can specify the position by using one
  ```
  {: .nolineno}

-> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
+> **Limitation**: Once the position of the image is specified, the image caption should not be added.

 ### Image shadow

--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -9,60 +9,25 @@ pin: true

 ## Prerequisites

-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`. Please note that the version of `Ruby` must meet the requirements of the theme on [RubyGems.org](https://rubygems.org/gems/jekyll-theme-chirpy).
+Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.

 ## Installation

-There are two ways to get the theme:
+### Creating a New Site

- **[Install from RubyGems](#install-from-rubygems)** - Easy to update, isolate irrelevant project files so you can focus on writing.
- **[Fork on GitHub](#fork-on-github)** - Convenient for custom development, but difficult to update, only suitable for web developers.
+There are two ways to create a new repository for this theme:

-### Install from RubyGems
+- **[Using the Chirpy Starter](#option-1-using-the-chirpy-starter)** - Easy to upgrade, isolates irrelevant project files so you can focus on writing.

-Add this line to your Jekyll site's `Gemfile`:
+- **[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.

-```ruby
-gem "jekyll-theme-chirpy"
-```
-{: .nolineno file='Gemfile' }
+#### Option 1. Using the Chirpy Starter

-And add this line to your Jekyll site's `_config.yml`:
+Create a new repository from the [**Chirpy Starter**][use-starter] and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.

-```yaml
-theme: jekyll-theme-chirpy
-```
-{: .nolineno file='_config.yml' }
+#### Option 2. Forking on GitHub

-And then execute:
-
-```console
-$ bundle
-```
-
-Next, go to the installed local theme path:
-
-```console
-$ cd "$(bundle info --path jekyll-theme-chirpy)"
-```
-
-And then copy the critical files (for details, see [starter project][starter]) from the theme's gem to your Jekyll site.
-
-> ⚠️ **Watch out for duplicate files!**
->
-> If your Jekyll site is created by the `jekyll new` command, there will be `index.markdown` and `about.markdown` in the root directory of your site. Please be sure to remove them, otherwise they will overwrite the `index.html` and `_tabs/about.html` from this project, resulting in blank or messy pages.
-
-As an alternative, which we recommend, you can create a Jekyll site [**using the starter template**][use-starter] to save time copying files from the theme's gem. We've prepared everything you need there!
-
-### Fork on GitHub
-
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and then clone your fork to local. (Please note that the default branch code is in development.  If you want the blog to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.)
-
-Install gem dependencies by:
-
-```console
-$ bundle
-```
+[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][latest-tag] and start writing.

 And then execute:

@@ -70,18 +35,28 @@ And then execute:
 $ bash tools/init.sh
 ```

-> **Note**: If you don't plan to deploy your site on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.

-What it does is:
+The above command will:

-1. Remove some files or directories from your repository:
+1. Removes some files or directories from your repository:
    - `.travis.yml`
    - files under `_posts`
    - folder `docs`

-2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing 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, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.

-3. Automatically create a commit to save the changes.
+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:
+
+```console
+$ bundle
+```

 ## Usage

@@ -98,7 +73,7 @@ Update the variables of `_config.yml` as needed. Some of them are typical option

 If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.

-Starting from `v4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
+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

@@ -110,14 +85,14 @@ $ bundle exec jekyll s

 Or run the site on Docker with the following command:

-```terminal
+```console
 $ docker run -it --rm \
    --volume="$PWD:/srv/jekyll" \
    -p 4000:4000 jekyll/jekyll \
    jekyll serve
 ```

-Open a browser and visit to _<http://localhost:4000>_.
+After a while, the local service will be published at _<http://127.0.0.1:4000>_.

 ### Deployment

@@ -125,40 +100,47 @@ Before the deployment begins, checkout the file `_config.yml` and make sure the

 Now you can choose ONE of the following methods to deploy your Jekyll site.

-#### Deploy on GitHub Pages
+#### 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 GH Pages service.
+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 [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
- Ensure your Jekyll site has file `tools/test.sh` and `tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
+- 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.

-And then rename your repository to `<GH-USERNAME>.github.io` on GitHub.
+- 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 repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) through _Settings_ → _Options_ → _GitHub Pages_:
+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/posts/20190809/gh-pages-sources.png){: width="850" height="153" }
+    ![gh-pages-sources](/posts/20190809/gh-pages-sources.png){: width="850" height="153" }

 3. Visit your website at the address indicated by GitHub.

-#### Deploy on Other Platforms
+#### Manually Build and Deploy

-On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Actions**. Therefore, we should build the site locally (or on some other 3rd-party CI platform) and then put the site files on the server.
+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, build your site by:
+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 with Docker by:
+Or build the site on Docker:

-```terminal
+```console
 $ docker run -it --rm \
    --env JEKYLL_ENV=production \
    --volume="$PWD:/srv/jekyll" \
@@ -166,8 +148,34 @@ $ docker run -it --rm \
    jekyll build
 ```

-Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.
+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"
+    ```
+    {: .nolineno file="Gemfile" }
+
+    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.

 [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
--- a/_posts/2019-08-11-customize-the-favicon.md
+++ b/_posts/2019-08-11-customize-the-favicon.md
@@ -6,7 +6,7 @@ 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 need 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 how to create and replace the default favicons.

 ## Generate the favicon

@@ -21,7 +21,7 @@ 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.
+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.

 The following table will helps you understand the changes to the favicon files:

--- a/_posts/2021-01-03-enable-google-pv.md
+++ b/_posts/2021-01-03-enable-google-pv.md
@@ -33,7 +33,7 @@ With your property created, you now need to set up Data Stream to track your blo

 It should look like this:

-![google-analytics-data-stream](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/01-google-analytics-data-stream.png){: width="1086" height="542"}
+![google-analytics-data-stream](/posts/20210103/01-google-analytics-data-stream.png){: width="1086" height="542"}

 Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml` file

@@ -49,7 +49,7 @@ google_analytics:

 When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.

-![google-analytics-realtime](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/02-google-analytics-realtime.png){: width="616" height="557"}
+![google-analytics-realtime](/posts/20210103/02-google-analytics-realtime.png){: width="616" height="557"}

 ## Setup Page Views

@@ -185,7 +185,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions

 If everything went good, you'll get this screen:

-![superProxy-deployed](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/03-superProxy-deployed.png){: width="1366" height="354"}
+![superProxy-deployed](/posts/20210103/03-superProxy-deployed.png){: width="1366" height="354"}

 ### Create Google Analytics Query

@@ -210,14 +210,14 @@ After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at

 After the query is saved on GAE, a **Public Endpoint** (public access address) will be generated, and we will get the query result in JSON format when accessing it. Finally, click <kbd>Enable Endpoint</kbd> in **Public Request Endpoint** to make the query effective, and click <kbd>Start Scheduling</kbd> in **Scheduling** to start the scheduled task.

-![superproxy-query](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/04-superproxy-query.png){: width="1100" height="126"}
+![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.

-![superproxy-dashboard](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/05-superproxy-dashboard.png){: width="1210" height="694"}
+![superproxy-dashboard](/posts/20210103/05-superproxy-dashboard.png){: width="1210" height="694"}

 Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:

--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -7,16 +7,9 @@
  @if $dark-mode {
    @include dark-scheme;

-    .mode-toggle {
-      transform: rotateY(180deg);
-    }
-
  } @else {
    @include light-scheme;

-    .mode-toggle {
-      transform: none;
-    }
  }

 }
@@ -73,6 +66,25 @@ $scrollbar-size: 7px;
  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 {
@@ -645,31 +657,31 @@ $sidebar-display: "sidebar-display";
  scrollbar-width: none;  /* Firefox */

  a {
-    @include sidebar-links;
+    @extend %sidebar-links;

    &:hover {
      @include no-text-decoration;

-      color: #fff;
+      color: var(--sidebar-active-color) !important;
    }
  }

  #avatar {
-    &:hover > a {
-      border-color: #fff;
-    }
-
    > a {
      display: block;
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
-      border: 2px solid #b6b6b6;
+      border: 2px solid rgba(222, 222, 222, 0.7);
      overflow: hidden;
      transform: translateZ(0); // fixed the zoom in Safari
      -webkit-transition: border-color 0.35s ease-in-out;
      -moz-transition: border-color 0.35s ease-in-out;
      transition: border-color 0.35s ease-in-out;
+
+      &:hover {
+        border-color: white;
+      }
    }

    img {
@@ -690,15 +702,18 @@ $sidebar-display: "sidebar-display";

  .site-title {
    a {
+      @extend %clickable-transition;
+
      font-weight: 900;
      font-size: 1.5rem;
      letter-spacing: 0.5px;
+      color: rgba(134, 133, 133, 99%);
    }
  }

  .site-subtitle {
    font-size: 95%;
-    color: #828282;
+    color: var(--sidebar-muted-color);
    line-height: 1.2rem;
    word-spacing: 1px;
    margin: 0.5rem 1.5rem 0.5rem 1.5rem;
@@ -719,16 +734,16 @@ $sidebar-display: "sidebar-display";
    text-align: center;
    display: table;
    height: $tab-height;
-    &:hover {
-      .nav-link {
-        color: #f8f9facf;
-      }
-    }
+
    &.active {
      .nav-link {
-        color: #fcfcfc;
+        color: var(--sidebar-active-color);
      }
    }
+
+    &:not(.active) > a {
+      @extend %clickable-transition;
+    }
  }

  ul {
@@ -803,36 +818,35 @@ $sidebar-display: "sidebar-display";

    a {
      @extend %icon;
+      @extend %clickable-transition;
+    }
+
+    i {
+      line-height: 1.75rem; // default line-height in body
+      vertical-align: middle;
    }

    #mode-toggle-wrapper {
      @extend %icon;

      i {
-        @include sidebar-links;
-
-        margin: 0;
-        font-size: 1.05rem;
-        text-align: center;
-        position: relative;
-        bottom: 1px;
+        @extend %sidebar-links;
+        @extend %cursor-pointer;
+        @extend %clickable-transition;
      }

    }

    .icon-border {
-      background-color: #525354;
+      background-color: var(--sidebar-muted-color);
      content: "";
      width: 3px;
      height: 3px;
      border-radius: 50%;
-      position: relative;
-      top: 12px;
    }

-    a:hover,
-    #mode-toggle-wrapper i:hover {
-      color: #fff;
+    #mode-toggle-wrapper:hover > i {
+      color: var(--sidebar-active-color);
    }

  } // .sidebar-bottom
@@ -873,7 +887,6 @@ $sidebar-display: "sidebar-display";
  transition: top 0.2s ease-in-out;
  z-index: 50;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
  background-color: var(--topbar-wrapper-bg);
 }

@@ -911,15 +924,19 @@ $sidebar-display: "sidebar-display";
  display: flex;
  width: 85%;
  border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-bg);
+  border: 1px solid var(--search-wrapper-border-color);
  background: var(--search-wrapper-bg);
  padding: 0 0.5rem;
+
  i {
    z-index: 2;
    font-size: 0.9rem;
    color: var(--search-icon-color);
  }
+
  .fa-times-circle { /* button 'clean up' */
+    @extend %cursor-pointer;
+
    visibility: hidden;
  }
 }
@@ -928,6 +945,8 @@ $sidebar-display: "sidebar-display";
  color: var(--link-color);
  margin-left: 1rem;
  display: none;
+
+  @extend %cursor-pointer;
 }

 #search-input {
@@ -1082,18 +1101,27 @@ $sidebar-display: "sidebar-display";
 /* --- button back-to-top --- */

 #back-to-top {
+  $size: 2.7em;
+
  display: none;
  z-index: 1;
  cursor: pointer;
  position: fixed;
  background: var(--button-bg);
  color: var(--btn-backtotop-color);
-  height: 2.6em;
-  width: 2.7em;
+  padding: 0;
+  width: $size;
+  height: $size;
  border-radius: 50%;
  border: 1px solid var(--btn-backtotop-border-color);
-  transition: 0.2s ease-out;
-  -webkit-transition: 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+  -webkit-transition: transform 0.2s ease-out;
+
+  i {
+    line-height: $size;
+    position: relative;
+    bottom: 2px;
+  }
 }

 #back-to-top:hover {
@@ -1591,19 +1619,10 @@ $sidebar-display: "sidebar-display";

        .nav-link {
          > span {
-            letter-spacing: 3px;
+            letter-spacing: 2px;
          }

          > i {
-            @include icon-round(1.65rem);
-
-            line-height: 1.5rem;
-            font-size: 0.6rem;
-            padding-top: 1px;
-            padding-left: 1px;
-            position: relative;
-            bottom: 1px;
-
            &.unloaded {
              display: inline-block !important;
            }
@@ -1617,35 +1636,40 @@ $sidebar-display: "sidebar-display";
      padding-left: 3.5rem;
      width: 100%;

+      $icon-block-size: 2rem;
+
      &.justify-content-center {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
      }

-      a {
-        font-size: 1rem;
-        width: 3rem;
+      > span,
+      > a {
+        @include ml-mr(0.15rem);
+
+        height: $icon-block-size;
+        margin-bottom: 0.5rem; // wrap line
      }

      i {
-        @include icon-round(2rem);
+        background-color: var(--sidebar-btn-bg);
+        font-size: 1rem;
+        width: $icon-block-size;
+        height: $icon-block-size;
+        border-radius: 50%;
+        position: relative;

-        padding-top: 0.44rem;
-        margin-top: .7rem; // multi line space
-        bottom: 0;
-      }
-
-      #mode-toggle-wrapper {
-        width: 3rem;
-
-        i {
-          top: 11px;
+        &::before {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
        }
      }

      .icon-border {
-        top: 26px;
+        top: 0.9rem;
      }

    } // .sidebar-bottom
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -35,6 +35,10 @@
  border-bottom: 1px solid var(--link-underline-color);
 }

+%clickable-transition {
+  transition: color 0.35s ease-in-out;
+}
+
 %no-bottom-border {
  border-bottom: none;
 }
@@ -51,25 +55,21 @@
  margin-top: -2.5rem;
 }

+%cursor-pointer {
+  cursor: pointer;
+}
+
 /* ---------- scss mixin --------- */

@mixin no-text-decoration {
  text-decoration: none;
 }

-@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
-  color: $color;
-  transition: color 0.35s ease-in-out;
+%sidebar-links {
+  color: rgba(117, 117, 117, 0.9);
  user-select: none;
 }

-@mixin icon-round($diameter) {
-  border: 1px solid;
-  border-radius: 50%;
-  width: $diameter;
-  height: $diameter;
-}
-
@mixin ml-mr($value) {
  margin-left: $value;
  margin-right: $value;
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -172,24 +172,39 @@ div {
  align-items: center;
  line-height: 1.85rem;

-  // text data
-  &::before {
-    content: attr(text-data);
-    color: var(--lang-badge-color);
-    padding-left: 1em;
+  // icons
+  i {
+    font-size: 1rem;
+    color: var(--lang-badge-muted-color);

-    // language
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-
-    // file name
-    @at-root [file] #{&} {
-      font-size: 0.85rem;
-      text-transform: none;
+    &.small {
+      font-size: 70%;
    }
  }

+  // 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);
+    }
+
+    i {
+      margin: 0 0.5rem;
+    }
+
+    @at-root [file] #{&} > i {
+      position: relative;
+      top: 1px; // center the file icon
+      margin-left: 0.25rem;
+    }
+
+  }
+
  // clipboard
  button {
    border: 1px solid var(--code-header-bg);
@@ -197,26 +212,31 @@ div {
    padding: 0;
    width: 1.95rem;
    background-color: inherit;
-    color: var(--highlight-lineno-color);

-    &[locked=true] {
-      color: var(--clipboard-checked-color);
-      border-color: var(--clipboard-checked-color);
+    @extend %cursor-pointer;
+
+    &[timeout] {
+      &:hover {
+        border-color: var(--clipboard-checked-color);
+      }
+
+      i {
+        color: var(--clipboard-checked-color);
+      }
    }

-    &:not([locked]):hover {
-      background-color: gray;
-      color: white;
+    &:not([timeout]):hover {
+      background-color: rgba(128, 128, 128, 0.37);
+
+      i {
+        color: white;
+      }
    }

    &:focus {
      outline: none;
    }

-    i {
-      font-size: 0.9rem;
-    }
-
  }

 }
@@ -228,6 +248,10 @@ div {

      border-radius: 0;

+      .highlight {
+        padding-left: 0.25rem;
+      }
+
      .code-header {
        border-radius: 0;
        padding-left: 0.4rem;
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -11,10 +11,10 @@ $sidebar-width-large: 350px !default;  // screen width: >= 1650px
 /* tabs of sidebar */

 $tab-count: 5 !default;   // backward compatible (version <= 4.0.2)
-$tab-height: 3.2rem !default;
+$tab-height: 3rem !default;
 $tab-cursor-height: 1.6rem !default;

-$cursor-width: 3px !default;    // the cursor width of the selected tab
+$cursor-width: 2px !default;    // the cursor width of the selected tab

 /* other framework sizes */

--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -75,7 +75,8 @@
  --highlight-lineno-color: #6c6c6d;
  --inline-code-bg: #272822;
  --code-header-bg: #353535;
-  --lang-badge-color: #6c6c6d;
+  --lang-badge-color: #858586;
+  --lang-badge-muted-color: #6c6c6d;
  --clipboard-checked-color: #2bcc2b;

  .highlight {
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -30,13 +30,17 @@
  --checkbox-checked-color: var(--link-color);

  /* Sidebar */
-  --nav-cursor-color: rgb(183, 182, 182);
  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
+  --sidebar-muted-color: #6d6c6b;
+  --sidebar-active-color: rgb(255 255 255 / 80%);
+  --nav-cursor-color: rgb(183, 182, 182);
+  --sidebar-btn-bg: rgb(117 116 116 / 20%);

  /* Topbar */
  --topbar-text-color: var(--text-color);
  --topbar-wrapper-bg: rgb(39, 40, 43);
  --search-wrapper-bg: rgb(34, 34, 39);
+  --search-wrapper-border-color: rgb(34, 34, 39);
  --search-icon-color: rgb(100, 102, 105);
  --input-focus-border-color: rgb(112, 114, 115);

@@ -44,11 +48,8 @@
  --post-list-text-color: rgb(175, 176, 177);
  --btn-patinator-text-color: var(--text-color);
  --btn-paginator-hover-color: rgb(64, 65, 66);
-  --btn-active-bg: rgba(28, 52, 94, 1);
-  --btn-active-border-color: rgb(66, 94, 138);
-  --btn-text-color: var(--text-color);
  --btn-paginator-border-color: var(--btn-border-color);
-  --btn-paginator-shadow: var(--main-wrapper-bg);
+  --btn-text-color: var(--text-color);
  --pin-bg: rgb(34 35 37);
  --pin-color: inherit;

@@ -76,6 +77,7 @@
  /* categories */
  --categories-border: rgb(64, 66, 69);
  --categories-hover-bg: rgb(73, 75, 76);
+  --categories-icon-hover-color: white;

  /* archives */
  --timeline-node-bg: rgb(150, 152, 156);
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@@ -72,7 +72,8 @@
  --highlight-lineno-color: #c2c6cc;
  --inline-code-bg: #f3f3f3;
  --code-header-bg: #eaeaea;
-  --lang-badge-color: #a4a7ab;
+  --lang-badge-color: rgb(128 128 128 / 87%);
+  --lang-badge-muted-color: rgb(128 128 128 / 36%);
  --clipboard-checked-color: #43c743;

 } // light-syntax
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -28,13 +28,17 @@
  --checkbox-checked-color: #07a8f7;

  /* Sidebar */
-  --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
-  --nav-cursor-color: #fcfcfc;
+  --sidebar-bg: #eeeeee;
+  --sidebar-muted-color: #a2a19f;
+  --sidebar-active-color: #424242;
+  --nav-cursor-color: #757575;
+  --sidebar-btn-bg: white;

  /* Topbar */
  --topbar-text-color: rgb(78, 78, 78);
  --topbar-wrapper-bg: white;
-  --search-wrapper-bg: #f5f5f5;
+  --search-wrapper-bg: rgb(245 245 245 / 50%);
+  --search-wrapper-border-color: rgb(245 245 245);
  --search-tag-bg: #f8f9fa;
  --search-icon-color: #c2c6cc;
  --input-focus-border-color: var(--btn-border-color);
@@ -42,12 +46,9 @@
  /* Home page */
  --post-list-text-color: dimgray;
  --btn-patinator-text-color: #555555;
-  --btn-paginator-hover-color: #e9ecef;
-  --btn-active-bg: #2a408e;
-  --btn-active-border-color: #007bff;
-  --btn-text-color: #f8f8f8;
-  --btn-paginator-border-color: #f1f1f1;
-  --btn-paginator-shadow: #4b92d2;
+  --btn-paginator-hover-color: var(--sidebar-bg);
+  --btn-paginator-border-color: var(--sidebar-bg);
+  --btn-text-color: #676666;
  --pin-bg: #f5f5f5;
  --pin-color: #999fa4;

@@ -64,9 +65,12 @@
  --tag-hover: rgb(222, 226, 230);
  --tb-odd-bg: #fbfcfd;
  --tb-border-color: #eaeaea;
-  --categories-hover-bg: var(--btn-border-color);
  --dash-color: silver;

+  /* Categories */
+  --categories-hover-bg: var(--btn-border-color);
+  --categories-icon-hover-color: darkslategray;
+
  /* Archive */
  --timeline-color: rgba(0, 0, 0, 0.075);
  --timeline-node-bg: #c2c6cc;
--- a/_sass/jekyll-theme-chirpy.scss
+++ b/_sass/jekyll-theme-chirpy.scss
@@ -1,7 +1,7 @@
 /*!
 * The styles for Jekyll theme Chirpy
 *
- * Chirpy v4.2.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/_sass/layout/categories.scss
+++ b/_sass/layout/categories.scss
@@ -8,24 +8,22 @@

 .categories {
  margin-bottom: 2rem;
+
  .card-header {
    padding-right: 12px;
  }

  i {
-    &.far,
-    &.fas {
-      font-size: 86%; // fontawesome icons
-    }
+    @extend %category-icon-color;
+
+    font-size: 86%; // fontawesome icons
  }

  .list-group-item {
    border-left: none;
    border-right: none;
    padding-left: 2rem;
-    > i {
-      @extend %category-icon-color;
-    }
+
    &:first-child {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
@@ -33,10 +31,6 @@

  }

-  .card-header > span > i:first-child {
-    @extend %category-icon-color;
-  }
-
 } // .categories

 .category-trigger {
@@ -45,11 +39,18 @@
  border-radius: 50%;
  text-align: center;
  color: #6c757d !important;
-  > i.fas {
+
+  &:hover {
+    i {
+      color: var(--categories-icon-hover-color);
+    }
+  }
+
+  i {
    position: relative;
    height: 0.7rem;
    width: 1rem;
-    transition: 300ms ease all;
+    transition: transform 300ms ease;
  }
 }

--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -28,9 +28,7 @@
    }
    &.active {
      .page-link {
-        background-color: var(--btn-active-bg);
-        border-color: var(--btn-active-border-color);
-        box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
+        background-color: var(--btn-paginator-hover-color);
        color: var(--btn-text-color);
      }
    }
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -139,14 +139,21 @@
  }
 }

-#toc li > a {
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+#toc li a {
+  font-size: 0.8rem;

  &.nav-link:not(.active) {
    color: inherit;
  }
+
+}
+
+nav[data-toggle=toc] {
+  .nav {
+    .nav > li > a.active {
+      font-weight: 600 !important;
+    }
+  }
 }

 /* --- Related Posts --- */
@@ -209,9 +216,12 @@

 #post-extend-wrapper {
  min-height: 2rem;
+
  #disqus_thread {
+    min-height: 7.5rem;
    margin-bottom: 2rem;
  }
+
 }

 .post-tail-bottom a {
@@ -240,7 +250,11 @@
      }
    }
    > i {
-      padding-top: 0.35rem;
+      position: relative;
+      bottom: 1px;
+
+      @extend %cursor-pointer;
+
      &:hover {
        @extend %btn-share-hovor;
      }
--- a/_tabs/about.md
+++ b/_tabs/about.md
@@ -1,6 +1,6 @@
 ---
 title: About
-icon: fas fa-info
+icon: fas fa-info-circle
 order: 4
 ---

--- a/_tabs/tags.md
+++ b/_tabs/tags.md
@@ -1,6 +1,6 @@
 ---
 layout: tags
 title: Tags
-icon: fas fa-tags
+icon: fas fa-tag
 order: 2
 ---
--- a/assets/js/dist/categories.min.js
+++ b/assets/js/dist/categories.min.js
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.2.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/assets/js/dist/commons.min.js
+++ b/assets/js/dist/commons.min.js
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.2.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/assets/js/dist/home.min.js
+++ b/assets/js/dist/home.min.js
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.2.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/assets/js/dist/page.min.js
+++ b/assets/js/dist/page.min.js
--- a/assets/js/dist/post.min.js
+++ b/assets/js/dist/post.min.js
--- a/assets/js/dist/pvreport.min.js
+++ b/assets/js/dist/pvreport.min.js
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.2.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/docs/README.zh-CN.md
+++ b/docs/README.zh-CN.md
@@ -1,39 +1,28 @@
 <div align="right">
-  <a href="https://github.com/cotes2020/jekyll-theme-chirpy#readme">EN</a> |
-  <a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md">中文 (简体)</a>
+
+  中文(简体) /
+  [EN](https://github.com/cotes2020/jekyll-theme-chirpy#readme)
+
 </div>

 <div align="center">
-  <h1>Chirpy Jekyll Theme</h1>
-  <p>
-    <a href="https://rubygems.org/gems/jekyll-theme-chirpy">
-    <img alt="Gem Version" src="https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen"></img>
-  </a>
-    <a href="https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush">
-    <img alt="Build Status" src="https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push"></img>
-  </a>
-    <a href="https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard">
-    <img alt="Codacy Badge" src="https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b"></img>
-  </a>
-    <a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE">
-    <img alt="GitHub license" src="https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg"></img>
-  </a>
-    <a href="https://996.icu">
-    <img alt="996.icu" src="https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg"></img>
-  </a>
-  </p>
+
+  # 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>

-一个采用了最简化、侧边栏、响应式设计的 Jekyll 主题，专注于文本展示，旨在帮助您轻松地记录和分享知识。
-
-[在线体验 »](https://chirpy.cotes.info)
-
-<p align="center">
-  <a href="https://chirpy.cotes.info">
-    <img alt="Devices Mockup" src="https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png"></img>
-  </a>
-</p>
-
 ## 功能一览

 - 本地化外观语言
@@ -54,62 +43,27 @@
 - SEO 优化
 - 网站性能优化

-
 ## 前提要求

-参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/) 安装 `Ruby`，`RubyGems`，`Jekyll` 和 `Bundler`。需要注意的是，`Ruby` 的版本必须与主题在 [RubyGems.org](https://rubygems.org/gems/jekyll-theme-chirpy) 上的要求一致.
+参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/) 安装 `Ruby`，`RubyGems`，`Jekyll` 和 `Bundler`。

 ## 安装

-有二法可得此主题:
+### 创建新仓库

- **[从 RubyGems 安装](#从-rubygems-安装)** - 易于版本升级，隔离无关的主题项目文件，让您的仓库舒适清爽。
- **[从 GitHub 上 Fork](#从-github-上-fork)** - 对个性化二次开发友好，但是难于升级，只适合专业开发人员使用。
+有两种方式可以创建一个使用本主题的仓库：

-### 从 RubyGems 安装
+- **[使用 Chirpy Starter](#使用-chirpy-starter)** - 易于版本升级，隔离无关的主题项目文件，让您的仓库舒适清爽。

-在您的 Jekyll 站点的 `Gemfile` 添加:
+- **[从 GitHub 上 Fork](#从-github-上-fork)** - 对个性化二次开发友好，但是难于升级。除非您决定魔改此款主题或者参与代码贡献，否则不推荐使用此方式。

-```ruby
-gem "jekyll-theme-chirpy"
-```
+#### 使用 Chirpy Starter

-然后，添加这行到您的 Jekyll 站点的 `_config.yml`:
+[使用 Chirpy Starter][use-starter] 来快速创建 Jekyll 站点，命名为 `<GH_USERNAME>.github.io`，其中 `GH_USERNAME` 是您的 GitHub username。

-```yaml
-theme: jekyll-theme-chirpy
-```
+#### 从 GitHub 上 Fork

-接着执行:
-
-```console
-$ bundle
-```
-
-然后，进入主题的 gem 目录:
-
-```console
-$ cd "$(bundle info --path jekyll-theme-chirpy)"
-```
-
-拷贝运行站点所需主题的 gem 文件（详见 [starter 仓库][starter] 的文件目录）至您的 Jekyll 站点, 然后把主题的 `_config.yml` 全部内容附加到您的 Jekyll 站点的同名文件。
-
-> ⚠️ **留意重叠的文件！**
->
-> 如果您的网站是通过命令 `jekyll new` 创建的，那么站点的根目录会存在文件 `index.markdown` 和 `about.markdown`。 请务必删除它们, 否则在网站构建后将覆盖主题的 `index.html` 和 `_tabs/about.html`，引起空白或错乱的页面出现。
-
-作为替代方案，同时也被我们力荐，您可以 [使用 starter template][use-starter] 来快速创建 Jekyll 站点，以省去复制主题 gem 文件的时间。那里早已为您准备好建站需要的一切！
-
-
-### 从 GitHub 上 Fork
-
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 然后克隆到本地。(友情提示：默认分支的代码处于开发状态，如果您想博客更加稳定，请切换到最新的 [Tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) 开始写作。)
-
-安装依赖：
-
-```console
-$ bundle
-```
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 并改名为 `<GH_USERNAME>.github.io`。友情提示：默认分支的代码处于开发状态，如果您想博客更加稳定，请切换到最新的 [Tag][latest-tag] 开始写作。

 接着执行文件初始化:

@@ -117,18 +71,28 @@ $ bundle
 $ bash tools/init.sh
 ```

-> 如果您不打算部署到 GitHub Pages, 在上述命令后附加参数选项 `--no-gh`。
+> **注**：如果您不打算部署到 GitHub Pages， 在上述命令后附加参数选项 `--no-gh`。

-上述脚本完成了以下工作:
+上述脚本将会:

 1. 从您的仓库中删除了:
    - `.travis.yml`
    - `_posts` 下的文件
    - `docs` 目录

-2. 如果使用了参数 `--no-gh`，则会怒删 `.github`。否则，将会配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。
+2. 如果使用了参数 `--no-gh`，则会怒删文件夹 `.github`。否则，配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。

-3. 自动提交一个 Commit 以保存上述文件的更改。
+3. 从 `.gitignore` 中删除 `Gemfile.lock`。
+
+4. 自动提交一个 Commit 以保存上述文件的更改。
+
+### 安装依赖：
+
+首次运行本项目，需要先安装依赖：
+
+```console
+$ bundle
+```

 ## 使用

@@ -143,9 +107,9 @@ $ bash tools/init.sh

 ### 自定义样式

-如果您需要自定义样式, 拷贝主题的文件 `assets/css/style.scss` 到您站点的相同路径上，然后在该文件末尾添加样式。
+如果您需要自定义样式， 拷贝主题的文件 `assets/css/style.scss` 到您站点的相同路径上，然后在该文件末尾添加样式。

-自 `v4.1.0` 起，如果您想覆盖文件 `_sass/addon/variables.scss` 里定义的 SASS 变量的默认值，新建文件 `_sass/variables-hook.scss`，然后重写您需要的变量即可。
+自 [`v4.1.0`][chirpy-4.1.0] 起，如果您想覆盖文件 `_sass/addon/variables.scss` 里定义的 SASS 变量的默认值，新建文件 `_sass/variables-hook.scss`，然后重写您需要的变量即可。

 ### 本地运行

@@ -164,36 +128,43 @@ $ docker run -it --rm \
    jekyll serve
 ```

-访问本地服务：<http://localhost:4000>
+稍候片刻，即可访问本地服务：_<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`。
+部署开始前，把  `_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 Pages
+#### 使用 GitHub Actions 部署

-由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
+由于安全原因，默认的 GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。

 快速检查 GitHub Actions 构建需要的文件:

- 确保您的 Jekyll 站点存在文件 `.github/workflows/pages-deploy.yml`。没有的话，新建并填入[示例工作流][workflow]的内容, 注意参数 `on.push.branches` 的值必须和您的仓库默认分支名相同。
- 检查您的 Jekyll 站点是否有文件 `tools/test.sh` 和 `tools/deploy.sh`. 没有的话, 从本仓库拷贝到您的 Jekyll 项目.
+- 确保您的 Jekyll 站点存在文件 `.github/workflows/pages-deploy.yml`。没有的话，新建并填入「[示例 Workflow][workflow]」的内容，注意参数 `on.push.branches` 的值必须和您的仓库默认分支名相同。

-在 GitHub 把您的仓库命名为 `<GH-USERNAME>.github.io`，然后开始发布：
+- 检查您的 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_ → _Options_ → _GitHub Pages_ 选择分支 `gh-pages` 作为[_发布源_](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site):
+2. 回到 GitHub 上的仓库，选择标签 _Settings_ → 点击左侧导航栏的 _Pages_ → _GitHub Pages_ 选择分支 `gh-pages` 的 `/(root)` 作为「[发布源][pages-src]」:

-    ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
+    ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/posts/20190809/gh-pages-sources.png)

 3. 按照 GitHub 指示的地址去访问您的网站。

-#### 部署到其他 Pages 平台
+#### 手动构建部署

-在 GitHub 之外的平台，例如 GitLab，就没法享受 **GitHub Actions** 的便利了。因此我们需要在本地构建站点（或者在其他第三方 CI 平台），然后推送站点文件到服务器上。
+在 GitHub 之外的平台，就没法享受 **GitHub Actions** 的便利了。因此您需要在本地构建站点，然后推送站点文件到服务器上。

 在项目根目录，运行:

@@ -213,25 +184,45 @@ $ docker run -it --rm \

 生成的静态文件将会在 `_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` 分支的功能往往领先于现有文档。
+若想要更多细节以及更佳的阅读体验，请参阅「[线上教程](https://chirpy.cotes.info/categories/tutorial/)」。 与此同时，「[Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki)」也有一份教程的拷贝。请注意，Demo 网站和 Wiki 上的文档都是基于最新的发行版本，而 `master` 分支的功能往往领先于现有文档。

 ## 参与贡献

-三人行必有我师，欢迎提报告 bug, 帮助改进代码质量，或者提交新功能。具体操作规则请参考 [贡献指南](../.github/CONTRIBUTING.md)，谢谢 🙏。
+三人行必有我师，欢迎提报告 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/)。
+此款主题的开发主要基于 [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、分享新点子或者启发了我写出更通俗易懂的文档。
+: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]
@@ -244,6 +235,9 @@ $ docker run -it --rm \
 [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 -->

--- a/jekyll-theme-chirpy.gemspec
+++ b/jekyll-theme-chirpy.gemspec
@@ -2,7 +2,7 @@

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

@@ -23,7 +23,7 @@ Gem::Specification.new do |spec|
    "plugin_type"       => "theme"
  }

-  spec.required_ruby_version = [">= 2.4", "< 3.0"]
+  spec.required_ruby_version = ">= 2.4"

  spec.add_runtime_dependency "jekyll", "~> 4.1"
  spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jekyll-theme-chirpy",
-  "version": "4.2.0",
+  "version": "4.3.0",
  "description": "A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation.",
  "main": "index.js",
  "directories": {
--- a/tools/bump.sh
+++ b/tools/bump.sh
@@ -1,34 +1,24 @@
 #!/usr/bin/env bash
 #
-# How does it work:
 #
-#   1. Cherry pick the latest commit from default branch
-#      to the target release branch if the target release branch already existed.
+# 1. Bump latest version number to the following files:
 #
-#   2. Bump latest version number to the following files:
-#
-#     - _sass/jekyll-theme-chirpy.scss
-#     - _javascript/copyright
-#     - assets/js/dist/*.js (will be built by gulp later)
-#     - jekyll-theme-chirpy.gemspec
-#     - package.json
-#
-#   3. Create a git-tag on release branch
-#
-#   4. Build a RubyGems package base on the latest git-tag
+#   - _sass/jekyll-theme-chirpy.scss
+#   - _javascript/copyright
+#   - assets/js/dist/*.js (will be built by gulp later)
+#   - jekyll-theme-chirpy.gemspec
+#   - package.json
 #
+# 2. Then create a commit to automatically save the changes.
 #
 # Usage:
 #
-#   Run on default branch, if run on other branch requires parameter '-m' (manual mode).
+#   Run on the default branch or hotfix branch
 #
-#
-# Requires: Git, Gulp, RubyGems
+# Requires: Git, Gulp

 set -eu

-opt_manual=false
-
 ASSETS=(
  "_sass/jekyll-theme-chirpy.scss"
  "_javascript/copyright"
@@ -38,10 +28,6 @@ GEM_SPEC="jekyll-theme-chirpy.gemspec"

 NODE_META="package.json"

-DEFAULT_BRANCH="master"
-
-_working_branch="$(git branch --show-current)"
-
 _check_src() {
  if [[ ! -f $1 && ! -d $1 ]]; then
    echo -e "Error: Missing file \"$1\"!\n"
@@ -55,12 +41,6 @@ check() {
    exit -1
  fi

-  # ensure working on default branch or running in 'manual' mode
-  if [[ $_working_branch != $DEFAULT_BRANCH && $opt_manual == "false" ]]; then
-    echo "Error: This operation must be performed on the 'master' branch or '--manual' mode!"
-    exit -1
-  fi
-
  for i in "${!ASSETS[@]}"; do
    _check_src "${ASSETS[$i]}"
  done
@@ -98,73 +78,6 @@ bump() {
  fi
 }

-build_gem() {
-  rm -f ./*.gem
-  gem build "$GEM_SPEC"
-}
-
-release() {
-  _version="$1"
-  _major=""
-  _minor=""
-  _new_release_branch=false
-
-  IFS='.' read -r -a array <<< "$_version"
-
-  for elem in "${array[@]}"; do
-    if [[ -z $_major ]]; then
-      _major="$elem"
-    elif [[ -z $_minor ]]; then
-      _minor="$elem"
-    else
-      break
-    fi
-  done
-
-  _release_branch="$_major-$_minor-stable"
-
-  if ! $opt_manual; then
-    if [[ -z $(git branch -v | grep "$_release_branch") ]]; then
-      git checkout -b "$_release_branch"
-      _new_release_branch=true
-    else
-      git checkout "$_release_branch"
-      # cherry-pick the latest commit from master branch to release branch
-      git cherry-pick "$(git rev-parse $DEFAULT_BRANCH)"
-    fi
-  fi
-
-  echo -e "Bump version to $_version\n"
-  bump "$_version"
-
-  echo -e "Create tag v$_version\n"
-  git tag "v$_version"
-
-  echo -e "Build the gem pakcage for v$_version\n"
-  build_gem
-
-  # head back to working branch
-  git checkout "$_working_branch"
-
-  if [[ $_working_branch == $DEFAULT_BRANCH ]]; then
-    if $_new_release_branch; then
-      git merge "$_release_branch"
-    fi
-  fi
-
-}
-
-help() {
-  echo "Bump new version to Chirpy project"
-  echo "Usage:"
-  echo
-  echo "   bash /path/to/bump.sh [options]"
-  echo
-  echo "Options:"
-  echo "     -m, --manual         Manual relase, bump version only."
-  echo "     -h, --help           Print this help information."
-}
-
 main() {
  check

@@ -181,7 +94,8 @@ main() {
      exit -1
    fi

-    release "$_version"
+    echo -e "Bump version to $_version\n"
+    bump "$_version"

  else

@@ -190,22 +104,4 @@ main() {

 }

-while (($#)); do
-  opt="$1"
-  case $opt in
-    -m | --manual)
-      opt_manual=true
-      shift
-      ;;
-    -h | --help)
-      help
-      exit 0
-      ;;
-    *)
-      echo "unknown option '$opt'!"
-      exit 1
-      ;;
-  esac
-done
-
 main
--- a/tools/deploy.sh
+++ b/tools/deploy.sh
@@ -1,22 +1,80 @@
 #!/usr/bin/env bash
 #
-# Deploy the content of _site to 'origin/<pages_branch>'
+# Build, test and then deploy the site content to 'origin/<pages_branch>'
+#
+# Requirement: html-proofer, jekyll
+#
+# Usage: See help information

 set -eu

 PAGES_BRANCH="gh-pages"

-_no_branch=false
+SITE_DIR="_site"
+
+_opt_dry_run=false
+
+_config="_config.yml"
+
+_no_pages_branch=false
+
 _backup_dir="$(mktemp -d)"

+_baseurl=""
+
+help() {
+  echo "Build, test and then deploy the site content to 'origin/<pages_branch>'"
+  echo
+  echo "Usage:"
+  echo
+  echo "   bash ./tools/deploy.sh [options]"
+  echo
+  echo "Options:"
+  echo '     -c, --config   "<config_a[,config_b[...]]>"    Specify config file(s)'
+  echo "     --dry-run                Build site and test, but not deploy"
+  echo "     -h, --help               Print this information."
+}
+
 init() {
-  if [[ -z ${GITHUB_ACTION+x} ]]; then
-    echo "ERROR: This script is not allowed to run outside of GitHub Action."
+  if [[ -z ${GITHUB_ACTION+x} && $_opt_dry_run == 'false' ]]; then
+    echo "ERROR: It is not allowed to deploy outside of the GitHub Action envrionment."
+    echo "Type option '-h' to see the help information."
    exit -1
  fi

+  _baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
+}
+
+build() {
+  # clean up
+  if [[ -d $SITE_DIR ]]; then
+    rm -rf "$SITE_DIR"
+  fi
+
+  # build
+  JEKYLL_ENV=production bundle exec jekyll b -d "$SITE_DIR$_baseurl" --config "$_config"
+}
+
+test() {
+  bundle exec htmlproofer \
+    --disable-external \
+    --check-html \
+    --allow_hash_href \
+    "$SITE_DIR"
+}
+
+resume_site_dir() {
+  if [[ -n $_baseurl ]]; then
+    # Move the site file to the regular directory '_site'
+    mv "$SITE_DIR$_baseurl" "${SITE_DIR}-rename"
+    rm -rf "$SITE_DIR"
+    mv "${SITE_DIR}-rename" "$SITE_DIR"
+  fi
+}
+
+setup_gh() {
  if [[ -z $(git branch -av | grep "$PAGES_BRANCH") ]]; then
-    _no_branch=true
+    _no_pages_branch=true
    git checkout -b "$PAGES_BRANCH"
  else
    git checkout "$PAGES_BRANCH"
@@ -24,7 +82,7 @@ init() {
 }

 backup() {
-  mv _site/* "$_backup_dir"
+  mv "$SITE_DIR"/* "$_backup_dir"
  mv .git "$_backup_dir"

  # When adding custom domain from Github website,
@@ -50,7 +108,7 @@ deploy() {
  git add -A
  git commit -m "[Automation] Site update No.${GITHUB_RUN_NUMBER}"

-  if $_no_branch; then
+  if $_no_pages_branch; then
    git push -u origin "$PAGES_BRANCH"
  else
    git push -f
@@ -59,9 +117,43 @@ deploy() {

 main() {
  init
+  build
+  test
+  resume_site_dir
+
+  if $_opt_dry_run; then
+    exit 0
+  fi
+
+  setup_gh
  backup
  flush
  deploy
 }

+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
+      ;;
+  esac
+done
+
 main
--- a/tools/init.sh
+++ b/tools/init.sh
@@ -6,6 +6,8 @@ set -eu

 ACTIONS_WORKFLOW=pages-deploy.yml

+TEMP_SUFFIX="to-delete" #  temporary file suffixes that make `sed -i` compatible with BSD and Linux
+
 help() {
  echo "Usage:"
  echo
@@ -16,6 +18,13 @@ help() {
  echo "     -h, --help           Print this help information."
 }

+check_status() {
+  if [[ -n $(git status . -s) ]]; then
+    echo "Error: Commit unstaged files first, and then run this tool againt."
+    exit -1
+  fi
+}
+
 check_init() {
  local _has_inited=false

@@ -40,25 +49,48 @@ check_init() {
 }

 init_files() {
-
  if $_no_gh; then
    rm -rf .github
  else
+    ## Change the files of `.github`
+
    mv .github/workflows/$ACTIONS_WORKFLOW.hook .
    rm -rf .github
    mkdir -p .github/workflows
    mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
+
+    ## Ensure the gh-actions trigger branch
+
+    _workflow=".github/workflows/${ACTIONS_WORKFLOW}"
+    _default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
+    _lineno="$(sed -n "/branches:/=" "$_workflow")"
+
+    sed -i.$TEMP_SUFFIX "$((_lineno + 1))s/- .*/- ${_default_branch}/" "$_workflow"
+    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
+    rm -f _config.yml.$TEMP_SUFFIX
+
  fi

+  # trace the gem lockfile on user-end
+  sed -i.$TEMP_SUFFIX "/Gemfile.lock/d" .gitignore
+  rm -f ".gitignore.$TEMP_SUFFIX"
+
+  # remove the other fies
  rm -f .travis.yml
  rm -rf _posts/* docs

+  # save changes
  git add -A && git add .github -f
  git commit -m "[Automation] Initialize the environment." -q

  echo "[INFO] Initialization successful!"
 }

+check_status
+
 check_init

 _no_gh=false
--- a/tools/release.sh
+++ b/tools/release.sh
@@ -0,0 +1,62 @@
+#!/usr/bin/env bash
+#
+# According to the GitLab flow release branching model,
+# cherry-pick the last commit on the main branch to the release branch,
+# and then create a tag and gem package on the release branch (naming format: 'release/<X.Y>').
+#
+#
+# Usage:
+#
+#   It can be run on main branch, and it should be used after just finishing the last feature in the version plan,
+#   or just after merging the hotfix to the main branch.
+#
+# Requires: Git, Gulp
+
+set -eu
+
+GEM_SPEC="jekyll-theme-chirpy.gemspec"
+
+check() {
+  if [[ -n $(git status . -s) ]]; then
+    echo "Error: Commit unstaged files first, and then run this tool againt."
+    exit -1
+  fi
+
+  if [[ ! -f $GEM_SPEC ]]; then
+    echo -e "Error: Missing file \"$GEM_SPEC\"!\n"
+    exit -1
+  fi
+}
+
+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
+  _release_branch="release/${_version%.*}"
+
+  if [[ -z $(git branch -v | grep "$_release_branch") ]]; then
+    # create a new release branch
+    git checkout -b "$_release_branch"
+  else
+    # cherry-pick the latest commit from default branch to release branch
+    _last_commit="$(git rev-parse "$_default_branch")"
+    git checkout "$_release_branch"
+    git cherry-pick "$_last_commit" -m 1
+  fi
+
+  # create new tag
+  echo -e "Create tag v$_version\n"
+  git tag "v$_version"
+
+  # build a gem package
+  echo -e "Build the gem pakcage for v$_version\n"
+  rm -f ./*.gem
+  gem build "$GEM_SPEC"
+
+}
+
+main() {
+  check
+  release
+}
+
+main
--- a/tools/test.sh
+++ b/tools/test.sh
@@ -1,64 +0,0 @@
-#!/usr/bin/env bash
-#
-# Using HTML-proofer to test site.
-#
-# Requirement: https://github.com/gjtorikian/html-proofer
-#
-# Usage: bash /path/to/test.sh [indicated path]
-
-DEST=_site
-
-_build=false
-
-help() {
-  echo "Usage:"
-  echo
-  echo "   bash ./tools/test.sh [options]"
-  echo
-  echo "Options:"
-  echo "     --build                  Run Jekyll build before test."
-  echo "     -d, --dir   <path>       Specify the test path."
-  echo "     -h, --help               Print this information."
-}
-
-if [[ -n $1 && -d $1 ]]; then
-  DEST=$1
-fi
-
-while (($#)); do
-  opt="$1"
-  case $opt in
-    --build)
-      _build=true
-      shift
-      ;;
-    -d | --dir)
-      if [[ ! -d $2 ]]; then
-        echo -e "Error: path '$2' doesn't exist\n"
-        help
-        exit 1
-      fi
-      DEST=$2
-      shift
-      shift
-      ;;
-    -h | --help)
-      help
-      exit 0
-      ;;
-    *)
-      # unknown option
-      help
-      exit 1
-      ;;
-  esac
-done
-
-if $_build; then
-  JEKYLL_ENV=production bundle exec jekyll b
-fi
-
-bundle exec htmlproofer "$DEST" \
-  --disable-external \
-  --check-html \
-  --allow_hash_href
Author	SHA1	Message	Date
Cotes Chung	945e8d1953	Bump version to 4.3.0	2021-09-30 02:32:57 +08:00
Cotes Chung	a400dc9501	Specify the version of the images in the CDN	2021-09-30 02:23:34 +08:00
Cotes Chung	6a4169fc03	Make the init tool compatible with BSD	2021-09-30 02:17:24 +08:00
Cotes Chung	95b4b453e6	Merge branch 'feature/docs' into develop	2021-09-30 00:17:24 +08:00
Cotes Chung	de14c00570	Improve README header	2021-09-29 22:36:47 +08:00
Cotes Chung	f4d4065b1c	Update the tutorials	2021-09-29 22:36:47 +08:00
Cotes Chung	52f854a2da	Update the comment of `_config.yml` Reduce the probability of users using `baseurl` incorrectly	2021-09-29 22:36:47 +08:00
Cotes Chung	38f20e8119	Update issue template	2021-09-29 22:36:47 +08:00
Cotes Chung	1728d697e6	Merge branch 'feature/enhance-script-tools' into develop	2021-09-29 22:20:03 +08:00
Cotes Chung	d9863d6a02	Separate the release steps from the bump tool	2021-09-29 22:18:38 +08:00
Cotes Chung	b460d03c3b	Merge the test tool into the deploy tool	2021-09-29 22:18:38 +08:00
Cotes Chung	a053c454e4	Improve the init tool	2021-09-29 22:18:38 +08:00
Cotes Chung	77c2009658	Improve the layout of toc entries	2021-09-29 22:17:22 +08:00
Cotes Chung	9844b964a8	Improve the alignment of code block	2021-09-29 16:44:03 +08:00
Cotes Chung	063b2a6651	Prevent Disqus from jumping when page loading	2021-09-29 03:24:41 +08:00
Cotes Chung	e5df04dd59	Hide the scroll bar of code block when not hovering (resolve #414 )	2021-09-29 03:24:41 +08:00
Cotes Chung	9e9278ce30	Fix code style of SCSS files	2021-09-24 15:35:44 +08:00
Cotes Chung	30dfc6fb7e	Merge branch 'feature/icons-improvement' into develop	2021-09-24 15:32:35 +08:00
Cotes Chung	1ce350e33e	Beautify the style of categories button	2021-09-24 15:21:49 +08:00
Cotes Chung	50c88f7205	Prevent the back-to-top button from flickering when switching the theme mode	2021-09-24 15:21:49 +08:00
Cotes Chung	387fc67102	Improve the vertical alignment of icons - sidebar bottom icons - back to top icon	2021-09-24 15:21:49 +08:00
Cotes Chung	414715fc47	Merge branch 'feature/code-snippet' into develop	2021-09-24 15:20:00 +08:00
Cotes Chung	1bb54096f4	Improve the UX of clipboard button	2021-09-24 15:13:00 +08:00
Cotes Chung	abb548fcee	Change the icon & color of the code block header	2021-09-24 15:13:00 +08:00
Cotes Chung	ed93fbdfde	Covert the language alias on code header	2021-09-24 15:13:00 +08:00
Cotes Chung	4ad0a76789	Add label icon to code snippet header	2021-09-24 15:13:00 +08:00
Cotes Chung	89b76dc2a0	Merge branch 'feature/color-scheme' into develop	2021-09-24 15:09:14 +08:00
Cotes Chung	395b24736a	Improve the layout of sidebar icons	2021-09-24 14:54:15 +08:00
Cotes Chung	fa0155de6f	Lighten the light mode color scheme	2021-09-23 20:39:16 +08:00
Cotes Chung	0bffb276fe	Unlock Ruby 3.0	2021-09-22 01:22:32 +08:00
Cotes Chung	2417db656c	Add aria label	2021-09-17 18:59:49 +08:00
Cotes Chung	e5bf234835	Fix cursor for some buttons & links (fix #411 )	2021-09-17 16:58:32 +08:00
Cotes Chung	2dfdb66e0a	Refactor clipboard functions	2021-09-17 16:08:00 +08:00
Cotes Chung	da9881a47f	Merge branch 'hotfix/4.2.1'	2021-09-16 21:01:16 +08:00
Cotes Chung	c68a937e01	Improve the bump tool so that it can cherry-pick a merge type commit	2021-09-16 21:00:32 +08:00
Cotes Chung	4001ef7cba	Prevent copying code line numbers on Safari	2021-09-16 18:42:50 +08:00
Cotes Chung	1b16b152df	Optimize icon position	2021-09-16 17:56:12 +08:00
Cotes Chung	e607e5fe86	Restore the copy URL function that was deleted by mistake	2021-09-16 17:55:52 +08:00