use theme

2024-12-22 01:42:53 +00:00 · 2022-03-11 10:32:10 +05:30 · 2022-03-11 10:32:10 +05:30 · fecc9b2684
commit fecc9b2684
parent 2dfa39111c
140 changed files with 10005 additions and 4 deletions
--- a/.gitmodules
+++ b/.gitmodules
@ -1,3 +1,6 @@
 [submodule "themes/hugo-theme-even"]
 	path = themes/hugo-theme-even
 	url = https://banyan.divineduty.xyz/GNUxeava/hugo-theme-even
+[submodule "themes/even"]
+	path = themes/even
+	url = https://banyan.divineduty.xyz/GNUxeava/hugo-theme-even
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -1,6 +1,43 @@
 ---
-title: "{{ replace .Name "-" " " | title }}"
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
 date: {{ .Date }}
+lastmod: {{ .Date }}
 draft: true
+keywords: []
+description: ""
+tags: []
+categories: []
+author: ""
+
+# You can also close(false) or open(true) something for this content.
+# P.S. comment can only be closed
+comment: false
+toc: false
+autoCollapseToc: false
+postMetaInFooter: false
+hiddenFromHomePage: false
+# You can also define another contentCopyright. e.g. contentCopyright: "This is another copyright."
+contentCopyright: false
+reward: false
+mathjax: false
+mathjaxEnableSingleDollar: false
+mathjaxEnableAutoNumber: false
+
+# You unlisted posts you might want not want the header or footer to show
+hideHeaderAndFooter: false
+
+# You can enable or disable out-of-date content warning for individual post.
+# Comment this out to use the global config.
+#enableOutdatedInfoWarning: false
+
+flowchartDiagrams:
+  enable: false
+  options: ""
+
+sequenceDiagrams: 
+  enable: false
+  options: ""
+
 ---

