Naming and Path

Create a new file named with the format YYYY-MM-DD-title.md then put it into _post of the root directory.

Front Matter

Basically, you need to fill the Front Matter as below at the top of the post:

1
2
3
4
5
6

---
title: TITLE
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
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 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:

1
2

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:

1
2
3
4
5
6
7

jekyll-theme-chirpy
├── categories
│   ├── animal.html
│   └── insect.html
├── tags
│   └── bee.html
...

and the content of a category type page is

1
2
3
4
5

---
layout: category
title: CATEGORY_NAME        # e.g. Insect
category: CATEGORY_NAME     # e.g. Insect
---

the content of a tag type page is

1
2
3
4
5

---
layout: tag
title: TAG_NAME             # e.g. bee
tag: TAG_NAME               # e.g. bee
---

With the increasing number of posts, the number of categories and tags will increase several times! If we still manually create these category/tag type files, it will obviously be a super time-consuming job, and it is very likely to miss some of them(i.e. when you click on the missing category or tag link from a post or somewhere, it will complain to you ‘404’). The good news is that we got a lovely script tool _scripts/sh/create_pages.sh to finish the boring task. Basically we will use it via tools/init.sh instead of running it separately. Check out its use case here.

Last modified date

The last modified date of a post is obtained according to its latest git commit date, and all the modified date of the posts should be stored in _data/updates.yml. For example:

1
2
3
4
5

-
  filename: getting-started             # the post filename without date and extension
  lastmod: 2020-04-13 00:38:56 +0800    # the post last modified date
-
  ...

You can choose to create this file manually, but as you may notice, the better approach is to let it be automatically generated by a tool script. And _scripts/sh/dump_lastmod.py was born for this! Similar to the another script _scripts/sh/create_pages.sh mentioned above, it is also be called from tools/init.sh, so it doesn’t have to be used separately.

When some posts have been modified since their published date and also the file _data/updates.yml was created correctly, a list with the label Recent Updates will be displayed in the right panel of the desktop view, which records the five most recently modified articles.

Table of Contents

By default, the Table of Contents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to _config.yml and set the variable toc to false. If you want to turn off TOC for specific post, add the following to post’s Front Matter:

1
2
3

---
toc: false
---

Comments

Similar to TOC, the Disqus comments is loaded by default in each post, and the global switch is defined by variable comments in file _config.yml . If you want to close the comment for specific post, add the following to the Front Matter of the post:

1
2
3

---
comments: false
---

Code Block

Markdown symbols ``` can easily create a code block as following examples.

1

This is a common code snippet, without syntax highlight and line number.

Specific Language

Using ```Language you will get code snippets with line Numbers and syntax highlight.

Note: The Jekyll style {% highlight LANGUAGE %} or {% highlight LANGUAGE linenos %} are not allowed to be used in this theme !

1
2
3
4
5
6

# Yaml code snippet
items:
    - part_no:   A4786
      descrip:   Water Bucket (Filled)
      price:     1.47
      quantity:  4

Liquid codes

If you want to display the Liquid snippet, surround the liquid code with {% raw %} and {% endraw %} .

1
2
3

{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

Learn More

For more knowledge about Jekyll posts, visit the Jekyll Docs: Posts.

Types and Typography

This Jekyll template totally compatible with Markdown syntax. Now, let’s take a look for the text and typography in this theme.

Titles

H1

H2

H3

H4

Paragraph

I wandered lonely as a cloud

That floats on high o’er vales and hills,

When all at once I saw a crowd,

A host, of golden daffodils;

Beside the lake, beneath the trees,

Fluttering and dancing in the breeze.

Block Quote

This line to shows the Block Quote.

Tables

Link

http://127.0.0.1:4000

Footnote

Click the hook will locate the footnote¹.

Image

Inline code

This is an example of Inline Code.

Code Snippet

Common

1

This is a common code snippet, without syntax highlight and line number.

Specific Languages

Console

1
2

$ date
Sun Nov  3 15:11:12 CST 2019

Terminal

1
2
3

$ env |grep SHELL
SHELL=/usr/local/bin/bash
PYENV_SHELL=bash

Ruby

1
2
3
4

def sum_eq_n?(arr, n)
  return true if arr.empty? && n == 0
  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
end

Shell

1
2
3
4

if [ $? -ne 0 ]; then
    echo "The command was not successful.";
    #do the needful / exit
fi;

Liquid

1
2
3

{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

HTML

1
2
3
4
5
6
7
8
9
10
11
12

<div class="sidenav">
  <a href="#contact">Contact</a>
  <button class="dropdown-btn">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#contact">Search</a>
</div>

Horizontal Scrolling

1
2
3
4
5
6
7
8
9

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading" id="">
      <i class="far fa-folder"></i>
      <p>This is a very long long long long long long long long long long long long long long long long long long long long long line.</p>
      </a>
    </div>
  </div>
</div>

Reverse Footnote