🎨 Merge branch 'develop'

.github/workflows/sync-2-gitee.yml

@@ -1,8 +1,7 @@
 name: sync-2-gitee
 
 on:
-  push:
+  push
-    branches: [main]
 
 jobs:
   sync-2-gitee:

.gitignore

@@ -1,2 +1,6 @@
-exampleSite/*
+# Ignore files in Hugo NexT theme
-!exampleSite/config.yaml
+
+.hugo_build.lock
+
+exampleSite/public
+exampleSite/resources

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022 lisenhui
+Copyright (c) 2022 hugo-next
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

archetypes/default.md

@@ -1,20 +1,47 @@
 ---
-title: '{{ replace .Name "-" " " | title }}'
+title: "{{ replace .Name "-" " " | title }}"
-description: '文章简要概述不超过65个汉字'
+description: "{{ .Name }}"
-keywords: '文章关键词1,文章关键词2,文章关键词3'
+keywords: "{{replace .Name "-" ","}}"
-isCJKLanguage: true
 
-author: '文章作者'
+date: {{ .Date }}
-lastmod: '{{ .Date }}'
+lastmod: {{ .Date }}
-publishDate: '{{ .Date }}'
 
 categories:
  -
 tags:
- - 
+  -
- - 
+  -
 
-toc: false
+# 原文作者
-draft: true
+# Post's origin author name
-url: '{{ lower .Name }}.html'
+#author:
+# 原文链接
+# Post's origin link URL
+#link:
+# 图片链接，用在open graph和twitter卡片上
+# Image source link that will use in open graph and twitter card
+#imgs:
+# 在首页展开内容
+# Expand content on the home page
+#expand: true
+# 外部链接地址，访问时直接跳转
+# It's means that will redirecting to external links
+#extlink:
+# 在当前页面开启或关闭评论功能
+# Switch to enabled or disabled comment plugins in this post
+#comment:
+# enable: false
+# 开启文章目录功能
+# Enable table of content
+#toc: false
+# 绝对访问路径
+# Absolute link for visit
+#url: "{{ lower .Name }}.html"
+# 开启文章置顶，数字越小越靠前
+# Sticky post set-top in home page and the smaller nubmer will more forward.
+#weight: 1
 ---
+
+{{ .Name }}
+
+<!--more-->

assets/css/_colors.scss

@@ -29,7 +29,6 @@
   color-scheme: light;
 }
 
-@if $cfg_darkmode {
   @media (prefers-color-scheme: dark) {
     :root {
       --body-bg-color: #{$body-bg-color-dark};

assets/css/_common/components/back-to-top.scss

@@ -0,0 +1,45 @@
+@if $back2top_enable {
+  .back-to-top {
+    font-size: $b2t-font-size;
+
+    @if not $back2top_scrollpercent {
+      span {
+        display: none;
+      }
+    }
+
+    @if $back2top_sidebar {
+      margin: 20px - $sidebar-offset -10px -20px;
+      opacity: 0;
+      transition: opacity $transition-ease;
+
+      &.back-to-top-on {
+        cursor: pointer;
+        opacity: $b2t-opacity;
+
+        &:hover {
+          opacity: $b2t-opacity-hover;
+        }
+      }
+    } @else {
+      bottom: $b2t-position-bottom;
+      box-sizing: border-box;
+      color: $b2t-color;
+      padding: 0 6px;
+      transition: bottom $transition-ease;
+      @include sidebar-toggle();
+
+      @if not $back2top_scrollpercent {
+        width: 24px;
+      }
+
+      &:hover {
+        color: $sidebar-highlight;
+      }
+
+      &.back-to-top-on {
+        bottom: $b2t-position-bottom-on;
+      }
+    }
+  }
+}

assets/css/_common/components/index.scss

@@ -0,0 +1,20 @@
+.noscript-warning {
+  background-color: lighten($red, 20%);
+  color: white;
+  font-family: sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  left: 0;
+  position: fixed;
+  text-align: center;
+  top: 0;
+  width: 100%;
+  z-index: $zindex-5;
+}
+
+@import 'back-to-top';
+@import 'reading-progress';
+
+@import 'post';
+@import 'pages';
+@import 'third-party';

assets/css/_common/components/pages/breadcrumb.scss

@@ -0,0 +1,21 @@
+ul.breadcrumb {
+  font-size: $font-size-smallest;
+  list-style: none;
+  margin: 1em 0;
+  padding: 0 2em;
+  text-align: center;
+
+  li {
+    display: inline;
+  }
+
+  li:not(:first-child)::before {
+    content: '/\00a0';
+    font-weight: normal;
+    padding: .5em;
+  }
+
+  li:last-child {
+    font-weight: bold;
+  }
+}

assets/css/_common/components/pages/categories.scss

@@ -0,0 +1,39 @@
+.category-all-page {
+
+  min-height: 700px;
+
+  .category-all-title {
+    font-size: 1.35em;
+    text-align: center;
+  }
+
+  .category-all {
+    margin-top: 40px;
+  }
+
+  .category-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .category-list-item {
+    margin: 5px 10px;
+  }
+
+  .category-list-count {
+    color: $grey;
+
+    &::before {
+      content: ' (';
+    }
+
+    &::after {
+      content: ') ';
+    }
+  }
+
+  .category-list-child {
+    padding-left: 10px;
+  }
+}

assets/css/_common/components/pages/index.scss

@@ -0,0 +1,5 @@
+// Page specific styles
+@import 'categories';
+@import 'schedule';
+@import 'breadcrumb';
+@import 'tag-cloud';

assets/css/_common/components/pages/schedule.scss

@@ -0,0 +1,102 @@
+@keyframes dot-flash {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(.8);
+  }
+}
+
+.event-list {
+  hr {
+    background: $black-deep;
+    margin: 20px 0 45px;
+
+    &::after {
+      background: $black-deep;
+      color: white;
+      content: 'NOW';
+      display: inline-block;
+      font-weight: bold;
+      padding: 0 5px;
+    }
+  }
+
+  .event {
+    --event-background: #{$black-deep};
+    --event-foreground: #{$grey};
+    --event-title: white;
+    background: var(--event-background);
+    padding: 15px;
+
+    .event-summary {
+      border-bottom: 0;
+      color: var(--event-title);
+      margin: 0;
+      padding: 0 0 0 35px;
+      position: relative;
+
+      &::before {
+        animation: dot-flash 1s alternate infinite ease-in-out;
+        background: var(--event-title);
+        left: 0;
+        margin-top: -6px;
+        position: absolute;
+        top: 50%;
+        @include round-icon(12px);
+      }
+    }
+
+    &:nth-of-type(odd) .event-summary::before {
+      animation-delay: .5s;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
+    .event-relative-time {
+      color: var(--event-foreground);
+      display: inline-block;
+      font-size: 12px;
+      font-weight: normal;
+      padding-left: 12px;
+    }
+
+    .event-details {
+      color: var(--event-foreground);
+      display: block;
+      line-height: 18px;
+      padding: 6px 0 6px 35px;
+
+      &::before {
+        color: var(--event-foreground);
+        display: inline-block;
+        margin-right: 9px;
+        width: 14px;
+        @include font-family-icons();
+      }
+
+      &.event-location::before {
+        content: '\f041';
+      }
+
+      &.event-duration::before {
+        content: '\f017';
+      }
+
+      &.event-description::before {
+        content: '\f024';
+      }
+    }
+  }
+
+  .event-past {
+    --event-background: #{$whitesmoke};
+    --event-foreground: #{$grey-dark};
+    --event-title: #{$black-deep};
+  }
+}

assets/css/_common/components/pages/tag-cloud.scss

@@ -0,0 +1,43 @@
+.tag-cloud {
+  text-align: center;
+  min-height: 700px;
+
+  .tag-cloud-title {
+    text-align: center;
+    font-size: 1.35em;
+
+    .tag-list-count {
+      font-size: 0.56em;
+    }
+  }
+
+  .tag-cloud-tags {
+    margin-top: 40px;
+  }
+
+  a {
+    display: inline-block;
+    margin: 10px;
+  }
+}
+
+@for $tag-cloud from 0 through 10 {
+  $tag-cloud-color : mix($tag-cloud-end, $tag-cloud-start, $tag-cloud * 10);
+  .tag-cloud-#{$tag-cloud} {
+    border-bottom-color: $tag-cloud-color;
+    color: $tag-cloud-color;
+    font-size: #{0.85+($tag-cloud * 0.05)}em
+  }
+}
+
+@if $darkmode {
+  @media (prefers-color-scheme: dark) {
+    @for $tag-cloud from 0 through 10 {
+      $tag-cloud-color : mix($tag-cloud-end-dark, $tag-cloud-start-dark, $tag-cloud * 10);
+      .tag-cloud-#{$tag-cloud} {
+        border-bottom-color: $tag-cloud-color;
+        color: $tag-cloud-color;
+      }
+    }
+  }
+}

assets/css/_common/components/post/index.scss

@@ -0,0 +1,53 @@
+.rtl {
+  &.post-body {
+    p, a, h1, h2, h3, h4, h5, h6, li, ul, ol {
+      direction: rtl;
+      font-family: UKIJ Ekran;
+    }
+  }
+
+  &.post-title {
+    font-family: UKIJ Ekran;
+  }
+}
+
+.post-button {
+  margin-top: 40px;
+  text-align: center;
+}
+
+.use-motion {
+  @if $motion_trans_post_block {
+    .post-block, .pagination, .comments, .post-comments {
+      visibility: hidden;
+    }
+  }
+
+  @if $motion_trans_post_header {
+    .post-header {
+      visibility: hidden;
+    }
+  }
+
+  @if $motion_trans_post_body {
+    .post-body {
+      visibility: hidden;
+    }
+  }
+
+  @if $motion_trans_coll_header {
+    .collection-header {
+      visibility: hidden;
+    }
+  }
+}
+
+@import 'post-collapse';
+@import 'post-body';
+@import 'post-gallery';
+@import 'post-header';
+@import 'post-nav';
+@import 'post-footer';
+@import 'post-widgets';
+@import 'post-reward';
+@import 'post-followme';

assets/css/_common/components/post/post-body.scss

@@ -0,0 +1,79 @@
+.post-body {
+  font-family: $font-family-posts;
+  @include word-wrap();
+
+  @include desktop-large() {
+    font-size: $font-size-large;
+  }
+
+  @include desktop() {
+    text-align: unquote($text_align_desktop);
+  }
+
+  @include tablet-mobile() {
+    text-align: unquote($text_align_mobile);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    // Supported plugins: hexo-renderer-markdown-it hexo-renderer-marked
+    .header-anchor, .headerlink {
+      border-bottom-style: none;
+      color: inherit;
+      float: right;
+      font-size: $font-size-small;
+      margin-left: 10px;
+      opacity: 0;
+
+      &::before {
+        @include font-family-icons('\f0c1');
+      }
+    }
+
+    &:hover {
+      .header-anchor, .headerlink {
+        opacity: .5;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .exturl .fa {
+    font-size: $font-size-small;
+    margin-left: 4px;
+  }
+
+  // For fancybox and pandoc
+  .image-caption, img + figcaption, .fancybox + figcaption {
+    color: $grey-dark;
+    font-size: $font-size-small;
+    font-weight: bold;
+    line-height: 1;
+    margin: -15px auto 15px;
+    text-align: center;
+  }
+
+  iframe, img, video, embed {
+    margin-bottom: 20px;
+  }
+
+  .video-container {
+    height: 0;
+    margin-bottom: 20px;
+    overflow: hidden;
+    padding-top: 75%;
+    position: relative;
+    width: 100%;
+
+    iframe, object, embed {
+      height: 100%;
+      left: 0;
+      margin: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+}

assets/css/_common/components/post/post-collapse.scss

@@ -0,0 +1,109 @@
+.posts-collapse .post-content {
+  margin-bottom: $posts-collapse-margin;
+  margin-left: $posts-collapse-margin;
+  position: relative;
+
+  @include mobile() {
+    margin-left: $posts-collapse-margin-mobile;
+    margin-right: $posts-collapse-margin-mobile;
+  }
+
+  .collection-title {
+    font-size: $font-size-large;
+    position: relative;
+
+    &::before {
+      background: $grey-dark;
+      border: 1px solid white;
+      margin-left: -6px;
+      margin-top: -4px;
+      position: absolute;
+      top: 50%;
+      @include round-icon(10px);
+    }
+  }
+
+  .collection-year {
+    font-size: $font-size-largest;
+    font-weight: bold;
+    margin: 60px 0;
+    position: relative;
+
+    &::before {
+      background: $grey;
+      margin-left: -4px;
+      margin-top: -4px;
+      position: absolute;
+      top: 50%;
+      @include round-icon(8px);
+    }
+  }
+
+  .collection-header {
+    display: block;
+    margin-left: 20px;
+
+    small {
+      color: $grey;
+      margin-left: 5px;
+    }
+  }
+
+  .post-header {
+    border-bottom: 1px dashed $grey-light;
+    // 2px is equal to half the width of .posts-collapse::before
+    margin: 30px 2px 0;
+    padding-left: 15px;
+    position: relative;
+    transition: border $transition-ease;
+
+    &::before {
+      background: $grey;
+      border: 1px solid white;
+      left: -6px;
+      position: absolute;
+      top: $font-size-smallest;
+      transition: background $transition-ease;
+      @include round-icon(6px);
+    }
+
+    &:hover {
+      border-bottom-color: $grey-dim;
+
+      &::before {
+        background: $black-deep;
+      }
+    }
+  }
+
+  .post-meta-container {
+    display: inline;
+    font-size: $font-size-smallest;
+    margin-right: 10px;
+  }
+
+  .post-title {
+    display: inline;
+
+    a {
+      border-bottom: 0;
+      color: var(--link-color);
+    }
+
+    .fa-external-link-alt {
+      font-size: $font-size-small;
+      margin-left: 5px;
+    }
+  }
+
+  &::before {
+    background: $whitesmoke;
+    content: ' ';
+    height: 100%;
+    margin-left: -2px;
+    position: absolute;
+    // To do: 1.25em is inaccurate when .collection-title has line breaks on mobile
+    top: 1.25em;
+    width: 4px;
+  }
+}

assets/css/_common/components/post/post-followme.scss

@@ -0,0 +1,41 @@
+@if $follow_me {
+  .followme {
+    color: $grey;
+    /* padding: 1em 1.5em; */
+    text-align: center;
+    @include post-card();
+    border-left: none;
+    border-bottom: #46b404 solid 5px;
+
+    .social-list {
+      @include flex-wrap();
+
+      .social-item {
+        margin: .5em 2em;
+
+        a:hover {
+          font-weight: bold;
+        }
+
+        @include tablet-mobile() {
+          margin: .5em .75em;
+        }
+      }
+
+      .social-link {
+        border: 0;
+        display: inline-block;
+        text-align: center;
+
+        .icon {
+          font-size: 1.75em;
+        }
+
+        .label {
+          display: block;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

assets/css/_common/components/post/post-footer.scss

@@ -0,0 +1,90 @@
+// Flexbox layout makes it possible to reorder the child
+// elements of .post-footer through the `order` CSS property
+// Fix issue #16
+// To do: use `gap` instead of `margin`
+// See https://caniuse.com/flexbox-gap
+.post-footer {
+  @include flex-column();
+
+  hr{
+  text-align:center;
+  line-height:0px;
+  height: 0px;
+  background-image: none;
+  border-bottom: .125em dashed #999;
+  margin: 24px 0 12px 0;
+
+  &:after{
+    content: $post_end_line_tip;
+    font-size: .9em;
+    font-weight: bold;
+    background: #fff;
+    padding: 0 5px;
+    z-index:2;
+  }
+}
+
+}
+
+.post-eof {
+  background: $grey-light;
+  height: 1px;
+  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
+  width: 8%;
+
+  .post-block:last-of-type & {
+    display: none;
+  }
+}
+
+@if $creative_commons_post {
+
+  .post-copyright {
+    border-left: 3px solid #ff2a2a;
+    background: var(--card-bg-color);
+
+    img {
+      margin: 8px;
+      opacity: .8;
+      filter: blur(.08em);
+      -webkit-transform: rotate(320deg);
+      -moz-transform: rotate(320deg);
+      -ms-transform: rotate(320deg);
+      -o-transform: rotate(320deg);
+      transform: rotate(320deg);
+    }
+
+    ul {
+      list-style: none;
+      padding: .5em 1em;
+      @include post-card();
+      border: none;
+      background: none;
+    }
+  }
+
+}
+
+.post-tags {
+  margin-bottom: 20px;
+  text-align: center;
+
+  a {
+    display: inline-block;
+    font-size: $font-size-smaller;
+
+    &:before {
+      @if $post_end_tag_icon {
+        content: "🔖";
+        font-size: 1.25em;
+      } 
+      @else {
+        content: "#";
+      }
+    }
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}

assets/css/_common/components/post/post-gallery.scss

@@ -0,0 +1,33 @@
+.post-gallery {
+  display: flex;
+  min-height: 200px;
+
+  .post-gallery-image {
+    flex: 1;
+
+    &:not(:first-child) {
+      clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
+      margin-left: -20px;
+    }
+
+    &:not(:last-child) {
+      margin-right: -20px;
+    }
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      // Override darkmode image opacity.
+      opacity: 1;
+      width: 100%;
+    }
+  }
+}
+
+.posts-expand .post-gallery {
+  margin-bottom: 60px;
+}
+
+.posts-collapse .post-gallery {
+  margin: 15px 0;
+}

assets/css/_common/components/post/post-header.scss

@@ -0,0 +1,121 @@
+.posts-expand .post-header {
+  font-size: $font-size-large;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.posts-expand .post-title {
+  font-size: $font-size-largest;
+  font-weight: normal;
+  margin: initial;
+  @include word-wrap();
+
+  @if $post_edit_enable {
+    .post-edit-link {
+      border-bottom: 0;
+      color: $grey;
+      float: right;
+      font-size: $font-size-larger;
+      margin-left: -1.2em;
+      transition: color $transition-ease-in;
+
+      @include mobile-small() {
+        margin-left: initial;
+      }
+
+      &:hover {
+        color: $sidebar-highlight;
+      }
+    }
+  }
+}
+
+.posts-expand .post-title-link {
+  border-bottom: 0;
+  color: var(--link-color);
+  display: inline-block;
+  position: relative;
+
+  &::before {
+    background: var(--link-color);
+    bottom: 0;
+    content: '';
+    height: 2px;
+    // Fix issue #75
+    left: 0;
+    position: absolute;
+    transform: scaleX(0);
+    transition: transform $transition-ease;
+    width: 100%;
+  }
+
+  &:hover::before {
+    transform: scaleX(1);
+  }
+
+  .fa-external-link-alt {
+    font-size: $font-size-small;
+    margin-left: 5px;
+  }
+}
+
+.post-sticky-flag {
+  display: inline-block;
+  // Fix issue #80 #140
+  margin-right: 8px;
+  transform: rotate(30deg);
+}
+
+.posts-expand .post-meta-container {
+  color: $grey-dark;
+  font-family: $font-family-posts;
+  font-size: $font-size-smallest;
+  margin-top: 3px;
+
+  .post-description {
+    font-size: $font-size-small;
+    margin-top: 2px;
+  }
+
+  time {
+    border-bottom: 1px dashed $grey-dark;
+  }
+}
+
+// Flexbox layout makes it possible to reorder the child
+// elements of .post-meta through the `order` CSS property
+.post-meta {
+  @include flex-wrap();
+}
+
+// .post-meta-item exists in .post-meta and footer
+:not(.post-meta-break) + .post-meta-item::before {
+  content: '|';
+  margin: 0 .5em;
+}
+
+/* Make post meta dislay in oneline
+.post-meta-item-icon {
+  margin-right: 3px;
+} */
+
+.post-meta-item-text {
+  @if not $post_meta_item_text {
+    display: none;
+  }
+
+  @include tablet-mobile() {
+    display: none;
+  }
+}
+
+.post-meta-break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+@if $busuanzi_enable and $busuanzi_post_views {
+  #busuanzi_container_page_pv {
+    display: inline-block;
+  }
+}

assets/css/_common/components/post/post-nav.scss

@@ -0,0 +1,41 @@
+.post-nav {
+  border-top: 1px solid $gainsboro;
+  display: flex;
+  gap: 30px;
+  justify-content: space-between;
+  margin-top: 1em;
+  padding: 10px 5px 0;
+}
+
+.post-nav-item {
+  flex: 1;
+
+  a {
+    border-bottom: 0;
+    display: block;
+    font-size: $font-size-small;
+    line-height: 1.6;
+
+    &:active {
+      top: 2px;
+    }
+  }
+
+  .fa {
+    font-size: $font-size-smallest;
+  }
+
+  &:first-child {
+    .fa {
+      margin-right: 5px;
+    }
+  }
+
+  &:last-child {
+    text-align: right;
+
+    .fa {
+      margin-left: 5px;
+    }
+  }
+}

assets/css/_common/components/post/post-reward.scss

@@ -0,0 +1,65 @@
+.reward-container {
+  margin: $post-card-margin;
+  /* padding: 1em 0; */
+  text-align: center;
+
+  div>i {
+    font-size: 1.85em;
+    margin-right: 4px;
+  }
+
+  button {
+    @include button($sidebar-highlight);
+    border: 2px solid $sidebar-highlight;
+    border-radius: 2px;
+    outline: 0;
+    transition: all $transition-ease;
+    vertical-align: text-top;
+  }
+}
+
+.post-reward {
+  display: none;
+  padding-top: 20px;
+
+  &.active {
+    display: block;
+  }
+
+  .post-reward-item {
+    display: inline-block;
+
+    span {
+      display: block;
+    }
+
+    @if $reward_settings_animation {
+       
+      &:hover span {
+        animation: next-roll .1s infinite linear;
+        // The animation may affect :hover of img in dark mode
+        pointer-events: none;
+      }
+      
+    }  
+  }
+
+  img {
+    display: inline-block;
+    margin: .8em 1.2em;
+    max-width: 100%;
+    width: 180px;
+    border: #eee 1px solid;
+    box-shadow:rgba(0,0,0,0.2) 0 1px 5px 0px;
+  }
+}
+
+@keyframes next-roll {
+  from {
+    transform: rotateZ(30deg);
+  }
+
+  to {
+    transform: rotateZ(-30deg);
+  }
+}

assets/css/_common/components/post/post-widgets.scss

@@ -0,0 +1,20 @@
+.post-widgets {
+  border-top: 1px solid $gainsboro;
+  margin-top: 15px;
+  text-align: center;
+}
+
+.wpac-rating-container {
+  height: 20px;
+  line-height: 20px;
+  margin-top: 10px;
+  padding-top: 6px;
+  text-align: center;
+}
+
+.social-like {
+  display: flex;
+  font-size: $font-size-small;
+  justify-content: center;
+  text-align: center;
+}

assets/css/_common/components/reading-progress.scss

@@ -0,0 +1,27 @@
+@if $reading_progress_enable {
+  .reading-progress-bar {
+    --progress: 0;
+    background: $reading_progress_color;
+    height: $reading_progress_height;
+    position: fixed;
+    z-index: $zindex-5;
+
+    @if $reading_progress_reversed {
+      width: calc(100% - var(--progress));
+    } @else {
+      width: var(--progress);
+    }
+
+    @if $reading_progress_start == 'right' {
+      right: 0;
+    } @else {
+      left: 0;
+    }
+
+    @if $reading_progress_position == 'bottom' {
+      bottom: 0;
+    } @else {
+      top: 0;
+    }
+  }
+}

assets/css/_common/components/third-party/disqusjs.scss

@@ -0,0 +1,39 @@
+@if $disqusjs_enable and $darkmode {
+  @media (prefers-color-scheme:dark) {
+    html #dsqjs a {
+      color: var(--link-color)
+    }
+
+    html #dsqjs a:focus,html #dsqjs a:hover {
+      color: var(--link-hover-color)
+    }
+
+    html #dsqjs .dsqjs-nav,html #dsqjs footer {
+      border-color: var(--card-bg-color)
+    }
+
+    html #dsqjs .dsqjs-load-more,html #dsqjs .dsqjs-load-more:hover,html #dsqjs .dsqjs-nav-tab,html #dsqjs .dsqjs-no-comment,html #dsqjs .dsqjs-post-content {
+      color: var(--text-color)
+    }
+
+    html #dsqjs .dsqjs-order-label {
+      background-color: #3e4b5e
+    }
+
+    html #dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
+      background-color: var(--content-bg-color)
+    }
+
+    html #dsqjs .dsqjs-tab-active>span:after {
+      background-color: #2e9fff!important
+    }
+
+    html #dsqjs .dsqjs-footer,html #dsqjs .dsqjs-meta {
+      color: var(--text-color)
+    }
+
+    html #dsqjs .dsqjs-post-body blockquote {
+      border-color: var(--content-bg-color)
+    }
+  }
+}

