diff --git a/.hugo_build.lock b/.hugo_build.lock
new file mode 100644
index 00000000..e69de29b
diff --git a/config.toml b/config.toml
index f73696d4..67079ee4 100644
--- a/config.toml
+++ b/config.toml
@@ -3,6 +3,36 @@
     extended = true
     min = "0.62.0"
 
+    # Menu config
+[menu]
+  [[menu.main]]
+    weight = 1
+    identifier = "posts"
+    # you can add extra information before the name (HTML format is supported), such as icons
+    pre = ""
+    # you can add extra information after the name (HTML format is supported), such as icons
+    post = ""
+    name = "Posts"
+    url = "/posts/"
+    # title will be shown when you hover on this menu link
+    title = ""
+  [[menu.main]]
+    weight = 2
+    identifier = "tags"
+    pre = ""
+    post = ""
+    name = "Tags"
+    url = "/tags/"
+    title = ""
+  [[menu.main]]
+    weight = 3
+    identifier = "categories"
+    pre = ""
+    post = ""
+    name = "Categories"
+    url = "/categories/"
+    title = ""
+
 [params]
   # site default theme ["auto", "light", "dark"]
   defaultTheme = "auto"
@@ -14,9 +44,9 @@
   # date format
   dateFormat = "2006-01-02"
   # website title for Open Graph and Twitter Cards
-  title = "My cool site"
+  title = "KeepIt"
   # website description for RSS, SEO, Open Graph and Twitter Cards
-  description = "This is my cool site"
+  description = "This is my KeepIt site"
   # website images for Open Graph and Twitter Cards
   images = []
 
@@ -31,7 +61,7 @@
       # URL of the LOGO
       logo = ""
       # title name
-      name = "My cool site"
+      name = "My KeepIt site"
       # you can add extra information before the name (HTML format is supported), such as icons
       pre = ""
       # you can add extra information after the name (HTML format is supported), such as icons
@@ -78,7 +108,7 @@
   # App icon config
   [params.app]
     # optional site title override for the app when added to an iOS home screen or Android launcher
-    title = "My cool site"
+    title = "My KeepIt site"
     # whether to omit favicon resource links
     noFavicon = false
     # modern SVG favicon to use in place of older style .png and .ico files
@@ -120,13 +150,13 @@
     [params.home.profile]
       enable = true
       # Gravatar Email for preferred avatar in home page
-      gravatarEmail = ""
+      gravatarEmail = "mathias.hansen@example.com"
       # URL of avatar shown in home page
       avatarURL = ""
       # title shown in home page (HTML format is supported)
       title = ""
       # subtitle shown in home page
-      subtitle = "This is my cool site"
+      subtitle = "This is my KeepIt site"
       # whether to use typeit animation for subtitle
       typeit = true
       # whether to show social links
