Fetching popperjs synchronously

missing on SCSS rewrite.

.github/CONTRIBUTING.md

@@ -14,7 +14,7 @@ If you are willing to improve some of the existing code, such as performance opt
 
 ## Feature Request
 
-Basically, it is recommended to first submit a `Feature Request` issue to discuss whether your idea fits the project. Once the discussion is complete and the request is approved, fork this project, complete the development of new features, and submit a Pull Request. What's more, the PR should be merged into `master` branch without conflict.
+Basically, to ensure that the blog design is not confused, we do not accept suggestions for design changes, such as colors scheme, fonts, typography, etc. As long as your request is not a design issue, it is recommended to first submit a `Feature Request` issue to discuss whether your idea fits the project. Once the discussion is complete and the request is approved, fork this project, complete the development of new features, and submit a `Pull Request`. What's more, the PR should be merged into `master` branch without conflict.
 
 
 ---

.github/ISSUE_TEMPLATE/bug_report.md

@@ -26,14 +26,14 @@ Steps to reproduce the behavior:
 
 **Desktop (please complete the following information):**
  - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
+ - Browser: [e.g. chrome, safari]
- - Version [e.g. 22]
+ - Version: [e.g. 22]
 
 **Smartphone (please complete the following information):**
  - Device: [e.g. iPhone6]
  - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
+ - Browser: [e.g. stock browser, safari]
- - Version [e.g. 22]
+ - Version: [e.g. 22]
 
 **Additional context**
 <!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/ISSUE_TEMPLATE/question.md

@@ -43,14 +43,14 @@ If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
  - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
+ - Browser: [e.g. chrome, safari]
- - Version [e.g. 22]
+ - Version: [e.g. 22]
 
 **Smartphone (please complete the following information):**
  - Device: [e.g. iPhone6]
  - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