+<!--more-->
--- a/assets/js/even.js
+++ b/assets/js/even.js
@ -0,0 +1,279 @@
+'use strict';
+
+const Even = {};
+
+Even.backToTop = function() {
+  const $backToTop = $('#back-to-top');
+
+  $(window).scroll(function() {
+    if ($(window).scrollTop() > 100) {
+      $backToTop.fadeIn(1000);
+    } else {
+      $backToTop.fadeOut(1000);
+    }
+  });
+
+  $backToTop.click(function() {
+    $('body,html').animate({scrollTop: 0});
+  });
+};
+
+Even.mobileNavbar = function() {
+  const $mobileNav = $('#mobile-navbar');
+  const $mobileNavIcon = $('.mobile-navbar-icon');
+  const slideout = new Slideout({
+    'panel': document.getElementById('mobile-panel'),
+    'menu': document.getElementById('mobile-menu'),
+    'padding': 180,
+    'tolerance': 70,
+  });
+  slideout.disableTouch();
+
+  $mobileNavIcon.click(function() {
+    slideout.toggle();
+  });
+
+  slideout.on('beforeopen', function() {
+    $mobileNav.addClass('fixed-open');
+    $mobileNavIcon.addClass('icon-click').removeClass('icon-out');
+  });
+
+  slideout.on('beforeclose', function() {
+    $mobileNav.removeClass('fixed-open');
+    $mobileNavIcon.addClass('icon-out').removeClass('icon-click');
+  });
+
+  $('#mobile-panel').on('touchend', function() {
+    slideout.isOpen() && $mobileNavIcon.click();
+  });
+};
+
+Even._initToc = function() {
+  const SPACING = 20;
+  const $toc = $('.post-toc');
+  const $footer = $('.post-footer');
+
+  if ($toc.length) {
+    const minScrollTop = $toc.offset().top - SPACING;
+    const maxScrollTop = $footer.offset().top - $toc.height() - SPACING;
+
+    const tocState = {
+      start: {
+        'position': 'absolute',
+        'top': minScrollTop,
+      },
+      process: {
+        'position': 'fixed',
+        'top': SPACING,
+      },
+      end: {
+        'position': 'absolute',
+        'top': maxScrollTop,
+      },
+    };
+
+    $(window).scroll(function() {
+      const scrollTop = $(window).scrollTop();
+
+      if (scrollTop < minScrollTop) {
+        $toc.css(tocState.start);
+      } else if (scrollTop > maxScrollTop) {
+        $toc.css(tocState.end);
+      } else {
+        $toc.css(tocState.process);
+      }
+    });
+  }
+
+  const HEADERFIX = 30;
+  const $toclink = $('.toc-link');
+  const $headerlink = $('.headerlink');
+  const $tocLinkLis = $('.post-toc-content li');
+
+  const headerlinkTop = $.map($headerlink, function(link) {
+    return $(link).offset().top;
+  });
+
+  const headerLinksOffsetForSearch = $.map(headerlinkTop, function(offset) {
+    return offset - HEADERFIX;
+  });
+
+  const searchActiveTocIndex = function(array, target) {
+    for (let i = 0; i < array.length - 1; i++) {
+      if (target > array[i] && target <= array[i + 1]) return i;
+    }
+    if (target > array[array.length - 1]) return array.length - 1;
+    return -1;
+  };
+
+  $(window).scroll(function() {
+    const scrollTop = $(window).scrollTop();
+    const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop);
+
+    $($toclink).removeClass('active');
+    $($tocLinkLis).removeClass('has-active');
+
+    if (activeTocIndex !== -1 && $toclink[activeTocIndex] != null) {
+      $($toclink[activeTocIndex]).addClass('active');
+      let ancestor = $toclink[activeTocIndex].parentNode;
+      while (ancestor.tagName !== 'NAV') {
+        $(ancestor).addClass('has-active');
+        ancestor = ancestor.parentNode.parentNode;
+      }
+    }
+  });
+};
+
+Even.fancybox = function() {
+  if ($.fancybox) {
+    $('.post-content').each(function() {
+      $(this).find('img').each(function() {
+        $(this).wrap(`<a class="fancybox" href="${this.src}" data-fancybox="gallery" data-caption="${this.title}"></a>`);
+      });
+    });
+
+    $('.fancybox').fancybox({
+      selector: '.fancybox',
+      protect: true,
+    });
+  }
+};
+
+Even.highlight = function() {
+  const blocks = document.querySelectorAll('pre code');
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i];
+    const rootElement = block.parentElement;
+    const lineCodes = block.innerHTML.split(/\n/);
+    if (lineCodes[lineCodes.length - 1] === '') lineCodes.pop();
+    const lineLength = lineCodes.length;
+
+    let codeLineHtml = '';
+    for (let i = 0; i < lineLength; i++) {
+      codeLineHtml += `<div class="line">${i + 1}</div>`;
+    }
+
+    let codeHtml = '';
+    for (let i = 0; i < lineLength; i++) {
+      codeHtml += `<div class="line">${lineCodes[i]}</div>`;
+    }
+
+    block.className += ' highlight';
+    const figure = document.createElement('figure');
+    figure.className = block.className;
+    figure.innerHTML = `<table><tbody><tr><td class="gutter"><pre>${codeLineHtml}</pre></td><td class="code"><pre>${codeHtml}</pre></td></tr></tbody></table>`;
+
+    rootElement.parentElement.replaceChild(figure, rootElement);
+  }
+};
+
+Even.chroma = function() {
+  const blocks = document.querySelectorAll('.highlight > .chroma');
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i];
+    const afterHighLight = block.querySelector('pre.chroma > code[data-lang]');
+    const lang = afterHighLight ? afterHighLight.className : '';
+    block.className += ' ' + lang;
+  }
+};
+
+Even.toc = function() {
+  const tocContainer = document.getElementById('post-toc');
+  if (tocContainer !== null) {
+    const toc = document.getElementById('TableOfContents');
+    if (toc === null) {
+      // toc = true, but there are no headings
+      tocContainer.parentNode.removeChild(tocContainer);
+    } else {
+      this._refactorToc(toc);
+      this._linkToc();
+      this._initToc();
+    }
+  }
+};
+
+Even._refactorToc = function(toc) {
+  // when headings do not start with `h1`
+  const oldTocList = toc.children[0];
+  let newTocList = oldTocList;
+  let temp;
+  while (newTocList.children.length === 1
+      && (temp = newTocList.children[0].children[0]).tagName === 'UL') {
+    newTocList = temp;
+  }
+
+  if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
+};
+
+Even._linkToc = function() {
+  const links = document.querySelectorAll('#TableOfContents a:first-child');
+  for (let i = 0; i < links.length; i++) links[i].className += ' toc-link';
+
+  for (let num = 1; num <= 6; num++) {
+    const headers = document.querySelectorAll('.post-content>h' + num);
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      header.innerHTML = `<a href="#${header.id}" class="headerlink anchor"><i class="iconfont icon-link"></i></a>${header.innerHTML}`;
+    }
+  }
+};
+
+Even.flowchart = function() {
+  if (!window.flowchart) return;
+
+  const blocks = document.querySelectorAll('pre code.language-flowchart, pre code.language-flow');
+  for (let i = 0; i < blocks.length; i++) {
+    if (!window.hljs && i % 2 === 0) continue;
+
+    const block = blocks[i];
+    const rootElement = window.hljs
+        ? block.parentElement
+        : block.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
+
+    const container = document.createElement('div');
+    const id = `js-flowchart-diagrams-${i}`;
+    container.id = id;
+    container.className = 'align-center';
+    rootElement.parentElement.replaceChild(container, rootElement);
+
+    const diagram = flowchart.parse(block.childNodes[0].nodeValue);
+    diagram.drawSVG(id, window.flowchartDiagramsOptions ? window.flowchartDiagramsOptions : {});
+  }
+};
+
+Even.sequence = function() {
+  if (!window.Diagram) return;
+
+  const blocks = document.querySelectorAll('pre code.language-sequence');
+  for (let i = 0; i < blocks.length; i++) {
+    if (!window.hljs && i % 2 === 0) continue;
+
+    const block = blocks[i];
+    const rootElement = window.hljs
+        ? block.parentElement
+        : block.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
+
+    const container = document.createElement('div');
+    const id = `js-sequence-diagrams-${i}`;
+    container.id = id;
+    container.className = 'align-center';
+    rootElement.parentElement.replaceChild(container, rootElement);
+
+    const diagram = Diagram.parse(block.childNodes[0].nodeValue);
+    diagram.drawSVG(id, window.sequenceDiagramsOptions
+        ? window.sequenceDiagramsOptions
+        : {theme: 'simple'});
+  }
+};
+
+Even.responsiveTable = function() {
+  const tables = document.querySelectorAll('.post-content table:not(.lntable)');
+  for (let i = 0; i < tables.length; i++) {
+    const table = tables[i];
+    const wrapper = document.createElement('div');
+    wrapper.className = 'table-wrapper';
+    table.parentElement.replaceChild(wrapper, table);
+    wrapper.appendChild(table);
+  }
+};
+
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -0,0 +1,18 @@
+$(document).ready(function () {
+  Even.backToTop();
+  Even.mobileNavbar();
+  Even.toc();
+  Even.fancybox();
+});
+
+Even.responsiveTable();
+Even.flowchart();
+Even.sequence();
+
+if (window.hljs) {
+  hljs.initHighlighting();
+  Even.highlight();
+} else {
+  Even.chroma();
+}
+
--- a/assets/sass/_base.scss
+++ b/assets/sass/_base.scss
@ -0,0 +1,98 @@
+@import '_common/normalize';
+
+html {
+  font-size: $global-font-size;
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: $global-font-family;
+  font-weight: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: $global-lineheight;
+  color: $global-font-color;
+  background: $global-background;
+  scroll-behavior: smooth;
+  border-top: 3px solid $theme-color;
+}
+
+@include max-screen() {
+  body {
+    border-top: 0;
+  }
+}
+
+::selection {
+  background: $theme-color;
+  color: #fff; 
+}
+
+// ::-webkit-scrollbar {
+//   width: 8px;
+//   height: 6px; 
+// }
+
+// ::-webkit-scrollbar-thumb {
+//   background: lighten($theme-color, 10%);
+//   border-radius: 5px;
+// }
+
+// ::-webkit-scrollbar-track {
+//   background: rgba(211, 211, 211, 0.4);
+//   border-radius: 5px;
+// }
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+a {
+  color: $global-font-color;
+  text-decoration: none;
+}
+
+@each $header, $size in $global-headings {
+  #{$header} {
+    font-size: $size;
+    font-family: $global-serif-font-family;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  width: $global-body-width;
+}
+
+@include max-screen() {
+  .container {
+    width: 100%;
+    box-shadow: -1px -5px 5px $gray;
+  }
+}
+
+.content-wrapper {
+  padding: $global-container-padding;
+}
+
+// make video fluid:
+// https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
+// class video-container is the wrapper used by hexo youtube tag plugin
+.video-container {
+	position: relative;
+	padding-bottom: 56.25%; /* 16:9 */
+	padding-top: 25px;
+	height: 0;
+}
+.video-container iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
--- a/assets/sass/_common/_animation.scss
+++ b/assets/sass/_common/_animation.scss
@ -0,0 +1,156 @@
+@mixin underline-from-center() {
+  display: inline-block;
+  vertical-align: middle;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  box-shadow: 0 0 1px transparent;
+  position: relative;
+  overflow: hidden;
+
+  &:before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    height: 2px;
+    bottom: 0;
+    left: 51%;
+    right: 51%;
+    background: $theme-color;
+    transition-duration: 0.2s;
+    transition-property: right, left;
+    transition-timing-function: ease-out;
+  }
+
+  &.active,
+  &:active,
+  &:focus,
+  &:hover {
+    &:before {
+      right: 0;
+      left: 0;
+    }
+  }
+}
+
+@mixin mobile-menu-icon() {
+  @keyframes clickfirst {
+    0% {
+      transform: translateY(6px) rotate(0deg);
+      
+    }
+
+    100% {
+      transform: translateY(0) rotate(45deg);
+    }
+  }	
+
+  @keyframes clickmid {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes clicklast {
+    0% {
+      transform: translateY(-6px) rotate(0deg);
+    }
+
+    100% {
+      transform: translateY(0) rotate(-45deg);
+    }
+  }
+  
+  @keyframes outfirst {
+    0% {
+      transform: translateY(0) rotate(-45deg);
+    }
+
+    100% {
+      transform: translateY(-6px) rotate(0deg);
+    }
+  }	
+
+  @keyframes outmid {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes outlast {
+    0% {
+      transform: translateY(0) rotate(45deg);
+    }
+
+    100% {
+      transform: translateY(6px) rotate(0deg);
+    }
+  }
+
+  span {
+    position: absolute;
+    /* fallback for browsers which still doesn't support for `calc()` */
+    left: 15px;
+    top: 25px;
+    left: calc((100% - 20px) / 2);
+    top: calc((100% - 1px) / 2);
+    width: 20px;
+    height: 1px;
+    background-color: $theme-color;
+  
+    &:nth-child(1) {
+      transform: translateY(6px) rotate(0deg);
+    }
+
+    &:nth-child(3) {
+      transform: translateY(-6px) rotate(0deg);
+    }
+  }
+
+  &.icon-click {
+    span:nth-child(1) {
+      animation-duration: 0.5s;
+      animation-fill-mode: both;
+      animation-name: clickfirst;
+    }
+
+    span:nth-child(2) {
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-name: clickmid;
+    }
+
+    span:nth-child(3) {
+      animation-duration: 0.5s;
+      animation-fill-mode: both;
+      animation-name: clicklast;
+    }
+  }
+
+  &.icon-out {
+    span:nth-child(1) {
+      animation-duration: 0.5s;
+      animation-fill-mode: both;
+      animation-name: outfirst;
+    }
+
+    span:nth-child(2) {
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-name: outmid;
+    }
+
+    span:nth-child(3) {
+      animation-duration: 0.5s;
+      animation-fill-mode: both;
+      animation-name: outlast;
+    }
+  }
+}
--- a/assets/sass/_common/_normalize.scss
+++ b/assets/sass/_common/_normalize.scss
@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
--- a/assets/sass/_common/_utils.scss
+++ b/assets/sass/_common/_utils.scss
@ -0,0 +1,23 @@
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  
+  &:after {
+    clear: both;
+  }
+}
+
+@mixin min-screen($min-width: $global-body-width) {
+   @media screen and (min-width: $min-width) {
+     @content;
+   }
+}
+
+@mixin max-screen($max-width: $global-body-width) {
+   @media screen and (max-width: $max-width) {
+     @content;
+   }
+}
--- a/assets/sass/_custom/_custom.scss
+++ b/assets/sass/_custom/_custom.scss
@ -0,0 +1,4 @@
+// ==============================
+// Custom style
+// ==============================
+// You can override the variables in _variables.scss to customize the style
--- a/assets/sass/_iconfont.scss
+++ b/assets/sass/_iconfont.scss
@ -0,0 +1,200 @@
+// ==============================
+// Iconfont
+// ==============================
+
+@font-face {
+  font-family: 'iconfont';
+
+  src: url('../fonts/iconfont/iconfont.eot');
+  src: url('../fonts/iconfont/iconfont.eot#iefix') format('embedded-opentype'), // not '?#iefix', because webpack will add '?hash=[hash]'
+  url('../fonts/iconfont/iconfont.woff') format('woff'),
+  url('../fonts/iconfont/iconfont.ttf') format('truetype'),
+  url('../fonts/iconfont/iconfont.svg#iconfont') format('svg');
+  font-display: swap;
+}
+
+%base-iconfont {
+  font-family: "iconfont" !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  -webkit-text-stroke-width: 0.2px;
+  cursor: pointer;
+
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  font-feature-settings: "liga";
+  font-variant-ligatures: discretionary-ligatures;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconfont {
+  @extend %base-iconfont;
+}
+
+/* Social Icon */
+.icon-bilibili:before {
+  content: "\e900";
+  font-size: .9em;
+  position: relative;
+  top: -4px;
+}
+.icon-instagram:before {
+  font-size: .95em;
+  content: "\e611";
+  position: relative;
+  top: 1px;
+}
+.icon-douban:before {
+  content: "\e610";
+  position: relative;
+  top: 2px;
+}
+.icon-tumblr:before {
+  content: "\e69f";
+  font-size: .85em;
+  position: relative;
+  top: -2px;
+}
+.icon-linkedin:before {
+  content: "\e60d";
+  position: relative;
+  top: -2px;
+}
+.icon-twitter:before {
+  content: "\e600";
+}
+.icon-weibo:before {
+  content: "\e602";
+  position: relative;
+  top: 2px;
+}
+.icon-stack-overflow:before {
+  content: "\e902";
+  font-size: .85em;
+  position: relative;
+  top: -4px;
+}
+.icon-email:before {
+  content: "\e605";
+  position: relative;
+  top: -2px;
+}
+.icon-facebook:before {
+  content: "\e601";
+  font-size: .95em;
+  position: relative;
+  top: -2px;
+}
+.icon-gitlab:before {
+  content: "\e901";
+  font-size: .9em;
+  position: relative;
+  top: -4px;
+}
+.icon-github:before {
+  content: "\e606";
+  position: relative;
+  top: -1px;
+}
+.icon-rss:before {
+  content: "\e604";
+}
+.icon-google:before {
+  content: "\e609";
+  position: relative;
+  top: 2px;
+}
+.icon-zhihu:before {
+  content: "\e607";
+  font-size: .9em;
+}
+.icon-pocket:before {
+  content: "\e856";
+  position: relative;
+  top: 2px;
+}
+
+.inline-svg:before {
+  display: inline-block;
+  height: 1.15rem;
+  width: 1.15rem;
+  top: 0.15rem;
+  position: relative;
+}
+
+/* Generic Icon */
+.icon-heart:before {
+  content: "\e608";
+}
+.icon-right:before {
+  content: "\e60a";
+}
+.icon-left:before {
+  content: "\e60b";
+}
+.icon-up:before {
+  content: "\e60c";
+}
+.icon-close:before {
+  content: "\e60f";
+}
+.icon-link:before {
+  content: "\e909";
+}
+
+/* Admonition Icon */
+/*
+.icon-chevron-down:before {
+  content: "\e908";
+}
+.icon-format-quote:before {
+  content: "\e904";
+}
+.icon-pencil:before {
+  content: "\e903";
+}
+.icon-list-numbered:before {
+  content: "\e9b9";
+}
+.icon-list:before {
+  content: "\e9bb";
+}
+.icon-warning:before {
+  content: "\ea07";
+}
+.icon-question:before {
+  content: "\ea09";
+}
+.icon-info:before {
+  content: "\ea0c";
+}
+.icon-cross:before {
+  content: "\ea0f";
+}
+.icon-checkmark:before {
+  content: "\ea10";
+}
+.icon-fire:before {
+  content: "\e905";
+}
+.icon-danger:before {
+  content: "\e905";
+}
+.icon-flame:before {
+  content: "\e905";
+}
+.icon-hot:before {
+  content: "\e905";
+}
+.icon-bulb:before {
+  content: "\e906";
+}
+*/
--- a/assets/sass/_partial/_404.scss
+++ b/assets/sass/_partial/_404.scss
@ -0,0 +1,25 @@
+// ==============================
+// Archive
+// =============================
+
+.not-found {
+  text-align: center;
+
+  .error-emoji {
+    color: #363636;
+    font-size: 3rem;
+  }
+
+  .error-text {
+    color: #797979;
+    font-size: 1.25rem;
+  }
+
+  .error-link {
+    margin-top: 2rem;
+
+    a {
+      color: $theme-color;
+    }
+  }
+}
--- a/assets/sass/_partial/_archive.scss
+++ b/assets/sass/_partial/_archive.scss
@ -0,0 +1,100 @@
+// ==============================
+// Archive
+// =============================
+
+.archive {
+  margin: $archive-margin;
+  max-width: $archive-max-width;
+
+  .archive-title {
+    font-family: $global-serif-font-family;
+
+    &.tag,
+    &.category {
+      margin: 15px 0;
+    }
+
+    .archive-name {
+      margin: 0;
+      display: inline-block;
+      font-weight: 400;
+      font-size: $archive-name-font-size;
+      line-height: $archive-name-font-size + 2px;
+    }
+
+    .archive-post-counter {
+      color: $dark-gray;
+    }
+  }
+
+  .collection-title {
+    font-family: $global-serif-font-family;
+  
+    .archive-year {
+      margin: 15px 0;
+      font-weight: 400;
+      font-size: $collection-title-font-size;
+      line-height: $collection-title-font-size + 2px;
+    }
+  }
+
+  .archive-post {
+    padding: $archive-post-padding;
+    border-left: $archive-post-border-left;
+
+    .archive-post-time {
+      margin-right: 10px;
+      color: $dark-gray;
+    }
+
+    .archive-post-title {
+      
+      .archive-post-link {
+        color: $theme-color;
+      }
+    }
+
+    &::first-child {
+      margin-top: 10px;
+    }
+
+    &:hover {
+      border-left: $archive-post-hover-border-left;
+      transition: $archive-post-hover-transition;
+      transform: $archive-post-hover-transform;
+
+      .archive-post-time {
+        color: darken($dark-gray, 10%);
+      }
+
+      .archive-post-title .archive-post-link {
+        color: darken($theme-color, 10%);
+      }
+    }
+  }
+}
+
+@include max-screen() {
+  .archive {
+    margin-left: auto;
+    margin-right: auto;
+
+    .archive-title .archive-name {
+      font-size: $archive-name-font-size - 4px;
+    }
+
+    .collection-title .archive-year {
+      margin: 10px 0;
+      font-size: $collection-title-font-size - 4px;
+    }
+
+    .archive-post {
+      padding: $archive-post-mobile-padding;
+
+      .archive-post-time {
+        font-size: $archive-post-mobile-time-font-size;
+        display: block;
+      }
+    }
+  }
+}
--- a/assets/sass/_partial/_back-to-top.scss
+++ b/assets/sass/_partial/_back-to-top.scss
@ -0,0 +1,24 @@
+// ==============================
+// Back to top
+// =============================
+
+.back-to-top {
+  display: none;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  transition-duration: 0.3s;
+  z-index: 10;
+
+  &:hover {
+    transform: translateY(-5px); 
+  }
+}
+
+@include max-screen() {
+  .back-to-top {
+    display: none !important;
+  }
+}
--- a/assets/sass/_partial/_footer.scss
+++ b/assets/sass/_partial/_footer.scss
@ -0,0 +1,10 @@
+// ==============================
+// Post footer
+// =============================
+
+.footer {
+  margin-top: $footer-margin-top;
+
+  @import "_footer/social";
+  @import "_footer/copyright";
+}
--- a/assets/sass/_partial/_footer/_copyright.scss
+++ b/assets/sass/_partial/_footer/_copyright.scss
@ -0,0 +1,24 @@
+// ==============================
+// Copyright
+// =============================
+
+.copyright {
+  margin: $copyright-margin;
+  color: $dark-gray;
+  text-align: center;
+  font-family: $global-serif-font-family;
+
+  .hexo-link,
+  .theme-link {
+    color: $theme-color;
+  }
+
+  .copyright-year {
+    display: block;
+
+    .heart {
+      font-size: 14px;
+      margin: 4px;
+    }
+  }
+}
--- a/assets/sass/_partial/_footer/_social.scss
+++ b/assets/sass/_partial/_footer/_social.scss
@ -0,0 +1,19 @@
+// ==============================
+// Social
+// =============================
+
+.social-links {
+  text-align: center;
+
+  .iconfont {
+    font-size: $social-icon-font-size;
+
+    & + .iconfont {
+      margin-left: $social-link-margin-left;
+    } 
+
+    &:hover {
+      color: $theme-color;
+    }
+  }
+}
--- a/assets/sass/_partial/_header.scss
+++ b/assets/sass/_partial/_header.scss
@ -0,0 +1,26 @@
+// ==============================
+// Header
+// ==============================
+
+.header {
+  @include clearfix;
+  padding: $header-padding;
+
+  @import '_header/logo';
+  @import '_header/menu';
+
+  .language-selector {
+    float: right;
+  }
+}
+
+@include max-screen() {
+  .header {
+    padding: 50px 0 0;
+    text-align: center;
+
+    .language-selector {
+      display: none;
+    }
+  }
+}
--- a/assets/sass/_partial/_header/_logo.scss
+++ b/assets/sass/_partial/_header/_logo.scss
@ -0,0 +1,18 @@
+// ==============================
+// Logo
+// =============================
+
+.logo-wrapper {
+  float: left;
+
+  .logo {
+    font-size: $logo-font-size;
+    font-family: $logo-font-family;
+  }
+}
+
+@include max-screen() {
+  .logo-wrapper {
+    display: none;
+  }
+}
--- a/assets/sass/_partial/_header/_menu.scss
+++ b/assets/sass/_partial/_header/_menu.scss
@ -0,0 +1,35 @@
+// ==============================
+// Menu
+// =============================
+
+.site-navbar {
+  float: right;
+
+  .menu {
+    display: inline-block;
+    position: relative;
+    padding-left: 0;
+    padding-right: 25px;
+    font-family: $global-serif-font-family;
+
+    .menu-item {
+      display: inline-block;
+
+      & + .menu-item {
+        margin-left: $menu-item-margin-left;;
+      }
+
+      @include underline-from-center;
+    }
+
+    .menu-item-link {
+      font-size: $menu-link-font-size;
+    }
+  }
+}
+
+@include max-screen() {
+  .site-navbar {
+    display: none;
+  }
+}
--- a/assets/sass/_partial/_language-selector.scss
+++ b/assets/sass/_partial/_language-selector.scss
@ -0,0 +1,25 @@
+.language-selector {
+  width: max-content;
+
+  .languages-list {
+    padding: 0;
+    background: darken($deputy-color, 3%);
+
+    .language-item {
+      display: inline-block;
+      list-style-type: none;
+      text-transform: uppercase;
+      font-family: $global-serif-font-family;
+      font-size: 18px;
+      padding: 0 10px;
+
+      &.active {
+        background: $theme-color;
+
+        > a {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
--- a/assets/sass/_partial/_mobile.scss
+++ b/assets/sass/_partial/_mobile.scss
@ -0,0 +1,77 @@
+// ==============================
+// Mobile Navbar
+// ==============================
+
+.mobile-navbar {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $mobile-navbar-height;
+  background: $white;
+  box-shadow: 0px 2px 2px $gray;
+  text-align: center;
+  transition: transform 300ms ease;
+  z-index: 99;
+
+  &.fixed-open {
+    transform: translate3d(180px, 0px, 0px);
+  }
+
+  .mobile-header-logo {
+    display: inline-block;
+    margin-right: 50px;
+
+    .logo {
+      font-size: 22px;
+      line-height: $mobile-navbar-height;
+      font-family: $logo-font-family;
+    }
+  }
+
+  .mobile-navbar-icon {
+    color: $theme-color;
+    height: $mobile-navbar-height;
+    width: $mobile-navbar-height;
+    font-size: 24px;
+    text-align: center;
+    float: left;
+    position: relative;
+    transition: background 0.5s;
+
+    @include mobile-menu-icon();
+  }
+}
+
+.mobile-menu {
+  background-color: rgba($deputy-color, 0.5);
+
+  .mobile-menu-list {
+    position: relative;
+    list-style: none;
+    margin-top: 50px;
+    padding: 0;
+    border-top: 1px solid $deputy-color;
+
+    .mobile-menu-item {
+      padding: 10px 30px;
+      border-bottom: 1px solid $deputy-color;
+    }
+
+    a {
+      font-size: 18px;
+      font-family: $global-serif-font-family;
+
+      &:hover {
+        color: $theme-color;
+      }
+    }
+  }
+}
+
+@include max-screen() {
+  .mobile-navbar {
+    display: block;
+  }
+}
--- a/assets/sass/_partial/_pagination.scss
+++ b/assets/sass/_partial/_pagination.scss
@ -0,0 +1,36 @@
+// ==============================
+// Pagination
+// ==============================
+
+.pagination {
+  margin: $pagination-margin;
+  @include clearfix;
+
+  .prev,
+  .next {
+    font-weight: 600;
+    font-size: $pagination-font-size;
+    font-family: $global-serif-font-family;
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 0.3s;
+  }
+
+  .prev {
+    float: left;
+
+    &:hover {
+      color: $theme-color;
+      transform: translateX(-4px); 
+    }
+  }
+
+  .next {
+    float: right;
+
+    &:hover {
+      color: $theme-color;
+      transform: translateX(4px); 
+    }
+  }
+}
--- a/assets/sass/_partial/_post.scss
+++ b/assets/sass/_partial/_post.scss
@ -0,0 +1,24 @@
+// ==============================
+// Post
+// ==============================
+
+.posts {
+  margin-bottom: $post-list-margin-bottom;
+  border-bottom: $post-border;
+}
+
+.post {
+  padding: $post-padding;
+
+  & + .post {
+    border-top: $post-border;
+  }
+
+  @import '_post/header';
+  @import '_post/toc';
+  @import '_post/content';
+  @import '_post/copyright';
+  @import '_post/reward';
+  @import '_post/footer';
+  @import '_post/outdated';
+}
--- a/assets/sass/_partial/_post/_admonition.scss
+++ b/assets/sass/_partial/_post/_admonition.scss
@ -0,0 +1,210 @@
+.admonition {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
+      0 1px 5px 0 rgba(0,0,0,.12),
+      0 3px 1px -2px rgba(0,0,0,.2);
+  position: relative;
+  margin: .9765em 0;
+  padding: 0 .75rem;
+  border-left: .25rem solid #448aff;
+  border-radius: .125rem;
+  overflow: auto;
+
+  .admonition-title {
+    margin: 0 -0.75rem;
+    padding: .5rem .75rem .5rem 2.5rem;
+    border-bottom: .1rem solid rgba(68,138,255,.1);
+    background-color: rgba(68,138,255,.1);
+    font-weight: 700;
+  }
+
+  .admonition-title:before {
+    @extend %base-iconfont;
+    cursor: auto;
+    position: absolute;
+    left: .75rem;
+    top: .75rem;
+  }
+
+  &.note {
+    border-left-color: #448aff;
+
+    .admonition-title:before {
+      color: #448aff;
+      content: "\e903";
+    }
+  }
+
+  &.abstract {
+    border-left-color: #00b0ff;
+
+    .admonition-title {
+      background-color: rgba(0,176,255,.1);
+    }
+
+    .admonition-title:before {
+      color: #00b0ff;
+      content: "\e9bb";
+    }
+  }
+
+  &.info {
+    border-left-color: #00b8d4;
+
+    .admonition-title {
+      background-color: rgba(0,184,212,.1);
+    }
+
+    .admonition-title:before {
+      color: #00b8d4;
+      content: "\ea0c";
+    }
+  }
+
+  &.tip {
+    border-left-color: #00bfa5;
+
+    .admonition-title {
+      background-color: rgba(0,191,165,.1);
+    }
+
+    .admonition-title:before {
+      color: #00bfa5;
+      content: "\e906";
+    }
+  }
+
+  &.success {
+    border-left-color: #00c853;
+
+    .admonition-title {
+      background-color: rgba(0,200,83,.1);
+    }
+
+    .admonition-title:before {
+      color: #00c853;
+      content: "\ea10";
+    }
+  }
+
+  &.question {
+    border-left-color: #64dd17;
+
+    .admonition-title {
+      background-color: rgba(100,221,23,.1);
+    }
+
+    .admonition-title:before {
+      color: #64dd17;
+      content: "\ea09";
+    }
+  }
+
+  &.warning {
+    border-left-color: #ff9100;
+
+    .admonition-title {
+      background-color: rgba(255,145,0,.1);
+    }
+
+    .admonition-title:before {
+      color: #ff9100;
+      content: "\ea07";
+    }
+  }
+
+  &.failure {
+    border-left-color: #ff5252;
+
+    .admonition-title {
+      background-color: rgba(255,82,82,.1);
+    }
+
+    .admonition-title:before {
+      color: #ff5252;
+      content: "\ea0f";
+    }
+  }
+
+  &.danger {
+    border-left-color: #ff1744;
+
+    .admonition-title {
+      background-color: rgba(255,23,68,.1);
+    }
+
+    .admonition-title:before {
+      color: #ff1744;
+      content: "\e905";
+    }
+  }
+
+  &.bug {
+    border-left-color: #f50057;
+
+    .admonition-title {
+      background-color: rgba(245,0,87,.1);
+    }
+
+    .admonition-title:before {
+      color: #f50057;
+      content: "\e907";
+    }
+  }
+
+  &.example {
+    border-left-color: #651fff;
+
+    .admonition-title {
+      background-color: rgba(101,31,255,.1);
+    }
+
+    .admonition-title:before {
+      color: #651fff;
+      content: "\e9b9";
+    }
+  }
+
+  &.quote {
+    border-left-color: #9e9e9e;
+
+    .admonition-title {
+      background-color: hsla(0,0%,62%,.1);
+    }
+
+    .admonition-title:before {
+      color: #9e9e9e;
+      content: "\e904";
+    }
+  }
+
+  &:last-child {
+    margin-bottom: .75rem;
+  }
+}
+
+details.admonition {
+  summary {
+    display: block;
+    outline: none;
+    cursor: pointer;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:after {
+      @extend %base-iconfont;
+      position: absolute;
+      top: .75rem;
+      right: .75rem;
+      color: rgba(0,0,0,.26);
+      content: "\e908";
+    }
+  }
+}
+
+details.admonition[open] {
+  > summary:after {
+    transform: rotate(180deg);
+  }
+}
--- a/assets/sass/_partial/_post/_code.scss
+++ b/assets/sass/_partial/_post/_code.scss
@ -0,0 +1,287 @@
+code, pre {
+  padding: 7px;
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+  background: $code-background;
+}
+
+code {
+  padding: 3px 5px;
+  border-radius: 4px;
+  color: $code-color;
+}
+
+pre > code {
+  display: block;
+}
+
+// highlight.js
+figure.highlight {
+  margin: 1em 0;
+  border-radius: 5px;
+  overflow-x: auto;
+  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
+  position: relative;
+
+  table {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      padding: 2px 7px;
+      font-size: $code-font-size;
+      font-weight: bold;
+      color: darken($gray, 10%);
+      background: darken($code-background, 3%);
+      content: 'Code';
+    }
+  }
+
+  @each $sign, $text in $code-type-list {
+    &.#{$sign} > table::after {
+      content: $text;
+    }
+  }
+
+  .code {
+    pre {
+      margin: 0;
+      padding: 30px 10px 10px;
+    }
+  }
+
+  .gutter {
+    width: 10px;
+    color: $gray;
+
+    pre {
+      margin: 0;
+      padding: 30px 7px 10px;
+    }
+  }
+
+  .line {
+    // Fix code block null line height and
+    // Synchronous gutter and code line highly.
+    height: round($code-font-size * 1.5);
+  }
+
+  table, tr, td {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .code {
+    .hljs-comment,
+    .hljs-quote {
+      color: map-get($code-highlight-color, comment);
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-addition {
+      color: map-get($code-highlight-color, keyword);
+    }
+
+    .hljs-number,
+    .hljs-string,
+    .hljs-meta .hljs-meta-string,
+    .hljs-literal,
+    .hljs-doctag,
+    .hljs-regexp {
+      color: map-get($code-highlight-color, number);
+    }
+
+    .hljs-title,
+    .hljs-section,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class {
+      color: map-get($code-highlight-color, title);
+    }
+
+    .hljs-attribute,
+    .hljs-attr,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-class .hljs-title,
+    .hljs-type {
+      color: map-get($code-highlight-color, attribute);
+    }
+
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-subst,
+    .hljs-meta,
+    .hljs-meta .hljs-keyword,
+    .hljs-selector-attr,
+    .hljs-selector-pseudo,
+    .hljs-link {
+      color: map-get($code-highlight-color, symbol);
+    }
+
+    .hljs-built_in,
+    .hljs-deletion {
+      color: map-get($code-highlight-color, built_in);
+    }
+
+    .hljs-formula {
+      background: map-get($code-highlight-color, formula);
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: bold;
+    }
+  }
+}
+
+// chroma
+.highlight > .chroma {
+  margin: 1em 0;
+  border-radius: 5px;
+  overflow-x: auto;
+  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
+  position: relative;
+  background: $code-background;
+
+  code {
+    padding: 0;
+  }
+
+  table {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      padding: 2px 7px;
+      font-size: $code-font-size;
+      font-weight: bold;
+      color: darken($gray, 10%);
+      background: darken($code-background, 3%);
+      content: 'Code';
+    }
+  }
+
+  @each $sign, $text in $code-type-list {
+    &.#{$sign} > table::after {
+      content: $text;
+    }
+  }
+
+  .lntd {
+    // Fix code block null line height and
+    // Synchronous gutter and code line highly.
+    line-height: round($code-font-size * 1.5);
+
+    &:first-child {
+      width: 10px;
+
+      pre {
+        margin: 0;
+        padding: 30px 7px 10px;
+      }
+    }
+
+    &:last-child {
+      vertical-align: top;
+
+      pre {
+        margin: 0;
+        padding: 30px 10px 10px;
+      }
+    }
+  }
+
+  table, tr, td {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  /* LineNumbersTable */  .lnt { color: $gray; }
+  /* LineHighlight */  .hl { display: block; width: 100%; background-color: #ffffcc }
+
+  /* Keyword */  .k { color: #859900 }
+  /* KeywordConstant */  .kc { color: #859900; font-weight: bold }
+  /* KeywordDeclaration */  .kd { color: #859900 }
+  /* KeywordNamespace */  .kn { color: #dc322f; font-weight: bold }
+  /* KeywordPseudo */  .kp { color: #859900 }
+  /* KeywordReserved */  .kr { color: #859900 }
+  /* KeywordType */  .kt { color: #859900; font-weight: bold }
+  /* Name */  .n { color: #268bd2 }
+  /* NameAttribute */  .na { color: #268bd2 }
+  /* NameBuiltin */  .nb { color: #cb4b16 }
+  /* NameBuiltinPseudo */  .bp { color: #268bd2 }
+  /* NameClass */  .nc { color: #cb4b16 }
+  /* NameConstant */  .no { color: #268bd2 }
+  /* NameDecorator */  .nd { color: #268bd2 }
+  /* NameEntity */  .ni { color: #268bd2 }
+  /* NameException */  .ne { color: #268bd2 }
+  /* NameFunction */  .nf { color: #268bd2 }
+  /* NameFunctionMagic */  .fm { color: #268bd2 }
+  /* NameLabel */  .nl { color: #268bd2 }
+  /* NameNamespace */  .nn { color: #268bd2 }
+  /* NameOther */  .nx { color: #268bd2 }
+  /* NameProperty */  .py { color: #268bd2 }
+  /* NameTag */  .nt { color: #268bd2; font-weight: bold }
+  /* NameVariable */  .nv { color: #268bd2 }
+  /* NameVariableClass */  .vc { color: #268bd2 }
+  /* NameVariableGlobal */  .vg { color: #268bd2 }
+  /* NameVariableInstance */  .vi { color: #268bd2 }
+  /* NameVariableMagic */  .vm { color: #268bd2 }
+  /* Literal */  .l { color: #2aa198 }
+  /* LiteralDate */  .ld { color: #2aa198 }
+  /* LiteralString */  .s { color: #2aa198 }
+  /* LiteralStringAffix */  .sa { color: #2aa198 }
+  /* LiteralStringBacktick */  .sb { color: #2aa198 }
+  /* LiteralStringChar */  .sc { color: #2aa198 }
+  /* LiteralStringDelimiter */  .dl { color: #2aa198 }
+  /* LiteralStringDoc */  .sd { color: #2aa198 }
+  /* LiteralStringDouble */  .s2 { color: #2aa198 }
+  /* LiteralStringEscape */  .se { color: #2aa198 }
+  /* LiteralStringHeredoc */  .sh { color: #2aa198 }
+  /* LiteralStringInterpol */  .si { color: #2aa198 }
+  /* LiteralStringOther */  .sx { color: #2aa198 }
+  /* LiteralStringRegex */  .sr { color: #2aa198 }
+  /* LiteralStringSingle */  .s1 { color: #2aa198 }
+  /* LiteralStringSymbol */  .ss { color: #2aa198 }
+  /* LiteralNumber */  .m { color: #2aa198; font-weight: bold }
+  /* LiteralNumberBin */  .mb { color: #2aa198; font-weight: bold }
+  /* LiteralNumberFloat */  .mf { color: #2aa198; font-weight: bold }
+  /* LiteralNumberHex */  .mh { color: #2aa198; font-weight: bold }
+  /* LiteralNumberInteger */  .mi { color: #2aa198; font-weight: bold }
+  /* LiteralNumberIntegerLong */  .il { color: #2aa198; font-weight: bold }
+  /* LiteralNumberOct */  .mo { color: #2aa198; font-weight: bold }
+  /* OperatorWord */  .ow { color: #859900 }
+  /* Comment */  .c { color: #93a1a1; font-style: italic }
+  /* CommentHashbang */  .ch { color: #93a1a1; font-style: italic }
+  /* CommentMultiline */  .cm { color: #93a1a1; font-style: italic }
+  /* CommentSingle */  .c1 { color: #93a1a1; font-style: italic }
+  /* CommentSpecial */  .cs { color: #93a1a1; font-style: italic }
+  /* CommentPreproc */  .cp { color: #93a1a1; font-style: italic }
+  /* CommentPreprocFile */  .cpf { color: #93a1a1; font-style: italic }
+  /* Generic */  .g { color: #d33682 }
+  /* GenericDeleted */  .gd { color: #b58900 }
+  /* GenericEmph */  .ge { color: #d33682 }
+  /* GenericError */  .gr { color: #d33682 }
+  /* GenericHeading */  .gh { color: #d33682 }
+  /* GenericInserted */  .gi { color: #859900 }
+  /* GenericOutput */  .go { color: #d33682 }
+  /* GenericPrompt */  .gp { color: #d33682 }
+  /* GenericStrong */  .gs { color: #d33682 }
+  /* GenericSubheading */  .gu { color: #d33682 }
+  /* GenericTraceback */  .gt { color: #d33682 }
+}
--- a/assets/sass/_partial/_post/_content.scss
+++ b/assets/sass/_partial/_post/_content.scss
@ -0,0 +1,198 @@
+// ==============================
+// Post content
+// ==============================
+
+.post-content {
+  word-wrap: break-word;
+
+  @for $i from 1 through 6 {
+    h#{$i} {
+      font-weight: 400;
+      font-family: $global-serif-font-family;
+
+      .anchor {
+        float: left;
+        line-height: 1;
+        margin-left: -20px;
+        padding-right: 4px;
+
+        &:hover {
+          border-bottom: initial;
+        }
+
+        .icon-link {
+          visibility: hidden;
+          font-size: 16px;
+          display: contents;
+
+          &:before {
+            vertical-align: middle;
+          }
+        }
+      }
+
+      &:hover {
+        .icon-link {
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  a {
+    color: $theme-color;
+    word-break: break-all;
+
+    &:hover {
+      border-bottom: $content-link-border;
+    }
+
+    &.fancybox {
+      border: 0;
+    }
+  }
+
+  blockquote {
+    margin: 2em 0;
+    padding: 10px 20px;
+    position: relative;
+    color: rgba(#34495e, 0.8);
+    background-color: $content-blockquote-backgroud;
+    border-left: $content-blockquote-border-left;
+    box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
+
+    p {
+      margin: 0;
+    }
+  }
+
+  img {
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+
+    > table {
+      max-width: 100%;
+      margin: 10px 0;
+      border-spacing: 0;
+      box-shadow: 2px 2px 3px rgba(0,0,0,.125);
+
+      thead {
+        background: $deputy-color;
+      }
+
+      th, td {
+        padding: 5px 15px;
+        border: 1px double $content-table-border-color;
+      }
+
+      tr:hover {
+        background-color: $deputy-color;
+      }
+    }
+  }
+
+  @import 'code';
+  @import 'admonition';
+
+  .post-summary {
+    margin-bottom: 1em;
+  }
+
+  .read-more {
+    .read-more-link {
+      color: $theme-color;
+      font-size: 1.1em;
+      font-family: $global-serif-font-family;
+    
+      &:hover {
+        border-bottom: $post-readMore-border-bottom;
+      }
+    }
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 0.25em;
+    background-color: #fafafa;
+    border: 1px solid #dbdbdb;
+    border-bottom-color: #b5b5b5;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #b5b5b5;
+    font-size: 0.8em;
+    line-height: 1.25;
+    font-family: "SFMono-Regular","Liberation Mono","Roboto Mono",Menlo,Monaco,Consolas,"Courier New",Courier,monospace;
+    color: #4a4a4a;
+  }
+
+  dl dt::after {
+    content: ':';
+  }
+
+  figure {
+    &.center {
+      text-align: center;
+    }
+
+    &.right {
+      text-align: right;
+    }
+
+    &.left {
+      text-align: left;
+    }
+
+    figcaption h4 {
+      color: #b5b5b5;
+      font-size: 0.9rem;
+    }
+  }
+
+  hr {
+    margin: 1rem 0;
+    position: relative;
+    border-top: 2px dashed $theme-color;
+    border-bottom: none;
+  }
+
+  .footnote-ref {
+    > a {
+      font-weight: bold;
+      margin-left: 3px;
+
+      &:before {
+        content: "[";
+      }
+
+      &:after {
+        content: "]";
+      }
+    }
+  }
+
+  .task-list {
+    list-style: none;
+    padding-left: 1.5rem;
+  }
+
+  .align-center {
+    text-align: center;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+
+  .align-left {
+    text-align: left;
+  }
+
+  .MJXc-display {
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-right: 1px;
+  }
+}
--- a/assets/sass/_partial/_post/_copyright.scss
+++ b/assets/sass/_partial/_post/_copyright.scss
@ -0,0 +1,29 @@
+.post-copyright {
+  margin-top: 20px;
+  padding-top: 10px;
+  border-top: 1px dashed $light-gray;
+
+  .copyright-item {
+    margin: 5px 0;
+
+    a {
+      color: $theme-color;
+      word-wrap: break-word;
+
+      &:hover {
+        border-bottom: $content-link-border;
+      }
+    }
+
+    .item-title {
+      display: inline-block;
+      min-width: 5rem;
+      margin-right: .5rem;
+      text-align: right;
+
+      &:after {
+        content: " :";
+      }
+    }
+  }
+}
--- a/assets/sass/_partial/_post/_footer.scss
+++ b/assets/sass/_partial/_post/_footer.scss
@ -0,0 +1,74 @@
+// ==============================
+// Post footer
+// ==============================
+
+.post-footer {
+  margin-top: $post-footer-margin-top;
+  border-top: $post-footer-border-top;
+  font-family: $global-serif-font-family;
+
+  .post-tags {
+    padding: $post-tags-padding;
+
+    a {
+      margin-right: 5px;
+      color: $theme-color;
+      word-break: break-all;
+
+      &::before {
+        content: '#';
+      }
+    }
+  }
+
+  .post-nav {
+    margin: 1em 0;
+    @include clearfix;
+
+    .prev,
+    .next {
+      font-weight: 600;
+      font-size: $post-nav-font-size;
+      font-family: $global-serif-font-family;
+      transition-property: transform;
+      transition-timing-function: ease-out;
+      transition-duration: 0.3s;
+    }
+
+    .prev {
+      float: left;
+
+      &:hover {
+        color: $theme-color;
+        transform: translateX(-4px); 
+      }
+    }
+
+    .next {
+      float: right;
+
+      &:hover {
+        color: $theme-color;
+        transform: translateX(4px); 
+      }
+    }
+
+    .nav-mobile {
+      display: none;
+    }
+  }
+}
+
+@include max-screen() {
+  .post-footer {
+    .post-nav {
+      .nav-default {
+        display: none;
+      }
+
+      .nav-mobile {
+        display: inline;
+      }
+    }
+  }
+}
--- a/assets/sass/_partial/_post/_header.scss
+++ b/assets/sass/_partial/_post/_header.scss
@ -0,0 +1,46 @@
+.post-header {
+  margin-bottom: 20px;
+
+  .post-title {
+    margin: 0;
+    font-size: $post-title-font-size;
+    font-weight: $post-title-font-weight;
+    font-family: $global-serif-font-family;
+  }
+
+  .post-link {
+    @include underline-from-center;
+  }
+
+  .post-meta {
+    font-size: 14px;
+    color: $post-meta-font-color;
+
+    .post-time {
+      font-size: 15px;
+    }
+
+    .post-category {
+      display: inline;
+
+      a {
+        color: inherit;
+
+        &::before {
+          content: '·';
+        }
+
+        &:hover {
+          color: $theme-color;
+        }
+      }
+    }
+
+    .more-meta {
+      &::before {
+        content: '·';
+      }
+    }
+
+  }
+}
--- a/assets/sass/_partial/_post/_outdated.scss
+++ b/assets/sass/_partial/_post/_outdated.scss
@ -0,0 +1,25 @@
+.post-outdated {
+  .hint {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 5px 10px;
+    border-left: 4px solid rgb(66, 172, 243);
+    background-color: rgb(239, 245, 255);
+    border-color: rgb(66, 172, 243);
+  }
+
+  .warn {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 5px 10px;
+    border-left: 4px solid #f9cf63;
+    background-color: #ffffc0;
+    border-color: #f9cf63;
+  }
+}
+
+
+
+
--- a/assets/sass/_partial/_post/_reward.scss
+++ b/assets/sass/_partial/_post/_reward.scss
@ -0,0 +1,54 @@
+.post-reward {
+  margin-top: 20px;
+  padding-top: 10px;
+  text-align: center;
+  border-top: 1px dashed $light-gray;
+
+  .reward-button {
+    margin: 15px 0;
+    padding: 3px 7px;
+    display: inline-block;
+    color: $theme-color;
+    border: 1px solid $theme-color;
+    border-radius: 5px;
+    cursor: pointer;
+
+    &:hover {
+      color: $white;
+      background-color: $theme-color;
+      transition: 0.5s;
+    }
+  }
+
+  #reward:checked {
+    & ~ .qr-code {
+      display: block;
+    }
+
+    & ~ .reward-button {
+      display: none;
+    }
+  }
+
+  .qr-code {
+    display: none;
+
+    .qr-code-image {
+      display: inline-block;
+      min-width: 200px;
+      width: 40%;
+      margin-top: 15px;
+
+      span {
+        display: inline-block;
+        width: 100%;
+        margin: 8px 0;
+      }
+    }
+
+    .image {
+      width: 200px;
+      height: 200px;
+    }
+  }
+}
--- a/assets/sass/_partial/_post/_toc.scss
+++ b/assets/sass/_partial/_post/_toc.scss
@ -0,0 +1,55 @@
+.post-toc {
+  position: absolute;
+  width: $post-toc-width;
+  margin-left: $post-toc-margin-left;
+  padding: 10px;
+  font-family: $global-serif-font-family;
+  border-radius: 5px;
+  background: $post-toc-backgroud;
+  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
+  word-wrap: break-word;
+  box-sizing: border-box;
+
+  .post-toc-title {
+    margin: 0 10px;
+    font-size: $post-toc-title-size;
+    font-weight: 400;
+    text-transform: uppercase;
+  }
+
+  .post-toc-content {
+    font-size: $post-toc-content;
+
+    &.always-active ul {
+      display: block;
+    }
+
+    >nav>ul {
+      margin: 10px 0;
+    }
+
+    ul {
+      padding-left: 20px;
+      list-style: $post-toc-list-style;
+
+      ul {
+        padding-left: 15px;
+        display: none;
+      }
+
+      .has-active > ul {
+        display: block;
+      }
+    }
+
+    .toc-link.active {
+      color: $theme-color;
+    }
+  }
+}
+
+@include max-screen($toc-max-sreen-width) {
+  .post-toc {
+    display: none;
+  }
+}
--- a/assets/sass/_partial/_slideout.scss
+++ b/assets/sass/_partial/_slideout.scss
@ -0,0 +1,37 @@
+// ==============================
+// slideout (https://github.com/mango/slideout)
+// ==============================
+
+.slideout-menu {
+  position: fixed;
+  top: 0;
+  left: 0px;
+  bottom: 0;
+  width: 180px;
+  min-height: 100vh;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  z-index: 0;
+  display: none;
+
+  .language-selector {
+    padding-left: 30px;
+  }
+}
+
+.slideout-panel {
+  position: relative;
+  z-index: 1;
+  background-color: $white;
+  min-height: 100vh;
+}
+
+.slideout-open,
+.slideout-open body,
+.slideout-open .slideout-panel {
+  overflow: hidden;
+}
+
+.slideout-open .slideout-menu {
+  display: block;
+}
--- a/assets/sass/_partial/_terms.scss
+++ b/assets/sass/_partial/_terms.scss
@ -0,0 +1,46 @@
+// ==============================
+// General Terms(tags, categories, etc.)
+// =============================
+
+.terms {
+  margin: 2em 0 3em;
+  text-align: center;
+  font-family: $global-serif-font-family;
+
+  .terms-title {
+    display: inline-block;
+    font-size: $terms-title-size;
+    color: $theme-color;
+    border-bottom: $terms-title-border-bottom;
+  }
+
+  .terms-tags {
+    margin: 10px 0;
+
+    .terms-link {
+      display: inline-block;
+      position: relative;
+      margin: $terms-link-margin;
+      word-wrap: break-word;
+      transition-duration: 0.2s;
+      transition-property: transform;
+      transition-timing-function: ease-out;
+
+      .terms-count {
+        display: inline-block;
+        position: relative;
+        top: -8px;
+        right: -2px;
+        color: $theme-color;
+        font-size: $terms-count-font-size;
+      }
+
+      &:active,
+      &:focus,
+      &:hover {
+        color: $theme-color;
+        transform: scale(1.1);
+      }
+    }
+  }
+}
--- a/assets/sass/_variables.scss
+++ b/assets/sass/_variables.scss
@ -0,0 +1,329 @@
+// ==============================
+// Variables
+// ==============================
+
+// ========== Theme Color ========== //
+// Config here to change theme color
+// Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet
+$theme-color-config: 'Default';
+
+// Default theme color map
+$theme-color-map: (
+  'Default': #c05b4d #f8f5ec,
+  'Mint Green': #16982B #f5f5f5,
+  'Cobalt Blue': #0047AB #f0f2f5,
+  'Hot Pink': #FF69B4 #f8f5f5,
+  'Dark Violet': #9932CC #f5f4fa
+);
+
+// Check theme color config.
+// if it does not exist, use default theme color.
+@if not(map-has-key($theme-color-map, $theme-color-config)) {
+  $theme-color-config: 'Default';
+}
+$theme-color-list: map-get($theme-color-map, $theme-color-config);
+
+// Default theme color of the site.
+$theme-color: nth($theme-color-list, 1) !default;
+
+// Deputy theme color of the site.
+$deputy-color: nth($theme-color-list, 2) !default;
+
+
+// ========== Color ========== //
+$black: #0a0a0a !default;
+$white: #fefefe !default;
+$light-gray: #e6e6e6 !default;
+$gray: #cacaca !default;
+$dark-gray: #8a8a8a !default;
+
+
+// ========== Global ========== //
+// Text color of the body.
+$global-font-color: #34495e !default;
+
+// Font size attribute applied to '<html>' and '<body>'.
+$global-font-size: 16px !default;
+
+// Global width of '<body>'.
+$global-body-width: 800px !default;
+
+// Padding of container main
+$global-container-padding: 0 20px !default;
+
+// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px.
+$global-lineheight: 1.5 !default;
+
+// Font family of the site.
+$global-font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif !default;
+
+// Serif font family of the site.
+$global-serif-font-family: Athelas, STHeiti, Microsoft Yahei, serif !default;
+
+// Background color of the site.
+$global-background: $white !default;
+
+// Headings font size of the site.
+$global-headings: (
+  h1: 26px,
+  h2: 24px,
+  h3: 20px,
+  h4: 16px,
+  h5: 14px,
+  h6: 14px
+) !default;
+
+
+// ========== Header ========== //
+// Padding of the site header.
+$header-padding: 20px 20px !default;
+
+// Font family: Chancery
+@font-face {
+  font-family: 'Chancery';
+  src: url('../fonts/chancery/apple-chancery-webfont.eot');
+  src: local('Apple Chancery'), url('../fonts/chancery/apple-chancery-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/chancery/apple-chancery-webfont.woff2') format('woff2'),
+  url('../fonts/chancery/apple-chancery-webfont.woff') format('woff'),
+  url('../fonts/chancery/apple-chancery-webfont.ttf') format('truetype'),
+  url('../fonts/chancery/apple-chancery-webfont.svg#apple-chancery') format('svg');
+  font-weight: lighter;
+  font-style: normal;
+  font-display: swap;
+}
+
+// Font size of the logo.
+$logo-font-size: 48px !default;
+
+// Font family of the logo.
+$logo-font-family: 'Chancery', cursive, LiSu, sans-serif !default;
+
+// Margin of menu item.
+$menu-item-margin-left: 10px !default;
+
+// Margin of menu item in mobile.
+$menu-item-mobile-margin: 5px !default;
+
+// Font size of menu item link.
+$menu-link-font-size: 18px !default;
+
+// Height of the mobile header.
+$mobile-navbar-height: 50px !default;
+
+// ========== Post ========== //
+// Margin bottom of post list.
+$post-list-margin-bottom: 20px !default;
+
+// Padding of the post.
+$post-padding: 1.5em 0 !default;
+
+// Border top of the post + post.
+$post-border: 1px solid $light-gray !default;
+
+// Font size of post title.
+$post-title-font-size: 27px !default;
+
+// Font weight of post title.
+$post-title-font-weight: 400 !default;
+
+// Margin top of the post meta (post time).
+$post-meta-margin-top: 5px !default;
+
+// Font color of the post meta.
+$post-meta-font-color: $dark-gray !default;
+
+// Border bottom of the read more link when hover it.
+$post-readMore-border-bottom: 1px solid $theme-color !default;
+
+// Margin top of the post footer.
+$post-footer-margin-top: 20px !default;
+
+// Border top of post footer.
+$post-footer-border-top: 1px solid $light-gray !default;
+
+// Padding of the post tags.
+$post-tags-padding: 15px 0 !default;
+
+// Font size of post pagination.
+$post-nav-font-size: 18px !default;
+
+
+// ========== TOC ========== //
+// Width of the post toc.
+$post-toc-width: 200px !default;
+
+// Backgroud color of the post toc.
+$post-toc-backgroud: rgba($deputy-color, 0.6) !default;
+
+// Margin left of the post toc.
+$post-toc-margin-left: $global-body-width - 15px !default;
+
+// Font size of the post toc title.
+$post-toc-title-size: 20px !default;
+
+// Font size of the post toc content.
+$post-toc-content: 15px !default;
+
+// List style of the post toc list.
+$post-toc-list-style: square !default;
+
+// Max screen media of the post toc.
+$toc-max-sreen-width: 2 * $post-toc-width + $post-toc-margin-left !default;
+
+// ========== Content ========== //
+// Headings anchor.
+$content-headings-anchor: "" !default;
+
+// Border bottom of the link when hover it.
+$content-link-border: 1px solid $theme-color !default;
+
+// Background color of the blockquote.
+$content-blockquote-backgroud: rgba($theme-color, 0.05) !default;
+
+// Border left of the blockquote.
+$content-blockquote-border-left: 3px solid rgba($theme-color, 0.3) !default;
+
+// Border color of the table.
+$content-table-border-color: darken($deputy-color, 3%) !default;
+
+// ========== Code ========== //
+// Color of the code.
+$code-color: #c7254e !default;
+
+// Font size of code.
+$code-font-size: 0.9em !default;
+
+// Font family of the code.
+$code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono",
+ "Bitstream Vera Sans Mono", "Courier New", monospace !default;
+
+// Color of code highlight, solarized.
+$code-highlight-color: (
+  comment: #93a1a1,
+  keyword: #859900,
+  number: #2aa198,
+  title: #268bd2,
+  attribute: #b58900,
+  symbol: #cb4b16,
+  built_in: #dc322f,
+  formula: #eee8d5
+) !default;
+
+// Code type list.
+$code-type-list: (
+  // Custom code type
+  language-bash: "Bash",
+  language-c: "C",
+  language-cs: "C#",
+  language-cpp: "C++",
+  language-css: "CSS",
+  language-coffeescript: "CoffeeScript",
+  language-html: "HTML",
+  language-xml: "XML",
+  language-http: "HTTP",
+  language-json: "JSON",
+  language-java: "Java",
+  language-js: "JavaScript",
+  language-javascript: "JavaScript",
+  language-makefile: "Makefile",
+  language-markdown: "Markdown",
+  language-objectivec: "Objective-C",
+  language-php: "PHP",
+  language-perl: "Perl",
+  language-python: "Python",
+  language-ruby: "Ruby",
+  language-sql: "SQL",
+  language-shell: "Shell",
+
+  language-erlang: "Erlang",
+  language-go: "Go",
+  language-go-html-template: "Go HTML Template",
+  language-groovy: "Groovy",
+  language-haskell: "Haskell",
+  language-kotlin: "Kotlin",
+  language-clojure: "Clojure",
+  language-less: "Less",
+  language-lisp: "Lisp",
+  language-lua: "Lua",
+  language-matlab: "Matlab",
+  language-rust: "Rust",
+  language-scss: "Scss",
+  language-scala: "Scala",
+  language-swift: "Swift",
+  language-typescript: "TypeScript",
+  language-yml: "YAML",
+  language-yaml: "YAML",
+  language-toml: "TOML",
+  language-diff: "Diff"
+) !default;
+
+// Color of the code background.
+$code-background: $deputy-color !default;
+
+
+// ========== Pagination ========== //
+// Margin of the pagination.
+$pagination-margin: 2em 0 !default;
+
+// Font size of the pagination (Without post, post pagination see line 140).
+$pagination-font-size: 20px !default;
+
+
+// ========== Footer ========== //
+// Margin top of the footer.
+$footer-margin-top: 2em !default;
+
+// Margin left of the social link.
+$social-link-margin-left: 10px !default;
+
+// Font size of the social icon.
+$social-icon-font-size: 30px !default;
+
+// Margin of the copyright.
+$copyright-margin: 10px 0 !default;
+
+
+// ========== Archive ========== //
+// Margin of the archive.
+$archive-margin: 2em 0px !default;
+
+// Max width of the archive.
+$archive-max-width: 550px !default;
+
+// Font size of the archive name.
+$archive-name-font-size: 30px !default;
+
+// Font size of the collection title.
+$collection-title-font-size: 28px !default;
+
+// Padding of the archive post.
+$archive-post-padding: 3px 20px !default;
+
+// Padding of the archive post in mobile.
+$archive-post-mobile-padding: 5px 10px !default;
+
+// Font size of the archive post time in mobile.
+$archive-post-mobile-time-font-size: 13px !default;
+
+// Border left of the archive post, use $archive-post-hover-border-left when hover it.
+$archive-post-border-left: 1px solid $gray !default;
+$archive-post-hover-border-left: 3px solid $theme-color !default;
+
+// Transition of the archive post when hover it.
+$archive-post-hover-transition: 0.2s ease-out !default;
+
+// Transform of the archive post when hover it.
+$archive-post-hover-transform: translateX(4px) !default;
+
+// ========== General Terms ========== //
+// Font size of the terms title.
+$terms-title-size: 18px !default;
+
+// Border bottom of the terms title.
+$terms-title-border-bottom: 2px solid $theme-color !default;
+
+// Margin of the terms link.
+$terms-link-margin: 5px 10px !default;
+
+// Font size of the terms count
+$terms-count-font-size: 12px !default;
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -0,0 +1,19 @@
+@import "_custom/custom";
+@import "_variables";
+
+@import "_common/utils";
+@import "_common/animation";
+
+@import "_base";
+@import "_iconfont";
+@import "_partial/header";
+@import "_partial/post";
+@import "_partial/pagination";
+@import "_partial/footer";
+@import "_partial/archive";
+@import "_partial/terms";
+@import "_partial/slideout";
+@import "_partial/mobile";
+@import "_partial/back-to-top";
+@import "_partial/404";
+@import "_partial/language-selector";
--- a/config.toml
+++ b/config.toml
@ -1,3 +1,164 @@
-baseURL = 'http://example.org/'
-languageCode = 'en-us'
-title = 'My New Hugo Site'
+baseURL = "https://chronicles.divineduty.xyz/"
+languageCode = "en"
+defaultContentLanguage = "en"                             # en / zh-cn / ... (This field determines which i18n file to use)
+title = "The Divine Chronicles"
+preserveTaxonomyNames = true
+enableRobotsTXT = true
+enableEmoji = true
+theme = "even"
+enableGitInfo = true # use git commit log to generate lastmod record # 可根据 Git 中的提交生成最近更新记录。
+
+# Syntax highlighting by Chroma. NOTE: Don't enable `highlightInClient` and `chroma` at the same time!
+pygmentsOptions = "linenos=table"
+pygmentsCodefences = true
+pygmentsUseClasses = true
+pygmentsCodefencesGuessSyntax = true
+
+hasCJKLanguage = true     # has chinese/japanese/korean ? # 自动检测是否包含 中文\日文\韩文
+paginate = 5                                              # 首页每页显示的文章数
+disqusShortname = ""      # disqus_shortname
+googleAnalytics = ""      # UA-XXXXXXXX-X
+copyright = ""            # default: author.name ↓        # 默认为下面配置的author.name ↓
+
+[author]                  # essential                     # 必需
+  name = "GNUxeava"
+
+[sitemap]                 # essential                     # 必需
+  changefreq = "weekly"
+  priority = 0.5
+  filename = "sitemap.xml"
+
+[[menu.main]]             # config your menu              # 配置目录
+  name = "Home"
+  weight = 10
+  identifier = "home"
+  url = "/"
+[[menu.main]]
+  name = "Posts"
+  weight = 20
+  identifier = "archives"
+  url = "/post/"
+[[menu.main]]
+  name = "Tags"
+  weight = 30
+  identifier = "tags"
+  url = "/tags/"
+[[menu.main]]
+  name = "Categories"
+  weight = 40
+  identifier = "categories"
+  url = "/categories/"
+
+[params]
+  version = "4.x"           # Used to give a friendly message when you have an incompatible update
+  debug = false             # If true, load `eruda.min.js`. See https://github.com/liriliri/eruda
+
+  since = "2022"            # Site creation time          # 站点建立时间
+  # use public git repo url to link lastmod git commit, enableGitInfo should be true.
+  # 指定 git 仓库地址，可以生成指向最近更新的 git commit 的链接，需要将 enableGitInfo 设置成 true.
+  gitRepo = "https://banyan.divineduty.xyz/GNUxeava/divine-chronicles"
+
+  # site info (optional)                                  # 站点信息（可选，不需要的可以直接注释掉）
+  logoTitle = "The Divine Chronicles"        # default: the title value    # 默认值: 上面设置的title值
+  keywords = ["blog", "hugo"]
+  description = "Home of my blog posts."
+
+  # paginate of archives, tags and categories             # 归档、标签、分类每页显示的文章数目，建议修改为一个较大的值
+  archivePaginate = 50
+
+  # show 'xx Posts In Total' in archive page ?            # 是否在归档页显示文章的总数
+  showArchiveCount = true
+
+  # The date format to use; for a list of valid formats, see https://gohugo.io/functions/format/
+  dateFormatToUse = "2006-01-02"
+
+  # show word count and read time ?                       # 是否显示字数统计与阅读时间
+  moreMeta = true
+
+  # Syntax highlighting by highlight.js
+  highlightInClient = false
+
+  # 一些全局开关，你也可以在每一篇内容的 front matter 中针对单篇内容关闭或开启某些功能，在 archetypes/default.md 查看更多信息。
+  # Some global options, you can also close or open something in front matter for a single post, see more information from `archetypes/default.md`.
+  toc = true                                                                            # 是否开启目录
+  autoCollapseToc = false   # Auto expand and collapse toc                              # 目录自动展开/折叠
+  fancybox = true           # see https://github.com/fancyapps/fancybox                 # 是否启用fancybox（图片可点击）
+
+  # mathjax
+  mathjax = false           # see https://www.mathjax.org/                              # 是否使用mathjax（数学公式）
+  mathjaxEnableSingleDollar = false                                                     # 是否使用 $...$ 即可進行inline latex渲染
+  mathjaxEnableAutoNumber = false                                                       # 是否使用公式自动编号
+  mathjaxUseLocalFiles = false  # You should install mathjax in `your-site/static/lib/mathjax`
+
+  postMetaInFooter = true   # contain author, lastMod, markdown link, license           # 包含作者，上次修改时间，markdown链接，许可信息
+  linkToMarkDown = false    # Only effective when hugo will output .md files.           # 链接到markdown原始文件（仅当允许hugo生成markdown文件时有效）
+  contentCopyright = '<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'     # e.g. '<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a>'
+
+  # Link custom CSS and JS assets
+  #   (relative to /static/css and /static/js respectively)
+  customCSS = []
+  customJS = []
+
+  uglyURLs = false          # please keep same with uglyurls setting
+
+  # Show language selector for multilingual site.
+  showLanguageSelector = false
+
+  [params.publicCDN]        # load these files from public cdn                          # 启用公共CDN，需自行定义
+    enable = true
+    jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'
+    slideout = '<script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>'
+    fancyboxJS = '<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>'
+    fancyboxCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">'
+    timeagoJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.min.js" integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin="anonymous"></script>'
+    timeagoLocalesJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.locales.min.js" integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin="anonymous"></script>'
+    flowchartDiagramsJS = '<script src="https://cdn.jsdelivr.net/npm/raphael@2.2.7/raphael.min.js" integrity="sha256-67By+NpOtm9ka1R6xpUefeGOY8kWWHHRAKlvaTJ7ONI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/flowchart.js@1.8.0/release/flowchart.min.js" integrity="sha256-zNGWjubXoY6rb5MnmpBNefO0RgoVYfle9p0tvOQM+6k=" crossorigin="anonymous"></script>'
+    sequenceDiagramsCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams@2.0.1/dist/sequence-diagram-min.css" integrity="sha384-6QbLKJMz5dS3adWSeINZe74uSydBGFbnzaAYmp+tKyq60S7H2p6V7g1TysM5lAaF" crossorigin="anonymous">'
+    sequenceDiagramsJS = '<script src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/snapsvg@0.5.1/dist/snap.svg-min.js" integrity="sha256-oI+elz+sIm+jpn8F/qEspKoKveTc5uKeFHNNVexe6d8=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/underscore@1.8.3/underscore-min.js" integrity="sha256-obZACiHd7gkOk9iIL/pimWMTJ4W/pBsKu+oZnSeBIek=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams@2.0.1/dist/sequence-diagram-min.js" integrity="sha384-8748Vn52gHJYJI0XEuPB2QlPVNUkJlJn9tHqKec6J3q2r9l8fvRxrgn/E5ZHV0sP" crossorigin="anonymous"></script>'
+
+  # Display a message at the beginning of an article to warn the readers that it's content may be outdated.
+  # 在文章开头显示提示信息，提醒读者文章内容可能过时。
+  [params.outdatedInfoWarning]
+    enable = false
+    hint = 30               # Display hint if the last modified time is more than these days ago.    # 如果文章最后更新于这天数之前，显示提醒
+    warn = 180              # Display warning if the last modified time is more than these days ago.    # 如果文章最后更新于这天数之前，显示警告
+
+  [params.flowchartDiagrams]# see https://blog.olowolo.com/example-site/post/js-flowchart-diagrams/
+    enable = false
+    options = ""
+
+  [params.sequenceDiagrams] # see https://blog.olowolo.com/example-site/post/js-sequence-diagrams/
+    enable = false
+    options = ""            # default: "{theme: 'simple'}"
+
+# See https://gohugo.io/about/hugo-and-gdpr/
+[privacy]
+  [privacy.googleAnalytics]
+    anonymizeIP = true      # 12.214.31.144 -> 12.214.31.0
+  [privacy.youtube]
+    privacyEnhanced = true
+
+# see https://gohugo.io/getting-started/configuration-markup
+[markup]
+  [markup.tableOfContents]
+    startLevel = 1
+  [markup.goldmark.renderer]
+    unsafe = true
+
+# 将下面这段配置取消注释可以使 hugo 生成 .md 文件
+# Uncomment these options to make hugo output .md files.
+#[mediaTypes]
+#  [mediaTypes."text/plain"]
+#    suffixes = ["md"]
+#
+#[outputFormats.MarkDown]
+#  mediaType = "text/plain"
+#  isPlainText = true
+#  isHTML = false
+#
+#[outputs]
+#  home = ["HTML", "RSS"]
+#  page = ["HTML", "MarkDown"]
+#  section = ["HTML", "RSS"]
+#  taxonomy = ["HTML", "RSS"]
+#  taxonomyTerm = ["HTML"]
--- a/content/about.md
+++ b/content/about.md
--- a/content/post/english-preview.md
+++ b/content/post/english-preview.md
--- a/content/post/wow.md
+++ b/content/post/wow.md
@ -0,0 +1,43 @@
+---
+title: "Wow"
+date: 2022-03-11T07:22:33+05:30
+lastmod: 2022-03-11T07:22:33+05:30
+draft: false
+keywords: []
+description: ""
+tags: []
+categories: []
+author: ""
+
+# You can also close(false) or open(true) something for this content.
+# P.S. comment can only be closed
+comment: false
+toc: false
+autoCollapseToc: false
+postMetaInFooter: false
+hiddenFromHomePage: false
+# You can also define another contentCopyright. e.g. contentCopyright: "This is another copyright."
+contentCopyright: false
+reward: false
+mathjax: false
+mathjaxEnableSingleDollar: false
+mathjaxEnableAutoNumber: false
+
+# You unlisted posts you might want not want the header or footer to show
+hideHeaderAndFooter: false
+
+# You can enable or disable out-of-date content warning for individual post.
+# Comment this out to use the global config.
+#enableOutdatedInfoWarning: false
+
+flowchartDiagrams:
+  enable: false
+  options: ""
+
+sequenceDiagrams: 
+  enable: false
+  options: ""
+
+---
+Some stuff ( ^-^)/
+<!--more-->
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@ -0,0 +1,231 @@
+baseURL = "http://localhost:1313/"
+languageCode = "en"
+defaultContentLanguage = "en"                             # en / zh-cn / ... (This field determines which i18n file to use)
+title = "Even - A super concise theme for Hugo"
+preserveTaxonomyNames = true
+enableRobotsTXT = true
+enableEmoji = true
+theme = "even"
+enableGitInfo = false # use git commit log to generate lastmod record # 可根据 Git 中的提交生成最近更新记录。
+
+# Syntax highlighting by Chroma. NOTE: Don't enable `highlightInClient` and `chroma` at the same time!
+pygmentsOptions = "linenos=table"
+pygmentsCodefences = true
+pygmentsUseClasses = true
+pygmentsCodefencesGuessSyntax = true
+
+hasCJKLanguage = true     # has chinese/japanese/korean ? # 自动检测是否包含 中文\日文\韩文
+paginate = 5                                              # 首页每页显示的文章数
+disqusShortname = ""      # disqus_shortname
+googleAnalytics = ""      # UA-XXXXXXXX-X
+copyright = ""            # default: author.name ↓        # 默认为下面配置的author.name ↓
+
+[author]                  # essential                     # 必需
+  name = "olOwOlo"
+
+[sitemap]                 # essential                     # 必需
+  changefreq = "weekly"
+  priority = 0.5
+  filename = "sitemap.xml"
+
+[[menu.main]]             # config your menu              # 配置目录
+  name = "Home"
+  weight = 10
+  identifier = "home"
+  url = "/"
+[[menu.main]]
+  name = "Archives"
+  weight = 20
+  identifier = "archives"
+  url = "/post/"
+[[menu.main]]
+  name = "Tags"
+  weight = 30
+  identifier = "tags"
+  url = "/tags/"
+[[menu.main]]
+  name = "Categories"
+  weight = 40
+  identifier = "categories"
+  url = "/categories/"
+
+[params]
+  version = "4.x"           # Used to give a friendly message when you have an incompatible update
+  debug = false             # If true, load `eruda.min.js`. See https://github.com/liriliri/eruda
+
+  since = "2017"            # Site creation time          # 站点建立时间
+  # use public git repo url to link lastmod git commit, enableGitInfo should be true.
+  # 指定 git 仓库地址，可以生成指向最近更新的 git commit 的链接，需要将 enableGitInfo 设置成 true.
+  gitRepo = ""
+
+  # site info (optional)                                  # 站点信息（可选，不需要的可以直接注释掉）
+  logoTitle = "Even"        # default: the title value    # 默认值: 上面设置的title值
+  keywords = ["Hugo", "theme","even"]
+  description = "Hugo theme even example site."
+
+  # paginate of archives, tags and categories             # 归档、标签、分类每页显示的文章数目，建议修改为一个较大的值
+  archivePaginate = 50
+
+  # show 'xx Posts In Total' in archive page ?            # 是否在归档页显示文章的总数
+  showArchiveCount = false
+
+  # The date format to use; for a list of valid formats, see https://gohugo.io/functions/format/
+  dateFormatToUse = "2006-01-02"
+
+  # show word count and read time ?                       # 是否显示字数统计与阅读时间
+  moreMeta = false
+
+  # Syntax highlighting by highlight.js
+  highlightInClient = false
+
+  # 一些全局开关，你也可以在每一篇内容的 front matter 中针对单篇内容关闭或开启某些功能，在 archetypes/default.md 查看更多信息。
+  # Some global options, you can also close or open something in front matter for a single post, see more information from `archetypes/default.md`.
+  toc = true                                                                            # 是否开启目录
+  autoCollapseToc = false   # Auto expand and collapse toc                              # 目录自动展开/折叠
+  fancybox = true           # see https://github.com/fancyapps/fancybox                 # 是否启用fancybox（图片可点击）
+
+  # mathjax
+  mathjax = false           # see https://www.mathjax.org/                              # 是否使用mathjax（数学公式）
+  mathjaxEnableSingleDollar = false                                                     # 是否使用 $...$ 即可進行inline latex渲染
+  mathjaxEnableAutoNumber = false                                                       # 是否使用公式自动编号
+  mathjaxUseLocalFiles = false  # You should install mathjax in `your-site/static/lib/mathjax`
+
+  postMetaInFooter = true   # contain author, lastMod, markdown link, license           # 包含作者，上次修改时间，markdown链接，许可信息
+  linkToMarkDown = false    # Only effective when hugo will output .md files.           # 链接到markdown原始文件（仅当允许hugo生成markdown文件时有效）
+  contentCopyright = ''     # e.g. '<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a>'
+
+  changyanAppid = ""        # Changyan app id             # 畅言
+  changyanAppkey = ""       # Changyan app key
+
+  livereUID = ""            # LiveRe UID                  # 来必力
+
+  baiduPush = false        # baidu push                  # 百度
+  baiduAnalytics = ""      # Baidu Analytics
+  baiduVerification = ""   # Baidu Verification
+  googleVerification = ""  # Google Verification         # 谷歌
+
+  # Link custom CSS and JS assets
+  #   (relative to /static/css and /static/js respectively)
+  customCSS = []
+  customJS = []
+
+  uglyURLs = false          # please keep same with uglyurls setting
+
+  # Show language selector for multilingual site.
+  showLanguageSelector = false
+
+  [params.publicCDN]        # load these files from public cdn                          # 启用公共CDN，需自行定义
+    enable = true
+    jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'
+    slideout = '<script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>'
+    fancyboxJS = '<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>'
+    fancyboxCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">'
+    timeagoJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.min.js" integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin="anonymous"></script>'
+    timeagoLocalesJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.locales.min.js" integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin="anonymous"></script>'
+    flowchartDiagramsJS = '<script src="https://cdn.jsdelivr.net/npm/raphael@2.2.7/raphael.min.js" integrity="sha256-67By+NpOtm9ka1R6xpUefeGOY8kWWHHRAKlvaTJ7ONI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/flowchart.js@1.8.0/release/flowchart.min.js" integrity="sha256-zNGWjubXoY6rb5MnmpBNefO0RgoVYfle9p0tvOQM+6k=" crossorigin="anonymous"></script>'
+    sequenceDiagramsCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams@2.0.1/dist/sequence-diagram-min.css" integrity="sha384-6QbLKJMz5dS3adWSeINZe74uSydBGFbnzaAYmp+tKyq60S7H2p6V7g1TysM5lAaF" crossorigin="anonymous">'
+    sequenceDiagramsJS = '<script src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/snapsvg@0.5.1/dist/snap.svg-min.js" integrity="sha256-oI+elz+sIm+jpn8F/qEspKoKveTc5uKeFHNNVexe6d8=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/underscore@1.8.3/underscore-min.js" integrity="sha256-obZACiHd7gkOk9iIL/pimWMTJ4W/pBsKu+oZnSeBIek=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams@2.0.1/dist/sequence-diagram-min.js" integrity="sha384-8748Vn52gHJYJI0XEuPB2QlPVNUkJlJn9tHqKec6J3q2r9l8fvRxrgn/E5ZHV0sP" crossorigin="anonymous"></script>'
+
+  # Display a message at the beginning of an article to warn the readers that it's content may be outdated.
+  # 在文章开头显示提示信息，提醒读者文章内容可能过时。
+  [params.outdatedInfoWarning]
+    enable = false
+    hint = 30               # Display hint if the last modified time is more than these days ago.    # 如果文章最后更新于这天数之前，显示提醒
+    warn = 180              # Display warning if the last modified time is more than these days ago.    # 如果文章最后更新于这天数之前，显示警告
+
+  [params.gitment]          # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment
+    owner = ""              # Your GitHub ID
+    repo = ""               # The repo to store comments
+    clientId = ""           # Your client ID
+    clientSecret = ""       # Your client secret
+
+  [params.utterances]       # https://utteranc.es/
+    owner = ""              # Your GitHub ID
+    repo = ""               # The repo to store comments
+
+  [params.gitalk]           # Gitalk is a comment system based on GitHub issues. see https://github.com/gitalk/gitalk
+    owner = ""              # Your GitHub ID
+    repo = ""               # The repo to store comments
+    clientId = ""           # Your client ID
+    clientSecret = ""       # Your client secret
+
+  # Valine.
+  # You can get your appid and appkey from https://leancloud.cn
+  # more info please open https://valine.js.org
+  [params.valine]
+    enable = false
+    appId = '你的appId'
+    appKey = '你的appKey'
+    notify = false  # mail notifier , https://github.com/xCss/Valine/wiki
+    verify = false # Verification code
+    avatar = 'mm'
+    placeholder = '说点什么吧...'
+    visitor = false
+
+  [params.flowchartDiagrams]# see https://blog.olowolo.com/example-site/post/js-flowchart-diagrams/
+    enable = false
+    options = ""
+
+  [params.sequenceDiagrams] # see https://blog.olowolo.com/example-site/post/js-sequence-diagrams/
+    enable = false
+    options = ""            # default: "{theme: 'simple'}"
+
+  [params.busuanzi]         # count web traffic by busuanzi                             # 是否使用不蒜子统计站点访问量
+    enable = false
+    siteUV = true
+    sitePV = true
+    pagePV = true
+
+  [params.reward]                                         # 文章打赏
+    enable = false
+    wechat = "/path/to/your/wechat-qr-code.png"           # 微信二维码
+    alipay = "/path/to/your/alipay-qr-code.png"           # 支付宝二维码
+
+  [params.social]                                         # 社交链接
+    a-email = "mailto:your@email.com"
+    b-stack-overflow = "http://localhost:1313"
+    c-twitter = "http://localhost:1313"
+    d-facebook = "http://localhost:1313"
+    e-linkedin = "http://localhost:1313"
+    f-google = "http://localhost:1313"
+    g-github = "http://localhost:1313"
+    h-weibo = "http://localhost:1313"
+    i-zhihu = "http://localhost:1313"
+    j-douban = "http://localhost:1313"
+    k-pocket = "http://localhost:1313"
+    l-tumblr = "http://localhost:1313"
+    m-instagram = "http://localhost:1313"
+    n-gitlab = "http://localhost:1313"
+    o-bilibili = "http://localhost:1313"
+
+# See https://gohugo.io/about/hugo-and-gdpr/
+[privacy]
+  [privacy.googleAnalytics]
+    anonymizeIP = true      # 12.214.31.144 -> 12.214.31.0
+  [privacy.youtube]
+    privacyEnhanced = true
+
+# see https://gohugo.io/getting-started/configuration-markup
+[markup]
+  [markup.tableOfContents]
+    startLevel = 1
+  [markup.goldmark.renderer]
+    unsafe = true
+
+# 将下面这段配置取消注释可以使 hugo 生成 .md 文件
+# Uncomment these options to make hugo output .md files.
+#[mediaTypes]
+#  [mediaTypes."text/plain"]
+#    suffixes = ["md"]
+#
+#[outputFormats.MarkDown]
+#  mediaType = "text/plain"
+#  isPlainText = true
+#  isHTML = false
+#
+#[outputs]
+#  home = ["HTML", "RSS"]
+#  page = ["HTML", "MarkDown"]
+#  section = ["HTML", "RSS"]
+#  taxonomy = ["HTML", "RSS"]
+#  taxonomyTerm = ["HTML"]
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@ -0,0 +1,21 @@
+---
+title: "About"
+date: 2017-08-20T21:38:52+08:00
+lastmod: 2017-08-28T21:41:52+08:00
+menu: "main"
+weight: 50
+
+---
+
+Hugo is a static site engine written in Go.
+
+
+It makes use of a variety of open source projects including:
+
+* [Cobra](https://github.com/spf13/cobra)
+* [Viper](https://github.com/spf13/viper)
+* [J Walter Weatherman](https://github.com/spf13/jWalterWeatherman)
+* [Cast](https://github.com/spf13/cast)
+
+Learn more and contribute on [GitHub](https://github.com/gohugoio).
+
--- a/exampleSite/content/post/chinese-preview.md
+++ b/exampleSite/content/post/chinese-preview.md
@ -0,0 +1,84 @@
+---
+title: "[中文] 《长恨歌》"
+date: 2017-08-30T01:37:56+08:00
+lastmod: 2017-08-30T01:37:56+08:00
+draft: false
+tags: ["preview", "中文", "tag-1"]
+categories: ["中文"]
+author: "Wikipedia"
+
+contentCopyright: '<a rel="license noopener" href="https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License" target="_blank">Creative Commons Attribution-ShareAlike License</a>'
+
+---
+
+>《长恨歌》是中国唐朝诗人白居易的一首长篇叙事诗。
+
+# 第一段：贵妃受宠爱
+
+汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。
+
+天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。
+
+春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。
+
+云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。
+
+承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。
+
+金屋妆成娇侍夜，玉楼宴罢醉和春。姊妹弟兄皆列士，可怜光彩生门户。
+
+遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。
+
+缓歌慢舞凝丝竹，尽日君王看不足。渔阳鼙鼓动地来，惊破霓裳羽衣曲。
+
+# 第二段：马嵬惊变
+
+九重城阙烟尘生，千乘万骑西南行。翠华摇摇行复止，西出都门百余里。
+
+六军不发无奈何，宛转蛾眉马前死。花钿委地无人收，翠翘金雀玉搔头。
+
+君王掩面救不得，回看血泪相和流。黄埃散漫风萧索，云栈萦纡登剑阁。
+
+峨嵋山下少人行，旌旗无光日色薄。蜀江水碧蜀山青，圣主朝朝暮暮情。
+
+行宫见月伤心色，夜雨闻铃肠断声。
+
+# 第三段：玄宗皇帝思念
+
+天旋地转回龙驭，到此踌躇不能去。马嵬坡下泥土中，不见玉颜空死处。
+
+君臣相顾尽霑衣，东望都门信马归。归来池苑皆依旧，太液芙蓉未央柳。
+
+芙蓉如面柳如眉，对此如何不泪垂。春风桃李花开日，秋雨梧桐叶落时。
+
+西宫南内多秋草，落叶满阶红不扫。梨园弟子白发新，椒房阿监青娥老。
+
+夕殿萤飞思悄然，孤灯挑尽未成眠。迟迟钟鼓初长夜，耿耿星河欲曙天。
+
+鸳鸯瓦冷霜华重，翡翠衾寒谁与共。悠悠生死别经年，魂魄不曾来入梦。
+
+# 第四段：仙界寻妃
+
+临邛道士鸿都客，能以精诚致魂魄。为感君王辗转思，遂教方士殷勤觅。
+
+排空驭气奔如电，升天入地求之遍。上穷碧落下黄泉，两处茫茫皆不见。
+
+忽闻海上有仙山，山在虚无缥缈间。楼阁玲珑五云起，其中绰约多仙子。
+
+中有一人字太真，雪肤花貌参差是。金阙西厢叩玉扃，转教小玉报双成。
+
+闻道汉家天子使，九华帐里梦魂惊。揽衣推枕起徘徊，珠箔银屏迤逦开。
+
+云髻(鬓?)半偏新睡觉，花冠不整下堂来。风吹仙袂飘飘(飖)举，犹似霓裳羽衣舞。
+
+玉容寂寞泪阑干，梨花一枝春带雨。含情凝睇谢君王，一别音容两渺茫。
+
+昭阳殿里恩爱绝，蓬莱宫中日月长。回头下望人寰处，不见长安见尘雾。
+
+唯将旧物表深情，钿合金钗寄将去。钗留一股合一扇，钗擘黄金合分钿。
+
+但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。
+
+七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。
+
+天长地久有时尽，此恨绵绵无绝期。
--- a/exampleSite/content/post/english-preview.md
+++ b/exampleSite/content/post/english-preview.md
--- a/exampleSite/content/post/even-preview.md
+++ b/exampleSite/content/post/even-preview.md
@ -0,0 +1,725 @@
+---
+title: "Theme preview"
+date: 2018-07-10T00:00:00+08:00
+lastmod: 2018-07-10T00:00:00+08:00
+draft: false
+tags: ["preview", "Theme preview", "tag-3"]
+categories: ["Theme preview", "category-2", "category-3"]
+
+weight: 10
+contentCopyright: MIT
+mathjax: true
+autoCollapseToc: true
+
+---
+
+> Based on [MarkdownPreview test.md](https://github.com/facelessuser/MarkdownPreview/blob/master/examples/test.md).
+
+# Markdown
+
+```
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+### Duplicate Header
+### Duplicate Header
+```
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+### Duplicate Header
+### Duplicate Header
+
+## Paragraphs
+
+```
+This is a paragraph.
+I am still part of the paragraph.
+
+New paragraph.
+```
+
+This is a paragraph.
+I am still part of the paragraph.
+
+New paragraph.
+
+## Anchor
+
+*Define anchor by `{#section-id}`*
+
+[Something](#section-7)
+
+## Footnote
+
+This is a footnote[^1]
+
+A footnote on "label"[^label]
+
+The footnote for definition[^!DEF]
+
+A footnote with link[^pa]
+
+[^1]: This is a footnote
+[^label]: A footnote on "label"
+[^pa]: [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+[^!DEF]: The footnote for definition
+
+
+## Inline
+
+```
+`inline block`
+
+<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>
+
+**bold 1** and __bold 2__
+
+*italic 1*  and _italic 2_
+
+~~strike~~
+
+
+***bold 1 and italic 1***
+
+___bold 2 and italic 2___
+
+__*bold 2 and italic 1*__
+
+**_bold 1 and italic 2_**
+
+
+~~*strike italic 1*~~ and *~~strike italic 2~~*
+
+~~_strike italic 2_~~ and  _~~strike italic 2~~_
+
+
+~~**strike bold 1**~~ and **~~strike bold 1~~**
+
+~~__strike bold 2__~~ and __~~strike bold 2~~__
+
+
+~~***strike italic 1 bold 1***~~ and ***~~strike italic 1 bold 1~~***
+
+~~___strike italic 2 bold 2___~~ and ___~~strike italic 2 bold 2~~___
+
+**~~*strike italic 1 bold 1*~~** and *~~**strike italic 1 bold 1**~~*
+
+__~~_strike italic 2 bold 2_~~__ and _~~__strike italic 2 bold 2__~~_
+
+**~~_strike italic 2 bold 1_~~** and _~~**strike italic 2 bold 1**~~_
+
+__~~*strike italic 1 bold 2*~~__ and *~~__strike italic 1 bold 2__~~*
+
+```
+
+`inline block`
+
+<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>
+
+**bold 1** and __bold 2__
+
+*italic 1*  and _italic 2_
+
+~~strike~~
+
+
+***bold 1 and italic 1***
+
+___bold 2 and italic 2___
+
+__*bold 2 and italic 1*__
+
+**_bold 1 and italic 2_**
+
+
+~~*strike italic 1*~~ and *~~strike italic 2~~*
+
+~~_strike italic 2_~~ and  _~~strike italic 2~~_
+
+
+~~**strike bold 1**~~ and **~~strike bold 1~~**
+
+~~__strike bold 2__~~ and __~~strike bold 2~~__
+
+
+~~***strike italic 1 bold 1***~~ and ***~~strike italic 1 bold 1~~***
+
+~~___strike italic 2 bold 2___~~ and ___~~strike italic 2 bold 2~~___
+
+**~~*strike italic 1 bold 1*~~** and *~~**strike italic 1 bold 1**~~*
+
+__~~_strike italic 2 bold 2_~~__ and _~~__strike italic 2 bold 2__~~_
+
+**~~_strike italic 2 bold 1_~~** and _~~**strike italic 2 bold 1**~~_
+
+__~~*strike italic 1 bold 2*~~__ and *~~__strike italic 1 bold 2__~~*
+
+
+## Links
+
+```
+Web image
+![Web Picture](https://count.getloli.com/get/@even-preview?theme=konachan "Web Picture")
+
+Local image
+![Local Picture](logo-revolunet-carre.jpg "Local Picture")
+
+contact@revolunet.com
+
+@revolunet
+
+Issue #1
+
+https://github.com/revolunet/sublimetext-markdown-preview/
+
+This is a link https://github.com/revolunet/sublimetext-markdown-preview/.
+
+This is a link "https://github.com/revolunet/sublimetext-markdown-preview/".
+
+With this link (https://github.com/revolunet/sublimetext-markdown-preview/), it still works.
+```
+
+Web image
+![Web Picture](https://count.getloli.com/get/@even-preview?theme=konachan "Web Picture")
+
+Local image
+![Local Picture](/apple-touch-icon.png "Local Picture")
+
+www.google.com
+
+contact@revolunet.com
+
+@revolunet
+
+Issue #1
+
+https://github.com/revolunet/sublimetext-markdown-preview/
+
+This is a link https://github.com/revolunet/sublimetext-markdown-preview/.
+
+This is a link "https://github.com/revolunet/sublimetext-markdown-preview/".
+
+With this link (https://github.com/revolunet/sublimetext-markdown-preview/), it still works.
+
+## Abbreviation
+
+Abbreviations source are found in a separate markdown file specified in frontmatter.
+```
+The HTML specification 
+is maintained by the W3C.
+
+*[HTML]: Hyper Text Markup Language
+*[W3C]:  World Wide Web Consortium
+```
+
+The HTML specification 
+is maintained by the W3C.
+
+## Unordered List
+
+```
+Unordered List
+
+- item 1
+    * item A
+    * item B
+        more text
+        + item a
+        + item b
+        + item c
+    * item C
+- item 2
+- item 3
+```
+
+Unordered List
+
+- item 1
+    * item A
+    * item B
+        more text
+        + item a
+        + item b
+        + item c
+    * item C
+- item 2
+- item 3
+
+
+## Ordered List
+
+```
+Ordered List
+
+1. item 1
+    1. item A
+    2. item B
+        more text
+        1. item a
+        2. item b
+        3. item c
+    3. item C
+2. item 2
+3. item 3
+```
+
+Ordered List
+
+1. item 1
+    1. item A
+    2. item B
+        more text
+        1. item a
+        2. item b
+        3. item c
+    3. item C
+2. item 2
+3. item 3
+
+## Task List
+
+```
+Task List
+
+- [X] item 1
+    * [X] item A
+    * [ ] item B
+        more text
+        + [x] item a
+        + [ ] item b
+        + [x] item c
+    * [X] item C
+- [ ] item 2
+- [ ] item 3
+```
+
+Task List
+
+- [X] item 1
+    * [X] item A
+    * [ ] item B
+        more text
+        + [x] item a
+        + [ ] item b
+        + [x] item c
+    * [X] item C
+- [ ] item 2
+- [ ] item 3
+
+## Mixed Lists
+
+`Really Mixed Lists` should break with `sane_lists` on.
+
+```
+Mixed Lists
+
+- item 1
+    * [X] item A
+    * [ ] item B
+        more text
+        1. item a
+        2. itemb
+        3. item c
+    * [X] item C
+- item 2
+- item 3
+
+
+Really Mixed Lists
+
+- item 1
+    * [X] item A
+    - item B
+        more text
+        1. item a
+        + itemb
+        + [ ] item c
+    3. item C
+2. item 2
+- [X] item 3
+```
+
+Mixed Lists
+
+- item 1
+    * [X] item A
+    * [ ] item B
+        more text
+        1. item a
+        2. itemb
+        3. item c
+    * [X] item C
+- item 2
+- item 3
+
+
+Really Mixed Lists
+
+- item 1
+    * [X] item A
+    - item B
+        more text
+        1. item a
+        + itemb
+        + [ ] item c
+    3. item C
+2. item 2
+- [X] item 3
+
+
+## Dictionary
+
+```
+Dictionary
+:   item 1
+
+    item 2
+
+    item 3
+```
+
+Dictionary
+:   item 1
+
+    item 2
+
+    item 3
+
+## Blocks
+
+```
+    This is a block.
+    
+    This is more of a block.
+
+```
+
+    This is a block.
+    
+    This is more of a block.
+
+
+## Block Quotes
+
+```
+> This is a block quote
+>> How does it look?
+```
+
+> This is a block quote.
+>> How does it look?
+> I think it looks good.
+
+## Fenced Block
+
+Assuming guessing is not enabled.
+
+`````
+```
+// Fenced **without** highlighting
+function doIt() {
+    for (var i = 1; i <= slen ; i^^) {
+        setTimeout("document.z.textdisplay.value = newMake()", i*300);
+        setTimeout("window.status = newMake()", i*300);
+    }
+}
+```
+
+```javascript
+// Fenced **with** highlighting
+function doIt() {
+    for (var i = 1; i <= slen ; i^^) {
+        setTimeout("document.z.textdisplay.value = newMake()", i*300);
+        setTimeout("window.status = newMake()", i*300);
+    }
+}
+```
+`````
+
+```
+// Fenced **without** highlighting
+function doIt() {
+    for (var i = 1; i <= slen ; i^^) {
+        setTimeout("document.z.textdisplay.value = newMake()", i*300);
+        setTimeout("window.status = newMake()", i*300);
+    }
+}
+```
+
+```javascript
+// Fenced **with** highlighting
+function doIt() {
+    for (var i = 1; i <= slen ; i^^) {
+        setTimeout("document.z.textdisplay.value = newMake()", i*300);
+        setTimeout("window.status = newMake()", i*300);
+    }
+}
+```
+
+## Tables
+
+```
+| _Colors_      | Fruits          | Vegetable         |
+| ------------- |:---------------:| -----------------:|
+| Red           | *Apple*         | [Pepper](#Tables) |
+| ~~Orange~~    | Oranges         | **Carrot**        |
+| Green         | ~~***Pears***~~ | Spinach           |
+```
+
+| _Colors_      | Fruits          | Vegetable    |
+| ------------- |:---------------:| ------------:|
+| Red           | *Apple*         | Pepper       |
+| ~~Orange~~    | Oranges         | **Carrot**   |
+| Green         | ~~***Pears***~~ | Spinach      |
+
+Class or Enum           | Year                                                                                  | Month                                                                                 |                                          Day                                          |                                         Hours                                         |                                        Minutes                                        | Seconds*                                                                              |                                      Zone Offset                                      |                                        Zone ID                                        | toString Output                                    | Where Discussed                                                                                    
+----------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:| ------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------
+`Instant`        |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       | `2013-08-20T15:16:26.355Z`                  | [Instant Class](https://docs.oracle.com/javase/tutorial/datetime/iso/instant.html)                 
+`LocalDate`      | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `2013-08-20`                                | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)                     
+`LocalDateTime`  | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       | `2013-08-20T08:16:26.937`                   | [Date and Time Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/datetime.html)        
+`ZonedDateTime`  | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | `2013-08-21T00:16:26.941+09:00[Asia/Tokyo]` | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
+`LocalTime`      |                                                                                       |                                                                                       |                                                                                       | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       | `08:16:26.943`                              | [Date and Time Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/datetime.html)        
+`MonthDay`       |                                                                                       | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `--08-20`                                   | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)                     
+`Year`           | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `2013`                                      | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)                     
+`YearMonth`      | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `2013-08`                                   | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)                     
+`Month`          |                                                                                       | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       |                                                                                       | `AUGUST`                                    | [DayOfWeek and Month Enums](https://docs.oracle.com/javase/tutorial/datetime/iso/enum.html)        
+`OffsetDateTime` | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       | `2013-08-20T08:16:26.954-07:00`             | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
+`OffsetTime`     |                                                                                       |                                                                                       |                                                                                       | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       | `08:16:26.957-07:00`                        | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
+`Duration`       |                                                                                       |                                                                                       |                                          \**                                          |                                          \**                                          |                                          \**                                          | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       | `PT20H` (20 hours)                          | [Period and Duration](https://docs.oracle.com/javase/tutorial/datetime/iso/period.html)            
+`Period`         | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> |                                                                                       |                                                                                       |                                                                                       |                                         \***                                          |                                         \***                                          | `P10D` (10 days)                            | [Period and Duration](https://docs.oracle.com/javase/tutorial/datetime/iso/period.html)            
+
+## Smart Strong
+
+```
+Text with double__underscore__words.
+
+__Strong__ still works.
+
+__this__works__too__
+```
+
+Text with double__underscore__words.
+
+__Strong__ still works.
+
+__this__works__too__
+
+## Smarty
+
+```
+"double quotes"
+
+'single quotes'
+
+da--sh
+
+elipsis...
+```
+
+"double quotes"
+
+'single quotes'
+
+da--sh
+
+elipsis...
+
+## Neseted Fences
+
+````
+    ```
+    This will still be parsed
+    as a normal indented code block.
+    ```
+
+```
+This will still be parsed
+as a fenced code block.
+```
+
+- This is a list that contains multiple code blocks.
+
+    - Here is an indented block
+
+            ```
+            This will still be parsed
+            as a normal indented code block.
+            ```
+
+    - Here is a fenced code block:
+
+        ```
+        This will still be parsed
+        as a fenced code block.
+        ```
+
+        > ```
+        > Blockquotes?
+        > Not a problem!
+        > ```
+````
+
+    ```
+    This will still be parsed
+    as a normal indented code block.
+    ```
+
+```
+This will still be parsed
+as a fenced code block.
+```
+
+- This is a list that contains multiple code blocks.
+
+    - Here is an indented block
+
+            ```
+            This will still be parsed
+            as a normal indented code block.
+            ```
+
+    - Here is a fenced code block:
+
+        ```
+        This will still be parsed
+        as a fenced code block.
+        ```
+
+        > ```
+        > Blockquotes?
+        > Not a problem!
+        > ```
+
+# Others
+
+## Github Emoji {#section-7}
+
+```
+This is a test for emoji :smile:.  The emojis are images linked to github assets :octocat:.
+```
+
+This is a test for emoji :smile:.  The emojis are images linked to github assets :octocat:.
+
+### People
+
+:+1::-1::alien::angel::anger::angry::anguished::astonished::baby::blue_heart::blush::boom::bow::bowtie::boy::bride_with_veil::broken_heart::bust_in_silhouette::busts_in_silhouette::clap::cold_sweat::collision::confounded::confused::construction_worker::cop::couple::couple_with_heart::couplekiss::cry::crying_cat_face::cupid::dancer::dancers::dash::disappointed::disappointed_relieved::dizzy::dizzy_face::droplet::ear::exclamation::expressionless::eyes::facepunch::family::fearful::feelsgood::feet::finnadie::fire::fist::flushed::frowning::fu::girl::goberserk::godmode::green_heart::grey_exclamation::grey_question::grimacing::grin::grinning::guardsman::haircut::hand::hankey::hear_no_evil::heart::heart_eyes::heart_eyes_cat::heartbeat::heartpulse::hurtrealbad::hushed::imp::information_desk_person::innocent::japanese_goblin::japanese_ogre::joy::joy_cat::kiss::kissing::kissing_cat::kissing_closed_eyes::kissing_heart::kissing_smiling_eyes::laughing::lips::love_letter::man::man_with_gua_pi_mao::man_with_turban::mask::massage::metal::muscle::musical_note::nail_care::neckbeard::neutral_face::no_good::no_mouth::nose::notes::ok_hand::ok_woman::older_man::older_woman::open_hands::open_mouth::pensive::persevere::person_frowning::person_with_blond_hair::person_with_pouting_face::point_down::point_left::point_right::point_up::point_up_2::poop::pouting_cat::pray::princess::punch::purple_heart::question::rage::rage1::rage2::rage3::rage4::raised_hand::raised_hands::raising_hand::relaxed::relieved::revolving_hearts::runner::running::satisfied::scream::scream_cat::see_no_evil::shit::skull::sleeping::sleepy::smile::smile_cat::smiley::smiley_cat::smiling_imp::smirk::smirk_cat::sob::sparkles::sparkling_heart::speak_no_evil::speech_balloon::star::star2::stuck_out_tongue::stuck_out_tongue_closed_eyes::stuck_out_tongue_winking_eye::sunglasses::suspect::sweat::sweat_drops::sweat_smile::thought_balloon::thumbsdown::thumbsup::tired_face::tongue::triumph::trollface::two_hearts::two_men_holding_hands::two_women_holding_hands::unamused::v::walking::wave::weary::wink::woman::worried::yellow_heart::yum::zzz:
+
+### Nature
+
+:ant::baby_chick::bear::bee::beetle::bird::blossom::blowfish::boar::bouquet::bug::cactus::camel::cat::cat2::cherry_blossom::chestnut::chicken::cloud::cow::cow2::crescent_moon::crocodile::cyclone::deciduous_tree::dog::dog2::dolphin::dragon::dragon_face::dromedary_camel::ear_of_rice::earth_africa::earth_americas::earth_asia::elephant::evergreen_tree::fallen_leaf::first_quarter_moon::first_quarter_moon_with_face::fish::foggy::four_leaf_clover::frog::full_moon::full_moon_with_face::globe_with_meridians::goat::hamster::hatched_chick::hatching_chick::herb::hibiscus::honeybee::horse::koala::last_quarter_moon::last_quarter_moon_with_face::leaves::leopard::maple_leaf::milky_way::monkey::monkey_face::moon::mouse::mouse2::mushroom::new_moon::new_moon_with_face::night_with_stars::ocean::octocat::octopus::ox::palm_tree::panda_face::partly_sunny::paw_prints::penguin::pig::pig2::pig_nose::poodle::rabbit::rabbit2::racehorse::ram::rat::rooster::rose::seedling::sheep::shell::snail::snake::snowflake::snowman::squirrel::sun_with_face::sunflower::sunny::tiger::tiger2::tropical_fish::tulip::turtle::umbrella::volcano::waning_crescent_moon::waning_gibbous_moon::water_buffalo::waxing_crescent_moon::waxing_gibbous_moon::whale::whale2::wolf::zap:
+
+### Objects
+
+:8ball::alarm_clock::apple::art::athletic_shoe::baby_bottle::balloon::bamboo::banana::bar_chart::baseball::basketball::bath::bathtub::battery::beer::beers::bell::bento::bicyclist::bikini::birthday::black_joker::black_nib::blue_book::bomb::book::bookmark::bookmark_tabs::books::boot::bowling::bread::briefcase::bulb::cake::calendar::calling::camera::candy::card_index::cd::chart_with_downwards_trend::chart_with_upwards_trend::cherries::chocolate_bar::christmas_tree::clapper::clipboard::closed_book::closed_lock_with_key::closed_umbrella::clubs::cocktail::coffee::computer::confetti_ball::cookie::corn::credit_card::crown::crystal_ball::curry::custard::dango::dart::date::diamonds::dollar::dolls::door::doughnut::dress::dvd::e-mail::egg::eggplant::electric_plug::email::envelope::envelope_with_arrow::euro::eyeglasses::fax::file_folder::fireworks::fish_cake::fishing_pole_and_fish::flags::flashlight::flipper::floppy_disk::flower_playing_cards::football::footprints::fork_and_knife::fried_shrimp::fries::game_die::gem::ghost::gift::gift_heart::golf::grapes::green_apple::green_book::guitar::gun::hamburger::hammer::handbag::headphones::hearts::high_brightness::high_heel::hocho::honey_pot::horse_racing::hourglass::hourglass_flowing_sand::ice_cream::icecream::inbox_tray::incoming_envelope::iphone::jack_o_lantern::jeans::key::kimono::lantern::ledger::lemon::lipstick::lock::lock_with_ink_pen::lollipop::loop::loud_sound::loudspeaker::low_brightness::mag::mag_right::mahjong::mailbox::mailbox_closed::mailbox_with_mail::mailbox_with_no_mail::mans_shoe::meat_on_bone::mega::melon::memo::microphone::microscope::minidisc::money_with_wings::moneybag::mortar_board::mountain_bicyclist::movie_camera::musical_keyboard::musical_score::mute::name_badge::necktie::newspaper::no_bell::notebook::notebook_with_decorative_cover::nut_and_bolt::oden::open_book::open_file_folder::orange_book::outbox_tray::package::page_facing_up::page_with_curl::pager::paperclip::peach::pear::pencil::pencil2::phone::pill::pineapple::pizza::postal_horn::postbox::pouch::poultry_leg::pound::purse::pushpin::radio::ramen::ribbon::rice::rice_ball::rice_cracker::rice_scene::ring::rugby_football::running_shirt_with_sash::sake::sandal::santa::satellite::saxophone::school_satchel::scissors::scroll::seat::shaved_ice::shirt::shoe::shower::ski::smoking::snowboarder::soccer::sound::space_invader::spades::spaghetti::sparkle::sparkler::speaker::stew::straight_ruler::strawberry::surfer::sushi::sweet_potato::swimmer::syringe::tada::tanabata_tree::tangerine::tea::telephone::telephone_receiver::telescope::tennis::toilet::tomato::tophat::triangular_ruler::trophy::tropical_drink::trumpet::tshirt::tv::unlock::vhs::video_camera::video_game::violin::watch::watermelon::wind_chime::wine_glass::womans_clothes::womans_hat::wrench::yen:
+
+### Places
+
+:aerial_tramway::airplane::ambulance::anchor::articulated_lorry::atm::bank::barber::beginner::bike::blue_car::boat::bridge_at_night::bullettrain_front::bullettrain_side::bus::busstop::car::carousel_horse::checkered_flag::church::circus_tent::city_sunrise::city_sunset::cn::construction::convenience_store::crossed_flags::de::department_store::es::european_castle::european_post_office::factory::ferris_wheel::fire_engine::fountain::fr::fuelpump::gb::helicopter::hospital::hotel::hotsprings::house::house_with_garden::it::izakaya_lantern::japan::japanese_castle::jp::kr::light_rail::love_hotel::minibus::monorail::mount_fuji::mountain_cableway::mountain_railway::moyai::office::oncoming_automobile::oncoming_bus::oncoming_police_car::oncoming_taxi::performing_arts::police_car::post_office::railway_car::rainbow::red_car::rocket::roller_coaster::rotating_light::round_pushpin::rowboat::ru::sailboat::school::ship::slot_machine::speedboat::stars::station::statue_of_liberty::steam_locomotive::sunrise::sunrise_over_mountains::suspension_railway::taxi::tent::ticket::tokyo_tower::tractor::traffic_light::train::train2::tram::triangular_flag_on_post::trolleybus::truck::uk::us::vertical_traffic_light::warning::wedding:
+
+### Symbols
+
+:100::1234::a::ab::abc::abcd::accept::aquarius::aries::arrow_backward::arrow_double_down::arrow_double_up::arrow_down::arrow_down_small::arrow_forward::arrow_heading_down::arrow_heading_up::arrow_left::arrow_lower_left::arrow_lower_right::arrow_right::arrow_right_hook::arrow_up::arrow_up_down::arrow_up_small::arrow_upper_left::arrow_upper_right::arrows_clockwise::arrows_counterclockwise::b::baby_symbol::back::baggage_claim::ballot_box_with_check::bangbang::black_circle::black_large_square::black_medium_small_square::black_medium_square::black_small_square::black_square_button::cancer::capital_abcd::capricorn::chart::children_crossing::cinema::cl::clock1::clock10::clock1030::clock11::clock1130::clock12::clock1230::clock130::clock2::clock230::clock3::clock330::clock4::clock430::clock5::clock530::clock6::clock630::clock7::clock730::clock8::clock830::clock9::clock930::congratulations::cool::copyright::curly_loop::currency_exchange::customs::diamond_shape_with_a_dot_inside::do_not_litter::eight::eight_pointed_black_star::eight_spoked_asterisk::end::fast_forward::five::four::free::gemini::hash::heart_decoration::heavy_check_mark::heavy_division_sign::heavy_dollar_sign::heavy_exclamation_mark::heavy_minus_sign::heavy_multiplication_x::heavy_plus_sign::id::ideograph_advantage::information_source::interrobang::keycap_ten::koko::large_blue_circle::large_blue_diamond::large_orange_diamond::left_luggage::left_right_arrow::leftwards_arrow_with_hook::leo::libra::link::m::mens::metro::mobile_phone_off::negative_squared_cross_mark::new::ng::nine::no_bicycles::no_entry::no_entry_sign::no_mobile_phones::no_pedestrians::no_smoking::non-potable_water::o::o2::ok::on::one::ophiuchus::parking::part_alternation_mark::passport_control::pisces::potable_water::put_litter_in_its_place::radio_button::recycle::red_circle::registered::repeat::repeat_one::restroom::rewind::sa::sagittarius::scorpius::secret::seven::shipit::signal_strength::six::six_pointed_star::small_blue_diamond::small_orange_diamond::small_red_triangle::small_red_triangle_down::soon::sos::symbols::taurus::three::tm::top::trident::twisted_rightwards_arrows::two::u5272::u5408::u55b6::u6307::u6708::u6709::u6e80::u7121::u7533::u7981::u7a7a::underage::up::vibration_mode::virgo::vs::wavy_dash::wc::wheelchair::white_check_mark::white_circle::white_flower::white_large_square::white_medium_small_square::white_medium_square::white_small_square::white_square_button::womens::x::zero:
+
+## Insert
+
+```
+^^insert^^
+
+^^*insert italic*^^  *^^insert italic 2^^*
+
+^^_insert italic_^^  _^^insert italic 2^^_
+
+^^**insert bold**^^  **^^insert bold 2^^**
+
+^^__insert bold__^^  __^^insert bold 2^^__
+
+^^***insert italic bold***^^  ***^^insert italic bold 2^^***
+
+^^___insert italic bold___^^  ___^^insert italic bold 2^^___
+
+**^^*insert italic bold*^^**  *^^**insert italic bold 2**^^*
+
+__^^_insert italic bold_^^__  _^^__insert italic bold 2__^^_
+
+**^^_insert italic bold_^^**  _^^**insert italic bold 2**^^_
+
+__^^*insert italic bold*^^__  *^^__insert italic bold 2__^^*
+```
+
+^^insert^^
+
+^^*insert italic*^^  *^^insert italic 2^^*
+
+^^_insert italic_^^  _^^insert italic 2^^_
+
+^^**insert bold**^^  **^^insert bold 2^^**
+
+^^__insert bold__^^  __^^insert bold 2^^__
+
+^^***insert italic bold***^^  ***^^insert italic bold 2^^***
+
+^^___insert italic bold___^^  ___^^insert italic bold 2^^___
+
+**^^*insert italic bold*^^**  *^^**insert italic bold 2**^^*
+
+__^^_insert italic bold_^^__  _^^__insert italic bold 2__^^_
+
+**^^_insert italic bold_^^**  _^^**insert italic bold 2**^^_
+
+__^^*insert italic bold*^^__  *^^__insert italic bold 2__^^*
+
+## Math
+
+```
+$$ evidence\_{i}=\sum\_{j}W\_{ij}x\_{j}+b\_{i} $$
+
+$p(x|y) = \frac{p(y|x)p(x)}{p(y)}$, \(p(x|y) = \frac{p(y|x)p(x)}{p(y)}\).
+
+$$
+E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i - \sum_j c_j h_j
+$$
+
+\\[3 < 4\\]
+
+\begin{align}
+    p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
+    p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right)
+\end{align}
+```
+
+$$ evidence\_{i}=\sum\_{j}W\_{ij}x\_{j}+b\_{i} $$
+
+$p(x|y) = \frac{p(y|x)p(x)}{p(y)}$, \(p(x|y) = \frac{p(y|x)p(x)}{p(y)}\).
+
+$$ E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i - \sum_j c_j h_j $$
+
+\\[3 < 4\\]
+
+\begin{align}
+    p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
+    p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right)
+\end{align}
+
+## 网易云音乐
+
+```
+{{%/* music "28196554" */%}}
+```
+
+{{% music "28196554" %}}
+
+## YouTube
+
+```
+{{%/* youtube "wC5pJm8RAu4" */%}}
+```
+
+{{% youtube "wC5pJm8RAu4" %}}
--- a/exampleSite/content/post/hidden-post.md
+++ b/exampleSite/content/post/hidden-post.md
@ -0,0 +1,15 @@
+---
+title: "This is a hidden post."
+date: 2018-03-08T17:40:19+08:00
+lastmod: 2018-03-08T22:01:19+08:00
+draft: false
+author: '<a href="https://halu.lu" target="_blank">Halulu</a>'
+
+hiddenFromHomePage: true
+---
+
+This post is hidden from the home page.
+
+<!--more-->
+
+But you can see it in archives, rss or other pages.
--- a/exampleSite/content/post/japanese-preview.md
+++ b/exampleSite/content/post/japanese-preview.md
@ -0,0 +1,38 @@
+---
+title: "[日本語] 敬語体系"
+date: 2017-08-30T01:53:34+08:00
+lastmod: 2017-08-30T01:53:34+08:00
+draft: false
+keywords: []
+description: ""
+tags: ["preview", "日本語", "tag-4"]
+categories: ["日本語"]
+author: "Wikipedia"
+
+contentCopyright: '<a rel="license noopener" href="https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License" target="_blank">Creative Commons Attribution-ShareAlike License</a>'
+
+---
+
+> 日本語の敬語体系は、一般に、大きく尊敬語・謙譲語・丁寧語に分類される。文化審議会国語分科会は、2007年2月に「敬語の指針」を答申し、これに丁重語および美化語を含めた5分類を示している。
+
+# 尊敬語
+
+尊敬語は、動作の主体を高めることで、主体への敬意を表す言い方である。動詞に「お（ご）～になる」を付けた形、また、助動詞「（ら）れる」を付けた形などが用いられる。たとえば、動詞「取る」の尊敬形として、「（先生が）お取りになる」「（先生が）取られる」などが用いられる。
+
+語によっては、特定の尊敬語が対応するものもある。たとえば、「言う」の尊敬語は「おっしゃる」、「食べる」の尊敬語は「召し上がる」、「行く・来る・いる」の尊敬語は「いらっしゃる」である。
+
+# 謙譲語
+
+謙譲語は、古代から基本的に動作の客体への敬意を表す言い方であり、現代では「動作の主体を低める」と解釈するほうがよい場合がある。動詞に「お～する」「お～いたします」（謙譲語＋丁寧語）をつけた形などが用いられる。たとえば、「取る」の謙譲形として、「お取りする」などが用いられる。
+
+語によっては、特定の謙譲語が対応するものもある。たとえば、「言う」の謙譲語は「申し上げる」、「食べる」の謙譲語は「いただく」、「（相手の所に）行く」の謙譲語は「伺う」「参上する」「まいる」である。
+
+なお、「夜も更けてまいりました」の「まいり」など、謙譲表現のようでありながら、誰かを低めているわけではない表現がある。これは、「夜も更けてきた」という話題を丁重に表現することによって、聞き手への敬意を表すものである。宮地裕は、この表現に使われる語を、特に「丁重語」と称している[104][105]。丁重語にはほかに「いたし（マス）」「申し（マス）」「存じ（マス）」「小生」「小社」「弊社」などがある。文化審議会の「敬語の指針」でも、「明日から海外へまいります」の「まいり」のように、相手とは関りのない自分側の動作を表現する言い方を丁重語としている。
+
+# 丁寧語
+
+丁寧語は、文末を丁寧にすることで、聞き手への敬意を表すものである。動詞・形容詞の終止形で終わる常体に対して、名詞・形容動詞語幹などに「です」を付けた形（「学生です」「きれいです」）や、動詞に「ます」をつけた形（「行きます」「分かりました」）等の丁寧語を用いた文体を敬体という。
+
+一般に、目上の人には丁寧語を用い、同等・目下の人には丁寧語を用いないといわれる。しかし、実際の言語生活に照らして考えれば、これは事実ではない。母が子を叱るとき、「お母さんはもう知りませんよ」と丁寧語を用いる場合ももある。丁寧語が用いられる多くの場合は、敬意や謝意の表現とされるが、、稀に一歩引いた心理的な距離をとろうとする場合もある。
+
+「お弁当」「ご飯」などの「お」「ご」も、広い意味では丁寧語に含まれるが、宮地裕は特に「美化語」と称して区別する[104][105]。相手への丁寧の意を示すというよりは、話し手が自分の言葉遣いに配慮した表現である。したがって、「お弁当食べようよ。」のように、丁寧体でない文でも美化語を用いることがある。文化審議会の「敬語の指針」でも「美化語」を設けている。
--- a/exampleSite/content/post/js-flowchart-diagrams.md
+++ b/exampleSite/content/post/js-flowchart-diagrams.md
@ -0,0 +1,171 @@
+---
+title: "JS Flowchart Diagrams"
+date: 2015-03-04T21:57:50+08:00
+draft: false
+
+flowchartDiagrams:
+  enable: true
+  options: "{
+              'x': 0,
+              'y': 0,
+              'line-width': 3,
+              'line-length': 50,
+              'text-margin': 10,
+              'font-size': 14,
+              'font-color': 'black',
+              'line-color': 'black',
+              'element-color': 'black',
+              'fill': 'white',
+              'yes-text': 'yes',
+              'no-text': 'no',
+              'arrow-end': 'block',
+              'scale': 1,
+              'i-am-a-comment-1': 'Do not use //!',
+              'i-am-a-comment-2': 'style symbol types',
+              'symbols': {
+                  'start': {
+                    'font-color': 'red',
+                    'element-color': 'green',
+                    'fill': 'yellow'
+                  },
+                  'end': {
+                      'class': 'end-element'
+                  }
+              },
+              'i-am-a-comment-3': 'even flowstate support ;-)',
+              'flowstate': {
+                'request': {'fill': 'blue'}
+              }
+            }"
+---
+
+## Usage
+
+```flow
+st=>start: Start|past:>http://www.google.com[blank]
+e=>end: End:>http://www.google.com
+op1=>operation: My Operation|past
+op2=>operation: Stuff|current
+sub1=>subroutine: My Subroutine|invalid
+cond=>condition: Yes
+or No?|approved:>http://www.google.com
+c2=>condition: Good idea|rejected
+io=>inputoutput: catch something...|request
+
+st->op1(right)->cond
+cond(yes, right)->c2
+cond(no)->sub1(left)->op1
+c2(yes)->io->e
+c2(no)->op2->e
+```
+
+<!--more-->
+
+{{< highlight "linenos=table" >}}
+```flow
+st=>start: Start|past:>http://www.google.com[blank]
+e=>end: End:>http://www.google.com
+op1=>operation: My Operation|past
+op2=>operation: Stuff|current
+sub1=>subroutine: My Subroutine|invalid
+cond=>condition: Yes
+or No?|approved:>http://www.google.com
+c2=>condition: Good idea|rejected
+io=>inputoutput: catch something...|request
+
+st->op1(right)->cond
+cond(yes, right)->c2
+cond(no)->sub1(left)->op1
+c2(yes)->io->e
+c2(no)->op2->e
+```
+{{< / highlight >}}
+
+## Legacy Usage
+
+```flowchart
+st=>start: Start|past:>http://www.google.com[blank]
+e=>end: End:>http://www.google.com
+op1=>operation: My Operation|past
+op2=>operation: Stuff|current
+sub1=>subroutine: My Subroutine|invalid
+cond=>condition: Yes
+or No?|approved:>http://www.google.com
+c2=>condition: Good idea|rejected
+io=>inputoutput: catch something...|request
+
+st->op1(right)->cond
+cond(yes, right)->c2
+cond(no)->sub1(left)->op1
+c2(yes)->io->e
+c2(no)->op2->e
+```
+
+    ```flowchart
+    st=>start: Start|past:>http://www.google.com[blank]
+    e=>end: End:>http://www.google.com
+    op1=>operation: My Operation|past
+    op2=>operation: Stuff|current
+    sub1=>subroutine: My Subroutine|invalid
+    cond=>condition: Yes
+    or No?|approved:>http://www.google.com
+    c2=>condition: Good idea|rejected
+    io=>inputoutput: catch something...|request
+    
+    st->op1(right)->cond
+    cond(yes, right)->c2
+    cond(no)->sub1(left)->op1
+    c2(yes)->io->e
+    c2(no)->op2->e
+    ```
+
+## Configuration
+
+Configure for all home and regular pages:
+
+```toml
+[params.flowchartDiagrams]
+  enable = true
+  options = ""
+```
+
+Configure for a single post in the front matter (**Params in front matter have higher precedence**):
+
+```yaml
+flowchartDiagrams:
+  enable: true
+  options: "{
+              'x': 0,
+              'y': 0,
+              'line-width': 3,
+              'line-length': 50,
+              'text-margin': 10,
+              'font-size': 14,
+              'font-color': 'black',
+              'line-color': 'black',
+              'element-color': 'black',
+              'fill': 'white',
+              'yes-text': 'yes',
+              'no-text': 'no',
+              'arrow-end': 'block',
+              'scale': 1,
+              'i-am-a-comment-1': 'Do not use //!',
+              'i-am-a-comment-2': 'style symbol types',
+              'symbols': {
+                  'start': {
+                    'font-color': 'red',
+                    'element-color': 'green',
+                    'fill': 'yellow'
+                  },
+                  'end': {
+                      'class': 'end-element'
+                  }
+              },
+              'i-am-a-comment-3': 'even flowstate support ;-)',
+              'flowstate': {
+                'request': {'fill': 'blue'}
+              }
+            }"
+```
+
+See more information from https://github.com/adrai/flowchart.js.
--- a/exampleSite/content/post/js-sequence-diagrams.md
+++ b/exampleSite/content/post/js-sequence-diagrams.md
@ -0,0 +1,95 @@
+---
+title: "JS Sequence Diagrams"
+date: 2015-03-04T21:57:45+08:00
+draft: false
+
+sequenceDiagrams: 
+  enable: true
+  options: "{theme: 'hand'}"
+---
+
+## Usage
+
+```sequence
+Andrew->China: Says Hello
+Note right of China: China thinks\nabout it
+China-->Andrew: How are you?
+Andrew->>China: I am good thanks!
+```
+
+<!--more-->
+
+    ```sequence
+    Andrew->China: Says Hello
+    Note right of China: China thinks\nabout it
+    China-->Andrew: How are you?
+    Andrew->>China: I am good thanks!
+    ```
+
+## Configuration
+
+Configure for all home and regular pages:
+
+```toml
+[params.sequenceDiagrams]
+  enable = true
+  options = "{theme: 'hand'}"
+```
+
+Configure for a single post in the front matter (**Params in front matter have higher precedence**):
+
+```yaml
+sequenceDiagrams: 
+  enable: true
+  options: "{theme: 'hand'}"
+```
+
+### Options
+
+```js
+options = {
+  // Change the styling of the diagram, typically one of 'simple', 'hand'. New themes can be registered with registerTheme(...).
+  theme: string,
+
+  // CSS style to apply to the diagram's svg tag. (Only supported if using snap.svg)
+  css_class: string,
+}
+```
+
+See more information from https://github.com/bramp/js-sequence-diagrams.
+
+## Examples
+
+```sequence
+Title: Here is a title
+A->B: Normal line
+B-->C: Dashed line
+C->>D: Open arrow
+D-->>A: Dashed open arrow
+```
+
+    ```sequence
+    Title: Here is a title
+    A->B: Normal line
+    B-->C: Dashed line
+    C->>D: Open arrow
+    D-->>A: Dashed open arrow
+    ```
+
+---
+
+```sequence
+# Example of a comment.
+Note left of A: Note to the\n left of A
+Note right of A: Note to the\n right of A
+Note over A: Note over A
+Note over A,B: Note over both A and B
+```
+
+    ```sequence
+    # Example of a comment.
+    Note left of A: Note to the\n left of A
+    Note right of A: Note to the\n right of A
+    Note over A: Note over A
+    Note over A,B: Note over both A and B
+    ```
--- a/exampleSite/content/post/shortcodes.md
+++ b/exampleSite/content/post/shortcodes.md
@ -0,0 +1,217 @@
+---
+title: "Shortcodes"
+date: 2016-08-30T16:01:23+08:00
+lastmod: 2018-02-01T18:01:23+08:00
+draft: false
+tags: ["shortcodes"]
+categories: ["shortcodes"]
+
+---
+
+# Admonition
+
+{{% admonition note "I'm title!" false %}}
+biu biu biu.
+
+{{% admonition type="note" title="note" details="true" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition example %}}
+Without title.
+{{% /admonition %}}
+
+{{% /admonition %}}
+
+```markdown
+{{%/* admonition note "I'm title!" false */%}}
+biu biu biu.
+
+{{%/* admonition type="note" title="note" details="true" */%}}
+biu biu biu.
+{{%/* /admonition */%}}
+
+{{%/* admonition example */%}}
+Without title.
+{{%/* /admonition */%}}
+
+{{%/* /admonition */%}}
+```
+
+<!--more-->
+
+{{% admonition abstract abstract %}}
+biu biu biu.
+{{% /admonition %}}
+
+```markdown
+{{%/* admonition abstract abstract */%}}
+biu biu biu.
+{{%/* /admonition */%}}
+```
+
+{{% admonition info "info" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition tip "tip" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition success "success" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition question "question" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition warning "warning" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition failure "failure" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition danger "danger" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition bug "bug" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition example "example" %}}
+biu biu biu.
+{{% /admonition %}}
+
+{{% admonition quote "quote" %}}
+biu biu biu.
+{{% /admonition %}}
+
+# center, right, left
+
+```markdown
+## default
+![img](/path/to/img.gif "img")
+
+{{%/* center */%}}
+## center
+![img](/path/to/img.gif "img")
+{{%/* /center */%}}
+
+{{%/* right */%}}
+## right
+![img](/path/to/img.gif "img")
+{{%/* /right */%}}
+
+{{%/* left */%}}
+## left
+![img](/path/to/img.gif "img")
+{{%/* /left */%}}
+```
+
+## default
+![img](https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg "img")
+
+{{% center %}}
+## center
+![img](https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg "img")
+{{% /center %}}
+
+{{% right %}}
+## right
+![img](https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg "img")
+{{% /right %}}
+
+{{% left %}}
+## left
+![img](https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg "img")
+{{% /left %}}
+
+---
+
+## figure with class 
+
+```
+{{%/* figure src="/path/to/img.gif" title="default" alt="img" */%}}
+{{%/* figure class="center" src="/path/to/img.gif" title="center" alt="img" */%}}
+{{%/* figure class="right" src="/path/to/img.gif" title="right" alt="img" */%}}
+{{%/* figure class="left" src="/path/to/img.gif" title="left" alt="img" */%}}
+```
+
+{{% figure src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="default" alt="img" %}}
+{{% figure class="center" src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="center" alt="img" %}}
+{{% figure class="right" src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="right" alt="img" %}}
+{{% figure class="left" src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="left" alt="img" %}}
+
+---
+
+```
+{{%/* center */%}}
+
+## hybrid in center
+{{%/* figure src="/path/to/img.gif" title="default" alt="img" */%}}
+{{%/* figure class="right" src="/path/to/img.gif" title="right" alt="img" */%}}
+
+{{%/* left */%}}
+{{%/* figure src="/path/to/img.gif" title="default in left" alt="img" */%}}
+{{%/* /left */%}}
+
+{{%/* /center */%}}
+```
+
+{{% center %}}
+## hybrid in center
+{{% figure src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="default" alt="img" %}}
+{{% figure class="right" src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="right" alt="img" %}}
+{{% left %}}
+{{% figure src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="default in left" alt="img" %}}
+{{% /left %}}
+{{% /center %}}
+
+---
+
+# Music 163
+
+## Params
+- `id`
+  - required param
+  - you can extract from music url
+  - url format http://music.163.com/#/song?id=28196554
+
+- Fiddle `auto`
+  - optional param
+  - default value 0
+  - you can overwrite it with 1
+
+## Examples
+
+- Simple
+
+```
+{{%/* music "28196554" */%}}
+{{%/* music "28196554" "1" */%}}
+```
+
+- Named Params
+
+```
+{{%/* music id="28196554" */%}}
+{{%/* music id="28196554" auto="1" */%}}
+```
+
+- Example
+
+```
+{{%/* music "28196554" */%}}
+```
+
+{{%/* music "28196554" */%}}
+
+<style>
+.post-content img {
+  height: 64px;
+}
+</style>
--- a/exampleSite/content/post/syntax-highlighting.md
+++ b/exampleSite/content/post/syntax-highlighting.md
@ -0,0 +1,173 @@
+---
+title: "Syntax Highlighting"
+date: 2011-08-30T16:01:23+08:00
+lastmod: 2018-11-05T16:01:23+08:00
+draft: false
+tags: ["preview", "Syntax Highlighting", "tag-5"]
+categories: ["Syntax Highlighting"]
+
+toc: false
+
+---
+
+
+```js
+function helloWorld () {
+  alert("Hello, World!")
+}
+```
+
+<!--more-->
+
+```java
+public class HelloWorld {
+  public static void main(String[] args) {
+    System.out.println("Hello, World!");
+  }
+}
+```
+
+```kotlin
+package hello
+
+fun main(args: Array<String>) {
+  println("Hello World!")
+}
+```
+
+```c
+#include <stdio.h>
+
+/* Hello */
+int main(void){
+  printf("Hello, World!");
+  return 0;
+}
+```
+
+```cpp
+// 'Hello World!' program 
+ 
+#include <iostream>
+ 
+int main(){
+  std::cout << "Hello World!" << std::endl;
+  return 0;
+}
+```
+
+```cs
+using System;
+class HelloWorld{
+  public static void Main(){ 
+    System.Console.WriteLine("Hello, World!");
+  }
+}
+```
+
+```html
+<html>
+<body>
+  Hello, World!
+</body>
+</html>
+```
+
+```go
+package main
+import fmt "fmt"
+
+func main() 
+{
+   fmt.Printf("Hello, World!\n");
+}
+```
+
+```scala
+object HelloWorld with Application {
+  Console.println("Hello, World!");
+}
+```
+
+```php
+<?php
+  echo 'Hello, World!';
+?>
+```
+
+```python
+print("Hello, World!") 
+```
+
+```clojure
+(defn hello-world
+  "A function print 'Hello world'."
+  []
+  (prn "Hello world"))
+```
+
+```go-html-template
+<!DOCTYPE html>
+<html>
+<head>
+  <title>{{ .Title }}</title>
+</head>
+<body>
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+</body>
+</html>
+```
+
+```go-html-template
+{{ partial "header.html" . }}
+
+  <h1>posts</h1>
+  {{ range first 10 .Data.Pages }}
+    {{ if eq .Type "post"}}
+      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    {{ end }}
+  {{ end }}
+
+  <h1>pages</h1>
+  {{ range .Data.Pages }}
+    {{ if or (eq .Type "page") (eq .Type "about") }}
+      <h2><a href="{{ .Permalink }}">{{ .Type }} - {{ .Title }} - {{ .RelPermalink }}</a></h2>
+    {{ end }}
+  {{ end }}
+
+{{ partial "footer.html" . }}
+```
+
+---
+
+Detect the language
+
+```
+package hello
+
+fun main(args: Array<String>) {
+  println("Hello World!")
+}
+```
+
+```
+<?php
+  echo 'Hello, World!';
+?>
+```
+
+---
+
+By `{{</* highlight go-html-template "linenos=table,hl_lines=1 3-7,linenostart=199" */>}}..{{</* / highlight */>}}`
+
+{{< highlight go-html-template "linenos=table,hl_lines=1 3-7,linenostart=199" >}}
+<section id="main">
+  <div>
+   <h1 id="title">{{ .Title }}</h1>
+    {{ range .Data.Pages }}
+        {{ .Render "summary"}}
+    {{ end }}
+  </div>
+</section>
+{{< / highlight >}}
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@ -0,0 +1,102 @@
+# ===== title =====
+archive:
+  other: "Archiv"
+
+tags:
+  other: "Tags"
+
+categories:
+  other: "Kategorien"
+
+# ===== footer =====
+powered:
+  other: "Powered by %s"
+
+theme:
+  other: "Theme"
+
+siteUV:
+  other: "site uv: %s"
+
+sitePV:
+  other: "site pv: %s"
+
+pagePV:
+  other: "%s mal gelesen"
+
+# ===== post =====
+prevPage:
+  other: "vorher"
+
+nextPage:
+  other: "nächstes"
+
+prevPost:
+  other: "vorher"
+
+nextPost:
+  other: "nächstes"
+
+toc:
+  other: "Inhalt"
+
+readMore:
+  other: "Weiterlesen..."
+
+reward:
+  other: "Belohnung"
+
+rewardAlipay:
+  other: "alipay"
+
+rewardWechat:
+  other: "wechat"
+
+wordCount:
+  one: "{{ .Count }} Wort"
+  other: "{{ .Count }} Wörter"
+
+readingTime:
+  one: "{{ .Count }} Min Lesezeit"
+  other: "{{ .Count }} Min Lesezeit"
+
+outdatedInfoWarningBefore:
+  other: "[HINWEIS] aktualisiert "
+
+outdatedInfoWarningAfter:
+  other: ". Der Inhalt dieses Artikels kann veraltet sein."
+
+# ===== content license =====
+author:
+  other: "Autor"
+
+lastMod:
+  other: "letzte Änderung"
+
+markdown:
+  other: "Markdown"
+
+seeMarkDown:
+  other: "Die Markdown Version »"
+
+license:
+  other: "Lizenz"
+
+# ===== counter =====
+archiveCounter:
+  one: "{{ .Count }} Aritkel in Summe"
+  other: "{{ .Count }} Artikel in Summe"
+
+tagCounter:
+  one: "{{ .Count }} Tag in Summe"
+  other: "{{ .Count }} Tags in Summe"
+
+zeroTagCounter:
+  other: "Keine Tags"
+
+categoryCounter:
+  one: "{{ .Count }} Kategorie in Summe"
+  other: "{{ .Count }} Kategorien in Summe"
+
+zeroCategoryCounter:
+  other: "Keine Kategorien"
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -0,0 +1,102 @@
+# ===== title =====
+archive:
+  other: "Archive"
+
+tags:
+  other: "Tags"
+
+categories:
+  other: "Categories"
+
+# ===== footer =====
+powered:
+  other: "Powered by %s"
+
+theme:
+  other: "Theme"
+
+siteUV:
+  other: "site uv: %s"
+
+sitePV:
+  other: "site pv: %s"
+
+pagePV:
+  other: "%s times read"
+
+# ===== post =====
+prevPage:
+  other: "Prev"
+
+nextPage:
+  other: "Next"
+
+prevPost:
+  other: "Prev"
+
+nextPost:
+  other: "Next"
+
+toc:
+  other: "Contents"
+
+readMore:
+  other: "Read more..."
+
+reward:
+  other: "Reward"
+
+rewardAlipay:
+  other: "alipay"
+
+rewardWechat:
+  other: "wechat"
+
+wordCount:
+  one: "{{ .Count }} word"
+  other: "{{ .Count }} words"
+
+readingTime:
+  one: "{{ .Count }} min read"
+  other: "{{ .Count }} mins read"
+
+outdatedInfoWarningBefore:
+  other: "[NOTE] Updated "
+
+outdatedInfoWarningAfter:
+  other: ". This article may have outdated content or subject matter."
+
+# ===== content license =====
+author:
+  other: "Author"
+
+lastMod:
+  other: "LastMod"
+
+markdown:
+  other: "Markdown"
+
+seeMarkDown:
+  other: "The Markdown version »"
+
+license:
+  other: "License"
+
+# ===== counter =====
+archiveCounter:
+  one: "{{ .Count }} Post In Total"
+  other: "{{ .Count }} Posts In Total"
+
+tagCounter:
+  one: "{{ .Count }} Tag In Total"
+  other: "{{ .Count }} Tags In Total"
+
+zeroTagCounter:
+  other: "No tags"
+
+categoryCounter:
+  one: "{{ .Count }} Category In Total"
+  other: "{{ .Count }} Categories In Total"
+
+zeroCategoryCounter:
+  other: "No categories"
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@ -0,0 +1,102 @@
+# ===== title =====
+archive:
+  other: "Archivo"
+
+tags:
+  other: "Etiquetas"
+
+categories:
+  other: "Categorías"
+
+# ===== footer =====
+powered:
+  other: "Creado con %s"
+
+theme:
+  other: "Tema"
+
+siteUV:
+  other: "sitio uv: %s"
+
+sitePV:
+  other: "sitio pv: %s"
+
+pagePV:
+  other: "%s leido"
+
+# ===== post =====
+prevPage:
+  other: "Previo"
+
+nextPage:
+  other: "Siguiente"
+
+prevPost:
+  other: "Previo"
+
+nextPost:
+  other: "Siguiente"
+
+toc:
+  other: "Contenidos"
+
+readMore:
+  other: "Leer mas..."
+
+reward:
+  other: "Reward"
+
+rewardAlipay:
+  other: "alipay"
+
+rewardWechat:
+  other: "wechat"
+
+wordCount:
+  one: "{{ .Count }} palabra"
+  other: "{{ .Count }} palabras"
+
+readingTime:
+  one: "{{ .Count }} min lectura"
+  other: "{{ .Count }} mins lectura"
+
+outdatedInfoWarningBefore:
+  other: "[NOTE] Updated "
+
+outdatedInfoWarningAfter:
+  other: ". This article may have outdated content or subject matter."
+
+# ===== content license =====
+author:
+  other: "Autor"
+
+lastMod:
+  other: "Ultima modificación"
+
+markdown:
+  other: "Markdown"
+
+seeMarkDown:
+  other: "Versión Markdown »"
+
+license:
+  other: "Licencia"
+
+# ===== counter =====
+archiveCounter:
+  one: "{{ .Count }} Post en Total"
+  other: "{{ .Count }} Posts en Total"
+
+tagCounter:
+  one: "{{ .Count }} Tag en Total"
+  other: "{{ .Count }} Tags en Total"
+
+zeroTagCounter:
+  other: "No tags"
+
+categoryCounter:
+  one: "{{ .Count }} Categoria en Total"
+  other: "{{ .Count }} Categorias en Total"
+
+zeroCategoryCounter:
+  other: "No categorias"
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@ -0,0 +1,102 @@
+# ===== title =====
+archive:
+  other: "Archive"
+
+tags:
+  other: "Tags"
+
+categories:
+  other: "Catégories"
+
+# ===== footer =====
+powered:
+  other: "Propulsé par %s"
+
+theme:
+  other: "Thème"
+
+siteUV:
+  other: "site uv: %s"
+
+sitePV:
+  other: "site pv: %s"
+
+pagePV:
+  other: "%s temps de lecture"
+
+# ===== post =====
+prevPage:
+  other: "Plus récents"
+
+nextPage:
+  other: "Plus vieux"
+
+prevPost:
+  other: "Précédent"
+
+nextPost:
+  other: "Suivant"
+
+toc:
+  other: "Contenu"
+
+readMore:
+  other: "Lire la suite..."
+
+reward:
+  other: "Reward"
+
+rewardAlipay:
+  other: "alipay"
+
+rewardWechat:
+  other: "wechat"
+
+wordCount:
+  one: "{{ .Count }} mots"
+  other: "{{ .Count }} mots"
+
+readingTime:
+  one: "{{ .Count }} min de lecture"
+  other: "{{ .Count }} mins de lecture"
+
+outdatedInfoWarningBefore:
+  other: "[NOTE] Updated "
+
+outdatedInfoWarningAfter:
+  other: ". This article may have outdated content or subject matter."
+
+# ===== content license =====
+author:
+  other: "Auteur"
+
+lastMod:
+  other: "Modifié"
+
+markdown:
+  other: "Markdown"
+
+seeMarkDown:
+  other: "Version de Markdown »"
+
+license:
+  other: "Licence"
+
+# ===== counter =====
+archiveCounter:
+  one: "{{ .Count }} Articles au total"
+  other: "{{ .Count }} Articles au total"
+
+tagCounter:
+  one: "{{ .Count }} Tag au total"
+  other: "{{ .Count }} Tags au total"
+
+zeroTagCounter:
+  other: "Aucun tag"
+
+categoryCounter:
+  one: "{{ .Count }} Catégorie au total"
+  other: "{{ .Count }} Catégories au total"
+
+zeroCategoryCounter:
+  other: "Aucune catégorie"
--- a/i18n/ja.yaml
+++ b/i18n/ja.yaml
@ -0,0 +1,102 @@
+# ===== title =====
+archive:
+  other: "アーカイブ"
+
+tags:
+  other: "タグ"
+
+categories:
+  other: "カテゴリ"
+
+# ===== footer =====
+powered:
+  other: "Powered by %s"
+
+theme:
+  other: "Theme"
+
+siteUV:
+  other: "総訪問者数: %s"
+
+sitePV:
+  other: "総ページビュー: %s"
+
+pagePV:
+  other: "ページビュー: %s"
+
+# ===== post =====
+prevPage:
+  other: "前へ"
+
+nextPage:
+  other: "次へ"
+
+prevPost:
+  other: "前の記事へ"
+
+nextPost:
+  other: "次の記事へ"
+
+toc:
+  other: "コンテンツ"
+
+readMore:
+  other: "続きを読む..."
+
+reward:
+  other: "Reword"
+
+rewardAlipay:
+  other: "alipay"
+
+rewardWechat:
+  other: "wechat"
+
+wordCount:
+  one: "{{ .Count }} 文字"
+  other: "{{ .Count }} 文字"
+
+readingTime:
+  one: "読了時間: {{ .Count }} 分"
+  other: "読了時間: {{ .Count }} 分"
+
+outdatedInfoWarningBefore:
+  other: "【注意】最後更新日は "
+
+outdatedInfoWarningAfter:
+  other: "のため、記事の内容が古い可能性があります。"
+
+# ===== content license =====
+author:
+  other: "作成者"
+
+lastMod:
+  other: "最終更新時刻"
+
+markdown:
+  other: "Markdown"
+
+seeMarkDown:
+  other: "Markdownで本文を見る »"
+
+license:
+  other: "ライセンス"
+
+# ===== counter =====
+archiveCounter:
+  one: "投稿数: {{ .Count }} 記事"
+  other: "投稿数: {{ .Count }} 記事"
+
+tagCounter:
+  one: "タグ: {{ .Count }}"
+  other: "タグ: {{ .Count }}"
+
+zeroTagCounter:
+  other: "タグなし"
+
+categoryCounter:
+  one: "カテゴリ: {{ .Count }}"
+  other: "カテゴリ: {{ .Count }}"
+
+zeroCategoryCounter:
+  other: "カテゴリなし"
--- a/i18n/ru.yaml
+++ b/i18n/ru.yaml
@ -0,0 +1,105 @@
+# ===== title =====
+archive:
+  other: "Архив"
+
+tags:
+  other: "Теги"
+
+categories:
+  other: "Категории"
+
+# ===== footer =====
+powered:
+  other: "Создано с помощью %s"
+
+theme:
+  other: "Тема"
+
+siteUV:
+  other: "Просмотров страниц: %s"
+
+sitePV:
+  other: "Уникальных посетителей: %s"
+
+pagePV:
+  other: "Прочитано раз: %s"
+
+# ===== post =====
+prevPage:
+  other: "Назад"
+
+nextPage:
+  other: "Вперёд"
+
+prevPost:
+  other: "Предыдущий"
+
+nextPost:
+  other: "Следующий"
+
+toc:
+  other: "Содержание"
+
+readMore:
+  other: "Читать дальше..."
+
+reward:
+  other: "Наградить"
+
+rewardAlipay:
+  other: "alipay"
+
+rewardWechat:
+  other: "wechat"
+
+wordCount:
+  one: "{{ .Count }} слово"
+  few: "{{ .Count }} слова"
+  many: "{{ .Count }} слов"
+
+readingTime:
+  other: "{{ .Count }} мин. на прочтение"
+
+outdatedInfoWarningBefore:
+  other: "[ВНИМАНИЕ] Обновлено "
+
+outdatedInfoWarningAfter:
+  other: ". Содержание этой статьи может быть устаревшим."
+
+# ===== content license =====
+author:
+  other: "Автор"
+
+lastMod:
+  other: "Последнее изменение"
+
+markdown:
+  other: "Markdown"
+
+seeMarkDown:
+  other: "Версия Markdown »"
+
+license:
+  other: "Лицензия"
+
+# ===== counter =====
+archiveCounter:
+  one: "{{ .Count }} публикация"
+  few: "{{ .Count }} публикации"
+  many: "{{ .Count }} пибликаций"
+
+tagCounter:
+  one: "{{ .Count }} тег"
+  few: "{{ .Count }} тега"
+  many: "{{ .Count }} тегов"
+
+zeroTagCounter:
+  other: "Нет тегов"
+
+categoryCounter:
+  one: "{{ .Count }} категория"
+  few: "{{ .Count }} категории"
+  many: "{{ .Count }} категорий"
+
+zeroCategoryCounter:
+  other: "Нет категорий"
--- a/i18n/tr.yaml
+++ b/i18n/tr.yaml
@ -0,0 +1,102 @@
+# ===== title =====
+archive:
+  other: "Arşiv"
+
+tags:
+  other: "Etiketler"
+
+categories:
+  other: "Kategoriler"
+
+# ===== footer =====
+powered:
+  other: "%s tarafından desteklenmektedir"
+
+theme:
+  other: "Tema"
+
+siteUV:
+  other: "site uv: %s"
+
+sitePV:
+  other: "site pv: %s"
+
+pagePV:
+  other: "okuma süresi: %s"
+
+# ===== post =====
+prevPage:
+  other: "Önceki"
+
+nextPage:
+  other: "Sonraki"
+
+prevPost:
+  other: "Önceki"
+
+nextPost:
+  other: "Sonraki"
+
+toc:
+  other: "İçerikler"
+
+readMore:
+  other: "Daha fazla..."
+
+reward:
+  other: "Ödül"
+
+rewardAlipay:
+  other: "alipay"
+
+rewardWechat:
+  other: "wechat"
+
+wordCount:
+  one: "{{ .Count }} kelime"
+  other: "{{ .Count }} kelime"
+
+readingTime:
+  one: "{{ .Count }} dakikalık okuma süresi"
+  other: "{{ .Count }} dakikalık okuma süresi"
+
+outdatedInfoWarningBefore:
+  other: "[NOT] Güncellendi "
+
+outdatedInfoWarningAfter:
+  other: ". Bu makale güncel olmayan içeriğe veya konuya sahip olabilir."
+
+# ===== content license =====
+author:
+  other: "Yazar"
+
+lastMod:
+  other: "LastMod"
+
+markdown:
+  other: "Markdown"
+
+seeMarkDown:
+  other: "Markdown sürümü »"
+
+license:
+  other: "Lisans"
+
+# ===== counter =====
+archiveCounter:
+  one: "Toplam {{ .Count }} gönderi"
+  other: "Toplam {{ .Count }} gönderi"
+
+tagCounter:
+  one: "Toplam {{ .Count }} etiket"
+  other: "Toplam {{ .Count }} etiket"
+
+zeroTagCounter:
+  other: "Etiket yok"
+
+categoryCounter:
+  one: "Toplam {{ .Count }} kategori"
+  other: "Toplam {{ .Count }} kategori"
+
+zeroCategoryCounter:
+  other: "Kategori yok"
--- a/i18n/zh-CN.yaml
+++ b/i18n/zh-CN.yaml
@ -0,0 +1,102 @@
+# ===== title =====
+archive:
+  other: "归档"
+
+tags:
+  other: "标签"
+
+categories:
+  other: "分类"
+
+# ===== footer =====
+powered:
+  other: "由 %s 强力驱动"
+
+theme:
+  other: "主题"
+
+siteUV:
+  other: "本站总访客数 %s 人"
+
+sitePV:
+  other: "本站总访问量 %s 次"
+
+pagePV:
+  other: "%s 次阅读"
+
+# ===== post =====
+prevPage:
+  other: "上一页"
+
+nextPage:
+  other: "下一页"
+
+prevPost:
+  other: "上一篇"
+
+nextPost:
+  other: "下一篇"
+
+toc:
+  other: "文章目录"
+
+readMore:
+  other: "阅读更多"
+
+reward:
+  other: "赞赏支持"
+
+rewardAlipay:
+  other: "支付宝打赏"
+
+rewardWechat:
+  other: "微信打赏"
+
+wordCount:
+  one: "约 {{ .Count }} 字"
+  other: "约 {{ .Count }} 字"
+
+readingTime:
+  one: "预计阅读 {{ .Count }} 分钟"
+  other: "预计阅读 {{ .Count }} 分钟"
+
+outdatedInfoWarningBefore:
+  other: "【注意】最后更新于 "
+
+outdatedInfoWarningAfter:
+  other: "，文中内容可能已过时，请谨慎使用。"
+
+# ===== content license =====
+author:
+  other: "文章作者"
+
+lastMod:
+  other: "上次更新"
+
+markdown:
+  other: "原始文档"
+
+seeMarkDown:
+  other: "查看本文 Markdown 版本 »"
+
+license:
+  other: "许可协议"
+
+# ===== counter =====
+archiveCounter:
+  one: "共计 {{ .Count }} 篇文章"
+  other: "共计 {{ .Count }} 篇文章"
+
+tagCounter:
+  one: "共计 {{ .Count }} 个标签"
+  other: "共计 {{ .Count }} 个标签"
+
+zeroTagCounter:
+  other: "暂无标签"
+
+categoryCounter:
+  one: "共计 {{ .Count }} 个分类"
+  other: "共计 {{ .Count }} 个分类"
+
+zeroCategoryCounter:
+  other: "暂无分类"
--- a/i18n/zh-TW.yaml
+++ b/i18n/zh-TW.yaml
@ -0,0 +1,102 @@
+# ===== title =====
+archive:
+  other: "歸檔"
+
+tags:
+  other: "標簽"
+
+categories:
+  other: "分類"
+
+# ===== footer =====
+powered:
+  other: "由 %s 強力驅動"
+
+theme:
+  other: "主題"
+
+siteUV:
+  other: "本站總訪客數 %s 人"
+
+sitePV:
+  other: "本站總訪問量 %s 次"
+
+pagePV:
+  other: "%s 次閱讀"
+
+# ===== post =====
+prevPage:
+  other: "上一頁"
+
+nextPage:
+  other: "下一頁"
+
+prevPost:
+  other: "上一篇"
+
+nextPost:
+  other: "下一篇"
+
+toc:
+  other: "文章目錄"
+
+readMore:
+  other: "閱讀更多"
+
+reward:
+  other: "讚賞支持"
+
+rewardAlipay:
+  other: "支付寶贊助"
+
+rewardWechat:
+  other: "微信贊助"
+
+wordCount:
+  one: "約 {{ .Count }} 字"
+  other: "約 {{ .Count }} 字"
+
+readingTime:
+  one: "預計閱讀 {{ .Count }} 分鐘"
+  other: "預計閱讀 {{ .Count }} 分鐘"
+
+outdatedInfoWarningBefore:
+  other: "注意：最後更新於 "
+
+outdatedInfoWarningAfter:
+  other: "，文中內容可能已過時，請謹慎參考。"
+
+# ===== content license =====
+author:
+  other: "文章作者"
+
+lastMod:
+  other: "上次更新"
+
+markdown:
+  other: "原始文檔"
+
+seeMarkDown:
+  other: "查看本文 Markdown 版本 »"
+
+license:
+  other: "許可證"
+
+# ===== counter =====
+archiveCounter:
+  one: "共計 {{ .Count }} 篇文章"
+  other: "共計 {{ .Count }} 篇文章"
+
+tagCounter:
+  one: "共計 {{ .Count }} 個標籤"
+  other: "共計 {{ .Count }} 個標籤"
+
+zeroTagCounter:
+  other: "暫無標籤"
+
+categoryCounter:
+  one: "共計 {{ .Count }} 個分類"
+  other: "共計 {{ .Count }} 個分類"
+
+zeroCategoryCounter:
+  other: "暫無分類"
--- a/icons/gitea.svg
+++ b/icons/gitea.svg
@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Gitea icon</title><path d="M4.186 5.421C2.341 5.417-.13 6.59.006 9.531c.213 4.594 4.92 5.02 6.801 5.057.206.862 2.42 3.834 4.059 3.99h7.18c4.306-.286 7.53-13.022 5.14-13.07-3.953.186-6.296.28-8.305.296v3.975l-.626-.277-.004-3.696c-2.306-.001-4.336-.108-8.189-.298-.482-.003-1.154-.085-1.876-.087zm.261 1.625h.22c.262 2.355.688 3.732 1.55 5.836-2.2-.26-4.072-.899-4.416-3.285-.178-1.235.422-2.524 2.646-2.552zm8.557 2.315c.15.002.303.03.447.096l.749.323-.537.979a.672.597 0 0 0-.241.038.672.597 0 0 0-.405.764.672.597 0 0 0 .112.174l-.926 1.686a.672.597 0 0 0-.222.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.765.672.597 0 0 0-.158-.22l.902-1.642a.672.597 0 0 0 .293-.03.672.597 0 0 0 .213-.112c.348.146.633.265.838.366.308.152.417.253.45.365.033.11-.003.322-.177.694-.13.277-.345.67-.599 1.133a.672.597 0 0 0-.251.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.764.672.597 0 0 0-.137-.202c.251-.458.467-.852.606-1.148.188-.402.286-.701.2-.99-.086-.289-.35-.477-.7-.65-.23-.113-.517-.233-.86-.377a.672.597 0 0 0-.038-.239.672.597 0 0 0-.145-.209l.528-.963 2.924 1.263c.528.229.746.79.49 1.26l-2.01 3.68c-.257.469-.888.663-1.416.435l-4.137-1.788c-.528-.228-.747-.79-.49-1.26l2.01-3.679c.176-.323.53-.515.905-.53h.064z"/></svg>
--- a/icons/pleroma.svg
+++ b/icons/pleroma.svg
@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Pleroma icon</title><path d="M6.36 0A1.868 1.868 0 004.49 1.868V24h5.964V0zm7.113 0v12h4.168a1.868 1.868 0 001.868-1.868V0zm0 18.036V24h4.168a1.868 1.868 0 001.868-1.868v-4.096Z"/></svg>
--- a/icons/xmpp.svg
+++ b/icons/xmpp.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg width="1034px" height="1034px" viewBox="-10 -5 1034 1034" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+   <path fill="currentColor"
+d="M0 291q3 116 64 237q57 115 157 218q98 100 218 170q-86 67 -181 91l-1 14q42 -5 83 -16l5 -1q77 -18 155 -55q27 14 51 24q99 45 204 54v-15q-101 -25 -190 -97q119 -69 216 -169q99 -102 156 -217q60 -121 63 -238l-130 50l-45 15l-130 39q1 12 1 22q0 109 -51 228
+q-53 121 -142 213q-86 -92 -137 -211q-50 -117 -50 -224q0 -13 1 -23l-130 -38l-42 -15z" />
+</svg>
--- a/images/screenshot.png
+++ b/images/screenshot.png
--- a/images/showcase.png
+++ b/images/showcase.png
--- a/images/tn.png
+++ b/images/tn.png
--- a/layouts/404.html
+++ b/layouts/404.html
@ -0,0 +1,18 @@
+{{- define "title" }}404 page not found - {{ .Site.Title }}{{ end -}}
+
+{{- define "content" -}}
+<div class="not-found">
+  <h1 class="error-emoji"></h1>
+  <p class="error-text">/* 404 page not found. */</p>
+  <p class="error-link"><a href="{{ "/" | relLangURL }}">↑ Back Home ↑</a></p>
+</div>
+<script>
+  var errorEmojiContainer = document.getElementsByClassName('error-emoji')[0];
+  var emojiArray = [
+    '\\(o_o)/', '(o^^)o', '(˚Δ˚)b', '(^-^*)', '(≥o≤)', '(^_^)b', '(·_·)',
+    '(=\'X\'=)', '(>_<)', '(;-;)', '\\(^Д^)/',
+  ];
+  var errorEmoji = emojiArray[Math.floor(Math.random() * emojiArray.length)];
+  errorEmojiContainer.appendChild(document.createTextNode(errorEmoji));
+</script>
+{{- end -}}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -0,0 +1,46 @@
+{{ if ne .Site.Params.version "4.x" -}}
+  {{ errorf "\n\nThere are two possible situations that led to this error:\n  1. You haven't copied the config.toml yet. See https://github.com/olOwOlo/hugo-theme-even#installation \n  2. You have an incompatible update. See https://github.com/olOwOlo/hugo-theme-even/blob/master/CHANGELOG.md#400-2018-11-06 \n\n有两种可能的情况会导致这个错误发生:\n  1. 你还没有复制 config.toml 参考 https://github.com/olOwOlo/hugo-theme-even/blob/master/README-zh.md#installation \n  2. 你进行了一次不兼容的更新 参考 https://github.com/olOwOlo/hugo-theme-even/blob/master/CHANGELOG.md#400-2018-11-06 \n" -}}
+{{ end -}}
+<!DOCTYPE html>
+<html lang="{{ .Site.Language }}">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>
+    {{- block "title" . -}}
+      {{ if .IsPage }}{{ .Title }} - {{ .Site.Title }}{{ else }}{{ .Site.Title }}{{ end }}
+    {{- end -}}
+  </title>
+  {{ partial "head.html" . }}
+</head>
+<body>
+  {{ partial "slideout.html" . }}
+  <div class="container" id="mobile-panel">
+    {{ if not .Params.hideHeaderAndFooter -}}
+    <header id="header" class="header">
+        {{ partial "header.html" . }}
+    </header>
+    {{- end }}
+
+    <main id="main" class="main">
+      <div class="content-wrapper">
+        <div id="content" class="content">
+          {{ block "content" . }}{{ end }}
+        </div>
+        {{ partial "comments.html" . }}
+      </div>
+    </main>
+
+    {{ if not .Params.hideHeaderAndFooter -}}
+    <footer id="footer" class="footer">
+      {{ partial "footer.html" . }}
+    </footer>
+    {{- end }}
+
+    <div class="back-to-top" id="back-to-top">
+      <i class="iconfont icon-up"></i>
+    </div>
+  </div>
+  {{ partial "scripts.html" . }}
+</body>
+</html>
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@ -0,0 +1,50 @@
+{{- define "title" }}{{ T "archive" }} - {{ .Site.Title }}{{ end -}}
+
+{{- define "content" }}
+{{- $paginator := .Paginate .Data.Pages.ByDate.Reverse .Site.Params.archivePaginate }}
+<section id="archive" class="archive">
+  {{- if and (not $paginator.HasPrev) .Site.Params.showArchiveCount }}
+    <div class="archive-title">
+      <span class="archive-post-counter">
+        {{ T "archiveCounter" (len .Data.Pages) }}
+      </span>
+    </div>
+  {{- end -}}
+
+  {{- range $index, $element := $paginator.Pages -}}
+    {{- $thisYear := $element.Date.Format "2006" }}
+    {{- $lastElement := $index | add -1 | index $paginator.Pages }}
+    {{- if or (eq $index 0) ( ne ($lastElement.Date.Format "2006") $thisYear ) }}
+      <div class="collection-title">
+        <h2 class="archive-year">{{ $thisYear }}</h2>
+      </div>
+    {{- end }}
+
+    <div class="archive-post">
+      <span class="archive-post-time">
+        {{ $element.Date.Format "01-02" }}
+      </span>
+      <span class="archive-post-title">
+        <a href="{{ $element.RelPermalink }}" class="archive-post-link">
+          {{ .Title }}
+        </a>
+      </span>
+    </div>
+  {{- end -}}
+</section>
+<!-- pagination -->
+<nav class="pagination">
+  {{ with $paginator.Prev -}}
+    <a class="prev" href="{{ .URL }}">
+      <i class="iconfont icon-left"></i>
+      <span class="prev-text">{{ T "prevPage" }}</span>
+    </a>
+  {{- end }}
+  {{ with $paginator.Next -}}
+    <a class="next" href="{{ .URL }}">
+      <span class="next-text">{{ T "nextPage" }}</span>
+      <i class="iconfont icon-right"></i>
+    </a>
+  {{- end }}
+</nav>
+{{- end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -0,0 +1,7 @@
+{{ define "content" -}}
+<article class="post">
+  <div class="post-content">
+    {{ .Content }}
+  </div>
+</article>
+{{- end }}
--- a/layouts/_default/single.md
+++ b/layouts/_default/single.md
@ -0,0 +1 @@
+{{ .RawContent }}
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@ -0,0 +1,46 @@
+{{- define "title" }}{{ .Title }} · {{ .Site.Title }}{{ end -}}
+
+{{- define "content" }}
+{{- $paginator := .Paginate .Data.Pages .Site.Params.archivePaginate -}}
+<section id="archive" class="archive">
+  {{ if not $paginator.HasPrev -}}
+    {{ if eq .Data.Plural "tags" -}}
+      <div class="archive-title tag">
+        <h2 class="archive-name">{{ .Title }}</h2>
+      </div>
+    {{- else if eq .Data.Plural "categories" -}}
+      <div class="archive-title category">
+        <h2 class="archive-name">{{ .Title }}</h2>
+      </div>
+    {{- end }}
+  {{- end }}
+
+  {{ range $paginator.Pages -}}
+    <div class="archive-post">
+      <span class="archive-post-time">
+        {{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
+      </span>
+      <span class="archive-post-title">
+        <a href="{{ .RelPermalink }}" class="archive-post-link">
+          {{ .Title }}
+        </a>
+      </span>
+    </div>
+  {{- end }}
+</section>
+<!-- pagination -->
+<nav class="pagination">
+  {{ with $paginator.Prev -}}
+    <a class="prev" href="{{ .URL }}">
+      <i class="iconfont icon-left"></i>
+      <span class="prev-text">{{ T "prevPage" }}</span>
+    </a>
+  {{- end }}
+  {{ with $paginator.Next -}}
+    <a class="next" href="{{ .URL }}">
+      <span class="next-text">{{ T "nextPage" }}</span>
+      <i class="iconfont icon-right"></i>
+    </a>
+  {{- end }}
+</nav>
+{{- end }}
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@ -0,0 +1,44 @@
+{{- define "title" }}{{ T .Data.Plural }} - {{ .Site.Title }}{{ end -}}
+
+{{- define "content" -}}
+  {{ $name := .Data.Plural -}}
+  {{ $terms := .Data.Terms.ByCount -}}
+  {{ $length := len $terms -}}
+  {{ if eq $name "categories" -}}
+    <div class="terms">
+      <div class="terms-title">
+        {{ if eq $length 0 -}}
+          {{ T "zeroCategoryCounter" }}
+        {{- else -}}
+          {{ T "categoryCounter" $length }}
+        {{- end }}
+      </div>
+      <div class="terms-tags">
+        {{ range $key, $value := $terms -}}
+          <a class="terms-link" href="{{ $name | relLangURL }}/{{ $value.Term | urlize }}{{ if $.Site.Params.uglyURLs }}.html{{else}}/{{ end }}">
+            {{ $value.Term }}
+            <span class="terms-count">{{ len $value.Pages }}</span>
+          </a>
+        {{ end -}}
+      </div>
+    </div>
+  {{- else if eq $name "tags" -}}
+    <div class="terms">
+      <div class="terms-title">
+        {{ if eq $length 0 -}}
+          {{ T "zeroTagCounter" }}
+        {{- else -}}
+          {{ T "tagCounter" $length }}
+        {{- end }}
+      </div>
+      <div class="terms-tags">
+        {{- range $key, $value := $terms }}
+          <a class="terms-link" href="{{ $name | relLangURL }}/{{ $value.Term | urlize }}{{ if $.Site.Params.uglyURLs }}.html{{else}}/{{ end }}">
+            {{ $value.Term }}
+            <span class="terms-count">{{ len $value.Pages }}</span>
+          </a>
+        {{ end -}}
+      </div>
+    </div>
+  {{- end }}
+{{- end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -0,0 +1,24 @@
+{{- define "content" -}}
+  <section id="posts" class="posts">
+    {{/* (index .Site.Paginate) */}}
+    {{- $paginator := .Paginate (where (where .Site.RegularPages "Type" "post") ".Params.hiddenfromhomepage" "!=" true) }}
+    {{- range $paginator.Pages -}}
+      {{ .Render "summary" }}
+    {{ end -}}
+  </section>
+  <!-- pagination -->
+  <nav class="pagination">
+    {{ with $paginator.Prev -}}
+      <a class="prev" href="{{ .URL }}">
+        <i class="iconfont icon-left"></i>
+        <span class="prev-text">{{ T "prevPage" }}</span>
+      </a>
+    {{- end }}
+    {{ with $paginator.Next -}}
+      <a class="next" href="{{ .URL }}">
+        <span class="next-text">{{ T "nextPage" }}</span>
+        <i class="iconfont icon-right"></i>
+      </a>
+    {{- end }}
+  </nav>
+{{- end -}}
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
@ -0,0 +1,138 @@
+{{ if and .IsPage (ne .Params.comment false) -}}
+  <!-- Disqus -->
+  {{- if .Site.DisqusShortname -}}
+    <div id="disqus_thread"></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;
+
+      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+      var disqus_shortname = '{{ .Site.DisqusShortname }}';
+      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="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+  {{- end -}}
+
+  <!-- changyan -->
+  {{- if and .Site.Params.changyanAppid .Site.Params.changyanAppkey -}}
+    <div id="SOHUCS" sid="{{ .RelPermalink }}"></div>
+    <script type="text/javascript">
+    (function(){
+      if (window.location.hostname === 'localhost') return;
+
+      var appid = '{{ .Site.Params.changyanAppid }}';
+      var conf = '{{ .Site.Params.changyanAppkey }}';
+      var width = window.innerWidth || document.documentElement.clientWidth;
+      if (width < 960) {window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); }
+    })();
+    </script>
+  {{- end -}}
+
+  <!-- LiveRe -->
+  {{- if .Site.Params.livereUID -}}
+    <div id="lv-container" data-id="city" data-uid="{{ .Site.Params.livereUID }}">
+    <script type="text/javascript">
+      (function(d, s) {
+        var j, e = d.getElementsByTagName(s)[0];
+
+        if (typeof LivereTower === 'function') { return; }
+
+        j = d.createElement(s);
+        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+        j.async = true;
+
+        e.parentNode.insertBefore(j, e);
+      })(document, 'script');
+    </script>
+    <noscript>Please enable JavaScript to view the comments powered by <a href="https://livere.com/">LiveRe.</a></noscript>
+    </div>
+  {{- end -}}
+
+  <!-- gitment -->
+  {{- if .Site.Params.gitment.owner -}}
+    <div id="comments-gitment"></div>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/default.min.css" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/gitment.browser.min.js" crossorigin="anonymous"></script>
+    <script type="text/javascript">
+      var gitment = new Gitment({
+        id: '{{ .Date }}',
+        title: '{{ .Title }}',
+        link: decodeURI(location.href),
+        desc: '{{ .Summary }}',
+        owner: '{{ .Site.Params.gitment.owner }}',
+        repo: '{{ .Site.Params.gitment.repo }}',
+        oauth: {
+          client_id: '{{ .Site.Params.gitment.clientId }}',
+          client_secret: '{{ .Site.Params.gitment.clientSecret }}'
+        }
+      });
+      gitment.render('comments-gitment');
+    </script>
+    <noscript>Please enable JavaScript to view the <a href="https://github.com/imsun/gitment">comments powered by gitment.</a></noscript>
+  {{- end -}}
+
+  <!-- gitalk -->
+  {{- if .Site.Params.gitalk.owner -}}
+    <div id="gitalk-container"></div>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js" crossorigin="anonymous"></script>
+    <script type="text/javascript">
+      var gitalk = new Gitalk({
+        id: '{{ .Date }}',
+        title: '{{ .Title }}',
+        clientID: '{{ .Site.Params.gitalk.clientId }}',
+        clientSecret: '{{ .Site.Params.gitalk.clientSecret }}',
+        repo: '{{ .Site.Params.gitalk.repo }}',
+        owner: '{{ .Site.Params.gitalk.owner }}',
+        admin: ['{{ .Site.Params.gitalk.owner }}'],
+        body: decodeURI(location.href)
+      });
+      gitalk.render('gitalk-container');
+    </script>
+    <noscript>Please enable JavaScript to view the <a href="https://github.com/gitalk/gitalk">comments powered by gitalk.</a></noscript>
+  {{- end }}
+
+  <!-- valine -->
+  {{- if .Site.Params.valine.enable -}}
+  <!-- id 将作为查询条件 -->
+    {{- if .Site.Params.valine.visitor -}}
+	  <span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
+		<span class="post-meta-item-text">文章阅读量 </span>
+		<span class="leancloud-visitors-count">0</span>
+		<p></p>
+	  </span>
+    {{- end }}
+  <div id="vcomments"></div>
+  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
+  <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
+  <script type="text/javascript">
+    new Valine({
+        el: '#vcomments' ,
+        appId: '{{ .Site.Params.valine.appId }}',
+        appKey: '{{ .Site.Params.valine.appKey }}',
+        notify: {{ .Site.Params.valine.notify }},
+        verify: {{ .Site.Params.valine.verify }},
+        avatar:'{{ .Site.Params.valine.avatar }}',
+        placeholder: '{{ .Site.Params.valine.placeholder }}',
+        visitor: {{ .Site.Params.valine.visitor }}
+    });
+  </script>
+  {{- end }}
+
+  <!-- utterances -->
+  {{- if .Site.Params.utterances.owner}}
+    <script src="https://utteranc.es/client.js"
+            repo="{{ .Site.Params.utterances.owner }}/{{ .Site.Params.utterances.repo }}"
+            issue-term="pathname"
+            theme="github-light"
+            crossorigin="anonymous"
+            async>
+    </script>
+    <noscript>Please enable JavaScript to view the <a href="https://github.com/utterance">comments powered by utterances.</a></noscript>
+  {{- end }}
+
+{{- end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -0,0 +1,53 @@
+<div class="social-links">
+  {{- range $name, $path := .Site.Params.social }}
+    {{- if $path }}
+      {{- $realName := slicestr $name 2 }}
+      <a href="{{ $path | safeURL }}" class="iconfont icon-{{ $realName }}" title="{{ $realName }}"></a>
+    {{- end }}
+  {{- end }}
+  {{ if .Site.LanguagePrefix -}}
+    <a href="{{ .Site.LanguagePrefix | absURL }}/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
+  {{- else -}}
+    <a href="https://banyan.divineduty.xyz" class="icons pleroma" title="Pleroma"></a>
+    <a href="{{ .Site.RSSLink }}" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
+  {{- end }}
+</div>
+
+<div class="copyright">
+  <span class="power-by">
+    {{ (printf (T "powered") `<a class="hexo-link" href="https://gohugo.io">Hugo</a>`) | safeHTML }}
+  </span>
+  <span class="division">|</span>
+  <span class="theme-info">
+    {{ T "theme" }} - 
+    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
+    <br>
+    <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>
+  </span>
+
+  {{ if .Site.Params.busuanzi.enable -}}
+  <div class="busuanzi-footer">
+    {{ $spinner := "img/spinner.svg" | relURL -}}
+    {{ if and .Site.Params.busuanzi.enable .Site.Params.busuanzi.sitePV -}}
+      {{ $valueSpan := printf `<span id="busuanzi_value_site_pv"><img src="%s" alt="spinner.svg"/></span>` $spinner -}}
+      <span id="busuanzi_container_site_pv"> {{ printf (T "sitePV") $valueSpan | safeHTML }} </span>
+      {{ if .Site.Params.busuanzi.siteUV }}<span class="division">|</span>{{ end }}
+    {{- end }}
+    {{ if and .Site.Params.busuanzi.enable .Site.Params.busuanzi.siteUV -}}
+      {{ $valueSpan := printf `<span id="busuanzi_value_site_uv"><img src="%s" alt="spinner.svg"/></span>` $spinner -}}
+      <span id="busuanzi_container_site_uv"> {{ printf (T "siteUV") $valueSpan | safeHTML }} </span>
+    {{- end }}
+  </div>
+  {{- end }}
+
+  <span class="copyright-year">
+    {{- $current := now.Format "2006" }}
+    &copy; 
+    {{ if ne .Site.Params.since $current -}}
+      {{ .Site.Params.since }} - 
+    {{ end }}
+    {{- $current -}}
+    <span class="heart"><i class="iconfont icon-heart"></i></span><!--
+    --><span>{{if .Site.Copyright }}{{ .Site.Copyright | safeHTML }}{{ else }}{{ .Site.Author.name | safeHTML }}{{ end }}</span>
+  </span>
+</div>
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -0,0 +1,91 @@
+<meta name="renderer" content="webkit" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
+
+<meta http-equiv="Cache-Control" content="no-transform" />
+<meta http-equiv="Cache-Control" content="no-siteapp" />
+
+<meta name="theme-color" content="#f8f5ec" />
+<meta name="msapplication-navbutton-color" content="#f8f5ec">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">
+
+<!-- author & description & keywords  -->
+<meta name="author" content="{{ if .Params.author }}{{ .Params.author | safeHTML }}{{ else }}{{ .Site.Author.name | safeHTML }}{{ end }}" />
+
+{{- if .Description -}}
+  <meta name="description" content="{{ .Description | safeHTML }}" />
+{{- else if .IsPage -}}
+  <meta name="description" content="{{ .Summary | plainify }}" />
+{{- else if .Site.Params.description -}}
+  <meta name="description" content="{{ .Site.Params.description | safeHTML }}" />
+{{- end -}}
+
+{{- if .Keywords -}}
+  {{ $length := len .Keywords | add -1 -}}
+  <meta name="keywords" content="{{ range $index, $element := .Keywords }}{{ $element | safeHTML }}{{if ne $index $length }}, {{ end }}{{ end }}" />
+{{- else if .Site.Params.keywords -}}
+  {{ $length := len .Site.Params.keywords | add -1 -}}
+  <meta name="keywords" content="{{ range $index, $element := .Site.Params.keywords }}{{ $element | safeHTML }}{{if ne $index $length }}, {{ end }}{{ end }}" />
+{{- end }}
+
+<!-- baidu & google verification  -->
+{{ with .Site.Params.baiduVerification }}<meta name="baidu-site-verification" content="{{.}}" />{{ end }}
+{{ with .Site.Params.googleVerification }}<meta name="google-site-verification" content="{{.}}" />{{ end }}
+
+<!-- Site Generator -->
+<meta name="generator" content="Hugo {{ .Site.Hugo.Version }} with theme even" />
+
+<!-- Permalink & RSSlink -->
+<link rel="canonical" href="{{ .Permalink }}" />
+{{- with .OutputFormats.Get "RSS" }}
+  <link href="{{ .Permalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
+  <link href="{{ .Permalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />
+{{- end -}}
+
+<!-- Favicon and Touch icons -->
+<link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}">
+<link rel="manifest" href="{{ "manifest.json" | relURL }}">
+<link rel="mask-icon" href="{{ "safari-pinned-tab.svg" | relURL }}" color="#5bbad5">
+
+<!-- debug -->
+{{- if .Site.Params.debug -}}
+<script src="https://cdn.jsdelivr.net/npm/eruda@1.2.6/eruda.min.js" integrity="sha256-Jmz4bc3kp+rRrXX2tGadNBKFLwtzMapr8kHABxSAAP8=" crossorigin="anonymous"></script>
+<script>eruda.init();</script>
+{{- end -}}
+
+<!-- busuanzi -->
+{{- if .Site.Params.busuanzi.enable -}}
+  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
+{{- end -}}
+
+<!-- Styles -->
+{{ $style := resources.Get "sass/main.scss" | toCSS | minify | fingerprint }}
+<link href="{{ $style.RelPermalink }}" rel="stylesheet">
+{{ if .Site.Params.publicCDN.enable -}}
+  {{ if .Site.Params.fancybox }}{{ .Site.Params.publicCDN.fancyboxCSS | safeHTML }}{{ end }}
+{{- else -}}
+  {{ if .Site.Params.fancybox }}<link href="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.css" | relURL }}" rel="stylesheet">{{ end }}
+{{- end -}}
+
+<!-- custom css -->
+{{ range .Site.Params.customCSS -}}
+<link rel="stylesheet" href="{{ "/css/" | relURL }}{{ . }}">
+{{ end }}
+
+{{/* NOTE: These Hugo Internal Templates can be found starting at https://github.com/spf13/hugo/blob/master/tpl/tplimpl/template_embedded.go#L158 */}}
+{{- template "_internal/opengraph.html" . -}}
+{{- template "_internal/google_news.html" . -}}
+{{- template "_internal/schema.html" . -}}
+{{- template "_internal/twitter_cards.html" . -}}
+
+<!-- Polyfill for old browsers -->
+{{ `<!--[if lte IE 9]>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
+<![endif]-->` | safeHTML }}
+
+{{ `<!--[if lt IE 9]>
+  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
+<![endif]-->` | safeHTML }}
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -0,0 +1,21 @@
+<div class="logo-wrapper">
+  <a href="{{ "/" | relLangURL }}" class="logo">
+    {{- if .Site.Params.logoTitle -}}
+      {{ .Site.Params.logoTitle }}
+    {{- else -}}
+      {{ .Site.Title }}
+    {{- end -}}
+  </a>
+</div>
+
+{{ partial "header/language-selector.html" . }}
+
+<nav class="site-navbar">
+  <ul id="menu" class="menu">
+    {{ range .Site.Menus.main -}}
+      <li class="menu-item">
+        <a class="menu-item-link" href="{{ .URL | safeURL }}">{{ .Name }}</a>
+      </li>
+    {{- end }}
+  </ul>
+</nav>
--- a/layouts/partials/header/language-selector.html
+++ b/layouts/partials/header/language-selector.html
@ -0,0 +1,25 @@
+<!--
+  Language selector.
+
+  If current page has version in another language, language link will lead
+  to the translated page. If not, the link will be to the home page of the site
+  with specified language.
+-->
+{{ if (and (.Site.IsMultiLingual) ($.Site.Params.showLanguageSelector)) }}
+  <div class="language-selector">
+    <ul class="languages-list">
+      {{ range $homeTranslation := .Site.Home.AllTranslations }}
+        {{ $active := eq $homeTranslation.Language $.Site.Language }}
+        {{ $pageTranslation := (index (where $.Page.AllTranslations "Language.Lang"  "eq" $homeTranslation.Language.Lang) 0) }}
+
+        <li class="language-item {{if $active}}active{{end}}">
+          {{ with $pageTranslation }}
+            <a href="{{ .Permalink }}">{{ .Language.Lang }}</a>
+          {{ else }}
+            <a href="{{ $homeTranslation.Permalink }}">{{ .Language.Lang }}</a>
+          {{ end }}
+        </li>
+      {{ end }}
+    </ul>
+  </div>
+{{ end }}
--- a/layouts/partials/icons.html
+++ b/layouts/partials/icons.html
@ -0,0 +1,6 @@
+<span class="inline-svg" >
+    {{- $fname:=print "icons/" . ".svg" -}}
+    {{- $path:="<path" -}}
+    {{- $fill:="<path fill=\"currentColor\"" -}}
+    {{ replace (readFile $fname) $path $fill | safeHTML }}
+</span>    
--- a/layouts/partials/post/copyright.html
+++ b/layouts/partials/post/copyright.html
@ -0,0 +1,35 @@
+{{ if or .Params.postMetaInFooter (and .Site.Params.postMetaInFooter (ne .Params.postMetaInFooter false)) -}}
+<div class="post-copyright">
+  <p class="copyright-item">
+    <span class="item-title">{{ T "author" }}</span>
+    <span class="item-content">{{ if .Params.author }}{{ .Params.author | safeHTML }}{{ else }}{{ .Site.Author.name | safeHTML }}{{ end }}</span>
+  </p>
+  <p class="copyright-item">
+    <span class="item-title">{{ T "lastMod" }}</span>
+    <span class="item-content">
+        {{ .Lastmod.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
+        {{ with .GitInfo }}<a href="{{ $.Site.Params.gitRepo }}/commit/{{ .Hash }}" title="{{ .Subject }}">({{ .AbbreviatedHash }})</a>{{ end }}
+    </span>
+  </p>
+  {{ if $.Site.Params.linkToMarkDown -}}
+    {{ with $.OutputFormats.Get "markdown" -}}
+    <p class="copyright-item">
+      <span class="item-title">{{ T "markdown" }}</span>
+      <span class="item-content"><a class="link-to-markdown" href="{{ .Permalink }}" target="_blank">{{ T "seeMarkDown" }}</a></span>
+    </p>
+    {{- end }}
+  {{- end }}
+  {{ if or .Params.contentCopyright (and .Site.Params.contentCopyright (ne .Params.contentCopyright false)) -}}
+  <p class="copyright-item">
+    <span class="item-title">{{ T "license" }}</span>
+    <span class="item-content">
+    {{- if .Params.contentCopyright -}}
+      {{ .Params.contentCopyright | safeHTML }}
+    {{- else -}}
+      {{ .Site.Params.contentCopyright | safeHTML }}
+    {{- end -}}
+    </span>
+  </p>
+  {{- end }}
+</div>
+{{- end }}
--- a/layouts/partials/post/outdated-info-warning.html
+++ b/layouts/partials/post/outdated-info-warning.html
@ -0,0 +1,28 @@
+{{- if or .Params.enableOutdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.enableOutdatedInfoWarning false)) }}
+  {{- $daysAgo := div (sub now.Unix .Lastmod.Unix) 86400 }}
+  {{- $hintThreshold := .Site.Params.outdatedInfoWarning.hint | default 30 }}
+  {{- $warnThreshold := .Site.Params.outdatedInfoWarning.warn | default 180 }}
+
+  {{- $updateTime := .Lastmod }}
+  {{- if .GitInfo }}
+    {{- if lt .GitInfo.AuthorDate.Unix .Lastmod.Unix }}
+      {{- $updateTime := .GitInfo.AuthorDate }}
+    {{- end }}
+  {{- end -}}
+
+  {{- if gt $daysAgo $hintThreshold }}
+  <div class="post-outdated">
+    {{- if gt $daysAgo $warnThreshold }}
+    <div class="warn">
+    {{- else }}
+    <div class="hint">
+    {{- end }}
+      <p>{{ T "outdatedInfoWarningBefore" -}}
+        <span class="timeago" datetime="{{ dateFormat "2006-01-02T15:04:05" $updateTime }}" title="{{ dateFormat "January 2, 2006" $updateTime }}">
+        {{- dateFormat "January 2, 2006" $updateTime -}}
+        </span>{{ T "outdatedInfoWarningAfter" -}}
+      </p>
+    </div>
+  </div>
+  {{- end -}}
+{{- end -}}
--- a/layouts/partials/post/reward.html
+++ b/layouts/partials/post/reward.html
@ -0,0 +1,21 @@
+{{ if or .Params.reward (and .Site.Params.reward.enable (ne .Params.reward false)) -}}
+<div class="post-reward">
+  <input type="checkbox" name="reward" id="reward" hidden />
+  <label class="reward-button" for="reward">{{ T "reward" }}</label>
+  <div class="qr-code">
+    {{ $qrCode := .Site.Params.reward }}
+    {{ with $qrCode.wechat -}}
+      <label class="qr-code-image" for="reward">
+        <img class="image" src="{{ . }}">
+        <span>{{ T "rewardWechat" }}</span>
+      </label>
+    {{- end }}
+    {{ with $qrCode.alipay -}}
+      <label class="qr-code-image" for="reward">
+        <img class="image" src="{{ . }}">
+        <span>{{ T "rewardAlipay" }}</span>
+      </label>
+    {{- end }}
+  </div>
+</div>
+{{- end }}
--- a/layouts/partials/post/toc.html
+++ b/layouts/partials/post/toc.html
@ -0,0 +1,9 @@
+{{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}}
+<div class="post-toc" id="post-toc">
+  <h2 class="post-toc-title">{{ T "toc" }}</h2>
+  {{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default false }}
+  <div class="post-toc-content{{ if not (or .Params.autoCollapseToc (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false))) }} always-active{{ end }}">
+    {{.TableOfContents}}
+  </div>
+</div>
+{{- end }}
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@ -0,0 +1,135 @@
+<!-- highlight.js -->
+{{- if .Site.Params.highlightInClient -}}
+  <script src="{{ "lib/highlight/highlight.pack.js?v=20171001" | relURL }}"></script>
+{{- end -}}
+
+<!-- core -->
+{{- if .Site.Params.publicCDN.enable }}
+  {{ .Site.Params.publicCDN.jquery | safeHTML }}
+  {{ .Site.Params.publicCDN.slideout | safeHTML }}
+  {{ if .Site.Params.fancybox }}{{ .Site.Params.publicCDN.fancyboxJS | safeHTML }}{{ end }}
+{{- else -}}
+  <script type="text/javascript" src="{{ "lib/jquery/jquery-3.2.1.min.js" | relURL }}"></script>
+  <script type="text/javascript" src="{{ "lib/slideout/slideout-1.0.1.min.js" | relURL }}"></script>
+  {{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }}
+{{- end -}}
+
+<!-- timeago.JS -->
+{{- if and (or .Params.enableOutdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.enableOutdatedInfoWarning false))) (or .IsPage .IsHome) }}
+  {{- if .Site.Params.publicCDN.enable }}
+    {{ .Site.Params.publicCDN.timeagoJS | safeHTML }}
+    {{ .Site.Params.publicCDN.timeagoLocalesJS | safeHTML }}
+  {{- else }}
+    <script type="text/javascript" src="{{ "lib/timeago/timeago-3.0.2.min.js" | relURL }}"></script>
+    <script type="text/javascript" src="{{ "lib/timeago/timeago.locales-3.0.2.min.js" | relURL }}"></script>
+  {{- end }}
+  <script><!-- NOTE: timeago.js uses the language code format like "zh_CN" (underscore and case sensitive) -->
+    var languageCode = {{ .Site.LanguageCode }}.replace(/-/g, '_').replace(/_(.*)/, function ($0, $1) {return $0.replace($1, $1.toUpperCase());});
+    timeago().render(document.querySelectorAll('.timeago'), languageCode);
+    timeago.cancel();  // stop update
+  </script>
+{{- end -}}
+
+<!-- flowchart -->
+{{- if and (or .Params.flowchartDiagrams.enable (and .Site.Params.flowchartDiagrams.enable (ne .Params.flowchartDiagrams.enable false))) (or .IsPage .IsHome) -}}
+  <script>
+    {{- if .Params.flowchartDiagrams.options -}}
+      window.flowchartDiagramsOptions = {{ .Params.flowchartDiagrams.options | safeJS }};
+    {{- else if .Site.Params.flowchartDiagrams.options -}}
+      window.flowchartDiagramsOptions = {{ .Site.Params.flowchartDiagrams.options | safeJS }};
+    {{- end -}}
+  </script>
+  {{- if .Site.Params.publicCDN.enable -}}
+    {{ .Site.Params.publicCDN.flowchartDiagramsJS | safeHTML }}
+  {{- else -}}
+    <script src="{{ "lib/flowchartDiagrams/raphael-2.2.7.min.js" | relURL }}" integrity="sha256-67By+NpOtm9ka1R6xpUefeGOY8kWWHHRAKlvaTJ7ONI=" crossorigin="anonymous"></script>
+    <script src="{{ "lib/flowchartDiagrams/flowchart-1.8.0.min.js" | relURL }}" integrity="sha256-zNGWjubXoY6rb5MnmpBNefO0RgoVYfle9p0tvOQM+6k=" crossorigin="anonymous"></script>
+  {{- end -}}
+{{- end -}}
+
+<!-- js-sequence-diagrams -->
+{{- if and (or .Params.sequenceDiagrams.enable (and .Site.Params.sequenceDiagrams.enable (ne .Params.sequenceDiagrams.enable false))) (or .IsPage .IsHome) -}}
+  <script>
+    {{- if .Params.sequenceDiagrams.options -}}
+      window.sequenceDiagramsOptions = {{ .Params.sequenceDiagrams.options | safeJS }};
+    {{- else if .Site.Params.sequenceDiagrams.options -}}
+      window.sequenceDiagramsOptions = {{ .Site.Params.sequenceDiagrams.options | safeJS }};
+    {{- end -}}
+  </script>
+  {{- if .Site.Params.publicCDN.enable -}}
+    {{ .Site.Params.publicCDN.sequenceDiagramsJS | safeHTML }}
+    {{ .Site.Params.publicCDN.sequenceDiagramsCSS | safeHTML }}
+  {{- else -}}
+    <script src="{{ "lib/js-sequence-diagrams/webfontloader-1.6.28.js" | relURL }}" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script>
+    <script src="{{ "lib/js-sequence-diagrams/snap.svg-0.5.1.min.js" | relURL }}" integrity="sha256-oI+elz+sIm+jpn8F/qEspKoKveTc5uKeFHNNVexe6d8=" crossorigin="anonymous"></script>
+    <script src="{{ "lib/js-sequence-diagrams/underscore-1.8.3.min.js" | relURL }}" integrity="sha256-obZACiHd7gkOk9iIL/pimWMTJ4W/pBsKu+oZnSeBIek=" crossorigin="anonymous"></script>
+    <script src="{{ "lib/js-sequence-diagrams/sequence-diagram-2.0.1.min.js" | relURL }}" integrity="sha384-8748Vn52gHJYJI0XEuPB2QlPVNUkJlJn9tHqKec6J3q2r9l8fvRxrgn/E5ZHV0sP" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="{{ "lib/js-sequence-diagrams/sequence-diagram-2.0.1.min.css" | relURL }}" integrity="sha384-6QbLKJMz5dS3adWSeINZe74uSydBGFbnzaAYmp+tKyq60S7H2p6V7g1TysM5lAaF" crossorigin="anonymous">
+  {{- end -}}
+{{- end }}
+{{ $even := resources.Get "js/even.js" }}
+{{ $main := resources.Get "js/main.js" }}
+{{ $js := slice $even $main | resources.Concat "js/main.js" | minify | fingerprint }}
+<script type="text/javascript" src="{{ $js.RelPermalink }}"></script>
+
+{{- if and (or .Params.mathjax (and .Site.Params.mathjax (ne .Params.mathjax false))) (or .IsPage .IsHome) }}
+  <script type="text/javascript">
+    window.MathJax = {
+      tex: {
+        {{ if or .Params.mathjaxEnableSingleDollar (and .Site.Params.mathjaxEnableSingleDollar (ne .Params.mathjaxEnableSingleDollar false)) -}}
+          inlineMath: [['$','$'], ['\\(','\\)']],
+        {{ end -}}
+        {{ if or .Params.mathjaxEnableAutoNumber (and .Site.Params.mathjaxEnableAutoNumber (ne .Params.mathjaxEnableAutoNumber false)) -}}
+          tags: 'ams',
+        {{ end -}}
+      }
+    };
+  </script>
+  {{ if .Site.Params.mathjaxUseLocalFiles -}}
+    <script type="text/javascript" async src="{{ "lib/mathjax/es5/tex-mml-chtml.js" | relURL }}"></script>
+  {{- else -}}
+    <script async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js" integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin="anonymous"></script>
+  {{- end }}
+{{- end }}
+
+<!-- Analytics -->
+{{- if (in (slice (getenv "HUGO_ENV") hugo.Environment) "production") | and .Site.GoogleAnalytics -}}
+  {{ template "_internal/google_analytics_async.html" . }}
+{{- end -}}
+
+{{- with .Site.Params.baiduAnalytics -}}
+<script id="baidu_analytics">
+  var _hmt = _hmt || [];
+  (function() {
+    if (window.location.hostname === 'localhost') return;
+    var hm = document.createElement("script"); hm.async = true;
+    hm.src = "https://hm.baidu.com/hm.js?{{.}}";
+    var s = document.getElementsByTagName("script")[0];
+    s.parentNode.insertBefore(hm, s);
+  })();
+</script>
+{{- end }}
+
+<!-- baidu push -->
+{{- if .Site.Params.baiduPush -}}
+<script id="baidu_push">
+  (function(){
+    if (window.location.hostname === 'localhost') return;
+    var bp = document.createElement('script'); bp.async = true;
+    var curProtocol = window.location.protocol.split(':')[0];
+    if (curProtocol === 'https') {
+      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
+    }
+    else {
+      bp.src = 'http://push.zhanzhang.baidu.com/push.js';
+    }
+    var s = document.getElementsByTagName("script")[0];
+    s.parentNode.insertBefore(bp, s);
+  })();
+</script>
+{{- end }}
+
+<!-- custom js -->
+{{ range .Site.Params.customJS -}}
+  <script src="{{ "/js/" | relURL }}{{ . }}"></script>
+{{ end }}
--- a/layouts/partials/slideout.html
+++ b/layouts/partials/slideout.html
@ -0,0 +1,27 @@
+<div id="mobile-navbar" class="mobile-navbar">
+  <div class="mobile-header-logo">
+    <a href="{{ "/" | relLangURL }}" class="logo">
+      {{- if .Site.Params.logoTitle -}}
+        {{ .Site.Params.logoTitle }}
+      {{- else -}}
+        {{ .Site.Title }}
+      {{- end -}}
+    </a>
+  </div>
+  <div class="mobile-navbar-icon">
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
+</div>
+<nav id="mobile-menu" class="mobile-menu slideout-menu">
+  <ul class="mobile-menu-list">
+    {{ range .Site.Menus.main -}}
+      <a href="{{ .URL | safeURL }}">
+        <li class="mobile-menu-item">{{ .Name }}</li>
+      </a>
+    {{- end }}
+  </ul>
+
+  {{ partial "header/language-selector.html" . }}
+</nav>
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@ -0,0 +1,72 @@
+{{ define "content" -}}
+  <article class="post">
+    <!-- post-header -->
+    <header class="post-header">
+      <h1 class="post-title">{{ .Title }}</h1>
+
+      <div class="post-meta">
+        <span class="post-time"> {{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} </span>
+        {{ with .Params.categories -}}
+          <div class="post-category">
+            {{ range . -}}
+              <a href="{{ "categories" | relLangURL }}/{{ . | urlize }}/"> {{ . }} </a>
+            {{ end -}}
+          </div>
+        {{- end }}
+        {{- if .Site.Params.moreMeta }}
+          <span class="more-meta"> {{ T "wordCount" .WordCount }} </span>
+          <span class="more-meta"> {{ T "readingTime" .ReadingTime }} </span>
+        {{- end }}
+        {{ if and .Site.Params.busuanzi.enable .Site.Params.busuanzi.pagePV -}}
+          {{ $valueSpan := printf `<span id="busuanzi_value_page_pv"><img src="%s" alt="spinner.svg"/></span>` ("img/spinner.svg" | relURL) -}}
+          <span id="busuanzi_container_page_pv" class="more-meta"> {{ printf (T "pagePV") $valueSpan | safeHTML }} </span>
+        {{- end }}
+      </div>
+    </header>
+
+    <!-- TOC -->
+    {{- partial "post/toc.html" . -}}
+
+    <!-- Outdated Info Warning -->
+    {{- partial "post/outdated-info-warning.html" . -}}
+
+    <!-- Content -->
+    <div class="post-content">
+      {{ .Content }}
+    </div>
+
+    <!-- Copyright -->
+    {{- partial "post/copyright.html" . -}}
+
+    <!-- Reward -->
+    {{- partial "post/reward.html" . -}}
+
+    <footer class="post-footer">
+      {{ with .Params.tags -}}
+        <div class="post-tags">
+          {{ range . -}}
+            <a href="{{ "tags" | relLangURL }}/{{ . | urlize }}{{ if $.Site.Params.uglyURLs }}.html{{ else }}/{{ end }}">{{ . }}</a>
+          {{ end -}}
+        </div>
+      {{- end -}}
+
+      <!-- Post Pagination -->
+      <nav class="post-nav">
+        {{ with .NextInSection -}}
+          <a class="prev" href="{{ .RelPermalink }}">
+            <i class="iconfont icon-left"></i>
+            <span class="prev-text nav-default">{{ .Title }}</span>
+            <span class="prev-text nav-mobile">{{ T "prevPost" }}</span>
+          </a>
+        {{- end }}
+        {{ with .PrevInSection -}}
+          <a class="next" href="{{ .RelPermalink }}">
+            <span class="next-text nav-default">{{ .Title }}</span>
+            <span class="next-text nav-mobile">{{ T "nextPost" }}</span>
+            <i class="iconfont icon-right"></i>
+          </a>
+        {{- end }}
+      </nav>
+    </footer>
+  </article>
+{{- end }}
--- a/layouts/post/summary.html
+++ b/layouts/post/summary.html
@ -0,0 +1,28 @@
+<article class="post">
+  <header class="post-header">
+    <h1 class="post-title"><a class="post-link" href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
+    <div class="post-meta">
+      <span class="post-time"> {{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} </span>
+      {{ with .Params.categories -}}
+        <div class="post-category">
+          {{ range . -}}
+            <a href="{{ "categories" | relLangURL }}/{{ . | urlize }}/"> {{ . }} </a>
+          {{ end -}}
+        </div>
+      {{- end }}
+      {{- if .Site.Params.moreMeta }}
+        <span class="more-meta"> {{ T "wordCount" .WordCount }} </span>
+        <span class="more-meta"> {{ T "readingTime" .ReadingTime }} </span>
+      {{- end }}
+    </div>
+  </header>
+  <!-- Content -->
+  <div class="post-content">
+    <div class="post-summary">
+      {{ .Summary }}
+    </div>
+    <div class="read-more">
+      <a href="{{ .RelPermalink }}" class="read-more-link">{{ T "readMore" }}</a>
+    </div>
+  </div>
+</article>
--- a/layouts/robots.txt
+++ b/layouts/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Sitemap: {{ "sitemap.xml" | absURL }}
--- a/layouts/shortcodes/admonition.html
+++ b/layouts/shortcodes/admonition.html
@ -0,0 +1,37 @@
+{{ if .IsNamedParams -}}
+
+  {{ if eq (.Get "details") "true" -}}
+
+<details class="admonition {{ .Get "type" }}">
+  {{- with .Get "title" }}<summary class="admonition-title">{{ . }}</summary>{{ end }}
+  {{ .Inner }}
+</details>
+
+  {{- else -}}
+
+<div class="admonition {{ .Get "type" }}">
+  {{- with .Get "title" }}<p class="admonition-title">{{ . }}</p>{{ end }}
+  {{ .Inner }}
+</div>
+
+  {{- end }}
+
+{{- else -}}
+
+  {{ if eq (.Get 2) "true" -}}
+
+<details class="admonition {{ .Get 0 }}">
+  {{- with .Get 1 }}<summary class="admonition-title">{{ . }}</summary>{{ end }}
+  {{ .Inner }}
+</details>
+
+  {{- else -}}
+
+<div class="admonition {{ .Get 0 }}">
+  {{- with .Get 1 }}<p class="admonition-title">{{ . }}</p>{{ end }}
+  {{ .Inner }}
+</div>
+
+  {{- end }}
+
+{{- end }}
--- a/layouts/shortcodes/bilibili.html
+++ b/layouts/shortcodes/bilibili.html
@ -0,0 +1,23 @@
+
+{{ $videoID := index .Params 0  }}
+{{ $pageNum := index .Params 1 | default 1 }}
+
+{{ if (findRE "^[bB][vV][0-9a-zA-Z]+$" $videoID)  }}
+<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?bvid={{ $videoID  }}&page={{ $pageNum  }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" > </iframe></div>
+{{ else  }}
+<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?aid={{ $videoID  }}&page={{ $pageNum  }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" > </iframe></div>
+{{ end  }}
+
+<style>
+// Embed BiliBili Video
+#bilibili {
+  width: 100%;
+  height: 550px;
+}
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+  #bilibili {
+    width: 100%;
+    height: 250px;
+  }
+}
+</style>
--- a/layouts/shortcodes/center.html
+++ b/layouts/shortcodes/center.html
@ -0,0 +1,3 @@
+<div class='align-center'>
+  {{ .Inner }}
+</div>
--- a/layouts/shortcodes/icons.html
+++ b/layouts/shortcodes/icons.html
@ -0,0 +1,6 @@
+<span class="inline-svg" >
+    {{- $fname:=print "icons/" ( .Get 0 ) ".svg" -}}
+    {{- $path:="<path" -}}
+    {{- $fill:="<path fill=\"currentColor\"" -}}
+    {{ replace (readFile $fname) $path $fill | safeHTML }}
+</span>
--- a/layouts/shortcodes/left.html
+++ b/layouts/shortcodes/left.html
@ -0,0 +1,3 @@
+<div class='align-left'>
+  {{ .Inner }}
+</div>
--- a/layouts/shortcodes/music.html
+++ b/layouts/shortcodes/music.html
@ -0,0 +1,62 @@
+  {{/*
+      ## Music 163
+  
+      ### Params:
+  
+      - `id`
+  
+        required param
+        you can extract from music url
+        url format "http://music.163.com/#/song?id=3950552"
+  
+      - Fiddle `auto`
+  
+        optional param
+        default value 0
+        you can overwrite it with 1
+  
+      ### Examples:
+  
+      - Simple
+  
+        {{% music "3950552" %}}
+        {{% music "3950552" "1" %}}
+  
+      - Named Params
+  
+        {{% music id="3950552" %}}
+        {{% music id="3950552" auto="1" %}}
+  
+  */}}
+  
+  {{- /* DEFAULTS */ -}}
+  {{ $auto := "0" }}
+  
+  {{- if .IsNamedParams -}}
+  
+    <iframe style="max-width: 100%"
+      class="music163"
+      frameborder="no"
+      border="0"
+      marginwidth="0"
+      marginheight="0"
+      width="330"
+      height="86"
+      src="//music.163.com/outchain/player?type=2&id={{ .Get "id" }}&auto={{ or (.Get "auto") $auto }}&height=66">
+    </iframe>
+  
+  {{- else -}}
+  
+    <iframe style="max-width: 100%"
+      class="music163"
+      frameborder="no"
+      border="0"
+      marginwidth="0"
+      marginheight="0"
+      width="330"
+      height="86"
+      src="//music.163.com/outchain/player?type=2&id={{ .Get 0 }}&auto={{ if isset .Params 1 }}{{ .Get 1 }}{{ else }}{{ $auto }}{{ end }}&height=66">
+    </iframe>
+  
+  {{- end -}}
+  
--- a/layouts/shortcodes/right.html
+++ b/layouts/shortcodes/right.html
@ -0,0 +1,3 @@
+<div class='align-right'>
+  {{ .Inner }}
+</div>
--- a/layouts/sitemap.xml
+++ b/layouts/sitemap.xml
@ -0,0 +1,11 @@
+{{ "<?" | safeHTML }}xml-stylesheet type="text/xsl" href="{{ "sitemap.xsl" | absURL }}"{{ "?>" | safeHTML }}
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  {{ range .Data.Pages }}
+  <url>
+    <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
+    <lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
+    <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
+    <priority>{{ .Sitemap.Priority }}</priority>{{ end }}
+  </url>
+  {{ end }}
+</urlset>
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
--- a/static/android-chrome-512x512.png
+++ b/static/android-chrome-512x512.png
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
--- a/Show more
+++ b/Show more
				`@ -0,0 +1 @@`
				<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Gitea icon</title><path d="M4.186 5.421C2.341 5.417-.13 6.59.006 9.531c.213 4.594 4.92 5.02 6.801 5.057.206.862 2.42 3.834 4.059 3.99h7.18c4.306-.286 7.53-13.022 5.14-13.07-3.953.186-6.296.28-8.305.296v3.975l-.626-.277-.004-3.696c-2.306-.001-4.336-.108-8.189-.298-.482-.003-1.154-.085-1.876-.087zm.261 1.625h.22c.262 2.355.688 3.732 1.55 5.836-2.2-.26-4.072-.899-4.416-3.285-.178-1.235.422-2.524 2.646-2.552zm8.557 2.315c.15.002.303.03.447.096l.749.323-.537.979a.672.597 0 0 0-.241.038.672.597 0 0 0-.405.764.672.597 0 0 0 .112.174l-.926 1.686a.672.597 0 0 0-.222.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.765.672.597 0 0 0-.158-.22l.902-1.642a.672.597 0 0 0 .293-.03.672.597 0 0 0 .213-.112c.348.146.633.265.838.366.308.152.417.253.45.365.033.11-.003.322-.177.694-.13.277-.345.67-.599 1.133a.672.597 0 0 0-.251.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.764.672.597 0 0 0-.137-.202c.251-.458.467-.852.606-1.148.188-.402.286-.701.2-.99-.086-.289-.35-.477-.7-.65-.23-.113-.517-.233-.86-.377a.672.597 0 0 0-.038-.239.672.597 0 0 0-.145-.209l.528-.963 2.924 1.263c.528.229.746.79.49 1.26l-2.01 3.68c-.257.469-.888.663-1.416.435l-4.137-1.788c-.528-.228-.747-.79-.49-1.26l2.01-3.679c.176-.323.53-.515.905-.53h.064z"/></svg>
				`@ -0,0 +1 @@`
				`<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Pleroma icon</title><path d="M6.36 0A1.868 1.868 0 004.49 1.868V24h5.964V0zm7.113 0v12h4.168a1.868 1.868 0 001.868-1.868V0zm0 18.036V24h4.168a1.868 1.868 0 001.868-1.868v-4.096Z"/></svg>`