diff --git a/content/about/index.en.md b/content/about/index.en.md
new file mode 100644
index 00000000..1aaa3282
--- /dev/null
+++ b/content/about/index.en.md
@@ -0,0 +1,120 @@
+---
+title: "About KeepIt"
+date: 2019-08-02T11:04:49+08:00
+draft: false
+description: "About KeepIt"
+images: ["/Apple-Devices-Preview.png"]
+
+lightgallery: true
+
+math:
+  enable: true
+---
+
+{{< style "img { height: 1.25rem; }" >}}
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/KeepIt?style=flat-square)](https://github.com/Fastbyte01/KeepIt/releases)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
+[![License](https://img.shields.io/github/license/dillonzq/KeepIt?style=flat-square)](https://github.com/Fastbyte01/KeepIt/blob/master/LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/dillonzq/KeepIt?style=social)](https://github.com/Fastbyte01/KeepIt)
+[![GitHub forks](https://img.shields.io/github/forks/dillonzq/KeepIt?style=social)](https://github.com/Fastbyte01/KeepIt/fork)
+{{< /style >}}
+
+> [:(far fa-kiss-wink-heart fa-fw): KeepIt](https://github.com/Fastbyte01/KeepIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
+>
+> It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt).
+
+![Hugo Theme KeepIt](/images/Apple-Devices-Preview.png "Hugo Theme KeepIt")
+
+### Features
+
+#### Performance and SEO
+
+* :(fas fa-rocket fa-fw): Optimized for **performance**: [99]/[100] on mobile and [100]/[100] on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
+* :(fab fa-searchengin fa-fw): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
+* :(fab fa-google fa-fw): **[Google Analytics](https://analytics.google.com/analytics)** supported
+* :(far fa-chart-bar fa-fw): **[Fathom Analytics](https://usefathom.com/)** supported
+* :(fas fa-sitemap fa-fw): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
+* :(fas fa-tachometer-alt fa-fw): **CDN** for third-party libraries supported
+* :(fas fa-cloud-download-alt fa-fw): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
+
+#### Appearance and Layout
+
+* :(fas fa-mobile-screen fa-fw): **[Desktop]/[Mobile] responsive** layout
+* :(fas fa-circle-half-stroke fa-rotate-180 fa-fw): **[Light]/[Dark]** mode
+* :(fas fa-layer-group fa-fw): Globally consistent **design language**
+* :(fas fa-ellipsis-h fa-fw): **Pagination** supported
+* :(far fa-list-alt fa-fw): Easy-to-use and self-expanding **table of contents**
+* :(fas fa-language fa-fw): **Multilanguage** supported and i18n ready
+* :(fab fa-css3-alt fa-fw): Beautiful **CSS animation**
+
+#### Social and Comment Systems
+
+* :(far fa-user fa-fw): **Gravatar** supported by [Gravatar](https://gravatar.com)
+* :(fas fa-user-circle fa-fw): Local **Avatar** supported
+* :(far fa-id-card fa-fw): Up to **64** social links supported
+* :(fas fa-share-square fa-fw): Up to **24** share sites supported
+* :(far fa-comment fa-fw): **Disqus** comment system supported by [Disqus](https://disqus.com)
+* :(far fa-comment-dots fa-fw): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
+* :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
+* :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
+* :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
+* :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
+* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+
+#### Extended Features
+
+* :(fas fa-search fa-fw): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
+* :(far fa-grin-tongue-wink fa-fw): **Twemoji** supported
+* :(fas fa-code fa-fw): Automatically **highlighting** code
+* :(far fa-copy fa-fw): **Copy code** to clipboard with one click
+* :(far fa-images fa-fw): **Images gallery** supported by [lightGallery](https://github.com/sachinchoolur/lightgallery)
+* :(fab fa-font-awesome fa-fw): Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
+* :(fas fa-superscript fa-fw): Extended Markdown syntax for **ruby annotation**
+* :(fas fa-percentage fa-fw): Extended Markdown syntax for **fraction**
+* :(fas fa-square-root-alt fa-fw): **Mathematical formula** supported by [$\KaTeX$](https://katex.org/)
+* :(fas fa-project-diagram fa-fw): **Diagrams** shortcode supported by [mermaid](https://github.com/mermaid-js/mermaid)
+* :(fas fa-chart-pie fa-fw): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
+* :(fas fa-map-marked-alt fa-fw): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+* :(fas fa-music fa-fw): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
+* :(fab fa-bilibili fa-fw): **Bilibili player** shortcode
+* :(fas fa-note-sticky fa-fw): Kinds of **admonitions** shortcode
+* :(fab fa-css3 fa-fw): **Custom style** shortcode
+* :(fab fa-js-square fa-fw): **Custom script** shortcode
+* :(fas fa-i-cursor fa-fw): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
+* :(fas fa-cookie-bite fa-fw): **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
+* ...
+
+### License
+
+KeepIt is licensed under the **MIT** license.
+
+Check the [LICENSE file](https://github.com/Fastbyte01/KeepIt/blob/master/LICENSE) for details.
+
+### Special Thanks
+
+Thanks to the authors of following resources included in the theme:
+
+* [normalize.css](https://github.com/necolas/normalize.css)
+* [Font Awesome](https://fontawesome.com/)
+* [Simple Icons](https://github.com/simple-icons/simple-icons)
+* [Animate.css](https://daneden.github.io/animate.css/)
+* [autocomplete](https://github.com/algolia/autocomplete)
+* [Lunr.js](https://lunrjs.com/)
+* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
+* [lazysizes](https://github.com/aFarkas/lazysizes)
+* [object-fit-images](https://github.com/fregante/object-fit-images)
+* [Twemoji](https://github.com/twitter/twemoji)
+* [emoji-data](https://github.com/iamcal/emoji-data)
+* [lightGallery](https://github.com/sachinchoolur/lightgallery)
+* [clipboard.js](https://github.com/zenorocha/clipboard.js)
+* [Sharer.js](https://github.com/ellisonleao/sharer.js)
+* [TypeIt](https://typeitjs.com/)
+* [$\KaTeX$](https://katex.org/)
+* [mermaid](https://github.com/mermaid-js/mermaid)
+* [ECharts](https://echarts.apache.org/)
+* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+* [APlayer](https://github.com/MoePlayer/APlayer)
+* [MetingJS](https://github.com/metowolf/MetingJS)
+* [Gitalk](https://github.com/gitalk/gitalk)
+* [Valine](https://valine.js.org/)
+* [cookieconsent](https://github.com/osano/cookieconsent)
diff --git a/content/categories/documentation/_index.en.md b/content/categories/documentation/_index.en.md
new file mode 100644
index 00000000..b40df67a
--- /dev/null
+++ b/content/categories/documentation/_index.en.md
@@ -0,0 +1,3 @@
+---
+title: "Documentation"
+---
diff --git a/content/posts/basic-markdown-syntax/featured-image.png b/content/posts/basic-markdown-syntax/featured-image.png
new file mode 100644
index 00000000..b31e1a58
Binary files /dev/null and b/content/posts/basic-markdown-syntax/featured-image.png differ
diff --git a/content/posts/basic-markdown-syntax/index.en.md b/content/posts/basic-markdown-syntax/index.en.md
new file mode 100644
index 00000000..3806ee13
--- /dev/null
+++ b/content/posts/basic-markdown-syntax/index.en.md
@@ -0,0 +1,764 @@
+---
+weight: 4
+title: "Basic Markdown Syntax"
+date: 2019-12-01T21:57:40+08:00
+lastmod: 2020-01-01T16:45:40+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "This article shows the basic Markdown syntax and format."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
+
+tags: ["Markdown", "HTML"]
+categories: ["Markdown"]
+
+lightgallery: true
+---
+
+This article offers a sample of basic Markdown syntax that can be used in Hugo content files.
+
+<!--more-->
+
+{{< admonition >}}
+This article is a shameful copy of the great [Grav original page](http://learn.getgrav.org/content/markdown).
+
+If you want to know about the extended Markdown syntax of **KeepIt** theme, please read [extended Markdown syntax page](../theme-documentation-content#extended-markdown-syntax).
+{{< /admonition >}}
+
+Let's face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.
+
+**Markdown** is a better way to write **HTML**, without all the complexities and ugliness that usually accompanies it.
+
+Some of the key benefits are:
+
+1. Markdown is simple to learn, with minimal extra characters, so it's also quicker to write content.
+2. Less chance of errors when writing in Markdown.
+3. Produces valid XHTML output.
+4. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
+5. Write in any text editor or Markdown application you like.
+6. Markdown is a joy to use!
+
+John Gruber, the author of Markdown, puts it like this:
+
+> The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible.
+> The idea is that a Markdown-formatted document should be publishable as-is, as plain text,
+> without looking like it’s been marked up with tags or formatting instructions.
+> While Markdown’s syntax has been influenced by several existing text-to-HTML filters,
+> the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
+>
+> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
+
+Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like!
+
+{{< admonition tip >}}
+:(far fa-bookmark fa-fw): Bookmark this page for easy future reference!
+{{< /admonition >}}
+
+## 1 Headings
+
+Headings from `h2` through `h6` are constructed with a `#` for each level:
+
+```markdown
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+```
+
+The HTML looks like this:
+
+```html
+<h2>h2 Heading</h2>
+<h3>h3 Heading</h3>
+<h4>h4 Heading</h4>
+<h5>h5 Heading</h5>
+<h6>h6 Heading</h6>
+```
+
+{{< admonition note "Heading IDs" >}}
+To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading:
+
+```markdown
+### A Great Heading {#custom-id}
+```
+
+The HTML looks like this:
+
+```html
+<h3 id="custom-id">A Great Heading</h3>
+```
+{{< /admonition >}}
+
+## 2 Comments
+
+Comments should be HTML compatible.
+
+```html
+<!--
+This is a comment
+-->
+```
+
+Comment below should **NOT** be seen:
+
+<!--
+This is a comment
+-->
+
+## 3 Horizontal Rules
+
+The HTML `<hr>` element is for creating a "thematic break" between paragraph-level elements.
+In Markdown, you can create a `<hr>` with any of the following:
+
+* `___`: three consecutive underscores
+* `---`: three consecutive dashes
+* `***`: three consecutive asterisks
+
+The rendered output looks like this:
+
+___
+---
+***
+
+## 4 Body Copy
+
+Body copy written as normal, plain text will be wrapped with `<p></p>` tags in the rendered HTML.
+
+So this body copy:
+
+```markdown
+Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
+animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
+soluta officiis concludaturque ei qui, vide sensibus vim ad.
+```
+
+The HTML looks like this:
+
+```html
+<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
+```
+
+A **line break** can be done with one blank line.
+
+## 5 Inline HTML
+
+If you need a certain HTML tag (with a class) you can simply use HTML:
+
+```html
+Paragraph in Markdown.
+
+<div class="class">
+    This is <b>HTML</b>
+</div>
+
+Paragraph in Markdown.
+```
+
+## 6 Emphasis
+
+### Bold
+
+For emphasizing a snippet of text with a heavier font-weight.
+
+The following snippet of text is **rendered as bold text**.
+
+```markdown
+**rendered as bold text**
+__rendered as bold text__
+```
+
+The HTML looks like this:
+
+```html
+<strong>rendered as bold text</strong>
+```
+
+### Italics
+
+For emphasizing a snippet of text with italics.
+
+The following snippet of text is _rendered as italicized text_.
+
+```markdown
+*rendered as italicized text*
+_rendered as italicized text_
+```
+
+The HTML looks like this:
+
+```html
+<em>rendered as italicized text</em>
+```
+
+### Strikethrough
+
+In [[GFM]^(GitHub flavored Markdown)](https://github.github.com/gfm/) you can do strikethroughs.
+
+```markdown
+~~Strike through this text.~~
+```
+
+The rendered output looks like this:
+
+~~Strike through this text.~~
+
+The HTML looks like this:
+
+```html
+<del>Strike through this text.</del>
+```
+
+### Combination
+
+Bold, italics, and strikethrough can be used in combination.
+
+```markdown
+***bold and italics***
+~~**strikethrough and bold**~~
+~~*strikethrough and italics*~~
+~~***bold, italics and strikethrough***~~
+```
+
+The rendered output looks like this:
+
+***bold and italics***
+
+~~**strikethrough and bold**~~
+
+~~*strikethrough and italics*~~
+
+~~***bold, italics and strikethrough***~~
+
+The HTML looks like this:
+
+```html
+<em><strong>bold and italics</strong></em>
+<del><strong>strikethrough and bold</strong></del>
+<del><em>strikethrough and italics</em></del>
+<del><em><strong>bold, italics and strikethrough</strong></em></del>
+```
+
+## 7 Blockquotes
+
+For quoting blocks of content from another source within your document.
+
+Add `>` before any text you want to quote:
+
+```markdown
+> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
+```
+
+The rendered output looks like this:
+
+> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
+
+The HTML looks like this:
+
+```html
+<blockquote>
+  <p>
+    <strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
+  </p>
+</blockquote>
+```
+
+Blockquotes can also be nested:
+
+```markdown
+> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
+Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
+>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
+odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
+```
+
+The rendered output looks like this:
+
+> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
+Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
+>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
+odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
+
+## 8 Lists
+
+### Unordered
+
+A list of items in which the order of the items does not explicitly matter.
+
+You may use any of the following symbols to denote bullets for each list item:
+
+```markdown
+* valid bullet
+- valid bullet
++ valid bullet
+```
+
+For example:
+
+```markdown
+* Lorem ipsum dolor sit amet
+* Consectetur adipiscing elit
+* Integer molestie lorem at massa
+* Facilisis in pretium nisl aliquet
+* Nulla volutpat aliquam velit
+  * Phasellus iaculis neque
+  * Purus sodales ultricies
+  * Vestibulum laoreet porttitor sem
+  * Ac tristique libero volutpat at
+* Faucibus porta lacus fringilla vel
+* Aenean sit amet erat nunc
+* Eget porttitor lorem
+```
+
+The rendered output looks like this:
+
+* Lorem ipsum dolor sit amet
+* Consectetur adipiscing elit
+* Integer molestie lorem at massa
+* Facilisis in pretium nisl aliquet
+* Nulla volutpat aliquam velit
+  * Phasellus iaculis neque
+  * Purus sodales ultricies
+  * Vestibulum laoreet porttitor sem
+  * Ac tristique libero volutpat at
+* Faucibus porta lacus fringilla vel
+* Aenean sit amet erat nunc
+* Eget porttitor lorem
+
+The HTML looks like this:
+
+```html
+<ul>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit
+    <ul>
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ul>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ul>
+```
+
+### Ordered
+
+A list of items in which the order of items does explicitly matter.
+
+```markdown
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+4. Facilisis in pretium nisl aliquet
+5. Nulla volutpat aliquam velit
+6. Faucibus porta lacus fringilla vel
+7. Aenean sit amet erat nunc
+8. Eget porttitor lorem
+```
+
+The rendered output looks like this:
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+4. Facilisis in pretium nisl aliquet
+5. Nulla volutpat aliquam velit
+6. Faucibus porta lacus fringilla vel
+7. Aenean sit amet erat nunc
+8. Eget porttitor lorem
+
+The HTML looks like this:
+
+```html
+<ol>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit</li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ol>
+```
+
+{{< admonition tip >}}
+If you just use `1.` for each number, Markdown will automatically number each item. For example:
+
+```markdown
+1. Lorem ipsum dolor sit amet
+1. Consectetur adipiscing elit
+1. Integer molestie lorem at massa
+1. Facilisis in pretium nisl aliquet
+1. Nulla volutpat aliquam velit
+1. Faucibus porta lacus fringilla vel
+1. Aenean sit amet erat nunc
+1. Eget porttitor lorem
+```
+
+The rendered output looks like this:
+
+1. Lorem ipsum dolor sit amet
+1. Consectetur adipiscing elit
+1. Integer molestie lorem at massa
+1. Facilisis in pretium nisl aliquet
+1. Nulla volutpat aliquam velit
+1. Faucibus porta lacus fringilla vel
+1. Aenean sit amet erat nunc
+1. Eget porttitor lorem
+{{< /admonition >}}
+
+### Task Lists
+
+Task lists allow you to create a list of items with checkboxes. To create a task list, add dashes (`-`) and brackets with a space (`[ ]`) before task list items. To select a checkbox, add an x in between the brackets (`[x]`).
+
+```markdown
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media
+```
+
+The rendered output looks like this:
+
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media
+
+## 9 Code
+
+### Inline Code
+
+Wrap inline snippets of code with <code>`</code>.
+
+```markdown
+In this example, `<section></section>` should be wrapped as **code**.
+```
+
+The rendered output looks like this:
+
+In this example, `<section></section>` should be wrapped as **code**.
+
+The HTML looks like this:
+
+```html
+<p>
+  In this example, <code>&lt;section&gt;&lt;/section&gt;</code> should be wrapped with <strong>code</strong>.
+</p>
+```
+
+### Indented Code
+
+Or indent several lines of code by at least four spaces, as in:
+
+```markdown
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+```
+
+The rendered output looks like this:
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+The HTML looks like this:
+
+```html
+<pre>
+  <code>
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+  </code>
+</pre>
+```
+
+### Block Fenced Code
+
+Use "fences" <code>```</code> to block in multiple lines of code with a language attribute.
+
+{{< highlight markdown >}}
+```markdown
+Sample text here...
+```
+{{< / highlight >}}
+
+The HTML looks like this:
+
+```html
+<pre language-html>
+  <code>Sample text here...</code>
+</pre>
+```
+
+### Syntax Highlighting
+
+[GFM]^(GitHub Flavored Markdown) also supports syntax highlighting.
+
+To activate it, simply add the file extension of the language you want to use directly after the first code "fence",
+<code>```js</code>, and syntax highlighting will automatically be applied in the rendered HTML.
+
+For example, to apply syntax highlighting to JavaScript code:
+
+{{< highlight markdown >}}
+```js
+grunt.initConfig({
+  assemble: {
+    options: {
+      assets: 'docs/assets',
+      data: 'src/data/*.{json,yml}',
+      helpers: 'src/custom-helpers.js',
+      partials: ['src/partials/**/*.{hbs,md}']
+    },
+    pages: {
+      options: {
+        layout: 'default.hbs'
+      },
+      files: {
+        './': ['src/templates/pages/index.hbs']
+      }
+    }
+  }
+};
+```
+{{< / highlight >}}
+
+The rendered output looks like this:
+
+```js
+grunt.initConfig({
+  assemble: {
+    options: {
+      assets: 'docs/assets',
+      data: 'src/data/*.{json,yml}',
+      helpers: 'src/custom-helpers.js',
+      partials: ['src/partials/**/*.{hbs,md}']
+    },
+    pages: {
+      options: {
+        layout: 'default.hbs'
+      },
+      files: {
+        './': ['src/templates/pages/index.hbs']
+      }
+    }
+  }
+};
+```
+
+{{< admonition >}}
+[Syntax highlighting page](https://gohugo.io/content-management/syntax-highlighting/) in **Hugo** Docs introduces more about syntax highlighting, including highlight shortcode.
+{{< /admonition >}}
+
+## 10 Tables
+
+Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.
+
+```markdown
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+```
+
+The rendered output looks like this:
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+The HTML looks like this:
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>data</td>
+      <td>path to data files to supply the data that will be passed into templates.</td>
+    </tr>
+    <tr>
+      <td>engine</td>
+      <td>engine to be used for processing templates. Handlebars is the default.</td>
+    </tr>
+    <tr>
+      <td>ext</td>
+      <td>extension to be used for dest files.</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+{{< admonition note "Right or center aligned text" >}}
+Adding a colon on the right side of the dashes below any heading will right align text for that column.
+
+Adding colons on both sides of the dashes below any heading will center align text for that column.
+
+```markdown
+| Option | Description |
+|:------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+```
+
+The rendered output looks like this:
+
+| Option | Description |
+|:------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+{{< /admonition >}}
+
+## 11 Links {#links}
+
+### Basic Link
+
+```markdown
+<https://assemble.io>
+<contact@revolunet.com>
+[Assemble](https://assemble.io)
+```
+
+The rendered output looks like this (hover over the link, there is no tooltip):
+
+<https://assemble.io>
+
+<contact@revolunet.com>
+
+[Assemble](https://assemble.io)
+
+The HTML looks like this:
+
+```html
+<a href="https://assemble.io">https://assemble.io</a>
+<a href="mailto:contact@revolunet.com">contact@revolunet.com</a>
+<a href="https://assemble.io">Assemble</a>
+```
+
+### Add a Title
+
+```markdown
+[Upstage](https://github.com/upstage/ "Visit Upstage!")
+```
+
+The rendered output looks like this (hover over the link, there should be a tooltip):
+
+[Upstage](https://github.com/upstage/ "Visit Upstage!")
+
+The HTML looks like this:
+
+```html
+<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
+```
+
+### Named Anchors
+
+Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:
+
+```markdown
+## Table of Contents
+  * [Chapter 1](#chapter-1)
+  * [Chapter 2](#chapter-2)
+  * [Chapter 3](#chapter-3)
+```
+
+will jump to these sections:
+
+```markdown
+## Chapter 1 <a id="chapter-1"></a>
+Content for chapter one.
+
+## Chapter 2 <a id="chapter-2"></a>
+Content for chapter one.
+
+## Chapter 3 <a id="chapter-3"></a>
+Content for chapter one.
+```
+
+{{< admonition >}}
+The specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.
+{{< /admonition >}}
+
+## 12 Footnotes
+
+Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the content of the footnote at the bottom of the page.
+
+To create a footnote reference, add a caret and an identifier inside brackets (`[^1]`). Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.
+
+Add the footnote using another caret and number inside brackets with a colon and text (`[^1]: My footnote.`). You don’t have to put footnotes at the end of the document. You can put them anywhere except inside other elements like lists, block quotes, and tables.
+
+```markdown
+This is a digital footnote[^1].
+This is a footnote with "label"[^label]
+
+[^1]: This is a digital footnote
+[^label]: This is a footnote with "label"
+```
+
+This is a digital footnote[^1].
+
+This is a footnote with "label"[^label]
+
+[^1]: This is a digital footnote
+[^label]: This is a footnote with "label"
+
+## 13 Images
+
+Images have a similar syntax to links but include a preceding exclamation point.
+
+```markdown
+![Minion](https://octodex.github.com/images/minion.png)
+```
+
+![Minion](https://octodex.github.com/images/minion.png)
+
+or:
+
+```markdown
+![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+```
+
+![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+Like links, images also have a footnote style syntax:
+
+```markdown
+![Alt text][id]
+```
+
+![Alt text][id]
+
+With a reference later in the document defining the URL location:
+
+```markdown
+[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+```
+
+[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+
+{{< admonition tip >}}
+**KeepIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes#image), which provides more features.
+{{< /admonition >}}
diff --git a/content/posts/emoji-support/featured-image.jpg b/content/posts/emoji-support/featured-image.jpg
new file mode 100644
index 00000000..5758440e
Binary files /dev/null and b/content/posts/emoji-support/featured-image.jpg differ
diff --git a/content/posts/emoji-support/index.en.md b/content/posts/emoji-support/index.en.md
new file mode 100644
index 00000000..76b6d0d5
--- /dev/null
+++ b/content/posts/emoji-support/index.en.md
@@ -0,0 +1,1285 @@
+---
+weight: 5
+title: "Emoji Support"
+date: 2019-10-01T17:55:28+08:00
+lastmod: 2019-10-01T17:55:28+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "Guide to emoji usage in Hugo and KeepIt."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+
+tags: ["emoji"]
+categories: ["Markdown"]
+
+twemoji: false
+lightgallery: true
+---
+
+Emoji can be enabled in a Hugo project in a number of ways.
+
+<!--more-->
+
+The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates#inline-shortcodes).
+
+To enable emoji globally, set `enableEmoji` to `true` in your [site configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files.
+
+These begin and end with a **colon** and include the **code** of an emoji:
+
+```markdown
+Gone camping! {?:}tent: Be back soon.
+
+That is so funny! {?:}joy:
+```
+
+The rendered output looks like this:
+
+Gone camping! :tent: Be back soon.
+
+That is so funny! :joy:
+
+The following **cheat sheet** is a useful reference for emoji shorthand codes.
+
+## Smileys & Emotion
+
+### Face Smiling
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :grinning: | `grinning` | :smiley: | `smiley` |
+| :smile: | `smile` | :grin: | `grin` |
+| :laughing: | `laughing` <br /> `satisfied` | :sweat_smile: | `sweat_smile` |
+| :rofl: | `rofl` | :joy: | `joy` |
+| :slightly_smiling_face: | `slightly_smiling_face` | :upside_down_face: | `upside_down_face` |
+| :wink: | `wink` | :blush: | `blush` |
+| :innocent: | `innocent` | | |
+
+### Face Affection
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :heart_eyes: | `heart_eyes` | :kissing_heart: | `kissing_heart` |
+| :kissing: | `kissing` | :relaxed: | `relaxed` |
+| :kissing_closed_eyes: | `kissing_closed_eyes` | :kissing_smiling_eyes: | `kissing_smiling_eyes` |
+
+### Face Tongue
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :yum: | `yum` | :stuck_out_tongue: | `stuck_out_tongue` |
+| :stuck_out_tongue_winking_eye: | `stuck_out_tongue_winking_eye` | :stuck_out_tongue_closed_eyes: | `stuck_out_tongue_closed_eyes` |
+| :money_mouth_face: | `money_mouth_face` | | |
+
+### Face Hand
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :hugs: | `hugs` | :thinking: | `thinking` |
+
+### Face Neutral Skeptical
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :zipper_mouth_face: | `zipper_mouth_face` | :neutral_face: | `neutral_face` |
+| :expressionless: | `expressionless` | :no_mouth: | `no_mouth` |
+| :smirk: | `smirk` | :unamused: | `unamused` |
+| :roll_eyes: | `roll_eyes` | :grimacing: | `grimacing` |
+| :lying_face: | `lying_face` | | |
+
+### Face Sleepy
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :relieved: | `relieved` | :pensive: | `pensive` |
+| :sleepy: | `sleepy` | :drooling_face: | `drooling_face` |
+| :sleeping: | `sleeping` | | |
+
+### Face Unwell
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :mask: | `mask` | :face_with_thermometer: | `face_with_thermometer` |
+| :face_with_head_bandage: | `face_with_head_bandage` | :nauseated_face: | `nauseated_face` |
+| :sneezing_face: | `sneezing_face` | :dizzy_face: | `dizzy_face` |
+
+### Face Hat
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :cowboy_hat_face: | `cowboy_hat_face` | | |
+
+### Face Glasses
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :sunglasses: | `sunglasses` | :nerd_face: | `nerd_face` |
+
+### Face Concerned
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :confused: | `confused` | :worried: | `worried` |
+| :slightly_frowning_face: | `slightly_frowning_face` | :frowning_face: | `frowning_face` |
+| :open_mouth: | `open_mouth` | :hushed: | `hushed` |
+| :astonished: | `astonished` | :flushed: | `flushed` |
+| :frowning: | `frowning` | :anguished: | `anguished` |
+| :fearful: | `fearful` | :cold_sweat: | `cold_sweat` |
+| :disappointed_relieved: | `disappointed_relieved` | :cry: | `cry` |
+| :sob: | `sob` | :scream: | `scream` |
+| :confounded: | `confounded` | :persevere: | `persevere` |
+| :disappointed: | `disappointed` | :sweat: | `sweat` |
+| :weary: | `weary` | :tired_face: | `tired_face` |
+
+### Face Negative
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :triumph: | `triumph` | :pout: | `pout` <br /> `rage` |
+| :angry: | `angry` | :smiling_imp: | `smiling_imp` |
+| :imp: | `imp` | :skull: | `skull` |
+| :skull_and_crossbones: | `skull_and_crossbones` | | |
+
+### Face Costume
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :hankey: | `hankey` <br /> `poop` <br /> `shit` | :clown_face: | `clown_face` |
+| :japanese_ogre: | `japanese_ogre` | :japanese_goblin: | `japanese_goblin` |
+| :ghost: | `ghost` | :alien: | `alien` |
+| :space_invader: | `space_invader` | :robot: | `robot` |
+
+### Cat Face
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :smiley_cat: | `smiley_cat` | :smile_cat: | `smile_cat` |
+| :joy_cat: | `joy_cat` | :heart_eyes_cat: | `heart_eyes_cat` |
+| :smirk_cat: | `smirk_cat` | :kissing_cat: | `kissing_cat` |
+| :scream_cat: | `scream_cat` | :crying_cat_face: | `crying_cat_face` |
+| :pouting_cat: | `pouting_cat` | | |
+
+### Monkey Face
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :see_no_evil: | `see_no_evil` | :hear_no_evil: | `hear_no_evil` |
+| :speak_no_evil: | `speak_no_evil` | | |
+
+### Emotion
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :kiss: | `kiss` | :love_letter: | `love_letter` |
+| :cupid: | `cupid` | :gift_heart: | `gift_heart` |
+| :sparkling_heart: | `sparkling_heart` | :heartpulse: | `heartpulse` |
+| :heartbeat: | `heartbeat` | :revolving_hearts: | `revolving_hearts` |
+| :two_hearts: | `two_hearts` | :heart_decoration: | `heart_decoration` |
+| :heavy_heart_exclamation: | `heavy_heart_exclamation` | :broken_heart: | `broken_heart` |
+| :heart: | `heart` | :yellow_heart: | `yellow_heart` |
+| :green_heart: | `green_heart` | :blue_heart: | `blue_heart` |
+| :purple_heart: | `purple_heart` | :black_heart: | `black_heart` |
+| :100: | `100` | :anger: | `anger` |
+| :boom: | `boom` <br /> `collision` | :dizzy: | `dizzy` |
+| :sweat_drops: | `sweat_drops` | :dash: | `dash` |
+| :hole: | `hole` | :bomb: | `bomb` |
+| :speech_balloon: | `speech_balloon` | :eye_speech_bubble: | `eye_speech_bubble` |
+| :right_anger_bubble: | `right_anger_bubble` | :thought_balloon: | `thought_balloon` |
+| :zzz: | `zzz` | | |
+
+## People & Body
+
+### Hand Fingers Open
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :wave: | `wave` | :raised_back_of_hand: | `raised_back_of_hand` |
+| :raised_hand_with_fingers_splayed: | `raised_hand_with_fingers_splayed` | :hand: | `hand` <br /> `raised_hand` |
+| :vulcan_salute: | `vulcan_salute` | | |
+
+### Hand Fingers Partial
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :ok_hand: | `ok_hand` | :v: | `v` |
+| :crossed_fingers: | `crossed_fingers` | :metal: | `metal` |
+| :call_me_hand: | `call_me_hand` | | |
+
+### Hand Single Finger
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :point_left: | `point_left` | :point_right: | `point_right` |
+| :point_up_2: | `point_up_2` | :fu: | `fu` <br /> `middle_finger` |
+| :point_down: | `point_down` | :point_up: | `point_up` |
+
+### Hand Fingers Closed
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :+1: | `+1` <br /> `thumbsup` | :-1: | `-1` <br /> `thumbsdown` |
+| :fist: | `fist` <br /> `fist_raised` | :facepunch: | `facepunch` <br /> `fist_oncoming` <br /> `punch` |
+| :fist_left: | `fist_left` | :fist_right: | `fist_right` |
+
+### Hands
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :clap: | `clap` | :raised_hands: | `raised_hands` |
+| :open_hands: | `open_hands` | :handshake: | `handshake` |
+| :pray: | `pray` | | |
+
+### Hand Prop
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :writing_hand: | `writing_hand` | :nail_care: | `nail_care` |
+| :selfie: | `selfie` | | |
+
+### Body Parts
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :muscle: | `muscle` | :ear: | `ear` |
+| :nose: | `nose` | :eyes: | `eyes` |
+| :eye: | `eye` | :tongue: | `tongue` |
+| :lips: | `lips` | | |
+
+### Person
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :baby: | `baby` | :boy: | `boy` |
+| :girl: | `girl` | :blonde_man: | `blonde_man` <br /> `person_with_blond_hair` |
+| :man: | `man` | :woman: | `woman` |
+| :blonde_woman: | `blonde_woman` | :older_man: | `older_man` |
+| :older_woman: | `older_woman` | | |
+
+### Person Gesture
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :frowning_woman: | `frowning_woman` <br /> `person_frowning` | :frowning_man: | `frowning_man` |
+| :person_with_pouting_face: | `person_with_pouting_face` <br /> `pouting_woman` | :pouting_man: | `pouting_man` |
+| :ng_woman: | `ng_woman` <br /> `no_good` <br /> `no_good_woman` | :ng_man: | `ng_man` <br /> `no_good_man` |
+| :ok_woman: | `ok_woman` | :ok_man: | `ok_man` |
+| :information_desk_person: | `information_desk_person` <br /> `sassy_woman` <br /> `tipping_hand_woman` | :sassy_man: | `sassy_man` <br /> `tipping_hand_man` |
+| :raising_hand: | `raising_hand` <br /> `raising_hand_woman` | :raising_hand_man: | `raising_hand_man` |
+| :bow: | `bow` <br /> `bowing_man` | :bowing_woman: | `bowing_woman` |
+| :man_facepalming: | `man_facepalming` | :woman_facepalming: | `woman_facepalming` |
+| :man_shrugging: | `man_shrugging` | :woman_shrugging: | `woman_shrugging` |
+
+### Person Role
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :man_health_worker: | `man_health_worker` | :woman_health_worker: | `woman_health_worker` |
+| :man_student: | `man_student` | :woman_student: | `woman_student` |
+| :man_teacher: | `man_teacher` | :woman_teacher: | `woman_teacher` |
+| :man_judge: | `man_judge` | :woman_judge: | `woman_judge` |
+| :man_farmer: | `man_farmer` | :woman_farmer: | `woman_farmer` |
+| :man_cook: | `man_cook` | :woman_cook: | `woman_cook` |
+| :man_mechanic: | `man_mechanic` | :woman_mechanic: | `woman_mechanic` |
+| :man_factory_worker: | `man_factory_worker` | :woman_factory_worker: | `woman_factory_worker` |
+| :man_office_worker: | `man_office_worker` | :woman_office_worker: | `woman_office_worker` |
+| :man_scientist: | `man_scientist` | :woman_scientist: | `woman_scientist` |
+| :man_technologist: | `man_technologist` | :woman_technologist: | `woman_technologist` |
+| :man_singer: | `man_singer` | :woman_singer: | `woman_singer` |
+| :man_artist: | `man_artist` | :woman_artist: | `woman_artist` |
+| :man_pilot: | `man_pilot` | :woman_pilot: | `woman_pilot` |
+| :man_astronaut: | `man_astronaut` | :woman_astronaut: | `woman_astronaut` |
+| :man_firefighter: | `man_firefighter` | :woman_firefighter: | `woman_firefighter` |
+| :cop: | `cop` <br /> `policeman` | :policewoman: | `policewoman` |
+| :detective: | `detective` <br /> `male_detective` | :female_detective: | `female_detective` |
+| :guardsman: | `guardsman` | :guardswoman: | `guardswoman` |
+| :construction_worker: | `construction_worker` <br /> `construction_worker_man` | :construction_worker_woman: | `construction_worker_woman` |
+| :prince: | `prince` | :princess: | `princess` |
+| :man_with_turban: | `man_with_turban` | :woman_with_turban: | `woman_with_turban` |
+| :man_with_gua_pi_mao: | `man_with_gua_pi_mao` | :man_in_tuxedo: | `man_in_tuxedo` |
+| :bride_with_veil: | `bride_with_veil` | :pregnant_woman: | `pregnant_woman` |
+
+### Person Fantasy
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :angel: | `angel` | :santa: | `santa` |
+| :mrs_claus: | `mrs_claus` | | |
+
+### Person Activity
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :massage: | `massage` <br /> `massage_woman` | :massage_man: | `massage_man` |
+| :haircut: | `haircut` <br /> `haircut_woman` | :haircut_man: | `haircut_man` |
+| :walking: | `walking` <br /> `walking_man` | :walking_woman: | `walking_woman` |
+| :runner: | `runner` <br /> `running` <br /> `running_man` | :running_woman: | `running_woman` |
+| :dancer: | `dancer` | :man_dancing: | `man_dancing` |
+| :business_suit_levitating: | `business_suit_levitating` | :dancers: | `dancers` <br /> `dancing_women` |
+| :dancing_men: | `dancing_men` | | |
+
+### Person Sport
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :person_fencing: | `person_fencing` | :horse_racing: | `horse_racing` |
+| :skier: | `skier` | :snowboarder: | `snowboarder` |
+| :golfing_man: | `golfing_man` | :golfing_woman: | `golfing_woman` |
+| :surfer: | `surfer` <br /> `surfing_man` | :surfing_woman: | `surfing_woman` |
+| :rowboat: | `rowboat` <br /> `rowing_man` | :rowing_woman: | `rowing_woman` |
+| :swimmer: | `swimmer` <br /> `swimming_man` | :swimming_woman: | `swimming_woman` |
+| :basketball_man: | `basketball_man` | :basketball_woman: | `basketball_woman` |
+| :weight_lifting_man: | `weight_lifting_man` | :weight_lifting_woman: | `weight_lifting_woman` |
+| :bicyclist: | `bicyclist` <br /> `biking_man` | :biking_woman: | `biking_woman` |
+| :mountain_bicyclist: | `mountain_bicyclist` <br /> `mountain_biking_man` | :mountain_biking_woman: | `mountain_biking_woman` |
+| :man_cartwheeling: | `man_cartwheeling` | :woman_cartwheeling: | `woman_cartwheeling` |
+| :men_wrestling: | `men_wrestling` | :women_wrestling: | `women_wrestling` |
+| :man_playing_water_polo: | `man_playing_water_polo` | :woman_playing_water_polo: | `woman_playing_water_polo` |
+| :man_playing_handball: | `man_playing_handball` | :woman_playing_handball: | `woman_playing_handball` |
+| :man_juggling: | `man_juggling` | :woman_juggling: | `woman_juggling` |
+
+### Person Resting
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :bath: | `bath` | :sleeping_bed: | `sleeping_bed` |
+
+### Family
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :two_women_holding_hands: | `two_women_holding_hands` | :couple: | `couple` |
+| :two_men_holding_hands: | `two_men_holding_hands` | :couplekiss_man_woman: | `couplekiss_man_woman` |
+| :couplekiss_man_man: | `couplekiss_man_man` | :couplekiss_woman_woman: | `couplekiss_woman_woman` |
+| :couple_with_heart: | `couple_with_heart` <br /> `couple_with_heart_woman_man` | :couple_with_heart_man_man: | `couple_with_heart_man_man` |
+| :couple_with_heart_woman_woman: | `couple_with_heart_woman_woman` | :family: | `family` <br /> `family_man_woman_boy` |
+| :family_man_woman_girl: | `family_man_woman_girl` | :family_man_woman_girl_boy: | `family_man_woman_girl_boy` |
+| :family_man_woman_boy_boy: | `family_man_woman_boy_boy` | :family_man_woman_girl_girl: | `family_man_woman_girl_girl` |
+| :family_man_man_boy: | `family_man_man_boy` | :family_man_man_girl: | `family_man_man_girl` |
+| :family_man_man_girl_boy: | `family_man_man_girl_boy` | :family_man_man_boy_boy: | `family_man_man_boy_boy` |
+| :family_man_man_girl_girl: | `family_man_man_girl_girl` | :family_woman_woman_boy: | `family_woman_woman_boy` |
+| :family_woman_woman_girl: | `family_woman_woman_girl` | :family_woman_woman_girl_boy: | `family_woman_woman_girl_boy` |
+| :family_woman_woman_boy_boy: | `family_woman_woman_boy_boy` | :family_woman_woman_girl_girl: | `family_woman_woman_girl_girl` |
+| :family_man_boy: | `family_man_boy` | :family_man_boy_boy: | `family_man_boy_boy` |
+| :family_man_girl: | `family_man_girl` | :family_man_girl_boy: | `family_man_girl_boy` |
+| :family_man_girl_girl: | `family_man_girl_girl` | :family_woman_boy: | `family_woman_boy` |
+| :family_woman_boy_boy: | `family_woman_boy_boy` | :family_woman_girl: | `family_woman_girl` |
+| :family_woman_girl_boy: | `family_woman_girl_boy` | :family_woman_girl_girl: | `family_woman_girl_girl` |
+
+### Person Symbol
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :speaking_head: | `speaking_head` | :bust_in_silhouette: | `bust_in_silhouette` |
+| :busts_in_silhouette: | `busts_in_silhouette` | :footprints: | `footprints` |
+
+## Animals & Nature
+
+### Animal Mammal
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :monkey_face: | `monkey_face` | :monkey: | `monkey` |
+| :gorilla: | `gorilla` | :dog: | `dog` |
+| :dog2: | `dog2` | :poodle: | `poodle` |
+| :wolf: | `wolf` | :fox_face: | `fox_face` |
+| :cat: | `cat` | :cat2: | `cat2` |
+| :lion: | `lion` | :tiger: | `tiger` |
+| :tiger2: | `tiger2` | :leopard: | `leopard` |
+| :horse: | `horse` | :racehorse: | `racehorse` |
+| :unicorn: | `unicorn` | :deer: | `deer` |
+| :cow: | `cow` | :ox: | `ox` |
+| :water_buffalo: | `water_buffalo` | :cow2: | `cow2` |
+| :pig: | `pig` | :pig2: | `pig2` |
+| :boar: | `boar` | :pig_nose: | `pig_nose` |
+| :ram: | `ram` | :sheep: | `sheep` |
+| :goat: | `goat` | :dromedary_camel: | `dromedary_camel` |
+| :camel: | `camel` | :elephant: | `elephant` |
+| :rhinoceros: | `rhinoceros` | :mouse: | `mouse` |
+| :mouse2: | `mouse2` | :rat: | `rat` |
+| :hamster: | `hamster` | :rabbit: | `rabbit` |
+| :rabbit2: | `rabbit2` | :chipmunk: | `chipmunk` |
+| :bat: | `bat` | :bear: | `bear` |
+| :koala: | `koala` | :panda_face: | `panda_face` |
+| :feet: | `feet` <br /> `paw_prints` | | |
+
+### Animal Bird
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :turkey: | `turkey` | :chicken: | `chicken` |
+| :rooster: | `rooster` | :hatching_chick: | `hatching_chick` |
+| :baby_chick: | `baby_chick` | :hatched_chick: | `hatched_chick` |
+| :bird: | `bird` | :penguin: | `penguin` |
+| :dove: | `dove` | :eagle: | `eagle` |
+| :duck: | `duck` | :owl: | `owl` |
+
+### Animal Amphibian
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :frog: | `frog` |
+
+### Animal Reptile
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :crocodile: | `crocodile` | :turtle: | `turtle` |
+| :lizard: | `lizard` | :snake: | `snake` |
+| :dragon_face: | `dragon_face` | :dragon: | `dragon` |
+
+### Animal Marine
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :whale: | `whale` | :whale2: | `whale2` |
+| :dolphin: | `dolphin` <br /> `flipper` | :fish: | `fish` |
+| :tropical_fish: | `tropical_fish` | :blowfish: | `blowfish` |
+| :shark: | `shark` | :octopus: | `octopus` |
+| :shell: | `shell` | | |
+
+### Animal Bug
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :snail: | `snail` | :butterfly: | `butterfly` |
+| :bug: | `bug` | :ant: | `ant` |
+| :bee: | `bee` <br /> `honeybee` | :beetle: | `beetle` |
+| :spider: | `spider` | :spider_web: | `spider_web` |
+| :scorpion: | `scorpion` | | |
+
+### Plant Flower
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :bouquet: | `bouquet` | :cherry_blossom: | `cherry_blossom` |
+| :white_flower: | `white_flower` | :rosette: | `rosette` |
+| :rose: | `rose` | :wilted_flower: | `wilted_flower` |
+| :hibiscus: | `hibiscus` | :sunflower: | `sunflower` |
+| :blossom: | `blossom` | :tulip: | `tulip` |
+
+### Plant Other
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :seedling: | `seedling` | :evergreen_tree: | `evergreen_tree` |
+| :deciduous_tree: | `deciduous_tree` | :palm_tree: | `palm_tree` |
+| :cactus: | `cactus` | :ear_of_rice: | `ear_of_rice` |
+| :herb: | `herb` | :shamrock: | `shamrock` |
+| :four_leaf_clover: | `four_leaf_clover` | :maple_leaf: | `maple_leaf` |
+| :fallen_leaf: | `fallen_leaf` | :leaves: | `leaves` |
+
+## Food & Drink
+
+### Food Fruit
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :grapes: | `grapes` | :melon: | `melon` |
+| :watermelon: | `watermelon` | :mandarin: | `mandarin` <br /> `orange` <br /> `tangerine` |
+| :lemon: | `lemon` | :banana: | `banana` |
+| :pineapple: | `pineapple` | :apple: | `apple` |
+| :green_apple: | `green_apple` | :pear: | `pear` |
+| :peach: | `peach` | :cherries: | `cherries` |
+| :strawberry: | `strawberry` | :kiwi_fruit: | `kiwi_fruit` |
+| :tomato: | `tomato` | | |
+
+### Food Vegetable
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :avocado: | `avocado` | :eggplant: | `eggplant` |
+| :potato: | `potato` | :carrot: | `carrot` |
+| :corn: | `corn` | :hot_pepper: | `hot_pepper` |
+| :cucumber: | `cucumber` | :mushroom: | `mushroom` |
+| :peanuts: | `peanuts` | :chestnut: | `chestnut` |
+
+### Food Prepared
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :bread: | `bread` | :croissant: | `croissant` |
+| :baguette_bread: | `baguette_bread` | :pancakes: | `pancakes` |
+| :cheese: | `cheese` | :meat_on_bone: | `meat_on_bone` |
+| :poultry_leg: | `poultry_leg` | :bacon: | `bacon` |
+| :hamburger: | `hamburger` | :fries: | `fries` |
+| :pizza: | `pizza` | :hotdog: | `hotdog` |
+| :taco: | `taco` | :burrito: | `burrito` |
+| :stuffed_flatbread: | `stuffed_flatbread` | :egg: | `egg` |
+| :fried_egg: | `fried_egg` | :shallow_pan_of_food: | `shallow_pan_of_food` |
+| :stew: | `stew` | :green_salad: | `green_salad` |
+| :popcorn: | `popcorn` | | |
+
+### Food Asian
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :bento: | `bento` | :rice_cracker: | `rice_cracker` |
+| :rice_ball: | `rice_ball` | :rice: | `rice` |
+| :curry: | `curry` | :ramen: | `ramen` |
+| :spaghetti: | `spaghetti` | :sweet_potato: | `sweet_potato` |
+| :oden: | `oden` | :sushi: | `sushi` |
+| :fried_shrimp: | `fried_shrimp` | :fish_cake: | `fish_cake` |
+| :dango: | `dango` | | |
+
+### Food Marine
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :crab: | `crab` | :shrimp: | `shrimp` |
+| :squid: | `squid` | | |
+
+### Food Sweet
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :icecream: | `icecream` | :shaved_ice: | `shaved_ice` |
+| :ice_cream: | `ice_cream` | :doughnut: | `doughnut` |
+| :cookie: | `cookie` | :birthday: | `birthday` |
+| :cake: | `cake` | :chocolate_bar: | `chocolate_bar` |
+| :candy: | `candy` | :lollipop: | `lollipop` |
+| :custard: | `custard` | :honey_pot: | `honey_pot` |
+
+### Drink
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :baby_bottle: | `baby_bottle` | :milk_glass: | `milk_glass` |
+| :coffee: | `coffee` | :tea: | `tea` |
+| :sake: | `sake` | :champagne: | `champagne` |
+| :wine_glass: | `wine_glass` | :cocktail: | `cocktail` |
+| :tropical_drink: | `tropical_drink` | :beer: | `beer` |
+| :beers: | `beers` | :clinking_glasses: | `clinking_glasses` |
+| :tumbler_glass: | `tumbler_glass` | | |
+
+### Dishware
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :plate_with_cutlery: | `plate_with_cutlery` | :fork_and_knife: | `fork_and_knife` |
+| :spoon: | `spoon` | :hocho: | `hocho` <br /> `knife` |
+| :amphora: | `amphora` | | |
+
+## Travel & Places
+
+### Place Map
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :earth_africa: | `earth_africa` | :earth_americas: | `earth_americas` |
+| :earth_asia: | `earth_asia` | :globe_with_meridians: | `globe_with_meridians` |
+| :world_map: | `world_map` | :japan: | `japan` |
+
+### Place Geographic
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :mountain_snow: | `mountain_snow` | :mountain: | `mountain` |
+| :volcano: | `volcano` | :mount_fuji: | `mount_fuji` |
+| :camping: | `camping` | :beach_umbrella: | `beach_umbrella` |
+| :desert: | `desert` | :desert_island: | `desert_island` |
+| :national_park: | `national_park` | | |
+
+### Place Building
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :stadium: | `stadium` | :classical_building: | `classical_building` |
+| :building_construction: | `building_construction` | :houses: | `houses` |
+| :derelict_house: | `derelict_house` | :house: | `house` |
+| :house_with_garden: | `house_with_garden` | :office: | `office` |
+| :post_office: | `post_office` | :european_post_office: | `european_post_office` |
+| :hospital: | `hospital` | :bank: | `bank` |
+| :hotel: | `hotel` | :love_hotel: | `love_hotel` |
+| :convenience_store: | `convenience_store` | :school: | `school` |
+| :department_store: | `department_store` | :factory: | `factory` |
+| :japanese_castle: | `japanese_castle` | :european_castle: | `european_castle` |
+| :wedding: | `wedding` | :tokyo_tower: | `tokyo_tower` |
+| :statue_of_liberty: | `statue_of_liberty` | | |
+
+### Place Religious
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :church: | `church` | :mosque: | `mosque` |
+| :synagogue: | `synagogue` | :shinto_shrine: | `shinto_shrine` |
+| :kaaba: | `kaaba` | | |
+
+### Place Other
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :fountain: | `fountain` | :tent: | `tent` |
+| :foggy: | `foggy` | :night_with_stars: | `night_with_stars` |
+| :cityscape: | `cityscape` | :sunrise_over_mountains: | `sunrise_over_mountains` |
+| :sunrise: | `sunrise` | :city_sunset: | `city_sunset` |
+| :city_sunrise: | `city_sunrise` | :bridge_at_night: | `bridge_at_night` |
+| :hotsprings: | `hotsprings` | :carousel_horse: | `carousel_horse` |
+| :ferris_wheel: | `ferris_wheel` | :roller_coaster: | `roller_coaster` |
+| :barber: | `barber` | :circus_tent: | `circus_tent` |
+
+### Transport Ground
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :steam_locomotive: | `steam_locomotive` | :railway_car: | `railway_car` |
+| :bullettrain_side: | `bullettrain_side` | :bullettrain_front: | `bullettrain_front` |
+| :train2: | `train2` | :metro: | `metro` |
+| :light_rail: | `light_rail` | :station: | `station` |
+| :tram: | `tram` | :monorail: | `monorail` |
+| :mountain_railway: | `mountain_railway` | :train: | `train` |
+| :bus: | `bus` | :oncoming_bus: | `oncoming_bus` |
+| :trolleybus: | `trolleybus` | :minibus: | `minibus` |
+| :ambulance: | `ambulance` | :fire_engine: | `fire_engine` |
+| :police_car: | `police_car` | :oncoming_police_car: | `oncoming_police_car` |
+| :taxi: | `taxi` | :oncoming_taxi: | `oncoming_taxi` |
+| :car: | `car` <br /> `red_car` | :oncoming_automobile: | `oncoming_automobile` |
+| :blue_car: | `blue_car` | :truck: | `truck` |
+| :articulated_lorry: | `articulated_lorry` | :tractor: | `tractor` |
+| :racing_car: | `racing_car` | :motorcycle: | `motorcycle` |
+| :motor_scooter: | `motor_scooter` | :bike: | `bike` |
+| :kick_scooter: | `kick_scooter` | :busstop: | `busstop` |
+| :motorway: | `motorway` | :railway_track: | `railway_track` |
+| :oil_drum: | `oil_drum` | :fuelpump: | `fuelpump` |
+| :rotating_light: | `rotating_light` | :traffic_light: | `traffic_light` |
+| :vertical_traffic_light: | `vertical_traffic_light` | :stop_sign: | `stop_sign` |
+| :construction: | `construction` | | |
+
+### Transport Water
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :anchor: | `anchor` | :boat: | `boat` <br /> `sailboat` |
+| :canoe: | `canoe` | :speedboat: | `speedboat` |
+| :passenger_ship: | `passenger_ship` | :ferry: | `ferry` |
+| :motor_boat: | `motor_boat` | :ship: | `ship` |
+
+### Transport Air
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :airplane: | `airplane` | :small_airplane: | `small_airplane` |
+| :flight_departure: | `flight_departure` | :flight_arrival: | `flight_arrival` |
+| :seat: | `seat` | :helicopter: | `helicopter` |
+| :suspension_railway: | `suspension_railway` | :mountain_cableway: | `mountain_cableway` |
+| :aerial_tramway: | `aerial_tramway` | :artificial_satellite: | `artificial_satellite` |
+| :rocket: | `rocket` | | |
+
+### Hotel
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :bellhop_bell: | `bellhop_bell` |
+
+### Time
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :hourglass: | `hourglass` | :hourglass_flowing_sand: | `hourglass_flowing_sand` |
+| :watch: | `watch` | :alarm_clock: | `alarm_clock` |
+| :stopwatch: | `stopwatch` | :timer_clock: | `timer_clock` |
+| :mantelpiece_clock: | `mantelpiece_clock` | :clock12: | `clock12` |
+| :clock1230: | `clock1230` | :clock1: | `clock1` |
+| :clock130: | `clock130` | :clock2: | `clock2` |
+| :clock230: | `clock230` | :clock3: | `clock3` |
+| :clock330: | `clock330` | :clock4: | `clock4` |
+| :clock430: | `clock430` | :clock5: | `clock5` |
+| :clock530: | `clock530` | :clock6: | `clock6` |
+| :clock630: | `clock630` | :clock7: | `clock7` |
+| :clock730: | `clock730` | :clock8: | `clock8` |
+| :clock830: | `clock830` | :clock9: | `clock9` |
+| :clock930: | `clock930` | :clock10: | `clock10` |
+| :clock1030: | `clock1030` | :clock11: | `clock11` |
+| :clock1130: | `clock1130` | | |
+
+### Sky & Weather
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :new_moon: | `new_moon` | :waxing_crescent_moon: | `waxing_crescent_moon` |
+| :first_quarter_moon: | `first_quarter_moon` | :moon: | `moon` <br /> `waxing_gibbous_moon` |
+| :full_moon: | `full_moon` | :waning_gibbous_moon: | `waning_gibbous_moon` |
+| :last_quarter_moon: | `last_quarter_moon` | :waning_crescent_moon: | `waning_crescent_moon` |
+| :crescent_moon: | `crescent_moon` | :new_moon_with_face: | `new_moon_with_face` |
+| :first_quarter_moon_with_face: | `first_quarter_moon_with_face` | :last_quarter_moon_with_face: | `last_quarter_moon_with_face` |
+| :thermometer: | `thermometer` | :sunny: | `sunny` |
+| :full_moon_with_face: | `full_moon_with_face` | :sun_with_face: | `sun_with_face` |
+| :star: | `star` | :star2: | `star2` |
+| :stars: | `stars` | :milky_way: | `milky_way` |
+| :cloud: | `cloud` | :partly_sunny: | `partly_sunny` |
+| :cloud_with_lightning_and_rain: | `cloud_with_lightning_and_rain` | :sun_behind_small_cloud: | `sun_behind_small_cloud` |
+| :sun_behind_large_cloud: | `sun_behind_large_cloud` | :sun_behind_rain_cloud: | `sun_behind_rain_cloud` |
+| :cloud_with_rain: | `cloud_with_rain` | :cloud_with_snow: | `cloud_with_snow` |
+| :cloud_with_lightning: | `cloud_with_lightning` | :tornado: | `tornado` |
+| :fog: | `fog` | :wind_face: | `wind_face` |
+| :cyclone: | `cyclone` | :rainbow: | `rainbow` |
+| :closed_umbrella: | `closed_umbrella` | :open_umbrella: | `open_umbrella` |
+| :umbrella: | `umbrella` | :parasol_on_ground: | `parasol_on_ground` |
+| :zap: | `zap` | :snowflake: | `snowflake` |
+| :snowman_with_snow: | `snowman_with_snow` | :snowman: | `snowman` |
+| :comet: | `comet` | :fire: | `fire` |
+| :droplet: | `droplet` | :ocean: | `ocean` |
+
+## Activities
+
+### Event
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :jack_o_lantern: | `jack_o_lantern` | :christmas_tree: | `christmas_tree` |
+| :fireworks: | `fireworks` | :sparkler: | `sparkler` |
+| :sparkles: | `sparkles` | :balloon: | `balloon` |
+| :tada: | `tada` | :confetti_ball: | `confetti_ball` |
+| :tanabata_tree: | `tanabata_tree` | :bamboo: | `bamboo` |
+| :dolls: | `dolls` | :flags: | `flags` |
+| :wind_chime: | `wind_chime` | :rice_scene: | `rice_scene` |
+| :ribbon: | `ribbon` | :gift: | `gift` |
+| :reminder_ribbon: | `reminder_ribbon` | :tickets: | `tickets` |
+| :ticket: | `ticket` | | |
+
+### Award Medal
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :medal_military: | `medal_military` | :trophy: | `trophy` |
+| :medal_sports: | `medal_sports` | :1st_place_medal: | `1st_place_medal` |
+| :2nd_place_medal: | `2nd_place_medal` | :3rd_place_medal: | `3rd_place_medal` |
+
+### Sport
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :soccer: | `soccer` | :baseball: | `baseball` |
+| :basketball: | `basketball` | :volleyball: | `volleyball` |
+| :football: | `football` | :rugby_football: | `rugby_football` |
+| :tennis: | `tennis` | :bowling: | `bowling` |
+| :cricket: | `cricket` | :field_hockey: | `field_hockey` |
+| :ice_hockey: | `ice_hockey` | :ping_pong: | `ping_pong` |
+| :badminton: | `badminton` | :boxing_glove: | `boxing_glove` |
+| :martial_arts_uniform: | `martial_arts_uniform` | :goal_net: | `goal_net` |
+| :golf: | `golf` | :ice_skate: | `ice_skate` |
+| :fishing_pole_and_fish: | `fishing_pole_and_fish` | :running_shirt_with_sash: | `running_shirt_with_sash` |
+| :ski: | `ski` | | |
+
+### Game
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :dart: | `dart` | :8ball: | `8ball` |
+| :crystal_ball: | `crystal_ball` | :video_game: | `video_game` |
+| :joystick: | `joystick` | :slot_machine: | `slot_machine` |
+| :game_die: | `game_die` | :spades: | `spades` |
+| :hearts: | `hearts` | :diamonds: | `diamonds` |
+| :clubs: | `clubs` | :black_joker: | `black_joker` |
+| :mahjong: | `mahjong` | :flower_playing_cards: | `flower_playing_cards` |
+
+### Arts & Crafts
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :performing_arts: | `performing_arts` | :framed_picture: | `framed_picture` |
+| :art: | `art` | | |
+
+## Objects
+
+### Clothing
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :eyeglasses: | `eyeglasses` | :dark_sunglasses: | `dark_sunglasses` |
+| :necktie: | `necktie` | :shirt: | `shirt` <br /> `tshirt` |
+| :jeans: | `jeans` | :dress: | `dress` |
+| :kimono: | `kimono` | :bikini: | `bikini` |
+| :womans_clothes: | `womans_clothes` | :purse: | `purse` |
+| :handbag: | `handbag` | :pouch: | `pouch` |
+| :shopping: | `shopping` | :school_satchel: | `school_satchel` |
+| :mans_shoe: | `mans_shoe` <br /> `shoe` | :athletic_shoe: | `athletic_shoe` |
+| :high_heel: | `high_heel` | :sandal: | `sandal` |
+| :boot: | `boot` | :crown: | `crown` |
+| :womans_hat: | `womans_hat` | :tophat: | `tophat` |
+| :mortar_board: | `mortar_board` | :rescue_worker_helmet: | `rescue_worker_helmet` |
+| :prayer_beads: | `prayer_beads` | :lipstick: | `lipstick` |
+| :ring: | `ring` | :gem: | `gem` |
+
+### Sound
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :mute: | `mute` | :speaker: | `speaker` |
+| :sound: | `sound` | :loud_sound: | `loud_sound` |
+| :loudspeaker: | `loudspeaker` | :mega: | `mega` |
+| :postal_horn: | `postal_horn` | :bell: | `bell` |
+| :no_bell: | `no_bell` | | |
+
+### Music
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :musical_score: | `musical_score` | :musical_note: | `musical_note` |
+| :notes: | `notes` | :studio_microphone: | `studio_microphone` |
+| :level_slider: | `level_slider` | :control_knobs: | `control_knobs` |
+| :microphone: | `microphone` | :headphones: | `headphones` |
+| :radio: | `radio` | | |
+
+### Musical Instrument
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :saxophone: | `saxophone` | :guitar: | `guitar` |
+| :musical_keyboard: | `musical_keyboard` | :trumpet: | `trumpet` |
+| :violin: | `violin` | :drum: | `drum` |
+
+### Phone
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :iphone: | `iphone` | :calling: | `calling` |
+| :phone: | `phone` <br /> `telephone` | :telephone_receiver: | `telephone_receiver` |
+| :pager: | `pager` | :fax: | `fax` |
+
+### Computer
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :battery: | `battery` | :electric_plug: | `electric_plug` |
+| :computer: | `computer` | :desktop_computer: | `desktop_computer` |
+| :printer: | `printer` | :keyboard: | `keyboard` |
+| :computer_mouse: | `computer_mouse` | :trackball: | `trackball` |
+| :minidisc: | `minidisc` | :floppy_disk: | `floppy_disk` |
+| :cd: | `cd` | :dvd: | `dvd` |
+
+### Light & Video
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :movie_camera: | `movie_camera` | :film_strip: | `film_strip` |
+| :film_projector: | `film_projector` | :clapper: | `clapper` |
+| :tv: | `tv` | :camera: | `camera` |
+| :camera_flash: | `camera_flash` | :video_camera: | `video_camera` |
+| :vhs: | `vhs` | :mag: | `mag` |
+| :mag_right: | `mag_right` | :candle: | `candle` |
+| :bulb: | `bulb` | :flashlight: | `flashlight` |
+| :izakaya_lantern: | `izakaya_lantern` <br /> `lantern` | | |
+
+### Book Paper
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :notebook_with_decorative_cover: | `notebook_with_decorative_cover` | :closed_book: | `closed_book` |
+| :book: | `book` <br /> `open_book` | :green_book: | `green_book` |
+| :blue_book: | `blue_book` | :orange_book: | `orange_book` |
+| :books: | `books` | :notebook: | `notebook` |
+| :ledger: | `ledger` | :page_with_curl: | `page_with_curl` |
+| :scroll: | `scroll` | :page_facing_up: | `page_facing_up` |
+| :newspaper: | `newspaper` | :newspaper_roll: | `newspaper_roll` |
+| :bookmark_tabs: | `bookmark_tabs` | :bookmark: | `bookmark` |
+| :label: | `label` | | |
+
+### Money
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :moneybag: | `moneybag` | :yen: | `yen` |
+| :dollar: | `dollar` | :euro: | `euro` |
+| :pound: | `pound` | :money_with_wings: | `money_with_wings` |
+| :credit_card: | `credit_card` | :chart: | `chart` |
+
+### Mail
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :email: | `email` <br /> `envelope` | :e-mail: | `:e-mail:` |
+| :incoming_envelope: | `incoming_envelope` | :envelope_with_arrow: | `envelope_with_arrow` |
+| :outbox_tray: | `outbox_tray` | :inbox_tray: | `inbox_tray` |
+| :package: | `package` | :mailbox: | `mailbox` |
+| :mailbox_closed: | `mailbox_closed` | :mailbox_with_mail: | `mailbox_with_mail` |
+| :mailbox_with_no_mail: | `mailbox_with_no_mail` | :postbox: | `postbox` |
+| :ballot_box: | `ballot_box` | | |
+
+### Writing
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :pencil2: | `pencil2` | :black_nib: | `black_nib` |
+| :fountain_pen: | `fountain_pen` | :pen: | `pen` |
+| :paintbrush: | `paintbrush` | :crayon: | `crayon` |
+| :memo: | `memo` <br /> `pencil` | | |
+
+### Office
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :briefcase: | `briefcase` | :file_folder: | `file_folder` |
+| :open_file_folder: | `open_file_folder` | :card_index_dividers: | `card_index_dividers` |
+| :date: | `date` | :calendar: | `calendar` |
+| :spiral_notepad: | `spiral_notepad` | :spiral_calendar: | `spiral_calendar` |
+| :card_index: | `card_index` | :chart_with_upwards_trend: | `chart_with_upwards_trend` |
+| :chart_with_downwards_trend: | `chart_with_downwards_trend` | :bar_chart: | `bar_chart` |
+| :clipboard: | `clipboard` | :pushpin: | `pushpin` |
+| :round_pushpin: | `round_pushpin` | :paperclip: | `paperclip` |
+| :paperclips: | `paperclips` | :straight_ruler: | `straight_ruler` |
+| :triangular_ruler: | `triangular_ruler` | :scissors: | `scissors` |
+| :card_file_box: | `card_file_box` | :file_cabinet: | `file_cabinet` |
+| :wastebasket: | `wastebasket` | | |
+
+### Lock
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :lock: | `lock` | :unlock: | `unlock` |
+| :lock_with_ink_pen: | `lock_with_ink_pen` | :closed_lock_with_key: | `closed_lock_with_key` |
+| :key: | `key` | :old_key: | `old_key` |
+
+### Tool
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :hammer: | `hammer` | :pick: | `pick` |
+| :hammer_and_pick: | `hammer_and_pick` | :hammer_and_wrench: | `hammer_and_wrench` |
+| :dagger: | `dagger` | :crossed_swords: | `crossed_swords` |
+| :gun: | `gun` | :bow_and_arrow: | `bow_and_arrow` |
+| :shield: | `shield` | :wrench: | `wrench` |
+| :nut_and_bolt: | `nut_and_bolt` | :gear: | `gear` |
+| :clamp: | `clamp` | :balance_scale: | `balance_scale` |
+| :link: | `link` | :chains: | `chains` |
+
+### Science
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :alembic: | `alembic` | :microscope: | `microscope` |
+| :telescope: | `telescope` | :satellite: | `satellite` |
+
+### Medical
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :syringe: | `syringe` | :pill: | `pill` |
+
+### Household
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :door: | `door` | :bed: | `bed` |
+| :couch_and_lamp: | `couch_and_lamp` | :toilet: | `toilet` |
+| :shower: | `shower` | :bathtub: | `bathtub` |
+| :shopping_cart: | `shopping_cart` | | |
+
+### Other Object
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :smoking: | `smoking` | :coffin: | `coffin` |
+| :funeral_urn: | `funeral_urn` | :moyai: | `moyai` |
+
+## Symbols
+
+### Transport Sign
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :atm: | `atm` | :put_litter_in_its_place: | `put_litter_in_its_place` |
+| :potable_water: | `potable_water` | :wheelchair: | `wheelchair` |
+| :mens: | `mens` | :womens: | `womens` |
+| :restroom: | `restroom` | :baby_symbol: | `baby_symbol` |
+| :wc: | `wc` | :passport_control: | `passport_control` |
+| :customs: | `customs` | :baggage_claim: | `baggage_claim` |
+| :left_luggage: | `left_luggage` | | |
+
+### Warning
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :warning: | `warning` | :children_crossing: | `children_crossing` |
+| :no_entry: | `no_entry` | :no_entry_sign: | `no_entry_sign` |
+| :no_bicycles: | `no_bicycles` | :no_smoking: | `no_smoking` |
+| :do_not_litter: | `do_not_litter` | :non-potable_water: | `:non-potable_water:` |
+| :no_pedestrians: | `no_pedestrians` | :no_mobile_phones: | `no_mobile_phones` |
+| :underage: | `underage` | :radioactive: | `radioactive` |
+| :biohazard: | `biohazard` | | |
+
+### Arrow
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :arrow_up: | `arrow_up` | :arrow_upper_right: | `arrow_upper_right` |
+| :arrow_right: | `arrow_right` | :arrow_lower_right: | `arrow_lower_right` |
+| :arrow_down: | `arrow_down` | :arrow_lower_left: | `arrow_lower_left` |
+| :arrow_left: | `arrow_left` | :arrow_upper_left: | `arrow_upper_left` |
+| :arrow_up_down: | `arrow_up_down` | :left_right_arrow: | `left_right_arrow` |
+| :leftwards_arrow_with_hook: | `leftwards_arrow_with_hook` | :arrow_right_hook: | `arrow_right_hook` |
+| :arrow_heading_up: | `arrow_heading_up` | :arrow_heading_down: | `arrow_heading_down` |
+| :arrows_clockwise: | `arrows_clockwise` | :arrows_counterclockwise: | `arrows_counterclockwise` |
+| :back: | `back` | :end: | `end` |
+| :on: | `on` | :soon: | `soon` |
+| :top: | `top` | | |
+
+### Religion
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :place_of_worship: | `place_of_worship` | :atom_symbol: | `atom_symbol` |
+| :om: | `om` | :star_of_david: | `star_of_david` |
+| :wheel_of_dharma: | `wheel_of_dharma` | :yin_yang: | `yin_yang` |
+| :latin_cross: | `latin_cross` | :orthodox_cross: | `orthodox_cross` |
+| :star_and_crescent: | `star_and_crescent` | :peace_symbol: | `peace_symbol` |
+| :menorah: | `menorah` | :six_pointed_star: | `six_pointed_star` |
+
+### Zodiac
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :aries: | `aries` | :taurus: | `taurus` |
+| :gemini: | `gemini` | :cancer: | `cancer` |
+| :leo: | `leo` | :virgo: | `virgo` |
+| :libra: | `libra` | :scorpius: | `scorpius` |
+| :sagittarius: | `sagittarius` | :capricorn: | `capricorn` |
+| :aquarius: | `aquarius` | :pisces: | `pisces` |
+| :ophiuchus: | `ophiuchus` | | |
+
+### Av Symbol
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :twisted_rightwards_arrows: | `twisted_rightwards_arrows` | :repeat: | `repeat` |
+| :repeat_one: | `repeat_one` | :arrow_forward: | `arrow_forward` |
+| :fast_forward: | `fast_forward` | :next_track_button: | `next_track_button` |
+| :play_or_pause_button: | `play_or_pause_button` | :arrow_backward: | `arrow_backward` |
+| :rewind: | `rewind` | :previous_track_button: | `previous_track_button` |
+| :arrow_up_small: | `arrow_up_small` | :arrow_double_up: | `arrow_double_up` |
+| :arrow_down_small: | `arrow_down_small` | :arrow_double_down: | `arrow_double_down` |
+| :pause_button: | `pause_button` | :stop_button: | `stop_button` |
+| :record_button: | `record_button` | :cinema: | `cinema` |
+| :low_brightness: | `low_brightness` | :high_brightness: | `high_brightness` |
+| :signal_strength: | `signal_strength` | :vibration_mode: | `vibration_mode` |
+| :mobile_phone_off: | `mobile_phone_off` | | |
+
+### Math
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :heavy_multiplication_x: | `heavy_multiplication_x` | :heavy_plus_sign: | `heavy_plus_sign` |
+| :heavy_minus_sign: | `heavy_minus_sign` | :heavy_division_sign: | `heavy_division_sign` |
+
+### Punctuation
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :bangbang: | `bangbang` | :interrobang: | `interrobang` |
+| :question: | `question` | :grey_question: | `grey_question` |
+| :grey_exclamation: | `grey_exclamation` | :exclamation: | `exclamation` <br /> `heavy_exclamation_mark` |
+| :wavy_dash: | `wavy_dash` | | |
+
+### Currency
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :currency_exchange: | `currency_exchange` | :heavy_dollar_sign: | `heavy_dollar_sign` |
+
+### Keycap
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :hash: | `hash` | :asterisk: | `asterisk` |
+| :zero: | `zero` | :one: | `one` |
+| :two: | `two` | :three: | `three` |
+| :four: | `four` | :five: | `five` |
+| :six: | `six` | :seven: | `seven` |
+| :eight: | `eight` | :nine: | `nine` |
+| :keycap_ten: | `keycap_ten` | | |
+
+### Alphabet
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :capital_abcd: | `capital_abcd` | :abcd: | `abcd` |
+| :1234: | `1234` | :symbols: | `symbols` |
+| :abc: | `abc` | :a: | `a` |
+| :ab: | `ab` | :b: | `b` |
+| :cl: | `cl` | :cool: | `cool` |
+| :free: | `free` | :information_source: | `information_source` |
+| :id: | `id` | :m: | `m` |
+| :new: | `new` | :ng: | `ng` |
+| :o2: | `o2` | :ok: | `ok` |
+| :parking: | `parking` | :sos: | `sos` |
+| :up: | `up` | :vs: | `vs` |
+| :koko: | `koko` | :sa: | `sa` |
+| :u6708: | `u6708` | :u6709: | `u6709` |
+| :u6307: | `u6307` | :ideograph_advantage: | `ideograph_advantage` |
+| :u5272: | `u5272` | :u7121: | `u7121` |
+| :u7981: | `u7981` | :accept: | `accept` |
+| :u7533: | `u7533` | :u5408: | `u5408` |
+| :u7a7a: | `u7a7a` | :congratulations: | `congratulations` |
+| :secret: | `secret` | :u55b6: | `u55b6` |
+| :u6e80: | `u6e80` | | |
+
+### Geometric
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :red_circle: | `red_circle` | :large_blue_circle: | `large_blue_circle` |
+| :black_circle: | `black_circle` | :white_circle: | `white_circle` |
+| :black_large_square: | `black_large_square` | :white_large_square: | `white_large_square` |
+| :black_medium_square: | `black_medium_square` | :white_medium_square: | `white_medium_square` |
+| :black_medium_small_square: | `black_medium_small_square` | :white_medium_small_square: | `white_medium_small_square` |
+| :black_small_square: | `black_small_square` | :white_small_square: | `white_small_square` |
+| :large_orange_diamond: | `large_orange_diamond` | :large_blue_diamond: | `large_blue_diamond` |
+| :small_orange_diamond: | `small_orange_diamond` | :small_blue_diamond: | `small_blue_diamond` |
+| :small_red_triangle: | `small_red_triangle` | :small_red_triangle_down: | `small_red_triangle_down` |
+| :diamond_shape_with_a_dot_inside: | `diamond_shape_with_a_dot_inside` | :radio_button: | `radio_button` |
+| :white_square_button: | `white_square_button` | :black_square_button: | `black_square_button` |
+
+### Other Symbol
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :recycle: | `recycle` | :fleur_de_lis: | `fleur_de_lis` |
+| :trident: | `trident` | :name_badge: | `name_badge` |
+| :beginner: | `beginner` | :o: | `o` |
+| :white_check_mark: | `white_check_mark` | :ballot_box_with_check: | `ballot_box_with_check` |
+| :heavy_check_mark: | `heavy_check_mark` | :x: | `x` |
+| :negative_squared_cross_mark: | `negative_squared_cross_mark` | :curly_loop: | `curly_loop` |
+| :loop: | `loop` | :part_alternation_mark: | `part_alternation_mark` |
+| :eight_spoked_asterisk: | `eight_spoked_asterisk` | :eight_pointed_black_star: | `eight_pointed_black_star` |
+| :sparkle: | `sparkle` | :copyright: | `copyright` |
+| :registered: | `registered` | :tm: | `tm` |
+
+## Flags
+
+### Common Flags
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :checkered_flag: | `checkered_flag` | :triangular_flag_on_post: | `triangular_flag_on_post` |
+| :crossed_flags: | `crossed_flags` | :black_flag: | `black_flag` |
+| :white_flag: | `white_flag` | :rainbow_flag: | `rainbow_flag` |
+
+### Country and Region Flags
+
+| icon | code | icon | code |
+| :-: | - | :-: | - |
+| :andorra: | `andorra` | :united_arab_emirates: | `united_arab_emirates` |
+| :afghanistan: | `afghanistan` | :antigua_barbuda: | `antigua_barbuda` |
+| :anguilla: | `anguilla` | :albania: | `albania` |
+| :armenia: | `armenia` | :angola: | `angola` |
+| :antarctica: | `antarctica` | :argentina: | `argentina` |
+| :american_samoa: | `american_samoa` | :austria: | `austria` |
+| :australia: | `australia` | :aruba: | `aruba` |
+| :aland_islands: | `aland_islands` | :azerbaijan: | `azerbaijan` |
+| :bosnia_herzegovina: | `bosnia_herzegovina` | :barbados: | `barbados` |
+| :bangladesh: | `bangladesh` | :belgium: | `belgium` |
+| :burkina_faso: | `burkina_faso` | :bulgaria: | `bulgaria` |
+| :bahrain: | `bahrain` | :burundi: | `burundi` |
+| :benin: | `benin` | :st_barthelemy: | `st_barthelemy` |
+| :bermuda: | `bermuda` | :brunei: | `brunei` |
+| :bolivia: | `bolivia` | :caribbean_netherlands: | `caribbean_netherlands` |
+| :brazil: | `brazil` | :bahamas: | `bahamas` |
+| :bhutan: | `bhutan` | :botswana: | `botswana` |
+| :belarus: | `belarus` | :belize: | `belize` |
+| :canada: | `canada` | :cocos_islands: | `cocos_islands` |
+| :congo_kinshasa: | `congo_kinshasa` | :central_african_republic: | `central_african_republic` |
+| :congo_brazzaville: | `congo_brazzaville` | :switzerland: | `switzerland` |
+| :cote_divoire: | `cote_divoire` | :cook_islands: | `cook_islands` |
+| :chile: | `chile` | :cameroon: | `cameroon` |
+| :cn: | `cn` | :colombia: | `colombia` |
+| :costa_rica: | `costa_rica` | :cuba: | `cuba` |
+| :cape_verde: | `cape_verde` | :curacao: | `curacao` |
+| :christmas_island: | `christmas_island` | :cyprus: | `cyprus` |
+| :czech_republic: | `czech_republic` | :de: | `de` |
+| :djibouti: | `djibouti` | :denmark: | `denmark` |
+| :dominica: | `dominica` | :dominican_republic: | `dominican_republic` |
+| :algeria: | `algeria` | :ecuador: | `ecuador` |
+| :estonia: | `estonia` | :egypt: | `egypt` |
+| :western_sahara: | `western_sahara` | :eritrea: | `eritrea` |
+| :es: | `es` | :ethiopia: | `ethiopia` |
+| :eu: | `eu` <br /> `european_union` | :finland: | `finland` |
+| :fiji: | `fiji` | :falkland_islands: | `falkland_islands` |
+| :micronesia: | `micronesia` | :faroe_islands: | `faroe_islands` |
+| :fr: | `fr` | :gabon: | `gabon` |
+| :gb: | `gb` <br /> `uk` | :grenada: | `grenada` |
+| :georgia: | `georgia` | :french_guiana: | `french_guiana` |
+| :guernsey: | `guernsey` | :ghana: | `ghana` |
+| :gibraltar: | `gibraltar` | :greenland: | `greenland` |
+| :gambia: | `gambia` | :guinea: | `guinea` |
+| :guadeloupe: | `guadeloupe` | :equatorial_guinea: | `equatorial_guinea` |
+| :greece: | `greece` | :south_georgia_south_sandwich_islands: | `south_georgia_south_sandwich_islands` |
+| :guatemala: | `guatemala` | :guam: | `guam` |
+| :guinea_bissau: | `guinea_bissau` | :guyana: | `guyana` |
+| :hong_kong: | `hong_kong` | :honduras: | `honduras` |
+| :croatia: | `croatia` | :haiti: | `haiti` |
+| :hungary: | `hungary` | :canary_islands: | `canary_islands` |
+| :indonesia: | `indonesia` | :ireland: | `ireland` |
+| :israel: | `israel` | :isle_of_man: | `isle_of_man` |
+| :india: | `india` | :british_indian_ocean_territory: | `british_indian_ocean_territory` |
+| :iraq: | `iraq` | :iran: | `iran` |
+| :iceland: | `iceland` | :it: | `it` |
+| :jersey: | `jersey` | :jamaica: | `jamaica` |
+| :jordan: | `jordan` | :jp: | `jp` |
+| :kenya: | `kenya` | :kyrgyzstan: | `kyrgyzstan` |
+| :cambodia: | `cambodia` | :kiribati: | `kiribati` |
+| :comoros: | `comoros` | :st_kitts_nevis: | `st_kitts_nevis` |
+| :north_korea: | `north_korea` | :kr: | `kr` |
+| :kuwait: | `kuwait` | :cayman_islands: | `cayman_islands` |
+| :kazakhstan: | `kazakhstan` | :laos: | `laos` |
+| :lebanon: | `lebanon` | :st_lucia: | `st_lucia` |
+| :liechtenstein: | `liechtenstein` | :sri_lanka: | `sri_lanka` |
+| :liberia: | `liberia` | :lesotho: | `lesotho` |
+| :lithuania: | `lithuania` | :luxembourg: | `luxembourg` |
+| :latvia: | `latvia` | :libya: | `libya` |
+| :morocco: | `morocco` | :monaco: | `monaco` |
+| :moldova: | `moldova` | :montenegro: | `montenegro` |
+| :madagascar: | `madagascar` | :marshall_islands: | `marshall_islands` |
+| :macedonia: | `macedonia` | :mali: | `mali` |
+| :myanmar: | `myanmar` | :mongolia: | `mongolia` |
+| :macau: | `macau` | :northern_mariana_islands: | `northern_mariana_islands` |
+| :martinique: | `martinique` | :mauritania: | `mauritania` |
+| :montserrat: | `montserrat` | :malta: | `malta` |
+| :mauritius: | `mauritius` | :maldives: | `maldives` |
+| :malawi: | `malawi` | :mexico: | `mexico` |
+| :malaysia: | `malaysia` | :mozambique: | `mozambique` |
+| :namibia: | `namibia` | :new_caledonia: | `new_caledonia` |
+| :niger: | `niger` | :norfolk_island: | `norfolk_island` |
+| :nigeria: | `nigeria` | :nicaragua: | `nicaragua` |
+| :netherlands: | `netherlands` | :norway: | `norway` |
+| :nepal: | `nepal` | :nauru: | `nauru` |
+| :niue: | `niue` | :new_zealand: | `new_zealand` |
+| :oman: | `oman` | :panama: | `panama` |
+| :peru: | `peru` | :french_polynesia: | `french_polynesia` |
+| :papua_new_guinea: | `papua_new_guinea` | :philippines: | `philippines` |
+| :pakistan: | `pakistan` | :poland: | `poland` |
+| :st_pierre_miquelon: | `st_pierre_miquelon` | :pitcairn_islands: | `pitcairn_islands` |
+| :puerto_rico: | `puerto_rico` | :palestinian_territories: | `palestinian_territories` |
+| :portugal: | `portugal` | :palau: | `palau` |
+| :paraguay: | `paraguay` | :qatar: | `qatar` |
+| :reunion: | `reunion` | :romania: | `romania` |
+| :serbia: | `serbia` | :ru: | `ru` |
+| :rwanda: | `rwanda` | :saudi_arabia: | `saudi_arabia` |
+| :solomon_islands: | `solomon_islands` | :seychelles: | `seychelles` |
+| :sudan: | `sudan` | :sweden: | `sweden` |
+| :singapore: | `singapore` | :st_helena: | `st_helena` |
+| :slovenia: | `slovenia` | :slovakia: | `slovakia` |
+| :sierra_leone: | `sierra_leone` | :san_marino: | `san_marino` |
+| :senegal: | `senegal` | :somalia: | `somalia` |
+| :suriname: | `suriname` | :south_sudan: | `south_sudan` |
+| :sao_tome_principe: | `sao_tome_principe` | :el_salvador: | `el_salvador` |
+| :sint_maarten: | `sint_maarten` | :syria: | `syria` |
+| :swaziland: | `swaziland` | :turks_caicos_islands: | `turks_caicos_islands` |
+| :chad: | `chad` | :french_southern_territories: | `french_southern_territories` |
+| :togo: | `togo` | :thailand: | `thailand` |
+| :tajikistan: | `tajikistan` | :tokelau: | `tokelau` |
+| :timor_leste: | `timor_leste` | :turkmenistan: | `turkmenistan` |
+| :tunisia: | `tunisia` | :tonga: | `tonga` |
+| :tr: | `tr` | :trinidad_tobago: | `trinidad_tobago` |
+| :tuvalu: | `tuvalu` | :taiwan: | `taiwan` |
+| :tanzania: | `tanzania` | :ukraine: | `ukraine` |
+| :uganda: | `uganda` | :us: | `us` |
+| :uruguay: | `uruguay` | :uzbekistan: | `uzbekistan` |
+| :vatican_city: | `vatican_city` | :st_vincent_grenadines: | `st_vincent_grenadines` |
+| :venezuela: | `venezuela` | :british_virgin_islands: | `british_virgin_islands` |
+| :us_virgin_islands: | `us_virgin_islands` | :vietnam: | `vietnam` |
+| :vanuatu: | `vanuatu` | :wallis_futuna: | `wallis_futuna` |
+| :samoa: | `samoa` | :kosovo: | `kosovo` |
+| :yemen: | `yemen` | :mayotte: | `mayotte` |
+| :south_africa: | `south_africa` | :zambia: | `zambia` |
+| :zimbabwe: | `zimbabwe` | | |
diff --git a/content/posts/theme-documentation-basics/basic-configuration-preview.png b/content/posts/theme-documentation-basics/basic-configuration-preview.png
new file mode 100644
index 00000000..00a4e65e
Binary files /dev/null and b/content/posts/theme-documentation-basics/basic-configuration-preview.png differ
diff --git a/content/posts/theme-documentation-basics/basic-configuration-preview.zh-cn.png b/content/posts/theme-documentation-basics/basic-configuration-preview.zh-cn.png
new file mode 100644
index 00000000..1b1d2938
Binary files /dev/null and b/content/posts/theme-documentation-basics/basic-configuration-preview.zh-cn.png differ
diff --git a/content/posts/theme-documentation-basics/complete-configuration-preview.png b/content/posts/theme-documentation-basics/complete-configuration-preview.png
new file mode 100644
index 00000000..27726741
Binary files /dev/null and b/content/posts/theme-documentation-basics/complete-configuration-preview.png differ
diff --git a/content/posts/theme-documentation-basics/complete-configuration-preview.zh-cn.png b/content/posts/theme-documentation-basics/complete-configuration-preview.zh-cn.png
new file mode 100644
index 00000000..7990929e
Binary files /dev/null and b/content/posts/theme-documentation-basics/complete-configuration-preview.zh-cn.png differ
diff --git a/content/posts/theme-documentation-basics/featured-image.jpg b/content/posts/theme-documentation-basics/featured-image.jpg
new file mode 100644
index 00000000..87f5401b
Binary files /dev/null and b/content/posts/theme-documentation-basics/featured-image.jpg differ
diff --git a/content/posts/theme-documentation-basics/index.en.md b/content/posts/theme-documentation-basics/index.en.md
new file mode 100644
index 00000000..addc9e03
--- /dev/null
+++ b/content/posts/theme-documentation-basics/index.en.md
@@ -0,0 +1,1035 @@
+---
+weight: 1
+title: "Theme Documentation - Basics"
+date: 2020-03-06T21:29:01+08:00
+lastmod: 2020-03-06T21:29:01+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "Discover what the Hugo - KeepIt theme is all about and the core-concepts behind it."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+
+tags: ["installation", "configuration"]
+categories: ["documentation"]
+
+lightgallery: true
+
+toc:
+  auto: false
+---
+
+Discover what the Hugo - **KeepIt** theme is all about and the core-concepts behind it.
+
+<!--more-->
+
+## 1 Requirements
+
+Thanks to the simplicity of Hugo, [Hugo](https://gohugo.io/) is the only dependency of this theme.
+
+Just install latest version of [:(far fa-file-archive fa-fw): Hugo (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**).
+
+{{< admonition note "Why not support earlier versions of Hugo?" >}}
+Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **0.62.0**.
+{{< /admonition >}}
+
+{{< admonition tip "Hugo extended version is recommended" >}}
+Since some features of this theme need to processes :(fab fa-sass fa-fw): SCSS to :(fab fa-css3 fa-fw): CSS, it is recommended to use Hugo **extended** version for better experience.
+{{< /admonition >}}
+
+## 2 Installation
+
+The following steps are here to help you initialize your new website. If you don’t know Hugo at all, we strongly suggest you learn more about it by following this [great documentation for beginners](https://gohugo.io/getting-started/quick-start/).
+
+### 2.1 Create Your Project
+
+Hugo provides a `new` command to create a new website:
+
+```bash
+hugo new site my_website
+cd my_website
+```
+
+### 2.2 Install the Theme
+
+The **KeepIt** theme’s repository is: [https://github.com/Fastbyte01/KeepIt](https://github.com/Fastbyte01/KeepIt).
+
+You can download the [latest release :(far fa-file-archive fa-fw): .zip file](https://github.com/Fastbyte01/KeepIt/releases) of the theme and extract it in the `themes` directory.
+
+Alternatively, clone this repository to the `themes` directory:
+
+```bash
+git clone https://github.com/Fastbyte01/KeepIt.git themes/KeepIt
+```
+
+Or, create an empty git repository and make this repository a submodule of your site directory:
+
+```bash
+git init
+git submodule add https://github.com/Fastbyte01/KeepIt.git themes/KeepIt
+```
+
+### 2.3 Basic Configuration {#basic-configuration}
+
+The following is a basic configuration for the KeepIt theme:
+
+```toml
+baseURL = "http://example.org/"
+
+# Change the default theme to be use when building the site with Hugo
+theme = "KeepIt"
+
+# website title
+title = "My New Hugo Site"
+
+# language code ["en", "zh-CN", "fr", "pl", ...]
+languageCode = "en"
+# language name ["English", "简体中文", "Français", "Polski", ...]
+languageName = "English"
+
+# Author config
+[author]
+  name = "xxxx"
+  email = ""
+  link = ""
+
+# Menu config
+[menu]
+  [[menu.main]]
+    weight = 1
+    identifier = "posts"
+    # you can add extra information before the name (HTML format is supported), such as icons
+    pre = ""
+    # you can add extra information after the name (HTML format is supported), such as icons
+    post = ""
+    name = "Posts"
+    url = "/posts/"
+    # title will be shown when you hover on this menu link
+    title = ""
+  [[menu.main]]
+    weight = 2
+    identifier = "tags"
+    pre = ""
+    post = ""
+    name = "Tags"
+    url = "/tags/"
+    title = ""
+  [[menu.main]]
+    weight = 3
+    identifier = "categories"
+    pre = ""
+    post = ""
+    name = "Categories"
+    url = "/categories/"
+    title = ""
+
+# Markup related configuration in Hugo
+[markup]
+  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
+  [markup.highlight]
+    # false is a necessary configuration (https://github.com/Fastbyte01/KeepIt/issues/158)
+    noClasses = false
+```
+
+{{< admonition >}}
+When building the website, you can set a theme by using `--theme` option. However, we suggest you modify the configuration file (**config.toml**) and set the theme as the default.
+{{< /admonition >}}
+
+### 2.4 Create Your First Post
+
+Here is the way to create your first post:
+
+```bash
+hugo new posts/first_post.md
+```
+
+Feel free to edit the post file by adding some sample content and replacing the title value in the beginning of the file.
+
+{{< admonition >}}
+By default all posts and pages are created as a draft. If you want to render these pages, remove the property `draft: true` from the metadata, set the property `draft: false` or add `-D`/`--buildDrafts` parameter to `hugo` command.
+{{< /admonition >}}
+
+### 2.5 Launching the Website Locally
+
+Launch by using the following command:
+
+```bash
+hugo serve
+```
+
+Go to `http://localhost:1313`.
+
+![Basic configuration preview](basic-configuration-preview.png "Basic configuration preview")
+
+{{< admonition tip >}}
+When you run `hugo serve`, when the contents of the files change, the page automatically refreshes with the changes.
+{{< /admonition >}}
+
+{{< admonition >}}
+Since the theme use `.Scratch` in Hugo to implement some features,
+it is highly recommended that you add `--disableFastRender` parameter to `hugo server` command for the live preview of the page you are editing.
+
+```bash
+hugo serve --disableFastRender
+```
+{{< /admonition >}}
+
+### 2.6 Build the Website
+
+When your site is ready to deploy, run the following command:
+
+```bash
+hugo
+```
+
+A `public` folder will be generated, containing all static content and assets for your website. It can now be deployed on any web server.
+
+{{< admonition tip >}}
+The website can be automatically published and hosted with [Netlify](https://www.netlify.com/) (Read more about [Automated HUGO deployments with Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)).
+Alternatively, you can use [AWS Amplify](https://gohugo.io/hosting-and-deployment/hosting-on-aws-amplify/), [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/), [Render](https://gohugo.io/hosting-and-deployment/hosting-on-render/) and more...
+{{< /admonition >}}
+
+## 3 Configuration
+
+### 3.1 Site Configuration {#site-configuration}
+
+In addition to [Hugo global configuration](https://gohugo.io/overview/configuration/) and [menu configuration](#basic-configuration), **KeepIt** lets you define the following parameters in your site configuration (here is a `config.toml`, whose values are default).
+
+Please open the code block below to view the complete sample configuration :(far fa-hand-point-down fa-fw)::
+
+```toml
+[params]
+  # site default theme ["auto", "light", "dark"]
+  defaultTheme = "auto"
+  # public git repo url only then enableGitInfo is true
+  gitRepo = ""
+  # {{< version 0.1.1 >}} which hash function used for SRI, when empty, no SRI is used
+  # ["sha256", "sha384", "sha512", "md5"]
+  fingerprint = ""
+  # {{< version 0.2.0 >}} date format
+  dateFormat = "2006-01-02"
+  # website title for Open Graph and Twitter Cards
+  title = "My cool site"
+  # website description for RSS, SEO, Open Graph and Twitter Cards
+  description = "This is my cool site"
+  # website images for Open Graph and Twitter Cards
+  images = ["/logo.png"]
+
+  # Header config
+  [params.header]
+    # desktop header mode ["fixed", "normal", "auto"]
+    desktopMode = "fixed"
+    # mobile header mode ["fixed", "normal", "auto"]
+    mobileMode = "auto"
+    # {{< version 0.2.0 >}} Header title config
+    [params.header.title]
+      # URL of the LOGO
+      logo = ""
+      # title name
+      name = ""
+      # you can add extra information before the name (HTML format is supported), such as icons
+      pre = ""
+      # you can add extra information after the name (HTML format is supported), such as icons
+      post = ""
+      # {{< version 0.2.5 >}} whether to use typeit animation for title name
+      typeit = false
+
+  # Footer config
+  [params.footer]
+    enable = true
+    # {{< version 0.2.0 >}} Custom content (HTML format is supported)
+    custom = ''
+    # {{< version 0.2.0 >}} whether to show Hugo and theme info
+    hugo = true
+    # {{< version 0.2.0 >}} whether to show copyright info
+    copyright = true
+    # {{< version 0.2.0 >}} whether to show the author
+    author = true
+    # Site creation time
+    since = 2019
+    # ICP info only in China (HTML format is supported)
+    icp = ""
+    # license info (HTML format is supported)
+    license = '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
+
+  # {{< version 0.2.0 >}} Section (all posts) page config
+  [params.section]
+    # special amount of posts in each section page
+    paginate = 20
+    # date format (month and day)
+    dateFormat = "01-02"
+    # amount of RSS pages
+    rss = 10
+
+  # {{< version 0.2.0 >}} List (category or tag) page config
+  [params.list]
+    # special amount of posts in each list page
+    paginate = 20
+    # date format (month and day)
+    dateFormat = "01-02"
+    # amount of RSS pages
+    rss = 10
+
+  # {{< version 0.2.0 >}} App icon config
+  [params.app]
+    # optional site title override for the app when added to an iOS home screen or Android launcher
+    title = "My cool site"
+    # whether to omit favicon resource links
+    noFavicon = false
+    # modern SVG favicon to use in place of older style .png and .ico files
+    svgFavicon = ""
+    # Android browser theme color
+    themeColor = "#ffffff"
+    # Safari mask icon color
+    iconColor = "#5bbad5"
+    # Windows v8-10 tile color
+    tileColor = "#da532c"
+
+  # {{< version 0.2.0 >}} Search config
+  [params.search]
+    enable = true
+    # type of search engine ["lunr", "algolia"]
+    type = "lunr"
+    # max index length of the chunked content
+    contentLength = 4000
+    # placeholder of the search bar
+    placeholder = ""
+    # {{< version 0.2.1 >}} max number of results length
+    maxResultLength = 10
+    # {{< version 0.2.3 >}} snippet length of the result
+    snippetLength = 30
+    # {{< version 0.2.1 >}} HTML tag name of the highlight part in results
+    highlightTag = "em"
+    # {{< version 0.2.4 >}} whether to use the absolute URL based on the baseURL in search index
+    absoluteURL = false
+    [params.search.algolia]
+      index = ""
+      appID = ""
+      searchKey = ""
+
+  # Home page config
+  [params.home]
+    # {{< version 0.2.0 >}} amount of RSS pages
+    rss = 10
+    # Home page profile
+    [params.home.profile]
+      enable = true
+      # Gravatar Email for preferred avatar in home page
+      gravatarEmail = ""
+      # URL of avatar shown in home page
+      avatarURL = "/images/avatar.png"
+      # {{< version 0.2.7 changed >}} title shown in home page (HTML format is supported)
+      title = ""
+      # subtitle shown in home page
+      subtitle = "This is My New Hugo Site"
+      # whether to use typeit animation for subtitle
+      typeit = true
+      # whether to show social links
+      social = true
+      # {{< version 0.2.0 >}} disclaimer (HTML format is supported)
+      disclaimer = ""
+    # Home page posts
+    [params.home.posts]
+      enable = true
+      # special amount of posts in each home posts page
+      paginate = 6
+      # {{< version 0.2.0 deleted >}} replaced with hiddenFromHomePage in params.page
+      # default behavior when you don't set "hiddenFromHomePage" in front matter
+      defaultHiddenFromHomePage = false
+
+  # Social config about the author
+  [params.social]
+    GitHub = "xxxx"
+    Linkedin = ""
+    Twitter = "xxxx"
+    Instagram = "xxxx"
+    Facebook = "xxxx"
+    Telegram = "xxxx"
+    Medium = ""
+    Gitlab = ""
+    Youtubelegacy = ""
+    Youtubecustom = ""
+    Youtubechannel = ""
+    Tumblr = ""
+    Quora = ""
+    Keybase = ""
+    Pinterest = ""
+    Reddit = ""
+    Codepen = ""
+    FreeCodeCamp = ""
+    Bitbucket = ""
+    Stackoverflow = ""
+    Weibo = ""
+    Odnoklassniki = ""
+    VK = ""
+    Flickr = ""
+    Xing = ""
+    Snapchat = ""
+    Soundcloud = ""
+    Spotify = ""
+    Bandcamp = ""
+    Paypal = ""
+    Fivehundredpx = ""
+    Mix = ""
+    Goodreads = ""
+    Lastfm = ""
+    Foursquare = ""
+    Hackernews = ""
+    Kickstarter = ""
+    Patreon = ""
+    Steam = ""
+    Twitch = ""
+    Strava = ""
+    Skype = ""
+    Whatsapp = ""
+    Zhihu = ""
+    Douban = ""
+    Angellist = ""
+    Slidershare = ""
+    Jsfiddle = ""
+    Deviantart = ""
+    Behance = ""
+    Dribbble = ""
+    Wordpress = ""
+    Vine = ""
+    Googlescholar = ""
+    Researchgate = ""
+    Mastodon = ""
+    Thingiverse = ""
+    Devto = ""
+    Gitea = ""
+    XMPP = ""
+    Matrix = ""
+    Bilibili = ""
+    Email = "xxxx@xxxx.com"
+    RSS = true # {{< version 0.2.0 >}}
+
+  # {{< version 0.2.0 changed >}} Page global config
+  [params.page]
+    # {{< version 0.2.0 >}} whether to hide a page from home page
+    hiddenFromHomePage = false
+    # {{< version 0.2.0 >}} whether to hide a page from search results
+    hiddenFromSearch = false
+    # {{< version 0.2.0 >}} whether to enable twemoji
+    twemoji = false
+    # whether to enable lightgallery
+    lightgallery = false
+    # {{< version 0.2.0 >}} whether to enable the ruby extended syntax
+    ruby = true
+    # {{< version 0.2.0 >}} whether to enable the fraction extended syntax
+    fraction = true
+    # {{< version 0.2.0 >}} whether to enable the fontawesome extended syntax
+    fontawesome = true
+    # whether to show link to Raw Markdown content of the content
+    linkToMarkdown = true
+    # {{< version 0.2.4 >}} whether to show the full text content in RSS
+    rssFullText = false
+    # {{< version 0.2.0 >}} Table of the contents config
+    [params.page.toc]
+      # whether to enable the table of the contents
+      enable = true
+      # {{< version 0.2.9 >}} whether to keep the static table of the contents in front of the post
+      keepStatic = true
+      # whether to make the table of the contents in the sidebar automatically collapsed
+      auto = true
+    # {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} mathematical formulas
+    [params.page.math]
+      enable = true
+      # {{< version 0.2.11 changed >}} default inline delimiter is $ ... $ and \( ... \)
+      inlineLeftDelimiter = ""
+      inlineRightDelimiter = ""
+      # {{< version 0.2.11 changed >}} default block delimiter is $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} and some other functions
+      blockLeftDelimiter = ""
+      blockRightDelimiter = ""
+      # KaTeX extension copy_tex
+      copyTex = true
+      # KaTeX extension mhchem
+      mhchem = true
+    # {{< version 0.2.0 >}} Code config
+    [params.page.code]
+      # whether to show the copy button of the code block
+      copy = true
+      # the maximum number of lines of displayed code by default
+      maxShownLines = 50
+    # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
+    [params.page.mapbox]
+      # access token of Mapbox GL JS
+      accessToken = ""
+      # style for the light theme
+      lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true"
+      # style for the dark theme
+      darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true"
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}}
+      navigation = true
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}}
+      geolocate = true
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol" ScaleControl >}}
+      scale = true
+      # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol" FullscreenControl >}}
+      fullscreen = true
+    # {{< version 0.2.0 changed >}} social share links in post page
+    [params.page.share]
+      enable = true
+      Twitter = true
+      Facebook = true
+      Linkedin = false
+      Whatsapp = false
+      Pinterest = false
+      Tumblr = false
+      HackerNews = true
+      Reddit = false
+      VK = false
+      Buffer = false
+      Xing = false
+      Line = true
+      Instapaper = false
+      Pocket = false
+      Flipboard = false
+      Weibo = true
+      Blogger = false
+      Baidu = false
+      Odnoklassniki = false
+      Evernote = false
+      Skype = false
+      Trello = false
+      Mix = false
+    # {{< version 0.2.0 changed >}} Comment config
+    [params.page.comment]
+      enable = false
+      # {{< link "https://disqus.com/" Disqus >}} comment config
+      [params.page.comment.disqus]
+        # {{< version 0.1.1 >}}
+        enable = false
+        # Disqus shortname to use Disqus in posts
+        shortname = ""
+      # {{< link "https://github.com/gitalk/gitalk" Gitalk >}} comment config
+      [params.page.comment.gitalk]
+        # {{< version 0.1.1 >}}
+        enable = false
+        owner = ""
+        repo = ""
+        clientId = ""
+        clientSecret = ""
+      # {{< link "https://github.com/xCss/Valine" Valine >}} comment config
+      [params.page.comment.valine]
+        enable = false
+        appId = ""
+        appKey = ""
+        placeholder = ""
+        avatar = "mp"
+        meta= ""
+        pageSize = 10
+        lang = ""
+        visitor = true
+        recordIP = true
+        highlight = true
+        enableQQ = false
+        serverURLs = ""
+        # {{< version 0.2.6 >}} emoji data file name, default is "google.yml"
+        # ["apple.yml", "google.yml", "facebook.yml", "twitter.yml"]
+        # located in "themes/KeepIt/assets/data/emoji/" directory
+        # you can store your own data files in the same path under your project:
+        # "assets/data/emoji/"
+        emoji = ""
+      # {{< link "https://developers.facebook.com/docs/plugins/comments" "Facebook comment" >}} config
+      [params.page.comment.facebook]
+        enable = false
+        width = "100%"
+        numPosts = 10
+        appId = ""
+        languageCode = ""
+      # {{< version 0.2.0 >}} {{< link "https://comments.app/" "Telegram comments" >}} config
+      [params.page.comment.telegram]
+        enable = false
+        siteID = ""
+        limit = 5
+        height = ""
+        color = ""
+        colorful = true
+        dislikes = false
+        outlined = false
+      # {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} comment config
+      [params.page.comment.commento]
+        enable = false
+      # {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} comment config
+      [params.page.comment.utterances]
+        enable = false
+        # owner/repo
+        repo = ""
+        issueTerm = "pathname"
+        label = ""
+        lightTheme = "github-light"
+        darkTheme = "github-dark"
+    # {{< version 0.2.7 >}} Third-party library config
+    [params.page.library]
+      [params.page.library.css]
+        # someCSS = "some.css"
+        # located in "assets/"
+        # Or
+        # someCSS = "https://cdn.example.com/some.css"
+      [params.page.library.js]
+        # someJavascript = "some.js"
+        # located in "assets/"
+        # Or
+        # someJavascript = "https://cdn.example.com/some.js"
+    # {{< version 0.2.10 changed >}} Page SEO config
+    [params.page.seo]
+      # image URL
+      images = []
+      # Publisher info
+      [params.page.seo.publisher]
+        name = ""
+        logoUrl = ""
+
+  # {{< version 0.2.5 >}} TypeIt config
+  [params.typeit]
+    # typing speed between each step (measured in milliseconds)
+    speed = 100
+    # blinking speed of the cursor (measured in milliseconds)
+    cursorSpeed = 1000
+    # character used for the cursor (HTML format is supported)
+    cursorChar = "|"
+    # cursor duration after typing finishing (measured in milliseconds, "-1" means unlimited)
+    duration = -1
+
+  # Site verification code config for Google/Bing/Yandex/Pinterest/Baidu
+  [params.verification]
+    google = ""
+    bing = ""
+    yandex = ""
+    pinterest = ""
+    baidu = ""
+
+  # {{< version 0.2.10 >}} Site SEO config
+  [params.seo]
+    # image URL
+    image = ""
+    # thumbnail URL
+    thumbnailUrl = ""
+
+  # {{< version 0.2.0 >}} Analytics config
+  [params.analytics]
+    enable = false
+    # Google Analytics
+    [params.analytics.google]
+      id = ""
+      # whether to anonymize IP
+      anonymizeIP = true
+    # Fathom Analytics
+    [params.analytics.fathom]
+      id = ""
+      # server url for your tracker if you're self hosting
+      server = ""
+
+  # {{< version 0.2.7 >}} Cookie consent config
+  [params.cookieconsent]
+    enable = true
+    # text strings used for Cookie consent banner
+    [params.cookieconsent.content]
+      message = ""
+      dismiss = ""
+      link = ""
+
+  # {{< version 0.2.7 changed >}} CDN config for third-party library files
+  [params.cdn]
+    # CDN data file name, disabled by default
+    # ["jsdelivr.yml"]
+    # located in "themes/KeepIt/assets/data/cdn/" directory
+    # you can store your own data files in the same path under your project:
+    # "assets/data/cdn/"
+    data = ""
+
+  # {{< version 0.2.8 >}} Compatibility config
+  [params.compatibility]
+    # whether to use Polyfill.io to be compatible with older browsers
+    polyfill = false
+    # whether to use object-fit-images to be compatible with older browsers
+    objectFit = false
+
+# Markup related config in Hugo
+[markup]
+  # {{< link "https://gohugo.io/content-management/syntax-highlighting" "Syntax Highlighting" >}}
+  [markup.highlight]
+    codeFences = true
+    guessSyntax = true
+    lineNos = true
+    lineNumbersInTable = true
+    # false is a necessary configuration
+    # ({{< link "https://github.com/Fastbyte01/KeepIt/issues/158" >}})
+    noClasses = false
+  # Goldmark is from Hugo 0.60 the default library used for Markdown
+  [markup.goldmark]
+    [markup.goldmark.extensions]
+      definitionList = true
+      footnote = true
+      linkify = true
+      strikethrough = true
+      table = true
+      taskList = true
+      typographer = true
+    [markup.goldmark.renderer]
+      # whether to use HTML tags directly in the document
+      unsafe = true
+  # Table Of Contents settings
+  [markup.tableOfContents]
+    startLevel = 2
+    endLevel = 6
+
+# Sitemap config
+[sitemap]
+  changefreq = "weekly"
+  filename = "sitemap.xml"
+  priority = 0.5
+
+# {{< link "https://gohugo.io/content-management/urls#permalinks" "Permalinks config" >}}
+[Permalinks]
+  # posts = ":year/:month/:filename"
+  posts = ":filename"
+
+# {{< link "https://gohugo.io/about/hugo-and-gdpr/" "Privacy config" >}}
+[privacy]
+  # {{< version 0.2.0 deleted >}} privacy of the Google Analytics (replaced by params.analytics.google)
+  [privacy.googleAnalytics]
+    # ...
+  [privacy.twitter]
+    enableDNT = true
+  [privacy.youtube]
+    privacyEnhanced = true
+
+# Options to make output .md files
+[mediaTypes]
+  [mediaTypes."text/plain"]
+    suffixes = ["md"]
+
+# Options to make output .md files
+[outputFormats.MarkDown]
+  mediaType = "text/plain"
+  isPlainText = true
+  isHTML = false
+
+# Options to make hugo output files
+[outputs]
+  # {{< version 0.2.0 changed >}}
+  home = ["HTML", "RSS", "JSON"]
+  page = ["HTML", "MarkDown"]
+  section = ["HTML", "RSS"]
+  taxonomy = ["HTML", "RSS"]
+  taxonomyTerm = ["HTML"]
+```
+
+{{< admonition >}}
+Note that some of these parameters are explained in details in other sections of this documentation.
+{{< /admonition >}}
+
+{{< admonition note "Hugo environments" >}}
+Default environments are `development` with `hugo serve` and `production` with `hugo`.
+
+Due to limitations in the local `development` environment,
+the **comment system**, **CDN** and **fingerprint** will not be enabled in the `development` environment.
+
+You could enable these features with `hugo serve -e production`.
+{{< /admonition >}}
+
+{{< admonition tip "Tips about CDN Configuration" >}}
+{{< version 0.2.7 changed >}}
+
+```toml
+[params.cdn]
+  # CDN data file name, disabled by default
+  # ["jsdelivr.yml"]
+  data = ""
+````
+
+The default CDN data file is located in `themes/KeepIt/assets/data/cdn/` directory.
+You can store your own data file in the same path under your project: `assets/data/cdn/`.
+{{< /admonition >}}
+
+{{< admonition tip "Tips about social Configuration" >}}
+{{< version 0.2.0 >}}
+
+You can directly set your ID to get a default social link and its icon:
+
+```toml
+[params.social]
+  Mastodon = "@xxxx"
+```
+
+The social link generated is `https://mastodon.technology/@xxxx`.
+
+Or You can set more options through a dict:
+
+```toml
+[params.social]
+  [params.social.Mastodon]
+    # weight when arranging icons (the greater the weight, the later the icon is positioned)
+    weight = 0
+    # your social ID
+    id = "@xxxx"
+    # prefix of your social link
+    prefix = "https://mastodon.social/"
+    # content hovering on the icon
+    title = "Mastodon"
+```
+
+The default data of all supported social links is located in `themes/KeepIt/assets/data/social.yaml`,
+which is you can refer to.
+{{< /admonition >}}
+
+![Complete configuration preview](complete-configuration-preview.png "Complete configuration preview")
+
+### 3.2 Favicons, Browserconfig, Manifest
+
+It is recommended to put your own favicons:
+
+* apple-touch-icon.png (180x180)
+* favicon-32x32.png (32x32)
+* favicon-16x16.png (16x16)
+* mstile-150x150.png (150x150)
+* android-chrome-192x192.png (192x192)
+* android-chrome-512x512.png (512x512)
+
+into `/static`. They’re easily created via [https://realfavicongenerator.net/](https://realfavicongenerator.net/).
+
+Customize `browserconfig.xml` and `site.webmanifest` to set theme-color and background-color.
+
+### 3.3 Style Customization
+
+{{< version 0.2.8 changed >}}
+
+{{< admonition >}}
+Hugo **extended** version is necessary for the style customization.
+{{< /admonition >}}
+
+**KeepIt** theme has been built to be as configurable as possible by defining custom `.scss` style files.
+
+The directory including the custom `.scss` style files is `assets/css` relative to **your project root directory**.
+
+In `assets/css/_override.scss`, you can override the variables in `themes/KeepIt/assets/css/_variables.scss` to customize the style.
+
+Here is a example:
+
+```scss
+@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
+$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;
+```
+
+In `assets/css/_custom.scss`, you can add some css style code to customize the style.
+
+## 4 Multilingual and i18n
+
+**KeepIt** theme is fully compatible with Hugo multilingual mode, which provides in-browser language switching.
+
+![Language Switch](language-switch.gif "Language Switch")
+
+### 4.1 Compatibility {#language-compatibility}
+
+{{< version 0.2.10 changed >}}
+
+| Language             | Hugo Code | HTML `lang` Attribute | Theme Docs                    | Lunr.js Support               |
+|:-------------------- |:---------:|:---------------------:|:-----------------------------:|:-----------------------------:|
+| English              | `en`      | `en`                  | :(far fa-check-square fa-fw): | :(far fa-check-square fa-fw): |
+| Simplified Chinese   | `zh-cn`   | `zh-CN`               | :(far fa-check-square fa-fw): | :(far fa-check-square fa-fw): |
+| Traditional Chinese  | `zh-tw`   | `zh-TW`               | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+| French               | `fr`      | `fr`                  | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+| Polish               | `pl`      | `pl`                  | :(far fa-square fa-fw):       | :(far fa-square fa-fw):       |
+| Brazilian Portuguese | `pt-br`   | `pt-BR`               | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+| Italian              | `it`      | `it`                  | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+| Spanish              | `es`      | `es`                  | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+| German               | `de`      | `de`                  | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+| German               | `de`      | `de`                  | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+| Serbian              | `sr`      | `sr`                  | :(far fa-square fa-fw):       | :(far fa-square fa-fw):       |
+| Russian              | `ru`      | `ru`                  | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+| Romanian             | `ro`      | `ro`                  | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+| Vietnamese           | `vi`      | `vi`                  | :(far fa-square fa-fw):       | :(far fa-check-square fa-fw): |
+
+### 4.2 Basic Configuration
+
+After learning [how Hugo handle multilingual websites](https://gohugo.io/content-management/multilingual), define your languages in your [site configuration](#site-configuration).
+
+For example with English, Chinese and French website:
+
+```toml
+# determines default content language ["en", "zh-cn", "fr", "pl", ...]
+defaultContentLanguage = "en"
+
+[languages]
+  [languages.en]
+    weight = 1
+    title = "My New Hugo Site"
+    languageCode = "en"
+    languageName = "English"
+    [[languages.en.menu.main]]
+      weight = 1
+      identifier = "posts"
+      pre = ""
+      post = ""
+      name = "Posts"
+      url = "/posts/"
+      title = ""
+    [[languages.en.menu.main]]
+      weight = 2
+      identifier = "tags"
+      pre = ""
+      post = ""
+      name = "Tags"
+      url = "/tags/"
+      title = ""
+    [[languages.en.menu.main]]
+      weight = 3
+      identifier = "categories"
+      pre = ""
+      post = ""
+      name = "Categories"
+      url = "/categories/"
+      title = ""
+
+  [languages.zh-cn]
+    weight = 2
+    title = "我的全新 Hugo 网站"
+    languageCode = "zh-CN"
+    languageName = "简体中文"
+    hasCJKLanguage = true
+    [[languages.zh-cn.menu.main]]
+      weight = 1
+      identifier = "posts"
+      pre = ""
+      post = ""
+      name = "文章"
+      url = "/posts/"
+      title = ""
+    [[languages.zh-cn.menu.main]]
+      weight = 2
+      identifier = "tags"
+      pre = ""
+      post = ""
+      name = "标签"
+      url = "/tags/"
+      title = ""
+    [[languages.zh-cn.menu.main]]
+      weight = 3
+      identifier = "categories"
+      pre = ""
+      post = ""
+      name = "分类"
+      url = "/categories/"
+      title = ""
+
+  [languages.fr]
+    weight = 3
+    title = "Mon nouveau site Hugo"
+    languageCode = "fr"
+    languageName = "Français"
+    [[languages.fr.menu.main]]
+      weight = 1
+      identifier = "posts"
+      pre = ""
+      post = ""
+      name = "Postes"
+      url = "/posts/"
+      title = ""
+    [[languages.fr.menu.main]]
+      weight = 2
+      identifier = "tags"
+      pre = ""
+      post = ""
+      name = "Balises"
+      url = "/tags/"
+      title = ""
+    [[languages.fr.menu.main]]
+      weight = 3
+      identifier = "categories"
+      name = "Catégories"
+      pre = ""
+      post = ""
+      url = "/categories/"
+      title = ""
+```
+
+Then, for each new page, append the language code to the file name.
+
+Single file `my-page.md` is split in three files:
+
+* in English: `my-page.en.md`
+* in Chinese: `my-page.zh-cn.md`
+* in French: `my-page.fr.md`
+
+{{< admonition >}}
+Be aware that only translated pages are displayed in menu. It’s not replaced with default language content.
+{{< /admonition >}}
+
+{{< admonition tip >}}
+Use [Front Matter parameter](https://gohugo.io/content-management/multilingual#translate-your-content) to translate urls too.
+{{< /admonition >}}
+
+### 4.3 Overwrite Translation Strings
+
+Translations strings are used for common default values used in the theme. Translations are available in [some languages](#language-compatibility), but you may use another language or want to override default values.
+
+To override these values, create a new file in your local i18n folder `i18n/<languageCode>.toml` and inspire yourself from `themes/KeepIt/i18n/en.toml`.
+
+By the way, as these translations could be used by other people, please take the time to propose a translation by [:(fas fa-code-branch fa-fw): making a PR](https://github.com/Fastbyte01/KeepIt/pulls) to the theme!
+
+## 5 Search
+
+{{< version 0.2.0 >}}
+
+Based on [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/), searching is supported in **KeepIt** theme.
+
+### 5.1 Output Configuration
+
+In order to generate `index.json` for searching, add `JSON` output file type to the `home` of the `outputs` part in your [site configuration](#site-configuration).
+
+```toml
+[outputs]
+  home = ["HTML", "RSS", "JSON"]
+```
+
+### 5.2 Search Configuration
+
+Based on `index.json` generated by Hugo, you could activate searching.
+
+Here is the search configuration in your [site configuration](#site-configuration):
+
+```toml
+[params.search]
+  enable = true
+  # type of search engine ["lunr", "algolia"]
+  type = "lunr"
+  # max index length of the chunked content
+  contentLength = 4000
+  # placeholder of the search bar
+  placeholder = ""
+  # {{< version 0.2.1 >}} max number of results length
+  maxResultLength = 10
+  # {{< version 0.2.3 >}} snippet length of the result
+  snippetLength = 30
+  # {{< version 0.2.1 >}} HTML tag name of the highlight part in results
+  highlightTag = "em"
+  # {{< version 0.2.4 >}} whether to use the absolute URL based on the baseURL in search index
+  absoluteURL = false
+  [params.search.algolia]
+    index = ""
+    appID = ""
+    searchKey = ""
+```
+
+{{< admonition note "How to choose search engine?" >}}
+The following is a comparison of two search engines:
+
+* `lunr`: simple, no need to synchronize `index.json`, no limit for `contentLength`,
+  but high bandwidth and low performance (Especially for Chinese which needs a large segmentit library)
+* `algolia`: high performance and low bandwidth, but need to synchronize `index.json` and limit for `contentLength`
+
+{{< version 0.2.3 >}} The content of the post is separated by `h2` and `h3` HTML tag to improve query performance and basically implement full-text search.
+`contentLength` is used to limit the max index length of the part starting with `h2` and `h3` HTML tag.
+{{< /admonition >}}
+
+{{< admonition tip "Tips about algolia" >}}
+You need to upload `index.json` files to algolia to activate searching.
+You could upload the `index.json` files by browsers but a CLI tool may be better.
+The official [Algolia CLI](https://github.com/algolia/algolia-cli) is a good choice.
+To be compatible with Hugo multilingual mode,
+you need to upload different `index.json` for each language to the different index of algolia, such as `zh-cn/index.json` or `fr/index.json`...
+{{< /admonition >}}
diff --git a/content/posts/theme-documentation-basics/language-switch.gif b/content/posts/theme-documentation-basics/language-switch.gif
new file mode 100644
index 00000000..37066df5
Binary files /dev/null and b/content/posts/theme-documentation-basics/language-switch.gif differ
diff --git a/content/posts/theme-documentation-bilibili-shortcode/featured-image.jpg b/content/posts/theme-documentation-bilibili-shortcode/featured-image.jpg
new file mode 100644
index 00000000..90dbcb0f
Binary files /dev/null and b/content/posts/theme-documentation-bilibili-shortcode/featured-image.jpg differ
diff --git a/content/posts/theme-documentation-bilibili-shortcode/index.en.md b/content/posts/theme-documentation-bilibili-shortcode/index.en.md
new file mode 100644
index 00000000..5668e09e
--- /dev/null
+++ b/content/posts/theme-documentation-bilibili-shortcode/index.en.md
@@ -0,0 +1,65 @@
+---
+weight: 9
+title: "Theme Documentation - bilibili Shortcode"
+date: 2020-03-03T11:29:41+08:00
+lastmod: 2020-03-03T12:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The bilibili shortcode embeds a responsive video player for bilibili videos."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+  enable: false
+---
+
+{{< version 0.2.0 changed >}}
+
+The `bilibili` shortcode embeds a responsive video player for bilibili videos.
+
+<!--more-->
+
+When the video only has one part, only the BV `id` of the video is required, e.g.:
+
+```code
+https://www.bilibili.com/video/BV1Sx411T7QQ
+```
+
+Example `bilibili` input:
+
+```markdown
+{{</* bilibili BV1Sx411T7QQ */>}}
+Or
+{{</* bilibili id=BV1Sx411T7QQ */>}}
+```
+
+The rendered output looks like this:
+
+{{< bilibili id=BV1Sx411T7QQ >}}
+
+When the video has multiple parts, in addition to the BV `id` of the video,
+`p` is also required, whose default value is `1`, e.g.:
+
+```code
+https://www.bilibili.com/video/BV1TJ411C7An?p=3
+```
+
+Example `bilibili` input with `p`:
+
+```markdown
+{{</* bilibili BV1TJ411C7An 3 */>}}
+Or
+{{</* bilibili id=BV1TJ411C7An p=3 */>}}
+```
+
+The rendered output looks like this:
+
+{{< bilibili id=BV1TJ411C7An p=3 >}}
diff --git a/content/posts/theme-documentation-built-in-shortcodes/featured-image.png b/content/posts/theme-documentation-built-in-shortcodes/featured-image.png
new file mode 100644
index 00000000..2824a7ff
Binary files /dev/null and b/content/posts/theme-documentation-built-in-shortcodes/featured-image.png differ
diff --git a/content/posts/theme-documentation-built-in-shortcodes/index.en.md b/content/posts/theme-documentation-built-in-shortcodes/index.en.md
new file mode 100644
index 00000000..a94d81e9
--- /dev/null
+++ b/content/posts/theme-documentation-built-in-shortcodes/index.en.md
@@ -0,0 +1,179 @@
+---
+weight: 3
+title: "Theme Documentation - Built-in Shortcodes"
+date: 2020-03-04T16:29:41+08:00
+lastmod: 2020-03-04T16:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+lightgallery: true
+---
+
+**Hugo** provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.
+
+<!--more-->
+
+Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
+
+But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
+
+To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
+A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
+
+Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
+
+## 1 figure {#figure}
+
+[Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)
+
+Example `figure` input:
+
+```markdown
+{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
+```
+
+The rendered output looks like this:
+
+{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
+
+The HTML looks like this:
+
+```html
+<figure>
+    <img src="/images/lighthouse.jpg"/>
+    <figcaption>
+        <h4>Lighthouse (figure)</h4>
+    </figcaption>
+</figure>
+```
+
+## 2 gist
+
+[Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)
+
+Example `gist` input:
+
+```markdown
+{{</* gist spf13 7896402 */>}}
+```
+
+The rendered output looks like this:
+
+{{< gist spf13 7896402 >}}
+
+The HTML looks like this:
+
+```html
+<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
+```
+
+## 3 highlight
+
+[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)
+
+Example `highlight` input:
+
+```markdown
+{{</* highlight html */>}}
+<section id="main">
+    <div>
+        <h1 id="title">{{ .Title }}</h1>
+        {{ range .Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+    </div>
+</section>
+{{</* /highlight */>}}
+```
+
+The rendered output looks like this:
+
+{{< highlight html >}}
+<section id="main">
+    <div>
+        <h1 id="title">{{ .Title }}</h1>
+        {{ range .Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+    </div>
+</section>
+{{< /highlight >}}
+
+## 4 instagram
+
+[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)
+
+{{< admonition question "Instagram’s API was deprecated since October 24th, 2020" >}}
+The instagram-shortcode refers an endpoint of Instagram’s API, that’s deprecated since October 24th, 2020.
+Thus, no images can be fetched from this API endpoint, resulting in an error when the instagram-shortcode is used.
+For more information please have a look at GitHub issue [#7879](https://github.com/gohugoio/hugo/issues/7879).
+{{< /admonition >}}
+
+## 5 param
+
+[Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)
+
+Example `param` input:
+
+```markdown
+{{</* param description */>}}
+```
+
+The rendered output looks like this:
+
+{{< param description >}}
+
+## 6 ref and relref {#ref-and-relref}
+
+[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)
+
+## 7 tweet
+
+[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)
+
+Example `tweet` input:
+
+```markdown
+{{</* tweet 917359331535966209 */>}}
+```
+
+The rendered output looks like this:
+
+{{< tweet 917359331535966209 >}}
+
+## 8 vimeo
+
+[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)
+
+Example `vimeo` input:
+
+```markdown
+{{</* vimeo 146022717 */>}}
+```
+
+The rendered output looks like this:
+
+{{< vimeo 146022717 >}}
+
+## 9 youtube
+
+[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)
+
+Example `youtube` input:
+
+```markdown
+{{</* youtube w7Ft2ymGmfc */>}}
+```
+
+The rendered output looks like this:
+
+{{< youtube w7Ft2ymGmfc >}}
diff --git a/content/posts/theme-documentation-content/featured-image.jpg b/content/posts/theme-documentation-content/featured-image.jpg
new file mode 100644
index 00000000..102e1844
Binary files /dev/null and b/content/posts/theme-documentation-content/featured-image.jpg differ
diff --git a/content/posts/theme-documentation-content/index.en.md b/content/posts/theme-documentation-content/index.en.md
new file mode 100644
index 00000000..331600b7
--- /dev/null
+++ b/content/posts/theme-documentation-content/index.en.md
@@ -0,0 +1,518 @@
+---
+weight: 2
+title: "Theme Documentation - Content"
+date: 2020-03-05T15:58:26+08:00
+lastmod: 2020-03-05T15:58:26+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "Find out how to create and organize your content quickly and intuitively in KeepIt theme."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+
+tags: ["content", "Markdown"]
+categories: ["documentation"]
+
+lightgallery: true
+
+toc:
+  auto: false
+math:
+  enable: true
+---
+
+Find out how to create and organize your content quickly and intuitively in **KeepIt** theme.
+
+<!--more-->
+
+## 1 Contents Organization {#contents-organization}
+
+A few suggestions to help you get a good looking site quickly:
+
+* Keep post pages in the `content/posts` directory, for example: `content/posts/my-first-post.md`
+* Keep other pages in the `content` directory, for example: `content/about.md`
+* Local resources organization
+
+{{< admonition note "Local Resource Reference" >}}
+{{< version 0.2.10 >}}
+
+There are three ways to reference local resources such as **images** and **music**:
+
+1. Using [page resources](https://gohugo.io/content-management/page-resources/) in [page bundles](https://gohugo.io/content-management/page-bundles/).
+   You can reference page resources by the value for `Resources.GetMatch` or the filepath of the resource relative to the page directory directly.
+2. Store resources in the **assets** directory, which is `/assets` by default.
+   The filepath of the resource to reference in the post is relative to the assets directory.
+3. Store resources in the **static** directory, which is `/static` by default.
+   The filepath of the resource to reference in the post is relative to the static directory.
+
+The **priority** of references is also in the above order.
+
+There are many places in the theme where the above local resource references can be used,
+such as **links**, **images**, `image` shortcode, `music` shortcode and some params in the **front matter**.
+
+Images in page resources or assets directory [processing](https://gohugo.io/content-management/image-processing/)
+will be supported in the future.
+It's really cool! :(far fa-grin-squint fa-fw):
+{{< /admonition >}}
+
+## 2 Front Matter {#front-matter}
+
+**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
+
+{{< admonition >}}
+**Not all** of the below front matters need to be set in each of your posts.
+It is necessary only if the front matters and the `page` part in your [site configuration](../theme-documentation-basics#site-configuration) are inconsistent.
+{{< /admonition >}}
+
+Here is a front matter example:
+
+```yaml
+---
+title: "My First Post"
+subtitle: ""
+date: 2020-03-04T15:58:26+08:00
+lastmod: 2020-03-04T15:58:26+08:00
+draft: true
+author: ""
+authorLink: ""
+description: ""
+license: ""
+images: []
+
+tags: []
+categories: []
+
+featuredImage: ""
+featuredImagePreview: ""
+
+hiddenFromHomePage: false
+hiddenFromSearch: false
+twemoji: false
+lightgallery: true
+ruby: true
+fraction: true
+fontawesome: true
+linkToMarkdown: true
+rssFullText: false
+
+toc:
+  enable: true
+  auto: true
+code:
+  copy: true
+  maxShownLines: 50
+math:
+  enable: false
+  # ...
+mapbox:
+  # ...
+share:
+  enable: true
+  # ...
+comment:
+  enable: true
+  # ...
+library:
+  css:
+    # someCSS = "some.css"
+    # located in "assets/"
+    # Or
+    # someCSS = "https://cdn.example.com/some.css"
+  js:
+    # someJS = "some.js"
+    # located in "assets/"
+    # Or
+    # someJS = "https://cdn.example.com/some.js"
+seo:
+  images: []
+  # ...
+---
+```
+
+* **title**: the title for the content.
+* **subtitle**: {{< version 0.2.0 >}} the subtitle for the content.
+* **date**: the datetime assigned to this page, which is usually fetched from the `date` field in front matter, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics#site-configuration).
+* **lastmod**: the datetime at which the content was last modified.
+* **draft**: if `true`, the content will not be rendered unless the `--buildDrafts`/`-D` flag is passed to the `hugo` command.
+* **author**: the author for the content.
+* **authorLink**: the link of the author.
+* **description**: the description for the content.
+* **license**: the special lisence for this content.
+* **images**: page images for Open Graph and Twitter Cards.
+
+* **tags**: the tags for the content.
+* **categories**: the categories for the content.
+
+* **featuredImage**: the featured image for the content.
+* **featuredImagePreview**: the featured image for the content preview in the home page.
+
+* **hiddenFromHomePage**: if `true`, the content will not be shown in the home page.
+* **hiddenFromSearch**: {{< version 0.2.0 >}} if `true`, the content will not be shown in the search results.
+* **twemoji**: {{< version 0.2.0 >}} if `true`, the content will enable the twemoji.
+* **lightgallery**: if `true`, images in the content will be shown as the gallery.
+* **ruby**: {{< version 0.2.0 >}} if `true`, the content will enable the [ruby extended syntax](#ruby).
+* **fraction**: {{< version 0.2.0 >}} if `true`, the content will enable the [fraction extended syntax](#fraction).
+* **fontawesome**: {{< version 0.2.0 >}} if `true`, the content will enable the [Font Awesome extended syntax](#fontawesome).
+* **linkToMarkdown**: if `true`, the footer of the content will be shown the link to the orignal Markdown file.
+* **rssFullText**: {{< version 0.2.4 >}} if `true`, the full text content will be shown in RSS.
+
+* **toc**: {{< version 0.2.9 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **share**: the same as the `params.page.share` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **library**: {{< version 0.2.7 >}} the same as the `params.page.library` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **seo**: {{< version 0.2.10 >}} the same as the `params.page.seo` part in the [site configuration](../theme-documentation-basics#site-configuration).
+
+{{< admonition tip >}}
+{{< version 0.2.10 >}}
+
+**featuredImage** and **featuredImagePreview** support the complete usage of [local resource references](#contents-organization).
+
+If the page resource with `name: featured-image` or `name: featured-image-preview` is set in the front matter,
+it is not necessary to set the parameter `featuredImage` or `featuredImagePreview`:
+
+```yaml
+resources:
+- name: featured-image
+  src: featured-image.jpg
+- name: featured-image-preview
+  src: featured-image-preview.jpg
+```
+{{< /admonition >}}
+
+## 3 Content Summaries
+
+**KeepIt** theme uses the summary of the content to display abstract information in the home page. Hugo can generate summaries of your content.
+
+![Summary Preview](summary.png "Summary Preview")
+
+### Automatic Summary Splitting
+
+By default, Hugo automatically takes the first 70 words of your content as its summary.
+
+You may customize the summary length by setting `summaryLength` in the [site configuration](../theme-documentation-basics#site-configuration).
+
+If you are creating content in a [CJK]^(Chinese/Japanese/Korean) language and want to use Hugo’s automatic summary splitting, set `hasCJKLanguage` to `true` in your [site configuration](../theme-documentation-basics#site-configuration).
+
+### Manual Summary Splitting
+
+Alternatively, you may add the `<!--more-->` summary divider where you want to split the article.
+
+Content that comes before the summary divider will be used as that content’s summary.
+
+{{< admonition >}}
+Be careful to enter `<!--more-->` exactly; i.e., all lowercase and with no whitespace.
+{{< /admonition >}}
+
+### Front Matter Summary
+
+You might want your summary to be something other than the text that starts the article. In this case you can provide a separate summary in the `summary` variable of the article front matter.
+
+### Use Description as Summary
+
+You might want your description in the `description` variable of the article front matter as the summary.
+
+You may add the `<!--more-->` summary divider at the start of the article. Keep content that comes before the summary divider empty. Then **KeepIt** theme will use your description as the summary.
+
+### Priority Order of Summary Selection
+
+Because there are multiple ways in which a summary can be specified it is useful to understand the order. It is as follows:
+
+1. If there is a `<!--more-->` summary divider present in the article but no content is before the divider, the description will be used as the summary.
+2. If there is a `<!--more-->` summary divider present in the article the text up to the divider will be provided as per the manual summary split method.
+3. If there is a summary variable in the article front matter the value of the variable will be provided as per the front matter summary method.
+4. The text at the start of the article will be provided as per the automatic summary split method.
+
+{{< admonition >}}
+It is not recommended to include rich text block elements in the summary, which will cause typographic errors. Such as code blocks, pictures, tables, etc.
+{{< /admonition >}}
+
+## 4 Basic Markdown Syntax
+
+This part is shown in the [basic markdown syntax page](../basic-markdown-syntax/).
+
+## 5 Extended Markdown Syntax {#extended-markdown-syntax}
+
+**KeepIt** theme has some extended syntax elements for you to write articles.
+
+### Emoji Support
+
+This part is shown in the [emoji support page](../emoji-support/).
+
+### Mathematical Formula
+
+{{< version 0.2.11 changed >}}
+
+**KeepIt** theme supports mathematical formulas based on [$\KaTeX$](https://katex.org/).
+
+Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration)
+and the property `math: true` of the article front matter to enable the automatic rendering of mathematical formulas.
+**$\KaTeX$** automatically renders formulas based on **specific delimiters**.
+
+{{< admonition tip >}}
+Here is a list of [$\TeX$ functions supported by $\KaTeX$](https://katex.org/docs/supported.html).
+{{< /admonition >}}
+
+{{< admonition >}}
+Since Hugo generates HTML documents according to the syntax such as `_`/`*`/`>>` when rendering Markdown documents,
+and some text content in the form of escape characters
+(such as `\(`/`\)`/`\[`/`\]`/`\\`) escape processing will be performed automatically,
+therefore, additional escape character expressions are required for these places to achieve automatic rendering:
+
+* `_` -> `\_`
+* `*` -> `\*`
+* `>>` -> `\>>`
+* `\(` -> `\\(`
+* `\)` -> `\\)`
+* `\[` -> `\\[`
+* `\]` -> `\\]`
+* `\\` -> `\\\\`
+
+**KeepIt** theme supports [`raw` shortcode](../theme-documentation-extended-shortcodes#12-raw) to avoid these escape characters,
+which helps you write raw mathematical formula content.
+
+Example `raw` input:
+
+```markdown
+Inline Formula: {{</* raw */>}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{</* /raw */>}}
+
+Block Formula:
+
+{{</* raw */>}}
+\[ a=b+c \\ d+e=f \]
+{{</* /raw */>}}
+```
+
+The rendered output looks like this:
+
+Inline Formula: {{< raw >}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}
+
+Block Formula:
+
+{{< raw>}}
+\[ a=b+c \\ d+e=f \]
+{{< /raw >}}
+{{< /admonition >}}
+
+#### Inline Formula
+
+The default inline delimiters are:
+
+* `$ ... $`
+* `\( ... \)` (escaped: `\\( ... \\)`)
+
+For example:
+
+```tex
+$c = \pm\sqrt{a^2 + b^2}$ and \\(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\\)
+```
+
+The rendered output looks like this:
+
+$c = \pm\sqrt{a^2 + b^2}$ and \\(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\\)
+
+#### Block Formula
+
+The default block delimiters are:
+
+* `$$ ... $$`
+* `\[ ... \]` (escaped: `\\[ ... \\]`)
+* `\begin{equation} ... \end{equation}` (unnumbered: `\begin{equation*} ... \end{equation*}`)
+* `\begin{align} ... \end{align}` (unnumbered: `\begin{align*} ... \end{align*}`)
+* `\begin{alignat} ... \end{alignat}` (unnumbered: `\begin{alignat*} ... \end{alignat*}`)
+* `\begin{gather} ... \end{gather}` (unnumbered: `\begin{gather*} ... \end{gather*}`)
+* `\begin{CD} ... \end{CD}`
+
+For example:
+
+```tex
+$$ c = \pm\sqrt{a^2 + b^2} $$
+
+\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
+
+\begin{equation*}
+  \rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
+\end{equation*}
+
+\begin{equation}
+  \mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
+\end{equation}
+
+\begin{align}
+  a&=b+c \\\\
+  d+e&=f
+\end{align}
+
+\begin{alignat}{2}
+   10&x+&3&y = 2 \\\\
+   3&x+&13&y = 4
+\end{alignat}
+
+\begin{gather}
+   a=b \\\\
+   e=b+c
+\end{gather}
+
+\begin{CD}
+   A @>a\>> B \\\\
+@VbVV @AAcA \\\\
+   C @= D
+\end{CD}
+```
+
+The rendered output looks like this:
+
+$$ c = \pm\sqrt{a^2 + b^2} $$
+
+\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
+
+\begin{equation*}
+  \rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
+\end{equation*}
+
+\begin{equation}
+  \mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
+\end{equation}
+
+\begin{align}
+  a&=b+c \\\\
+  d+e&=f
+\end{align}
+
+\begin{alignat}{2}
+   10&x+&3&y = 2 \\\\
+   3&x+&13&y = 4
+\end{alignat}
+
+\begin{gather}
+   a=b \\\\
+   e=b+c
+\end{gather}
+
+\begin{CD}
+   A @>a\>> B \\\\
+@VbVV @AAcA \\\\
+   C @= D
+\end{CD}
+
+{{< admonition tip >}}
+You can add more inline and block delimiters in your [site configuration](../theme-documentation-basics#site-configuration).
+{{< /admonition >}}
+
+#### Copy-tex
+
+**[Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex)** is an extension for **$\KaTeX$**.
+
+By the extension, when selecting and copying $\KaTeX$ rendered elements, copies their $\LaTeX$ source to the clipboard.
+
+Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable Copy-tex.
+
+Select and copy the formula rendered in the previous section, and you can find that the copied content is the $\LaTeX$ source code.
+
+#### mhchem
+
+**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** is an extension for **$\KaTeX$**.
+
+By the extension, you can write beautiful chemical equations easily in the article.
+
+Set the property `mhchem = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable mhchem.
+
+```markdown
+$$ \ce{CO2 + C -> 2 CO} $$
+
+$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
+```
+
+The rendered output looks like this:
+
+$$ \ce{CO2 + C -> 2 CO} $$
+
+$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
+
+### Ruby Annotation {#ruby}
+
+An extended Markdown syntax for **ruby annotation** is supported in **KeepIt** theme:
+
+```markdown
+[Hugo]{?^}(An open-source static site generator)
+```
+
+The rendered output looks like this:
+
+[Hugo]^(An open-source static site generator)
+
+### Fraction {#fraction}
+
+{{< version 0.2.0 >}}
+
+An extended Markdown syntax for **fraction** is supported in **KeepIt** theme:
+
+```markdown
+[Light]{?/}[Dark]
+
+[99]{?/}[100]
+```
+
+The rendered output looks like this:
+
+[Light]/[Dark]
+
+[90]/[100]
+
+### Font Awesome {#fontawesome}
+
+**KeepIt** theme uses [Font Awesome](https://fontawesome.com/) as the icon library.
+You can easily use these icons in your articles.
+
+Get the `class` of icons you wanted from the [Font Awesome website](https://fontawesome.com/icons?d=gallery).
+
+```markdown
+Gone camping! {?:}(fas fa-campground fa-fw): Be back soon.
+
+That is so funny! {?:}(far fa-grin-tears):
+```
+
+The rendered output looks like this:
+
+Gone camping! :(fas fa-campground fa-fw): Be back soon.
+
+That is so funny! :(far fa-grin-tears):
+
+### Escape character {#escape-character}
+
+In some special cases (when writing this theme documentation :(far fa-grin-squint-tears):),
+your content will conflict with basic or extended Markdown syntax, and it is inevitable.
+
+The escape character syntax can help you build the content you wanted:
+
+```markdown
+{{??}X} -> X
+```
+
+For example, two `:` will enable emoji syntax, which is not the behavior you want. The escape character syntax is like this:
+
+```markdown
+{{??}:}joy:
+```
+
+The rendered output looks like this:
+
+**{?:}joy{?:}** instead of **:joy:**
+
+{{< admonition tip >}}
+This is related to **[an issue for Hugo](https://github.com/gohugoio/hugo/issues/4978)**, which has not been resolved.
+{{< /admonition >}}
+
+Another example is:
+
+```markdown
+[link{{??}]}(#escape-character)
+```
+
+The rendered output looks like this:
+
+**[link{?]}(#escape-character)** instead of **[link](#escape-character)**.
diff --git a/content/posts/theme-documentation-content/summary.png b/content/posts/theme-documentation-content/summary.png
new file mode 100644
index 00000000..92c5cb43
Binary files /dev/null and b/content/posts/theme-documentation-content/summary.png differ
diff --git a/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg b/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg
new file mode 100644
index 00000000..5554bc16
Binary files /dev/null and b/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg differ
diff --git a/content/posts/theme-documentation-echarts-shortcode/index.en.md b/content/posts/theme-documentation-echarts-shortcode/index.en.md
new file mode 100644
index 00000000..40d28519
--- /dev/null
+++ b/content/posts/theme-documentation-echarts-shortcode/index.en.md
@@ -0,0 +1,414 @@
+---
+weight: 6
+title: "Theme Documentation - echarts Shortcode"
+date: 2020-03-03T14:29:41+08:00
+lastmod: 2020-03-03T14:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The echarts shortcode supports data visualization in Hugo with ECharts library."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+  enable: false
+code:
+  maxShownLines: 70
+---
+
+The `echarts` shortcode supports data visualization in Hugo with [ECharts](https://echarts.apache.org/) library.
+
+<!--more-->
+
+**ECharts** is a library helping you to generate interactive data visualization.
+
+The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts.
+
+Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it.
+
+Example `echarts` input in `JSON` format:
+
+```json
+{{</* echarts */>}}
+{
+  "title": {
+    "text": "Summary Line Chart",
+    "top": "2%",
+    "left": "center"
+  },
+  "tooltip": {
+    "trigger": "axis"
+  },
+  "legend": {
+    "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
+    "top": "10%"
+  },
+  "grid": {
+    "left": "5%",
+    "right": "5%",
+    "bottom": "5%",
+    "top": "20%",
+    "containLabel": true
+  },
+  "toolbox": {
+    "feature": {
+      "saveAsImage": {
+        "title": "Save as Image"
+      }
+    }
+  },
+  "xAxis": {
+    "type": "category",
+    "boundaryGap": false,
+    "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+  },
+  "yAxis": {
+    "type": "value"
+  },
+  "series": [
+    {
+      "name": "Email Marketing",
+      "type": "line",
+      "stack": "Total",
+      "data": [120, 132, 101, 134, 90, 230, 210]
+    },
+    {
+      "name": "Affiliate Advertising",
+      "type": "line",
+      "stack": "Total",
+      "data": [220, 182, 191, 234, 290, 330, 310]
+    },
+    {
+      "name": "Video Advertising",
+      "type": "line",
+      "stack": "Total",
+      "data": [150, 232, 201, 154, 190, 330, 410]
+    },
+    {
+      "name": "Direct View",
+      "type": "line",
+      "stack": "Total",
+      "data": [320, 332, 301, 334, 390, 330, 320]
+    },
+    {
+      "name": "Search Engine",
+      "type": "line",
+      "stack": "Total",
+      "data": [820, 932, 901, 934, 1290, 1330, 1320]
+    }
+  ]
+}
+{{</* /echarts */>}}
+```
+
+The same in `YAML` format:
+
+```yaml
+{{</* echarts */>}}
+title:
+    text: Summary Line Chart
+    top: 2%
+    left: center
+tooltip:
+    trigger: axis
+legend:
+    data:
+        - Email Marketing
+        - Affiliate Advertising
+        - Video Advertising
+        - Direct View
+        - Search Engine
+    top: 10%
+grid:
+    left: 5%
+    right: 5%
+    bottom: 5%
+    top: 20%
+    containLabel: true
+toolbox:
+    feature:
+        saveAsImage:
+            title: Save as Image
+xAxis:
+    type: category
+    boundaryGap: false
+    data:
+        - Monday
+        - Tuesday
+        - Wednesday
+        - Thursday
+        - Friday
+        - Saturday
+        - Sunday
+yAxis:
+    type: value
+series:
+    - name: Email Marketing
+      type: line
+      stack: Total
+      data:
+          - 120
+          - 132
+          - 101
+          - 134
+          - 90
+          - 230
+          - 210
+    - name: Affiliate Advertising
+      type: line
+      stack: Total
+      data:
+          - 220
+          - 182
+          - 191
+          - 234
+          - 290
+          - 330
+          - 310
+    - name: Video Advertising
+      type: line
+      stack: Total
+      data:
+          - 150
+          - 232
+          - 201
+          - 154
+          - 190
+          - 330
+          - 410
+    - name: Direct View
+      type: line
+      stack: Total
+      data:
+          - 320
+          - 332
+          - 301
+          - 334
+          - 390
+          - 330
+          - 320
+    - name: Search Engine
+      type: line
+      stack: Total
+      data:
+          - 820
+          - 932
+          - 901
+          - 934
+          - 1290
+          - 1330
+          - 1320
+{{</* /echarts */>}}
+```
+
+The same in `TOML` format:
+
+```toml
+{{</* echarts */>}}
+[title]
+text = "Summary Line Chart"
+top = "2%"
+left = "center"
+
+[tooltip]
+trigger = "axis"
+
+[legend]
+data = [
+  "Email Marketing",
+  "Affiliate Advertising",
+  "Video Advertising",
+  "Direct View",
+  "Search Engine"
+]
+top = "10%"
+
+[grid]
+left = "5%"
+right = "5%"
+bottom = "5%"
+top = "20%"
+containLabel = true
+
+[toolbox]
+[toolbox.feature]
+[toolbox.feature.saveAsImage]
+title = "Save as Image"
+
+[xAxis]
+type = "category"
+boundaryGap = false
+data = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday"
+]
+
+[yAxis]
+type = "value"
+
+[[series]]
+name = "Email Marketing"
+type = "line"
+stack = "Total"
+data = [
+  120.0,
+  132.0,
+  101.0,
+  134.0,
+  90.0,
+  230.0,
+  210.0
+]
+
+[[series]]
+name = "Affiliate Advertising"
+type = "line"
+stack = "Total"
+data = [
+  220.0,
+  182.0,
+  191.0,
+  234.0,
+  290.0,
+  330.0,
+  310.0
+]
+
+[[series]]
+name = "Video Advertising"
+type = "line"
+stack = "Total"
+data = [
+  150.0,
+  232.0,
+  201.0,
+  154.0,
+  190.0,
+  330.0,
+  410.0
+]
+
+[[series]]
+name = "Direct View"
+type = "line"
+stack = "Total"
+data = [
+  320.0,
+  332.0,
+  301.0,
+  334.0,
+  390.0,
+  330.0,
+  320.0
+]
+
+[[series]]
+name = "Search Engine"
+type = "line"
+stack = "Total"
+data = [
+  820.0,
+  932.0,
+  901.0,
+  934.0,
+  1290.0,
+  1330.0,
+  1320.0
+]
+{{</* /echarts */>}}
+```
+
+The rendered output looks like this:
+
+{{< echarts >}}
+{
+  "title": {
+    "text": "Summary Line Chart",
+    "top": "2%",
+    "left": "center"
+  },
+  "tooltip": {
+    "trigger": "axis"
+  },
+  "legend": {
+    "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
+    "top": "10%"
+  },
+  "grid": {
+    "left": "5%",
+    "right": "5%",
+    "bottom": "5%",
+    "top": "20%",
+    "containLabel": true
+  },
+  "toolbox": {
+    "feature": {
+      "saveAsImage": {
+        "title": "Save as Image"
+      }
+    }
+  },
+  "xAxis": {
+    "type": "category",
+    "boundaryGap": false,
+    "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+  },
+  "yAxis": {
+    "type": "value"
+  },
+  "series": [
+    {
+      "name": "Email Marketing",
+      "type": "line",
+      "stack": "Total",
+      "data": [120, 132, 101, 134, 90, 230, 210]
+    },
+    {
+      "name": "Affiliate Advertising",
+      "type": "line",
+      "stack": "Total",
+      "data": [220, 182, 191, 234, 290, 330, 310]
+    },
+    {
+      "name": "Video Advertising",
+      "type": "line",
+      "stack": "Total",
+      "data": [150, 232, 201, 154, 190, 330, 410]
+    },
+    {
+      "name": "Direct View",
+      "type": "line",
+      "stack": "Total",
+      "data": [320, 332, 301, 334, 390, 330, 320]
+    },
+    {
+      "name": "Search Engine",
+      "type": "line",
+      "stack": "Total",
+      "data": [820, 932, 901, 934, 1290, 1330, 1320]
+    }
+  ]
+}
+{{< /echarts >}}
+
+The `echarts` shortcode has also the following named parameters:
+
+* **width** *[optional]* (**first** positional parameter)
+
+    {{< version 0.2.0 >}} Width of the data visualization, default value is `100%`.
+
+* **height** *[optional]* (**second** positional parameter)
+
+    {{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
diff --git a/content/posts/theme-documentation-extended-shortcodes/featured-image-preview.jpg b/content/posts/theme-documentation-extended-shortcodes/featured-image-preview.jpg
new file mode 100644
index 00000000..bf079c8f
Binary files /dev/null and b/content/posts/theme-documentation-extended-shortcodes/featured-image-preview.jpg differ
diff --git a/content/posts/theme-documentation-extended-shortcodes/featured-image.jpg b/content/posts/theme-documentation-extended-shortcodes/featured-image.jpg
new file mode 100644
index 00000000..5fa13831
Binary files /dev/null and b/content/posts/theme-documentation-extended-shortcodes/featured-image.jpg differ
diff --git a/content/posts/theme-documentation-extended-shortcodes/index.en.md b/content/posts/theme-documentation-extended-shortcodes/index.en.md
new file mode 100644
index 00000000..7e8b7659
--- /dev/null
+++ b/content/posts/theme-documentation-extended-shortcodes/index.en.md
@@ -0,0 +1,377 @@
+---
+weight: 4
+title: "Theme Documentation - Extended Shortcodes"
+date: 2020-03-03T16:29:41+08:00
+lastmod: 2020-03-03T16:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "KeepIt theme provides multiple shortcodes on top of built-in ones in Hugo."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+- name: "featured-image-preview"
+  src: "featured-image-preview.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+lightgallery: true
+
+math:
+  enable: true
+---
+
+**KeepIt** theme provides multiple shortcodes on top of built-in ones in Hugo.
+
+<!--more-->
+
+## 1 style
+
+{{< version 0.2.0 changed >}}
+
+{{< admonition >}}
+Hugo **extended** version is necessary for `style` shortcode.
+{{< /admonition >}}
+
+`style` is a shortcode to insert custom style in your post.
+
+The `style` shortcode has two positional parameters.
+
+The **first** one is the custom style content,
+which supports nesting syntax in [:(fab fa-sass fa-fw): SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
+and `&` referring to this parent HTML element.
+
+And the **second** one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is `div`.
+
+Example `style` input:
+
+```markdown
+{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
+This is a **right-aligned** paragraph.
+{{</* /style */>}}
+```
+
+The rendered output looks like this:
+
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
+{{< /style >}}
+
+## 2 link
+
+{{< version 0.2.0 >}}
+
+`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax#links). `link` shortcode can provide some other features and can be used in code blocks.
+
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
+The `link` shortcode has the following named parameters:
+
+* **href** *[required]* (**first** positional parameter)
+
+    Destination of the link.
+
+* **content** *[optional]* (**second** positional parameter)
+
+    Content of the link, default value is the value of **href** parameter.
+
+    *Markdown or HTML format is supported.*
+
+* **title** *[optional]* (**third** positional parameter)
+
+    `title` attribute of the HTML `a` tag, which will be shown when hovering on the link.
+
+* **class** *[optional]*
+
+    `class` attribute of the HTML `a` tag.
+
+* **rel** *[optional]*
+
+    Additional `rel` attributes of the HTML `a` tag.
+
+Example `link` input:
+
+```markdown
+{{</* link "https://assemble.io" */>}}
+Or
+{{</* link href="https://assemble.io" */>}}
+
+{{</* link "mailto:contact@revolunet.com" */>}}
+Or
+{{</* link href="mailto:contact@revolunet.com" */>}}
+
+{{</* link "https://assemble.io" Assemble */>}}
+Or
+{{</* link href="https://assemble.io" content=Assemble */>}}
+```
+
+The rendered output looks like this:
+
+* {{< link "https://assemble.io" >}}
+* {{< link "mailto:contact@revolunet.com" >}}
+* {{< link "https://assemble.io" Assemble >}}
+
+Example `link` input with a title:
+
+```markdown
+{{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
+Or
+{{</* link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" */>}}
+```
+
+The rendered output looks like this (hover over the link, there should be a tooltip):
+
+{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
+
+## 3 image {#image}
+
+{{< version 0.2.0 changed >}}
+
+`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightGallery](https://github.com/sachinchoolur/lightgallery).
+
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
+The `image` shortcode has the following named parameters:
+
+* **src** *[required]* (**first** positional parameter)
+
+    URL of the image to be displayed.
+
+* **alt** *[optional]* (**second** positional parameter)
+
+    Alternate text for the image if the image cannot be displayed, default value is the value of **src** parameter.
+
+    *Markdown or HTML format is supported.*
+
+* **caption** *[optional]* (**third** positional parameter)
+
+    Image caption.
+
+    *Markdown or HTML format is supported.*
+
+* **title** *[optional]*
+
+    Image title that will be shown when hovering on the image.
+
+* **class** *[optional]*
+
+    `class` attribute of the HTML `figure` tag.
+
+* **src_s** *[optional]*
+
+    URL of the image thumbnail, used for lightgallery, default value is the value of **src** parameter.
+
+* **src_l** *[optional]*
+
+    URL of the HD image, used for lightgallery, default value is the value of **src** parameter.
+
+* **height** *[optional]*
+
+    `height` attribute of the image.
+
+* **width** *[optional]*
+
+    `width` attribute of the image.
+
+* **linked** *[optional]*
+
+    Whether the image needs to be hyperlinked, default value is `true`.
+
+* **rel** *[optional]*
+
+    Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`.
+
+Example `image` input:
+
+```markdown
+{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
+```
+
+The rendered output looks like this:
+
+{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
+
+## 4 admonition
+
+The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
+
+*Markdown or HTML format in the content is supported.*
+
+{{< admonition >}}
+A **note** banner
+{{< /admonition >}}
+
+{{< admonition abstract >}}
+An **abstract** banner
+{{< /admonition >}}
+
+{{< admonition info >}}
+A **info** banner
+{{< /admonition >}}
+
+{{< admonition tip >}}
+A **tip** banner
+{{< /admonition >}}
+
+{{< admonition success >}}
+A **success** banner
+{{< /admonition >}}
+
+{{< admonition question >}}
+A **question** banner
+{{< /admonition >}}
+
+{{< admonition warning >}}
+A **warning** banner
+{{< /admonition >}}
+
+{{< admonition failure >}}
+A **failure** banner
+{{< /admonition >}}
+
+{{< admonition danger >}}
+A **danger** banner
+{{< /admonition >}}
+
+{{< admonition bug >}}
+A **bug** banner
+{{< /admonition >}}
+
+{{< admonition example >}}
+An **example** banner
+{{< /admonition >}}
+
+{{< admonition quote >}}
+A **quote** banner
+{{< /admonition >}}
+
+The `admonition` shortcode has the following named parameters:
+
+* **type** *[optional]* (**first** positional parameter)
+
+    Type of the `admonition` banner, default value is `note`.
+
+* **title** *[optional]* (**second** positional parameter)
+
+    Title of the `admonition` banner, default value is the value of **type** parameter.
+
+* **open** *[optional]* (**third** positional parameter) {{< version 0.2.0 changed >}}
+
+    Whether the content will be expandable by default, default value is `true`.
+
+Example `admonition` input:
+
+```markdown
+{{</* admonition type=tip title="This is a tip" open=false */>}}
+A **tip** banner
+{{</* /admonition */>}}
+Or
+{{</* admonition tip "This is a tip" false */>}}
+A **tip** banner
+{{</* /admonition */>}}
+```
+
+The rendered output looks like this:
+
+{{< admonition tip "This is a tip" false >}}
+A **tip** banner
+{{< /admonition >}}
+
+## 5 mermaid
+
+The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
+
+The full documentation is provided in [Theme Documentation - mermaid Shortcode](../theme-documentation-mermaid-shortcode).
+
+## 6 echarts
+
+The `echarts` shortcode supports data visualization in Hugo with [ECharts](https://echarts.apache.org/) library.
+
+The full documentation is provided in [Theme Documentation - echarts Shortcode](../theme-documentation-echarts-shortcode).
+
+## 7 mapbox
+
+{{< version 0.2.0 >}}
+
+The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
+
+The full documentation is provided in [Theme Documentation - mapbox Shortcode](../theme-documentation-mapbox-shortcode).
+
+## 8 music
+
+The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) library.
+
+The full documentation is provided in [Theme Documentation - music Shortcode](../theme-documentation-music-shortcode).
+
+## 9 bilibili
+
+{{< version 0.2.0 changed >}}
+
+The `bilibili` shortcode embeds a responsive video player for bilibili videos.
+
+The full documentation is provided in [Theme Documentation - bilibili Shortcode](../theme-documentation-bilibili-shortcode).
+
+## 10 typeit
+
+The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/) library.
+
+The full documentation is provided in [Theme Documentation - typeit Shortcode](../theme-documentation-typeit-shortcode).
+
+## 11 script
+
+{{< version 0.2.8 >}}
+
+`script` is a shortcode to insert custom **:(fab fa-js fa-fw): Javascript** in your post.
+
+{{< admonition >}}
+The script content can be guaranteed to be executed in order after all third-party libraries are loaded. So you are free to use third-party libraries.
+{{< /admonition >}}
+
+Example `script` input:
+
+```markdown
+{{</* script */>}}
+console.log('Hello KeepIt!');
+{{</* /script */>}}
+```
+
+You can see the output in the console of the developer tool.
+
+{{< script >}}
+console.log('Hello KeepIt!');
+{{< /script >}}
+
+## 12 raw
+
+{{< version 0.2.11 >}}
+
+`raw` is a shortcode to insert raw **:(fab fa-html5 fa-fw): HTML** content in your post.
+This is useful when you want to include some Markdown content to **avoid being rendered or escaped** by Hugo.
+
+Example `raw` input:
+
+```markdown
+Inline Formula: {{</* raw */>}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{</* /raw */>}}
+
+Block Formula:
+
+{{</* raw */>}}
+\[ a=b+c \\ d+e=f \]
+{{</* /raw */>}}
+
+Raw content using Markdown syntax: {{</* raw */>}}**Hello**{{</* /raw */>}}
+```
+
+The rendered output looks like this:
+
+Inline Formula: {{< raw >}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}
+
+Block Formula:
+
+{{< raw>}}
+\[ a=b+c \\ d+e=f \]
+{{< /raw >}}
+
+Raw content using Markdown syntax: {{< raw >}}**Hello**{{< /raw >}}
diff --git a/content/posts/theme-documentation-mapbox-shortcode/featured-image.jpg b/content/posts/theme-documentation-mapbox-shortcode/featured-image.jpg
new file mode 100644
index 00000000..1e769144
Binary files /dev/null and b/content/posts/theme-documentation-mapbox-shortcode/featured-image.jpg differ
diff --git a/content/posts/theme-documentation-mapbox-shortcode/index.en.md b/content/posts/theme-documentation-mapbox-shortcode/index.en.md
new file mode 100644
index 00000000..6f0aace3
--- /dev/null
+++ b/content/posts/theme-documentation-mapbox-shortcode/index.en.md
@@ -0,0 +1,104 @@
+---
+weight: 7
+title: "Theme Documentation - mapbox Shortcode"
+date: 2020-03-03T13:29:41+08:00
+lastmod: 2020-03-03T13:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+  enable: false
+---
+
+{{< version 0.2.0 >}}
+
+The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
+
+<!--more-->
+
+**Mapbox GL JS** is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
+
+The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
+
+* **lng** *[required]* (**first** positional parameter)
+
+    Longitude of the inital centerpoint of the map, measured in degrees.
+
+* **lat** *[required]* (**second** positional parameter)
+
+    Latitude of the inital centerpoint of the map, measured in degrees.
+
+* **zoom** *[optional]* (**third** positional parameter)
+
+    The initial zoom level of the map, default value is `10`.
+
+* **marked** *[optional]* (**fourth** positional parameter)
+
+    Whether to add a marker at the inital centerpoint of the map, default value is `true`.
+
+* **light-style** *[optional]* (**fifth** positional parameter)
+
+    Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **dark-style** *[optional]* (**sixth** positional parameter)
+
+    Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **navigation** *[optional]*
+
+    Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **geolocate** *[optional]*
+
+    Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **scale** *[optional]*
+
+    Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **fullscreen** *[optional]*
+
+    Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **width** *[optional]*
+
+    Width of the map, default value is `100%`.
+
+* **height** *[optional]*
+
+    Height of the map, default value is `20rem`.
+
+Example simple `mapbox` input:
+
+```markdown
+{{</* mapbox 121.485 31.233 12 */>}}
+Or
+{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox 121.485 31.233 12 >}}
+
+Example `mapbox` input with the custom style:
+
+```markdown
+{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
+Or
+{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
diff --git a/content/posts/theme-documentation-mermaid-shortcode/featured-image.png b/content/posts/theme-documentation-mermaid-shortcode/featured-image.png
new file mode 100644
index 00000000..6db8635c
Binary files /dev/null and b/content/posts/theme-documentation-mermaid-shortcode/featured-image.png differ
diff --git a/content/posts/theme-documentation-mermaid-shortcode/index.en.md b/content/posts/theme-documentation-mermaid-shortcode/index.en.md
new file mode 100644
index 00000000..97f66a09
--- /dev/null
+++ b/content/posts/theme-documentation-mermaid-shortcode/index.en.md
@@ -0,0 +1,361 @@
+---
+weight: 5
+title: "Theme Documentation - mermaid Shortcode"
+date: 2020-03-03T15:29:41+08:00
+lastmod: 2020-03-03T15:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The mermaid shortcode supports diagrams in Hugo with Mermaid library."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+{{< version 0.2.11 changed >}}
+
+The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
+
+<!--more-->
+
+**Mermaid** is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
+
+Just insert your mermaid code in the `mermaid` shortcode and that’s it.
+
+## Flowchart {#flowchart}
+
+Example **flowchart** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+graph LR;
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+graph LR;
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+{{< /mermaid >}}
+
+## Sequence Diagram {#sequence-diagram}
+
+Example **sequence diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+{{< /mermaid >}}
+
+## Gantt {#gantt}
+
+Example **Gantt** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2              :         des4, after des3, 5d
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2              :         des4, after des3, 5d
+{{< /mermaid >}}
+
+## Class Diagram {#class-diagram}
+
+Example **class diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+{{< /mermaid >}}
+
+## State Diagram {#state-diagram}
+
+Example **state diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{< /mermaid >}}
+
+## Git Graph {#git-graph}
+
+Example **git graph** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{< /mermaid >}}
+
+## Entity Relationship Diagram {#entity-relationship-diagram}
+
+Example **entity-relationship diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{< /mermaid >}}
+
+## User Journey {#user-journey}
+
+Example **user journey** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{< /mermaid >}}
+
+## Pie Chart {#pie-chart}
+
+Example **pie chart** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{< /mermaid >}}
+
+## Requirement Diagram {#requirement-diagram}
+
+Example **requirement diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+requirementDiagram
+
+requirement test_req {
+id: 1
+text: the test text.
+risk: high
+verifymethod: test
+}
+
+element test_entity {
+type: simulation
+}
+
+test_entity - satisfies -> test_req
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+requirementDiagram
+
+requirement test_req {
+id: 1
+text: the test text.
+risk: high
+verifymethod: test
+}
+
+element test_entity {
+type: simulation
+}
+
+test_entity - satisfies -> test_req
+{{< /mermaid >}}
diff --git a/content/posts/theme-documentation-music-shortcode/featured-image.png b/content/posts/theme-documentation-music-shortcode/featured-image.png
new file mode 100644
index 00000000..b0246371
Binary files /dev/null and b/content/posts/theme-documentation-music-shortcode/featured-image.png differ
diff --git a/content/posts/theme-documentation-music-shortcode/index.en.md b/content/posts/theme-documentation-music-shortcode/index.en.md
new file mode 100644
index 00000000..b07eae0a
--- /dev/null
+++ b/content/posts/theme-documentation-music-shortcode/index.en.md
@@ -0,0 +1,160 @@
+---
+weight: 8
+title: "Theme Documentation - music Shortcode"
+date: 2020-03-03T12:29:41+08:00
+lastmod: 2020-03-03T12:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The music shortcode embeds a responsive music player based on APlayer and MetingJS library."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
+
+<!--more-->
+
+There are three ways to use it the `music` shortcode.
+
+## 1 Custom Music URL {#custom-music-url}
+
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
+The `music` shortcode has the following named parameters by custom music URL:
+
+* **server** *[required]*
+
+    URL of the custom music.
+
+* **name** *[optional]*
+
+    Name of the custom music.
+
+* **artist** *[optional]*
+
+    Artist of the custom music.
+
+* **cover** *[required]*
+
+    URL of the custom music cover.
+
+Example `music` input by custom music URL:
+
+```markdown
+{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
+```
+
+The rendered output looks like this:
+
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
+
+## 2 Music Platform URL Automatic Identification {#automatic-identification}
+
+The `music` shortcode has one named parameter by music platform URL automatic identification:
+
+* **auto** *[required]* (**first** positional parameter)
+
+    URL of the music platform URL for automatic identification,
+    which supports `netease`, `tencent` and `xiami` music platform.
+
+Example `music` input by music platform URL automatic identification:
+
+```markdown
+{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
+Or
+{{</* music "https://music.163.com/#/playlist?id=60198" */>}}
+```
+
+The rendered output looks like this:
+
+{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
+
+## 3 Custom Server, Type and ID {#custom-server}
+
+The `music` shortcode has the following named parameters by custom music platform:
+
+* **server** *[required]* (**first** positional parameter)
+
+    [`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
+
+    Music platform.
+
+* **type** *[required]* (**second** positional parameter)
+
+    [`song`, `playlist`, `album`, `search`, `artist`]
+
+    Type of the music.
+
+* **id** *[required]* (**third** positional parameter)
+
+    Song ID, or playlist ID, or album ID, or search keyword, or artist ID.
+
+Example `music` input by custom music platform:
+
+```markdown
+{{</* music server="netease" type="song" id="1868553" */>}}
+Or
+{{</* music netease song 1868553 */>}}
+```
+
+The rendered output looks like this:
+
+{{< music netease song 1868553 >}}
+
+## 4 Other Parameters {#other-parameters}
+
+The `music` shortcode has other named parameters applying to the above three ways:
+
+* **theme** *[optional]*
+
+    {{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
+
+* **fixed** *[optional]*
+
+    Whether to enable fixed mode, default value is `false`.
+
+* **mini** *[optional]*
+
+    Whether to enable mini mode, default value is `false`.
+
+* **autoplay** *[optional]*
+
+    Whether to autoplay music, default value is `false`.
+
+* **volume** *[optional]*
+
+    Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`.
+
+* **mutex** *[optional]*
+
+    Whether to pause other players when this player starts playing, default value is `true`.
+
+The `music` shortcode has the following named parameters only applying to the type of music list:
+
+* **loop** *[optional]*
+
+    [`all`, `one`, `none`]
+
+    Loop mode of the music list, default value is `none`.
+
+* **order** *[optional]*
+
+    [`list`, `random`]
+
+    Play order of the music list, default value is `list`.
+
+* **list-folded** *[optional]*
+
+    Whether the music list should be folded at first, default value is `false`.
+
+* **list-max-height** *[optional]*
+
+    Max height of the music list, default value is `340px`.
diff --git a/content/posts/theme-documentation-typeit-shortcode/featured-image.png b/content/posts/theme-documentation-typeit-shortcode/featured-image.png
new file mode 100644
index 00000000..9b53b591
Binary files /dev/null and b/content/posts/theme-documentation-typeit-shortcode/featured-image.png differ
diff --git a/content/posts/theme-documentation-typeit-shortcode/index.en.md b/content/posts/theme-documentation-typeit-shortcode/index.en.md
new file mode 100644
index 00000000..54e260fa
--- /dev/null
+++ b/content/posts/theme-documentation-typeit-shortcode/index.en.md
@@ -0,0 +1,114 @@
+---
+weight: 10
+title: "Theme Documentation - typeit Shortcode"
+date: 2020-03-03T10:29:41+08:00
+lastmod: 2020-03-03T10:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The typeit shortcode provides typing animation based on TypeIt library."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/) library.
+
+<!--more-->
+
+Just insert your content in the `typeit` shortcode and that’s it.
+
+## 1 Simple Content {#simple-content}
+
+Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
+
+Example `typeit` input:
+
+```markdown
+{{</* typeit */>}}
+This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{</* /typeit */>}}
+```
+
+The rendered output looks like this:
+
+{{< typeit >}}
+This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{< /typeit >}}
+
+Alternatively, you can use custom **HTML tags**.
+
+Example `typeit` input with `h4` tag:
+
+```markdown
+{{</* typeit tag=h4 */>}}
+This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{</* /typeit */>}}
+```
+
+The rendered output looks like this:
+
+{{< typeit tag=h4 >}}
+This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{< /typeit >}}
+
+## 2 Code Content {#code-content}
+
+Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
+
+Example `typeit` input with `code`:
+
+```markdown
+{{</* typeit code=java */>}}
+public class HelloWorld {
+    public static void main(String []args) {
+        System.out.println("Hello World");
+    }
+}
+{{</* /typeit */>}}
+```
+
+The rendered output looks like this:
+
+{{< typeit code=java >}}
+public class HelloWorld {
+    public static void main(String []args) {
+        System.out.println("Hello World");
+    }
+}
+{{< /typeit >}}
+
+## 3 Group Content {#group-content}
+
+All typing animations start at the same time by default.
+But sometimes you may want to start a set of `typeit` contents in order.
+
+A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence.
+
+Example `typeit` input with `group`:
+
+```markdown
+{{</* typeit group=paragraph */>}}
+**First** this paragraph begins
+{{</* /typeit */>}}
+
+{{</* typeit group=paragraph */>}}
+**Then** this paragraph begins
+{{</* /typeit */>}}
+```
+
+The rendered output looks like this:
+
+{{< typeit group=paragraph >}}
+**First** this paragraph begins
+{{< /typeit >}}
+
+{{< typeit group=paragraph >}}
+**Then** this paragraph begins
+{{< /typeit >}}
diff --git a/resources/_gen/assets/scss/css/2f1ef0.scss_4e1cbf07b3207f8bd9aba94eea5deeef.content b/resources/_gen/assets/scss/css/2f1ef0.scss_4e1cbf07b3207f8bd9aba94eea5deeef.content
new file mode 100644
index 00000000..a34cf44d
--- /dev/null
+++ b/resources/_gen/assets/scss/css/2f1ef0.scss_4e1cbf07b3207f8bd9aba94eea5deeef.content
@@ -0,0 +1 @@
+#id-1{text-align:right}#id-1 strong{color:#00b1ff}
diff --git a/resources/_gen/assets/scss/css/2f1ef0.scss_4e1cbf07b3207f8bd9aba94eea5deeef.json b/resources/_gen/assets/scss/css/2f1ef0.scss_4e1cbf07b3207f8bd9aba94eea5deeef.json
new file mode 100644
index 00000000..d8dc49ac
--- /dev/null
+++ b/resources/_gen/assets/scss/css/2f1ef0.scss_4e1cbf07b3207f8bd9aba94eea5deeef.json
@@ -0,0 +1 @@
+{"Target":"css/2f1ef0.min.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/css/790698.scss_a2294da80a86e6f0a7e212ea93a03867.content b/resources/_gen/assets/scss/css/790698.scss_a2294da80a86e6f0a7e212ea93a03867.content
new file mode 100644
index 00000000..47de0983
--- /dev/null
+++ b/resources/_gen/assets/scss/css/790698.scss_a2294da80a86e6f0a7e212ea93a03867.content
@@ -0,0 +1 @@
+#id-1{text-align:right}
diff --git a/resources/_gen/assets/scss/css/790698.scss_a2294da80a86e6f0a7e212ea93a03867.json b/resources/_gen/assets/scss/css/790698.scss_a2294da80a86e6f0a7e212ea93a03867.json
new file mode 100644
index 00000000..e1288301
--- /dev/null
+++ b/resources/_gen/assets/scss/css/790698.scss_a2294da80a86e6f0a7e212ea93a03867.json
@@ -0,0 +1 @@
+{"Target":"css/790698.min.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/css/f79aa6.scss_2d8526ab9608131a52511a2771df6b1d.content b/resources/_gen/assets/scss/css/f79aa6.scss_2d8526ab9608131a52511a2771df6b1d.content
new file mode 100644
index 00000000..1011e762
--- /dev/null
+++ b/resources/_gen/assets/scss/css/f79aa6.scss_2d8526ab9608131a52511a2771df6b1d.content
@@ -0,0 +1 @@
+#id-1 img{height:1.25rem}
diff --git a/resources/_gen/assets/scss/css/f79aa6.scss_2d8526ab9608131a52511a2771df6b1d.json b/resources/_gen/assets/scss/css/f79aa6.scss_2d8526ab9608131a52511a2771df6b1d.json
new file mode 100644
index 00000000..e022fc45
--- /dev/null
+++ b/resources/_gen/assets/scss/css/f79aa6.scss_2d8526ab9608131a52511a2771df6b1d.json
@@ -0,0 +1 @@
+{"Target":"css/f79aa6.min.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/css/style.scss_26962b449d539ee5c1301a7879e5bb0e.content b/resources/_gen/assets/scss/css/style.scss_26962b449d539ee5c1301a7879e5bb0e.content
new file mode 100644
index 00000000..dbf699fc
--- /dev/null
+++ b/resources/_gen/assets/scss/css/style.scss_26962b449d539ee5c1301a7879e5bb0e.content
@@ -0,0 +1,3 @@
+html{font-family:system-ui,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-display:swap;font-size:16px;line-height:1.5rem;width:100%;scroll-behavior:smooth}html main [id]{scroll-margin-top:4rem}::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background-color:#87878d}::-webkit-scrollbar-thumb:hover{background-color:#a9a9b3}::selection{background-color:rgba(53,166,247,0.25)}[theme=dark] ::selection{background-color:rgba(50,112,194,0.4)}body{background-color:#fff;color:#161209;word-wrap:break-word;overflow-wrap:break-word;scrollbar-color:auto}body[theme=dark]{color:#a9a9b3;background-color:#292a2d}input::-ms-clear{display:none}a,a::before,a::after{text-decoration:none;color:#161209}[theme=dark] a,[theme=dark] a::before,[theme=dark] a::after{color:#a9a9b3}a:active,a:hover{color:#2d96bd}[theme=dark] a:active,[theme=dark] a:hover{color:#fff}#mask{background-repeat:no-repeat;background-position:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background-color:rgba(0,0,0,0)}.blur #mask{z-index:100;background-color:rgba(0,0,0,0.25)}svg.icon{display:inline-block;width:1.25em;height:1em;text-align:center}svg.icon path{fill:currentColor}img.emoji{height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-.1em}.details .details-summary:hover{cursor:pointer}.details i.details-icon{color:#a9a9b3;-webkit-transition:transform 0.2s ease;-moz-transition:transform 0.2s ease;-o-transition:transform 0.2s ease;transition:transform 0.2s ease}[theme=dark] .details i.details-icon{color:#5d5d5f}.details .details-content{max-height:0;overflow-y:hidden;-webkit-transition:max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;-moz-transition:max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;-o-transition:max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;transition:max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s}.details.open i.details-icon{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.details.open .details-content{max-height:12000px;-webkit-transition:max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;-moz-transition:max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;-o-transition:max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;transition:max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s}#fixed-buttons{display:none}.fixed-button{display:none;z-index:100;position:fixed;right:1.5rem;font-size:1rem;line-height:1.3rem;padding:.6rem .6rem;color:#a9a9b3;background:#f8f8f8;-webkit-border-radius:2rem;-moz-border-radius:2rem;border-radius:2rem;-webkit-transition:color 0.4s ease;-moz-transition:color 0.4s ease;-o-transition:color 0.4s ease;transition:color 0.4s ease}.blur .fixed-button{-webkit-filter:blur(1.5px);-moz-filter:blur(1.5px);-ms-filter:blur(1.5px);filter:blur(1.5px)}.fixed-button:hover,.fixed-button:active{color:#161209;cursor:pointer}.fixed-button:active,.fixed-button:focus,.fixed-button:hover{outline:none}[theme=dark] .fixed-button{color:#5d5d5f;background:#252627}[theme=dark] .fixed-button:hover,[theme=dark] .fixed-button:active{color:#a9a9b3}#back-to-top{display:block;bottom:1.5rem}#view-comments{bottom:4.5rem}.cc-window.cc-banner .cc-btn{color:#161209}.cc-window.cc-banner .cc-btn:hover,.cc-window.cc-banner .cc-btn:focus{background-color:#ccc}[theme=dark] .cc-window.cc-banner .cc-btn{color:#161209}[theme=dark] .cc-window.cc-banner .cc-btn:hover,[theme=dark] .cc-window.cc-banner .cc-btn:focus{background-color:#fff}img{-o-object-fit:contain;object-fit:contain;font-family:"object-fit: contain;"}.wrapper{display:flex;flex-direction:column;min-height:100vh;width:100%}.wrapper main{flex:1 0 auto}.wrapper main .container{padding:0 1rem}.page{position:relative;max-width:800px;width:60%;margin:0 auto}[data-header-desktop] .page{padding-top:3.5rem}[data-header-desktop=normal] .page{padding-top:0}.blur .page{-webkit-filter:blur(1.5px);-moz-filter:blur(1.5px);-ms-filter:blur(1.5px);filter:blur(1.5px)}.toc .toc-title{font-size:1.2rem;font-weight:bold;text-transform:uppercase}.toc .toc-content{font-size:1rem}.toc .toc-content ul{text-indent:-0.85rem;padding-left:.8rem;list-style:none}.toc .toc-content ul a:first-child::before{content:"|";font-weight:bolder;margin-right:.5rem;color:#2d96bd}[theme=dark] .toc .toc-content ul a:first-child::before{color:#55bde2}.toc .toc-content ul ul{padding-left:1.5rem}.toc ruby{background:#f5f5f5}.toc ruby rt{color:#a9a9b3}[theme=dark] .toc ruby{background:#272C34}[theme=dark] .toc ruby rt{color:#5d5d5f}#toc-auto{display:block;position:absolute;width:12000px;max-width:0;padding:0 .8rem;border-left:4px solid #f0f0f0;word-wrap:break-word;overflow-wrap:break-word;box-sizing:border-box;top:10rem;left:0;visibility:hidden}[data-header-desktop=normal] #toc-auto{top:5rem}.blur #toc-auto{-webkit-filter:blur(1.5px);-moz-filter:blur(1.5px);-ms-filter:blur(1.5px);filter:blur(1.5px)}[theme=dark] #toc-auto{border-left-color:#363636}#toc-auto .toc-title{margin:.8rem 0}#toc-auto .toc-content.always-active ul{display:block}#toc-auto .toc-content>nav>ul{margin:.625rem 0}#toc-auto .toc-content ul ul{display:none}#toc-auto .toc-content ul .has-active>ul{display:block}#toc-auto .toc-content a.active{font-weight:bold;color:#2d96bd}[theme=dark] #toc-auto .toc-content a.active{color:#55bde2}#toc-auto .toc-content a.active::before{color:#ef3982}[theme=dark] #toc-auto .toc-content a.active::before{color:#bdebfc}#toc-static{display:none;margin:.8rem 0}#toc-static[data-kept=true]{display:block}#toc-static .toc-title{display:flex;justify-content:space-between;line-height:2em;padding:0 .75rem;background:#e6e6e6}[theme=dark] #toc-static .toc-title{background:#1a1d23}#toc-static .toc-content{background-color:#f5f5f5}#toc-static .toc-content>nav>ul{margin:0;padding:.4rem 1rem .4rem 1.8rem}[theme=dark] #toc-static .toc-content{background-color:#272C34}#toc-static.open .toc-title{background:#ededed}[theme=dark] #toc-static.open .toc-title{background:#20252b}.single .single-title{margin:2rem 0 .5rem;font-size:1.6rem;font-weight:bold;line-height:140%}.single .single-subtitle{margin:.5rem 0;font-size:1.2rem;font-weight:normal;line-height:100%}.single .post-meta{font-size:.875rem;color:#a9a9b3}.single .post-meta span{display:inline-block}[theme=dark] .single .post-meta{color:#5d5d5f}.single .post-meta a,.single .post-meta a::before,.single .post-meta a::after{text-decoration:none;color:#2d96bd}[theme=dark] .single .post-meta a,[theme=dark] .single .post-meta a::before,[theme=dark] .single .post-meta a::after{color:#a9a9b3}.single .post-meta a:active,.single .post-meta a:hover{color:#ef3982}[theme=dark] .single .post-meta a:active,[theme=dark] .single .post-meta a:hover{color:#fff}.single .post-meta .author{font-size:1.05rem}.single .featured-image{margin:.5rem 0 1rem 0}.single .featured-image img{display:block;max-width:100%;height:auto;margin:0 auto;overflow:hidden}.single .featured-image img.lazyloaded{width:100%}.single .content>h2{font-size:1.5rem}.single .content>h2 code{font-size:1.25rem}.single .content>h3{font-size:1.375rem}.single .content>h3 code{font-size:1.125rem}.single .content>h4{font-size:1.25rem}.single .content>h4 code{font-size:1rem}.single .content>h5{font-size:1.125rem}.single .content>h6{font-size:1rem}.single .content h2,.single .content h3,.single .content h4,.single .content h5,.single .content h6{font-weight:bold;margin:1.2rem 0}[theme=dark] .single .content h2,[theme=dark] .single .content h3,[theme=dark] .single .content h4,[theme=dark] .single .content h5,[theme=dark] .single .content h6{font-weight:bolder}.single .content>h2>.header-mark::before,.single .content>h3>.header-mark::before,.single .content>h4>.header-mark::before,.single .content>h5>.header-mark::before,.single .content>h6>.header-mark::before{content:"|";margin-right:.3125rem;color:#2d96bd}[theme=dark] .single .content>h2>.header-mark::before,[theme=dark] .single .content>h3>.header-mark::before,[theme=dark] .single .content>h4>.header-mark::before,[theme=dark] .single .content>h5>.header-mark::before,[theme=dark] .single .content>h6>.header-mark::before{color:#55bde2}.single .content>h2>.header-mark::before{content:"#"}.single .content p{margin:.5rem 0}.single .content b,.single .content strong{font-weight:bold}[theme=dark] .single .content b,[theme=dark] .single .content strong{color:#ddd}.single .content a,.single .content a::before,.single .content a::after{text-decoration:none;color:#2d96bd}[theme=dark] .single .content a,[theme=dark] .single .content a::before,[theme=dark] .single .content a::after{color:#55bde2}.single .content a:active,.single .content a:hover{color:#ef3982}[theme=dark] .single .content a:active,[theme=dark] .single .content a:hover{color:#bdebfc}.single .content a{word-wrap:break-word;overflow-wrap:break-word}[theme=dark] .single .content a b,[theme=dark] .single .content a strong{color:#55bde2}.single .content [theme=dark] a:hover b,.single .content [theme=dark] a:hover strong{color:#bdebfc}.single .content ul,.single .content ol{margin:.5rem 0;padding-left:2.5rem}.single .content ul{list-style-type:disc}.single .content ruby{background:#f5f5f5}.single .content ruby rt{color:#a9a9b3}[theme=dark] .single .content ruby{background:#272C34}[theme=dark] .single .content ruby rt{color:#5d5d5f}.single .content .table-wrapper{overflow-x:auto}.single .content .table-wrapper::-webkit-scrollbar{background-color:#fff}[theme=dark] .single .content .table-wrapper::-webkit-scrollbar{background-color:#272c34}.single .content .table-wrapper>table{width:100%;max-width:100%;margin:.625rem 0;border-spacing:0;background:#fff;border-collapse:collapse}[theme=dark] .single .content .table-wrapper>table{background:#272c34}.single .content .table-wrapper>table thead{background:#ededed}[theme=dark] .single .content .table-wrapper>table thead{background-color:#20252b}.single .content .table-wrapper>table th,.single .content .table-wrapper>table td{padding:.3rem 1rem;border:1px solid #e8e8e8}[theme=dark] .single .content .table-wrapper>table th,[theme=dark] .single .content .table-wrapper>table td{border-color:#1c2025}.single .content img{max-width:100%;min-height:1em}.single .content figure{margin:.5rem;text-align:center}.single .content figure .image-caption:not(:empty){min-width:20%;max-width:80%;display:inline-block;padding:.5rem;margin:0 auto;font-size:.875rem;color:#969696}.single .content figure img{display:block;width:100%;height:auto;margin:0 auto;overflow:hidden}.single .content .lazyload,.single .content .lazyloading{-o-object-fit:scale-down;object-fit:scale-down;font-family:"object-fit: scale-down;"}.single .content .lazyloaded{-o-object-fit:fill;object-fit:fill;font-family:"object-fit: fill;"}.single .content blockquote{display:block;border-left:0.5rem solid #6bd6fd;background-color:rgba(107,214,253,0.2);padding:.25rem .75rem;margin:1rem 0}[theme=dark] .single .content blockquote{border-left-color:#59c5ec;background-color:rgba(89,197,236,0.2)}.single .content .footnotes{color:#a9a9b3}[theme=dark] .single .content .footnotes{color:#5d5d5f}.single .content .footnotes p{margin:.25rem 0}.single .content code{display:inline-block;max-width:100%;padding:0 .4rem;word-wrap:break-word;overflow-wrap:break-word;-webkit-line-break:anywhere;-ms-line-break:anywhere;line-break:anywhere;font-size:.875rem;font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace,system-ui,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#E74C3C}[theme=dark] .single .content code{color:#E5BF78}.single .content pre{margin:0;padding:.25rem 0 .25rem .5rem;-moz-tab-size:4;-o-tab-size:4;tab-size:4}.single .content pre code{padding:0}.single .content pre img{min-height:1em;max-height:1.2em;vertical-align:text-bottom}.single .content code,.single .content pre,.single .content .highlight table,.single .content .highlight tr,.single .content .highlight td{background:#f5f5f5}[theme=dark] .single .content code,[theme=dark] .single .content pre,[theme=dark] .single .content .highlight table,[theme=dark] .single .content .highlight tr,[theme=dark] .single .content .highlight td{background:#272C34}.single .content .highlight{font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace,system-ui,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;line-height:1.4em;margin:.5rem 0}.single .content .highlight .table-wrapper>table,.single .content .highlight .table-wrapper>table thead,.single .content .highlight .table-wrapper>table tr,.single .content .highlight .table-wrapper>table td{margin:0;padding:0;border:none !important}.single .content .highlight .table-wrapper>table span.c,.single .content .highlight .table-wrapper>table thead span.c,.single .content .highlight .table-wrapper>table tr span.c,.single .content .highlight .table-wrapper>table td span.c{white-space:nowrap}.single .content .highlight>.chroma{position:relative}.single .content .highlight>.chroma .code-header{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;width:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:bold;color:#9c9c9c;background:#e1e1e1}[theme=dark] .single .content .highlight>.chroma .code-header{color:#b1b0b0;background:#1a1d23}.single .content .highlight>.chroma .code-header:hover{cursor:pointer}.single .content .highlight>.chroma .code-header .code-title{width:100%;padding:.4rem}.single .content .highlight>.chroma .code-header .code-title::after{padding-left:.2rem;content:'Code'}.single .content .highlight>.chroma .code-header.language-bash .code-title::after{content:"Bash"}.single .content .highlight>.chroma .code-header.language-c .code-title::after{content:"C"}.single .content .highlight>.chroma .code-header.language-cs .code-title::after{content:"C#"}.single .content .highlight>.chroma .code-header.language-cpp .code-title::after{content:"C++"}.single .content .highlight>.chroma .code-header.language-clojure .code-title::after{content:"Clojure"}.single .content .highlight>.chroma .code-header.language-coffeescript .code-title::after{content:"CoffeeScript"}.single .content .highlight>.chroma .code-header.language-css .code-title::after{content:"CSS"}.single .content .highlight>.chroma .code-header.language-dart .code-title::after{content:"Dart"}.single .content .highlight>.chroma .code-header.language-diff .code-title::after{content:"Diff"}.single .content .highlight>.chroma .code-header.language-erlang .code-title::after{content:"Erlang"}.single .content .highlight>.chroma .code-header.language-go .code-title::after{content:"Go"}.single .content .highlight>.chroma .code-header.language-go-html-template .code-title::after{content:"Go HTML Template"}.single .content .highlight>.chroma .code-header.language-groovy .code-title::after{content:"Groovy"}.single .content .highlight>.chroma .code-header.language-haskell .code-title::after{content:"Haskell"}.single .content .highlight>.chroma .code-header.language-html .code-title::after{content:"HTML"}.single .content .highlight>.chroma .code-header.language-http .code-title::after{content:"HTTP"}.single .content .highlight>.chroma .code-header.language-xml .code-title::after{content:"XML"}.single .content .highlight>.chroma .code-header.language-java .code-title::after{content:"Java"}.single .content .highlight>.chroma .code-header.language-js .code-title::after{content:"JavaScript"}.single .content .highlight>.chroma .code-header.language-javascript .code-title::after{content:"JavaScript"}.single .content .highlight>.chroma .code-header.language-json .code-title::after{content:"JSON"}.single .content .highlight>.chroma .code-header.language-kotlin .code-title::after{content:"Kotlin"}.single .content .highlight>.chroma .code-header.language-latex .code-title::after{content:"LaTeX"}.single .content .highlight>.chroma .code-header.language-less .code-title::after{content:"Less"}.single .content .highlight>.chroma .code-header.language-lisp .code-title::after{content:"Lisp"}.single .content .highlight>.chroma .code-header.language-lua .code-title::after{content:"Lua"}.single .content .highlight>.chroma .code-header.language-makefile .code-title::after{content:"Makefile"}.single .content .highlight>.chroma .code-header.language-markdown .code-title::after{content:"Markdown"}.single .content .highlight>.chroma .code-header.language-matlab .code-title::after{content:"Matlab"}.single .content .highlight>.chroma .code-header.language-objectivec .code-title::after{content:"Objective-C"}.single .content .highlight>.chroma .code-header.language-php .code-title::after{content:"PHP"}.single .content .highlight>.chroma .code-header.language-perl .code-title::after{content:"Perl"}.single .content .highlight>.chroma .code-header.language-powershell .code-title::after{content:"PowerShell"}.single .content .highlight>.chroma .code-header.language-posh .code-title::after{content:"PowerShell"}.single .content .highlight>.chroma .code-header.language-pwsh .code-title::after{content:"PowerShell"}.single .content .highlight>.chroma .code-header.language-python .code-title::after{content:"Python"}.single .content .highlight>.chroma .code-header.language-r .code-title::after{content:"R"}.single .content .highlight>.chroma .code-header.language-ruby .code-title::after{content:"Ruby"}.single .content .highlight>.chroma .code-header.language-rust .code-title::after{content:"Rust"}.single .content .highlight>.chroma .code-header.language-scala .code-title::after{content:"Scala"}.single .content .highlight>.chroma .code-header.language-scss .code-title::after{content:"Scss"}.single .content .highlight>.chroma .code-header.language-shell .code-title::after{content:"Shell"}.single .content .highlight>.chroma .code-header.language-sql .code-title::after{content:"SQL"}.single .content .highlight>.chroma .code-header.language-swift .code-title::after{content:"Swift"}.single .content .highlight>.chroma .code-header.language-tex .code-title::after{content:"TeX"}.single .content .highlight>.chroma .code-header.language-toml .code-title::after{content:"TOML"}.single .content .highlight>.chroma .code-header.language-ts .code-title::after{content:"TypeScript"}.single .content .highlight>.chroma .code-header.language-typescript .code-title::after{content:"TypeScript"}.single .content .highlight>.chroma .code-header.language-vue .code-title::after{content:"Vue"}.single .content .highlight>.chroma .code-header.language-yml .code-title::after{content:"YAML"}.single .content .highlight>.chroma .code-header.language-yaml .code-title::after{content:"YAML"}.single .content .highlight>.chroma .lntd:first-child{min-width:1.6rem;text-align:right}.single .content .highlight>.chroma .lntd:last-child{width:100%}.single .content .highlight>.chroma .lntd:last-child pre{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:intrinsic;min-width:max-content}.single .content .highlight>.chroma .ln{padding-right:.75rem}.single .content .highlight>.chroma .hl{display:block;background-color:#dcdcdc}[theme=dark] .single .content .highlight>.chroma .hl{background-color:#1c2025}.single .content .highlight>.chroma .ln,.single .content .highlight>.chroma .lnt{color:#a9a9b3}[theme=dark] .single .content .highlight>.chroma .ln,[theme=dark] .single .content .highlight>.chroma .lnt{color:#5d5d5f}.single .content .highlight>.chroma .arrow{padding:0 .2rem;-webkit-transition:transform 0.2s ease;-moz-transition:transform 0.2s ease;-o-transition:transform 0.2s ease;transition:transform 0.2s ease}.single .content .highlight>.chroma .ellipses{padding:.4rem}.single .content .highlight>.chroma .copy{display:none;padding:.4rem}.single .content .highlight>.chroma .copy:hover{cursor:pointer;color:#2d96bd}[theme=dark] .single .content .highlight>.chroma .copy:hover{color:#fff}.single .content .highlight>.chroma .table-wrapper{max-height:0;overflow-y:hidden;-webkit-transition:max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;-moz-transition:max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;-o-transition:max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;transition:max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s}.single .content .highlight>.chroma.open .code-header{background:#ededed}[theme=dark] .single .content .highlight>.chroma.open .code-header{background:#20252b}.single .content .highlight>.chroma.open .table-wrapper{max-height:12000px;-webkit-transition:max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;-moz-transition:max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;-o-transition:max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;transition:max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s}.single .content .highlight>.chroma.open .arrow{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.single .content .highlight>.chroma.open .ellipses{display:none}.single .content .highlight>.chroma.open .copy{display:inline}.single .content .highlight .c,.single .content .highlight .ch,.single .content .highlight .cm,.single .content .highlight .c1,.single .content .highlight .cs,.single .content .highlight .cp,.single .content .highlight .cpf{font-style:italic}.single .content .highlight .gl{text-decoration:underline}.single .content .highlight .p{color:#a9a9b3}.single .content .highlight .k{color:#b501a9}.single .content .highlight .kc{color:#b501a9}.single .content .highlight .kd{color:#b501a9}.single .content .highlight .kn{color:#b501a9}.single .content .highlight .kp{color:#b501a9}.single .content .highlight .kr{color:#b501a9}.single .content .highlight .kt{color:#b501a9}.single .content .highlight .n{color:#333}.single .content .highlight .na{color:#2b77fa}.single .content .highlight .nb{color:#f74840}.single .content .highlight .bp{color:#f74840}.single .content .highlight .nc{color:#cb8100}.single .content .highlight .no{color:#2b77fa}.single .content .highlight .nd{color:#0086c1}.single .content .highlight .ni{color:#2b77fa}.single .content .highlight .ne{color:#2b77fa}.single .content .highlight .nf{color:#2b77fa}.single .content .highlight .fm{color:#1ccad6}.single .content .highlight .nl{color:#2b77fa}.single .content .highlight .nn{color:#2b77fa}.single .content .highlight .nx{color:#333}.single .content .highlight .py{color:#2b77fa}.single .content .highlight .nt{color:#2b77fa}.single .content .highlight .nv{color:#2b77fa}.single .content .highlight .vc{color:#2b77fa}.single .content .highlight .vg{color:#2b77fa}.single .content .highlight .vi{color:#2b77fa}.single .content .highlight .vm{color:#2b77fa}.single .content .highlight .l{color:#2aa198}.single .content .highlight .ld{color:#2aa198}.single .content .highlight .s{color:#24a443}.single .content .highlight .sa{color:#24a443}.single .content .highlight .sb{color:#24a443}.single .content .highlight .sc{color:#24a443}.single .content .highlight .dl{color:#24a443}.single .content .highlight .sd{color:#24a443}.single .content .highlight .s2{color:#24a443}.single .content .highlight .se{color:#24a443}.single .content .highlight .sh{color:#24a443}.single .content .highlight .si{color:#24a443}.single .content .highlight .sx{color:#24a443}.single .content .highlight .sr{color:#24a443}.single .content .highlight .s1{color:#24a443}.single .content .highlight .ss{color:#24a443}.single .content .highlight .m{color:#e2893c}.single .content .highlight .mb{color:#e2893c}.single .content .highlight .mf{color:#e2893c}.single .content .highlight .mh{color:#e2893c}.single .content .highlight .mi{color:#e2893c}.single .content .highlight .il{color:#e2893c}.single .content .highlight .mo{color:#e2893c}.single .content .highlight .o{color:#f19b04}.single .content .highlight .ow{color:#b501a9}.single .content .highlight .c{color:#a0a1a8}.single .content .highlight .ch{color:#a0a1a8}.single .content .highlight .cm{color:#a0a1a8}.single .content .highlight .c1{color:#a0a1a8}.single .content .highlight .cs{color:#a0a1a8}.single .content .highlight .cp{color:#a0a1a8}.single .content .highlight .cpf{color:#a0a1a8}.single .content .highlight .g{color:#e72d40}.single .content .highlight .gd{color:#e72d40}.single .content .highlight .ge{color:#e72d40}.single .content .highlight .gr{color:#e72d40}.single .content .highlight .gh{color:#e72d40}.single .content .highlight .gi{color:#e72d40}.single .content .highlight .go{color:#e72d40}.single .content .highlight .gp{color:#e72d40}.single .content .highlight .gs{color:#e72d40}.single .content .highlight .gu{color:#e72d40}.single .content .highlight .gt{color:#e72d40}.single .content .highlight .w{color:#bbb}[theme=dark] .single .content .highlight .p{color:#a9a9b3}[theme=dark] .single .content .highlight .k{color:#d371e3}[theme=dark] .single .content .highlight .kc{color:#d371e3}[theme=dark] .single .content .highlight .kd{color:#d371e3}[theme=dark] .single .content .highlight .kn{color:#d371e3}[theme=dark] .single .content .highlight .kp{color:#d371e3}[theme=dark] .single .content .highlight .kr{color:#d371e3}[theme=dark] .single .content .highlight .kt{color:#d371e3}[theme=dark] .single .content .highlight .n{color:#a9b2c0}[theme=dark] .single .content .highlight .na{color:#41b0f5}[theme=dark] .single .content .highlight .nb{color:#19b9c4}[theme=dark] .single .content .highlight .bp{color:#ecbf6f}[theme=dark] .single .content .highlight .nc{color:#ecbf6f}[theme=dark] .single .content .highlight .no{color:#41b0f5}[theme=dark] .single .content .highlight .nd{color:#ecbf6f}[theme=dark] .single .content .highlight .ni{color:#41b0f5}[theme=dark] .single .content .highlight .ne{color:#41b0f5}[theme=dark] .single .content .highlight .nf{color:#41b0f5}[theme=dark] .single .content .highlight .fm{color:#19b9c4}[theme=dark] .single .content .highlight .nl{color:#41b0f5}[theme=dark] .single .content .highlight .nn{color:#41b0f5}[theme=dark] .single .content .highlight .nx{color:#a9a9b3}[theme=dark] .single .content .highlight .py{color:#41b0f5}[theme=dark] .single .content .highlight .nt{color:#41b0f5}[theme=dark] .single .content .highlight .nv{color:#41b0f5}[theme=dark] .single .content .highlight .vc{color:#41b0f5}[theme=dark] .single .content .highlight .vg{color:#41b0f5}[theme=dark] .single .content .highlight .vi{color:#41b0f5}[theme=dark] .single .content .highlight .vm{color:#41b0f5}[theme=dark] .single .content .highlight .l{color:#2aa198}[theme=dark] .single .content .highlight .ld{color:#2aa198}[theme=dark] .single .content .highlight .s{color:#8cc570}[theme=dark] .single .content .highlight .sa{color:#8cc570}[theme=dark] .single .content .highlight .sb{color:#8cc570}[theme=dark] .single .content .highlight .sc{color:#8cc570}[theme=dark] .single .content .highlight .dl{color:#8cc570}[theme=dark] .single .content .highlight .sd{color:#8cc570}[theme=dark] .single .content .highlight .s2{color:#8cc570}[theme=dark] .single .content .highlight .se{color:#8cc570}[theme=dark] .single .content .highlight .sh{color:#8cc570}[theme=dark] .single .content .highlight .si{color:#8cc570}[theme=dark] .single .content .highlight .sx{color:#8cc570}[theme=dark] .single .content .highlight .sr{color:#8cc570}[theme=dark] .single .content .highlight .s1{color:#8cc570}[theme=dark] .single .content .highlight .ss{color:#8cc570}[theme=dark] .single .content .highlight .m{color:#db985c}[theme=dark] .single .content .highlight .mb{color:#db985c}[theme=dark] .single .content .highlight .mf{color:#db985c}[theme=dark] .single .content .highlight .mh{color:#db985c}[theme=dark] .single .content .highlight .mi{color:#db985c}[theme=dark] .single .content .highlight .il{color:#db985c}[theme=dark] .single .content .highlight .mo{color:#db985c}[theme=dark] .single .content .highlight .o{color:#ecbf6f}[theme=dark] .single .content .highlight .ow{color:#d371e3}[theme=dark] .single .content .highlight .c{color:#7e848f}[theme=dark] .single .content .highlight .ch{color:#7e848f}[theme=dark] .single .content .highlight .cm{color:#7e848f}[theme=dark] .single .content .highlight .c1{color:#7e848f}[theme=dark] .single .content .highlight .cs{color:#7e848f}[theme=dark] .single .content .highlight .cp{color:#7e848f}[theme=dark] .single .content .highlight .cpf{color:#7e848f}[theme=dark] .single .content .highlight .g{color:#f16372}[theme=dark] .single .content .highlight .gd{color:#f16372}[theme=dark] .single .content .highlight .ge{color:#f16372}[theme=dark] .single .content .highlight .gr{color:#f16372}[theme=dark] .single .content .highlight .gh{color:#f16372}[theme=dark] .single .content .highlight .gi{color:#f16372}[theme=dark] .single .content .highlight .go{color:#f16372}[theme=dark] .single .content .highlight .gp{color:#f16372}[theme=dark] .single .content .highlight .gs{color:#f16372}[theme=dark] .single .content .highlight .gu{color:#f16372}[theme=dark] .single .content .highlight .gt{color:#f16372}[theme=dark] .single .content .highlight .w{color:#bbb}.single .content .gist{font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace,system-ui,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem}.single .content .gist .table-wrapper>table,.single .content .gist .table-wrapper>table thead,.single .content .gist .table-wrapper>table tr,.single .content .gist .table-wrapper>table td{margin:0;padding:0;border:none !important}.single .content .gist .gist-file,.single .content .gist .gist-data,.single .content .gist .gist-meta{border:none}.single .content .gist .gist-meta{padding:.4rem .8rem;background-color:#e8e8e8}.single .content .gist .gist-meta a,.single .content .gist .gist-meta a::before,.single .content .gist .gist-meta a::after{text-decoration:none;color:#2d96bd}[theme=dark] .single .content .gist .gist-meta a,[theme=dark] .single .content .gist .gist-meta a::before,[theme=dark] .single .content .gist .gist-meta a::after{color:#55bde2}.single .content .gist .gist-meta a:active,.single .content .gist .gist-meta a:hover{color:#ef3982}[theme=dark] .single .content .gist .gist-meta a:active,[theme=dark] .single .content .gist .gist-meta a:hover{color:#bdebfc}[theme=dark] .single .content .gist .gist-meta{background-color:#1c2025}[theme=dark] .single .content .gist .highlight{background:#141414}[theme=dark] .single .content .gist .blob-num,[theme=dark] .single .content .gist .blob-code-inner,[theme=dark] .single .content .gist .highlight,[theme=dark] .single .content .gist .pl-enm,[theme=dark] .single .content .gist .pl-ko,[theme=dark] .single .content .gist .pl-mo,[theme=dark] .single .content .gist .pl-mp1 .pl-sf,[theme=dark] .single .content .gist .pl-ms,[theme=dark] .single .content .gist .pl-pdc1,[theme=dark] .single .content .gist .pl-scp,[theme=dark] .single .content .gist .pl-smc,[theme=dark] .single .content .gist .pl-som,[theme=dark] .single .content .gist .pl-va,[theme=dark] .single .content .gist .pl-vpf,[theme=dark] .single .content .gist .pl-vpu,[theme=dark] .single .content .gist .pl-mdr{color:#aab1bf}[theme=dark] .single .content .gist .pl-mb,[theme=dark] .single .content .gist .pl-pdb{font-weight:700}[theme=dark] .single .content .gist .pl-c,[theme=dark] .single .content .gist .pl-c span,[theme=dark] .single .content .gist .pl-pdc{color:#5b6270;font-style:italic}[theme=dark] .single .content .gist .pl-sr .pl-cce{color:#56b5c2;font-weight:400}[theme=dark] .single .content .gist .pl-ef,[theme=dark] .single .content .gist .pl-en,[theme=dark] .single .content .gist .pl-enf,[theme=dark] .single .content .gist .pl-eoai,[theme=dark] .single .content .gist .pl-kos,[theme=dark] .single .content .gist .pl-mh .pl-pdh,[theme=dark] .single .content .gist .pl-mr{color:#61afef}[theme=dark] .single .content .gist .pl-ens,[theme=dark] .single .content .gist .pl-vi{color:#be5046}[theme=dark] .single .content .gist .pl-enti,[theme=dark] .single .content .gist .pl-mai .pl-sf,[theme=dark] .single .content .gist .pl-ml,[theme=dark] .single .content .gist .pl-sf,[theme=dark] .single .content .gist .pl-sr,[theme=dark] .single .content .gist .pl-sr .pl-sra,[theme=dark] .single .content .gist .pl-src,[theme=dark] .single .content .gist .pl-st,[theme=dark] .single .content .gist .pl-vo{color:#56b5c2}[theme=dark] .single .content .gist .pl-eoi,[theme=dark] .single .content .gist .pl-mri,[theme=dark] .single .content .gist .pl-pds,[theme=dark] .single .content .gist .pl-pse .pl-s1,[theme=dark] .single .content .gist .pl-s,[theme=dark] .single .content .gist .pl-s1{color:#97c279}[theme=dark] .single .content .gist .pl-k,[theme=dark] .single .content .gist .pl-kolp,[theme=dark] .single .content .gist .pl-mc,[theme=dark] .single .content .gist .pl-pde{color:#c578dd}[theme=dark] .single .content .gist .pl-mi,[theme=dark] .single .content .gist .pl-pdi{color:#c578dd;font-style:italic}[theme=dark] .single .content .gist .pl-mp,[theme=dark] .single .content .gist .pl-stp{color:#818896}[theme=dark] .single .content .gist .pl-mdh,[theme=dark] .single .content .gist .pl-mdi,[theme=dark] .single .content .gist .pl-mdr{font-weight:400}[theme=dark] .single .content .gist .pl-mdht,[theme=dark] .single .content .gist .pl-mi1{color:#97c279;background:#020}[theme=dark] .single .content .gist .pl-md,[theme=dark] .single .content .gist .pl-mdhf{color:#df6b75;background:#200}[theme=dark] .single .content .gist .pl-corl{color:#df6b75;text-decoration:underline}[theme=dark] .single .content .gist .pl-ib{background:#df6b75}[theme=dark] .single .content .gist .pl-ii{background:#e0c184;color:#fff}[theme=dark] .single .content .gist .pl-iu{background:#e05151}[theme=dark] .single .content .gist .pl-ms1{color:#aab1bf;background:#373b41}[theme=dark] .single .content .gist .pl-c1,[theme=dark] .single .content .gist .pl-cn,[theme=dark] .single .content .gist .pl-e,[theme=dark] .single .content .gist .pl-eoa,[theme=dark] .single .content .gist .pl-eoac,[theme=dark] .single .content .gist .pl-eoac .pl-pde,[theme=dark] .single .content .gist .pl-kou,[theme=dark] .single .content .gist .pl-mm,[theme=dark] .single .content .gist .pl-mp .pl-s3,[theme=dark] .single .content .gist .pl-mq,[theme=dark] .single .content .gist .pl-s3,[theme=dark] .single .content .gist .pl-sok,[theme=dark] .single .content .gist .pl-sv,[theme=dark] .single .content .gist .pl-mb{color:#d19965}[theme=dark] .single .content .gist .pl-enc,[theme=dark] .single .content .gist .pl-entc,[theme=dark] .single .content .gist .pl-pse .pl-s2,[theme=dark] .single .content .gist .pl-s2,[theme=dark] .single .content .gist .pl-sc,[theme=dark] .single .content .gist .pl-smp,[theme=dark] .single .content .gist .pl-sr .pl-sre,[theme=dark] .single .content .gist .pl-stj,[theme=dark] .single .content .gist .pl-v,[theme=dark] .single .content .gist .pl-pdb{color:#e4bf7a}[theme=dark] .single .content .gist .pl-ent,[theme=dark] .single .content .gist .pl-entl,[theme=dark] .single .content .gist .pl-entm,[theme=dark] .single .content .gist .pl-mh,[theme=dark] .single .content .gist .pl-pdv,[theme=dark] .single .content .gist .pl-smi,[theme=dark] .single .content .gist .pl-sol,[theme=dark] .single .content .gist .pl-mdh,[theme=dark] .single .content .gist .pl-mdi{color:#df6b75}[theme=dark] .single .content iframe.instagram-media{border:none !important}.single .content .admonition{position:relative;margin:1rem 0;padding:0 .75rem;background-color:rgba(68,138,255,0.1);border-left:0.25rem solid #448aff;overflow:auto}.single .content .admonition .admonition-title{font-weight:bold;margin:0 -0.75rem;padding:.25rem 1.8rem;border-bottom:1px solid rgba(68,138,255,0.1);background-color:rgba(68,138,255,0.25)}.single .content .admonition.open .admonition-title{background-color:rgba(68,138,255,0.1)}.single .content .admonition .admonition-content{padding:.5rem 0}.single .content .admonition i.icon{font-size:0.85rem;color:#448aff;position:absolute;top:.6rem;left:.4rem}.single .content .admonition i.details-icon{position:absolute;top:.6rem;right:.3rem}.single .content .admonition.note{border-left-color:#448aff}.single .content .admonition.note i.icon{color:#448aff}.single .content .admonition.abstract{border-left-color:#00b0ff}.single .content .admonition.abstract i.icon{color:#00b0ff}.single .content .admonition.info{border-left-color:#00b8d4}.single .content .admonition.info i.icon{color:#00b8d4}.single .content .admonition.tip{border-left-color:#00bfa5}.single .content .admonition.tip i.icon{color:#00bfa5}.single .content .admonition.success{border-left-color:#00c853}.single .content .admonition.success i.icon{color:#00c853}.single .content .admonition.question{border-left-color:#64dd17}.single .content .admonition.question i.icon{color:#64dd17}.single .content .admonition.warning{border-left-color:#ff9100}.single .content .admonition.warning i.icon{color:#ff9100}.single .content .admonition.failure{border-left-color:#ff5252}.single .content .admonition.failure i.icon{color:#ff5252}.single .content .admonition.danger{border-left-color:#ff1744}.single .content .admonition.danger i.icon{color:#ff1744}.single .content .admonition.bug{border-left-color:#f50057}.single .content .admonition.bug i.icon{color:#f50057}.single .content .admonition.example{border-left-color:#651fff}.single .content .admonition.example i.icon{color:#651fff}.single .content .admonition.quote{border-left-color:#9e9e9e}.single .content .admonition.quote i.icon{color:#9e9e9e}.single .content .admonition.note{background-color:rgba(68,138,255,0.1)}.single .content .admonition.note .admonition-title{border-bottom-color:rgba(68,138,255,0.1);background-color:rgba(68,138,255,0.25)}.single .content .admonition.note.open .admonition-title{background-color:rgba(68,138,255,0.1)}.single .content .admonition.abstract{background-color:rgba(0,176,255,0.1)}.single .content .admonition.abstract .admonition-title{border-bottom-color:rgba(0,176,255,0.1);background-color:rgba(0,176,255,0.25)}.single .content .admonition.abstract.open .admonition-title{background-color:rgba(0,176,255,0.1)}.single .content .admonition.info{background-color:rgba(0,184,212,0.1)}.single .content .admonition.info .admonition-title{border-bottom-color:rgba(0,184,212,0.1);background-color:rgba(0,184,212,0.25)}.single .content .admonition.info.open .admonition-title{background-color:rgba(0,184,212,0.1)}.single .content .admonition.tip{background-color:rgba(0,191,165,0.1)}.single .content .admonition.tip .admonition-title{border-bottom-color:rgba(0,191,165,0.1);background-color:rgba(0,191,165,0.25)}.single .content .admonition.tip.open .admonition-title{background-color:rgba(0,191,165,0.1)}.single .content .admonition.success{background-color:rgba(0,200,83,0.1)}.single .content .admonition.success .admonition-title{border-bottom-color:rgba(0,200,83,0.1);background-color:rgba(0,200,83,0.25)}.single .content .admonition.success.open .admonition-title{background-color:rgba(0,200,83,0.1)}.single .content .admonition.question{background-color:rgba(100,221,23,0.1)}.single .content .admonition.question .admonition-title{border-bottom-color:rgba(100,221,23,0.1);background-color:rgba(100,221,23,0.25)}.single .content .admonition.question.open .admonition-title{background-color:rgba(100,221,23,0.1)}.single .content .admonition.warning{background-color:rgba(255,145,0,0.1)}.single .content .admonition.warning .admonition-title{border-bottom-color:rgba(255,145,0,0.1);background-color:rgba(255,145,0,0.25)}.single .content .admonition.warning.open .admonition-title{background-color:rgba(255,145,0,0.1)}.single .content .admonition.failure{background-color:rgba(255,82,82,0.1)}.single .content .admonition.failure .admonition-title{border-bottom-color:rgba(255,82,82,0.1);background-color:rgba(255,82,82,0.25)}.single .content .admonition.failure.open .admonition-title{background-color:rgba(255,82,82,0.1)}.single .content .admonition.danger{background-color:rgba(255,23,68,0.1)}.single .content .admonition.danger .admonition-title{border-bottom-color:rgba(255,23,68,0.1);background-color:rgba(255,23,68,0.25)}.single .content .admonition.danger.open .admonition-title{background-color:rgba(255,23,68,0.1)}.single .content .admonition.bug{background-color:rgba(245,0,87,0.1)}.single .content .admonition.bug .admonition-title{border-bottom-color:rgba(245,0,87,0.1);background-color:rgba(245,0,87,0.25)}.single .content .admonition.bug.open .admonition-title{background-color:rgba(245,0,87,0.1)}.single .content .admonition.example{background-color:rgba(101,31,255,0.1)}.single .content .admonition.example .admonition-title{border-bottom-color:rgba(101,31,255,0.1);background-color:rgba(101,31,255,0.25)}.single .content .admonition.example.open .admonition-title{background-color:rgba(101,31,255,0.1)}.single .content .admonition.quote{background-color:rgba(159,159,159,0.1)}.single .content .admonition.quote .admonition-title{border-bottom-color:rgba(159,159,159,0.1);background-color:rgba(159,159,159,0.25)}.single .content .admonition.quote.open .admonition-title{background-color:rgba(159,159,159,0.1)}.single .content .admonition:last-child{margin-bottom:.75rem}.single .content .echarts{margin:.5rem 0;text-align:center}.single .content .mapbox{margin:.5rem 0;padding:.5rem 0}.single .content meting-js{margin:.5rem 0}.single .content .bilibili{position:relative;width:100%;height:0;padding-bottom:75%;margin:3% auto;text-align:center}.single .content .bilibili iframe{position:absolute;width:100%;height:100%;left:0;top:0}.single .content hr{margin:1rem 0;position:relative;border-top:1px dashed #f0f0f0;border-bottom:none}[theme=dark] .single .content hr{border-top:1px dashed #363636}.single .content kbd{display:inline-block;padding:.25rem;background-color:#fff;border:1px solid #f0f0f0;border-bottom-color:#f0f0f0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 #f0f0f0;box-shadow:inset 0 -1px 0 #f0f0f0;font-size:.8rem;font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace,system-ui,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#E74C3C}[theme=dark] .single .content kbd{background-color:#292a2d;border:1px solid #363636;border-bottom-color:#363636;-webkit-box-shadow:inset 0 -1px 0 #363636;box-shadow:inset 0 -1px 0 #363636;color:#E5BF78}.single .content .version{height:1.25em;vertical-align:text-bottom}.single .post-footer{margin-top:3rem}.single .post-footer .post-info{border-bottom:1px solid #f0f0f0;padding:1rem 0 0.3rem}[theme=dark] .single .post-footer .post-info{border-bottom:1px solid #363636}.single .post-footer .post-info .post-info-line{display:flex;justify-content:space-between}.single .post-footer .post-info .post-info-line .post-info-mod{font-size:0.8em;color:#a9a9b3}[theme=dark] .single .post-footer .post-info .post-info-line .post-info-mod{color:#5d5d5f}.single .post-footer .post-info .post-info-line .post-info-mod a,.single .post-footer .post-info .post-info-line .post-info-mod a::before,.single .post-footer .post-info .post-info-line .post-info-mod a::after{text-decoration:none;color:#2d96bd}[theme=dark] .single .post-footer .post-info .post-info-line .post-info-mod a,[theme=dark] .single .post-footer .post-info .post-info-line .post-info-mod a::before,[theme=dark] .single .post-footer .post-info .post-info-line .post-info-mod a::after{color:#55bde2}.single .post-footer .post-info .post-info-line .post-info-mod a:active,.single .post-footer .post-info .post-info-line .post-info-mod a:hover{color:#ef3982}[theme=dark] .single .post-footer .post-info .post-info-line .post-info-mod a:active,[theme=dark] .single .post-footer .post-info .post-info-line .post-info-mod a:hover{color:#bdebfc}.single .post-footer .post-info .post-info-line .post-info-license{font-size:0.8em;color:#a9a9b3}[theme=dark] .single .post-footer .post-info .post-info-line .post-info-license{color:#5d5d5f}.single .post-footer .post-info .post-info-line .post-info-license a,.single .post-footer .post-info .post-info-line .post-info-license a::before,.single .post-footer .post-info .post-info-line .post-info-license a::after{text-decoration:none;color:#2d96bd}[theme=dark] .single .post-footer .post-info .post-info-line .post-info-license a,[theme=dark] .single .post-footer .post-info .post-info-line .post-info-license a::before,[theme=dark] .single .post-footer .post-info .post-info-line .post-info-license a::after{color:#55bde2}.single .post-footer .post-info .post-info-line .post-info-license a:active,.single .post-footer .post-info .post-info-line .post-info-license a:hover{color:#ef3982}[theme=dark] .single .post-footer .post-info .post-info-line .post-info-license a:active,[theme=dark] .single .post-footer .post-info .post-info-line .post-info-license a:hover{color:#bdebfc}.single .post-footer .post-info .post-info-line .post-info-md{font-size:0.8rem;width:8rem}.single .post-footer .post-info .post-info-line .post-info-md a,.single .post-footer .post-info .post-info-line .post-info-md a::before,.single .post-footer .post-info .post-info-line .post-info-md a::after{text-decoration:none;color:#2d96bd}[theme=dark] .single .post-footer .post-info .post-info-line .post-info-md a,[theme=dark] .single .post-footer .post-info .post-info-line .post-info-md a::before,[theme=dark] .single .post-footer .post-info .post-info-line .post-info-md a::after{color:#55bde2}.single .post-footer .post-info .post-info-line .post-info-md a:active,.single .post-footer .post-info .post-info-line .post-info-md a:hover{color:#ef3982}[theme=dark] .single .post-footer .post-info .post-info-line .post-info-md a:active,[theme=dark] .single .post-footer .post-info .post-info-line .post-info-md a:hover{color:#bdebfc}.single .post-footer .post-info .post-info-line .post-info-share a *{vertical-align:text-bottom}.single .post-footer .post-info-more{padding:0.3rem 0 1rem;display:flex;justify-content:space-between;font-size:0.9rem}.single .post-footer .post-tags{max-width:65%}.single .post-footer .post-tags *{display:inline}.single .post-footer .post-nav::before,.single .post-footer .post-nav::after{content:' ';display:table}.single .post-footer .post-nav a.prev,.single .post-footer .post-nav a.next{font-size:1rem;font-weight:600;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.single .post-footer .post-nav a.prev{float:left}.single .post-footer .post-nav a.prev:hover{-webkit-transform:translateX(-4px);-moz-transform:translateX(-4px);-ms-transform:translateX(-4px);-o-transform:translateX(-4px);transform:translateX(-4px)}.single .post-footer .post-nav a.next{float:right}.single .post-footer .post-nav a.next:hover{-webkit-transform:translateX(4px);-moz-transform:translateX(4px);-ms-transform:translateX(4px);-o-transform:translateX(4px);transform:translateX(4px)}.single #comments{padding:8rem 0 2rem}.typeit{--ti-cursor-font-family: $global-font-family;--ti-cursor-font-size: $global-font-size;--ti-cursor-font-weight: $global-font-weight;--ti-cursor-line-height: $global-line-height;--ti-cursor-color: $global-font-secondary-color;--ti-cursor-margin-left: 0}.typeit .highlight{padding:.375rem;font-size:.875rem;font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace,system-ui,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:bold;word-break:break-all;white-space:pre-wrap}[theme=dark] .typeit{--ti-cursor-color: $global-font-secondary-color-dark}.lg-toolbar .lg-icon::after{color:#999}.special .single-title,.special .single-subtitle{text-align:right}.archive .single-title{text-align:right}.archive .group-title{margin-top:1.5rem;margin-bottom:1rem}.archive .categories-card{margin:0 auto;margin-top:3rem;display:flex;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:wrap;line-height:1.6rem}.archive .categories-card .card-item{font-size:.875rem;text-align:left;width:45%;display:flex;align-items:flex-start;margin-top:2rem;min-height:10rem;padding:0 2%;position:relative}.archive .categories-card .card-item .card-item-wrapper{width:100%;overflow:hidden}.archive .categories-card .card-item .card-item-wrapper .card-item-title{font-size:1.2rem;font-weight:bold;display:inline-block;margin-top:1rem;margin-bottom:.75rem}.archive .categories-card .card-item .card-item-wrapper span{float:right;padding-right:1rem}.archive .archive-item{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;margin:.25rem 0 .25rem 1.5rem}.archive .archive-item-link{min-width:10%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.archive .archive-item-link:hover{color:#2d96bd;background-color:transparent}[theme=dark] .archive .archive-item-link{color:#a9a9b3}[theme=dark] .archive .archive-item-link:hover{color:#fff}.archive .archive-item-date{width:5em;text-align:right;color:#a9a9b3}[theme=dark] .archive .archive-item-date{color:#5d5d5f}.archive .more-post{text-align:right}.archive .tag-cloud-tags{margin:10px 0}.archive .tag-cloud-tags a,.archive .tag-cloud-tags a::before,.archive .tag-cloud-tags a::after{text-decoration:none;color:#161209}[theme=dark] .archive .tag-cloud-tags a,[theme=dark] .archive .tag-cloud-tags a::before,[theme=dark] .archive .tag-cloud-tags a::after{color:#a9a9b3}.archive .tag-cloud-tags a:active,.archive .tag-cloud-tags a:hover{color:#2d96bd}[theme=dark] .archive .tag-cloud-tags a:active,[theme=dark] .archive .tag-cloud-tags a:hover{color:#fff}.archive .tag-cloud-tags a{display:inline-block;position:relative;margin:5px 10px;word-wrap:break-word;overflow-wrap:break-word;-webkit-transition:all ease-out 0.3s;-moz-transition:all ease-out 0.3s;-o-transition:all ease-out 0.3s;transition:all ease-out 0.3s}.archive .tag-cloud-tags a:active,.archive .tag-cloud-tags a:focus,.archive .tag-cloud-tags a:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}.archive .tag-cloud-tags a sup{color:#a9a9b3}[theme=dark] .archive .tag-cloud-tags a sup{color:#5d5d5f}.home .home-profile{-webkit-transform:translateY(16vh);-moz-transform:translateY(16vh);-ms-transform:translateY(16vh);-o-transform:translateY(16vh);transform:translateY(16vh);padding:0 0 .5rem;text-align:center}.home .home-profile .home-avatar{padding:.5rem}.home .home-profile .home-avatar img{display:inline-block;width:8rem;height:auto;margin:0 auto;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;-webkit-box-shadow:0 0 0 0.3618em rgba(0,0,0,0.05);box-shadow:0 0 0 0.3618em rgba(0,0,0,0.05);-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}.home .home-profile .home-avatar img:hover{position:relative;-webkit-transform:translateY(-0.75rem);-moz-transform:translateY(-0.75rem);-ms-transform:translateY(-0.75rem);-o-transform:translateY(-0.75rem);transform:translateY(-0.75rem)}.home .home-profile .home-title{font-size:1.25rem;font-weight:bold;margin:0;padding:.5rem}.home .home-profile .home-subtitle{font-size:1rem;font-weight:normal;margin:0;padding:.5rem}.home .home-profile .links{padding:.5rem;font-size:1.5rem}.home .home-profile .links a *{vertical-align:text-bottom}.home .home-profile .links img{height:1.5rem;padding:0 .25rem}.home .home-profile .home-disclaimer{font-size:1rem;line-height:1.5rem;font-weight:normal;margin:0;padding:.5rem;color:#a9a9b3}[theme=dark] .home .home-profile .home-disclaimer{color:#5d5d5f}.home[data-home=posts] .home-profile{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);padding-top:2rem}.home[data-home=posts] .home-avatar img{width:6rem}.home[data-home=posts] .summary{padding-top:1rem;padding-bottom:.8rem;color:#161209;border-bottom:1px dashed #f0f0f0}[theme=dark] .home[data-home=posts] .summary{color:#a9a9b3;border-bottom:1px dashed #363636}.home[data-home=posts] .summary .featured-image-preview{width:100%;padding:30% 0 0;position:relative;margin:0.6rem auto;-webkit-transition:transform 0.4s ease;-moz-transition:transform 0.4s ease;-o-transition:transform 0.4s ease;transition:transform 0.4s ease}.home[data-home=posts] .summary .featured-image-preview img{position:absolute;width:100%;height:100%;left:0;top:0;-o-object-fit:none;object-fit:none;font-family:"object-fit: none;"}.home[data-home=posts] .summary .featured-image-preview img.lazyloaded{-o-object-fit:cover;object-fit:cover;font-family:"object-fit: cover;"}.home[data-home=posts] .summary .featured-image-preview:hover{-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);-o-transform:scale(1.01);transform:scale(1.01)}.home[data-home=posts] .summary .single-title{font-size:1.25rem;line-height:140%;margin:0.4rem 0}.home[data-home=posts] .summary .content{display:-moz-box;display:-webkit-box;display:box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-line-clamp:3;margin-top:.3rem;width:100%;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;overflow-wrap:break-word;color:#a9a9b3}[theme=dark] .home[data-home=posts] .summary .content{color:#5d5d5f}.home[data-home=posts] .summary .content h2,.home[data-home=posts] .summary .content h3,.home[data-home=posts] .summary .content h4,.home[data-home=posts] .summary .content h5,.home[data-home=posts] .summary .content h6,.home[data-home=posts] .summary .content p{font-size:1rem;line-height:1.5;display:inline}.home[data-home=posts] .summary .content h2::after,.home[data-home=posts] .summary .content h3::after,.home[data-home=posts] .summary .content h4::after,.home[data-home=posts] .summary .content h5::after,.home[data-home=posts] .summary .content h6::after,.home[data-home=posts] .summary .content p::after{content:"\A";white-space:pre}.home[data-home=posts] .summary .content h2{font-size:1.125rem}.home[data-home=posts] .summary .content a,.home[data-home=posts] .summary .content a::before,.home[data-home=posts] .summary .content a::after{text-decoration:none;color:#2d96bd}[theme=dark] .home[data-home=posts] .summary .content a,[theme=dark] .home[data-home=posts] .summary .content a::before,[theme=dark] .home[data-home=posts] .summary .content a::after{color:#a9a9b3}.home[data-home=posts] .summary .content a:active,.home[data-home=posts] .summary .content a:hover{color:#ef3982}[theme=dark] .home[data-home=posts] .summary .content a:active,[theme=dark] .home[data-home=posts] .summary .content a:hover{color:#fff}.home[data-home=posts] .summary .content b,.home[data-home=posts] .summary .content strong{color:#a9a9b3}[theme=dark] .home[data-home=posts] .summary .content b,[theme=dark] .home[data-home=posts] .summary .content strong{color:#5d5d5f}.home[data-home=posts] .summary .post-footer{margin-top:.4rem;display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.home[data-home=posts] .summary .post-footer a,.home[data-home=posts] .summary .post-footer a::before,.home[data-home=posts] .summary .post-footer a::after{text-decoration:none;color:#2d96bd}[theme=dark] .home[data-home=posts] .summary .post-footer a,[theme=dark] .home[data-home=posts] .summary .post-footer a::before,[theme=dark] .home[data-home=posts] .summary .post-footer a::after{color:#55bde2}.home[data-home=posts] .summary .post-footer a:active,.home[data-home=posts] .summary .post-footer a:hover{color:#ef3982}[theme=dark] .home[data-home=posts] .summary .post-footer a:active,[theme=dark] .home[data-home=posts] .summary .post-footer a:hover{color:#bdebfc}.home[data-home=posts] .summary .post-footer .post-tags{padding:0}.home[data-home=posts] .summary .post-footer .post-tags a,.home[data-home=posts] .summary .post-footer .post-tags a::before,.home[data-home=posts] .summary .post-footer .post-tags a::after{text-decoration:none;color:#161209}[theme=dark] .home[data-home=posts] .summary .post-footer .post-tags a,[theme=dark] .home[data-home=posts] .summary .post-footer .post-tags a::before,[theme=dark] .home[data-home=posts] .summary .post-footer .post-tags a::after{color:#a9a9b3}.home[data-home=posts] .summary .post-footer .post-tags a:active,.home[data-home=posts] .summary .post-footer .post-tags a:hover{color:#2d96bd}[theme=dark] .home[data-home=posts] .summary .post-footer .post-tags a:active,[theme=dark] .home[data-home=posts] .summary .post-footer .post-tags a:hover{color:#fff}#content-404{font-size:1.8rem;line-height:3rem;-webkit-transform:translateY(30vh);-moz-transform:translateY(30vh);-ms-transform:translateY(30vh);-o-transform:translateY(30vh);transform:translateY(30vh);text-align:center}header{width:100%;z-index:150;background-color:#f8f8f8;-webkit-transition:box-shadow 0.3s ease;-moz-transition:box-shadow 0.3s ease;-o-transition:box-shadow 0.3s ease;transition:box-shadow 0.3s ease}[theme=dark] header{background-color:#252627}header .logo{min-height:1.5em;height:1.5em;vertical-align:text-bottom}header .logo,header .header-title-pre{padding-right:.25rem}header .header-title-post{padding-left:.25rem}header:hover{-webkit-box-shadow:0 0 1.5rem 0 rgba(0,0,0,0.1);box-shadow:0 0 1.5rem 0 rgba(0,0,0,0.1)}.header-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;width:100%}.header-title{font-family:system-ui,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:bold;margin-right:.5rem;min-width:10%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-flex:10;flex:10}.menu .menu-item{position:relative}.language-select{position:absolute;opacity:0;left:0;top:0;width:100%;height:100%}.language-select:hover{cursor:pointer}.search{position:relative}.search input{color:transparent;box-sizing:border-box;height:2.5rem;width:2.5rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;border-radius:.5rem;border:none;outline:none;background-color:#f8f8f8;vertical-align:baseline !important;-webkit-transition:width 0.3s ease;-moz-transition:width 0.3s ease;-o-transition:width 0.3s ease;transition:width 0.3s ease}[theme=dark] .search input{background-color:#252627}.search input::-webkit-input-placeholder{color:rgba(0,0,0,0)}.search input:-moz-placeholder{color:rgba(0,0,0,0)}.search input::-moz-placeholder{color:rgba(0,0,0,0)}.search input:-ms-input-placeholder{color:rgba(0,0,0,0)}.search input::placeholder{color:rgba(0,0,0,0)}.search .search-button{margin:0;position:absolute;left:auto;right:1rem}.search .search-toggle{left:.5rem;right:auto}.search .search-loading{display:none}.search .search-clear{display:none}.open .search input,.search.mobile input{color:#161209;background-color:#e9e9e9;padding:0 2rem 0 2rem}[theme=dark] .open .search input,[theme=dark] .search.mobile input{color:#a9a9b3;background-color:#363636}[theme=dark] .open .search input::-webkit-input-placeholder,[theme=dark] .search.mobile input::-webkit-input-placeholder{color:#5d5d5f}[theme=dark] .open .search input:-moz-placeholder,[theme=dark] .search.mobile input:-moz-placeholder{color:#5d5d5f}[theme=dark] .open .search input::-moz-placeholder,[theme=dark] .search.mobile input::-moz-placeholder{color:#5d5d5f}[theme=dark] .open .search input:-ms-input-placeholder,[theme=dark] .search.mobile input:-ms-input-placeholder{color:#5d5d5f}[theme=dark] .open .search input::placeholder,[theme=dark] .search.mobile input::placeholder{color:#5d5d5f}.open .search input::-webkit-input-placeholder,.search.mobile input::-webkit-input-placeholder{color:#a9a9b3}.open .search input:-moz-placeholder,.search.mobile input:-moz-placeholder{color:#a9a9b3}.open .search input::-moz-placeholder,.search.mobile input::-moz-placeholder{color:#a9a9b3}.open .search input:-ms-input-placeholder,.search.mobile input:-ms-input-placeholder{color:#a9a9b3}.open .search input::placeholder,.search.mobile input::placeholder{color:#a9a9b3}.open .search .search-button,.search.mobile .search-button{color:#a9a9b3}[theme=dark] .open .search .search-button,[theme=dark] .search.mobile .search-button{color:#5d5d5f}.open .search .search-clear:hover,.search.mobile .search-clear:hover{color:#ff6b6b}.open .search .search-toggle:hover,.search.mobile .search-toggle:hover{cursor:default}.theme-switch i{-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg)}#header-desktop{display:block;position:fixed;height:3.5rem;line-height:3.5rem}[data-header-desktop=normal] #header-desktop{position:static}#header-desktop .header-wrapper{padding:0 2rem 0 10vh}#header-desktop .header-wrapper .header-title{font-size:1.5rem}#header-desktop .header-wrapper .menu{overflow:hidden;white-space:nowrap}#header-desktop .header-wrapper .menu .menu-inner{float:right}#header-desktop .header-wrapper .menu .menu-item{margin:0 .5rem}#header-desktop .header-wrapper .menu .menu-item.delimiter{border-left:1.5px solid #161209}[theme=dark] #header-desktop .header-wrapper .menu .menu-item.delimiter{border-left-color:#363636}#header-desktop .header-wrapper .menu .menu-item.language{margin-right:0}#header-desktop .header-wrapper .menu .menu-item.search{margin:0 -.5rem 0 0}#header-desktop .header-wrapper .menu a.active{font-weight:900;color:#161209}[theme=dark] #header-desktop .header-wrapper .menu a.active{color:#fff}#header-desktop.open .header-wrapper .menu .menu-item.search{margin:0 .25rem 0 .5rem}#header-desktop.open .header-wrapper .menu .menu-item.search input{width:24rem}#header-mobile{display:none;position:fixed;height:3.5rem;line-height:3.5rem}[data-header-mobile=normal] #header-mobile{position:static}#header-mobile .header-container{padding:0;margin:0}#header-mobile .header-container .header-wrapper{padding:0 1rem;font-size:1.125rem;-webkit-transition:margin-top 0.3s ease;-moz-transition:margin-top 0.3s ease;-o-transition:margin-top 0.3s ease;transition:margin-top 0.3s ease}#header-mobile .header-container .header-wrapper .header-title{font-size:1.5rem;max-width:80%}#header-mobile .header-container .header-wrapper .menu-toggle{line-height:4rem;cursor:pointer;-webkit-transition:width 0.3s ease;-moz-transition:width 0.3s ease;-o-transition:width 0.3s ease;transition:width 0.3s ease}#header-mobile .header-container .header-wrapper .menu-toggle span{display:block;background:#161209;width:1.5rem;height:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}[theme=dark] #header-mobile .header-container .header-wrapper .menu-toggle span{background:#a9a9b3}#header-mobile .header-container .header-wrapper .menu-toggle span:nth-child(1){margin-bottom:.5rem}#header-mobile .header-container .header-wrapper .menu-toggle span:nth-child(3){margin-top:.5rem}#header-mobile .header-container .header-wrapper .menu-toggle.active span:nth-child(1){-webkit-transform:rotate(45deg) translate(0.4rem, 0.5rem);-moz-transform:rotate(45deg) translate(0.4rem, 0.5rem);-ms-transform:rotate(45deg) translate(0.4rem, 0.5rem);-o-transform:rotate(45deg) translate(0.4rem, 0.5rem);transform:rotate(45deg) translate(0.4rem, 0.5rem)}#header-mobile .header-container .header-wrapper .menu-toggle.active span:nth-child(2){opacity:0}#header-mobile .header-container .header-wrapper .menu-toggle.active span:nth-child(3){-webkit-transform:rotate(-45deg) translate(0.4rem, -0.5rem);-moz-transform:rotate(-45deg) translate(0.4rem, -0.5rem);-ms-transform:rotate(-45deg) translate(0.4rem, -0.5rem);-o-transform:rotate(-45deg) translate(0.4rem, -0.5rem);transform:rotate(-45deg) translate(0.4rem, -0.5rem)}#header-mobile .header-container .menu{text-align:center;background:#f8f8f8;border-top:2px solid #f0f0f0;display:none;padding-top:.5rem;-webkit-box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.1);box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.1)}#header-mobile .header-container .menu .search-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:.5rem 1rem;line-height:2.5rem}#header-mobile .header-container .menu .search{flex-grow:10}#header-mobile .header-container .menu .search .algolia-autocomplete,#header-mobile .header-container .menu .search input{width:100%}#header-mobile .header-container .menu .search-button{top:0}#header-mobile .header-container .menu .search-cancel{display:none;margin-left:.75rem}#header-mobile .header-container .menu .menu-item{display:block;line-height:2.5rem}#header-mobile .header-container .menu.active{display:block}[theme=dark] #header-mobile .header-container .menu{background:#252627;border-top-color:#363636}#header-mobile.open .header-wrapper{margin-top:-3.5rem}#header-mobile.open .menu{padding-top:0;border-top:none}#header-mobile.open .menu .menu-item{display:none}#header-mobile.open .menu .search-cancel{display:inline}.search-dropdown{position:fixed;z-index:200;top:3.5rem;-webkit-box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.1);box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.1)}.search-dropdown.desktop{right:2rem;width:30rem}.search-dropdown.mobile{right:0;width:100%}.search-dropdown .dropdown-menu{right:0 !important;background-color:#fff}[theme=dark] .search-dropdown .dropdown-menu{background-color:#292a2d}.search-dropdown .dropdown-menu .suggestions{overflow-y:auto;max-height:calc(100vh - 3.5rem)}.search-dropdown .dropdown-menu .suggestions .suggestion{padding:.75rem 1rem}.search-dropdown .dropdown-menu .suggestions .suggestion .suggestion-title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;font-weight:bold;max-width:75%}.search-dropdown .dropdown-menu .suggestions .suggestion .suggestion-date{font-size:.875rem;float:right;text-align:right;color:#a9a9b3}[theme=dark] .search-dropdown .dropdown-menu .suggestions .suggestion .suggestion-date{color:#5d5d5f}.search-dropdown .dropdown-menu .suggestions .suggestion .suggestion-context{line-height:1.25rem;display:-moz-box;display:-webkit-box;display:box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;overflow-wrap:break-word;color:#a9a9b3}[theme=dark] .search-dropdown .dropdown-menu .suggestions .suggestion .suggestion-context{color:#5d5d5f}.search-dropdown .dropdown-menu .suggestions .suggestion em{font-style:normal;background-color:rgba(53,166,247,0.25)}[theme=dark] .search-dropdown .dropdown-menu .suggestions .suggestion em{background-color:rgba(50,112,194,0.4)}.search-dropdown .dropdown-menu .suggestions .suggestion.cursor{background:#e8e8e8}[theme=dark] .search-dropdown .dropdown-menu .suggestions .suggestion.cursor{background:#323843}.search-dropdown .dropdown-menu .suggestions .suggestion:hover{cursor:pointer}.search-dropdown .dropdown-menu .search-empty{padding:1rem;text-align:center}.search-dropdown .dropdown-menu .search-empty .search-query{font-weight:bold}[theme=dark] .search-dropdown .dropdown-menu .search-empty .search-query{color:#ddd}.search-dropdown .dropdown-menu .search-footer{padding:.5rem 1rem;float:right;font-size:.8rem;color:#a9a9b3}.search-dropdown .dropdown-menu .search-footer [theme=dark]{color:#5d5d5f}.search-dropdown .dropdown-menu .search-footer a,.search-dropdown .dropdown-menu .search-footer a::before,.search-dropdown .dropdown-menu .search-footer a::after{text-decoration:none;color:#2d96bd}[theme=dark] .search-dropdown .dropdown-menu .search-footer a,[theme=dark] .search-dropdown .dropdown-menu .search-footer a::before,[theme=dark] .search-dropdown .dropdown-menu .search-footer a::after{color:#55bde2}.search-dropdown .dropdown-menu .search-footer a:active,.search-dropdown .dropdown-menu .search-footer a:hover{color:#ef3982}[theme=dark] .search-dropdown .dropdown-menu .search-footer a:active,[theme=dark] .search-dropdown .dropdown-menu .search-footer a:hover{color:#bdebfc}.search-dropdown .dropdown-menu .search-footer a{font-size:1rem}footer{height:2rem;width:100%;text-align:center;line-height:1.25rem;padding:1rem 0}footer .footer-container{font-size:.875rem}footer .footer-container .footer-line{width:100%}footer .footer-container .footer-line .icp-br{display:none}.blur footer{-webkit-filter:blur(1.5px);-moz-filter:blur(1.5px);-ms-filter:blur(1.5px);filter:blur(1.5px)}.pagination{display:flex;flex-direction:row;justify-content:center;list-style:none;white-space:nowrap;width:100%;padding:1rem 0 0}.pagination a{font-size:.8rem;color:#bfbfbf;letter-spacing:.1rem;font-weight:700;padding:5px 5px;text-decoration:none;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;transition:0.3s}.pagination li{padding-bottom:3px;margin:0 20px;box-sizing:border-box;position:relative;display:inline}.pagination li.disabled{display:none}.pagination li:hover a{color:#000}[theme=dark] .pagination li:hover a{color:#fff}.pagination li:before,.pagination li:after{position:absolute;content:"";width:0;height:3px;background:#000;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;transition:0.3s;bottom:0px}[theme=dark] .pagination li:before,[theme=dark] .pagination li:after{background:#fff}.pagination li:before .active,.pagination li:after .active{width:100%}.pagination li:before{left:50%}.pagination li:after{right:50%}.pagination li:hover:before,.pagination li:hover:after{width:50%}.pagination li.active a{color:#000}[theme=dark] .pagination li.active a{color:#fff}.pagination li.active:before,.pagination li.active:after{width:60%}@media only screen and (max-width: 1440px){.page{width:56%}}@media only screen and (max-width: 1200px){.page{width:52%}#header-desktop .header-wrapper{padding-right:1rem}.search-dropdown.desktop{right:1rem}}@media only screen and (max-width: 960px){#toc-auto{display:none}#toc-static{display:block}.page{width:80%}#header-desktop .header-wrapper{padding-left:1rem}}@media only screen and (max-width: 680px){#header-desktop{display:none}#header-mobile{display:block}body.blur{overflow:hidden}.page{width:100%}[data-header-mobile] .page{padding-top:3.5rem}[data-header-mobile=normal] .page{padding-top:0}.page .categories-card .card-item{width:100%}.copyright .copyright-line .icp-splitter{display:none}.copyright .copyright-line .icp-br{display:block}}
+
+/*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/css/style.scss_26962b449d539ee5c1301a7879e5bb0e.json b/resources/_gen/assets/scss/css/style.scss_26962b449d539ee5c1301a7879e5bb0e.json
new file mode 100644
index 00000000..0095485d
--- /dev/null
+++ b/resources/_gen/assets/scss/css/style.scss_26962b449d539ee5c1301a7879e5bb0e.json
@@ -0,0 +1 @@
+{"Target":"css/style.min.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/lib/aplayer/dark.scss_b78509179d0ce56294ff487a5da6db0a.content b/resources/_gen/assets/scss/lib/aplayer/dark.scss_b78509179d0ce56294ff487a5da6db0a.content
new file mode 100644
index 00000000..da387ce5
--- /dev/null
+++ b/resources/_gen/assets/scss/lib/aplayer/dark.scss_b78509179d0ce56294ff487a5da6db0a.content
@@ -0,0 +1,3 @@
+[theme=dark] .aplayer{background:#212121}[theme=dark] .aplayer.aplayer-withlist .aplayer-info{border-bottom-color:#5c5c5c}[theme=dark] .aplayer.aplayer-fixed .aplayer-list{border-color:#5c5c5c}[theme=dark] .aplayer .aplayer-body{background-color:#212121}[theme=dark] .aplayer .aplayer-info{border-top-color:#212121}[theme=dark] .aplayer .aplayer-info .aplayer-music .aplayer-title{color:#fff}[theme=dark] .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#fff}[theme=dark] .aplayer .aplayer-info .aplayer-controller .aplayer-time{color:#eee}[theme=dark] .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#eee}[theme=dark] .aplayer .aplayer-list{background-color:#212121}[theme=dark] .aplayer .aplayer-list::-webkit-scrollbar-thumb{background-color:#999}[theme=dark] .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#bbb}[theme=dark] .aplayer .aplayer-list li{color:#fff;border-top-color:#666}[theme=dark] .aplayer .aplayer-list li:hover{background:#4e4e4e}[theme=dark] .aplayer .aplayer-list li.aplayer-list-light{background:#6c6c6c}[theme=dark] .aplayer .aplayer-list li .aplayer-list-index{color:#ddd}[theme=dark] .aplayer .aplayer-list li .aplayer-list-author{color:#ddd}[theme=dark] .aplayer .aplayer-lrc{text-shadow:-1px -1px 0 #666}[theme=dark] .aplayer .aplayer-lrc:before{background:-moz-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:-webkit-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:linear-gradient(to bottom, #212121 0%, rgba(33,33,33,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 )}[theme=dark] .aplayer .aplayer-lrc:after{background:-moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:-webkit-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:linear-gradient(to bottom, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 )}[theme=dark] .aplayer .aplayer-lrc p{color:#fff}[theme=dark] .aplayer .aplayer-miniswitcher{background:#484848}[theme=dark] .aplayer .aplayer-miniswitcher .aplayer-icon path{fill:#eee}
+
+/*# sourceMappingURL=dark.min.css.map */
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/lib/aplayer/dark.scss_b78509179d0ce56294ff487a5da6db0a.json b/resources/_gen/assets/scss/lib/aplayer/dark.scss_b78509179d0ce56294ff487a5da6db0a.json
new file mode 100644
index 00000000..d2c9d760
--- /dev/null
+++ b/resources/_gen/assets/scss/lib/aplayer/dark.scss_b78509179d0ce56294ff487a5da6db0a.json
@@ -0,0 +1 @@
+{"Target":"lib/aplayer/dark.min.css","MediaType":"text/css","Data":{}}
\ No newline at end of file