+ - Browser: [e.g. stock browser, safari]
- - Version [e.g. 22]
+ - Version: [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here. 

.github/workflows/ci.yml

@@ -1,14 +1,21 @@
 name: build
 on:
   push:
+    branches-ignore:
+      - stable
+    tags-ignore:
+      - '*'
     paths-ignore:
-    - 'docs/**'
+      - '.github/**'
-    - 'README.md'
+      - '!.github/workflows/**'
-    - 'LICENSE'
+      - '.travis.yml'
-    - '.travis.yml'
+      - '.gitignore'
+      - 'docs/**'
+      - 'README.md'
+      - 'LICENSE'
   pull_request:
     paths:
-    - "**"
+      - "**"
 
 jobs:
   ci:

.travis.yml

@@ -5,7 +5,7 @@ language: ruby
 rvm: 2.6.5
 
 before_install:
-  - pyenv global 3.7.5
+  - pyenv global 3.7.6
 
 install:
   - pip install -r _scripts/py/requirements.txt
@@ -24,7 +24,7 @@ script:
   - bash _cibuild.sh
 
 branches:
-  only: master
+  only: stable
 
 git:
   depth: false # for posts lastmod

README.md

@@ -6,9 +6,9 @@
 
 Language: English | [简体中文](docs/README_zh-CN.md)
 
-A minimal, portfolio, sidebar, bootstrap Jekyll theme with responsive web design and focuses on text exhibition. It will help you easily record, manage and share your knowledge and experience. 
+A minimal, portfolio, sidebar, bootstrap Jekyll theme with responsive web design and focuses on text exhibition. It will help you easily record and share your knowledge. 
 
-You will get the following features:
+**Features**
 
 * Auto Dark Mode
 * Posts' Last Modified Date
@@ -24,9 +24,7 @@ You will get the following features:
 * SEO Tag
 * Performance Optimization
 
-[**Live Demo** »](https://chirpy.cotes.info)
+[![devices-mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
-
-![devices-mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)
 
 ## Table of Contents
 
@@ -42,9 +40,9 @@ You will get the following features:
 
 ### Prerequisites
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (Ruby, RubyGem, Bundler and Jekyll). In order to use the script tools to save time, we also need to install [Python](https://www.python.org/downloads/)(version 3.5 or abover) and [ruamel.yaml](https://pypi.org/project/ruamel.yaml/).
+Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (`Ruby `, `RubyGems` and `Bundler`). In order to use the script tools to save time, we also need to install [Python](https://www.python.org/downloads/)(version 3.5 or abover) and [ruamel.yaml](https://pypi.org/project/ruamel.yaml/).
 
-In addition, if your machine is running Debian or macOS, make sure you have the [GNU coreutils](https://www.gnu.org/software/coreutils/) installed. Otherwise, get it by:
+In addition, if your machine is running Debian or macOS, make sure the [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, get it by:
 
 * Debian
 
@@ -122,14 +120,28 @@ As mentioned above, some files or directories should be removed from your repo:
 
 Basically, go to `_config.yml` and customize the variables as needed, some of them are typical options:
 
-* Avatar
+* `url`
 	
-    `avatar` defines the source image location. The sample image is `/assets/img/sample/avatar.jpg`. It should be replaced by your own one. Notice that a huge image file will increase the load time of your site, so keep your avatar size as samll as possible(may be *<https://tinypng.com/>* will help).
+	Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
 
-* TimeZone
+
+* `avatar`
+    
+    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one(a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as samll as possible(may be *<https://tinypng.com/>* will help).
+
+* `timezone`
 
     To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
 
+* `theme_mode`
+  
+	There are three options for the theme color scheme:
+	
+	- **dual** 	- The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
+
+	- **dark**	- Always show dark mode.
+	- **light**	- Always show light mode.
+
 
 ###  Run Locally
 
@@ -168,7 +180,17 @@ $ bash tools/init.sh
 
 >**Note**: The *Recent Update* requires the posts' latest git-log date, so make sure the changes in `_posts` have been committed before running this command.
 
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
+it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit. Its output is similar to the following log:
+
+```terminal
+[INFO] Success to update lastmod for 4 post(s).
+[INFO] Succeed! 3 category-pages created.
+[INFO] Succeed! 4 tag-pages created.
+[Automation] Updated the Categories, Tags, Lastmod for post(s).
+ 11 files changed, 46 insertions(+), 3 deletions(-)
+ ...
+Updated the Categories, Tags, Lastmod for post(s).
+```
 
 **3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repo.
 
@@ -218,19 +240,19 @@ For more details and the better reading experience, please check out the [tutori
 
 ## Contributing
 
-The old saying: "Tow heads are better than one. Five heads are better than two." So, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
+The old saying: "Two heads are better than one. Five heads are better than two." So, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
 
 
 ## Credits
 
 This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools(their copyright information can be found in the relevant files).
 
-:tada:Thanks to all the volunteers who contributed to this project, their github ID is on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget the guys who submitted the issues(or unmerged PR), they reported bugs, shared ideas or inspired me to write more readable documentation.
+:tada:Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
 
 
 ## Support
 
-If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart:Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate. This will encourage me and help me maintain this project.
+If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart:Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
 
 
 ## License

_config.yml

@@ -13,9 +13,11 @@ title: Chirpy                          # the main title
 tagline: A text-focused Jekyll theme.  # it will display as the sub-title
 
 description: >-                        # used by seo meta and the atom feed
-  A minimal, portfolio, sidebar, bootstrap Jekyll theme with responsive web design and focuses on text presentation.
+  A minimal, portfolio, sidebar,
+  bootstrap Jekyll theme with responsive web design
+  and focuses on text presentation.
 
-# Replace with your domain, e.g. 'https://username.github.io'
+# Replace with the website url, e.g. 'https://username.github.io'
 url: 'protocol://domain'
 
 author: your_full_name                  # change to your full name
@@ -53,19 +55,30 @@ google_analytics:
   # Fill with your Google Analytics ID
   id: ''
   # The Google Analytics pageviews switch.
-  # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
-  pv: false
-  # superProxy baseURL and URL, only valid when `google_analytics.pv` is set to 'true'
-  proxy_baseurl: ''
-  proxy_url: ''
 
+  pv:
+    # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
+    enabled: false
+    # the next options only valid when `google_analytics.pv` is enabled.
+    proxy_url: ''
+    proxy_endpoint: ''
+    cache: false  # pv data local cache, good for the users from GFW area.
 
 disqus:
   comments: false  # boolean type, the global switch for posts comments.
   shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
-# The year your website first ran.
+
-first_run: 2019
+# Prefer color scheme setting, available values:
+#
+#     dual   - Follow the system prefer color by default, and a toggle will display
+#              in the left bottom of Sidebar, which used for switch the theme between dark and light.
+#
+#     light  - Use the light color scheme
+#
+#     dark   - Use the dark color scheme
+#
+theme_mode: dual
 
 # boolean type, global switch for ToC in posts.
 toc: true
@@ -113,6 +126,7 @@ defaults:
     scope:
       path: tags
     values:
+      tab_active: Tags
       location: Tag
       breadcrumb:
         -
@@ -125,6 +139,7 @@ defaults:
     scope:
       path: categories
     values:
+      tab_active: Categories
       location: Category
       breadcrumb:
         -
@@ -157,7 +172,9 @@ sass:
 compress_html:
   clippings: all
   comments: ["<!-- ", " -->"]
-  endings: [html, head, body, dt, dd, rt, rp, optgroup, option, colgroup, caption, thead, tbody, tfoot, tr, td, th]
+  endings: [html, head, body, dt, dd, rt, rp,
+            optgroup, option, colgroup, caption,
+            thead, tbody, tfoot, tr, td, th]
   profile: false
   blanklines: false
   ignore:

_data/date_format.yml

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

_data/label.yml

@@ -4,12 +4,6 @@
 # © 2017-2019 Cotes Chung
 # MIT Licensed
 
-tabs:
-  - { name: "Home", icon: 'fas fa-home' }
-  - { name: "Categories", path: tabs, url: categories, icon: 'fas fa-stream' }
-  - { name: "Tags", path: tabs, url: tags, icon: 'fas fa-tags' }
-  - { name: "Archives", path: tabs, url: archives, icon: 'fas fa-archive'}
-  - { name: "About", path: tabs, url: about, icon: 'fas fa-info'}
 
 panel:
   lastmod: "Recent Update"
@@ -18,5 +12,8 @@ panel:
 
 post:
   relate_posts: "Further Reading"
+  button:
+    next: Newer
+    previous: Older
 
 search_hint: "Search"   # text show on search bar

_data/right.yml

@@ -0,0 +1,21 @@
+#  License data.
+#
+#  v2.1
+#  https://github.com/cotes2020/jekyll-theme-chirpy
+#  © 2020 Cotes Chung
+#  MIT Licensed
+
+
+license:
+  link: "https://creativecommons.org/licenses/by/4.0/"
+  prompt: This post is licensed under
+  name: CC BY 4.0
+  icons:
+    - "fab fa-creative-commons"
+    - "fab fa-creative-commons-by"
+
+brief: Some rights reserved.
+
+verbose: >-
+  The blog posts on this site are licensed
+  under the Creative Commons Attribution 4.0 International (CC BY 4.0) License.

_data/share.yml

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

_data/tabs.yml

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

_includes/date-format.html

@@ -1,10 +0,0 @@
-<!--
- Define the liquid date formats.
- v2.0
- https://github.com/cotes2020/jekyll-theme-chirpy
- © 2019 Cotes Chung
- Published under the MIT License
--->
-
-{% assign TOOLTIP_DATE = "%a, %b %e, %Y, %l:%M %p %z" %}
-{% assign POST_DATE = "%b %e, %Y" %}

_includes/footer.html

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

_includes/head.html

@@ -34,9 +34,9 @@
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
 
-    {% if site.google_analytics.proxy_baseurl and site.google_analytics.pv %}
+    {% if site.google_analytics.pv.proxy_url and site.google_analytics.pv.enabled %}
-      <link rel="preconnect" href="{{ site.google_analytics.proxy_baseurl }}" crossorigin="use-credentials">
+      <link rel="preconnect" href="{{ site.google_analytics.pv.proxy_url }}" crossorigin="use-credentials">
-      <link rel="dns-prefetch" href="{{ site.google_analytics.proxy_baseurl }}">
+      <link rel="dns-prefetch" href="{{ site.google_analytics.pv.proxy_url }}">
     {% endif %}
   {% endif %}
 
@@ -96,11 +96,12 @@
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/syntax.css">
   {% endif %}
 
-
+  <!-- jquery -->
   <link rel="preload" as="script"
     href="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"
     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
 
+  <!-- popper -->
   <link rel="preload" as="script"
     href="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"
     integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin>
@@ -113,7 +114,7 @@
   </script>
 
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"
-    integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous" async></script>
+    integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous"></script>
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
     integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous" async></script>
@@ -122,7 +123,8 @@
 
   {% if page.layout == 'home' or page.layout == 'post' %}
     <script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js" async></script>
-    {% if site.google_analytics.pv %}
+    {% if site.google_analytics.pv.enabled %}
+      <script src="{{ site.baseurl }}/assets/data/pv-data.json"></script>
       <script src="{{ site.baseurl }}/assets/lib/countUp.min.js" async></script>
       <script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
     {% endif %}
@@ -146,4 +148,6 @@
 
   {% endif %}
 
+  <script src="{{ site.baseurl }}/assets/js/dist/tooltip-loader.min.js" async></script>
+
 </head>

_includes/mode-toggle.html

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

_includes/panel.html

@@ -23,7 +23,7 @@
   {% endfor %}
 
   {% if lastmod_list.size > 0 %}
-    <div id="access-lastmod" class="post mb-4">
+    <div id="access-lastmod" class="post">
       <h3 data-toc-skip>
         {{- site.data.label.panel.lastmod -}}
       </h3>
@@ -57,7 +57,7 @@
 
   {% if page.layout == 'post' and site.toc and page.toc %}
   <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <h3 data-toc-skip class="pl-3 pt-2">
+    <h3 data-toc-skip class="pl-3 pt-2 mb-3">
       {{- site.data.label.panel.toc -}}
     </h3>
     <nav id="toc" data-toggle="toc"></nav>

_includes/post-nav.html

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

_includes/post-paginator.html

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

_includes/post-sharing.html

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

_includes/related-posts.html

@@ -43,7 +43,7 @@
   {% assign score_list = score_list | sort | reverse %}
   {% assign count = 0 %}
   <div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
-    <h3 class="pt-2 mt-1 mb-4" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
+    <h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for score_item in score_list %}
       {% assign data = score_item | split: ":" %}
@@ -53,7 +53,7 @@
         <a href="{{ post.url | relative_url }}">
           <div class="card-body">
             <span class="timeago small">
-                {{ post.date | date: POST_DATE }}
+                {{ post.date | date: site.data.date_format.post }}
                 <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
             </span>
             <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>

_includes/sidebar.html

@@ -15,7 +15,7 @@
         {% if start == '/' %}
           {% assign avatar_url = avatar_url | prepend: site.baseurl %}
         {% endif %}
-        <img src="{{ avatar_url }}">
+        <img src="{{ avatar_url }}" alt="avatar">
       </a>
     </div>
 
@@ -30,7 +30,7 @@
   <ul class="nav flex-column">
   {% assign page_urls = page.url | split: "/" %}
 
-  {% for item in site.data.label.tabs %}
+  {% for item in site.data.tabs %}
     {% assign ref = site.baseurl | append: "/" %}
 
     {% if item.path %}
@@ -41,8 +41,9 @@
     {% endif %}
 
     <li class="nav-item d-flex justify-content-center
-      {% if item.url == page_urls.last or
+      {% if item.url == page_urls.last
-        item.name == "Home" and page.layout == "home" %}active{% endif %}">
+        or item.name == page.tab_active
+        or item.name == "Home" and page.layout == "home" %}active{% endif %}">
       <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
         <i class="fa-fw {{ item.icon }} ml-3 mr-3 unloaded"></i>
         <span>{{ item.name | upcase }}</span>
@@ -54,7 +55,15 @@
 
 </div><!-- #nav-wrapper -->
 
-<div class="contact d-flex justify-content-around mt-4">
+<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
+
+  {% if site.theme_mode == "dual" %}
+  <span id="mode-toggle-wrapper">
+    {% include mode-toggle.html %}
+  </span>
+  <span class="icon-border"></span>
+  {% endif %}
+
   <a href="https://github.com/{{ site.github.username }}" target="_blank">
     <i class="fab fa-github-alt"></i>
   </a>
@@ -68,4 +77,5 @@
   <a href="{{ site.baseurl }}/feed.xml" target="_blank">
     <i class="fas fa-rss"></i>
   </a>
+
 </div>

_includes/topbar.html

@@ -44,7 +44,7 @@
       <input class="form-control" id="search-input" type="search" placeholder="{{ site.data.label.search_hint }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
-    <a href="javascript:;">Cancel</a>
+    <span id="search-cancel" >Cancel</span>
   </div>
 
 </div>

_layouts/category.html

@@ -6,8 +6,6 @@ layout: page
 # MIT Licensed
 ---
 
-{% include date-format.html %}
-
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
@@ -20,7 +18,7 @@ layout: page
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
       <a href="{{ post.url | absolute_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small">{{ post.date | date: POST_DATE }}</span>
+      <span class="text-muted small">{{ post.date | date: site.data.date_format.post }}</span>
     </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -8,7 +8,14 @@ layout: compress
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+
+{% capture prefer_mode %}
+  {% if site.theme_mode != "dual" %}
+    mode="{{ site.theme_mode }}"
+  {% endif %}
+{% endcapture %}
+
+<html lang="en" {{ prefer_mode }} >
 
   {% include head.html %}
 

_layouts/home.html

@@ -7,8 +7,6 @@ layout: page
 # MIT Licensed
 ---
 
-{% include date-format.html %}
-
 <div id="post-list">
   {% for post in paginator.posts %}
   <div class="post-preview">
@@ -24,12 +22,13 @@ layout: page
     <div class="post-meta text-muted pt-1">
       <!-- posted date -->
       <i class="far fa-clock fa-fw"></i>
-      <span class="timeago" data-toggle="tooltip" title="{{ post.date | date: TOOLTIP_DATE }}">
+      <span class="timeago" data-toggle="tooltip" data-placement="bottom"
-      {{ post.date | date: POST_DATE }}
+        title="{{ post.date | date: site.data.date_format.tooltip }}">
+      {{ post.date | date: site.data.date_format.post }}
       <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
       </span>
       <!-- page views -->
-      {% if site.google_analytics.pv %}
+      {% if site.google_analytics.pv.enabled %}
       <i class="far fa-eye fa-fw"></i>
       <span id="pv_{{-post.title-}}" class="pageviews">
         <i class="fas fa-spinner fa-spin fa-fw"></i>
@@ -41,83 +40,5 @@ layout: page
 </div> <!-- #post-list -->
 
 {% if paginator.total_pages > 0 %}
-<ul class="pagination mt-4 mb-0 pl-lg-2">
+  {% include post-paginator.html %}
-  <!-- left arrow -->
-  {% if paginator.previous_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">
-      <i class="fas fa-angle-left"></i>
-    </a>
-  </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
-  </li>
-  {% endif %}
-  <!-- endof left arrow -->
-
-  <!-- page numbers -->
-  {% assign left_ellipsis = false %}
-  {% assign right_ellipsis = false %}
-
-  {% for i in (1..paginator.total_pages) %}
-
-    {% assign pre = paginator.page | minus: 1 %}
-    {% assign next = paginator.page | plus: 1 %}
-    {% assign pre_less = pre | minus: 1 %}
-    {% assign next_more = next | plus: 1 %}
-    {% assign show = false %}
-
-    {% if paginator.page == 1 %}
-      {% if i <= 3 or i == paginator.total_pages %}
-        {% assign show = true %}
-      {% endif %}
-    {% elsif paginator.page == paginator.total_pages %}
-      {% if i == 1 or i >= pre_less %}
-        {% assign show = true %}
-      {% endif %}
-    {% else %}
-      {% if i == 1 or i == paginator.total_pages%}
-        {% assign show = true %}
-      {% elsif i >= pre and i <= next %}
-        {% assign show = true %}
-      {% endif %}
-    {% endif %}
-
-    {% if show %}
-        <!-- show number -->
-        <li class="page-item {% if i == paginator.page %} active{% endif %}">
-          <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
-        </li>
-      {% else %}
-        <!-- hide number -->
-        {% if i < pre and left_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign left_ellipsis = true %}
-        {% elsif i > next and right_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign right_ellipsis = true %}
-        {% endif %}
-      {% endif %}
-
-  {% endfor %}
-
-  <!-- right arrow -->
-  {% if paginator.next_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}">
-      <i class="fas fa-angle-right"></i>
-    </a>
-  </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
-  </li>
-  {% endif %}
-
-</ul> <!-- .pagination -->
 {% endif %}

_layouts/page.html

@@ -9,7 +9,7 @@ layout: default
 
 <div class="row">
   <div class="col-12 col-lg-11 col-xl-8">
-    <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
+    <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3 mb-md-4">
     {% if page.dynamic_title %}
       <h1 class="dynamic-title">{{ page.title }}</h1>
       <div class="post-content">
@@ -18,11 +18,21 @@ layout: default
     {% else %}
       {{ content }}
     {% endif %}
-
     </div> <!-- #page -->
-
   </div><!-- .col-12 -->
 
   {% include panel.html %}
 
 </div>
+
+{% if site.disqus.comments and page.comments %}
+<div class="row">
+  <div class="col-12 col-lg-11 col-xl-8">
+    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+
+    {% include disqus.html %}
+
+    </div> <!-- .pl-1 pr-1 -->
+  </div> <!-- .col-12 -->
+</div> <!-- .row -->
+{% endif %}

_layouts/post.html

@@ -8,16 +8,19 @@ layout: default
 ---
 
 <div class="row">
-  {% include date-format.html %}
 
   <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
+
     <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+
       <h1 data-toc-skip>{{ page.title }}</h1>
+
       <div class="post-meta text-muted d-flex flex-column">
         <!-- Published Date and Categoreis -->
         <div>
-          <span class="timeago" data-toggle="tooltip" title="{{ page.date | date: TOOLTIP_DATE }}">
+          <span class="timeago" data-toggle="tooltip" data-placement="bottom"
-            {{ page.date | date: POST_DATE }}
+           title="{{ page.date | date: site.data.date_format.tooltip }}">
+            {{ page.date | date: site.data.date_format.post }}
             <i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
           </span>
           {% if page.categories.size > 0 %}on{% endif %}
@@ -27,19 +30,8 @@ layout: default
           {% endfor %}
         </div>
 
-        <!-- lastmod -->
-        {% if page.seo.date_modified > page.date %}
-        <div>
-          Updated
-          <span class="timeago lastmod" data-toggle="tooltip" title="{{ page.seo.date_modified | date: TOOLTIP_DATE }}">
-            {{ page.seo.date_modified | date: POST_DATE }}
-            <i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
-          </span>
-        </div>
-        {% endif %}
-
         <!-- page views -->
-        {% if site.google_analytics.pv %}
+        {% if site.google_analytics.pv.enabled %}
         <div>
           <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span> views
         </div>
@@ -53,7 +45,9 @@ layout: default
         {% endif %}
         <!-- Add lozad class into image tags. see: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
         {% if content contains '<img src=' %}
-          {% capture loading %}{{ "/assets/img/commons/loading.png" | relative_url }}{% endcapture %}
+          {% capture loading %}
+           {{ "/assets/img/commons/loading.png" | relative_url }}
+          {% endcapture %}
           {% assign replacement = '<img class="lozad" src=' | append: loading | append: ' data-src=' %}
           {{ content | replace: '<img src=', replacement }}
         {% else %}
@@ -61,10 +55,24 @@ layout: default
         {% endif %}
       </div>
 
-      <div class="post-tail text-muted">
+      <div class="post-tail-wrapper text-muted">
+
+        <!-- lastmod -->
+        {% if page.seo.date_modified > page.date %}
+        <div>
+          Updated
+          <span class="timeago lastmod"
+            data-toggle="tooltip" data-placement="top"
+             title="{{ page.seo.date_modified | date: site.data.date_format.tooltip }}">
+            {{ page.seo.date_modified | date: site.data.date_format.post }}
+            <i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
+          </span>
+        </div>
+        {% endif %}
+
         <!-- Tags -->
         {% if page.tags.size > 0 %}
-        <div class="mb-4">
+        <div class="pt-3">
           {% for tag in page.tags %}
           <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
             class="post-tag no-text-decoration" >
@@ -73,9 +81,32 @@ layout: default
           {% endfor %}
           </div>
         {% endif %}
+
+        <div class="post-tail-bottom
+          d-flex justify-content-between align-items-center pt-5 pb-2">
+
+          {% if site.data.right.license %}
+          <div class="license-wrapper">
+            <span class="license-text ml-1 mr-1">
+              {{ site.data.right.license.prompt }}
+              <a href="{{ site.data.right.license.link }}">
+                {{ site.data.right.license.name }}
+                {% for icon in site.data.right.license.icons %}
+                <i class="{{ icon }}"></i>
+                {% endfor %}
+              </a>
+            </span>
+          </div>
+          {% endif %}
+
+          {% include post-sharing.html %}
+
+        </div><!-- .post-tail-bottom -->
+
       </div><!-- div.post-tail -->
 
     </div> <!-- .post -->
+
   </div> <!-- #post-wrapper -->
 
   {% include panel.html %}
@@ -86,32 +117,15 @@ layout: default
   <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
 
     <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+
+      {% include post-nav.html %}
+
+      {% if site.disqus.comments and page.comments %}
+        {% include disqus.html %}
+      {% endif %}
+
       {% include related-posts.html %}
 
-      <div class="post-navigation d-flex justify-content-between">
-      {% if page.previous.url %}
-        <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
-          <p>{{ page.previous.title }}</p>
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
-          <p>-</p>
-      {% endif %}
-        </a>
-
-      {% if page.next.url %}
-        <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
-          <p>{{ page.next.title }}</p>
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
-          <p>-</p>
-      {% endif %}
-        </a>
-      </div> <!-- div.post-navigation -->
-
-    {% if site.disqus.comments and page.comments %}
-      {% include disqus.html %}
-    {% endif %}
-
     </div> <!-- .pl-1 pr-1 -->
 
   </div> <!-- #post-extend-wrapper -->

_layouts/tag.html

@@ -7,8 +7,6 @@ layout: page
 # MIT Licensed
 ---
 
-{% include date-format.html %}
-
 <div id="page-tag">
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
@@ -20,7 +18,7 @@ layout: page
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
       <a href="{{ post.url | absolute_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small">{{ post.date | date: POST_DATE }}</span>
+      <span class="text-muted small">{{ post.date | date: site.data.date_format.post }}</span>
     </li>
     {% endfor %}
   </ul>

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

@@ -7,7 +7,7 @@ tags: [writing]
 
 ## Naming and Path
 
-Create a new file name with the format `YYYY-MM-DD-title.md` then put it into `_post` of the root directory.
+Create a new file named with the format `YYYY-MM-DD-title.md` then put it into `_post` of the root directory.
 
 ## Front Matter
 
@@ -18,15 +18,70 @@ Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-m
 title: TITLE
 date: YYYY-MM-DD HH:MM:SS +/-TTTT
 categories: [TOP_CATEGORIE, SUB_CATEGORIE]
-tags: [TAG]
+tags: [TAG]     # TAG names should always be lowercase
 ---
 ```
 
 > **Note**: The posts' ***layout*** has been set to `post` by default, so there is no need to add the variable ***layout*** in Front Matter block.
 
+- **Timezone of date**
+
+    In order to accurately record the release date of a post, you should not only setup the `timezone` of `_config.yml` but also provide the the post's timezone in field `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`.
+
 - **Categories and Tags**
 
-    The `categories` of each post is designed to contain up to two elements, and the number of elements in `tag` can be zero or infinite.
+    The `categories` of each post is designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity.
+
+    The list of posts belonging to the same category/tag is recorded on a separate page. The number of such *category*/*tag* type pages is equal to the number of `categories`/`tags` for all posts, they must match perfectly. 
+
+    let's say there is a post with front matter:
+```yaml
+categories: [Animal, Insect]
+tags: bee
+```
+
+    then we should have two *category* type pages placed in folder `categories` of root and one *tag* type page placed in folder `tags`  of root:
+```terminal
+jekyll-theme-chirpy
+├── categories
+│   ├── animal.html
+│   └── tutorial.html
+└── tags
+    └── bee.html
+```
+    
+    and the content of a *category* type page is
+```yaml
+---
+layout: category
+title: CATEGORY_NAME        # e.g. Insect
+category: CATEGORY_NAME     # e.g. Insect
+---
+```
+
+    the content of a *tag* type page is
+```yaml
+---
+layout: tag
+title: TAG_NAME             # e.g. bee
+tag: TAG_NAME               # e.g. bee
+---
+```
+
+    With the increasing number of posts, the number of categories and tags will increase several times!  If we still manually create these *category*/*tag* type files, it will obviously be a super time-consuming job, and it is very likely to miss some of them(i.e. when you click on the missing `category` or `tag` link from a post or somewhere, it will complain to you '404'). The good news is that we got a lovely script tool `_scripts/py/pages_generator.py` to finish the boring task. Basically we will use it via `tools/init.sh` instead of running it separately. Check out its use case [here]({{ "/posts/getting-started/#option-1-built-by-github-pages" | relative_url }}).
+
+- **Last modified date**
+    
+    The last modified date of the posts is recorded as `seo.date_modified`, for example:
+```yaml
+---
+seo:
+    date_modified: 2020-01-04 17:05:41 +0800
+---
+```
+
+    This date is equal to the lastest git-commit date of the post file and can be automatically generated by the tool script `_scripts/py/update_posts_lastmod.py`. Similar to the other script `pages_generator.py` mentioned above, it is also be called from `tools/init.sh`, so it doesn't have to be used separately.
+    
 
 ## Table of Contents
 

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

@@ -73,16 +73,30 @@ As mentioned above, some files or directories should be removed from your repo:
 
 ## Configuration
 
-Customize the variables in file `_config.yml` as needed.
+Basically, go to `_config.yml` and customize the variables as needed, some of them are typical options:
 
-* Avatar
+* `url`
     
-    The sample avatar is `/assets/img/sample/avatar.jpg`. It should be replaced by your own one. Notice that a huge image file will increase the load time of your site, so keep your avatar size as samll as possible(may be *<https://tinypng.com/>* will help).
+    Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
 
-* TimeZone
+
+* `avatar`
+    
+    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one(a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as samll as possible(may be *<https://tinypng.com/>* will help).
+
+* `timezone`
 
     To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
 
+* `theme_mode`
+  
+    There are three options for the theme color scheme:
+    
+    - **dual**  - The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
+
+    - **dark**  - Always show dark mode.
+    - **light** - Always show light mode.
+
 
 ##  Run Locally
 
@@ -122,7 +136,18 @@ $ bash tools/init.sh
 
 > Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
 
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
+it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit. Its output is similar to the following log:
+
+```terminal
+[INFO] Success to update lastmod for 4 post(s).
+[INFO] Succeed! 3 category-pages created.
+[INFO] Succeed! 4 tag-pages created.
+[Automation] Updated the Categories, Tags, Lastmod for post(s).
+ 11 files changed, 46 insertions(+), 3 deletions(-)
+ ...
+Updated the Categories, Tags, Lastmod for post(s).
+```
+
 
 **3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repo.
 

_scripts/py/pages_generator.py

@@ -16,13 +16,13 @@ MIT License
 
 
 import os
-import glob
 import shutil
 import sys
 import subprocess
 
 from ruamel.yaml import YAML
 from utils.common import get_yaml
+from utils.common import get_makrdown_files
 from utils.common import check_py_version
 
 
@@ -64,7 +64,10 @@ def get_categories():
 
     for dir in POSTS_DIR:
         path = get_path(dir)
-        for file in glob.glob(os.path.join(path, '*.md')):
+        posts = get_makrdown_files(path)
+
+        for file in posts:
+
             meta = yaml.load(get_yaml(file)[0])
 
             if 'category' in meta:
@@ -98,6 +101,10 @@ def get_categories():
 
 def generate_category_pages(is_verbose):
     categories = get_categories()
+
+    if len(categories) <= 0:
+        return
+
     path = get_path(CATEGORIES_DIR)
 
     if os.path.exists(path):
@@ -129,7 +136,9 @@ def get_all_tags():
 
     for dir in POSTS_DIR:
         path = get_path(dir)
-        for file in glob.glob(os.path.join(path, '*.md')):
+        posts = get_makrdown_files(path)
+
+        for file in posts:
             meta = yaml.load(get_yaml(file)[0])
 
             if 'tags' in meta:
@@ -145,6 +154,10 @@ def get_all_tags():
 
 def generate_tag_pages(is_verbose):
     all_tags = get_all_tags()
+
+    if len(all_tags) <= 0:
+        return
+
     tag_path = get_path(TAG_DIR)
 
     if os.path.exists(tag_path):

_scripts/py/update_posts_lastmod.py

@@ -16,7 +16,6 @@ Licensed under MIT
 """
 
 import sys
-import glob
 import os
 import getopt
 import subprocess
@@ -28,6 +27,7 @@ from enum import Enum
 from ruamel.yaml import YAML
 
 from utils.common import get_yaml
+from utils.common import get_makrdown_files
 from utils.common import check_py_version
 
 
@@ -48,11 +48,11 @@ def help():
           "'git' for git-log, 'fs' for filesystem, default to 'git'.\n")
 
 
-def update_lastmod(path, verbose, date):
+def update_lastmod(posts, verbose, date):
     count = 0
     yaml = YAML()
 
-    for post in glob.glob(path):
+    for post in posts:
 
         lastmod = ''
 
@@ -127,7 +127,8 @@ def update_lastmod(path, verbose, date):
 def main(argv):
     check_py_version()
 
-    path = os.path.join(POSTS_PATH, "*.md")
+    specific = False
+    posts = []
     verbose = False
     date = Date.GIT
 
@@ -145,10 +146,12 @@ def main(argv):
             sys.exit()
 
         elif opt == '-f' or opt == '--file':
-            path = arg
+            posts.append(arg)
+            specific = True
 
         elif opt == '-d' or opt == '--dir':
-            path = os.path.join(arg, "*.md")
+            posts = get_makrdown_files(arg)
+            specific = True
 
         elif opt == '-v' or opt == '--verbose':
             verbose = True
@@ -162,7 +165,10 @@ def main(argv):
                 help()
                 sys.exit(2)
 
-    update_lastmod(path, verbose, date)
+    if not specific:
+        posts = get_makrdown_files(POSTS_PATH)
+
+    update_lastmod(posts, verbose, date)
 
 
 main(sys.argv[1:])

_scripts/py/utils/common.py

@@ -11,6 +11,8 @@ MIT License
 '''
 
 import sys
+import os
+import glob
 
 
 def get_yaml(path):
@@ -37,6 +39,16 @@ def get_yaml(path):
     return yaml, num
 
 
+def get_makrdown_files(path):
+    MD_EXTENSIONS = ["md", "markdown", "markdn", "mdown"]
+    ret_files = []
+
+    for extension in MD_EXTENSIONS:
+        ret_files.extend(glob.glob(os.path.join(path, "*." + extension)))
+
+    return ret_files
+
+
 def check_py_version():
     if not sys.version_info.major == 3 and sys.version_info.minor >= 5:
         print("WARNING: This script requires Python 3.5 or higher, "

assets/css/_addon/module.scss

@@ -0,0 +1,93 @@
+/*
+* Mainly scss modules, only imported to `assets/css/main.scss`
+*
+* v2.1
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2020 Cotes Chung
+* MIT Licensed
+*/
+
+/*---------- scss placeholder ---------*/
+
+%tag-hover {
+  background: var(--tag-hover);
+  transition: background 0.35s ease-in-out;
+}
+
+%table-cell {
+  padding: .35rem .8rem;
+  font-size: 95%;
+}
+
+%link-hover {
+  color: #d2603a!important;
+  border-bottom: 1px solid #d2603a;
+  text-decoration: none;
+}
+
+%link-color {
+  color: var(--link-color);
+}
+
+%link-underline {
+  border-bottom: 1px solid var(--link-underline-color);
+}
+
+%no-bottom-border {
+  border-bottom: none;
+}
+
+%section {
+  #post-wrapper & {
+    line-height: 1.2;
+    margin-bottom: 1rem;
+  }
+}
+
+%anchor {
+  #post-wrapper &,
+  #page & {
+    padding-top: 3.5rem;
+    margin-top: -2.5rem;
+  }
+}
+
+%footer-content {
+  font-weight: 600;
+  color: var(---footer-link);
+}
+
+
+/*---------- scss mixin ---------*/
+
+@mixin no-text-decoration {
+  text-decoration: none;
+}
+
+@mixin sidebar-icon {
+  color: rgba(255, 255, 255, 0.5);
+  transition: color 0.35s ease-in-out;
+  user-select: none;
+  margin: 0 .25rem;
+}
+
+@mixin icon-round($diameter) {
+  border: 1px solid;
+  border-radius: 50%;
+  width: $diameter;
+  height: $diameter;
+}
+
+@mixin ml-mr($value) {
+  margin-left: $value;
+  margin-right: $value;
+}
+
+@mixin pl-pr($val) {
+  padding-left: $val;
+  padding-right: $val;
+}
+
+@mixin input-placeholder {
+  opacity: 0.6;
+}

assets/css/_addon/variables.scss

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

assets/css/_colors/dark-syntax.scss

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

assets/css/_colors/dark-typography.scss

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

assets/css/_colors/light-syntax.scss

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

assets/css/_colors/light-typography.scss

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

assets/css/_dark/dark-main.scss

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

assets/css/_dark/dark-syntax.scss

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

assets/css/archives.scss

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

assets/css/categories.scss

@@ -8,35 +8,40 @@
   MIT License
 */
 
-.categories {
+%category-icon-color {
-  margin-bottom: 2rem;
-}
-
-.categories .card-header {
-  padding-right: 12px;
-}
-
-.categories .card-header>span>i:first-child,
-.categories .list-group-item>i {
   color: gray;
 }
 
-.categories .list-group-item {
+.categories {
-  border-left: none;
+  margin-bottom: 2rem;
-  border-right: none;
+  .card-header {
-  padding-left: 2rem;
+    padding-right: 12px;
-}
+  }
+  .list-group-item {
+    border-left: none;
+    border-right: none;
+    padding-left: 2rem;
+    >i {
+      @extend %category-icon-color;
+    }
+    &:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
 
-.categories .collapsing .list-group-item:first-child,
+  }
-.categories .collapse .list-group-item:first-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
 
-.categories i.far,
+  .card-header>span>i:first-child {
-.categories i.fas { // fontawesome icons
+    @extend %category-icon-color;
-  font-size: 86%;
+  }
-}
+
+  i {
+    &.far, &.fas {
+      font-size: 86%; // fontawesome icons
+    }
+  }
+
+} // .categories
 
 .category-trigger {
   width: 1.7rem;
@@ -44,45 +49,22 @@
   border-radius: 50%;
   text-align: center;
   color: #6c757d!important;
+  >i.fas {
+    position: relative;
+    height: .7rem;
+    width: 1rem;
+    transition: 300ms ease all;
+  }
 }
 
 @media (hover: hover) { // only works on desktop
   .category-trigger:hover {
-    background-color: var(--categories-hover-bg, #e9ecef);
+    background-color: var(--categories-hover-bg);
   }
 }
 
-.category-trigger>i.fas {
-  position: relative;
-  height: .7rem;
-  width: 1rem;
-  transition: 300ms ease all;
-}
-
 .rotate {
   -ms-transform: rotate(-90deg); /* IE 9 */
   -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
 }
-
-@media (prefers-color-scheme: dark) {
-  .categories.card,
-  .list-group-item {
-    background-color: var(--card-bg);
-  }
-
-  .categories .card-header {
-    background-color: var(--card-header-bg);
-  }
-
-  .categories .list-group-item {
-    border-left: none;
-    border-right: none;
-    padding-left: 2rem;
-    border-color: var(--main-border);
-  }
-
-  .categories .list-group-item:last-child {
-    border-bottom-color: var(--card-bg);
-  }
-}

assets/css/category-tag.scss

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

assets/css/home.scss

@@ -1,6 +1,5 @@
 ---
 ---
-
 /*!
   Style for Homepage
   v2.0
@@ -9,98 +8,94 @@
   MIT License
 */
 
+
 #post-list {
   margin-top: 1rem;
   padding-right: .5rem;
+  .post-meta {
+    i:not(:first-child) { // post-meta icons on HOME
+      margin-left: 1.5rem;
+    }
+  }
 }
 
 .pagination {
   font-size: 1rem;
-}
+  a:hover {
-
+    text-decoration: none;
-.pagination a:hover {
+  }
-  text-decoration: none;
 }
 
 .post-preview {
   padding-top: 1.5rem;
   padding-bottom: 1rem;
-  border-bottom: 1px solid rgba(158, 158, 158, 0.17);
+  border-bottom: 1px solid var(--main-border-color);
+  >h1 {
+    font-size: 1.4rem;
+    margin: 0;
+  }
+  i.far { /* fontawesome icons */
+    font-size: 86%;
+  }
+  .post-content {
+    margin-top: .6rem;
+    margin-bottom: .6rem;
+    color: var(--post-list-text-color);
+    >p { /* Make preview shorter in Home page*/
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
 }
 
-.post-preview>h1 {
+.page-item {
-  font-size: 1.4rem;
+  .page-link {
-  margin: 0;
+    color: var(--btn-patinator-text-color);
-}
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    text-align: center;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid var(--btn-paginator-border-color);
+    font-family: 'Lato', sans-serif;
+    background-color: var(--button-bg);
+  }
+  &.active {
+    .page-link {
+      background-color: var(--btn-active-bg);
+      border-color: var(--btn-active-border-color);
+      box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
+      color: var(--btn-text-color);
+    }
+  }
+  &.disabled {
+    cursor: not-allowed;
+    .page-link {
+      color: rgba(108, 117, 125, 0.57);
+      border-color: var(--btn-paginator-border-color);
+      background-color: var(--button-bg);
+    }
+  }
+  &:first-child .page-link,
+  &:last-child .page-link {
+    border-radius: 50%;
+  }
+  &:not(:last-child) {
+    margin-right: 0.6rem;
+  }
 
-.post-preview i.far {
+} // .page-item
-  /* fontawesome icons */
-  font-size: 86%;
-}
 
-.post-preview .post-content {
-  margin-top: .6rem;
-  margin-bottom: .6rem;
-  color: var(--text-color, dimgray);
-}
-
-/* Make preview shorter in Home page*/
-.post-preview .post-content>p {
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.page-item .page-link {
-  color: var(--text-color, #555555);
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  text-align: center;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  align-items: center;
-  border-radius: 50%;
-  border: 1px solid var(--main-border, #f1f1f1);
-  font-family: 'Lato', sans-serif;
-  background-color: var(--button-bg);
-}
-
-.page-item.active .page-link {
-  background-color: var(--btn-active-bg, #2a408e);
-  border-color: var(--btn-active-border-color, #007bff);
-  box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
-  color: var(--text-color, #f8f8f8);
-}
-
-.page-item.disabled .page-link {
-  color: rgba(108, 117, 125, 0.57);
-  border-color: var(--main-border, #f1f1f1);
-  background-color: var(--button-bg);
-}
-
-.page-item.disabled {
-  cursor: not-allowed;
-}
-
-.page-item:first-child .page-link,
-.page-item:last-child .page-link {
-  border-radius: 50%;
-}
-
-.page-item:not(:last-child) {
-  margin-right: 0.6rem;
-}
-
-#post-list .post-meta i:not(:first-child) { // post-meta icons on HOME
-  margin-left: 1.5rem;
-}
 
 @media all and (max-width: 576px) {
   #post-list .post-meta>span i:not(:first-child) {

assets/css/post.scss

@@ -1,12 +1,30 @@
 ---
 ---
 /*!
-  Individual styles for Post
+  Post-specific style
   v2.0
   https://github.com/cotes2020/jekyll-theme-chirpy
   © 2019 Cotes Chung
   MIT License
 */
+@import "_addon/variables";
+
+$prompt-older: "{{ site.data.label.post.button.previous }}";
+$prompt-newer: "{{ site.data.label.post.button.next }}";
+
+@mixin btn-sharing-color($light-color, $important: false) {
+  @if $important {
+    color: var(--btn-share-color, $light-color)!important;
+  } @else {
+    color: var(--btn-share-color, $light-color);
+  }
+}
+
+@mixin btn-post-nav {
+  width: 50%;
+  position: relative;
+  border-color: var(--btn-border-color);
+}
 
 .post img {
   margin-top: .5rem;
@@ -21,75 +39,70 @@
   transform: translateX(-50%);
 }
 
-.post-tail {
+.post-tail-wrapper {
-  margin-top: 3.5rem;
+  margin-top: 5rem;
-  border-bottom: 1px double var(--main-border, #e9ecef);
+  border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
 
 .post-navigation {
-  padding: 1rem .2rem;
+  padding-top: 3rem;
-  margin-bottom: 2rem;
+  padding-bottom: 2rem;
-}
 
-.post-navigation .btn,
+  .btn {
-.post-navigation .btn.disabled {
+    @include btn-post-nav;
-  width: 50%;
+    color: var(--link-color);
-  position: relative;
+    &:hover {
-  color: var(--link-color, #2a408e);
+      background: #2a408e;
-  border-color: var(--main-border, #e9ecef);
+      color: #fff;
-}
+      border-color: #2a408e;
+    }
+    &.disabled {
+      @include btn-post-nav;
+      pointer-events: auto;
+      cursor: not-allowed;
+      background: none;
+      color: gray;
+      &:hover {
+        border-color: none;
+      }
+    }
+    &.btn-outline-primary.disabled:focus {
+      box-shadow: none;
+    }
+  }
 
-.post-navigation .btn:hover {
+  p {
-  background: #2a408e;
+    font-size: 1.1rem;
-  color: #fff;
+    line-height: 1.5rem;
-  border-color: #2a408e;
+    margin-top: .3rem;
-}
+    white-space: normal;
+  }
 
-.post-navigation a.btn.disabled {
+  a, span {
-  pointer-events: auto;
+    &::before {
-  cursor: not-allowed;
+      color: var(--text-muted-color);
-  background: none;
+      font-size: .65rem;
-  color: gray;
+      text-transform: uppercase;
-  border-color: var(--main-border, #e9ecef);
+    }
-}
+    &:first-child {
-
+      border-top-right-radius: 0;
-.post-navigation a.btn.btn-outline-primary.disabled:focus {
+      border-bottom-right-radius: 0;
-  box-shadow: none;
+      left: .5px;
-}
+      &::before {
-
+        content: $prompt-older
-.post-navigation a > p {
+      }
-  font-size: 1.1rem;
+    }
-  line-height: 1.5rem;
+    &:last-child {
-  margin-top: .3rem;
+      border-top-left-radius: 0;
-  white-space: normal;
+      border-bottom-left-radius: 0;
-}
+      right: .5px;
-
+      &::before {
-.post-navigation a:first-child {
+        content: $prompt-newer
-  border-top-right-radius: 0;
+      }
-  border-bottom-right-radius: 0;
+    }
-  left: .5px;
+  }
-}
+} // .post-navigation
-
-.post-navigation a:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  right: .5px;
-}
-
-.post-navigation a::before {
-  color: var(--text-muted-color, gray);
-  font-size: .65rem;
-  text-transform: uppercase;
-}
-
-.post-navigation a:first-child::before {
-  content: "Older";
-}
-
-.post-navigation a:last-child::before {
-  content: "Newer";
-}
 
 @keyframes fade-up {
   from {
@@ -108,19 +121,17 @@
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
-  top: 2rem;
+  top: 4rem;
   transition: top 0.2s ease-in-out;
   animation: fade-up .8s;
-}
+  &.topbar-down {
-
+    top: 6rem;
-#toc-wrapper.topbar-down {
+  }
-  top: 6rem;
+  >h3 {
-}
+    font-size: 1rem;
-
+    font-family: 'Oswald', sans-serif;
-#toc-wrapper>h3 {
+    color: gray;
-  font-size: 1rem;
+  }
-  font-family: 'Oswald', sans-serif;
-  color: gray;
 }
 
 #toc li>a {
@@ -132,70 +143,153 @@
 
 /*--- Related Posts ---*/
 
-#related-posts > h3 {
+#related-posts {
-  color: gray;
+  >h3 {
-  font-size: 1.1rem;
+    color: gray;
-  font-family: 'Oswald', sans-serif;
+    font-size: 1.1rem;
-}
+    font-family: 'Oswald', sans-serif;
+  }
+  .card {
+    border: 1px solid var(--card-border-color);
+    background-color: var(--card-bg);
+    box-shadow: 0 0 5px 0 var(--card-box-shadow);
+    -webkit-transition: all .3s ease-in-out;
+    -moz-transition: all .3s ease-in-out;
+    transition: all .3s ease-in-out;
+    h3 {
+      color: var(--label-relate-post);
+    }
+    &:hover {
+      -webkit-transform: translate3d(0, -3px, 0);
+      transform: translate3d(0, -3px, 0);
+      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+    }
+  }
 
-#related-posts .card {
+  .timeago {
-  border: 1px solid var(--main-wrapper-bg, #f1f1f1);
+    color: var(--relate-post-date);
-  background-color: var(--card-bg);
+  }
-  box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922));
-  -webkit-transition: all .3s ease-in-out;;
-  -moz-transition: all .3s ease-in-out;;
-  transition: all .3s ease-in-out;
-}
 
-#related-posts .card:hover {
+  p {
-  -webkit-transform: translate3d(0, -3px, 0);
+    font-size: .9rem;
-  transform: translate3d(0, -3px, 0);
+    margin-bottom: .5rem;
-  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08));
+    overflow: hidden;
-}
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 
-#related-posts .card h3 {
+  a:hover {
-  color: var(--relate-post-title, #353a3d);
+    text-decoration: none;
-}
+  }
 
-#related-posts .timeago {
+  ul {
-  color: var(--text-muted-color, rgba(30,55,70,.4));
+    list-style-type: none;
-}
+    padding-inline-start: 1.5rem;
-
+    >li::before {
-#related-posts p {
+      background: #c2c9d4;
-  font-size: .9rem;
+      width: 5px;
-  margin-bottom: .5rem;
+      height: 5px;
-  overflow: hidden;
+      border-radius: 1px;
-  text-overflow: ellipsis;
+      display: block;
-  display: -webkit-box;
+      content: "";
-  -webkit-line-clamp: 2;
+      position: relative;
-  -webkit-box-orient: vertical;
+      top: 1rem;
-}
+      right: 1rem;
-
+    }
-#related-posts a:hover {
+  }
-  text-decoration: none;
-}
-
-#related-posts ul {
-  list-style-type: none;
-  padding-inline-start: 1.5rem;
-}
-
-#related-posts ul > li::before {
-  background: #c2c9d4;
-  width: 5px;
-  height: 5px;
-  border-radius: 1px;
-  display: block;
-  content: "";
-  position: relative;
-  top: 1rem;
-  right: 1rem;
 }
 
 #post-extend-wrapper {
   min-height: 2rem;
 }
 
+.post-tail-bottom a {
+  color: inherit;
+}
+
+%btn-share-hovor {
+  color: var(--btn-share-hover-color)!important;
+}
+
+.share-wrapper {
+  vertical-align: middle;
+  user-select: none;
+  .share-icons {
+    font-size: 1.2rem;
+    a {
+      &:not(:last-child) {
+        margin-right: .25rem;
+      }
+      &:hover {
+        text-decoration: none;
+        >i {
+          @extend %btn-share-hovor;
+        }
+      }
+    }
+    >i {
+      padding-top: .35rem;
+      &:hover {
+        @extend %btn-share-hovor;
+      }
+    }
+    .fab {
+      &.fa-twitter {
+        @include btn-sharing-color(rgba(29, 161, 242, 1.00));
+      }
+      &.fa-facebook-square {
+        @include btn-sharing-color(rgb(66, 95, 156));
+      }
+      &.fa-telegram {
+        @include btn-sharing-color(rgb(39, 159, 217));
+      }
+      &.fa-weibo {
+        @include btn-sharing-color(rgb(229, 20, 43));
+      }
+    }
+
+  } // .share-icons
+
+  .fas.fa-link {
+    @include btn-sharing-color(rgb(171, 171, 171));
+  }
+
+} // .share-wrapper
+
+
+.share-label {
+  font-family: 'Oswald', sans-serif;
+  &::after {
+    content: ":";
+  }
+}
+
+.license-wrapper {
+  line-height: 1.2rem;
+  .license-text>a {
+    font-weight: 600;
+  }
+  i {
+    font-weight: 400;
+  }
+  span:last-child {
+    font-size: .85rem;
+  }
+} // .license-wrapper
+
+
+@media all and (max-width: 576px) {
+  .post-tail-bottom {
+    -ms-flex-wrap: wrap!important;
+    flex-wrap: wrap!important;
+    >div:first-child {
+      margin-bottom: 1rem;
+    }
+  }
+}
+
 @media all and (max-width: 768px) {
   .post img {
     max-width: calc(100% + 1rem);
@@ -203,20 +297,23 @@
 }
 
 @media all and (min-width: 768px) {
-  .post .post-meta > div:not(:first-child)::before {
+  .post {
-    content: "\2022";
+    .post-meta {
-    color: rgba(158, 158, 158, 0.8);
+      >div:not(:first-child)::before {
-    font-weight: bold;
+        content: "\2022";
-    padding-left: .5rem;
+        color: rgba(158, 158, 158, 0.8);
-    padding-right: .3rem;
+        font-weight: bold;
-  }
+        padding-left: .5rem;
-
+        padding-right: .3rem;
-  .post .post-meta.flex-column {
+      }
-    -webkit-box-orient: horizontal!important;
+      &.flex-column {
-    -webkit-box-direction: normal!important;
+        -webkit-box-orient: horizontal!important;
-    -ms-flex-direction: row!important;
+        -webkit-box-direction: normal!important;
-    flex-direction: row!important;
+        -ms-flex-direction: row!important;
-  }
+        flex-direction: row!important;
+      }
+    }
+  } // .post
 }
 
 @media all and (min-width: 768px) and (max-width: 830px) {
@@ -241,10 +338,12 @@
     margin-left: -.5rem;
     margin-right: -.5rem;
   }
+
 }
 
 /*
-  The following resposive design aim to make #post-extend-wrapper margin-right same as pannel's width
+  The following resposive design aim to
+  make #post-extend-wrapper margin-right same as pannel's width
 */
 @media all and (min-width: 1200px) {
   #post-extend-wrapper {
@@ -269,15 +368,3 @@
     margin-right: calc((100% - 1150px) / 8 + 300px);
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  nav[data-toggle=toc] .nav-link.active,
-  nav[data-toggle=toc] .nav-link.active:focus,
-  nav[data-toggle=toc] .nav-link.active:hover,
-  nav[data-toggle=toc] .nav>li>a:focus,
-  nav[data-toggle=toc] .nav>li>a:hover {
-    /* Override BS */
-    color: var(--toc-highlight)!important;
-    border-left-color: var(--toc-highlight)!important;
-  }
-}

assets/css/syntax.scss

@@ -8,137 +8,113 @@
 * MIT Licensed
 */
 
-@import "_dark/dark-syntax";
+@import "_colors/light-syntax";
+@import "_colors/dark-syntax";
 
-/* the fallback color from https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */
-.highlight pre { background-color: var(--highlight-pre-bg) }
-.highlight .hll { background-color: var(--highlight-hll-bg, #ffffcc) }
-.highlight .c { color: var(--highlight-c, #999988); font-style: italic } /* Comment */
-.highlight .err { color: var(--highlight-err, #a61717); background-color: var(--highlight-err-bg, #e3d2d2) } /* Error */
-.highlight .k { color: var(--highlight-k, #000000); font-weight: bold } /* Keyword */
-.highlight .o { color: var(--highlight-o, #000000); font-weight: bold } /* Operator */
-.highlight .cm { color: var(--highlight-cm, #999988); font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: var(--highlight-cp, #999999); font-weight: bold; font-style: italic } /* Comment.Preproc */
-.highlight .c1 { color: var(--highlight-c1, #999988); font-style: italic } /* Comment.Single */
-.highlight .cs { color: var(--highlight-cs, #999999); font-weight: bold; font-style: italic } /* Comment.Special */
-.highlight .gd { color: var(--highlight-gd, #000000); background-color: var(#ffdddd) } /* Generic.Deleted */
-.highlight .ge { color: var(--highlight-ge, #000000); font-style: italic } /* Generic.Emph */
-.highlight .gr { color: var(--highlight-gr, #aa0000) } /* Generic.Error */
-.highlight .gh { color: var(--highlight-gh, #999999) } /* Generic.Heading */
-.highlight .gi { color: var(--highlight-gi, #000000); background-color: #ddffdd } /* Generic.Inserted */
-.highlight .go { color: var(#888888) } /* Generic.Output */
-.highlight .gp { color: var(#555555) } /* Generic.Prompt */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: var(--highlight-gu, #aaaaaa) } /* Generic.Subheading */
-.highlight .gt { color: var(--highlight-gt, #aa0000) } /* Generic.Traceback */
-.highlight .kc { color: var(--highlight-kc, #000000); font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: var(--highlight-kd, #000000); font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: var(--highlight-kn, #000000); font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: var(--highlight-kp, #000000); font-weight: bold } /* Keyword.Pseudo */
-.highlight .kr { color: var(--highlight-kr, #000000); font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: var(--highlight-kt, #445588); font-weight: bold } /* Keyword.Type */
-.highlight .m { color: var(--highlight-m, #009999) } /* Literal.Number */
-.highlight .s { color: var(--highlight-s, #d01040) } /* Literal.String */
-.highlight .na { color: var(--highlight-na, #008080) } /* Name.Attribute */
-.highlight .nb { color: var(--highlight-nb, #0086B3) } /* Name.Builtin */
-.highlight .nc { color: var(--highlight-nc, #445588); font-weight: bold } /* Name.Class */
-.highlight .no { color: var(--highlight-no, #008080) } /* Name.Constant */
-.highlight .nd { color: var(--highlight-nd, #3c5d5d); font-weight: bold } /* Name.Decorator */
-.highlight .ni { color: var(--highlight-ni, #800080) } /* Name.Entity */
-.highlight .ne { color: var(--highlight-ne, #990000); font-weight: bold } /* Name.Exception */
-.highlight .nf { color: var(--highlight-nf, #990000); font-weight: bold } /* Name.Function */
-.highlight .nl { color: var(--highlight-nl, #990000); font-weight: bold } /* Name.Label */
-.highlight .nn { color: var(--highlight-nn, #555555) } /* Name.Namespace */
-.highlight .nt { color: var(--highlight-nt, #000080) } /* Name.Tag */
-.highlight .nv { color: var(--highlight-nv, #008080) } /* Name.Variable */
-.highlight .ow { color: var(--highlight-ow, #000000); font-weight: bold } /* Operator.Word */
-.highlight .w { color: var(--highlight-w, #bbbbbb) } /* Text.Whitespace */
-.highlight .mf { color: var(--highlight-mf, #009999) } /* Literal.Number.Float */
-.highlight .mh { color: var(--highlight-mh, #009999) } /* Literal.Number.Hex */
-.highlight .mi { color: var(--highlight-mi, #009999) } /* Literal.Number.Integer */
-.highlight .mo { color: var(--highlight-mo, #009999) } /* Literal.Number.Oct */
-.highlight .sb { color: var(--highlight-sb, #d01040) } /* Literal.String.Backtick */
-.highlight .sc { color: var(--highlight-sc, #d01040) } /* Literal.String.Char */
-.highlight .sd { color: var(--highlight-sd, #d01040) } /* Literal.String.Doc */
-.highlight .s2 { color: var(--highlight-s2, #d01040) } /* Literal.String.Double */
-.highlight .se { color: var(--highlight-se, #d01040) } /* Literal.String.Escape */
-.highlight .sh { color: var(--highlight-sh, #d01040) } /* Literal.String.Heredoc */
-.highlight .si { color: var(--highlight-si, #d01040) } /* Literal.String.Interpol */
-.highlight .sx { color: var(--highlight-sx, #d01040) } /* Literal.String.Other */
-.highlight .sr { color: var(--highlight-sr, #009926) } /* Literal.String.Regex */
-.highlight .s1 { color: var(--highlight-s1, #d01040) } /* Literal.String.Single */
-.highlight .ss { color: var(--highlight-ss, #990073) } /* Literal.String.Symbol */
-.highlight .bp { color: var(--highlight-bp, #999999) } /* Name.Builtin.Pseudo */
-.highlight .vc { color: var(--highlight-vc, #008080) } /* Name.Variable.Class */
-.highlight .vg { color: var(--highlight-vg, #008080) } /* Name.Variable.Global */
-.highlight .vi { color: var(--highlight-vi, #008080) } /* Name.Variable.Instance */
-.highlight .il { color: var(--highlight-il, #009999) } /* Literal.Number.Integer.Long */
 
+@mixin highlight-box-shadow($val) {
+  -moz-box-shadow: $val;
+  -webkit-box-shadow: $val;
+  box-shadow: $val;
+}
+
+html:not([mode]), html[mode=light] {
+  @include light-syntax;
+}
+
+html[mode=dark] {
+  @include dark-syntax;
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not([mode]), html[mode=dark] {
+    @include dark-syntax;
+  }
+
+  html[mode=light] {
+    @include light-syntax;
+  }
+}
 
 /*-- Codes Snippet --*/
 
-div.highlight,
+%highlight-pre-bg {
-figure.highlight,
+  background: var(--highlight-bg-color);
+}
+
+%code-snippet-radius {
+  border-radius: 5px;
+}
+
 .highlighter-rouge {
-  background: var(--highlight-pre-bg, #f7f7f7)
+  background: var(--highlight-bg-color);
+  @extend %code-snippet-radius;
+  color: var(--highlighter-rouge-color);
+  margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
 .highlight {
+  @extend %code-snippet-radius;
+  background: var(--highlight-bg-color);
+
+  @at-root figure#{&} {
+    background: var(--highlight-bg-color);
+  }
   overflow: auto;
-}
+  @include highlight-box-shadow(inset 0 0 2px #c2c6cc);
+  .lineno {
+    margin: .8rem 0rem;
+    padding: 0 .5rem;
+    min-width: 2.2rem;
+    text-align: right;
+    color: var(--highlight-lineno-color);
+    border-right: 1px solid var(--highlight-lineno-border-color);
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+  table {
+    padding: 0;
+    border: 0;
+    td pre {
+      overflow: visible;  /* Fixed iOS safari overflow-x */
+      word-break: normal; /* Fixed iOS safari linenos code break */
+    }
+  }
+  td {
+    padding: 0;
+    border: 0;
+  }
+  pre {
+    margin-bottom: 0;
+    font-size: .85rem;
+    line-height: 1.4rem;
+    word-wrap: normal;
+    /* Fixed Safari overflow-x */
+  }
 
-.highlight .lineno {
+} //.highlight
-  margin: .8rem 0rem;
-  padding: 0 .5rem;
-  min-width: 2.2rem;
-  text-align: right;
-  color: var(--highlight-lineno, #c2c6cc);
-  border-right: 1px solid var(--highlight-lineno-border, #e9ecef);
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
-.highlight table {
-  padding: 0;
-  border: 0;
-}
-
-.highlight td {
-  padding: 0;
-  border: 0;
-}
-
-.highlight pre {
-  margin-bottom: 0;
-  font-size: .85rem;
-  line-height: 1.4rem;
-  word-wrap: normal;  /* Fixed Safari overflow-x */
-}
-
-.highlight table td pre {
-  overflow: visible;  /* Fixed iOS safari overflow-x */
-  word-break: normal; /* Fixed iOS safari linenos code break */
-}
-
-/* Override BS Inline-code style */
-.highlighter-rouge {
-  margin-bottom: 1.2em;
-}
 
 code {
   -webkit-hyphens: none;
   -ms-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
-}
+  &.highlighter-rouge {
-
+    padding: 2px 4px;
-code.highlighter-rouge {
+    margin: 0 .3rem;
-  padding: 2px 4px;
+    border-radius: 4px;
-  margin: 0 .3rem;
+    border: 1px solid var(--code-highlighter-rouge);
-  border-radius: 4px;
+  }
+  @at-root a>&.highlighter-rouge {
+    padding-bottom: 0; // show link's underlinke
+  }
+  @at-root a:hover>&.highlighter-rouge {
+    border-bottom: none;
+  }
 }
 
 td.rouge-code {
@@ -146,37 +122,16 @@ td.rouge-code {
   padding-right: 1rem;
 }
 
-/* code snippet radius */
-.highlighter-rouge,
-.highlight {
-  border-radius: 5px;
-}
-
 /* Hide line numbers for defualt, console, and terminal code snippets */
-div[class^='highlighter-rouge'] pre.lineno,
+div {
-div.language-console.highlighter-rouge pre.lineno,
+  &[class^='highlighter-rouge'],
-div.language-terminal.highlighter-rouge pre.lineno {
+  &.language-console.highlighter-rouge,
-  display: none;
+  &.language-terminal.highlighter-rouge {
-}
+    pre.lineno {
-
+      display: none;
-div[class^='highlighter-rouge'] td.rouge-code,
+    }
-div.language-console.highlighter-rouge td.rouge-code,
+    td.rouge-code {
-div.language-terminal.highlighter-rouge td.rouge-code {
+      padding: .8rem 1rem;
-  padding: .8rem 1rem;
+    }
-}
-
-@media (prefers-color-scheme: light) {
-  .highlight {
-    -moz-box-shadow: inset 0 0 2px #c2c6cc;
-    -webkit-box-shadow: inset 0 0 2px #c2c6cc;
-    box-shadow: inset 0 0 2px #c2c6cc;
-  }
-
-  .highlighter-rouge {
-    color: black;
-  }
-
-  code.highlighter-rouge {
-    border: 1px solid #e9ecef;
   }
 }

assets/css/tags.scss

@@ -15,16 +15,11 @@
   margin-right: .8rem;
   line-height: 3rem;
   letter-spacing: 0;
-  border: 1px solid var(--tag-border, #dee2e6) !important;
+  border: 1px solid var(--tag-border) !important;
-  box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef);
+  box-shadow: 0 0 3px 0 var(--tag-shadow);
-}
+  span {
-
+    margin-left: 0.6em;
-.tag span {
+    font-size: 0.7em;
-  margin-left: 0.6em;
+    font-family: 'Oswald', sans-serif;
-  font-size: 0.7em;
+  }
-  font-family: 'Oswald', sans-serif;
-}
-
-a.tag:hover {
-  text-decoration: none;
 }

assets/data/proxy.json

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

assets/data/pv-data.json

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

assets/data/search.json

@@ -1,4 +1,5 @@
 ---
+layout: compress
 ---
 
 [

assets/js/_src/_commons/copy-link.js

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

assets/js/_src/_commons/search-display.js

@@ -10,7 +10,7 @@ $(function() {
 
   var btnSbTrigger = $('#sidebar-trigger');
   var btnSearchTrigger = $('#search-trigger');
-  var btnCancel = $('#search-wrapper + a');
+  var btnCancel = $('#search-cancel');
   var btnClear = $('#search-cleaner');
 
   var main = $('#main');

assets/js/_src/pageviews.js

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

assets/js/_src/tooltip-loader.js

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

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

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

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

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

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

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

assets/js/dist/commons.js

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

assets/js/dist/pageviews.min.js

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

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

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

docs/README_zh-CN.md

@@ -4,7 +4,7 @@
 [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
 [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
-Language: [English](../README.md) | 简体中文
+选择语言: [English](../README.md) | 简体中文
 
 一个不一样的 Jekyll 主题（内附神秘工具），采用响应式设计，方便记录、管理、分享你的知识和经验。
 
@@ -24,9 +24,8 @@ Language: [English](../README.md) | 简体中文
 * SEO 优化
 * 网站性能优化
 
-[**在线体验** »](https://chirpy.cotes.info)
 
-![devices-mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)
+[![devices-mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
 
 ## 目录
 

feed.xml

@@ -30,8 +30,8 @@ layout: compress
     <title>{{ post.title }}</title>
     <link href="{{ post_absolute_url }}" rel="alternate" type="text/html" title="{{ post.title }}" />
     <published>{{ post.date | date_to_xmlschema }}</published>
-  {% if post.lastmod %}
+  {% if post.seo.date_modified %}
-    <updated>{{ post.lastmod | date_to_xmlschema }}</updated>
+    <updated>{{ post.seo.date_modified | date_to_xmlschema }}</updated>
   {% else %}
     <updated>{{ site.time | date_to_xmlschema }}</updated>
   {% endif %}

sitemap.xml

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

tools/init.sh

@@ -15,9 +15,9 @@ LASTMOD=false
 WORK_DIR=$(dirname $(dirname $(realpath "$0")))
 
 check_status() {
-  if [[ ! -z $(git status -s) ]]; then
+  if [[ ! -z $(git status _posts -s) ]]; then
-    echo "Warning: Commit the changes of the repository first."
+    echo "Warning: Commit the changes of the directory '_posts' first."
-    git status -s
+    git status -s | grep '_posts'
     exit 1
   fi
 }

tools/run.sh

@@ -37,6 +37,10 @@ help() {
 
 
 cleanup() {
+  if [[ -d _site || -d .jekyll-cache ]]; then
+    jekyll clean
+  fi
+
   rm -rf ${WORK_DIR}/${CONTAINER}
   ps aux | grep fswatch | awk '{print $2}' | xargs kill -9 > /dev/null 2>&1
 }