assets/css/_common/components/third-party/gitalk.scss

@@ -0,0 +1,9 @@
+@if $gitalk_enable {
+  .gt-header a, .gt-comments a, .gt-popup a {
+    border-bottom: 0;
+  }
+
+  .gt-container .gt-popup .gt-action.is--active::before {
+    top: .7em;
+  }
+}

assets/css/_common/components/third-party/gitter.scss

@@ -0,0 +1,7 @@
+@if $gitter_enable {
+  .gitter-open-chat-button {
+    $alignment : sidebar-toggle-alignment(false);
+    #{$alignment[0]}: auto !important;
+    #{$alignment[1]}: 10px !important;
+  }
+}

assets/css/_common/components/third-party/index.scss

@@ -0,0 +1,20 @@
+@import 'disqusjs';
+@import 'gitalk';
+@import 'utterances';
+@import 'search';
+@import 'related-posts';
+@import 'math';
+@import 'gitter';
+@import 'livere';
+@import 'waline';
+
+.use-motion .animated {
+  // Fix issue #48 #55
+  animation-fill-mode: none;
+  // Fix issue #46 .animated in .sidebar
+  visibility: inherit;
+}
+
+.use-motion .sidebar .animated {
+  animation-fill-mode: both;
+}

assets/css/_common/components/third-party/livere.scss

@@ -0,0 +1,5 @@
+ @if $livere_enable {
+  #livereAdWrapper, #taboola-livere { 
+    display: none; 
+  }
+ }

assets/css/_common/components/third-party/math.scss

@@ -0,0 +1,9 @@
+@if $math_mathjax_enable {
+  mjx-container[jax='CHTML'][display='true'], .has-jax {
+    overflow: auto hidden;
+  }
+
+  mjx-container[display='true'] + br {
+    display: none;
+  }
+}

assets/css/_common/components/third-party/related-posts.scss

@@ -0,0 +1,23 @@
+@if $related_posts_enable {
+  .popular-posts-header {
+    border-bottom: 1px solid $gainsboro;
+    font-size: $font-size-large;
+    margin-bottom: 10px;
+    margin-top: $post-eof-margin-bottom;
+  }
+
+  .popular-posts {
+    padding: 0;
+
+    .popular-posts-item {
+      margin-left: 2em;
+
+      .popular-posts-title {
+        font-size: $font-size-small;
+        font-weight: normal;
+        line-height: $line-height-base * 1.2;
+        margin: 0;
+      }
+    }
+  }
+}

