Import the framework.

tabs/about.md

@@ -0,0 +1,35 @@
+---
+title: About
+
+# The About page
+# © 2017-2019 Cotes Chung
+# MIT License
+---
+
+**Chirpy** is an responsive web design Jekyll theme developed using Bootstrap 4.
+
+
+## Features
+
+* Last modified date
+* Table of Contents
+* Disqus Comments
+* Syntax highlighting
+* Two-level Categories
+* Search
+* HTML compress
+* Atom feeds
+* Google Analytics
+* Pageviews (Advanced)
+
+## Homepage
+
+You can fork this project from the [Homepage](https://github.com/cotes2020/jekyll-theme-chirpy/). Any issues and suggestions are welcome!
+
+## Usage
+
+Follow the [tutorial posts]({{ site.baseurl }}/categories/tutorial/), it will help you build a site quickly.
+
+## License
+
+This project is published under the [MIT License](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE).

tabs/archives.md

@@ -0,0 +1,60 @@
+---
+title: Archives
+
+# The Archives of posts.
+# © 2017-2019 Cotes Chung
+# MIT License
+---
+
+<div id="archives" class="pl-xl-2">
+{% for post in site.posts %}
+  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+  {% if forloop.first %}
+    {% assign last_day = "" %}
+    {% assign last_month = "" %}
+  <span class="lead">{{this_year}}</span>
+  <ul class="list-unstyled">
+  {% endif %}
+    <li>
+      <div>
+        {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
+        {% capture this_month %}{{ post.date | date: "%b" }}{% endcapture %}
+
+        {% comment %}
+        {% if last_day and last_day == this_day %}
+          {% assign same_day = true %}
+        {% else %}
+          {% assign last_day = this_day %}
+          {% assign same_day = false %}
+        {% endif %}
+
+        {% if last_month and last_month == this_month %}
+          {% assign same_month = true %}
+        {% else %}
+          {% assign last_month = this_month %}
+          {% assign same_month = false %}
+        {% endif %}
+
+        <span class="date day {% if same_day and same_month %}text-white{% endif %}">{{ this_day }}</span>
+        <span class="date month small {% if same_day and same_month %}text-white{% else %}text-muted{% endif %}">
+          {{ this_month }}
+        </span>
+        {% endcomment %}
+
+        <span class="date day">{{ this_day }}</span>
+        <span class="date month small text-muted">{{ this_month }}</span>
+        <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+      </div>
+    </li>
+  {% if forloop.last %}
+  </ul>
+  {% elsif this_year != pre_year %}
+  </ul>
+  <span class="lead">{{pre_year}}</span>
+  <ul class="list-unstyled">
+    {% assign last_day = "" %}
+    {% assign last_month = "" %}
+  {% endif %}
+{% endfor %}
+</div>

tabs/categories.md

@@ -0,0 +1,82 @@
+---
+title: Categories
+
+# All the Categories of posts
+# © 2017-2019 Cotes Chung
+# MIT License
+---
+
+{% assign sort_categories = site.categories | sort %}
+
+{% for category in sort_categories %}
+  {% assign category_name = category | first %}
+  {% assign posts_of_category = category | last %}
+  {% assign first_post = posts_of_category[0] %}
+
+  {% if category_name == first_post.categories[0] %}
+    {% assign sub_categories = "" %}
+    {% for post in posts_of_category %}
+      {% if post.categories.size > 1 %}
+        {% assign sub_categories = sub_categories | append: post.categories[1] | append: "|" %}
+      {% endif %}
+    {% endfor %}
+
+    {% assign sub_categories = sub_categories | split: "|" | uniq | sort %}
+    {% assign sub_categories_size = sub_categories | size %}
+
+  <div class="card categories">
+    <!-- top-category -->
+    <div class="card-header d-flex justify-content-between hide-border-bottom" id="h_{{ category_name }}">
+      <span>
+      {% if sub_categories_size > 0 %}
+        <i class="far fa-folder-open fa-fw"></i>
+      {% else %}
+        <i class="far fa-folder fa-fw"></i>
+      {% endif %}
+        <a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase }}/">{{ category_name }}</a>
+        <!-- content count -->
+        {% assign top_posts_size = site.categories[category_name] | size %}
+        <span class="text-muted small font-weight-light pl-2">
+        {% if sub_categories_size > 0 %}
+          {{ sub_categories_size }}
+          {% if sub_categories_size > 1 %}categories{% else %}category{% endif %},
+        {% endif %}
+          {{ top_posts_size }}
+          post{% if top_posts_size > 1 %}s{% endif %}
+        </span>
+      </span>
+
+      <!-- arrow -->
+      <a href="#l_{{ category_name }}" data-toggle="collapse" aria-expanded="true" class="category-trigger hide-border-bottom">
+        {% if sub_categories_size > 0%}
+        <i class="fas fa-angle-up"></i>
+        {% else %}
+        <i class="fas fa-angle-down disabled"></i>
+        {% endif %}
+      </a>
+
+    </div> <!-- .card-header -->
+
+    <!-- Sub-categories -->
+    {% if sub_categories_size > 0 %}
+    <div id="l_{{ category_name }}" class="collapse show" aria-expanded="true">
+      <ul class="list-group">
+        {% for sub_category in sub_categories %}
+        <li class="list-group-item">
+          <i class="far fa-folder fa-fw"></i>&nbsp;<a href="{{ site.baseurl }}/categories/{{ sub_category | replace: ' ', '-' | downcase }}/">{{ sub_category }}</a>
+          {% assign posts_size = site.categories[sub_category] | size %}
+          <span class="text-muted small font-weight-light pl-2">{{ posts_size }}
+            post{% if posts_size > 1 %}s{% endif %}
+          </span>
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+    {% endif %}
+
+  </div> <!-- .card -->
+
+  {% endif %}
+{% endfor %}
+
+<script src="{{ site.baseurl }}/assets/js/dist/category-collapse.min.js" async></script>

tabs/tags.md

@@ -0,0 +1,27 @@
+---
+title: Tags
+
+# All the Tags of posts.
+# © 2017-2019 Cotes Chung
+# MIT License
+---
+
+{%comment%}
+  'site.tags' looks like a Map, e.g. site.tags.MyTag.[ Post0, Post1, ... ]
+  Print the {{ site.tags }} will help you to understand it.
+{%endcomment%}
+<div id="tags" class="d-flex flex-wrap">
+{% assign tags = "" | split: "" %}
+{% for t in site.tags %}
+  {% assign tags = tags | push: t[0] %}
+{% endfor %}
+
+{% assign sorted_tags = tags | sort_natural %}
+
+{% for t in sorted_tags %}
+  <div>
+    <a class="tag" href="{{ site.baseurl }}/tags/{{ t | downcase | replace: ' ', '-' }}/">{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span></a>
+  </div>
+{% endfor %}
+
+</div>