74 changed files with 1251 additions and 2124 deletions
--- a/.github/workflows/site.yml
+++ b/.github/workflows/site.yml
@ -30,4 +30,4 @@ jobs:
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./exampleSite/public
-          # cname: h.xjj.pub
+          cname: h.xjj.pub
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,3 @@
 .DS_Store
 public
-resources
-.hugo_build.lock
+resources
--- a/4
+++ b/4
@ -4,11 +4,11 @@ themeDir=../..
 .PHONY: dev, build, clean

 dev:
+	-rm -r exampleSite/resources
 	hugo server -D -s $(source) --themesDir $(themeDir) --disableFastRender

 build:
 	hugo -D --gc --minify -s $(source) --themesDir $(themeDir)

 clean:
-	rm -r $(source)/public
-	rm -r exampleSite/resources
+	rm -r $(source)/public
--- a/README.md
+++ b/README.md
@ -1,24 +1,18 @@
 # Minima

-Minima is a clean and minimal Hugo theme originally ported from [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima). Check out the [example site](https://mivinci.github.io/hugo-theme-minima).
+A Clean and minimal Hugo theme porting from [Minima on Hexo](https://github.com/adisaktijrs/hexo-theme-minima). [Click me](https://h.xjj.pub/) to take a look at the demo site.

 ![screenshot](./images/tn.png)

-> Note that the main branch is in development phase, UI or configuration may vary.
-
-
 ## Features

- [x] 🌗 Dark mode
- [x] 📚 Multilingual mode
- [x] 🏳️‍🌈 Code highlighting - VSCode dark+
- [x] 🔢 Math - KaTeX
- [x] 💹 Flowcharts - Mermaid
- [x] 🧑‍💻 Comment - Disqus, Utterances, Giscus
- [x] 🔎 Search - FuseJS
- [x] 〽️ Google analytics
- [x] 🔗 External link
- [x] ✉️ RSS
+- [x] Light/dark mode
+- [x] VSCode-style code hightlighting
+- [x] KaTeX
+- [x] Mermaid
+- [x] Google analytics
+- [x] Disqus/Utterances comments
+- [x] Optional ToC 

 ## Usage

@ -26,54 +20,42 @@ Before using Minima, make sure you've got Hugo (extended version) installed on y

 ### Installation

-You can use either `git submodule` or `git clone` to fetch this theme into the directory where Hugo places themes.
-
-#### Git Submodule
+Suppose `blog` is where you place your sources.

 ```bash
+cd blog
+git init
 git submodule add --depth 1 https://github.com/mivinci/hugo-theme-minima.git themes/minima
 ```

-#### Git Clone
+Or  `clone` directly if you don't wanna use the Git submodule.

 ```bash
 git clone https://github.com/mivinci/hugo-theme-minima.git themes/minima
 ```

+Anyways, you just need to put Minima under the `blog/themes` directory.

 ### Configuration

-Follow [exampleSite/config.yaml](https://github.com/Mivinci/hugo-theme-minima/blob/main/exampleSite/config.yaml) and edit your own one.
+Follow [exampleSite/config.toml](https://github.com/Mivinci/hugo-theme-minima/blob/main/exampleSite/config.toml) and edit your own `blog/config.toml` file.

-## Supported Front Matters
+### Supported Front Matters

-| Attr       | Type   | Explanation |
-|:----------- |:------ |:------------|
-| title       | string | title |
-| description | string | description |
-| date        | string | creation time |
-| categories  | array<string>  | category list |
-| series      | array<string>  | series list |
-| tags        | array<string>  | tag list |
-| math        | bool   | enables math plugin |
-| diagram     | bool   | enables diagram plugin |
-| comment     | bool   | enable comment plugin |
-| draft       | bool   | disallow being published |
-| link        | string | a URL to redirect to |
+| Field       | Type   | Explanation                                            |
+| ----------- | ------ | ------------------------------------------------------ |
+| title       | string | Title of the post, will be rendered in a `h1` tag      |
+| description | string | Description of the post, will be rendered in a `p` tag |
+| date        | string | Datetime that the post is written                      |
+| categories  | array  | Array of categories the posts belongs to               |
+| series      | array  | Array of series the post belongs to                    |
+| tags        | array  | Array of tags the posts is related to                  |
+| math        | bool   | True if the post needs to render math formulas         |
+| mermaid     | bool   | True if the post needs to render mermaid graphs        |
+| comment     | bool   | True if the post allows people to make comments        |
+| draft       | bool   | True if the post isn't already to production           |
+| toc         | bool   | True if the post needs a ToC                           |

-
-## Contribution
-
-I'm currently looking for i18n contributors :)
-
-## Feedback
+### Feedback

 Feedbacks are welcome [here](https://github.com/Mivinci/hugo-theme-minima/issues).
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=mivinci/hugo-theme-minima&type=Date)](https://star-history.com/#star-history/star-history&Date)
-
-## License
-
-Hugo Minima is MIT licensed.
--- a/assets/css/atom.scss
+++ b/assets/css/atom.scss
@ -1,103 +0,0 @@
-@mixin breakpoint($k, $v) {
-  @if $k == "" {
-    @content;
-  }
-  @else {
-    @media (min-width: $v) {
-      @content;
-    }
-  }
-}
-
-/* classes that breakpoints are necessary for */
-$screens: ("", 0), (sm\:, 640px);
-@each $k, $v in $screens {
-  @include breakpoint($k, $v) {
-    .#{$k}flex { display: flex; }
-    
-    .#{$k}flex-row { flex-direction: row; }
-    
-    .#{$k}flex-col { flex-direction: column; }
-
-    .#{$k}flex-col-reverse { flex-direction: column-reverse; }
-    
-    .#{$k}justify-between { justify-content: space-between; }
-    
-    .#{$k}items-center { align-items: center; }
-    
-    .#{$k}items-start { align-items: flex-start; }
-    
-    .#{$k}items-end { align-items: flex-end; }
-    
-    .#{$k}items-baseline { align-items: baseline; }
-
-    .#{$k}text-center { text-align: center; }
-
-    .#{$k}text-left { text-align: left; }
-  }
-}
-
-/* layout */
-.container {
-  max-width: var(--max-w);
-}
-
-.hidden {
-  display: none;
-}
-
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
-.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-/* spacing */
-$u: 0.25;
-@each $i, $class in (p, padding), (m, margin) {
-  @each $j, $size in (t, top), (r, right), (b, bottom), (l, left) {
-    @each $k in 0,1,2,3,4,5,6,7,8 {
-      .#{$i}#{$j}-#{$k} {
-        #{$class}-#{$size}: #{$u * $k}rem;
-      }
-    }
-  }
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* typography */
-$weights: (thin, 100), (extralight, 200), (light, 300), (normal, 400), 
-          (medium, 500), (semibold, 600), (bold, 700), (extrabold, 800);
-@each $k, $v in $weights {
-  .font-#{$k} {
-    font-weight: #{$v};
-  }
-}
-
-$texts: (xs, 0.75), (sm, 0.875), (base, 1), (lg, 1.125), (xl, 1.25),
-        (2xl, 1.5), (3xl, 1.875), (4xl, 2.25), (5xl, 3), (6xl, 3.75);
-@each $k, $s in $texts {
-  .text-#{$k} {
-    font-size: #{$s}rem;
-  }
-}
-
-.whitespace-nowrap {
-  white-space: nowrap;
-}
-
-.list-disc {
-  list-style-type: disc;
-  padding-inline-start: 22px;
-}
-
-/* interactivity */
-.cursor-pointer {
-  cursor: pointer;
-}
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@ -1,73 +0,0 @@
-@import "./pre.scss";
-@import "./theme.scss";
-@import "./atom.scss";
-@import "./md.scss";
-@import "./syntax.scss";
-
-
-:root {
-  --max-w: 1080px;
-  --font: -apple-system, BlinkMacSystemFont, 'MiSans Latin', MiSans, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-html {
-  font-size: 16px;
-  -webkit-text-size-adjust: 100%;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  box-sizing: border-box;
-  border-collapse: collapse;
-}
-
-body {
-  margin: 0 16px;
-  font-family: var(--font);
-  font-weight: 400;
-  line-height: 2.2;
-  background-image: var(--back-image);
-  background-color: var(--back);
-  color: var(--text);
-  transition-property: background-color, border-color, color;
-  transition-duration: 0.5s;
-}
-
-main {
-  animation: showup 0.7s;
-}
-
-main p a {
-  color: var(--prime);
-}
-
-main p a:hover {
-  text-decoration: underline;
-}
-
-main .search > input {
-  width: 100%;
-  padding: .5em;
-  font-size: large;
-  border: 2px solid var(--grid);
-  border-radius: 2px;
-  background-color: transparent;
-  outline: none;
-}
-
-@keyframes showup {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-@media (min-width: 640px) {
-  body {
-    margin-top: calc(1rem + 2vh);
-  }
-}
--- a/assets/css/md.scss
+++ b/assets/css/md.scss
@ -1,118 +0,0 @@
-$heading: (h1, 2.25, 800), (h2, 2, 700), (h3, 1.75, 600), (h4, 1.5, 600),
-           (h5, 1.25, 500), (h6, 1, 400);
-@each $tag, $size, $weight in $heading {
-  .md #{$tag} {
-    font-size: #{$size}rem;
-    font-weight: $weight;
-    margin-top: 1rem;
-    margin-bottom: .75rem;
-  }
-}
-
-.md p {
-  margin: .75rem 0;
-}
-
-.md pre {
-  font-size: 13px;
-  line-height: 1.3;
-}
-
-.md blockquote {
-  background-color: #94949514;
-  padding: 1px .85em;
-  border-left: 4px solid var(--prime);
-  font-style: italic;
-}
-
-.md table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  display: block;
-  max-width: 100%;
-  width: 100%;
-  margin: 1em 0;
-  overflow: auto;
-}
-
-.md table thead {
-  border-top: 2px solid var(--text);
-  border-bottom: 1px solid var(--text);
-}
-
-.md table tbody {
-  border-bottom: 2px solid var(--text);
-}
-
-.md table th,
-.md table td {
-  padding: .25rem 1rem;
-}
-
-.md img {
-  max-width: 100%;
-}
-
-.md .katex {
-  overflow: auto hidden;
-}
-
-.md ul {
-  list-style: disc;
-  padding-inline-start: 30px;
-}
-
-.md ol {
-  list-style: decimal;
-  padding-inline-start: 30px;
-}
-
-.md ul input[type="checkbox"] {
-  margin: 0;
-  margin-right: 5px;
-}
-
-.md ul:has(input) {
-  list-style: none;
-  padding-inline-start: 8px;
-}
-
-.md li {
-  margin-bottom: .5rem;
-  line-height: 1.5;
-}
-
-.md ol,
-.md ul,
-.md img,
-.md blockquote,
-.md .highlight {
-  margin: .75rem 0;
-}
-
-.md blockquote p {
-  margin: .45rem 0;
-  line-height: 1.5;
-  font-size: .95rem;
-}
-
-.md hr {
-  margin: 1.5rem 0;
-}
-
-.md .footnotes {
-  word-break: break-all;
-  font-size: .9rem;
-}
-
-.md p sup {
-  margin-left: 4px;
-}
-
-.md a {
-  color: var(--prime);
-}
-
-.md a:hover {
-  text-decoration: underline;
-}
--- a/assets/css/pre.scss
+++ b/assets/css/pre.scss
@ -1,141 +0,0 @@
-/* This file is taken from https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-*/
-html {
-  --default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  line-height: 1.5;
-  font-family: var(--font, --default-font);
-  font-feature-settings: normal;
-}
-
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-body {
-  margin: 0;
-  line-height: inherit;
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-  border-color: var(--grid, inherit);
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-p,
-pre,
-figure,
-dl,
-dd,
-blockquote,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-.tag,
-p code {
-  font-size: .8em;
-  padding: 0.1em 0.3em;
-  border-radius: 1px;
-  background-color: #9999993b;
-}
-
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: var(--prime, inherit);
-}
-
-/*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
-*/
-
-
-kbd,
-samp,
-pre,
-code {
-  --default-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-family: var(--font-mono, --default-font-mono);
-}
-
-
-pre {
-  overflow-x: auto;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-button,
-select {
-  text-transform: none;
-}
-
-::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(128, 128, 128, 0.7);
-}
-::-webkit-scrollbar-thumb:window-inactive {
-  background: rgba(128, 128, 128, 0.2);
-}
-
-::-webkit-scrollbar-thumb:active {
-  background-color: rgb(128, 128, 128);
-}
--- a/assets/css/theme.scss
+++ b/assets/css/theme.scss
@ -1,69 +0,0 @@
-:root {
-  // code highlighting
-  --code-back: #f6f8fa;
-  --code-text: #24292f;
-  --code-line-number: #999;
-  --code-keyword: #cf222e;
-  --code-attribute: #0550ae;
-  --code-literal-string: #0a3069;
-  --code-literal-number: #b5cea8;
-  --code-comment: #6e7781;
-  --code-builtin-type: #cf222e;
-  --code-function: #0550ae;
-  --code-meta: #cf222e;
-  --code-highlighted-line: #e9e9e9;
-}
-
-.light {
-  --prime: #3170a7;
-  --grid: #e1e1e1;
-  --back: #fff;
-  --text: #333;
-}
-
-.dark {
-  --prime: #3170a7;
-  --back: #181818;
-  --text: silver;
-  --grid: #555;
-
-  // code highlighting
-  --code-back: #1d1d1d;
-  --code-text: #d4d4d4cc;
-  --code-line-number: #999999ca;
-  --code-keyword: #569cd6cb;
-  --code-attribute: #9cdcfecb;
-  --code-literal-string: #ce9178;
-  --code-literal-number: #b5cea8;
-  --code-comment: #517043d5;
-  --code-builtin-type: #4ec9b0cb;
-  --code-function: #dcdcaaca;
-  --code-meta: #c586c0cb;
-  --code-highlighted-line: #9494951b;
-}
-
-.sand {
-  --prime: #3170a7;
-  --back: #e6dece;
-  --text: #434343;
-  --grid: #555;
-
-  --code-back: #dbd3c1be;
-  --code-text: #24292f;
-  --code-highlighted-line: #cec3ac;
-
-  --back-image: url('texture.png');
-}
-
-.rock {
-  --prime: #3170a7;
-  --back: #ccc;
-  --text: #434343;
-  --grid: #555;
-
-  --code-back: #c1c1c1be;
-  --code-text: #24292f;
-  --code-highlighted-line: #afaeae;
-
-  --back-image: url('texture.png');
-}
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -1,6 +1,3 @@
-import { setup_theme_switch } from "./theme"
-import { setup_selectable } from './selectable'
-
-
-setup_theme_switch('theme-switch')
-setup_selectable()
+import "./theme";
+import "./style";
+import "./selectable";
--- a/assets/js/min/fuse.basic.min.js
+++ b/assets/js/min/fuse.basic.min.js
--- a/assets/js/search.js
+++ b/assets/js/search.js
@ -1,24 +0,0 @@
-import * as params from '@params';
-
-const search_input = document.querySelector("#search-input");
-const search_result = document.querySelector("#search-result");
-
-let fuse;
-
-window.onload = async function() {
-  const data = await fetch("../index.json").then(res => res.json());
-  const opts = params.search.fuse;
-  fuse = new Fuse(data, opts);
-}
-
-search_input.addEventListener("input", function () {
-  if (!fuse) return;
-  const results = fuse.search(this.value.trim());
-  let html = '';
-  if (results.length > 0) {
-    for (const v of results) {
-      html += `<li><a href="${v.item.permalink}">${v.item.title}</a></li>`;
-    }
-  }
-  search_result.innerHTML = html;
-})
--- a/assets/js/selectable.js
+++ b/assets/js/selectable.js
@ -1,8 +1,4 @@
-import * as params from '@params';
-
-export function setup_selectable () {
-  const selectable = params.selectable
-  if (!selectable) {
-    document.documentElement.style = 'user-select:none'
-  }
+const selectable = '{{ .Site.Params.selectable }}'
+if (selectable === 'false') {
+  document.documentElement.style = 'user-select:none'
 }
--- a/assets/js/style.js
+++ b/assets/js/style.js
@ -0,0 +1,9 @@
+// fix style of checkboxes in posts.
+document.querySelectorAll('.md ul').forEach(v => {
+  if (/<li><input .+>.+<\/li>/.test(v.innerHTML)) {
+    v.classList.add('ul-checkbox');
+  }
+});
+
+// use custom font family
+document.querySelector('body').style.setProperty('--global-font-family', '{{ .Site.Params.globalFontFamily }}');
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@ -1,75 +1,40 @@
-import * as params from '@params';
+const light = '{{ index .Site.Params.switch 1 }}'
+const dark = '{{ index .Site.Params.switch 0 }}'
+const comment = '{{ .Site.Params.comment }}'
+const LIGHT = 'light', DARK = 'dark'

-const comment = params.comment.provider
-const default_theme_config = params.defaulttheme
-const icon_light = params.switch[1]
-const icon_dark = params.switch[0]
-const THEME_LIGHT = default_theme_config === 'system' ? 'light' : default_theme_config
-const THEME_DARK = 'dark'
+const themeSwitcher = document.getElementById('theme-switcher')

-/** @type {HTMLElement} */
-let toggler
-/** @type {HTMLIFrameElement} */
-let utterances
-/** @type {HTMLIFrameElement} */
-let giscus
+// set switcher
+themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark

-/** @param {string} id */
-export function setup_theme_switch(id) {
-  if (!toggler) {
-    toggler = document.getElementById(id)
-  }
-  toggler.innerHTML = localStorage.theme === THEME_LIGHT ? icon_light : icon_dark
-  toggler.addEventListener('click', switch_theme);
-}
+themeSwitcher.addEventListener('click', function () {
+  const currentTheme = localStorage.theme
+  const newTheme = currentTheme === LIGHT ? DARK : LIGHT
+  
+  // switch global theme
+  switchMinimaTheme(currentTheme, newTheme)

-function switch_theme() {
-  const current = localStorage.getItem('theme')
-  const next = current === THEME_LIGHT ? THEME_DARK : THEME_LIGHT
+  // switch utterance theme if necessary

-  switch_minima_theme(current, next)
+  if (comment === 'utterances')
+    switchUtteranceTheme(`github-${newTheme}`)
+});

-  switch (comment) {
-    case 'utterances':
-      switch_utterances_theme(`github-${next}`)
-      break
-    case 'giscus':
-      switch_giscus_theme(next)
-      break
-    default:
-  }
-}
-
-/**
- * @param {string} current  
- * @param {string} next 
- */
-function switch_minima_theme(current, next) {
+function switchMinimaTheme(oldTheme, newTheme) {
  const { classList } = document.documentElement
-  const icon = next === THEME_LIGHT ? icon_light : icon_dark;
-
-  classList.remove(current);
-  classList.add(next);
-  localStorage.setItem('theme', next);
-  toggler.innerHTML = icon;
+  const text = newTheme === LIGHT ? light : dark;
+  
+  classList.remove(oldTheme);
+  classList.add(newTheme);
+  localStorage.theme = newTheme;
+  themeSwitcher.innerHTML = text;
 }

-/** @param {string} theme  */
-function switch_utterances_theme(theme) {
-  if (theme !== 'dark') {
-    theme = 'light'
-  }
-  utterances = utterances || document.querySelector('iframe.utterances-frame')
-  if (!utterances) return
-  utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es')
-}
+const utteranceClassName = '.utterances-frame'
+let utterance;

-/** @param {string} theme */
-function switch_giscus_theme(theme) {
-  if (theme !== 'dark') {
-    theme = 'light_protanopia'
-  }
-  giscus = giscus || document.querySelector('iframe.giscus-frame')
-  if (!giscus) return
-  giscus.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, 'https://giscus.app')
-}
+function switchUtteranceTheme(theme) {
+  if (!utterance) utterance = document.querySelector(utteranceClassName)
+  utterance.contentWindow.postMessage({type: 'set-theme', theme}, 'https://utteranc.es')
+}
--- a/assets/sass/atom.scss
+++ b/assets/sass/atom.scss
@ -0,0 +1,150 @@
+* {
+  line-height: 1;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  outline: none;
+}
+
+header nav a {
+  line-height: 1.8;
+}
+
+$unit: 0.25rem;
+$scales: 0, 1, 2, 3, 4, 5, 6, 7, 8, 1.5;
+$screens: (
+  sm\:: 640px,
+);
+
+@mixin scale_with_prefix($prefix, $scale) {
+  $size: $scale * $unit;
+  .#{$prefix}mt-#{$scale} {
+    margin-top: $size;
+  }
+  .#{$prefix}mb-#{$scale} {
+    margin-bottom: $size;
+  }
+  .#{$prefix}ml-#{$scale} {
+    margin-left: $size;
+  }
+  .#{$prefix}mr-#{$scale} {
+    margin-right: $size;
+  }
+  .#{$prefix}my-#{$scale} {
+    margin-top: $size;
+    margin-bottom: $size;
+  }
+  .#{$prefix}mx-#{$scale} {
+    margin-left: $size;
+    margin-right: $size;
+  }
+
+  .#{$prefix}pb-#{$scale} {
+    padding-bottom: $size;
+  }
+  .#{$prefix}py-#{$scale} {
+    padding-top: $size;
+    padding-bottom: $size;
+  }
+}
+
+@each $scale in $scales {
+  @include scale_with_prefix("", $scale);
+
+  @each $screen, $size in $screens {
+    @media (max-width: $size) {
+      @include scale_with_prefix($screen, $scale);
+    }
+  }
+}
+
+@mixin style_with_prefix($prefix) {
+  .#{$prefix}block {
+    display: block;
+  }
+  .#{$prefix}flex {
+    display: flex;
+  }
+  .#{$prefix}flex-row {
+    flex-direction: row;
+  }
+  .#{$prefix}flex-col {
+    flex-direction: column;
+  }
+  .#{$prefix}flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .#{$prefix}justify-between {
+    justify-content: space-between;
+  }
+  .#{$prefix}flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  .#{$prefix}items-center {
+    align-items: center;
+  }
+  .#{$prefix}self-start {
+    align-self: flex-start;
+  }
+  .#{$prefix}hidden {
+    display: none;
+  }
+  .#{$prefix}text-xs {
+    font-size: .8rem;
+  }
+  .#{$prefix}text-sm {
+    font-size: .9rem;
+  }
+  .#{$prefix}text-md {
+    font-size: 1.25rem;
+  }
+  .#{$prefix}text-xl {
+    font-size: 1.5rem;
+  }
+  .#{$prefix}text-2xl {
+    font-size: 1.75rem;
+  }
+  .#{$prefix}text-3xl {
+    font-size: 2rem;
+  }
+  .#{$prefix}text-4xl {
+    font-size: 2.25rem;
+  }
+}
+
+@include style_with_prefix("");
+@each $screen, $size in $screens {
+  @media (max-width: $size) {
+    @include style_with_prefix($screen);
+  }
+}
+
+// border width
+.bw-0 {
+  border-width: 0;
+}
+
+// width
+.min-w-32 {
+  min-width: 0.25 * 32rem;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.not-first\:ml-3 {
+  &:not(:first-child) {
+    margin-left: 0.75rem;
+  }
+}
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -0,0 +1,139 @@
+@import "atom.scss";
+@import "markdown.scss";
+@import "syntax.scss";
+@import "toc.scss";
+
+:root {
+  --pm: #0fa0ce;
+  --bd: #e1e1e1;
+  --bg: #fff;
+  --ft: #222;
+  --tag: #333;
+
+  --w-mobile: 640px;
+
+  --global-font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+html.dark {
+  --bg: #181818;
+  --ft: silver;
+  --bd: #555;
+  --tag: #999;
+
+  --ovo-ft: var(--ft);
+  --ovo-bdr: var(--bd);
+  --ovo-bg: var(--bg);
+  --ovo-bg-hvr: #555;
+  --ovo-tag: #30363d;
+}
+
+body {
+  font-family: var(--global-font-family);
+  max-width: var(--w-mobile);
+  margin: 3rem auto 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--ft);
+  background-color: var(--bg);
+  transition-property: background-color, border-color, color;
+  transition-duration: 0.5s;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: "Noto Serif SC", 'Times New Roman', Times, sans-serif;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+p {
+  line-height: 1.8;
+  text-align: justify;
+}
+
+hr {
+  border-width: 0;
+  border-top: 1px solid var(--bd);
+}
+
+pre,
+code {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 13px;
+}
+
+.tag,
+p code {
+  background-color: var(--bd);
+  padding: 0.2em 0.4em;
+  border-radius: 1px;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover {
+  color: var(--pm);
+}
+
+main {
+  animation: showup 0.7s;
+}
+
+p a {
+  font-style: italic;
+  text-decoration: underline;
+}
+
+footer a {
+  font-style: unset;
+  text-decoration: none;
+}
+
+header nav {
+  color: var(--tag);
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.7);
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(128, 128, 128, 0.2);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgb(128, 128, 128);
+}
+
+h1::-webkit-scrollbar,
+nav::-webkit-scrollbar {
+  display: none;
+  width: 0;
+}
+
+@keyframes showup {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.home-intro {
+  line-height: 1.65;
+}
--- a/assets/sass/markdown.scss
+++ b/assets/sass/markdown.scss
@ -0,0 +1,73 @@
+.md blockquote {
+  background-color: rgba(148, 148, 149, 0.08) ;
+  padding: 1px 1rem;
+  border-left: 8px solid var(--pm);
+  font-style: italic;
+}
+
+.md table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  display: block;
+  max-width: 100%;
+  width: 100%;
+  margin: 1em 0;
+  overflow: auto;
+}
+
+.md table thead {
+  background-color: var(--bd);
+}
+
+.md table th, 
+.md table td {
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--bd);
+}
+
+.md img {
+  max-width: 100%;
+}
+
+.md .katex {
+  overflow: auto hidden;
+}
+
+.md ul input[type="checkbox"] {
+  margin-right: 3px;
+}
+
+.md .ul-checkbox {
+  list-style: none;
+  padding-inline-start: 20px;
+}
+
+.md li {
+  margin-bottom: 1rem;
+}
+
+.md ol,
+.md ul,
+.md img,
+.md blockquote,
+.md .highlight {
+  margin: .75rem 0;
+}
+
+.md hr {
+  margin: 1.5rem 0;
+}
+
+.md .footnotes {
+  word-break: break-all;
+  font-size: .9rem;
+}
+
+.md p sup {
+  margin-left: 4px;
+}
+
+.md a {
+  font-style: italic;
+  text-decoration: underline;
+}
--- a/assets/sass/syntax.scss
+++ b/assets/sass/syntax.scss
@ -1,12 +1,15 @@
-.chroma {
-  margin: .5em 0;
-  background-image: var(--back-image);
-  background-color: var(--code-back);
-  border-radius: 2px;
+pre[class*="language-"],
+code[class*="language-"] {
+  color: #d4d4d4;
+  font-size: 13px;
+  text-shadow: none;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  line-height: 1.5;
 }

-.chroma code {
-  color: var(--code-text);
+.chroma {
+  background-color: #292929;
+  margin: .5em 0;
 }

 /* LineTableTD */
@ -17,33 +20,25 @@
  border: 0;
 }

-.chroma .lntable tbody {
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
  border: 0;
-}
-
-.chroma .lntable td:nth-child(2) {
-  width: 100%;
-}
-
-.chroma .lnt,
-.chroma .line {
+  width: auto;
+  overflow: auto;
  display: block;
-  line-height: 1.3;
 }

 /* LineNumbersTable */
 .chroma .lnt {
-  color: var(--code-line-number);
-  padding-left: .9em;
+  color: #999;
+  display: block;
+  padding-left: .5em;
  padding-right: 1em;
  text-align: right;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-}
-
-.chroma .hl .lnt {
-  display: inline;
+  line-height: 1.5;
+  font-size: 13px;
 }

 /* Keyword */
@ -52,29 +47,29 @@
 .chroma .kn,
 .chroma .kp,
 .chroma .kr,
-// .chroma .kt,
+.chroma .kt,
 .chroma .k,
 .chroma .si {
-  color: var(--code-keyword);
+  color: #569cd6;
 }

 .chroma .na {
-  color: var(--code-attribute);
+  color: #9cdcfe;
 }

-// .chroma .n,
+.chroma .n,
 .chroma .nb,
 .chroma .bp,
-// .chroma .nc,
+.chroma .nc,
 .chroma .no,
 .chroma .nd,
 .chroma .ni,
 .chroma .ne,
-// .chroma .nf,
+.chroma .nf,
 .chroma .fm,
 .chroma .nl,
 .chroma .nn {
-  color: var(--code-keyword);
+  color: #569cd6;
 }

 /* NameProperty */
@ -85,7 +80,7 @@
 .chroma .vg,
 .chroma .vi,
 .chroma .vm {
-  color: var(--code-keyword);
+  color: #569cd6;
 }

 /* LiteralString */
@ -101,11 +96,9 @@
 .chroma .sx,
 .chroma .sr,
 .chroma .s1,
-.chroma .ss,
-.chroma .cpf {
-  color: var(--code-literal-string);
+.chroma .ss {
+  color: #ce9178;
 }
-
 /* LiteralNumber */
 .chroma .m,
 .chroma .mb,
@ -114,7 +107,7 @@
 .chroma .mi,
 .chroma .il,
 .chroma .mo {
-  color: var(--code-literal-number);
+  color: #b5cea8;
 }

 /* Comment */
@ -123,25 +116,6 @@
 .chroma .cm,
 .chroma .c1,
 .chroma .cs {
-  color: var(--code-comment);
+  color: #517043;
 }

-.chroma .nb,
-.chroma .kt {
-  color: var(--code-builtin-type);
-}
-
-.chroma .fm,
-.chroma .nf {
-  color: var(--code-function);
-}
-
-
-.chroma .cp {
-  color: var(--code-meta);
-}
-
-.chroma .hl {
-  display: block;
-  background-color: var(--code-highlighted-line);
-}
--- a/assets/sass/toc.scss
+++ b/assets/sass/toc.scss
@ -0,0 +1,89 @@
+details.toc {
+  position: sticky;
+  top: 0;
+  background-color: var(--bg);
+  transition: .5s all;
+}
+
+details.toc summary {
+  position: relative;
+  width: fit-content;
+  cursor: pointer;
+  background-color: var(--bg);
+  transition: .5s all;
+}
+
+details.toc div {
+  background-color: var(--bg);
+  transition: .5s all;
+}
+
+details.toc ul {
+  list-style-type: none;
+  padding-inline-start: 1em;
+  margin: 0;
+}
+
+details.toc ul > li {
+  margin: 1em 0;
+}
+
+details.toc-bar,
+details.toc-lines {
+  & summary {
+    padding-right: 0.5em;
+    list-style: none;
+  }
+  & summary::-webkit-details-marker {
+    display: none;
+  }
+  & div {
+    padding-top: 1em;
+  }
+}
+
+details.toc-bar {
+  top: 1rem;
+  background-color: transparent;
+
+  & div {
+    top: -1em;
+    padding-top: 2em;
+    background-color: var(--bg);
+  }
+
+  & summary {
+    --toc-bar-ht: 4px;
+    --toc-bar-wd: 8%;
+    width: var(--toc-bar-wd);
+    height: var(--toc-bar-ht);
+    margin-left: calc(50% - var(--toc-bar-wd) / 2);
+    border-radius: calc(var(--toc-bar-ht) / 2);
+    background-color: var(--ft);
+    box-shadow: var(--bg) 0 0 8px 8px;
+  }
+}
+
+details.toc-default,
+details.toc-lines {
+  & summary {
+    padding-top: 1em;
+  }
+}
+
+details.toc-lines {
+  & summary::before {
+    content: "≡";
+    font-size: 1.5em;
+    position: relative;
+    top: 0;
+  }
+}
+
+details[open] {
+  &.toc-lines summary::before {
+    content: "×";
+    font-size: 1.7em;
+    top: -4px;
+  }
+}
--- a/data/svg.toml
+++ b/data/svg.toml
@ -1,14 +1,5 @@
-github = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>'
-email = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 21" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>'
-linkedin = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>'
-twitter = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg>'
-facebook = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>'
-rss = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>'
-instagram = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37zM17.5 6.5"/></svg>'
-mastodon = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.58 13.913c-.29 1.469-2.592 3.121-5.238 3.396-1.379.184-2.737.368-4.185.276-2.368-.092-4.237-.551-4.237-.551 0 .184.014.459.043.643.308 2.294 2.317 2.478 4.22 2.57 1.922 0 3.633-.46 3.633-.46l.079 1.653s-1.344.734-3.738.918c-1.32.091-2.96-.092-4.869-.551-4.14-1.102-4.853-5.507-4.961-10.005-.034-1.285-.013-2.57-.013-3.58 0-4.589 3-5.966 3-5.966 1.513-.734 4.11-1.01 6.808-1.01h.067c2.699 0 5.296.276 6.81 1.01 0 0 3 1.377 3 5.967 0 0 .037 3.304-.419 5.69"/><path d="M17.832 8.633v5h-1.978V8.78c0-1.023-.43-1.542-1.29-1.542-.95 0-1.427.616-1.427 1.834v2.655H11.17V9.072c0-1.218-.476-1.834-1.427-1.834-.86 0-1.29.52-1.29 1.542v4.852H6.475V8.633c0-1.022.26-1.834.782-2.434.538-.6 1.243-.909 2.118-.909 1.012 0 1.779.39 2.286 1.169l.492.827.493-.827c.507-.78 1.274-1.169 2.286-1.169.875 0 1.58.308 2.118.909.522.6.782 1.412.782 2.434" fill="currentColor" stroke="none"/></svg>'
-keybase = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 71 76.3" version="1.1" fill="currentColor" stroke="none">    <path        d="M6.68 73.99c-.6-1.3-1.4-3.1-1.8-4l-.6-1.7-2 2.2-2 2.2-.2-4.2c-.3-6 .2-12.2 1.2-16.6 2.3-9.8 9.5-18.7 18.8-23.4l2.1-1-.5-1.5c-.3-.8-.6-2.5-.7-3.6l-.2-2.1-2.1-.2c-3.2-.3-4.9-1.2-6-3.5-.6-1.2-.6-1.4-.4-4.6.2-4.2.5-5.1 1.8-6.5 1.6-1.8 2.7-2.1 6.7-1.9 2.9.2 3.5.3 4.8.9.8.4 1.5.8 1.6.8.1 0 1-1.1 2.1-2.6l1.9-2.7 1.2.7c.7.4 1.5.9 1.9 1.1l.7.4-.6 1.5c-.3.8-.7 2.2-.8 2.9l-.2 1.4 1.7.2c6.1.6 10.7 4.3 12.4 9.9.5 1.8.5 5.3 0 7-.5 1.6-.5 1.7-.1 1.7.7 0 5.4 2.3 7.3 3.5 3.7 2.4 8 6.6 10.4 10.2 4.5 6.7 6.4 14 5.6 22-.4 4.8-1.3 8.6-2.9 12.3l-.6 1.4h-5l1.2-2.4c1.3-2.6 2.3-6.2 2.8-9.4.3-2.2.4-8.2.1-9.3l-.2-.7-1.3 1.4c-3.2 3.5-7.9 4.5-14.2 2.8-5.4-1.4-7.6-1.7-12.7-1.7-3.9 0-5.2.1-7.3.6-5.8 1.3-9.9 3.2-15.6 7.3-2.1 1.5-3.8 2.7-3.9 2.7-.1 0 .2-1 .6-2.3.4-1.3 1.1-3.4 1.5-4.8l.8-2.5-.9.9c-.5.5-1.9 1.9-3.1 3.2l-2.1 2.3.5 1.9c.6 2.5 2 5.6 3.5 7.9.6 1 1.1 1.8 1.1 1.9s-1.2.1-2.6.1h-2.6l-1.1-2.1zm8.8-24.2c4.8-5.1 8.7-9.2 8.8-9.2.1.1-.4 1.6-.9 3.3-3.3 10.4-4 12.4-3.9 12.5 0 0 1.2-.4 2.5-.9 8.5-3.7 18.4-4.2 28.9-1.4 4.7 1.2 6.5 1.2 8.8 0 1.3-.7 1.8-1.1 2.4-2.1 1.1-1.7 1.2-4.1.5-6.3-1.7-4.8-8.3-11-14.5-13.7-3.2-1.4-3.4-1.4-4.1-.7l-.6.6 2.6 3.2c1.4 1.7 2.9 3.6 3.1 4.1.6 1.2.7 3.1.1 4.3-.8 1.7-3.2 2.9-5.1 2.5-.8-.2-1.1-.1-1.9.5-2.2 1.6-4.6 1.2-6.6-1.2-1.6-1.8-2-2.7-2.1-4.5 0-.9-.3-2-.5-2.4-.3-.6-.4-1.3-.4-2.2l.1-1.4-1.3-.3c-1.8-.5-3.9-1.5-5.1-2.4-.6-.4-1.1-.8-1.3-.8s-1.5.6-2.9 1.3c-9.7 5-16 14.3-17 24.8-.1 1-.2 2.3-.3 2.8l-.1.9 1.1-1.1c.5-.5 4.9-5.1 9.7-10.2zm25.9-7.4c.9-.7 1.7-1.3 1.9-1.3.1 0 .4.3.7.7.5.8 1.4.8 1.8.1.3-.5.3-.6-5.6-7.8-3.5-4.3-4.2-5-4.7-5-1.2.1-.9 1 1 3.3l1.8 2.2-1 .8c-1.1 1-1.2 1.2-.5 1.8.5.5.6.4 1.6-.3l1.1-.7.7.6c.4.3.6.8.6.9 0 .2-.8.9-1.7 1.7-.9.7-1.6 1.5-1.6 1.7 0 .3.5 1.1 1.4 2.2.3.6.8.4 2.5-.9zm-10.3-14.2c.6-1.8 2.6-3.2 4.6-3.2 1.1 0 2.7.9 3.8 2.1l1 1.2.9-1.1c2.5-2.8 2.8-6.7.8-10.1-1.5-2.5-4.3-4-8.2-4.4-2.1-.2-2.6-.4-3.7-1.5l-.8-.8-.4.6c-.8 1.2-2.5 5.1-3 6.6-.7 2.3-.4 5.9.5 7.7.9 1.7 3.3 4 4 3.7.1.1.3-.3.5-.8zm-8.9-13.6c.2-.5.7-1.8 1.2-2.8.5-1 .9-2 .9-2.3 0-.9-1-1.3-3.7-1.5-2.4-.2-2.6-.1-3.1.4-.4.4-.6.9-.6 1.6 0 .6-.1 1.7-.2 2.6-.2 2.1.1 2.5 2.2 2.8 3.1.2 3 .2 3.3-.8zm-3.1-2.4c0-1.7.2-1.9 1.6-1.9h1.3v2.8h-2.8v-.9zm6.3 58.3c-.6-.6-.8-1-.8-2 0-1.9 1.1-3 2.9-3 1.7 0 2.9 1.2 2.9 2.9 0 1.8-1.1 2.8-3 2.9-1 0-1.4-.2-2-.8zm19.3.3a2.93 2.93 0 011.8-5.3c1.8 0 2.8 1.1 2.9 3 0 1.1-.1 1.4-.8 2s-1 .8-2 .8c-.9 0-1.5-.2-1.9-.5z" /></svg>'
-matrix = '<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033a3.312 3.312 0 0 1 1.117-1.024c.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282a1.637 1.637 0 0 0-.439.595c-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>'
-neteasemusic= '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M10.98 23.65c-2.69 0-5.26-1.05-7.24-2.95a11.13 11.13 0 0 1-3.39-7.97c0-4.52 2.86-8.62 7.11-10.21.15-.05.3-.08.45-.08.42 0 .78.21.93.55.12.26.13.51.03.75-.12.28-.38.52-.7.64-3.48 1.3-5.82 4.66-5.82 8.36a9.11 9.11 0 0 0 2.79 6.54c1.6 1.54 3.68 2.39 5.85 2.39h.29c3.49-.12 6.22-1.91 7.47-4.89.08-.2 2.01-4.93-2.59-7.9-.41-.27-.89-.46-1.42-.58l-.6-.14.18.58c.21.68.78 2.52.84 2.93.07.46.07.51.1.92v.18c0 2.3-1.89 4.19-4.22 4.19-2.2 0-3.97-1.73-4.23-4.1-.25-2.35.74-4.4 2.73-5.61.53-.32 1.11-.57 1.73-.75l.33-.1-.48-1.74c-.16-.54-.53-2.38 1.5-3.72.57-.38 1.22-.57 1.91-.57 1.38 0 2.62.74 3.12 1.23.22.22.36.56.36.9 0 .26-.08.48-.23.63-.15.15-.37.23-.63.23-.33 0-.67-.13-.89-.35-.06-.05-.85-.66-1.7-.66-.31 0-.59.08-.82.24-.04.03-.08.05-.12.08-.23.19-.71.73-.47 1.82l.09.34.02.07.35 1.29h.25c1.24.08 2.39.42 3.32 1.01l.05.03c4.82 3.12 4.29 8.12 3.34 10.33-1.54 3.67-4.99 5.95-9.23 6.1h-.37zm.82-15.26c-.43.13-.84.31-1.2.53-.94.57-2.01 1.68-1.79 3.71.12 1.12.87 2.33 2.24 2.33 1.23 0 2.24-1 2.24-2.22s.03-.21-.05-.71c-.07-.46-.91-3.1-1-3.4l-.1-.33-.33.1z"/></svg>'
-paypal = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.144 19.532l1.049-5.751c.11-.606.691-1.002 1.304-.948 2.155.192 6.877.1 8.818-4.002 2.554-5.397-.59-7.769-6.295-7.769H7.43a1.97 1.97 0 0 0-1.944 1.655L2.77 19.507a.857.857 0 0 0 .846.994h2.368a1.18 1.18 0 0 0 1.161-.969zm.823 2.99a.74.74 0 0 0 .666.416h2.313c.492 0 .923-.351 1.003-.837l.759-4.601c.095-.523.597-.866 1.127-.819 1.86.166 5.567-.118 6.85-3.821.554-1.6.705-2.954.408-4.018" style="font-variation-settings:normal" stroke-linejoin="miter"/></svg>'
-pgpkey = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 18l2-2h2l1.36-1.36a6.5 6.5 0 1 0-3.997-3.992L2 18v4h4l2-2v-2z"/><circle cx="17" cy="7" r="1"/></svg>'
-qq = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke-width="2" d="M20.35 18.418c-.46.056-1.794-2.11-1.794-2.11 0 1.254-.646 2.89-2.042 4.072.673.207 2.193.766 1.832 1.376-.293.494-5.02.316-6.385.162-1.365.154-6.093.332-6.386-.162-.362-.61 1.157-1.168 1.832-1.376-1.397-1.182-2.043-2.818-2.043-4.072 0 0-1.333 2.166-1.794 2.11-.215-.026-.497-1.186.374-3.988.41-1.321.88-2.42 1.606-4.232C5.427 5.523 7.36 1.6 11.96 1.6c4.55 0 6.526 3.845 6.41 8.599.725 1.808 1.197 2.914 1.606 4.23.871 2.803.589 3.963.374 3.989z"/></svg>'
+github = '<svg fill="#63636f" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>'
+linkedin = '<svg fill="#0073b1" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'
+twitter = '<svg fill="#1da1f2" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>'
+rss = '<svg fill="#63636f" t="1626591563876" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" width="18" height="16"><path d="M128 768a128 128 0 1 0 0 256 128 128 0 0 0 0-256zM0 368v176c265.104 0 480 214.912 480 480h176c0-362.32-293.696-656-656-656zM0 0v176c468.336 0 848 379.664 848 848h176C1024 458.464 565.536 0 0 0z" p-id="1985"></path></svg>'
+toc = '<svg fill="var(--ft)" width="22" height="22" t="1628036980313" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1020"><path d="M811.6 264.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 522.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 780.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36z" p-id="1021"></path><path d="M210.2 229m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1022"></path><path d="M210.2 487m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1023"></path><path d="M210.2 745m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1024"></path></svg>'
--- a/docs/README_CN.md
+++ b/docs/README_CN.md
@ -0,0 +1,69 @@
+# Minima
+
+Minima 是个简洁但功能完整的 Hugo 主题，是 [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima) 的 Hugo 版本，但对其界面做了些调整，也添加了些功能.。示例网页：[h.xjj.pub](https://h.xjj.pub/)，或直接查看作者的博客网站：[xjj.pub](https://xjj.pub)。
+
+![screenshot](../images/tn.png)
+
+## 功能
+
+- [x] 暗黑模式，点击首页的 Logo 能在黑白两种模式下切换
+- [x] VSCode 风格的代码高亮
+- [x] KaTeX 公式
+- [x] Mermaid 图表
+- [x] Google 分析
+- [x] Disqus、Utterances 评论插件（即将支持 Waline）
+- [x] 文章目录
+- [x] 分类、标签、专栏
+
+## 使用
+
+在使用前，确保您的设备已安装了 Hugo 最新的扩展版本（hugo-extended）
+
+然后确保你的博客根目录（假设为 `blog/`）处在 git 工作区，若没有，则运行下面命令
+
+```bash
+cd blog
+git init
+```
+
+### 安装
+
+在博客根目录使用 git submodule 将 minima 下载到博客的 theme 目录下
+
+```bash
+git submodule add --depth 1 https://github.com/mivinci/hugo-theme-minima.git themes/minima
+```
+
+或直接使用 git 将 minima 克隆到 theme 目录下
+
+```bash
+git clone https://github.com/mivinci/hugo-theme-minima.git themes/minima
+```
+
+总之，要将 minima 放到博客根目录的 theme 目录下。
+
+### 主题配置
+
+根据示例配置 [exampleSite/config.toml](https://github.com/Mivinci/hugo-theme-minima/blob/main/exampleSite/config.toml) 编辑你自己的配置文件 `博客根目录/config.toml` 
+
+### 文章配置
+
+为缩短博客网页的加载和渲染时间，minima 不支持如公式、图表、评论插件的全局配置，需要在每篇文章中设置是否启用相关插件，以下是 minima 目前支持的文章配置。
+
+| 字段          | 类型     | 解释                                |
+| ----------- | ------ | --------------------------------- |
+| title       | string | 文章标题                              |
+| description | string | 文章简介，会显示在标题和正文之间                  |
+| date        | string | 文章创建日期                            |
+| categories  | array  | 文章分类                              |
+| series      | array  | 文章专栏                              |
+| tags        | array  | 文章标签                              |
+| math        | bool   | true：为该文章开启公式渲染                   |
+| mermaid     | bool   | true：为该文章开启图表渲染                   |
+| comment     | bool   | true：为该文章开启评论插件，具体是哪个插件在博客配置文件中设置 |
+| draft       | bool   | true：该篇文章为草稿，不会被打包                |
+| toc         | bool   | true：为该篇文章开启目录显示                  |
+
+### 反馈
+
+欢迎在 [issues](https://github.com/Mivinci/hugo-theme-minima/issues) 下留言，或将问题详细描述发送到我的邮箱：mivinci@qq.com
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@ -0,0 +1,132 @@
+baseURL = "http://h.xjj.pub"
+languageCode = "en-us"
+title = "Hi Folks"
+copyright = "© XJJ 2021"
+paginate = 6
+googleAnalytics = ""
+
+# theme is the name of the hugo theme you choose,
+# `hugo-theme-minima` is put here only for debuging,
+# just name it whatever you're gonna handle the theme.
+theme = "hugo-theme-minima"
+
+# Author has some of your information to be shown on the home 
+# page of your blog.
+[author]
+name = "XJJ"
+slogon = "A student and tech lover from Earth 🌍"
+description = "This is Minima, a clean and minimal Hugo theme porting from [Minima on Hexo](https://github.com/adisaktijrs/hexo-theme-minima). Except for everything from Hexo Minima like dark/light mode, it supports KaTeX and some taxonomies like categories, series and tags. I created this using SCSS, Vanilla JS and most importantly, Hugo. 😁"
+
+
+[params]
+# iam is the beginning words of your self-introduction.
+iam = "I am"
+# The subtitle will be shown after the title of your blog site.
+# e.g. "title - subtitle".
+subtitle = ""
+# Comment decides the comment plugin to be used on your blog site, 
+# e.g. disqus, utterances, ovo.
+comment = "utterances"
+# Timeformat, no matter what format to use, make it the second day of Jan. 2006
+timeformat = "Jan 02, 2006"
+# switch for turning on/off lights.
+switch = ["🌚", "🌝"]
+# If set true, date of posts will be displayed in the homepage.
+displayDate = true
+# If set true, users can select text from your post.
+selectable = true
+# Custom global font. notice: `globalFontFamily` won't be working
+# on texts in some special positions like on titles
+globalFontFamily = 'LXGW WenKai'
+# If set true, all your posts will use the chosen comment plugin
+# except those with a `comment: false` in their front-matter
+commentOnAllPosts = false
+# toc decides the shape of the toc button. e.g. default, lines, bar
+toc = "lines"
+
+# Disqus configuration
+[params.disqus]
+shortname = "hugo-minima"
+
+# Utterance configuration
+# Full doc's at https://utteranc.es
+# **notice**: if you're going to use utterances, you must change the 
+# `repo` to your own repo address that stores comments on your site
+[params.utterances]
+repo = "mivinci/hugo-theme-minima"
+issueTerm = "pathname"
+
+# **deprecated**
+# OvO is a comment plugin written by the author of Minima.
+# It is enabled when params.comment is set "ovo". You can
+# find its documentation on https://github.com/ovojs/ovo.
+# If you are using disqus or utterance, just ignore this field.
+[params.ovo]
+server = ""
+placeholder = ""
+
+
+# Params.social is an array containing your social network accounts,
+# Each has a lowercase name, a svg formatted icon and a url to the 
+# webpage of your account. They will be shown at the bottom of every
+# page of your blog. 
+# Be sure the svgs you use must have both its width and its height
+# set 18. If you don't wanna put the svg code in this config file, 
+# you can instead save them to the `data/svg.toml` file under the
+# root directory of your blog. e.g. `name = '<svg>'`
+[[params.social]]
+name = "github"  
+url = "https://github.com/mivinci/hugo-theme-minima"
+svg = ""
+[[params.social]]
+name = "linkedin"
+url = "https://linkedin/in/leonard-mivinci-63895317a"
+svg = ""
+[[params.social]]
+name = "twitter"
+url = "https://twitter.com/Leonard14733745"
+svg = ""
+[[params.social]]
+name = "rss"
+url = "/index.xml"
+svg = ""
+
+
+# Menu.main is an array that's used to decide what entries can be shown
+# on the navigator of yur blog. You can use a weight to make them ordered.
+[[menu.main]]
+name = "Home"
+url = "/"
+weight = 1
+[[menu.main]]
+name = "Categories"
+url = "/categories"
+weight = 2
+[[menu.main]]
+name = "Series"
+url = "/series"
+weight = 3
+[[menu.main]]
+name = "About"
+url = "/about"
+weight = 4
+
+
+# You can classify your posts by setting taxanomies in the front matter
+# e.g.
+#     categories = ["dev"]
+#     series = ["Building an RPC server"]
+#     tags = ["hugo", "golang"]
+# A little suggestion: one post belongs to one series or one category or multiple tags.
+[taxonomies]
+category = "categories"
+tag = "tags"
+series = "series"
+
+
+# Make sure all the codes in a post are highlighted correctly
+# so better not edit this.
+[markup.highlight]
+lineNos = true
+noClasses = false
+  
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@ -1,157 +0,0 @@
-baseURL: https://mivinci.github.io/hugo-theme-minima
-languageCode: en-us
-title: Hugo on Minima
-copyright: © 2020-2023 X
-googleAnalytics:
-# paginate specifies the maximum number of posts displayed on the home page.
-paginate: 12
-# theme specifies the name of the theme to be used.
-theme: hugo-theme-minima
-# defaultContentLanguage specifies the default language to use.
-defaultContentLanguage: en
-# language.xxx setup
-languages:
-  en:
-    languageName: EN # will be displayed in the navbar.
-    weight: 1
-  zh-cn:
-    languageName: 简中 # will be displayed in the navbar.
-    weight: 2
-    author:
-      status: 目前住在地球 🌍
-      description: |
-        这是 Minima, 一个简洁的 Hugo 主题，移植自 [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima)。
-        支持深色模式、多语言、数学公式、流程图、代码语法高亮，当然还有分类、标签、系列等等。
-    params:
-      greet: 你好 :)
-
-# author specifies your name, a slogon and your brief self-introduction.
-author:
-  name: X
-  status: Currently living on Earth 🌍
-  description: |
-    This is Minima, a clean and minimal Hugo theme porting from 
-    [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima). It has supports 
-    for dark mode, multilingual mode, math formulas, flowcharts, syntax highlighting, 
-    and of course taxonomies like categories, tags, and series.
-
-params:
-  # greet specifies greeting words.
-  greet: Hello :)
-  # subtitle speficies a subtitle displayed right after the site title.
-  subtitle:
-  # switch specifies two emojis used as the button toggling color themes.
-  switch: ["🌚", "🌝"]
-  # minima has one dark theme and multiple light themes. defaultTheme specifies
-  # a default light theme to use. currently available options: light, sand, rock, system.
-  defaultTheme: light
-  # displayDate speficies whether or not to display post date on the home page.
-  displayDate: true
-  # displayDescription specifies whether or not to display post description on
-  # the hoem page.
-  displayDescription: true
-  # selectable specifies if or not your post content can be selected.
-  selectable: true
-  # social is an array containing as many as social accounts to be displayed
-  # in the buttom of every page.
-  social:
-    - name: "twitter"
-      url: "https://twitter.com/realmivinci"
-    - name: "email"
-      url: "mailto:mivinci@qq.com"
-    - name: "github"
-      url: "https://github.com/mivinci/hugo-theme-minima"
-    - name: "rss"
-      url: "/index.xml"
-
-  # math plugin
-  math:
-    enable: false
-    provider: katex
-
-  # diagram plugin
-  diagram:
-    enable: false
-    provider: mermaid
-
-  # comment plugin
-  comment:
-    enable: true
-    provider: giscus
-    # check out https://disqus.com/
-    disqus:
-      shortname: hugo-minima
-      # check out https://utteranc.es
-    utterances:
-      repo: mivinci/hugo-theme-minima
-      issueTerm: pathname
-      label: comment
-    # check out https://giscus.app
-    giscus: 
-      repo: mivinci/hugo-theme-minima
-      repoId: MDEwOlJlcG9zaXRvcnkzODcxMjM2NDU=
-      category: Comments
-      categoryId: DIC_kwDOFxMJvc4CScQm
-      mapping: pathname
-      inputPosition: buttom # bottom | top
-      reactions: true
-      metadata: false
-
-  # search plugin
-  search:
-    enable: true
-    provider: fuse
-    title: Search
-    placeholder: Enter keywords
-    # check out https://fusejs.io
-    fuse:
-      keys:
-        - title
-        - permalink
-        - summary
-        - content
-      distance: 100
-      location: 0
-      threshold: 0.6
-      ignoreLocation: false
-      isCaseSensitive: false
-      includeScore: false
-      includeMatches: false
-      minMatchCharLength: 1
-      shouldSort: true
-      findAllMatches: false
-
-
-# menu.main is an array containing what is used as the navigator.
-menu:
-  main:
-    - identifier: tags
-      name: Tags
-      weight: 1
-    - identifier: series
-      name: Series
-      weight: 2
-    - identifier: search
-      name: 🔍
-      weight: 3
-
-# taxonomies defines ways to classify yout posts. Below are some presets that
-# most bloggers use, so you can replace them with whatever you like.
-taxonomies:
-  category: categories
-  tag: tags
-  series: series
-
-# outputs tells Hugo the kind of files to be rendered.
-outputs:
-  home:
-    - HTML
-    - RSS
-    - JSON
-
-# markup.highlight has two keys set to make sure that the syntax highlighting
-# in your posts are rendered correctly, so DO NOT edit them.
-markup:
-  highlight:
-    lineNos: true
-    noClasses: false
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@ -1,83 +1,7 @@
 ---
 title: "About"
-date: 2019-07-10T11:24:06+08:00
+date: 2021-07-16T11:24:06+08:00
 draft: false
 type: about
 ---

-A clean and minimal Hugo theme porting from [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima). Check out the [example site](https://mivinci.github.io/hugo-theme-minima).
-
-![screenshot](./images/tn.png)
-
-> Note that the main branch is in development stage, UI or configuration may vary.
-
-
-## Features
-
- [x] Dark mode
- [x] Multilingual mode
- [x] Code highlighting - VSCode dark+
- [x] Math - KaTeX
- [x] Flowcharts - Mermaid
- [x] Comment - Disqus, Utterances, Giscus
- [x] Google analytics
- [x] External link
- [x] RSS
-
-## Usage
-
-Before using Minima, make sure you've got Hugo (extended version) installed on your device.
-
-### Installation
-
-You can use either `git submodule` or `git clone` to fetch this theme into the directory where Hugo places themes.
-
-#### Git Submodule
-
-```bash
-git submodule add --depth 1 https://github.com/mivinci/hugo-theme-minima.git themes/minima
-```
-
-#### Git Clone
-
-```bash
-git clone https://github.com/mivinci/hugo-theme-minima.git themes/minima
-```
-
-
-### Configuration
-
-Follow [exampleSite/config.yaml](https://github.com/Mivinci/hugo-theme-minima/blob/main/exampleSite/config.yaml) and edit your own one.
-
-## Supported Front Matters
-
-| Attr       | Type   | Explanation |
-|:----------- |:------ |:------------|
-| title       | string | title |
-| description | string | description |
-| date        | string | creation time |
-| categories  | array  | category list |
-| series      | array  | series list |
-| tags        | array  | tag list |
-| math        | bool   | enables math plugin |
-| diagram     | bool   | enables diagram plugin |
-| comment     | bool   | enable comment plugin |
-| draft       | bool   | disallow being published |
-| link        | string | a URL to redirect to |
-
-
-## Contribution
-
-I'm currently looking for i18n contributors :)
-
-## Feedback
-
-Feedbacks are welcome [here](https://github.com/Mivinci/hugo-theme-minima/issues).
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=mivinci/hugo-theme-minima&type=Date)](https://star-history.com/#star-history/star-history&Date)
-
-## License
-
-Hugo Minima is MIT licensed.
--- a/exampleSite/content/chinese.md
+++ b/exampleSite/content/chinese.md
@ -0,0 +1,17 @@
+---
+author: XJJ
+title: 中文测试
+date: 2021-07-17T10:52:59+08:00
+description: 
+comment: false
+---
+
+## 二级标题
+
+这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文
+
+### 三级标题
+
+这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文
+
+#### 四级标题
--- a/exampleSite/content/instruction.md
+++ b/exampleSite/content/instruction.md
@ -0,0 +1,64 @@
+---
+author: Hugo Authors
+title: Instruction
+date: 2021-07-19T10:52:59+08:00
+description: A Clean and minimal Hugo theme porting from Minima on Hexo. [Click me](https://h.xjj.pub/) to take a look at the demo site.
+math: true
+comment: true
+---
+
+## Features
+
+- [x] Light/dark mode
+- [x] VSCode-style code hightlighting
+- [x] KaTeX
+- [x] Mermaid
+- [x] Google analytics
+- [x] Disqus/Utterances comments
+- [x] Optional ToC 
+
+## Usage
+
+Before using Minima, make sure you've got Hugo(v0.41.0 or higher) installed on your device.
+
+### Installation
+
+Suppose `blog` is where you place your sources.
+
+```bash
+cd blog
+git init
+git submodule add --depth 1 https://github.com/mivinci/hugo-theme-minima.git themes/minima
+```
+
+Or  `clone` directly if you don't wanna use the Git submodule.
+
+```bash
+git clone https://github.com/mivinci/hugo-theme-minima.git themes/minima
+```
+
+Anyways, you just need to put Minima under the `blog/themes` directory.
+
+### Configuration
+
+Follow [exampleSite/config.toml](https://github.com/Mivinci/hugo-theme-minima/blob/main/exampleSite/config.toml) and edit your own `blog/config.toml` file.
+
+### Supported Front Matters
+
+| Field       | Type   | Explanation                                            |
+|:----------- |:------ |:------------------------------------------------------ |
+| title       | string | Title of the post, will be rendered in a `h1` tag      |
+| description | string | Description of the post, will be rendered in a `p` tag |
+| date        | string | Datetime that the post is written                      |
+| categories  | array  | Array of categories the posts belongs to               |
+| series      | array  | Array of series the post belongs to                    |
+| tags        | array  | Array of tags the posts is related to                  |
+| math        | bool   | True if the post needs to render math formulas         |
+| mermaid     | bool   | True if the post needs to render mermaid graphs        |
+| comment     | bool   | True if the post allows people to make comments        |
+| draft       | bool   | True if the post isn't already to production           |
+| toc         | bool   | True if the post needs a ToC                           |
+
+### Feedback
+
+Feedbacks are welcome [here](https://github.com/Mivinci/hugo-theme-minima/issues).
--- a/exampleSite/content/link.md
+++ b/exampleSite/content/link.md
@ -1,7 +0,0 @@
---
-author: Mivinci
-title: An External Link
-date: 2021-07-17T10:52:59+08:00
-description: This is a link to an external resource.
-link: https://gohugo.io
---
--- a/exampleSite/content/markdown-syntax.md
+++ b/exampleSite/content/markdown-syntax.md
@ -2,10 +2,9 @@
 author: "Hugo Authors"
 title: "Markdown Syntax Guide"
 date: "2021-07-18T10:52:59+08:00"
-description: "Sample article showcasing basic Markdown syntax."
-categories:
-tags:
-  - markdown
+description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+toc: true
+categories: ["Markdown"]
 ---

 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
@ -55,34 +54,21 @@ The blockquote element represents content that is quoted from another source, op
 Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

 | Name | Age |
-|:----:|:---:|
-|  Bob | 27  |
-| Alice | 23 |
+| ---- | --- |
+
+    Bob | 27
+
+  Alice | 23

 #### Inline Markdown within tables

 | Italics   | Bold     | Code   |
-|:---------:|:--------:|:------:|
+| --------- | -------- | ------ |
 | *italics* | **bold** | `code` |

 ## Code Blocks

-#### Code block without code highlighting
-
-```
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Example HTML5 Document</title>
-  </head>
-  <body>
-    <p>Test</p>
-  </body>
-</html>
-```
-
-#### Code block with HTML
+#### Code block with backticks

 ```html
 <!doctype html>
@ -97,60 +83,34 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 </html>
 ```

-#### Code block with Go
+#### Code block indented with four spaces

-```go {hl_lines=[3]}
-type Registry interface {
-    Register(*Service, ...RegisterOption) error
-    Deregister(*Service, ...DeregisterOption) error
-    List(string, ...ListOption) ([]*Service, error)
-}
-```
+    <!doctype html>
+    <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <title>Example HTML5 Document</title>
+    </head>
+    <body>
+      <p>Test</p>
+    </body>
+    </html>

-#### Code block with C艹
+#### Code block with Hugo's internal highlight shortcode

-```c++
-#include <iostream>
+{{< highlight html >}}
+<!doctype html>

-class Animal {
-    string name;
-public:
-    void eat();
-}
-
-void Animal::eat() {
-    std::cout << "eat something" << std::endl;
-}
-```
-
-#### Code block with Java
-
-```java
-class Animal {
-    void speak() { /* speak */ }
-}
-
-class Dog extends Animal {
-    @override
-    void speak() { /* bark */ }
-}
-
-class Cat extends Animal {
-    @override
-    void speak() { /* mew */ } 
-}
-```
-
-#### Code block with Python
-
-```python
-class Dog(Animal):
-    def __init__(self):
-        super.__init__()
-    
-    def eat():
-        pass
-```
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+{{< /highlight >}}

 ## List Types

--- a/exampleSite/content/markdown-syntax.zh-cn.md
+++ b/exampleSite/content/markdown-syntax.zh-cn.md
@ -1,179 +0,0 @@
---
-author: "Mivinci"
-title: "Markdown 语法指北"
-date: "2021-07-18T10:52:59+08:00"
-description: "一篇 Markdown 示例文章，翻译自官方示例。"
-categories:
-tags:
-  - markdown
---
-
-本文提供了一个可以在 Hugo 内容文件中使用的基本 Markdown 语法示例，还展示了基本 HTML 元素是否在 Hugo 主题中使用 CSS 进行修饰。
-
-<!--more-->
-
-## 标题
-
-下面的 HTML `<h1>`—`<h6>` 元素代表了六个级别的章节标题。 `<h1>` 是最高的部分级别，而 `<h6>` 是最低的。
-
-# 一级标题
-
-## 二级标题
-
-### 三级标题
-
-#### 四级标题
-
-##### 五级标题
-
-###### 六级标题
-
-## 段落
-
-Xerum，我可以和他解释谁在痛苦中。 当我来到你身边，当我充满快乐时，我被快乐所折磨，或者他是天生的，或者是一个骗子，因为那个让我快乐痛苦的人是事情的专家，或者他撕裂和撕破自己的意志，仿佛他值得被遮盖，他是不是走到了心坎上，以同样的心去追随同样的事情？ 为什么毛孔会竖起来，当它被放置在一个不知道老鼠意志或一切的地方时？ 我会安静的。 就我而言，我的心以一种或另一种方式受到干扰，我把它们撕下来擦干，这样我要么杀了它们，要么让它们逃跑。 他憎恨真相，因为 veliamenim 的浪潮是起因和面子本身，而版本的痛苦又重演了。
-
-是旅行吗？ 因为每一件事都有一些你讨厌或讨厌的东西，所以你会吃东西，以免让你的智慧隐藏这样一个事实，即心脏和心脏或有趣的东西会从中出来。
-
-## 块引用
-
-blockquote 元素表示从另一个来源引用的内容，可选地带有必须在“footer”或“cite”元素内的引用，以及可选的内联更改，例如注释和缩写。
-
-#### 不注明出处的块引用
-
-> 然后，为了铸币安德普，要给予的知识相应地减少。
-> **注意**您可以在块引用中使用 *Markdown 语法*。
-
-#### 带出处的块引用
-
-> 不要通过共享内存来通信，通过通信来共享内存。<br>
-> — <cite>Rob Pike[^1]</cite>
-
-[^1]: 上述引述摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 期间的 [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c)。
-
-## 表格
-
-表格不是核心 Markdown 规范的一部分，但 Hugo 支持开箱即用地支持它们。
-
-| 姓名 | 年龄 |
-|:----:|:---:|
-| 小明 | 27  |
-| 大壮 | 23 |
-
-#### 表格内的内联 Markdown
-
-| 斜体   | 粗体     | 代码   |
-|:---------:|:--------:|:------:|
-| *斜体* | **粗体** | `code` |
-
-## 代码块
-
-#### 不使用高亮的代码块
-
-```
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Example HTML5 Document</title>
-  </head>
-  <body>
-    <p>Test</p>
-  </body>
-</html>
-```
-
-#### HTML 的代码块
-
-```html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-```
-
-#### Go 的代码块
-
-```go {hl_lines=[3]}
-type Registry interface {
-    Register(*Service, ...RegisterOption) error
-    Deregister(*Service, ...DeregisterOption) error
-    List(string, ...ListOption) ([]*Service, error)
-}
-```
-
-#### C艹 的代码块
-
-```c++
-#include <iostream>
-
-class Animal {
-    string name;
-public:
-    void eat();
-}
-
-void Animal::eat() {
-    std::cout << "eat something" << std::endl;
-}
-```
-
-#### Jvav 的代码块
-
-```java
-class Animal {
-    void speak() { /* speak */ }
-}
-
-class Dog extends Animal {
-    @override
-    void speak() { /* bark */ }
-}
-
-class Cat extends Animal {
-    @override
-    void speak() { /* mew */ } 
-}
-```
-
-#### Python 的代码块
-
-```python
-class Dog(Animal):
-    def __init__(self):
-        super.__init__()
-    
-    def eat():
-        pass
-```
-
-## 列表类型
-
-#### 有序列表
-
-1. 第一项
-2. 第二项
-3. 第三项
- [x] 已勾选
- [ ] 未勾选
-
-#### 无序列表
-
-* 第一项
-* 另一项
-* 另另一项
-
-#### 嵌套列表
-
-* 水果
-  * 苹果
-  * 橘子
-  * 香蕉
-* 乳制品
-  * 牛奶
-  * 奶酪
--- a/exampleSite/content/math-typesetting.md
+++ b/exampleSite/content/math-typesetting.md
@ -1,44 +1,54 @@
 ---
-author: Mivinci
+author: Hugo Authors
 title: Math Typesetting
-date: 2020-07-18T10:52:59+08:00
-description: A brief guide to write mathematical notation.
+date: 2021-07-18T10:52:59+08:00
+description: A brief guide to setup KaTeX
 math: true
-tags: 
-    - KaTex
-    - markdown
+categories: ["Markdown", "KaTeX"]
 ---

-Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries like [KaTeX](https://katex.org) the one that Minima uses. Here's what you can do in the configuration file to enable it.
+Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.

-```
-math:
-  enable: false
-  provider: katex
+<!--more-->
+
+In this example we will be using [KaTeX](https://katex.org/)
+
+- Create a partial under `/layouts/partials/math.html`
+- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
+- Include the partial in your templates like so:  
+
+```bash
+{{ if or .Params.math .Site.Params.math }}
+{{ partial "math.html" . }}
+{{ end }}
 ```

-## Examples
+- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
+- To enable KaTex on a per page basis include the parameter `math: true` in content files

-The following are some examples of mathematical notations with KaTeX that are pretty much like LaTeX's.
+**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)

-### Block
+{{< math.inline >}}
+{{ if or .Page.Params.math .Site.Params.math }}

-```
-\varphi = 1+\frac{1}{1+\frac{1}{1+\frac{1} {1+\cdots}}} 
-```
+<!-- KaTeX -->

-wiil be rendered as:
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
+{{ end }}
+{{</ math.inline >}}

+### Examples
+
+{{< math.inline >}}
+
+<p>
+Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
+</p>
+{{</ math.inline >}}
+
+Block math:
 $$
-\varphi = 1+\frac{1}{1+\frac{1}{1+\frac{1} {1+\cdots}}} 
+ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } 
 $$
-
-### Inline
-
-```
-Pythagorean theorem can be written as $a^2+b^2=c^2$ where *a*, *b* and *c* are the length of legs of a triangle.
-```
-
-will be rendered as:
-
-Pythagorean theorem can be written as $a^2+b^2=c^2$ where *a*, *b* and *c* are the length of legs of a triangle.
--- a/exampleSite/content/mermaid-diagrams.md
+++ b/exampleSite/content/mermaid-diagrams.md
@ -1,279 +0,0 @@
---
-author: Mermaid Team
-title: Mermaid Diagrams
-date: 2021-07-18T10:52:59+08:00
-description: A brief guide to write diagrams.
-diagram: true
-tags:
-    - markdown
-    - mermaid
---
-
-## Examples
-
-The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [full syntax](http://mermaid-js.github.io/mermaid/).
-
-<!-- <Flowchart> -->
-
-### Flowchart
-
-```
-flowchart LR
-
-A[Hard] -->|Text| B(Round)
-B --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-will be rendered as:
-
-```mermaid
-flowchart LR
-
-A[Hard] -->|Text| B(Round)
-B --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-### Sequence diagram
-
-```
-sequenceDiagram
-Alice->>John: Hello John, how are you?
-loop Healthcheck
-    John->>John: Fight against hypochondria
-end
-Note right of John: Rational thoughts!
-John-->>Alice: Great!
-John->>Bob: How about you?
-Bob-->>John: Jolly good!
-```
-
-will be rendered as:
-
-```mermaid
-sequenceDiagram
-Alice->>John: Hello John, how are you?
-loop Healthcheck
-    John->>John: Fight against hypochondria
-end
-Note right of John: Rational thoughts!
-John-->>Alice: Great!
-John->>Bob: How about you?
-Bob-->>John: Jolly good!
-```
-
-### Gantt chart
-
-```
-gantt
-    section Section
-    Completed :done,    des1, 2014-01-06,2014-01-08
-    Active        :active,  des2, 2014-01-07, 3d
-    Parallel 1   :         des3, after des1, 1d
-    Parallel 2   :         des4, after des1, 1d
-    Parallel 3   :         des5, after des3, 1d
-    Parallel 4   :         des6, after des4, 1d
-```
-
-will be rendered as:
-
-```mermaid
-gantt
-    section Section
-    Completed :done,    des1, 2014-01-06,2014-01-08
-    Active        :active,  des2, 2014-01-07, 3d
-    Parallel 1   :         des3, after des1, 1d
-    Parallel 2   :         des4, after des1, 1d
-    Parallel 3   :         des5, after des3, 1d
-    Parallel 4   :         des6, after des4, 1d
-```
-
-### Class diagram
-
-```
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-<<Interface>> Class01
-Class09 --> C2 : Where am I?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-class Class10 {
-  <<service>>
-  int id
-  size()
-}
-```
-
-will be rendered as:
-
-```mermaid
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-<<Interface>> Class01
-Class09 --> C2 : Where am I?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-class Class10 {
-  <<service>>
-  int id
-  size()
-}
-```
-
-### State diagram
-
-```
-stateDiagram-v2
-[*] --> Still
-Still --> [*]
-Still --> Moving
-Moving --> Still
-Moving --> Crash
-Crash --> [*]
-```
-
-will be rendered as:
-
-```mermaid
-stateDiagram-v2
-[*] --> Still
-Still --> [*]
-Still --> Moving
-Moving --> Still
-Moving --> Crash
-Crash --> [*]
-```
-
-### Pie chart
-
-```
-pie
-"Dogs" : 386
-"Cats" : 85.9
-"Rats" : 15
-```
-
-will be rendered as:
-
-```mermaid
-pie
-"Dogs" : 386
-"Cats" : 85.9
-"Rats" : 15
-```
-
-
-### User Journey diagram
-
-```
-  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: 3: Me
-```
-
-will be rendered as:
-
-```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: 3: Me
-```
-
-### C4 diagram
-
-```
-C4Context
-title System Context diagram for Internet Banking System
-
-Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-Person(customerB, "Banking Customer B")
-Person_Ext(customerC, "Banking Customer C")
-System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-Enterprise_Boundary(b1, "BankBoundary") {
-
-  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-  System_Boundary(b2, "BankBoundary2") {
-    System(SystemA, "Banking System A")
-    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
-  }
-
-  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-  Boundary(b3, "BankBoundary3", "boundary") {
-    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
-    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-  }
-}
-
-BiRel(customerA, SystemAA, "Uses")
-BiRel(SystemAA, SystemE, "Uses")
-Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-Rel(SystemC, customerA, "Sends e-mails to")
-```
-
-will be rendered as:
-
-```mermaid
-C4Context
-title System Context diagram for Internet Banking System
-
-Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-Person(customerB, "Banking Customer B")
-Person_Ext(customerC, "Banking Customer C")
-System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-Enterprise_Boundary(b1, "BankBoundary") {
-
-  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-  System_Boundary(b2, "BankBoundary2") {
-    System(SystemA, "Banking System A")
-    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
-  }
-
-  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-  Boundary(b3, "BankBoundary3", "boundary") {
-    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
-    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-  }
-}
-
-BiRel(customerA, SystemAA, "Uses")
-BiRel(SystemAA, SystemE, "Uses")
-Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-Rel(SystemC, customerA, "Sends e-mails to")
-```
--- a/exampleSite/content/mermaid-graphs.md
+++ b/exampleSite/content/mermaid-graphs.md
@ -0,0 +1,18 @@
+---
+author: Hugo Authors
+title: Mermaid Graphs
+date: 2021-07-18T10:52:59+08:00
+description: A brief guide to setup Mermaid
+mermaid: true
+draft: false
+categories: ["Markdown", "Mermaid"]
+---
+
+Here's a simple mermaid flowchart.
+
+{{<mermaid>}}
+graph LR
+    Start --> Stop
+{{</mermaid>}}
+
+For more documentations on Mermaid, view [mermaid](https://mermaid-js.github.io/mermaid).
--- a/exampleSite/content/placeholder-text.md
+++ b/exampleSite/content/placeholder-text.md
@ -0,0 +1,45 @@
+++
+author = "Hugo Authors"
+title = "Placeholder Text"
+date = "2021-07-18T10:52:59+08:00"
+description = "Lorem Ipsum Dolor Si Amet"
+toc = true
+categories = ["Markdown"]
+++
+
+Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
+
+1. Exierant elisi ambit vivere dedere
+2. Duce pollice
+3. Eris modo
+4. Spargitque ferrea quos palude
+
+Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
+
+1. Comas hunc haec pietate fetum procerum dixit
+2. Post torum vates letum Tiresia
+3. Flumen querellas
+4. Arcanaque montibus omnes
+5. Quidem et
+
+# Vagus elidunt
+
+<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
+
+[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
+
+## Mane refeci capiebant unda mulcebat
+
+Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
+
+Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
+
+Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
+
+{{< css.inline >}}
+
+<style>
+.canon { background: white; width: 100%; height: auto; }
+</style>
+
+{{< /css.inline >}}
--- a/exampleSite/content/search.md
+++ b/exampleSite/content/search.md
@ -1,4 +0,0 @@
---
-title: Search
-layout: search
---
--- a/exampleSite/content/search.zh-cn.md
+++ b/exampleSite/content/search.zh-cn.md
@ -1,4 +0,0 @@
---
-title: 搜索
-layout: search
---
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -1,28 +0,0 @@
-recent:
-  other: Recent Posts
-older:
-  other: Older Posts
-
-home:
-  other: Home
-about:
-  other: About
-categories:
-  other: Categories
-tags:
-  other: Tags
-series:
-  other: Series
-
-timeformat:
-  other: Jan 02, 2006
-
-paginator:
-  prev:
-    other: Newer
-  next:
-    other: Older
-
-post:
-  at:
-    other: Post at
--- a/i18n/id.yaml
+++ b/i18n/id.yaml
@ -1,28 +0,0 @@
-recent:
-  other: Postingan Terbaru
-older:
-  other: Postingan Lama
-
-home:
-  other: Beranda
-about:
-  other: Tentang
-categories:
-  other: Kategori
-tags:
-  other: Tags
-series:
-  other: Series
-
-timeformat:
-  other: 2 Jan 2006
-
-paginator:
-  prev:
-    other: Lebih Baru
-  next:
-    other: Lebih Lama
-
-post:
-  at:
-    other: Postingan pada
--- a/i18n/ru.yaml
+++ b/i18n/ru.yaml
@ -1,28 +0,0 @@
-recent:
-  other: Свежие посты
-older:
-  other: Старые посты
-
-home:
-  other: Home
-about:
-  other: Обо мне
-categories:
-  other: Категории
-tags:
-  other: Тэги
-series:
-  other: Серии
-
-timeformat:
-  other: Jan 02, 2006
-
-paginator:
-  prev:
-    other: Новые
-  next:
-    other: Старые
-
-post:
-  at:
-    other: Обуликовано
--- a/i18n/ua.yaml
+++ b/i18n/ua.yaml
@ -1,28 +0,0 @@
-recent:
-  other: Нові дописи
-older:
-  other: Старі дописи
-
-home:
-  other: Головна
-about:
-  other: Про мене
-categories:
-  other: Категорії
-tags:
-  other: Теги
-series:
-  other: Серії
-
-timeformat:
-  other: Jan 02, 2006
-
-paginator:
-  prev:
-    other: Нові
-  next:
-    other: Старі
-
-post:
-  at:
-    other: Опубліковано
--- a/i18n/zh-cn.yaml
+++ b/i18n/zh-cn.yaml
@ -1,28 +0,0 @@
-recent:
-  other: 近期文章
-older:
-  other: 历史文章
-
-home:
-  other: 首页
-about:
-  other: 关于
-categories:
-  other: 分类
-tags:
-  other: 标签
-series:
-  other: 系列
-
-timeformat:
-  other: 2006 年 01 月 02 日
-
-paginator:
-  prev:
-    other: 上一页
-  next:
-    other: 下一页
-
-post:
-  at:
-    other: 发布于
--- a/i18n/zh-hk.yaml
+++ b/i18n/zh-hk.yaml
@ -1,28 +0,0 @@
-recent:
-  other: 近期文章
-older:
-  other: 歷史文章
-
-home:
-  other: 首頁
-about:
-  other: 關於
-categories:
-  other: 分類
-tags:
-  other: 標籤
-series:
-  other: 系列
-
-timeformat:
-  other: 2006 年 01 月 02 日
-
-paginator:
-  prev:
-    other: 上一頁
-  next:
-    other: 下一頁
-
-post:
-  at:
-    other: 發佈於
--- a/i18n/zh-tw.yaml
+++ b/i18n/zh-tw.yaml
@ -1,28 +0,0 @@
-recent:
-  other: 近期文章
-older:
-  other: 歷史文章
-
-home:
-  other: 首頁
-about:
-  other: 關於
-categories:
-  other: 分類
-tags:
-  other: 標籤
-series:
-  other: 系列
-
-timeformat:
-  other: 2006 年 01 月 02 日
-
-paginator:
-  prev:
-    other: 上一頁
-  next:
-    other: 下一頁
-
-post:
-  at:
-    other: 發佈於
--- a/images/screenshot-dark.png
+++ b/images/screenshot-dark.png
--- a/images/screenshot.png
+++ b/images/screenshot.png
--- a/images/tn.png
+++ b/images/tn.png
--- a/layouts/404.html
+++ b/layouts/404.html
@ -1,6 +0,0 @@
-{{ define "main" }}
-<main class="container mx-auto">
-  <h1 class="text-5xl font-bold">Oops!</h1>
-  <p>404 Not Found</p>
-</main>
-{{ end }}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -1,13 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 {{ partial "head.html" . }}
-
-<body>
+<body class=" sm:mx-5 sm:my-0">
  {{ partial "header.html" . }}
-
+  
  {{ block "main" . }} {{ end }}

  {{ partial "footer.html" . }}
 </body>
-
 </html>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -1,19 +1,14 @@
 {{ define "main" }}
-<main class="container mx-auto">
-  {{ if isset .Data "Term" }}
-  <h2 class="text-4xl mt-8 mb-8">{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
-  {{ else }}
-  <h2 class="text-4xl mt-8 mb-8">{{ .Title }}</h2>
-  {{ end }}
-  <div class="mt-8">
-    {{ range .Data.Pages.GroupByDate "2006" }}
-      <h3 class="text-3xl font-bold mb-4 mt-8">
-        <a href="#{{ .Key }}">{{ .Key }}</a>
-      </h3>
-      {{ range .Pages }}
-      {{ partial "item.html" . }}
-      {{ end }}
-    {{ end }}
-  </div>
+<main>
+	{{ if isset .Data "Term" }}
+	<h2 class="my-8">{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
+	{{ else }}
+	<h2 class="my-8">{{ .Title }}</h2>
+	{{ end }}
+	<div class="mt-8">
+		{{ range .Data.Pages }}
+		{{ partial "list.html" . }}
+		{{ end }}
+	</div>
 </main>
-{{ end }}
+{{ end }}
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@ -1,16 +0,0 @@
-{{ define "main" }}
-<main class="container mx-auto">
-  {{- $title := .Site.Params.search.title | default .Title }}
-  {{- $placeholder := .Site.Params.search.placeholder | default .Title }}
-  <h1 class="text-4xl font-extrabold mt-6">{{ $title }}</h1>
-  <p class="text-sm mb-6">Powered by <a href="https://fusejs.io" target="_blank">fuse.js</a>.</p>
-  <div class="search">
-    <input class="mb-4"
-      autofocus autocomplete="off" id="search-input" type="search" placeholder="{{ printf `%s ↵` $placeholder }}">
-    {{ if not .Site.Params.search.enable }}
-    <p>No search plugin is enabled.</p>
-    {{ end }}
-    <ul id="search-result"></ul>
-  </div>
-</main>
-{{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,32 +1,52 @@
 {{ define "main" }}
-<div class="container mx-auto">
-  <h1 class="text-4xl font-extrabold mt-6 mb-6">{{ .Title }}</h1>
-  <div class="mb-3 text-sm flex justify-between ">
-    <div>
-      {{ if .Site.Params.displayDate }}
-      {{ T "post.at" }} &mdash; {{ .Date | time.Format (T "timeformat") }}
-      {{ end }}
-      {{ if .Draft }}
-      <span class="ml-3 tag">
-        DRAFT
-      </span>
-      {{ end }}
-    </div>
-    {{ if .Params.tags }}
-    <div>
-      {{ range $tag := .Params.tags }}
-      {{ $url := printf "tags/%s" $tag | relLangURL }}
-      <a class="ml-1" href="{{ $url }}">#{{ . }}</a>
-      {{ end }}
-    </div>
-    {{ end }}
-  </div>
-  <main class="mb-8">
-    <p>{{ .Description | markdownify | safeHTML }}</p>
-    <article class="md">
-      {{ .Content }}
-    </article>
-  </main>
-  {{ partial "plugin.html" . }}
+{{ if .Params.toc }}
+{{ partial "toc.html" . }}
+{{ end }}
+<h1 class="mt-6 mb-6">{{ .Title }}</h1>
+<div class="mb-3 text-xs flex justify-between sm:flex-col">
+	<div>
+	{{ if .Site.Params.displayDate }}
+		Posted at &mdash; {{ dateFormat .Site.Params.timeformat .Date }}
+	{{ end }}
+		{{ if .Draft }}
+		<span class="ml-3 tag">
+			DRAFT
+		</span>
+		{{ end }}
+	</div>
+	{{ if .Params.tags }}
+	<div class="sm:mt-4">
+		{{ range .Params.tags }}
+		<a class="not-first:ml-3" href="/tags/{{ . }}">#{{ . }}</a>
+		{{ end }}
+	</div>
+	{{ end }}
 </div>
+<main>
+	<p>{{ .Description | markdownify | safeHTML }}</p>
+	<article class="md">
+		{{ .Content }}
+	</article>
+</main>
+{{ if or .Params.math .Site.Params.math }}
+{{ partial "math.html" . }}
+{{ end }}
+
+{{ if or .Params.mermaid .Site.Params.mermaid }}
+{{ partial "mermaid.html" . }}
+{{ end }}
+
+{{ if or .Params.comment (and .Site.Params.commentOnAllPosts (ne .Params.comment false)) }}
+	{{ if eq .Site.Params.comment "disqus"}}
+	{{ partial "disqus.html" . }}
+	{{ end }}
+
+	{{ if eq .Site.Params.comment "ovo"}}
+	{{ partial "ovo.html" . }}
+	{{ end }}
+
+	{{ if eq .Site.Params.comment "utterances"}}
+	{{ partial "utterances.html" . }}
+	{{ end }}
+{{ end }}
 {{ end }}
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@ -1,15 +1,16 @@
 {{ define "main" }}
-<main class="container mx-auto">
-  <h2 class="text-3xl font-bold mb-3">{{ .Title }}</h2>
-  <ul class="list-disc">
-  {{ $data := .Data }}
-  {{ range $key, $value := $data.Terms.ByCount }}
-    <li>
-      <a class="text-lg" href="{{ $data.Plural | relLangURL }}/{{ $value.Name }}">{{ $value.Name }}</a>
-      <span class="text-sm font-semibold ml-1">{{ $value.Count }}</span>
-    </li>
-  {{ end }}
-  </ul>
+<main>
+  <h2>{{ .Title }}</h2>
+  <nav class="flex flex-col">
+    {{ $data := .Data }}
+    {{ range $key, $value := .Data.Terms.ByCount }}
+    <div class="mb-5 flex justify-between">
+      <a class="self-start" href="/{{ $data.Plural }}/{{ $value.Name }}">
+        {{ $value.Name }}
+      </a>
+      <span class="">{{ $value.Count }}</span>
+    </div>
+    {{ end }}
  </nav>
 </main>
 {{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -1,25 +1,19 @@
 {{ define "main" }}
-<main class="container mx-auto">
-  <h2 class="mt-8 text-3xl font-bold">{{ .Site.Params.greet }}</h2>
-  <p class="mt-0 mb-0">{{ .Site.Author.status }}</p>
-  <p class="mt-3 mb-3 home-intro">{{ .Site.Author.description | markdownify | safeHTML }}</p>
-  {{ if eq .Paginator.PageNumber 1 }}
-  <h3 class="mt-6 mb-4 text-2xl font-bold">{{ T "recent" }}</h3>
-  {{ else }}
-  <h3 class="mt-6 mb-4 text-2xl font-bold">{{ T "older" }}</h3>
-  {{ end }}
-  <div>
-    {{ $paginator := .Paginate (where .Site.RegularPages "Kind" "page") }}
-    {{ range $paginator.Pages }}
-    {{ if ne .Page.Layout "search" }}
-    {{ partial "item.html" . }}
-    {{ end }}
-    {{ end }}
-    {{ partial "paginator.html" . }}
-  </div>
-  {{ if .Site.Params.friends.feeds }}
-  <h3 class="mt-6 mb-6 text-2xl font-semibold">{{ .Site.Params.friends.title }}</h3>
-  <div id="friends"></div>
-  {{ end }}
-</main>
+	<main>
+		<h2 class="mt-8 mb-1">{{ .Site.Params.iam }} {{ .Site.Author.name }}</h2>
+		<p class="my-0">{{ .Site.Author.slogon }}</p>
+		<p class="my-3 home-intro">{{ .Site.Author.description | markdownify | safeHTML }}</p>
+		{{ if eq .Paginator.PageNumber 1 }}
+		<h3 class="my-6">Recent Posts</h3>
+		{{ else }}
+		<h3 class="my-6">Older Posts</h3>
+		{{ end }}
+		<div>
+			{{ $paginator := .Paginate (where .Site.RegularPages "Kind" "page") }}
+			{{ range $paginator.Pages }}
+			{{ partial "list.html" . }}
+			{{ end }}
+			{{ partial "paginator.html" . }}
+		</div>
+	</main>
 {{ end }}
--- a/layouts/index.json
+++ b/layouts/index.json
@ -1,7 +0,0 @@
-{{- $.Scratch.Add "index" slice -}}
-{{- range site.RegularPages -}}
-{{- if ne .Layout "search" -}}
-  {{- $.Scratch.Add "index" (dict "title" .Title "permalink" .Permalink "summary" .Summary "content" .Plain) -}}
-{{- end -}}
-{{- end -}}
-{{- $.Scratch.Get "index" | jsonify -}}
--- a/layouts/index.xml
+++ b/layouts/index.xml
@ -20,11 +20,7 @@
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
-    <copyright>{{.}}</copyright>{{end}}{{with .Site.Author.FollowClaim.feedId }}
-    <follow_challenge>
-      <feedId>{{ .Site.FollowClaim.feedId }}</feedId>
-      <userId>{{ .Site.FollowClaim.userId }}</userId>
-    </follow_challenge>{{end}}{{ if not .Date.IsZero }}
+    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    {{- with .OutputFormats.Get "RSS" -}}
    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
--- a/layouts/partials/comment.html
+++ b/layouts/partials/comment.html
@ -1,84 +0,0 @@
-<!-- slot -->
-<div id="comment"></div>
-
-<!-- Giscus -->
-{{ if eq .Site.Params.comment.provider "giscus" }}
-{{ with .Site.Params.comment.giscus }}
-<script>
-    const s = document.createElement("script")
-    s.src = "https://giscus.app/client.js"
-    s.crossOrigin = "anonymous"
-    s.async = true
-    s.setAttribute("data-repo", "{{ .repo }}")
-    s.setAttribute("data-repo-id", "{{ .repoId }}")
-    s.setAttribute("data-category", "{{ .category }}")
-    s.setAttribute("data-category-id", "{{ .categoryId }}")
-    s.setAttribute("data-mapping", "{{ .mapping }}")
-    s.setAttribute("data-strict", "0")
-    s.setAttribute("data-reactions-enabled", "{{ cond .reactions 1 0 }}")
-    s.setAttribute("data-emit-metadata", "{{ cond .metadata 1 0 }}")
-    s.setAttribute("data-input-position", "{{ .inputPosition }}")
-    s.setAttribute("data-theme", window.minima_theme + "_protanopia")
-    s.setAttribute("data-lang", "en")
-    s.setAttribute("data-loading", "lazy")
-    document.getElementById("comment").appendChild(s)
-</script>
-{{ end }}
-{{ end }}
-
-<!-- Utterances -->
-{{ if eq .Site.Params.comment.provider "utterances" }}
-{{ with .Site.Params.comment.utterances }}
-<script>
-    const s = document.createElement("script")
-    s.src = "https://utteranc.es/client.js"
-    s.crossOrigin = "anonymous"
-    s.async = true
-    s.setAttribute("repo", "{{ .repo }}")
-    s.setAttribute("issue-term", "{{ .issueTerm }}")
-    s.setAttribute("label", "{{ .label }}")
-    s.setAttribute("theme", "github-" + window.minima_theme)
-    document.getElementById("comment").appendChild(s)
-</script>
-{{ end }}
-{{ end }}
-
-<!-- Disqus -->
-{{ if eq .Site.Params.comment.provider "disqus" }}
-{{ with .Site.Params.comment.disqus }}
-<div id="disqus_thread" class="mt-8 mb-8"></div>
-<script type="text/javascript">
-    // Don't ever inject Disqus on localhost--it creates unwanted
-    // discussions from 'localhost:1313' on your Disqus account...
-    if (window.location.hostname == "localhost")
-        return;
-
-    const dsq = document.createElement('script');
-    dsq.type = 'text/javascript';
-    dsq.async = true;
-
-    const disqus_shortname = '{{ .shortname }}';
-    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-    document.getElementById("comment").appendChild(dsq);
-</script>
-<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
-        Disqus.</a></noscript>
-{{ end }}
-{{ end }}
-
-<!-- Artalk -->
-{{ if eq .Site.Params.comment.provider "artalk" }}
-{{ with .Site.Params.comment.artalk }}
-<link href="{{ $.Site.Params.comment.artalk.server }}/dist/Artalk.css" rel="stylesheet">
-<script src="{{ $.Site.Params.comment.artalk.server }}/dist/Artalk.js"></script>
-<script>
-  Artalk.init({
-    el:        '#comment',
-    pageKey:   '{{ .Permalink }}',
-    pageTitle: '{{ .Title }}',
-    server:    '{{ $.Site.Params.comment.artalk.server }}',
-    site:      '{{ $.Site.Params.comment.artalk.site }}',
-  })
-</script>
-{{ end }}
-{{ end }}
--- a/layouts/partials/diagram.html
+++ b/layouts/partials/diagram.html
@ -1,9 +0,0 @@
-{{ if eq .Site.Params.diagram.provider "mermaid" }}
-<script 
-  src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"
-  crossorigin="anonymous">
-</script>
-<script>
-  mermaid.init(undefined, 'code.language-mermaid')
-</script>
-{{ end }}
--- a/layouts/partials/disqus.html
+++ b/layouts/partials/disqus.html
@ -0,0 +1,16 @@
+<div id="disqus_thread" class="my-8"></div>
+<script type="text/javascript">
+  (function () {
+    // Don't ever inject Disqus on localhost--it creates unwanted
+    // discussions from 'localhost:1313' on your Disqus account...
+    if (window.location.hostname == "localhost")
+      return;
+
+    const dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+    const disqus_shortname = '{{ .Site.Params.shortname }}';
+    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+  })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
+    Disqus.</a></noscript>
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,25 +1,18 @@
-<footer class="mt-8 mb-8">
-  <div class="container mx-auto">
-    <div class="mt-8 flex flex-col-reverse sm:flex-row sm:justify-between items-center">
-      <div class="text-center sm:text-left">
-        <p class="mt-0 text-sm">{{ .Site.Copyright }}</p>
-        <p class="mt-0 text-xs">
-          Built with <a href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> v{{ .Site.Hugo.Version }}
-          and <a href="https://github.com/mivinci/hugo-theme-minima" target="_blank" rel="noopener noreferrer">Minima</a>
-        </p>
-      </div>
-      
-      <p class="flex items-center mt-0">
-        {{ range $_, $key := .Site.Params.Social }}
-          <a class="icon ml-1 mr-1" href="{{ $key.url }}" title="{{ $key.name }}">
-          {{ if $key.svg }}
-            {{ $key.svg | safeHTML }}
-          {{ else }}
-            {{ index $.Site.Data.svg $key.name | safeHTML }}
-          {{ end }}
-          </a>
-        {{ end }}
-      </p>
-    </div>
-  </div>
+<footer class="mt-8 flex sm:flex-col-reverse justify-between items-center">
+  <p class="mt-0 text-sm">
+    {{ .Site.Copyright }} |
+    <a href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> on
+    <a href="https://github.com/mivinci/hugo-theme-minima" target="_blank" rel="noopener noreferrer">Minima</a>
+  </p>
+  <p class="flex items-center mt-0">
+    {{ range $_, $key := .Site.Params.Social }}
+      <a class="icon mx-2" href="{{ $key.url }}" title="{{ $key.name }}">
+      {{ if $key.svg }}
+        {{ $key.svg | safeHTML }}
+      {{ else }}
+        {{ index $.Site.Data.svg $key.name | safeHTML }}
+      {{ end }}
+      </a>
+    {{ end }}
+  </p>
 </footer>
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -1,11 +1,9 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  {{ if hugo.IsProduction }}
  {{ template "_internal/opengraph.html" . }}
  {{ template "_internal/twitter_cards.html" . }}
  {{ template "_internal/google_analytics.html" . }}
-  {{ end }}
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#262d33">
  <title>
@ -15,54 +13,28 @@
    {{ .Site.Title }} - {{ .Title }}
    {{ end }}
  </title>
-  <!-- favicon -->
  {{ $favicon := "favicon.ico" }}
  <link rel="shortcut icon" href="{{ $favicon | relURL }}" type="image/x-icon" />
-  <!-- styles -->
-  {{ $options := (dict "targetPath" "minima.css" "outputStyle" "compressed" "enableSourceMap" true) }}
-  {{ $style := resources.Get "css/main.scss" | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS $options | fingerprint }}
-  <link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
-  <!-- scripts -->
-  {{ $options = (dict "targetPath" "minima.js" "minify" true "params" site.Params) }}
-  {{ $script := resources.Get "js/main.js" | js.Build $options | fingerprint }}
-  <script defer type="text/javascript" src="{{ $script.RelPermalink }}" integrity="{{ $script.Data.Integrity }}"></script>
-  {{ if and .Site.Params.search.enable (eq .Layout "search") }}
-  {{ $options = (dict "minify" true "params" site.Params) }}
-  {{ $search := resources.Get "js/search.js" | js.Build $options}}
-  {{ $fusejs := resources.Get "js/min/fuse.basic.min.js" }}
-  {{ $script := (slice $fusejs $search) | resources.Concat "assets/js/search.js" | fingerprint }}
-  <script defer crossorigin="anonymous" src="{{ $script.RelPermalink }}" integrity="{{ $script.Data.Integrity }}"></script>
-  {{ end }}
-  <!-- i18n -->
-  {{ if .IsTranslated }}
-	{{ range .Translations }}
-	<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Language.LanguageName }}">
-	{{ end }}
-{{ end }}
-<!-- Umami Analytics -->
-{{ if eq .Site.Params.analytics.provider "umami" }}
-{{ with .Site.Params.analytics.umami }}
-<script async src="{{ .server }}/script.js" data-website-id="{{ .websiteID }}"></script>
-{{ end }}
-{{ end }}
-<link rel="stylesheet" href="https://assets.codeword.info/fonts/MiSans/include.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap"
+    rel="stylesheet">
+  {{ $hash := now.Unix }}
+  {{ $options := (dict "targetPath" (printf `minima.%d.css` $hash) "outputStyle" "compressed" "enableSourceMap" true) }}
+  {{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}
+  <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+
+  {{ $options = (dict "targetPath" (printf `minima.%d.js` $hash) "minify" true) }}
+  {{ $js := resources.Get "js/main.js" | js.Build $options | resources.ExecuteAsTemplate (printf `minima.%d.js` $hash) . }}
+  <script defer type="text/javascript" src="{{ $js.RelPermalink }}"></script>
 </head>
 <script>
-  // default to system color scheme.
-  const default_theme_config = '{{ .Site.Params.defaultTheme }}'
-  const default_light_theme = default_theme_config === 'system' ? 'light' : default_theme_config;
-  let default_theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : default_light_theme;
-
  try {
-    const saved_theme = localStorage.getItem('theme')
-    if (saved_theme) {
-      default_theme = saved_theme === default_light_theme ? saved_theme : default_light_theme;  
+    if (!('theme' in localStorage)) {
+      localStorage.theme = window.matchMedia('(prefer-color-scheme: dark)').matches ? 'dark' : 'light';
    }
-    localStorage.setItem('theme', default_theme);
-    window.minima_theme = default_theme;
-    document.querySelector('html').classList.add(default_theme);
+    document.querySelector('html').classList.add(localStorage.theme);
  } catch (e) {
    console.error(e);
  }
 </script>
-
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,23 +1,14 @@
-<header class="mt-3 mb-6">
-  <div class="container mx-auto">
-    <nav class="flex justify-between items-center">
-      <div class="flex items-center">
-        {{ if .Site.Params.brand }}
-        <div class="mr-3 text-3xl"><a href="/">{{ .Site.Params.brand }}</a></div>
-        {{ end }}
-        <div id="theme-switch" class="text-3xl cursor-pointer">{{ index .Site.Params.switch 1 }}</div>
-      </div>
-      <ul class="flex items-center text-base font-bold
-        whitespace-nowrap overflow-x-auto overflow-y-hidden">
-        {{ range .Site.Menus.main }}
-        <li class="ml-2 mr-2"><a href="{{ .Identifier | relLangURL }}">{{ T .Identifier | default .Name }}</a></li>
-        {{ end }}
-      </ul>
-      <ul class="flex item-center text-sm font-bold">
-        {{ range $.Site.Home.AllTranslations }}
-        <li class="ml-2"><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
-        {{ end}}
-      </ul>
-    </nav>
+<header class="flex justify-between items-center mb-6 sm:my-3">
+  <div class="flex items-center">
+    {{ if .Site.Params.brand }}
+    <div class="mr-3 text-3xl"><a href="/">{{ .Site.Params.brand }}</a></div>
+    {{ end }}
+    <div id="theme-switcher" class="text-4xl cursor-pointer">{{ index .Site.Params.switch 1 }}</div>
  </div>
+  <nav class="flex items-center
+    whitespace-nowrap overflow-x-auto overflow-y-hidden">
+    {{ range .Site.Menus.main }}
+    <a class="ml-5" href="{{ .URL }}">{{ .Name }}</a>
+    {{ end }}
+  </nav>
 </header>
--- a/layouts/partials/item.html
+++ b/layouts/partials/item.html
@ -1,17 +0,0 @@
-<div>
-  <div class="flex flex-col-reverse sm:flex-row sm:justify-between">
-    {{ if .Page.Params.link }}
-    <a class="text-lg font-bold" href="{{ .Page.Params.link }}">{{ .Title }}</a>
-    {{ else }}
-    <a class="text-lg font-bold" href="{{ .RelPermalink }}">{{ .Title }}</a>
-    {{ end }}
-    {{ if .Site.Params.displayDate }}
-    <div class="text-sm font-bold whitespace-nowrap" style="color:grey;">{{ .Date | time.Format (T "timeformat") }}</div>
-    {{ end }}
-  </div>
-  {{ if .Site.Params.displayDescription }}
-  <p class="text-base mb-2">
-    {{ .Description | markdownify | safeHTML }}
-  </p>
-  {{ end }}
-</div>
--- a/layouts/partials/list.html
+++ b/layouts/partials/list.html
@ -0,0 +1,6 @@
+<div class="flex justify-between sm:flex-col-reverse my-4 sm:mb-6 sm:mt-3">
+<a class="" href="{{ .RelPermalink }}">{{ .Title }}</a>
+{{ if .Site.Params.displayDate }}
+  <div class="sm:mb-2 sm:text-sm">{{ dateFormat .Site.Params.timeformat .Date }}</div>
+{{ end }}
+</div>
--- a/layouts/partials/math.html
+++ b/layouts/partials/math.html
@ -1,29 +1,25 @@
-{{ if eq .Site.Params.math.provider "katex" }}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css"
-    integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
+  integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
 <!-- The loading of KaTeX is deferred to speed up page rendering -->
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"
-    integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp"
-    crossorigin="anonymous"></script>
+  integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
 <!-- To automatically render math in text elements, include the auto-render extension: -->
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js"
-    integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"
-    crossorigin="anonymous"></script>
+  integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>

 <script>
-    document.addEventListener("DOMContentLoaded", function () {
-        renderMathInElement(document.body, {
-            // customised options
-            // • auto-render specific keys, e.g.:
-            delimiters: [
-                { left: '$$', right: '$$', display: true },
-                { left: '$', right: '$', display: false },
-                { left: '\\(', right: '\\)', display: false },
-                { left: '\\[', right: '\\]', display: true }
-            ],
-            // • rendering keys, e.g.:
-            throwOnError: false
-        });
+  document.addEventListener("DOMContentLoaded", function () {
+    renderMathInElement(document.body, {
+      // customised options
+      // • auto-render specific keys, e.g.:
+      delimiters: [
+        { left: '$$', right: '$$', display: true },
+        { left: '$', right: '$', display: false },
+        { left: '\\(', right: '\\)', display: false },
+        { left: '\\[', right: '\\]', display: true }
+      ],
+      // • rendering keys, e.g.:
+      throwOnError: false
    });
-</script>
-{{ end }}
+  });
+</script>
--- a/layouts/partials/mermaid.html
+++ b/layouts/partials/mermaid.html
@ -0,0 +1,4 @@
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>
+  mermaid.initialize({ startOnLoad: true });
+</script>
--- a/layouts/partials/ovo.html
+++ b/layouts/partials/ovo.html
@ -0,0 +1,29 @@
+<div id="ovo_thread" class="my-8">
+  <div class="flex flex-col items-center">评论插件加载中 OvO</div>
+</div>
+<link rel="stylesheet" href="//unpkg.com/@ovojs/ovo/dist/style.css">
+<script type="text/javascript">
+  (function () {
+    if (window.location.hostname == "localhost")
+      return;
+
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = '//unpkg.com/@ovojs/ovo';
+    (document.getElementsByTagName('head')[0] || 
+      document.getElementsByTagName('body')[0])
+      .appendChild(script);
+
+    script.addEventListener('load', function () {
+      const target = document.getElementById('ovo_thread');
+      target.innerHTML = '';
+      new OvO({
+        target,
+        props: {
+          server: "{{ .Site.Params.ovo.server }}",
+          placeholder: "{{ .Site.Params.ovo.placeholder }}"
+        }
+      })
+    })
+  })();
+</script>
--- a/layouts/partials/paginator.html
+++ b/layouts/partials/paginator.html
@ -1,12 +1,12 @@
 {{ $page := $.Paginator }}
 {{ if gt $page.TotalPages 1 }}
-<div class="mt-6 flex justify-between font-semibold">
+<div class="my-8 flex justify-between">
  {{ if $page.HasPrev }}
-  <a href="{{ $page.Prev.URL }}">← {{ T "paginator.prev" }}</a>
+  <a href="{{ $page.Prev.URL }}">← Newer</a>
  {{ end }}

  {{ if $page.HasNext }}
-  <a href="{{ $page.Next.URL }}">{{ T "paginator.next" }} →</a>
+  <a href="{{ $page.Next.URL }}">Older →</a>
  {{ end }}
 </div>
 {{ end }}
--- a/layouts/partials/plugin.html
+++ b/layouts/partials/plugin.html
@ -1,11 +0,0 @@
-{{ if or .Params.math (and .Site.Params.math.enable (ne .Params.math false)) }}
-{{ partial "math.html" . }}
-{{ end }}
-
-{{ if or .Params.diagram (and .Site.Params.diagram.enable (ne .Params.diagram false)) }}
-{{ partial "diagram.html" . }}
-{{ end }}
-
-{{ if or .Params.comment (and .Site.Params.comment.enable (ne .Params.comment false)) }}
-{{ partial "comment.html" . }}
-{{ end }}
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@ -0,0 +1,26 @@
+{{ if eq .Site.Params.toc "default" }}
+<details class="toc toc-default">
+  <summary></summary>
+  <div class="pb-1">
+    {{ .TableOfContents }}
+  </div>
+</details>
+{{ end }}
+
+{{ if eq .Site.Params.toc "bar" }}
+<details class="toc toc-bar">
+  <summary></summary>
+  <div class="pb-1">
+    {{ .TableOfContents }}
+  </div>
+</details>
+{{ end }}
+
+{{ if eq .Site.Params.toc "lines" }}
+<details class="toc toc-lines">
+  <summary></summary>
+  <div class="pb-1">
+    {{ .TableOfContents }}
+  </div>
+</details>
+{{ end }}
--- a/layouts/partials/utterances.html
+++ b/layouts/partials/utterances.html
@ -0,0 +1,17 @@
+<script>
+  const repo = '{{ .Site.Params.utterances.repo }}'
+  const issueTerm = '{{ .Site.Params.utterances.issueTerm }}'
+  const theme = localStorage.theme ? `github-${localStorage.theme}` : 'preferred-color-scheme';
+
+  const script = document.createElement('script')
+  script.src = 'https://utteranc.es/client.js'
+  script.async = true
+  script.crossOrigin = 'anonymous'
+
+  script.setAttribute('repo', repo)
+  script.setAttribute('issue-term', issueTerm)
+  script.setAttribute('theme', theme)
+  script.setAttribute('label', 'comment')
+
+  document.querySelector('main').appendChild(script)
+</script>
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@ -0,0 +1 @@
+<p class="mermaid">{{ safeHTML .Inner }}</p>
--- a/static/texture.png
+++ b/static/texture.png
--- a/testdata/rss.xml
+++ b/testdata/rss.xml
--- a/theme.toml
+++ b/theme.toml
@ -4,36 +4,18 @@
 name = "Minima"
 license = "MIT"
 licenselink = "https://github.com/mivinci/minima/blob/master/LICENSE"
-description = "A clean and minimal Hugo theme"
+description = "A Clean and minimal Hugo theme porting from Minima on Hexo."
 homepage = "https://github.com/mivinci/hugo-theme-minima"
-tags = [
-    "minimal", 
-    "clean", 
-    "blog", 
-    "responsive", 
-    "personal", 
-    "simple", 
-    "minimalist", 
-    "portfolio", 
-    "dark",
-]
-features = [
-    "Dark mode", 
-    "Multilingual mode", 
-    "KaTeX", 
-    "Mermaid",
-    "Code highlighting", 
-    "External link",
-    "RSS",
-]
-min_version = "0.85.0"
+tags = ["minimal", "clean", "blog", "responsive", "personal", "simple", "minimalist", "portfolio", "dark"]
+features = ["Dark mode", "KaTeX"]
+min_version = "0.41.0"

 [author]
-name = "Mivinci"
-homepage = "https://mivinci.github.io/hugo-theme-minima"
+  name = "XJJ"
+  homepage = "https://xjj.pub"

 # If porting an existing theme
 [original]
-name = "Minima"
-homepage = "https://adisaktijrs.github.io/minima"
-repo = "https://github.com/adisaktijrs/hexo-theme-minima"
+  name = "Minima"
+  homepage = "https://adisaktijrs.github.io/minima"
+  repo = "https://github.com/adisaktijrs/hexo-theme-minima"
				`@ -0,0 +1 @@`
				`<p class="mermaid">{{ safeHTML .Inner }}</p>`