assets/css/_common/components/third-party/search.scss

@@ -0,0 +1,179 @@
+@if $local_search_enable or $algolia_search_enable {
+  .search-active {
+    overflow: hidden;
+  }
+
+  .search-pop-overlay {
+    background: rgba(0, 0, 0, 0);
+    display: flex;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    transition: visibility .4s, background .4s;
+    visibility: hidden;
+    width: 100%;
+    z-index: $zindex-4;
+
+    .search-active & {
+      background: rgba(0, 0, 0, .3);
+      visibility: visible;
+    }
+  }
+
+  .search-popup {
+    background: var(--card-bg-color);
+    border-radius: 5px;
+    height: 80%;
+    margin: auto;
+    transform: scale(0);
+    transition: transform .4s;
+    width: 700px;
+
+    .search-active & {
+      transform: scale(1);
+    }
+
+    @include mobile() {
+      border-radius: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    .search-icon, .popup-btn-close {
+      color: $grey-dark;
+      font-size: 18px;
+      padding: 0 10px;
+    }
+
+    .popup-btn-close {
+      cursor: pointer;
+
+      &:hover .fa {
+        color: $black-deep;
+      }
+    }
+
+    .search-header {
+      background: $gainsboro;
+      @if $darkmode {
+        @media (prefers-color-scheme: dark) {
+          background: $grey-dim;
+        }
+      }
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      display: flex;
+      padding: 5px;
+    }
+
+    input.search-input {
+      background: transparent;
+      border: 0;
+      outline: 0;
+      width: 100%;
+
+      &::-webkit-search-cancel-button {
+        display: none;
+      }
+    }
+
+    .search-result-container {
+      height: calc(100% - 55px);
+      overflow: auto;
+      padding: 5px 25px;
+
+      hr {
+        margin: 5px 0 10px;
+
+        &:first-child {
+          display: none;
+        }
+      }
+    }
+
+    .search-result-list {
+      margin: 0 5px;
+      padding: 0;
+    }
+
+    a.search-result-title {
+      font-weight: bold;
+    }
+
+    p.search-result {
+      border-bottom: 1px dashed $grey-light;
+      padding: 5px 0;
+    }
+  }
+}
+
+@if $algolia_search_enable {
+  .search-input-container {
+    flex-grow: 1;
+
+    form {
+      padding: 2px;
+    }
+  }
+
+  .search-stats {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+
+    img {
+      height: 1em;
+      margin: 0;
+    }
+  }
+
+  .algolia-pagination {
+    // Override default style of ul
+    margin: 40px 0;
+    opacity: 1;
+    padding: 0;
+
+    .pagination-item {
+      display: inline-block;
+    }
+
+    .current .page-number {
+      @extend %page-number-current;
+      cursor: default;
+    }
+
+    .disabled-item {
+      visibility: hidden;
+    }
+  }
+}
+
+@if $local_search_enable {
+  .search-popup {
+    .search-input-container {
+      flex-grow: 1;
+      padding: 2px;
+    }
+
+    .no-result {
+      display: flex;
+    }
+
+    .search-result-list {
+      width: 100%;
+    }
+
+    .search-result-icon {
+      color: $grey-light;
+      margin: auto;
+    }
+  }
+
+  mark.search-keyword {
+    background: transparent;
+    border-bottom: 1px dashed $red;
+    color: $red;
+    font-weight: bold;
+  }
+}

assets/css/_common/components/third-party/utterances.scss

@@ -0,0 +1,5 @@
+@if $utterances_enable {
+  .utterances {
+    max-width: unset;
+  }
+}

assets/css/_common/components/third-party/waline.scss

@@ -0,0 +1,5 @@
+@if $waline_enable {
+  .wl-actions>button:nth-child(3) {
+    display: none
+  }
+}

assets/css/_common/outline/footer/index.scss

@@ -20,6 +20,18 @@
   text-align: center;
   @include flex-column();
   @include main-container();
+
+  @if $footer_vendors_enable {
+    .vendors-list {
+      a {
+        margin-right: 5px;
+      }
+
+      img {
+        display: inline-block;
+      }
+    }
+  }
 }
 
 .use-motion {
@@ -66,16 +78,13 @@
 }
 
 .with-love {
-  color: $cfg_footer_icon_color;
   display: inline-block;
   margin: 0 5px;
 
-  @if $cfg_footer_icon_animated {
     animation: icon-animate 1.33s ease-in-out infinite;
   }
 }
 
-@if $cfg_footer_beian_enable {
   .beian img {
     display: inline-block;
     margin: 0 3px;
@@ -83,15 +92,12 @@
   }
 }
 
-@if $cfg_busuanzi_enable {
   .busuanzi-count {
-    @if $cfg_busuanzi_visitors {
       #busuanzi_container_site_uv {
         display: none;
       }
     }
 
-    @if $cfg_busuanzi_views {
       #busuanzi_container_site_pv {
         display: none;
       }

assets/css/_common/outline/header/bookmark.scss

@@ -1,17 +1,26 @@
-@if $cfg_bookmark_enable {
+@if $bookmark_enable {
   .book-mark-link {
     border-bottom: 0;
     position: fixed;
     top: -10px;
+
     transition: top .3s;
-    @include sidebar-toggle-position(true);
+    -moz-transition:top .3s;
+    -webkit-transition:top .3s;
+    -o-transition:top .3s;
+
+    @if not $github_banner_enable {
+      @include sidebar-toggle-position(true);
+    } @else {
+      left: 30px;
+    }    
 
     @include tablet-mobile() {
       display: none;
     }
 
     &::before {
-      color: convert($cfg_bookmark_color);
+      color: $bookmark_color;
       font-size: 32px;
       line-height: 1;
       @include font-family-icons('\f02e');

assets/css/_common/outline/header/github-banner.scss

@@ -1,4 +1,4 @@
-@if $cfg_github_banner_enable {
+@if $github_banner_enable {
   @keyframes octocat-wave {
     0%, 100% {
       transform: rotate(0);
@@ -28,7 +28,7 @@
     }
 
     @include tablet-mobile() {
-      @if $cfg_local_search_enable or $cfg_algolia_search_enable {
+      @if $local_search_enable or $algolia_search_enable {
         display: none;
       }
 

assets/css/_common/outline/mobile.scss

@@ -5,7 +5,7 @@
 }
 */
 
-@if $cfg_mobile_layout_economy {
+@if $mobile_layout_economy {
   @include mobile-small() {
     // For Pisces & Gemini schemes only wider width (remove main blocks in Gemini).
     .main-inner {
@@ -56,7 +56,6 @@
         margin-bottom: 10px !important;
         padding: 10px !important;
 
-        @if $cfg_note_icons {
           &:not(.no-icon) {
             padding-left: 35px !important;
           }

assets/css/_common/outline/sidebar/index.scss

@@ -13,6 +13,9 @@
 }
 
 .cc-license {
+
+  margin-top: 6px;
+  
   .cc-opacity {
     border-bottom: 0;
     opacity: .7;

assets/css/_common/outline/sidebar/sidebar-author-links.scss

@@ -1,9 +1,9 @@
-.links-of-author {
+.links-of-author, .links-of-social {
   a {
     font-size: $font-size-smaller;
   }
 
-  @if not $cfg_social_icons_only {
+  @if not $social_icons_only {
     .fa, .fab, .far, .fas {
       margin-right: 2px;
     }

assets/css/_common/outline/sidebar/sidebar-author.scss

@@ -3,11 +3,11 @@
   max-width: $site-author-image-width;
   padding: 2px;
 
-  @if $cfg_avatar_rounded {
+  @if $avatar_rounded {
     border-radius: 50%;
   }
 
-  @if $cfg_avatar_rotated {
+  @if $avatar_rotated {
     transition: transform 1s ease-out;
 
     &:hover {

assets/css/_common/outline/sidebar/sidebar-toc.scss

@@ -1,14 +1,14 @@
-@if $cfg_toc_enable {
   .post-toc {
     font-size: $font-size-small;
+    padding: 0 8px;
 
-    ol {
+    ul {
       list-style: none;
       margin: 0;
       padding: 0 2px 5px 10px;
       text-align: left;
 
-      > ol {
+      > li {
         padding-left: 0;
       }
 
@@ -22,14 +22,14 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      @if not $cfg_toc_wrap {
+      @if not $toc_wrap {
         white-space: nowrap;
       }
     }
 
     .nav {
       .nav-child {
-        display: if($cfg_toc_expand_all, block, none);
+        display: if($toc_expand_all, block, none);
       }
 
       .active > .nav-child {

assets/css/_common/outline/sidebar/sidebar-toggle.scss

@@ -12,10 +12,8 @@
 
 @media (any-hover: hover) {
   body:not(.sidebar-active) .sidebar-toggle:hover {
-    @include toggle-arrow($cfg_sidebar_position);
   }
 }
 
 .sidebar-active .sidebar-toggle {
-  @include toggle-close($cfg_sidebar_position);
 }

assets/css/_common/outline/sidebar/site-state.scss

@@ -1,4 +1,3 @@
-@if $cfg_site_state {
   .site-state {
     @include flex-wrap();
     line-height: 1.4;
@@ -8,6 +7,11 @@
     // Fix issue #103
     // The click area of the link becomes smaller
     padding: 0 15px;
+    border-left: 1px solid #eee;
+
+    &:first-child {
+      border-left: none;
+    }
 
     a {
       border-bottom: 0;
@@ -15,6 +19,8 @@
     }
   }
 
+
+
   .site-state-item-count {
     display: block;
     font-size: $site-state-item-count-font-size;

assets/css/_common/scaffolding/base.scss

@@ -18,7 +18,6 @@ body {
   position: relative;
   transition: padding $transition-ease;
 
-  @if $cfg_bd_scrollbar_overlay {
     overflow-x: hidden;
     @supports (overflow-x: clip) {
       overflow-x: clip;
@@ -26,7 +25,6 @@ body {
     width: 100vw;
   }
 
-  @if $cfg_bd_scrollbar_stable {
     overflow-y: scroll;
   }
 }

assets/css/_common/scaffolding/comments.scss

@@ -37,3 +37,119 @@
     padding-top: 0;
   }
 }
+
+.post-comments {
+  @if $scheme !='Gemini' {
+    margin-top: 60px;
+  }
+
+  overflow: hidden;
+
+  .comment-head {
+    margin-bottom: 20px;
+
+    .comment-headline {
+      display: inline-block;
+      vertical-align: middle;
+      font-weight: 700;
+      font-size: 1.4em;
+    }
+
+    @if $two_comments_enable {
+      .comment-switch {
+        display: inline-block;
+        float: right;
+        margin: 2px auto;
+        padding: 4px 16px;
+        width: max-content;
+        border-radius: 8px;
+        background: #eee;
+
+        .first-comment {
+          color: $first_comment_color;
+
+          @if $two_comments_actived==$first_comment_name {
+            font-weight: bold;
+          }
+        }
+
+        .second-comment {
+          color: $second_comment_color;
+
+          @if $two_comments_actived==$second_comment_name {
+            font-weight: bold;
+          }
+        }
+
+        $switch_btn_bg_color: $first_comment_color;
+
+        .switch-btn {
+          position: relative;
+          display: inline-block;
+          margin: -4px 8px 0;
+          width: 42px;
+          height: 22px;
+          border-radius: 34px;
+          vertical-align: middle;
+          cursor: pointer;
+          -webkit-transition: .4s;
+          -moz-transition: .4s;
+          -o-transition: .4s;
+          -ms-transition: .4s;
+          transition: .4s;
+
+          @if $two_comments_actived==$second_comment_name {
+            $switch_btn_bg_color: $second_comment_color;
+          }
+
+          background-color: $switch_btn_bg_color;
+
+          &:before {
+            position: absolute;
+            bottom: 4px;
+            left: 4px;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            content: '';
+            background-color: #fff;
+            -webkit-transition: .4s;
+            -moz-transition: .4s;
+            -o-transition: .4s;
+            -ms-transition: .4s;
+            transition: .4s
+          }
+
+          &.move:before {
+            -webkit-transform: translateX(20px);
+            -moz-transform: translateX(20px);
+            -o-transform: translateX(20px);
+            -ms-transform: translateX(20px);
+            transform: translateX(20px);
+          }
+        }
+      }
+    }
+  }
+
+  @if $two_comments_enable {
+    $first_comment_display: none;
+    $second_comment_display: none;
+
+    @if $two_comments_actived==$first_comment_name {
+      $first_comment_display: block;
+    }
+
+    @if $two_comments_actived==$second_comment_name {
+      $second_comment_display: block;
+    }
+
+    .comment-wrap>div:nth-child(1) {
+      display: $first_comment_display;
+    }
+
+    .comment-wrap>div:nth-child(2) {
+      display: $second_comment_display;
+    }
+  }
+}

assets/css/_common/scaffolding/fontawesome/animation.scss

@@ -0,0 +1,4 @@
+.fa-spin {
+  -webkit-animation: fa-spin .8s infinite linear;
+  animation: fa-spin .8s infinite linear;
+} 

assets/css/_common/scaffolding/fontawesome/index.scss

@@ -0,0 +1 @@
+@import 'animation';

assets/css/_common/scaffolding/highlight/copy-code.scss

@@ -11,13 +11,11 @@
   position: absolute;
   transition: opacity $transition-ease;
 
-  @if $cfg_codeblock_copy_btn_style == 'flat' {
     background: white;
     border: 0;
     font-size: $font-size-smaller;
     right: 0;
     top: 0;
-  } @else if $cfg_codeblock_copy_btn_style == 'mac' {
     color: var(--highlight-foreground);
     font-size: 14px;
     right: 0;
@@ -33,7 +31,6 @@
   }
 }
 
-@if $cfg_codeblock_copy_btn_style == 'mac' {
   figure.highlight {
     border-radius: 5px;
     box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);

assets/css/_common/scaffolding/highlight/index.scss

@@ -1,13 +1,8 @@
 // Use `@use` to fix issue #67
-// TODO Not understand how to import dymatic variable
 // @import '(theme.highlight.enable && theme.highlight.light.file) ? theme.highlight.light.file : null';
 // @import '(theme.prism.enable && theme.prism.light) ? theme.prism.light : null';
 // @import '(theme.prism.enable && theme.prism.number) ? theme.prism.number : null';
 
-// @media (prefers-color-scheme: dark) {
-  // @import '(theme.darkmode && theme.highlight.enable && theme.highlight.dark.file) ? theme.highlight.dark.file : null';
-  // @import '(theme.darkmode && theme.prism.enable && theme.prism.dark) ? theme.prism.dark : null';
-// }
 
 // @import 'theme.codeblock.copy_button.enable ? "copy-code" : null';
 
@@ -43,6 +38,7 @@
 
 pre, code {
   font-family: $code-font-family;
+  color: #fff;
 }
 
 code {
@@ -61,6 +57,7 @@ kbd {
   font-family: inherit;
   padding: .1em .3em;
   white-space: nowrap;
+  color: #fff;
 }
 
 // `highlight.line_number: false` and `highlight.wrap: false`

assets/css/_common/scaffolding/index.scss

@@ -10,3 +10,4 @@
 @import 'tags';
 @import 'pagination';
 @import 'comments';
+@import 'fontawesome';

assets/css/_common/scaffolding/tags/mermaid.scss

@@ -1,4 +1,4 @@
-@if $cfg_mermaid_enable {
+@if $mermaid_enable {
   .mermaid {
     margin-bottom: 20px;
     text-align: center;

assets/css/_common/scaffolding/tags/note.scss

@@ -1,9 +1,9 @@
 //@use 'sass:map';
 
-@if $cfg_note_style != 'disabled' {
+@if $note_style != 'disabled' {
   .post-body .note {
-    $note-icons : $cfg_note_icons;
+    $note-icons : $note_icons;
-    $note-style : $cfg_note_style;
+    $note-style : $note_style;
 
     border-radius: $note-border-radius;
     margin-bottom: 20px;
@@ -68,7 +68,6 @@
       &.#{$type} {
         @if $note-style == 'flat' {
           background: map-get($note-bg, $type);
-          @if $cfg_darkmode {
             @media (prefers-color-scheme: dark) {
               background: mix(map-get($note-bg, $type), $body-bg-color-dark, 10%);
             }

assets/css/_common/scaffolding/tags/pdf.scss

@@ -1,7 +1,7 @@
-@if $cfg_pdf_enable {
+@if $pdf_enable {
   .pdfobject-container {
     iframe, embed {
-      height: convert($cfg_pdf_height);
+      height: $pdf_height;
       width: 100%;
     }
   }

assets/css/_common/scaffolding/tags/tabs.scss

@@ -42,7 +42,6 @@
         border-radius: $tbr;
       }
 
-      @if $cfg_tabs_trans_tabs {
         transition: all $transition-ease-out;
       }
 
@@ -57,7 +56,6 @@
           width: (18em / 14);
         }
 
-        @if $cfg_tabs_trans_labels {
           transition: all $transition-ease-out;
         }
       }

assets/css/_common/scaffolding/toggles.scss

@@ -18,9 +18,7 @@
 }
 
 .toggle.toggle-arrow {
-  @include toggle-arrow($cfg_sidebar_position);
 }
 
 .toggle.toggle-close {
-  @include toggle-close($cfg_sidebar_position);
 }

assets/css/_mixins.scss

@@ -0,0 +1,243 @@
+@mixin mobile-smallest() {
+  @media (max-width: 413px) {
+    @content;;
+  }
+}
+
+@mixin mobile-small() {
+  @media (max-width: 567px) {
+    @content;
+  }
+}
+
+@mixin mobile() {
+  @media (max-width: 767px) {
+    @content;
+  }
+}
+
+@mixin tablet-mobile() {
+  @media (max-width: 991px) {
+    @content;
+  }
+}
+
+@mixin tablet-desktop() {
+  @media (min-width: 768px) {
+    @content;
+  }
+}
+
+@mixin tablet() {
+  @media (min-width: 768px) and (max-width: 991px) {
+    @content;
+  }
+}
+
+@mixin desktop() {
+  @media (min-width: 992px) {
+    @content;
+  }
+}
+
+@mixin desktop-large() {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+
+@mixin desktop-largest() {
+  @media (min-width: 1600px) {
+    @content;
+  }
+}
+
+@mixin word-wrap() {
+  overflow-wrap: break-word;
+}
+
+@mixin disable-user-select() {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+@mixin sidebar-inline-links-item() {
+  margin: 5px 0 0;
+
+  a {
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@mixin flex-wrap() {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+@mixin flex-column() {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+@mixin post-card() {
+  background: var(--card-bg-color);
+  border-left: 3px solid $red;
+  margin: $post-card-margin;
+}
+
+@mixin font-family-icons($icon : '') {
+  @if $icon {
+    content: $icon;
+  }
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}
+
+@mixin main-container() {
+  margin: 0 auto;
+  width: $content-desktop;
+
+  @include desktop-large() {
+    width: $content-desktop-large;
+  }
+
+  @include desktop-largest() {
+    width: $content-desktop-largest;
+  }
+}
+
+@function sidebar-toggle-alignment($reverse) {
+  $condition : $sidebar_position == 'right';
+  @if ($scheme == 'Muse') or ($scheme == 'Mist') {
+    $condition : $condition == $reverse;
+  }
+  @return if($condition, ('left' 'right'), ('right' 'left'));
+}
+
+@mixin sidebar-toggle-position($reverse) {
+  $alignment : nth(sidebar-toggle-alignment($reverse), 1);
+  #{$alignment}: $b2t-position-right;
+  @include tablet-mobile() {
+    #{$alignment}: $b2t-position-right-mobile;
+  }
+}
+
+@mixin sidebar-toggle() {
+  background: $b2t-bg-color;
+  cursor: pointer;
+  opacity: $b2t-opacity;
+  position: fixed;
+  z-index: $zindex-3;
+  @include sidebar-toggle-position(false);
+
+  &:hover {
+    opacity: $b2t-opacity-hover;
+  }
+
+  @include tablet-mobile() {
+    opacity: $b2t-opacity-hover;
+  }
+}
+
+@mixin round-icon($diameter) {
+  border-radius: 50%;
+  content: ' ';
+  height: $diameter;
+  width: $diameter;
+}
+
+@mixin toggle-arrow($position) {
+  @if $position == 'right' {
+    .toggle-line:first-child {
+      top: 2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+
+    .toggle-line:last-child {
+      top: -2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+  } @else {
+    .toggle-line:first-child {
+      left: 50%;
+      top: 2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+
+    .toggle-line:last-child {
+      left: 50%;
+      top: -2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+  }
+}
+
+@mixin toggle-close($position) {
+  .toggle-line:nth-child(2) {
+    opacity: 0;
+  }
+
+  @if $position == 'right' {
+    .toggle-line:first-child {
+      top: 5px;
+      transform: rotate(-45deg);
+    }
+
+    .toggle-line:last-child {
+      top: -5px;
+      transform: rotate(45deg);
+    }
+  } @else {
+    .toggle-line:first-child {
+      top: 5px;
+      transform: rotate(45deg);
+    }
+
+    .toggle-line:last-child {
+      top: -5px;
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+@mixin site-nav-hide-by-default() {
+  --scroll-height: 0;
+  height: 0;
+  overflow: hidden;
+  transition: height $transition-ease;
+
+  body:not(.site-nav-on) & .animated {
+    animation: none;
+  }
+
+  body.site-nav-on & {
+    height: var(--scroll-height);
+  }
+}
+
+@mixin button($color) {
+  background: transparent;
+  color: $color;
+  cursor: pointer;
+  line-height: 2;
+  padding: 0 15px;
+
+  &:hover {
+    background: $color;
+    color: white;
+  }
+}

assets/css/_schemes/Gemini/index.scss

@@ -0,0 +1,130 @@
+@import '../Pisces/_layout';
+@import '../Pisces/_header';
+@import '../Pisces/_menu';
+@import '../Pisces/_sub-menu';
+@import '../Pisces/_sidebar';
+
+// ==================================================
+// Rewrite _layout.styl
+// ==================================================
+// Sidebar padding used as main desktop content padding for sidebar padding and post blocks padding too.
+
+// In `source/css/_variables/Pisces.styl` there are variable for main offset:
+// $sidebar-offset                   : 12px;
+// This value alse can be changed in main NexT config as `sidebar: offset: 12` option.
+
+// In `source/css/_variables/base.styl` there are variables for other resolutions:
+// $content-tablet-padding           : 10px;
+// $content-mobile-padding           : 8px;
+// P.S. If u want to change this paddings u may set this variables into `custom_file_path.variable` (in theme _config.yml).
+
+// So, it will 12px in Desktop, 10px in Tablets and 8px in Mobiles for all possible paddings.
+
+// ==================================================
+// Desktop layout styles.
+// ==================================================
+// Post blocks.
+.main-inner > {
+  .sub-menu, .post-block, .tabs-comment, .comments, .post-comments, .pagination {
+    background: var(--content-bg-color);
+    border-radius: $border-radius-inner;
+    box-shadow: $box-shadow-inner;
+
+    &:not(:first-child):not(.sub-menu) {
+      border-radius: $border-radius;
+      box-shadow: $box-shadow;
+      margin-top: $sidebar-offset;
+
+      @include tablet() {
+        margin-top: $content-tablet-padding;
+      }
+
+      @include mobile() {
+        margin-top: $content-mobile-padding;
+      }
+    }
+  }
+}
+
+// Post & Comments blocks.
+.post-block, .comments, .post-comments {
+  padding: $content-desktop-padding;
+}
+
+// Post delimiters.
+.post-eof {
+  display: none;
+}
+
+// Pagination.
+.pagination {
+  border-top: initial;
+  padding: 10px 0;
+}
+
+// ==================================================
+// Headers.
+// ==================================================
+.post-body {
+  h1, h2 {
+    border-bottom: 1px solid $body-bg-color;
+  }
+
+  h3 {
+    border-bottom: 1px dotted $body-bg-color;
+  }
+}
+
+// ==================================================
+// > 768px & < 991px
+// ==================================================
+@include tablet() {
+  // Posts in blocks.
+  .main-inner {
+    padding: $content-tablet-padding;
+  }
+
+  .posts-expand {
+    // Components inside Posts.
+    .post-button {
+      margin-top: ($content-tablet-padding * 2);
+    }
+  }
+
+  .post-block {
+    // Inside posts blocks content padding (default 40px).
+    padding: ($content-tablet-padding * 2);
+  }
+
+  .comments, .post-comments {
+    padding: $content-tablet-padding ($content-tablet-padding * 2);
+    // padding: initial;
+    // padding-top: $content-tablet-padding;
+  }
+}
+
+// ==================================================
+// < 767px
+// ==================================================
+@include mobile() {
+  // Posts in blocks.
+  .main-inner {
+    padding: $content-mobile-padding;
+  }
+
+  .posts-expand {
+    // Components inside Posts.
+    .post-button {
+      margin: $sidebar-offset 0;
+    }
+  }
+
+  .post-block {
+    // Inside posts blocks content padding (default 40px).
+    padding: $sidebar-offset;
+  }
+
+  .comments, .post-comments {
+    padding: 10px $sidebar-offset;
+  }
+}

assets/css/_schemes/Mist/_header.scss

@@ -0,0 +1,56 @@
+// Header
+// --------------------------------------------------
+.header-inner {
+  align-items: center;
+  display: flex;
+  padding: 20px 0;
+
+  @include mobile() {
+    display: block;
+    padding: 10px 0;
+  }
+}
+
+.site-meta {
+  line-height: normal;
+
+  .brand {
+    padding: 2px 1px;
+
+    @include mobile() {
+      display: block;
+    }
+  }
+
+  .site-title {
+    font-weight: bolder;
+  }
+}
+
+.logo-line {
+  background: var(--brand-color);
+  display: block;
+  height: 2px;
+  margin: 0 auto;
+  width: 75%;
+
+  @include mobile() {
+    display: none;
+  }
+}
+
+.use-motion {
+  .logo-line:first-of-type {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+
+  .logo-line:last-of-type {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+}
+
+.site-subtitle {
+  display: none;
+}

assets/css/_schemes/Mist/_layout.scss

@@ -0,0 +1,43 @@
+// Tags
+// --------------------------------------------------
+hr {
+  height: 2px;
+  margin: 20px 0;
+}
+
+// Components
+// --------------------------------------------------
+.btn {
+  padding: 0 10px;
+}
+
+.headband {
+  display: none;
+}
+
+// Pagination
+// --------------------------------------------------
+.pagination {
+  text-align: left;
+
+  @include mobile() {
+    margin: 80px 0 0;
+    text-align: center;
+  }
+}
+
+// Footer
+// --------------------------------------------------
+.footer {
+  background: var(--content-bg-color);
+  color: var(--text-color);
+  padding: 10px 0;
+}
+
+.footer-inner {
+  text-align: left;
+
+  @include mobile() {
+    text-align: center;
+  }
+}

assets/css/_schemes/Mist/_menu.scss

@@ -0,0 +1,45 @@
+// Menu
+// --------------------------------------------------
+.site-nav {
+  flex-grow: 1;
+
+  @include mobile() {
+    padding: 0 10px 0;
+  }
+}
+
+.main-menu {
+  @include mobile() {
+    padding-top: 10px;
+  }
+}
+
+.menu {
+  padding: 0;
+
+  .menu-item {
+    margin: 0;
+
+    @include mobile() {
+      margin-top: 5px;
+    }
+
+    a {
+      border-radius: 2px;
+      padding: 0 10px;
+      transition-property: background;
+
+      @include mobile() {
+        text-align: left;
+      }
+    }
+
+    .badge {
+      background: white;
+      border-radius: 10px;
+      color: $black-light;
+      padding: 1px 4px;
+      text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
+    }
+  }
+}

assets/css/_schemes/Mist/_posts-expand.scss

@@ -0,0 +1,72 @@
+// Post Expand
+// --------------------------------------------------
+.posts-expand {
+  &.index {
+    .post-header {
+      text-align: left;
+
+      @include mobile() {
+        text-align: center;
+      }
+    }
+
+    .post-meta-container {
+      margin-top: 5px;
+    }
+
+    .post-meta {
+      justify-content: flex-start;
+
+      @include mobile() {
+        justify-content: center;
+      }
+    }
+  }
+
+  .post-eof {
+    display: none;
+  }
+
+  .post-block:not(:first-of-type) {
+    margin-top: 120px;
+  }
+
+  .post-header {
+    margin-bottom: 20px;
+  }
+
+  .post-tags {
+    text-align: left;
+
+    a {
+      background: var(--content-bg-color);
+      border-bottom: 0;
+      padding: 1px 5px;
+
+      &:hover {
+        background: var(--menu-item-bg-color);
+      }
+    }
+  }
+
+  .post-nav {
+    margin-top: 40px;
+  }
+}
+
+.post-button {
+  margin-top: 20px;
+  text-align: left;
+
+  .btn {
+    background: none;
+    border: 0;
+    border-bottom: 2px solid var(--btn-default-border-color);
+    padding: 0;
+    transition-property: border;
+
+    &:hover {
+      border-bottom-color: var(--btn-default-hover-border-color);
+    }
+  }
+}

assets/css/_schemes/Mist/index.scss

@@ -0,0 +1,10 @@
+//
+// Mist scheme
+// ==================================================
+@import '_layout';
+@import '_header';
+@import '_menu';
+@import '_posts-expand';
+@import '../Muse/_layout';
+@import '../Muse/_sidebar';
+@import '../Muse/_sub-menu';

assets/css/_schemes/Muse/_header.scss

@@ -0,0 +1,18 @@
+.custom-logo-image {
+  background: white;
+  margin: 0 auto 10px;
+  max-width: 150px;
+  padding: 5px;
+}
+
+.brand {
+  background: var(--btn-default-bg);
+}
+
+.header-inner {
+  padding-top: 100px;
+
+  @include mobile() {
+    padding-top: 50px;
+  }
+}

assets/css/_schemes/Muse/_layout.scss

@@ -0,0 +1,28 @@
+.main-inner {
+  @include main-container();
+
+  @include mobile() {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+.header-inner, .main-inner, .footer-inner {
+  @include mobile() {
+    width: auto;
+  }
+}
+
+// Page - Container
+// --------------------------------------------------
+.main-inner {
+  padding-bottom: $content-padding-bottom;
+}
+
+.post-block:first-of-type {
+  padding-top: $posts-first-padding;
+
+  @include mobile() {
+    padding-top: $posts-first-padding-mobile;
+  }
+}

assets/css/_schemes/Muse/_menu.scss

@@ -0,0 +1,56 @@
+.site-nav {
+  @include mobile() {
+    padding-top: 30px;
+  }
+}
+
+.main-menu {
+  @include mobile() {
+    border-bottom: 1px solid $grey-lighter;
+    border-top: 1px solid $grey-lighter;
+  }
+}
+
+.menu {
+  @include mobile() {
+    text-align: left;
+  }
+}
+
+.menu .menu-item {
+  @include mobile() {
+    margin: 0 10px;
+  }
+
+  a {
+    border-bottom: 1px solid transparent;
+
+    @include mobile() {
+      padding: 5px 10px;
+    }
+
+    &:hover, &.menu-item-active {
+      background: transparent;
+      border-bottom: 1px solid var(--link-hover-color);
+
+      @include mobile() {
+        border-bottom: 1px dotted $grey-lighter;
+      }
+    }
+  }
+
+  .fa, .fab, .far, .fas {
+    @include tablet-desktop() {
+      display: block;
+      line-height: 2;
+      margin-right: 0;
+      width: 100%;
+    }
+  }
+
+  .badge {
+    background: $gainsboro;
+    color: $black-light;
+    padding: 1px 4px;
+  }
+}

assets/css/_schemes/Muse/_sidebar.scss

@@ -0,0 +1,94 @@
+@if $sidebar_position == 'right' {
+  .sidebar-active {
+    @include desktop() {
+      padding-right: $sidebar-desktop;
+    }
+  }
+
+  .sidebar {
+    right: 0 - $sidebar-desktop;
+
+    .sidebar-active & {
+      right: 0;
+    }
+  }
+} @else {
+  .sidebar-active {
+    @include desktop() {
+      padding-left: $sidebar-desktop;
+    }
+  }
+
+  .sidebar {
+    left: 0 - $sidebar-desktop;
+
+    .sidebar-active & {
+      left: 0;
+    }
+  }
+}
+
+.sidebar {
+  background: $black-deep;
+  bottom: 0;
+  @if not $back2top_sidebar {
+    box-shadow: inset 0 2px 6px black;
+  }
+  position: fixed;
+  top: 0;
+  transition: all $transition-ease-out;
+  width: $sidebar-desktop;
+  z-index: $zindex-2;
+
+  a {
+    border-bottom-color: $black-light;
+    color: $grey-dark;
+
+    &:hover {
+      border-bottom-color: $gainsboro;
+      color: $gainsboro;
+    }
+  }
+}
+
+.links-of-author, .links-of-social {
+  &:not(:first-child) {
+    margin-top: 15px;
+  }
+
+  a {
+    border-bottom-color: $black-light;
+    display: inline-block;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    vertical-align: middle;
+
+    @if $social_icons_transition {
+      transition: all $transition-ease;
+    }
+
+    &::before {
+      background: rgb(random(255), random(255), random(255));
+      display: inline-block;
+      margin-right: 3px;
+      transform: translateY(-2px);
+      @include round-icon(4px);
+    }
+  }
+}
+
+.links-of-blogroll-item {
+  @if $links_settings_layout == 'inline' {
+    display: inline-block;
+  }
+  padding: 2px 10px;
+
+  a {
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

assets/css/_schemes/Muse/_sub-menu.scss

@@ -0,0 +1,7 @@
+.sub-menu {
+  margin: 10px 0;
+
+  .menu-item {
+    display: inline-block;
+  }
+}

assets/css/_schemes/Muse/index.scss

@@ -0,0 +1,5 @@
+@import '_layout';
+@import '_header';
+@import '_menu';
+@import '_sub-menu';
+@import '_sidebar';

assets/css/_schemes/Pisces/_header.scss

@@ -0,0 +1,35 @@
+.site-brand-container {
+  background: var(--theme-color);
+
+  .site-nav-on & {
+    @include tablet-mobile() {
+      box-shadow: 0 0 16px rgba(0, 0, 0, .5);
+    }
+  }
+}
+
+.site-meta {
+  padding: 20px 0;
+}
+
+.brand {
+  padding: 0;
+}
+
+.site-subtitle {
+  margin: 10px 10px 0;
+}
+
+.site-nav-toggle, .site-nav-right {
+  @include tablet() {
+    @include flex-column();
+  }
+
+  .toggle {
+    color: white;
+
+    .toggle-line {
+      background: white;
+    }
+  }
+}

assets/css/_schemes/Pisces/_layout.scss

@@ -0,0 +1,54 @@
+.header-inner {
+  background: var(--content-bg-color);
+  border-radius: $border-radius-inner;
+  box-shadow: $box-shadow-inner;
+  width: $sidebar-desktop;
+
+  @include tablet-mobile() {
+    border-radius: initial;
+    width: auto;
+  }
+}
+
+.main {
+  // Make sure that .header and .main-inner are the same height
+  // Required for .sidebar `position: sticky;`
+  align-items: stretch;
+  display: flex;
+  justify-content: space-between;
+  @include main-container();
+
+  @if $sidebar_position == 'right' {
+    flex-direction: row-reverse;
+  }
+
+  @include tablet-mobile() {
+    display: block;
+    width: auto;
+  }
+}
+
+.main-inner {
+  border-radius: $border-radius-inner;
+  box-sizing: border-box;
+  width: $content-wrap;
+
+  @include tablet-mobile() {
+    border-radius: initial;
+    width: 100%;
+  }
+}
+
+.footer-inner {
+  @if $sidebar_position == 'right' {
+    padding-right: $sidebar-desktop + $sidebar-offset;
+  } @else {
+    padding-left: $sidebar-desktop + $sidebar-offset;
+  }
+
+  @include tablet-mobile() {
+    padding-left: 0;
+    padding-right: 0;
+    width: auto;
+  }
+}

assets/css/_schemes/Pisces/_menu.scss

@@ -0,0 +1,46 @@
+.site-nav {
+  @include tablet() {
+    @include site-nav-hide-by-default();
+  }
+}
+
+.menu .menu-item {
+  display: block;
+  margin: 0;
+
+  a {
+    padding: 5px 20px;
+    position: relative;
+    text-align: left;
+    transition-property: background-color;
+  }
+
+  @include tablet-mobile() {
+    &.menu-item-search {
+      display: none;
+    }
+  }
+
+  .badge {
+    background: $grey-light;
+    border-radius: 10px;
+    color: var(--content-bg-color);
+    float: right;
+    padding: 2px 5px;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
+  }
+}
+
+@if not $menu_settings_badges {
+  .main-menu .menu-item-active::after {
+    background: $grey;
+    border-radius: 50%;
+    content: ' ';
+    height: 6px;
+    margin-top: -3px;
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    width: 6px;
+  }
+}

assets/css/_schemes/Pisces/_sidebar.scss

@@ -0,0 +1,92 @@
+.sidebar {
+  margin-top: $sidebar-offset;
+  // https://caniuse.com/css-sticky
+  position: -webkit-sticky;
+  position: sticky;
+  top: $sidebar-offset;
+  width: $sidebar-desktop;
+
+  @include tablet-mobile() {
+    display: none;
+  }
+
+  @if $motion_enable and $motion_transition_sidebar {
+    visibility: hidden;
+  }
+}
+
+.sidebar-toggle {
+  display: none;
+}
+
+.sidebar-inner {
+  background: var(--content-bg-color);
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  box-sizing: border-box;
+  color: var(--text-color);
+}
+
+.site-state-item {
+  padding: 0 10px;
+}
+
+.sidebar .sidebar-button {
+  border-bottom: 1px dotted $grey-light;
+  border-top: 1px dotted $grey-light;
+
+  button {
+    border: 0;
+    color: $orange;
+    display: block;
+    width: 100%;
+
+    &:hover {
+      background: none;
+      border: 0;
+      color: darken($orange, 20%);
+    }
+  }
+}
+
+.links-of-author, .links-of-social {
+  @include flex-wrap();
+}
+
+.links-of-author-item, .links-of-social-item {
+  @include sidebar-inline-links-item();
+
+  @if not $social_icons_only {
+    width: 50%;
+  }
+
+  a {
+    border-bottom: 0;
+    border-radius: 4px;
+    display: block;
+
+    &:hover {
+      background: var(--body-bg-color);
+    }
+  }
+}
+
+.links-of-blogroll-item {
+  @if $links_settings_layout == 'inline' {
+    display: inline-block;
+    max-width: 100%;
+    @include sidebar-inline-links-item();
+  }
+}
+
+@if $back2top_sidebar {
+  // Only when back2top.sidebar is true, apply the following styles
+  .back-to-top {
+    background: var(--body-bg-color);
+    margin: 8px - $sidebar-offset -10px -18px;
+
+    &.back-to-top-on {
+      margin-top: 16px;
+    }
+  }
+}

assets/css/_schemes/Pisces/_sub-menu.scss

@@ -0,0 +1,28 @@
+.sub-menu {
+  margin: 0;
+  padding: 6px 0;
+
+  .menu-item {
+    display: inline-block;
+
+    a {
+      background: transparent;
+      margin: 5px 10px;
+      padding: initial;
+
+      &:hover {
+        background: transparent;
+        color: $sidebar-highlight;
+      }
+    }
+  }
+
+  .menu-item-active {
+    border-bottom-color: $sidebar-highlight;
+    color: $sidebar-highlight;
+
+    &:hover {
+      border-bottom-color: $sidebar-highlight;
+    }
+  }
+}

assets/css/_schemes/Pisces/index.scss

@@ -0,0 +1,30 @@
+@import '_layout';
+@import '_header';
+@import '_menu';
+@import '_sub-menu';
+@import '_sidebar';
+
+.main-inner {
+  background: var(--content-bg-color);
+  box-shadow: $box-shadow-inner;
+  padding: $content-desktop-padding;
+
+  @include tablet-mobile() {
+    padding: 20px;
+  }
+}
+
+// Sub-menu(s).
+.sub-menu {
+  border-bottom: 1px solid $table-border-color;
+}
+
+.post-block:first-of-type {
+  padding-top: 40px;
+}
+
+.pagination {
+  @include mobile() {
+    margin-bottom: 10px;
+  }
+}

assets/css/_variables/Mist.scss

@@ -0,0 +1,25 @@
+// Variables of Mist scheme
+// ==================================================
+
+@import 'Muse';
+
+$content-padding-bottom     : 80px;
+$posts-first-padding        : 80px;
+$posts-first-padding-mobile : 60px;
+
+$link-decoration-color   : $grey-light;
+$content-bg-color        : $whitesmoke;
+$menu-item-bg-color      : $grey-lighter;
+
+$head-bg                 : var(--content-bg-color);
+$brand-color             : $black-deep;
+$brand-hover-color       : $brand-color;
+
+$posts-collapse-left     : 0;
+
+$btn-default-bg                 : transparent;
+$btn-default-color              : var(--link-color);
+$btn-default-hover-bg           : transparent;
+$btn-default-border-color       : var(--link-color);
+$btn-default-hover-color        : var(--link-hover-color);
+$btn-default-hover-border-color : var(--link-hover-color);

assets/css/_variables/Muse.scss

@@ -0,0 +1,9 @@
+// Variables of Muse scheme
+// ==================================================
+
+$sidebar-width           : if(type-of($sidebar_width) == number, $sidebar_width, 320);
+$sidebar-desktop         : $sidebar-width * 1px;
+
+$content-padding-bottom     : 60px;
+$posts-first-padding        : 70px;
+$posts-first-padding-mobile : 35px;

assets/css/_variables/Pisces.scss

@@ -5,7 +5,7 @@
 // --------------------------------------------------
 $body-bg-color                : #f5f7f9;
 
-$sidebar-width                : if(type-of($cfg_sidebar_width) == number, $cfg_sidebar_width, 240);
+$sidebar-width                : if(type-of($sidebar_width) == number, $sidebar_width, 240);
 $sidebar-desktop              : $sidebar-width * 1px;
 $content-wrap                 : calc(100% - #{$sidebar-width + $sidebar-offset});
 

assets/css/_variables/base.scss

@@ -68,14 +68,17 @@ $card-bg-color-dark           : $black-light;
 $menu-item-bg-color           : $whitesmoke;
 $menu-item-bg-color-dark      : $black-light;
 
-$theme-color                  : convert($cfg_thm_cor_light);
+// TODO why there need convert
-$theme-color-dark             : convert($cfg_thm_cor_dark);
+
+$theme-color                  : $theme_color_light;
+$theme-color-dark             : $theme_color_dark;
 
 // Typography
 // Font, line-height, and elements colors.
 // --------------------------------------------------
 @function get-font-family($config) {
-  /* $custom-family : hexo-config('font.' + $config + '.family'); */
+  //TODO find the way daymatic variable
+  $custom-family: $config;
   $custom-family: 'Microsoft YaHei';
   @return if(type-of($custom-family) == string, unquote($custom-family), null);
 }
@@ -110,7 +113,6 @@ $font-family-monospace    : consolas, Menlo, monospace, $font-family-chinese;
 
 
 // Font size
-$font-size-base           : if(($cfg_font_enable and type-of($cfg_font_global_size) == number), $cfg_font_global_size * 1em, 1em);
 $font-size-smallest       : .75em;
 $font-size-smaller        : .8125em;
 $font-size-small          : .875em;
@@ -122,7 +124,6 @@ $font-size-largest        : 1.5em;
 
 // Headings font size
 $font-size-headings-step  : .125em;
-$font-size-headings-base  : if(($cfg_font_enable and type-of($cfg_font_headings_size) == number), $cfg_font_headings_size * 1em, 1.625em);
 
 
 // Global line height
@@ -156,13 +157,9 @@ $table-row-hover-bg-color-dark  : #363636;
 // --------------------------------------------------
 $code-font-family               : $font-family-monospace;
 
-$highlight-background        : $cfg_hl_light_bg;
-$highlight-foreground        : $cfg_hl_light_fg;
 $highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
 $highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);
 
-$highlight-background-dark        : $cfg_hl_dark_bg;
-$highlight-foreground-dark        : $cfg_hl_dark_bg;
 $highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
 $highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);
 
@@ -229,7 +226,6 @@ $brand-hover-color              : white;
 $brand-color-dark               : $grey-lighter;
 $brand-hover-color-dark         : $grey-lighter;
 
-$font-size-title                : if(($cfg_font_enable and type-of($cfg_font_title_size) == number), $cfg_font_title_size * 1em, 1.375em);
 $font-size-subtitle             : $font-size-smaller;
 $subtitle-color                 : $grey-dark;
 $site-subtitle-color            : $grey-dark;
@@ -253,8 +249,6 @@ $tag-cloud-end-dark   : #eee;
 // Variables for sidebar section elements.
 // --------------------------------------------------
 
-$sidebar-padding                      : if(type-of($cfg_sidebar_padding) == number, $cfg_sidebar_padding * 1px, 18px);
-$sidebar-offset                       : if(type-of($cfg_sidebar_offset) == number, $cfg_sidebar_offset * 1px, 12px);
 $sidebar-nav-color                    : $grey-dim;
 $sidebar-nav-hover-color              : $whitesmoke;
 $sidebar-highlight                    : $blue-bright;
@@ -294,13 +288,11 @@ $b2t-bg-color                 : $black-deep;
 $post-eof-margin-top          : 80px; //  or 160px for more white space;
 $post-eof-margin-bottom       : 60px; //  or 120px for less white space;
 
-$post-card-margin             : 1em 0 0;
 
 
 // Note colors
 // --------------------------------------------------
 // Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
-$lbg : if(type-of($cfg_note_light_bg_offset) == number, $cfg_note_light_bg_offset * 1%, 0);
 $note-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';
 
 $note-border-radius : 3px;

assets/css/main.scss

@@ -1,19 +1,151 @@
 // CSS Style Guide: https://codeguide.co/#css
+// All variables from site's config content.
+{{- $P := .Site.Params }}
+// Base
+$scheme: {{ $P.scheme }};
+$darkmode: {{ $P.darkmode }};
 
+$body_scrollbar_overlay: {{ $P.bodyScrollbar.overlay }};
+$body_scrollbar_stable: {{ $P.bodyScrollbar.stable }};
+$mermaid_enable: {{ $P.mermaid.enable }};
+$mobile_layout_economy: {{ $P.mobileLayoutEconomy }};
+$theme_color_dark: {{ $P.themeColor.dark }};
+$theme_color_light: {{ $P.themeColor.light }};
 
-//$scheme : $cfg_scheme;
+// Header
+$bookmark_color: {{ $P.bookmark.color }};
+$bookmark_enable: {{ $P.bookmark.enable }};
+$github_banner_enable: {{ $P.githubBanner.enable }};
+$menu_settings_badges: {{ $P.menuSets.badges }};
 
+// Footer
+$footer_icon_color: {{ $P.footer.icon.color }};
+$footer_icon_animated: {{ $P.footer.icon.animated }};
+$footer_beian_enable: {{ $P.footer.beian.enable }};
+$footer_vendors_enable: {{ isset $P.footer "vendors" }};
 
+// Counter
+$busuanzi_enable: {{ $P.busuanzi.enable }};
+$busuanzi_visitors: {{ $P.busuanzi.visitors }};
+$busuanzi_views: {{ $P.busuanzi.views }};
+$busuanzi_post_views: {{ $P.busuanzi.postViews }};
+
+// Font
+$font_enable: {{ $P.font.enable }};
+$font_global_size: {{ default $P.font.global.size 1 }};
+$font_headings_size: {{ default $P.font.headings.size 1.625 }};
+$font_title_size: {{ default $P.font.title.size 1.375 }};
+
+// Code & Code blocks
+// TODO find the configure variable
+$highlight_dark_background: #000;
+$highlight_dark_foreground: #222;
+$highlight_light_background: #000;
+$highlight_light_foreground: #222;
+
+$codeblock_copy_btn_style: {{ $P.codeblock.copyBtn.style }};
+
+// Sidebar
+$sidebar_offset: {{ $P.sidebar.offset }};
+$sidebar_padding: {{ $P.sidebar.padding }};
+$sidebar_position: {{ $P.sidebar.position }};
+$sidebar_width: {{ $P.sidebar.width }};
+
+$motion_enable: {{ $P.motion.enable }};
+$motion_transition_sidebar: {{ $P.motion.transition.sidebar }};
+
+$back2top_enable: {{ $P.backTop.enable }};
+$back2top_scrollpercent: {{ $P.backTop.scrollpercent }};
+$back2top_sidebar: {{ $P.backTop.sidebar }};
+
+$avatar_rotated: {{ $P.avatar.rotated }};
+$avatar_rounded: {{ $P.avatar.rounded }};
+$avatar_rounded: {{ $P.avatar.rounded }};
+$site_state: {{ $P.siteState }};
+$social_icons_only: {{ $P.socialIcons.iconsOnly }};
+$social_icons_transition: {{ $P.socialIcons.transition }};
+$links_settings_layout: {{ $P.linksSets.layout }};
+$toc_enable: {{ $P.toc.enable }};
+$toc_expand_all: {{ $P.toc.expandAll }};
+$toc_wrap: {{ $P.toc.wrap }};
+
+// Posts
+$creative_commons_post: {{ $P.creativeCommons.post }};
+$follow_me: {{ isset $P "followme" }};
+$motion_trans_coll_header: {{ $P.motion.transition.collHeader }};
+$motion_trans_post_block: {{ $P.motion.transition.postBlock }};
+$motion_trans_post_body: {{ $P.motion.transition.postBody }};
+$motion_trans_post_header: {{ $P.motion.transition.postHeader }};
+$post_edit_enable: {{ $P.postEdit.enable }};
+$post_meta_item_text: {{ $P.postMeta.itemText }};
+$reward_settings_animation: {{ $P.rewardSets.animation }};
+$post_end_line_tip: "{{ $P.postFooter.endLineTip }}";
+$post_end_tag_icon: {{ $P.postFooter.tagIcon }};
+
+// TODO find the paramters
+$text_align_desktop: justify;
+$text_align_mobile: justify;
+
+// Note
+$note_icons: {{ $P.note.icons }};
+$note_light_bg_offset: {{ $P.note.lightBgOffset }};
+$note_style: {{ $P.note.style }};
+
+// Tabs
+$tabs_transition_labels: {{ $P.tabs.transition.labels }};
+$tabs_transition_tabs: {{ $P.tabs.transition.tabs }};
+
+// Reading progress bar
+$reading_progress_start: {{ $P.readingProgress.start }}; 
+$reading_progress_color: {{ $P.readingProgress.color }}; 
+$reading_progress_enable: {{ $P.readingProgress.enable }}; 
+$reading_progress_height: {{ $P.readingProgress.height }}; 
+$reading_progress_position: {{ $P.readingProgress.position }}; 
+$reading_progress_reversed: {{ $P.readingProgress.reversed }}; 
+
+// Thirdparty
+$math_mathjax_enable: {{ $P.math.mathjax.enable }};
+$related_posts_enable: {{ $P.relatedPosts.enable }};
+$pdf_enable: {{ $P.pdf.enable }};
+$pdf_height: {{ $P.pdf.height }};
+
+// Search engine
+$algolia_search_enable: {{ $P.algoliaSearch.enable }};
+$local_search_enable: {{ $P.localSearch.enable }};
+
+// Online IM
+$gitalk_enable: {{ $P.gitalk.enable }};
+$gitter_enable: {{ $P.gitter.enable }};
+
+// Comment
+$disqusjs_enable: {{ $P.disqusjs.enable }};
+$livere_enable: {{ $P.livere.enable }};
+$utterances_enable: {{ $P.utterances.enable }};
+$waline_enable: {{ $P.waline.enable }};
+{{- with .Site.Params.comments }}
+{{ $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }}
+$two_comments_enable: {{ $tce }};
+{{- if $tce }}
+{{- $sortNav := sort .nav "weight" }}
+$two_comments_actived: {{ .active }};
+$first_comment_color: {{ (index $sortNav 0).color }};
+$first_comment_name: {{ lower (index $sortNav 0).name }};
+$second_comment_color: {{ (index $sortNav 1).color }};
+$second_comment_name: {{ lower (index $sortNav 1).name }};
+{{- end }}
+{{- end }}
+
+// 
 // Variables Layer
 // --------------------------------------------------
 @import '_variables/base';
-//@import '"_variables/" + theme.scheme';
+// TODO
-@import "_variables/Gemini";
 // @import 'theme.injects.variable';
 
 // Mixins Layer
 // --------------------------------------------------
 @import '_mixins';
+// TODO
 // @import 'theme.injects.mixin';
 
 // Dark mode colors
@@ -30,14 +162,13 @@
 @import '_common/outline';
 
 // Components
-//@import '_common/components';
 
 
 // Schemes Layer
 // --------------------------------------------------
-// @import '"_schemes/" + theme.scheme';
 
 
 // Custom Layer
+// TODO 
 // --------------------------------------------------
 // @import 'theme.injects.style';

assets/js/bookmark.js

@@ -0,0 +1,56 @@
+/* global CONFIG */
+
+document.addEventListener('DOMContentLoaded', () => {
+  'use strict';
+
+  const doSaveScroll = () => {
+    localStorage.setItem('bookmark' + location.pathname, window.scrollY);
+  };
+
+  const scrollToMark = () => {
+    let top = localStorage.getItem('bookmark' + location.pathname);
+    top = parseInt(top, 10);
+    // If the page opens with a specific hash, just jump out
+    if (!isNaN(top) && location.hash === '') {
+      // Auto scroll to the position
+      window.anime({
+        targets  : document.scrollingElement,
+        duration : 200,
+        easing   : 'linear',
+        scrollTop: top
+      });
+    }
+  };
+  // Register everything
+  const init = function(trigger) {
+    // Create a link element
+    const link = document.querySelector('.book-mark-link');
+    // Scroll event
+    window.addEventListener('scroll', () => link.classList.toggle('book-mark-link-fixed', window.scrollY === 0), { passive: true });
+    // Register beforeunload event when the trigger is auto
+    if (trigger === 'auto') {
+      // Register beforeunload event
+      window.addEventListener('beforeunload', doSaveScroll);
+      document.addEventListener('pjax:send', doSaveScroll);
+    }
+    // Save the position by clicking the icon
+    link.addEventListener('click', () => {
+      doSaveScroll();
+      window.anime({
+        targets : link,
+        duration: 200,
+        easing  : 'linear',
+        top     : -30,
+        complete: () => {
+          setTimeout(() => {
+            link.style.top = '';
+          }, 400);
+        }
+      });
+    });
+    scrollToMark();
+    document.addEventListener('pjax:success', scrollToMark);
+  };
+
+  init(CONFIG.bookmark.save);
+});

assets/js/comments-buttons.js

@@ -0,0 +1,25 @@
+/* global CONFIG */
+
+(function() {
+  const commentButton = document.querySelectorAll('.comment-button');
+  commentButton.forEach(element => {
+    const commentClass = element.classList[2];
+    element.addEventListener('click', () => {
+      commentButton.forEach(active => active.classList.toggle('active', active === element));
+      document.querySelectorAll('.comment-position').forEach(active => active.classList.toggle('active', active.classList.contains(commentClass)));
+      if (CONFIG.comments.storage) {
+        localStorage.setItem('comments_active', commentClass);
+      }
+    });
+  });
+  let { activeClass } = CONFIG.comments;
+  if (CONFIG.comments.storage) {
+    activeClass = localStorage.getItem('comments_active') || activeClass;
+  }
+  if (activeClass) {
+    const activeButton = document.querySelector(`.comment-button.${activeClass}`);
+    if (activeButton) {
+      activeButton.click();
+    }
+  }
+})();

assets/js/comments.js

@@ -0,0 +1,21 @@
+/* global CONFIG */
+
+window.addEventListener('tabs:register', () => {
+  let { activeClass } = CONFIG.comments;
+  if (CONFIG.comments.storage) {
+    activeClass = localStorage.getItem('comments_active') || activeClass;
+  }
+  if (activeClass) {
+    const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+    if (activeTab) {
+      activeTab.click();
+    }
+  }
+});
+if (CONFIG.comments.storage) {
+  window.addEventListener('tabs:click', event => {
+    if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+    const commentClass = event.target.classList[1];
+    localStorage.setItem('comments_active', commentClass);
+  });
+}

assets/js/config.js

@@ -0,0 +1,66 @@
+if (!window.NexT) window.NexT = {};
+
+(function() {
+  const className = 'next-config';
+
+  const staticConfig = {};
+  let variableConfig = {};
+
+  const parse = text => JSON.parse(text || '{}');
+
+  const update = name => {
+    const targetEle = document.querySelector(`.${className}[data-name="${name}"]`);
+    if (!targetEle) return;
+    const parsedConfig = parse(targetEle.text);
+    if (name === 'main') {
+      Object.assign(staticConfig, parsedConfig);
+    } else {
+      variableConfig[name] = parsedConfig;
+    }
+  };
+
+  update('main');
+
+  window.CONFIG = new Proxy({}, {
+    get(overrideConfig, name) {
+      let existing;
+      if (name in staticConfig) {
+        existing = staticConfig[name];
+      } else {
+        if (!(name in variableConfig)) update(name);
+        existing = variableConfig[name];
+      }
+
+      // For unset override and mixable existing
+      if (!(name in overrideConfig) && typeof existing === 'object') {
+        // Get ready to mix.
+        overrideConfig[name] = {};
+      }
+
+      if (name in overrideConfig) {
+        const override = overrideConfig[name];
+
+        // When mixable
+        if (typeof override === 'object' && typeof existing === 'object') {
+          // Mix, proxy changes to the override.
+          return new Proxy({ ...existing, ...override }, {
+            set(target, prop, value) {
+              target[prop] = value;
+              override[prop] = value;
+              return true;
+            }
+          });
+        }
+
+        return override;
+      }
+
+      // Only when not mixable and override hasn't been set.
+      return existing;
+    }
+  });
+
+  document.addEventListener('pjax:success', () => {
+    variableConfig = {};
+  });
+})();

assets/js/motion.js

@@ -0,0 +1,125 @@
+/* global NexT, CONFIG */
+
+NexT.motion = {};
+
+NexT.motion.integrator = {
+  queue: [],
+  init : function() {
+    this.queue = [];
+    return this;
+  },
+  add: function(fn) {
+    const sequence = fn();
+    if (CONFIG.motion.async) this.queue.push(sequence);
+    else this.queue = this.queue.concat(sequence);
+    return this;
+  },
+  bootstrap: function() {
+    if (!CONFIG.motion.async) this.queue = [this.queue];
+    this.queue.forEach(sequence => {
+      const timeline = window.anime.timeline({
+        duration: 200,
+        easing  : 'linear'
+      });
+      sequence.forEach(item => {
+        if (item.deltaT) timeline.add(item, item.deltaT);
+        else timeline.add(item);
+      });
+    });
+  }
+};
+
+NexT.motion.middleWares = {
+  header: function() {
+    const sequence = [];
+
+    function getMistLineSettings(targets) {
+      sequence.push({
+        targets,
+        scaleX  : [0, 1],
+        duration: 500,
+        deltaT  : '-=200'
+      });
+    }
+
+    function pushToSequence(targets, sequenceQueue = false) {
+      sequence.push({
+        targets,
+        opacity: 1,
+        top    : 0,
+        deltaT : sequenceQueue ? '-=200' : '-=0'
+      });
+    }
+
+    pushToSequence('header.header');
+    CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
+    CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
+    pushToSequence('.site-title');
+    pushToSequence('.site-brand-container .toggle', true);
+    pushToSequence('.site-subtitle');
+    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
+
+    document.querySelectorAll('.menu-item').forEach(targets => {
+      sequence.push({
+        targets,
+        complete: () => targets.classList.add('animated', 'fadeInDown'),
+        deltaT  : '-=200'
+      });
+    });
+
+    return sequence;
+  },
+
+  subMenu: function() {
+    const subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
+    if (subMenuItem.length > 0) {
+      subMenuItem.forEach(element => {
+        element.classList.add('animated');
+      });
+    }
+    return [];
+  },
+
+  postList: function() {
+    const sequence = [];
+    const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
+
+    function animate(animation, selector) {
+      if (!animation) return;
+      document.querySelectorAll(selector).forEach(targets => {
+        sequence.push({
+          targets,
+          complete: () => targets.classList.add('animated', animation),
+          deltaT  : '-=100'
+        });
+      });
+    }
+
+    animate(post_block, '.post-block, .pagination, .comments');
+    animate(coll_header, '.collection-header');
+    animate(post_header, '.post-header');
+    animate(post_body, '.post-body');
+
+    return sequence;
+  },
+
+  sidebar: function() {
+    const sidebar = document.querySelector('.sidebar');
+    const sidebarTransition = CONFIG.motion.transition.sidebar;
+    // Only for Pisces | Gemini.
+    if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
+      return [{
+        targets : sidebar,
+        complete: () => sidebar.classList.add('animated', sidebarTransition)
+      }];
+    }
+    return [];
+  },
+
+  footer: function() {
+    return [{
+      targets: document.querySelector('.footer'),
+      opacity: 1
+    }];
+  }
+};

assets/js/next-boot.js

@@ -0,0 +1,75 @@
+/* global NexT, CONFIG */
+
+NexT.boot = {};
+
+NexT.boot.registerEvents = function() {
+
+  NexT.utils.registerScrollPercent();
+  NexT.utils.registerCanIUseTag();
+
+  // Mobile top menu bar.
+  document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {
+    event.currentTarget.classList.toggle('toggle-close');
+    const siteNav = document.querySelector('.site-nav');
+    if (!siteNav) return;
+    siteNav.style.setProperty('--scroll-height', siteNav.scrollHeight + 'px');
+    document.body.classList.toggle('site-nav-on');
+  });
+
+  document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
+    element.addEventListener('click', () => {
+      NexT.utils.activateSidebarPanel(index);
+    });
+  });
+
+  window.addEventListener('hashchange', () => {
+    const tHash = location.hash;
+    if (tHash !== '' && !tHash.match(/%\S{2}/)) {
+      const target = document.querySelector(`.tabs ul.nav-tabs li a[href="${tHash}"]`);
+      target && target.click();
+    }
+  });
+};
+
+NexT.boot.refresh = function() {
+
+  /**
+   * Register JS handlers by condition option.
+   * Need to add config option in Front-End at 'scripts/helpers/next-config.js' file.
+   */
+  CONFIG.prism && window.Prism.highlightAll();
+  /*CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img', {
+    background: 'var(--content-bg-color)'
+  });*/
+  CONFIG.lazyload && window.lozad('.post-body img').observe();
+  CONFIG.pangu && window.pangu.spacingPage();
+
+  CONFIG.exturl && NexT.utils.registerExtURL();
+  NexT.utils.registerCopyCode();
+  NexT.utils.registerTabsTag();
+  /*NexT.utils.registerActiveMenuItem();
+  NexT.utils.registerLangSelect();*/
+  NexT.utils.registerSidebarTOC();
+  NexT.utils.registerPostReward();
+  NexT.utils.wrapTableWithBox();
+  NexT.utils.registerVideoIframe();
+};
+
+NexT.boot.motion = function() {
+  // Define Motion Sequence & Bootstrap Motion.
+  if (CONFIG.motion.enable) {
+    NexT.motion.integrator
+      .add(NexT.motion.middleWares.header)
+      .add(NexT.motion.middleWares.postList)
+      .add(NexT.motion.middleWares.sidebar)
+      .add(NexT.motion.middleWares.footer)
+      .bootstrap();
+  }
+  NexT.utils.updateSidebarPosition();
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  NexT.boot.registerEvents();
+  NexT.boot.refresh();
+  NexT.boot.motion();
+});

assets/js/pjax.js

@@ -0,0 +1,34 @@
+/* global NexT, CONFIG, Pjax */
+
+const pjax = new Pjax({
+  selectors: [
+    'head title',
+    'script[type="application/json"]',
+    '.main-inner',
+    '.post-toc-wrap',
+    '.languages',
+    '.pjax'
+  ],
+  analytics: false,
+  cacheBust: false,
+  scrollTo : !CONFIG.bookmark.enable
+});
+
+document.addEventListener('pjax:success', () => {
+  pjax.executeScripts(document.querySelectorAll('script[data-pjax]'));
+  NexT.boot.refresh();
+  // Define Motion Sequence & Bootstrap Motion.
+  if (CONFIG.motion.enable) {
+    NexT.motion.integrator
+      .init()
+      .add(NexT.motion.middleWares.subMenu)
+      .add(NexT.motion.middleWares.postList)
+      .bootstrap();
+  }
+  if (CONFIG.sidebar.display !== 'remove') {
+    const hasTOC = document.querySelector('.post-toc');
+    document.querySelector('.sidebar-inner').classList.toggle('sidebar-nav-active', hasTOC);
+    NexT.utils.activateSidebarPanel(hasTOC ? 0 : 1);
+    NexT.utils.updateSidebarPosition();
+  }
+});

assets/js/schedule.js

@@ -0,0 +1,138 @@
+/* global CONFIG */
+
+// https://developers.google.com/calendar/api/v3/reference/events/list
+(function() {
+  // Initialization
+  const calendar = {
+    orderBy     : 'startTime',
+    showLocation: false,
+    offsetMax   : 72,
+    offsetMin   : 4,
+    showDeleted : false,
+    singleEvents: true,
+    maxResults  : 250
+  };
+
+  // Read config form theme config file
+  Object.assign(calendar, CONFIG.calendar);
+
+  const now = new Date();
+  const timeMax = new Date();
+  const timeMin = new Date();
+
+  timeMax.setHours(now.getHours() + calendar.offsetMax);
+  timeMin.setHours(now.getHours() - calendar.offsetMin);
+
+  // Build URL
+  const params = {
+    key         : calendar.api_key,
+    orderBy     : calendar.orderBy,
+    timeMax     : timeMax.toISOString(),
+    timeMin     : timeMin.toISOString(),
+    showDeleted : calendar.showDeleted,
+    singleEvents: calendar.singleEvents,
+    maxResults  : calendar.maxResults
+  };
+
+  const request_url = new URL(`https://www.googleapis.com/calendar/v3/calendars/${calendar.calendar_id}/events`);
+  Object.entries(params).forEach(param => request_url.searchParams.append(...param));
+
+  function getRelativeTime(current, previous) {
+    const msPerMinute = 60 * 1000;
+    const msPerHour = msPerMinute * 60;
+    const msPerDay = msPerHour * 24;
+    const msPerMonth = msPerDay * 30;
+    const msPerYear = msPerDay * 365;
+
+    let elapsed = current - previous;
+    const tense = elapsed > 0 ? ' ago' : ' later';
+
+    elapsed = Math.abs(elapsed);
+
+    if (elapsed < msPerHour) {
+      return Math.round(elapsed / msPerMinute) + ' minutes' + tense;
+    } else if (elapsed < msPerDay) {
+      return Math.round(elapsed / msPerHour) + ' hours' + tense;
+    } else if (elapsed < msPerMonth) {
+      return 'about ' + Math.round(elapsed / msPerDay) + ' days' + tense;
+    } else if (elapsed < msPerYear) {
+      return 'about ' + Math.round(elapsed / msPerMonth) + ' months' + tense;
+    }
+
+    return 'about ' + Math.round(elapsed / msPerYear) + ' years' + tense;
+  }
+
+  function buildEventDOM(tense, event, start, end) {
+    const durationFormat = {
+      weekday: 'short',
+      hour   : '2-digit',
+      minute : '2-digit'
+    };
+    const relativeTime = tense === 'now' ? 'NOW' : getRelativeTime(now, start);
+    const duration = start.toLocaleTimeString([], durationFormat) + ' - ' + end.toLocaleTimeString([], durationFormat);
+
+    let location = '';
+    if (calendar.showLocation && event.location) {
+      location = `<span class="event-location event-details">${event.location}</span>`;
+    }
+    let description = '';
+    if (event.description) {
+      description = `<span class="event-description event-details">${event.description}</span>`;
+    }
+
+    const eventContent = `<section class="event event-${tense}">
+        <h2 class="event-summary">
+          ${event.summary}
+          <span class="event-relative-time">${relativeTime}</span>
+        </h2>
+        ${location}
+        <span class="event-duration event-details">${duration}</span>
+        ${description}
+      </section>`;
+    return eventContent;
+  }
+
+  function fetchData() {
+    const eventList = document.querySelector('.event-list');
+    if (!eventList) return;
+
+    fetch(request_url.href).then(response => {
+      return response.json();
+    }).then(data => {
+      if (data.items.length === 0) {
+        eventList.innerHTML = '<hr>';
+        return;
+      }
+      // Clean the event list
+      eventList.innerHTML = '';
+      let prevEnd = 0; // used to decide where to insert an <hr>
+      const utc = new Date().getTimezoneOffset() * 60000;
+
+      data.items.forEach(event => {
+        // Parse data
+        const start = new Date(event.start.dateTime || (new Date(event.start.date).getTime() + utc));
+        const end = new Date(event.end.dateTime || (new Date(event.end.date).getTime() + utc));
+
+        let tense = 'now';
+        if (end < now) {
+          tense = 'past';
+        } else if (start > now) {
+          tense = 'future';
+        }
+
+        if (tense === 'future' && prevEnd < now) {
+          eventList.insertAdjacentHTML('beforeend', '<hr>');
+        }
+
+        eventList.insertAdjacentHTML('beforeend', buildEventDOM(tense, event, start, end));
+        prevEnd = end;
+      });
+    });
+  }
+
+  fetchData();
+  const fetchDataTimer = setInterval(fetchData, 60000);
+  document.addEventListener('pjax:send', () => {
+    clearInterval(fetchDataTimer);
+  });
+})();

assets/js/schemes/muse.js

@@ -0,0 +1,60 @@
+/* global CONFIG */
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  const isRight = CONFIG.sidebar.position === 'right';
+
+  const sidebarToggleMotion = {
+    mouse: {},
+    init : function() {
+      window.addEventListener('mousedown', this.mousedownHandler.bind(this));
+      window.addEventListener('mouseup', this.mouseupHandler.bind(this));
+      document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
+      document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
+      window.addEventListener('sidebar:show', this.showSidebar);
+      window.addEventListener('sidebar:hide', this.hideSidebar);
+    },
+    mousedownHandler: function(event) {
+      this.mouse.X = event.pageX;
+      this.mouse.Y = event.pageY;
+    },
+    mouseupHandler: function(event) {
+      const deltaX = event.pageX - this.mouse.X;
+      const deltaY = event.pageY - this.mouse.Y;
+      const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main');
+      // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image.
+      if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) {
+        this.hideSidebar();
+      }
+    },
+    clickHandler: function() {
+      document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar();
+    },
+    showSidebar: function() {
+      document.body.classList.add('sidebar-active');
+      const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft';
+      document.querySelectorAll('.sidebar .animated').forEach((element, index) => {
+        element.style.animationDelay = (100 * index) + 'ms';
+        element.classList.remove(animateAction);
+        setTimeout(() => {
+          // Trigger a DOM reflow
+          element.classList.add(animateAction);
+        });
+      });
+    },
+    hideSidebar: function() {
+      document.body.classList.remove('sidebar-active');
+    }
+  };
+  if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init();
+
+  function updateFooterPosition() {
+    const footer = document.querySelector('.footer');
+    const containerHeight = document.querySelector('header.header').offsetHeight + document.querySelector('.main').offsetHeight + footer.offsetHeight;
+    footer.classList.toggle('footer-fixed', containerHeight <= window.innerHeight);
+  }
+
+  updateFooterPosition();
+  window.addEventListener('resize', updateFooterPosition);
+  window.addEventListener('scroll', updateFooterPosition, { passive: true });
+});

assets/js/third-party/analytics/baidu-analytics.js

@@ -0,0 +1,7 @@
+/* global _hmt */
+
+if (!window._hmt) window._hmt = [];
+
+document.addEventListener('pjax:success', () => {
+  _hmt.push(['_trackPageview', location.pathname]);
+});

assets/js/third-party/analytics/google-analytics.js

@@ -0,0 +1,35 @@
+/* global CONFIG, dataLayer, gtag */
+
+if (!CONFIG.google_analytics.only_pageview) {
+  if (CONFIG.hostname === location.hostname) {
+    window.dataLayer = window.dataLayer || [];
+    window.gtag = function() {
+      dataLayer.push(arguments);
+    };
+    gtag('js', new Date());
+    gtag('config', CONFIG.google_analytics.tracking_id);
+
+    document.addEventListener('pjax:success', () => {
+      gtag('event', 'page_view', {
+        page_location: location.href,
+        page_path    : location.pathname,
+        page_title   : document.title
+      });
+    });
+  }
+} else {
+  const sendPageView = () => {
+    if (CONFIG.hostname !== location.hostname) return;
+    const uid = localStorage.getItem('uid') || (Math.random() + '.' + Math.random());
+    localStorage.setItem('uid', uid);
+    navigator.sendBeacon('https://www.google-analytics.com/collect', new URLSearchParams({
+      v  : 1,
+      tid: CONFIG.google_analytics.tracking_id,
+      cid: uid,
+      t  : 'pageview',
+      dp : encodeURIComponent(location.pathname)
+    }));
+  };
+  document.addEventListener('pjax:complete', sendPageView);
+  sendPageView();
+}

assets/js/third-party/analytics/growingio.js

@@ -0,0 +1,10 @@
+/* global CONFIG, gio */
+
+if (!window.gio) {
+  window.gio = function() {
+    (window.gio.q = window.gio.q || []).push(arguments);
+  };
+}
+
+gio('init', `${CONFIG.growingio_analytics}`, {});
+gio('send');

assets/js/third-party/chat/chatra.js

@@ -0,0 +1,19 @@
+/* global CONFIG, Chatra */
+
+(function() {
+  if (CONFIG.chatra.embed) {
+    window.ChatraSetup = {
+      mode    : 'frame',
+      injectTo: CONFIG.chatra.embed
+    };
+  }
+
+  window.ChatraID = CONFIG.chatra.id;
+
+  const chatButton = document.querySelector('.sidebar-button button');
+  if (chatButton) {
+    chatButton.addEventListener('click', () => {
+      Chatra('openChat', true);
+    });
+  }
+})();

assets/js/third-party/chat/gitter.js

@@ -0,0 +1,5 @@
+/* global CONFIG */
+
+((window.gitter = {}).chat = {}).options = {
+  room: CONFIG.gitter.room
+};

assets/js/third-party/chat/tidio.js

@@ -0,0 +1,10 @@
+/* global tidioChatApi */
+
+(function() {
+  const chatButton = document.querySelector('.sidebar-button button');
+  if (chatButton) {
+    chatButton.addEventListener('click', () => {
+      tidioChatApi.open();
+    });
+  }
+})();

assets/js/third-party/comments/changyan.js

@@ -0,0 +1,39 @@
+/* global NexT, CONFIG */
+
+document.addEventListener('page:loaded', () => {
+  const { appid, appkey } = CONFIG.changyan;
+  const mainJs = 'https://cy-cdn.kuaizhan.com/upload/changyan.js';
+  const countJs = `https://cy-cdn.kuaizhan.com/upload/plugins/plugins.list.count.js?clientId=${appid}`;
+
+  // Get the number of comments
+  setTimeout(() => {
+    return NexT.utils.getScript(countJs, {
+      attributes: {
+        async: true,
+        id   : 'cy_cmt_num'
+      }
+    });
+  }, 0);
+
+  // When scroll to comment section
+  if (CONFIG.page.comments && !CONFIG.page.isHome) {
+    NexT.utils.loadComments('#SOHUCS')
+      .then(() => {
+        return NexT.utils.getScript(mainJs, {
+          attributes: {
+            async: true
+          }
+        });
+      })
+      .then(() => {
+        window.changyan.api.config({
+          appid,
+          conf: appkey
+        });
+      })
+      .catch(error => {
+        // eslint-disable-next-line no-console
+        console.error('Failed to load Changyan', error);
+      });
+  }
+});

assets/js/third-party/comments/disqus.js

@@ -0,0 +1,41 @@
+/* global NexT, CONFIG, DISQUS */
+
+document.addEventListener('page:loaded', () => {
+
+  if (CONFIG.disqus.count) {
+    const loadCount = () => {
+      NexT.utils.getScript(`https://${CONFIG.disqus.shortname}.disqus.com/count.js`, {
+        attributes: { id: 'dsq-count-scr' }
+      });
+    };
+
+    // defer loading until the whole page loading is completed
+    window.addEventListener('load', loadCount, false);
+  }
+
+  if (CONFIG.page.comments) {
+    // `disqus_config` should be a global variable
+    // See https://help.disqus.com/en/articles/1717084-javascript-configuration-variables
+    window.disqus_config = function() {
+      this.page.url = CONFIG.page.permalink;
+      this.page.identifier = CONFIG.page.path;
+      this.page.title = CONFIG.page.title;
+      if (CONFIG.disqus.i18n.disqus !== 'disqus') {
+        this.language = CONFIG.disqus.i18n.disqus;
+      }
+    };
+    NexT.utils.loadComments('#disqus_thread').then(() => {
+      if (window.DISQUS) {
+        DISQUS.reset({
+          reload: true,
+          config: window.disqus_config
+        });
+      } else {
+        NexT.utils.getScript(`https://${CONFIG.disqus.shortname}.disqus.com/embed.js`, {
+          attributes: { dataset: { timestamp: '' + +new Date() } }
+        });
+      }
+    });
+  }
+
+});

assets/js/third-party/comments/disqusjs.js

@@ -0,0 +1,18 @@
+/* global NexT, CONFIG, DisqusJS */
+
+document.addEventListener('page:loaded', () => {
+  if (!CONFIG.page.comments) return;
+
+  NexT.utils.loadComments('#disqus_thread')
+    .then(() => NexT.utils.getScript(CONFIG.disqusjs.js, { condition: window.DisqusJS }))
+    .then(() => {
+      window.dsqjs = new DisqusJS({
+        api       : CONFIG.disqusjs.api || 'https://disqus.com/api/',
+        apikey    : CONFIG.disqusjs.apikey,
+        shortname : CONFIG.disqusjs.shortname,
+        url       : CONFIG.page.permalink,
+        identifier: CONFIG.page.path,
+        title     : CONFIG.page.title
+      });
+    });
+});

assets/js/third-party/comments/gitalk.js

@@ -0,0 +1,24 @@
+/* global NexT, CONFIG, Gitalk */
+
+document.addEventListener('page:loaded', () => {
+  if (!CONFIG.page.comments) return;
+
+  NexT.utils.loadComments('.gitalk-container')
+    .then(() => NexT.utils.getScript(CONFIG.gitalk.js, {
+      condition: window.Gitalk
+    }))
+    .then(() => {
+      const gitalk = new Gitalk({
+        clientID           : CONFIG.gitalk.client_id,
+        clientSecret       : CONFIG.gitalk.client_secret,
+        repo               : CONFIG.gitalk.repo,
+        owner              : CONFIG.gitalk.github_id,
+        admin              : [CONFIG.gitalk.admin_user],
+        id                 : CONFIG.gitalk.path_md5,
+        proxy              : CONFIG.gitalk.proxy,
+        language           : CONFIG.gitalk.language || window.navigator.language,
+        distractionFreeMode: CONFIG.gitalk.distraction_free_mode
+      });
+      gitalk.render(document.querySelector('.gitalk-container'));
+    });
+});

assets/js/third-party/comments/isso.js

@@ -0,0 +1,15 @@
+/* global NexT, CONFIG */
+
+document.addEventListener('page:loaded', () => {
+  if (!CONFIG.page.comments) return;
+
+  NexT.utils.loadComments('#isso-thread')
+    .then(() => NexT.utils.getScript(`${CONFIG.isso}js/embed.min.js`, {
+      attributes: {
+        dataset: {
+          isso: `${CONFIG.isso}`
+        }
+      },
+      parentNode: document.querySelector('#isso-thread')
+    }));
+});

assets/js/third-party/comments/livere.js

@@ -0,0 +1,19 @@
+/* global NexT, CONFIG, LivereTower */
+
+document.addEventListener('page:loaded', () => {
+  if (!CONFIG.page.comments) return;
+
+  NexT.utils.loadComments('#lv-container').then(() => {
+    window.livereOptions = {
+      refer: CONFIG.page.path.replace(/index\.html$/, '')
+    };
+
+    if (typeof LivereTower === 'function') return;
+
+    NexT.utils.getScript('https://cdn-city.livere.com/js/embed.dist.js', {
+      attributes: {
+        async: true
+      }
+    });
+  });
+});