Merge pull request #89 from dillonzq/feature/documentation

feat(exampleSite): merge en and zh exampleSite

.circleci/config.yml

@@ -24,8 +24,3 @@ workflows:
       - build-check:
           example-site-path: exampleSite
           theme-path: ../..
-  build-check-exampleSite-zh:
-    jobs:
-      - build-check:
-          example-site-path: exampleSite/zh
-          theme-path: ../../..

assets/css/_core/_base.scss

@@ -1,6 +1,7 @@
 html {
   font-family: $global-font-family;
   font-size: 16px;
+  width:100%;
 }
 
 /* scrollbar, only support webkit */

assets/css/_core/_media.scss

@@ -2,8 +2,7 @@
   .page {
     max-width: 780px;
 
-    .post-toc {
-      width: 300px;
+    #toc-auto {
       margin-left: 800px;
     }
   }
@@ -13,8 +12,7 @@
   .page {
     max-width: 680px;
 
-    .post-toc {
-      width: 240px;
+    #toc-auto {
       margin-left: 700px;
     }
   }
@@ -24,8 +22,7 @@
   .page {
     max-width: 560px;
 
-    .post-toc {
-      width: 180px;
+    #toc-auto {
       margin-left: 580px;
     }
   }
@@ -41,11 +38,11 @@
   .page {
     max-width: 80%;
 
-    .post-toc {
+    #toc-auto {
       display: none;
     }
 
-    .post-toc-mobile {
+    #toc-static {
       display: block;
     }
   }

assets/css/_page/_single.scss

@@ -6,8 +6,8 @@
     line-height: 3rem;
   }
 
-  .meta {
-    font-size: .88rem;
+  .post-meta {
+    font-size: .875rem;
     color: $global-font-secondary-color;
 
     span {

assets/css/_partial/_home/_summary.scss

@@ -30,8 +30,7 @@
       font-size: 1.6rem;
     }
 
-    .meta {
-      font-size: .875rem !important;
+    .post-meta {
       a {
         color: $global-font-secondary-color !important;
 

assets/css/_partial/_single/_toc.scss

@@ -1,25 +1,25 @@
-.post-toc {
+#toc-auto {
   display: block;
   position: absolute;
-  width: 360px;
+  width: 100%;
   margin-left: 1000px;
   padding: 0 .8rem;
   border-left: 1px solid $global-border-color;
   overflow-wrap: break-word;
   box-sizing: border-box;
-  top: $post-toc-top;
+  top: if($header-normal-mode-desktop, 7rem, 12rem);
 
   .dark-theme & {
     border-left: 1px solid $global-border-color-dark;
   }
 
-  .post-toc-title {
+  .toc-title {
     font-weight: 400;
     margin: .8rem 0;
     text-transform: uppercase;
   }
 
-  .post-toc-content {
+  .toc-content {
     &.always-active ul {
       display: block;
     }
@@ -73,13 +73,13 @@
   }
 }
 
-.post-toc-mobile {
+#toc-static {
   display: none;
   padding-top: .8rem;
 
   details {
     summary {
-      .post-toc-title {
+      .toc-title {
         display: block;
         display: flex;
         justify-content: space-between;
@@ -110,7 +110,7 @@
     }
   }
 
-  .post-toc-content {
+  .toc-content {
     border: 2px solid $code-background-color;
 
     >nav>ul {

assets/css/_variables.scss

@@ -51,9 +51,17 @@ $header-height-desktop: 4rem !default;
 $header-height-mobile: 4rem !default;
 
 // Color of the header background
-$header-background-color: #fafafa !default;
+$header-background-color: #f8f8f8 !default;
 $header-background-color-dark: #252627 !default;
 
+// Position of the header
+$header-position-desktop: if($header-normal-mode-desktop, static, fixed) !default;
+$header-position-mobile: if($header-normal-mode-mobile, static, fixed) !default;
+
+// Top of the page padding
+$page-padding-top-desktop: if($header-normal-mode-desktop, 1rem, 6rem) !default;
+$page-padding-top-mobile: if($header-normal-mode-mobile, 1rem, 6rem) !default;
+
 // Color of the hover header item
 $header-hover-color: #161209 !default;
 $header-hover-color-dark: #fff !default;

assets/css/style.template.scss

@@ -1,30 +1,14 @@
 @charset 'utf-8';
 
-$home-profile: {{- if .Site.Params.home.profile.enable -}}true{{ else }}false{{ end }};
-$home-posts: {{- if .Site.Params.home.posts.enable -}}true{{ else }}false{{ end }};
-
-{{- if eq .Site.Params.header.desktopMode "normal" -}}
-  $header-position-desktop: static;
-  $page-padding-top-desktop: 1rem;
-  $post-toc-top: 7rem;
-{{- else -}}
-  $header-position-desktop: fixed;
-  $page-padding-top-desktop: 6rem;
-  $post-toc-top: 12rem;
-{{- end -}}
-
-{{- if eq .Site.Params.header.mobileMode "normal" -}}
-  $header-position-mobile: static;
-  $page-padding-top-mobile: 1rem;
-{{- else -}}
-  $header-position-mobile: fixed;
-  $page-padding-top-mobile: 6rem;
-{{- end -}}
+$home-profile: {{ if .Site.Params.home.profile.enable }}true{{ else }}false{{ end }};
+$home-posts: {{ if .Site.Params.home.posts.enable }}true{{ else }}false{{ end }};
+$header-normal-mode-desktop: {{ if eq .Site.Params.header.desktopMode "normal" }}true{{ else }}false{{ end }};
+$header-normal-mode-mobile: {{ if eq .Site.Params.header.mobileMode "normal" }}true{{ else }}false{{ end }};
 
 @import "_variables";
 
-{{- if fileExists "config/css/_custom.scss" -}}
-  @import "_custom";
+{{- if fileExists "config/css/_override.scss" -}}
+  @import "_override";
 {{- end -}}
 
 @import "_core/normalize";

exampleSite/config.toml

@@ -1,32 +1,610 @@
 baseURL = "/"
-# website language
-languageCode = "en"
-# [en, zh, ...] determines which i18n file to use
+# [en, zh, ...] determines default content language
+# [en, zh, ...] 设置默认的语言
 defaultContentLanguage = "en"
-# website title
-title = "LoveIt Theme"
 # theme
+# 主题
 theme = "LoveIt"
-# whether to use git commit log to generate lastmod record
-enableGitInfo = false
-# whether to include chinese/japanese/korean
-hasCJKLanguage = false
-# default amount of posts in each pages
-paginate = 12
-# whether to use emoji code
-enableEmoji = true
-# whether to use robots.txt
-enableRobotsTXT = true
-# [UA-XXXXXXXX-X] google analytics code
-googleAnalytics = ""
-# copyright description used only for seo schema
-copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
-# date format
-dateFormatToUse = "2006-01-02"
+# themes directory
+# 主题目录
+themesDir = "../.."
+
+[languages]
+  [languages.en]
+    weight = 1
+    # language code
+    languageCode = "en"
+    # website title
+    title = "LoveIt Theme"
+    # whether to use git commit log to generate lastmod record
+    enableGitInfo = false
+    # whether to include chinese/japanese/korean
+    hasCJKLanguage = false
+    # default amount of posts in each pages
+    paginate = 12
+    # whether to use emoji code
+    enableEmoji = true
+    # whether to use robots.txt
+    enableRobotsTXT = true
+    # [UA-XXXXXXXX-X] google analytics code
+    googleAnalytics = ""
+    # copyright description used only for seo schema
+    copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
+    # date format
+    dateFormatToUse = "2006-01-02"
+    # Menu Info
+    [languages.en.menu]
+      [[languages.en.menu.main]]
+        identifier = "posts"
+        name = "Posts"
+        url = "/posts/"
+        weight = 1
+      [[languages.en.menu.main]]
+        identifier = "tags"
+        name = "Tags"
+        url = "/tags/"
+        weight = 2
+      [[languages.en.menu.main]]
+        identifier = "categories"
+        name = "Categories"
+        url = "/categories/"
+        weight = 3
+      [[languages.en.menu.main]]
+        identifier = "about"
+        name = "About"
+        url = "/about/"
+        weight = 4
+      [[languages.en.menu.main]]
+        identifier = "zh"
+        pre = '<i class="fas fa-language fa-fw"></i>'
+        name = ""
+        title = "简体中文"
+        url = "/zh/"
+        weight = 5
+      [languages.en.params]
+        # LoveIt theme version
+        version = "0.1.X"
+        # site description
+        description = "About LoveIt Theme"
+        # site keywords
+        keywords = ["Theme", "Hugo"]
+        # site default theme ("light", "dark", "auto")
+        defaultTheme = "auto"
+        # public git repo url to link lastmod git commit only then enableGitInfo is true
+        gitRepo = ""
+        # Header info
+        [languages.en.params.header]
+          # desktop header mode ("fixed", "normal", "auto")
+          desktopMode = "fixed"
+          # mobile header mode ("fixed", "normal", "auto")
+          mobileMode = "auto"
+        # Footer Copyright Info
+        [languages.en.params.footer]
+          # Site creation time
+          since = 2019
+          # ICP info only in China (HTML format is allowed)
+          icp = ""
+          # license info (HTML format is allowed)
+          license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
+        # Home Page Info
+        [languages.en.params.home]
+          # Home Page Profile
+          [languages.en.params.home.profile]
+            enable = true
+            # Gravatar Email for preferred avatar in home page
+            gravatarEmail = ""
+            # URL of avatar shown in home page
+            avatarURL = "images/avatar.png"
+            # subtitle shown in home page
+            subtitle = "A Clean, Elegant but Advanced Hugo Theme"
+            # whether to use typeit animation for subtitle
+            typeit = true
+            # whether to show social links
+            social = true
+          # Home Page Posts
+          [languages.en.params.home.posts]
+            enable = true
+            # special amount of posts in each home posts page
+            paginate = 6
+            # default behavior when you don't set "hiddenFromHomePage" in front matter
+            defaultHiddenFromHomePage = false
+        # Social Info in home page
+        [languages.en.params.social]
+          GitHub = "xxxx"
+          Linkedin = "xxxx"
+          Twitter = "xxxx"
+          Instagram = "xxxx"
+          Email = "xxxx@xxxx.com"
+          Facebook = "xxxx"
+          Telegram = "xxxx"
+          # Medium = "xxxx"
+          # Gitlab = "xxxx"
+          Youtubelegacy = "xxxx"
+          # Youtubecustom = "xxxx"
+          # Youtubechannel = "xxxx"
+          # Tumblr ="xxxx"
+          # Quora = "xxxx"
+          # Keybase = "xxxx"
+          # Pinterest = "xxxx"
+          # Reddit = "xxxx"
+          # Codepen = "xxxx"
+          # FreeCodeCamp = "xxxx"
+          # Bitbucket = "xxxx"
+          # Stackoverflow = "xxxx"
+          # Weibo = "xxxx"
+          # Odnoklassniki = "xxxx"
+          # VK = "xxxx"
+          # Flickr = "xxxx"
+          # Xing = "xxxx"
+          # Snapchat = "xxxx"
+          # Soundcloud = "xxxx"
+          # Spotify = "xxxx"
+          # Bandcamp = "xxxx"
+          # Paypal = "xxxx"
+          # Fivehundredpx = "xxxx"
+          # Mix = "xxxx"
+          # Goodreads = "xxxx"
+          # Lastfm = "xxxx"
+          # Foursquare = "xxxx"
+          # Hackernews = "xxxx"
+          # Kickstarter = "xxxx"
+          # Patreon = "xxxx"
+          # Steam = "xxxx"
+          # Twitch = "xxxx"
+          # Strava = "xxxx"
+          # Skype = "xxxx"
+          # Whatsapp = "xxxx"
+          # Zhihu = "xxxx"
+          # Douban = "xxxx"
+          # Angellist = "xxxx"
+          # Slidershare = "xxxx"
+          # Jsfiddle = "xxxx"
+          # Deviantart = "xxxx"
+          # Behance = "xxxx"
+          # Dribble = "xxxx"
+          # Wordpress = "xxxx"
+          # Vine = "xxxx"
+          # Googlescholar = "xxxx"
+          # Researchgate = "xxxx"
+          # Mastodon = "xxxx"
+          # MastodonPrefix = "https://mastodon.technology/"
+          # Thingiverse = "xxxx"
+          # Devto = "xxxx"
+          # Gitea = "xxxx"
+          # XMPP = "xxxx"
+          # Matrix = "xxxx"
+          # Bilibili = "xxxx"
+        # Page config
+        [languages.en.params.page]
+          # whether to show social share links in post page
+          socialShare = true
+          # whether to show link to Raw Markdown content of the post
+          linkToMarkdown = true
+        # Social Share Links in post page
+        [languages.en.params.share]
+          enable = true
+          Twitter = true
+          Facebook = true
+          Linkedin = true
+          Whatsapp = true
+          Pinterest = true
+          # Tumblr = true
+          HackerNews = true
+          # Reddit = true
+          # VK = true
+          # Buffer = true
+          # Xing = true
+          # Line = true
+          # Instapaper = true
+          # Pocket = true
+          # Digg = true
+          # Stumbleupon = true
+          # Flipboard = true
+          # Weibo = true
+          # Renren = true
+          # Myspace = true
+          # Blogger = true
+          # Baidu = true
+          # Odnoklassniki = true
+          # Evernote = true
+          # Skype = true
+          # Trello = true
+          # Mix = true
+        # mathematical formulas (KaTeX)
+        [languages.en.params.math]
+          enable = true
+          # default inline delimiter is $ ... $ and \\( ... \\)
+          inlineLeftDelimiter = ""
+          inlineRightDelimiter = ""
+          # default block delimiter is $$ ... $$ and \\[ ... \\]
+          blockLeftDelimiter = ""
+          blockRightDelimiter = ""
+          # KaTeX extension copy_tex
+          copyTex = true
+          # KaTeX extension mhchem
+          mhchem = true
+        # CSS and JS Files CDN
+        [languages.en.params.cdn]
+          ## for example '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">'
+          fontawesomeFreeCSS = ''
+          animateCSS = ''
+          gitalkCSS = ''
+          gitalkJS = ''
+          valineJS = ''
+          lazysizesJS = ''
+          smoothScrollJS = ''
+          sharerJS = ''
+          katexCSS = ''
+          katexJS = ''
+          katexAutoRenderJS = ''
+          katexCopyTexCSS = ''
+          katexCopyTexJS = ''
+          katexMhchemJS = ''
+          mermaidJS = ''
+          echartsJS = ''
+          echartsMacaronsJS = ''
+          typeitJS = ''
+          aplayerCSS = ''
+          aplayerJS = ''
+          metingJS = ''
+        # site verification code for Google/Bing/Yandex/Pinterest/Baidu
+        [languages.en.params.verification]
+          google = ""
+          bing = ""
+          yandex = ""
+          pinterest = ""
+          baidu = ""
+        # Publisher Info just for SEO
+        [languages.en.params.publisher]
+          name = "xxxx"
+          [languages.en.params.publisher.logo]
+            url = "logo.png"
+            width = 127
+            height = 40
+        # Website Log Info just for SEO
+        [languages.en.params.logo]
+          url = "logo.png"
+          width = 127
+          height = 40
+        # Website Image Info just for SEO
+        [languages.en.params.image]
+          url = "cover.png"
+          width = 800
+          height = 600
+        # Comment Config
+        [languages.en.params.comment]
+          enable = true
+          # Disqus Comment Config (https://disqus.com/)
+          [languages.en.params.comment.disqus]
+            # Disqus shortname to use Disqus in posts
+            shortname = "dillonzq"
+          # Gittalk Comment Config (https://github.com/gitalk/gitalk)
+          [languages.en.params.comment.gitalk]
+            owner = ""
+            repo = ""
+            clientId = ""
+            clientSecret = ""
+          # Valine Comment Config (https://github.com/xCss/Valine)
+          [languages.en.params.comment.valine]
+            enable = false
+            appId = ""
+            appKey = ""
+            placeholder = "Your comment ..."
+            notify = false
+            verify = true
+            avatar = "mp"
+            # meta= ""
+            pageSize = 10
+            visitor = true
+            recordIP = true
+          # Facebook Comment Config (https://developers.facebook.com/docs/plugins/comments)
+          [languages.en.params.comment.facebook]
+            enable = false
+            width = "100%"
+            numPosts = 10
+            appId = ""
+            languageCode = "en_US"
+
+  [languages.zh]
+    weight = 2
+    # 网站语言
+    languageCode = "zh"
+    # 网站标题
+    title = "LoveIt 主题"
+    # 是否使用 git 信息来生成文章的上次修改时间
+    enableGitInfo = false
+    # 是否包括中日韩文字
+    hasCJKLanguage = true
+    # 默认每页列表显示的文章数目
+    paginate = 12
+    # 是否使用 emoji 代码
+    enableEmoji = true
+    # 是否使用 robots.txt
+    enableRobotsTXT = true
+    # [UA-XXXXXXXX-X] 谷歌分析代号
+    googleAnalytics = ""
+    # 版权描述，仅仅用于 SEO
+    copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
+    # 日期格式
+    dateFormatToUse = "2006-01-02"
+    # 菜单信息
+    [languages.zh.menu]
+      [[languages.zh.menu.main]]
+        identifier = "posts"
+        name = "文章"
+        url = "/posts/"
+        weight = 1
+      [[languages.zh.menu.main]]
+        identifier = "tags"
+        name = "标签"
+        url = "/tags/"
+        weight = 2
+      [[languages.zh.menu.main]]
+        identifier = "categories"
+        name = "分类"
+        url = "/categories/"
+        weight = 3
+      [[languages.zh.menu.main]]
+        identifier = "about"
+        name = "关于"
+        url = "/about/"
+        weight = 4
+      [[languages.zh.menu.main]]
+        identifier = "en"
+        pre = '<i class="fas fa-language fa-fw"></i>'
+        name = ""
+        title = "English"
+        url = "../"
+        weight = 5
+    [languages.zh.params]
+      # LoveIt 主题版本
+      version = "0.1.X"
+      # 网站描述
+      description = "关于 LoveIt 主题"
+      # 网站关键词
+      keywords = ["Theme", "Hugo"]
+      # 网站默认主题 ("light", "dark", "auto")
+      defaultTheme = "auto"
+      # 用于生成文章上次修改时间的公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效
+      gitRepo = ""
+      # 页面头部导航栏信息
+      [languages.zh.params.header]
+        # 桌面端导航栏模式 ("fixed", "normal", "auto")
+        desktopMode = "fixed"
+        # 移动端导航栏模式 ("fixed", "normal", "auto")
+        mobileMode = "auto"
+      # 页面底部版权信息设置
+      [languages.zh.params.footer]
+        # 网站创立年份
+        since = 2019
+        # ICP 备案信息，仅在中国使用 (允许使用 HTML 格式)
+        icp = ""
+        # 许可协议信息 (允许使用 HTML 格式)
+        license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
+      # 主页信息设置
+      [languages.zh.params.home]
+        # 主页个人信息
+        [languages.zh.params.home.profile]
+          enable = true
+          # Gravatar 邮箱，用于优先在主页显示的头像
+          gravatarEmail = ""
+          # 主页显示头像的 URL
+          avatarURL = "images/avatar.png"
+          # 主页显示的网站副标题
+          subtitle = "一个简洁、优雅且高效的 Hugo 主题"
+          # 是否为副标题显示打字机动画
+          typeit = true
+          # 是否显示社交账号
+          social = true
+        # 主页文章列表
+        [languages.zh.params.home.posts]
+          enable = true
+          # 主页每页显示文章数量
+          paginate = 6
+          # 当你没有在文章前面设置 "hiddenFromHomePage" 时的默认行为
+          defaultHiddenFromHomePage = false
+      # 主页的社交信息设置
+      [languages.zh.params.social]
+        GitHub = "xxxx"
+        # Linkedin = "xxxx"
+        Twitter = "xxxx"
+        Instagram = "xxxx"
+        Email = "xxxx@example.com"
+        # Facebook = "xxxx"
+        # Telegram = "xxxx"
+        # Medium = "xxxx"
+        # Gitlab = "xxxx"
+        # Youtubelegacy = "xxxx"
+        # Youtubecustom = "xxxx"
+        # Youtubechannel = "xxxx"
+        # Tumblr ="xxxx"
+        # Quora = "xxxx"
+        # Keybase = "xxxx"
+        # Pinterest = "xxxx"
+        # Reddit = "xxxx"
+        # Codepen = "xxxx"
+        # FreeCodeCamp = "xxxx"
+        # Bitbucket = "xxxx"
+        # Stackoverflow = "xxxx"
+        Weibo = "xxxx"
+        # Odnoklassniki = "xxxx"
+        # VK = "xxxx"
+        # Flickr = "xxxx"
+        # Xing = "xxxx"
+        # Snapchat = "xxxx"
+        # Soundcloud = "xxxx"
+        # Spotify = "xxxx"
+        # Bandcamp = "xxxx"
+        # Paypal = "xxxx"
+        # Fivehundredpx = "xxxx"
+        # Mix = "xxxx"
+        # Goodreads = "xxxx"
+        # Lastfm = "xxxx"
+        # Foursquare = "xxxx"
+        # Hackernews = "xxxx"
+        # Kickstarter = "xxxx"
+        # Patreon = "xxxx"
+        Steam = "xxxx"
+        # Twitch = "xxxx"
+        # Strava = "xxxx"
+        # Skype = "xxxx"
+        # Whatsapp = "xxxx"
+        Zhihu = "xxxx"
+        # Douban = "xxxx"
+        # Angellist = "xxxx"
+        # Slidershare = "xxxx"
+        # Jsfiddle = "xxxx"
+        # Deviantart = "xxxx"
+        # Behance = "xxxx"
+        # Dribble = "xxxx"
+        # Wordpress = "xxxx"
+        # Vine = "xxxx"
+        # Googlescholar = "xxxx"
+        # Researchgate = "xxxx"
+        # Mastodon = "@xxxx"
+        # MastodonPrefix = "https://mastodon.technology/"
+        # Thingiverse = "xxxx"
+        # Devto = "xxxx"
+        # Gitea = "xxxx"
+        # XMPP = "xxxx@example.com"
+        # Matrix = "xxxx"
+        Bilibili = "xxxx"
+      # 文章页面配置
+      [languages.zh.params.page]
+        # 在文章页面是否使用分享功能
+        socialShare = true
+        # 是否在文章页面显示原始 Markdown 文档链接
+        linkToMarkdown = true
+      # 文章页面的分享信息设置
+      [languages.zh.params.share]
+        enable = true
+        Twitter = true
+        Facebook = true
+        # Linkedin = true
+        # Whatsapp = true
+        # Pinterest = true
+        # Tumblr = true
+        # HackerNews = true
+        # Reddit = true
+        # VK = true
+        # Buffer = true
+        # Xing = true
+        # Line = true
+        # Instapaper = true
+        # Pocket = true
+        # Digg = true
+        # Stumbleupon = true
+        # Flipboard = true
+        Weibo = true
+        Renren = true
+        # Myspace = true
+        # Blogger = true
+        Baidu = true
+        # Odnoklassniki = true
+        Evernote = true
+        # Skype = true
+        # Trello = true
+        # Mix = true
+      # 数学公式 (KaTeX https://katex.org/)
+      [languages.zh.params.math]
+        enable = true
+        # 默认内联定界符是 $ ... $ 和 \\( ... \\)
+        inlineLeftDelimiter = ""
+        inlineRightDelimiter = ""
+        # 默认块定界符是 $$ ... $$ 和 \\[ ... \\]
+        blockLeftDelimiter = ""
+        blockRightDelimiter = ""
+        # KaTeX 插件 copy_tex
+        copyTex = true
+        # KaTeX 插件 mhchem
+        mhchem = true
+      # CSS 和 JS 文件的 CDN 设置
+      [languages.zh.params.cdn]
+        ## 例如 '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">'
+        fontawesomeFreeCSS = ''
+        animateCSS = ''
+        gitalkCSS = ''
+        gitalkJS = ''
+        valineJS = ''
+        lazysizesJS = ''
+        smoothScrollJS = ''
+        sharerJS = ''
+        katexCSS = ''
+        katexJS = ''
+        katexAutoRenderJS = ''
+        katexCopyTexCSS = ''
+        katexCopyTexJS = ''
+        katexMhchemJS = ''
+        mermaidJS = ''
+        echartsJS = ''
+        echartsMacaronsJS = ''
+        typeitJS = ''
+        aplayerCSS = ''
+        aplayerJS = ''
+        metingJS = ''
+      # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
+      [languages.zh.params.verification]
+        google = ""
+        bing = ""
+        yandex = ""
+        pinterest = ""
+        baidu = ""
+      # 出版者信息，仅用于 SEO
+      [languages.zh.params.publisher]
+        name = "xxxx"
+        [languages.zh.params.publisher.logo]
+          url = "logo.png"
+          width = 127
+          height = 40
+      # 网站图标信息，仅用于 SEO
+      [languages.zh.params.logo]
+        url = "logo.png"
+        width = 127
+        height = 40
+      #  网站图标信息，仅用于 SEO
+      [languages.zh.params.image]
+        url = "cover.png"
+        width = 800
+        height = 600
+      # 评论系统设置
+      [languages.zh.params.comment]
+        enable = true
+        # Disqus 评论系统设置 (https://disqus.com/)
+        [languages.zh.params.comment.disqus]
+          # Disqus 的用户名，用来在文章中启用 Disqus 评论系统
+          shortname = "dillonzq"
+        # Gittalk 评论系统设置 (https://github.com/gitalk/gitalk)
+        [languages.zh.params.comment.gitalk]
+          owner = ""
+          repo = ""
+          clientId = ""
+          clientSecret = ""
+        # Valine 评论系统设置 (https://github.com/xCss/Valine)
+        [languages.zh.params.comment.valine]
+          enable = false
+          appId = ""
+          appKey = ""
+          placeholder = "你的评论 ..."
+          notify = false
+          verify = true
+          avatar = "mp"
+          # meta= ""
+          pageSize = 10
+          visitor = true
+          recordIP = true
+        # Facebook 评论系统设置 (https://developers.facebook.com/docs/plugins/comments)
+        [languages.zh.params.comment.facebook]
+          enable = false
+          width = "100%"
+          numPosts = 10
+          appId = ""
+          languageCode = "en_US"
 
 # Markup related configuration in Hugo
+# Hugo 解析文档的配置
 [markup]
   # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
+  # 代码高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
   [markup.highlight]
     codeFences = true
     guessSyntax = true
@@ -37,6 +615,7 @@ dateFormatToUse = "2006-01-02"
     style = "monokai"
     tabWidth = 4
   # Goldmark is from Hugo 0.60 the default library used for Markdown
+  # Goldmark 是 Hugo 0.60 以来的默认 Markdown 解析库
   [markup.goldmark]
     [markup.goldmark.extensions]
       definitionList = true
@@ -48,321 +627,35 @@ dateFormatToUse = "2006-01-02"
       typographer = true
     [markup.goldmark.renderer]
       # whether to use HTML tags directly in the document
+      # 是否在文档中直接使用 HTML 标签
       unsafe = true
   # Table Of Contents settings
+  # 目录设置
   [markup.tableOfContents]
     startLevel = 2
     endLevel = 6
 
 # Author Info
+# 作者信息
 [author]
   name = "xxxx"
   link = ""
 
 # Sitemap Info
+# 网站地图信息
 [sitemap]
   changefreq = "weekly"
   filename = "sitemap.xml"
   priority = 0.5
 
 # Permalinks Info (https://gohugo.io/content-management/urls/#permalinks)
+# Permalinks 信息 (https://gohugo.io/content-management/urls/#permalinks)
 [Permalinks]
-  posts = ":year/:month/:filename"
-
-# Menu Info
-[menu]
-  [[menu.main]]
-    identifier = "posts"
-    name = "Posts"
-    url = "posts"
-    weight = 1
-
-  [[menu.main]]
-    identifier = "tags"
-    name = "Tags"
-    url = "tags"
-    weight = 2
-
-  [[menu.main]]
-    identifier = "categories"
-    name = "Categories"
-    url = "categories"
-    weight = 3
-
-  [[menu.main]]
-    identifier = "about"
-    name = "About"
-    url = "about"
-    weight = 4
-
-  [[menu.main]]
-    identifier = "zh"
-    pre = '<i class="fas fa-language fa-fw"></i>'
-    name = ""
-    title = "简体中文"
-    url = "https://hugo-loveit-zh.netlify.com"
-    weight = 5
-
-[params]
-  # LoveIt theme version
-  version = "0.1.X"
-  # site description
-  description = "About LoveIt Theme"
-  # site keywords
-  keywords = ["Theme", "Hugo"]
-  # site default theme ("light", "dark", "auto")
-  defaultTheme = "auto"
-  # public git repo url to link lastmod git commit only then enableGitInfo is true
-  gitRepo = ""
-
-  # Header info
-  [params.header]
-    # desktop header mode ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # mobile header mode ("fixed", "normal", "auto")
-    mobileMode = "auto"
-
-  # Footer Copyright Info
-  [params.footer]
-    # Site creation time
-    since = 2019
-    # ICP info only in China (HTML format is allowed)
-    icp = ""
-    # license info (HTML format is allowed)
-    license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
-
-  # Home Page Info
-  [params.home]
-    # Home Page Profile
-    [params.home.profile]
-      enable = true
-      # Gravatar Email for preferred avatar in home page
-      gravatarEmail = ""
-      # URL of avatar shown in home page
-      avatarURL = "images/avatar.png"
-      # subtitle shown in home page
-      subtitle = "A Clean, Elegant but Advanced Hugo Theme"
-      # whether to use typeit animation for subtitle
-      typeit = true
-      # whether to show social links
-      social = true
-    # Home Page Posts
-    [params.home.posts]
-      enable = true
-      # special amount of posts in each home posts page
-      paginate = 6
-      # default behavior when you don't set "hiddenFromHomePage" in front matter
-      defaultHiddenFromHomePage = false
-
-  # Social Info in home page
-  [params.social]
-    GitHub = "xxxx"
-    Linkedin = "xxxx"
-    Twitter = "xxxx"
-    Instagram = "xxxx"
-    Email = "xxxx@outlook.com"
-    Facebook = "xxxx"
-    Telegram = "xxxx"
-    # Medium = "xxxx"
-    # Gitlab = "xxxx"
-    # Youtubelegacy = "xxxx"
-    # Youtubecustom = "xxxx"
-    # Youtubechannel = "xxxx"
-    # Tumblr ="xxxx"
-    # Quora = "xxxx"
-    # Keybase = "xxxx"
-    # Pinterest = "xxxx"
-    # Reddit = "xxxx"
-    # Codepen = "xxxx"
-    # FreeCodeCamp = "xxxx"
-    # Bitbucket = "xxxx"
-    # Stackoverflow = "xxxx"
-    # Weibo = "xxxx"
-    # Odnoklassniki = "xxxx"
-    # VK = "xxxx"
-    # Flickr = "xxxx"
-    # Xing = "xxxx"
-    # Snapchat = "xxxx"
-    # Soundcloud = "xxxx"
-    # Spotify = "xxxx"
-    # Bandcamp = "xxxx"
-    # Paypal = "xxxx"
-    # Fivehundredpx = "xxxx"
-    # Mix = "xxxx"
-    # Goodreads = "xxxx"
-    # Lastfm = "xxxx"
-    # Foursquare = "xxxx"
-    # Hackernews = "xxxx"
-    # Kickstarter = "xxxx"
-    # Patreon = "xxxx"
-    # Steam = "xxxx"
-    # Twitch = "xxxx"
-    # Strava = "xxxx"
-    # Skype = "xxxx"
-    # Whatsapp = "xxxx"
-    # Zhihu = "xxxx"
-    # Douban = "xxxx"
-    # Angellist = "xxxx"
-    # Slidershare = "xxxx"
-    # Jsfiddle = "xxxx"
-    # Deviantart = "xxxx"
-    # Behance = "xxxx"
-    # Dribble = "xxxx"
-    # Wordpress = "xxxx"
-    # Vine = "xxxx"
-    # Googlescholar = "xxxx"
-    # Researchgate = "xxxx"
-    # Mastodon = "@xxxx"
-    # MastodonPrefix = "https://mastodon.technology"
-    # Thingiverse = "xxxx"
-    # Devto = "xxxx"
-    # Gitea = "xxxx"
-    # XMPP = "xxxx@example.com"
-    # Matrix = "xxxx"
-    # Bilibili = "xxxx"
-
-  # Page config
-  [params.page]
-    # whether to show social share links in post page
-    socialShare = true
-    # whether to show link to Raw Markdown content of the post
-    linkToMarkdown = true
-
-  # Social Share Links in post page
-  [params.share]
-    enable = true
-    Twitter = true
-    Facebook = true
-    Linkedin = true
-    Whatsapp = true
-    Pinterest = true
-    Tumblr = true
-    HackerNews = true
-    # Reddit = true
-    # VK = true
-    # Buffer = true
-    # Xing = true
-    # Line = true
-    # Instapaper = true
-    # Pocket = true
-    # Digg = true
-    # Stumbleupon = true
-    # Flipboard = true
-    # Weibo = true
-    # Renren = true
-    # Myspace = true
-    # Blogger = true
-    # Baidu = true
-    # Odnoklassniki = true
-    # Evernote = true
-    # Skype = true
-    # Trello = true
-    # Mix = true
-
-  # mathematical formulas (KaTeX)
-  [params.math]
-    enable = true
-    blockLeftDelimiter = ""
-    blockRightDelimiter = ""
-    inlineLeftDelimiter = "$"
-    inlineRightDelimiter = "$"
-    # KaTeX extension copy_tex
-    copyTex = true
-    # KaTeX extension mhchem
-    mhchem = true
-
-  # CSS and JS Files CDN
-  [params.cdn]
-    ## for example '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">'
-    fontawesomeFreeCSS = ''
-    animateCSS = ''
-    gitalkCSS = ''
-    gitalkJS = ''
-    valineJS = ''
-    lazysizesJS = ''
-    smoothScrollJS = ''
-    sharerJS = ''
-    katexCSS = ''
-    katexJS = ''
-    katexAutoRenderJS = ''
-    katexCopyTexCSS = ''
-    katexCopyTexJS = ''
-    katexMhchemJS = ''
-    mermaidJS = ''
-    echartsJS = ''
-    echartsMacaronsJS = ''
-    typeitJS = ''
-    aplayerCSS = ''
-    aplayerJS = ''
-    metingJS = ''
-
-  # site verification code for Google/Bing/Yandex/Pinterest/Baidu
-  [params.verification]
-    google = ""
-    bing = ""
-    yandex = ""
-    pinterest = ""
-    baidu = ""
-
-  # Publisher Info just for SEO
-  [params.publisher]
-    name = "xxxx"
-    [params.publisher.logo]
-      url = "logo.png"
-      width = 127
-      height = 40
-
-  # Website Log Info just for SEO
-  [params.logo]
-    url = "logo.png"
-    width = 127
-    height = 40
-
-  # Website Image Info just for SEO
-  [params.image]
-    url = "cover.png"
-    width = 800
-    height = 600
-
-  # Comment Config
-  [params.comment]
-    enable = true
-
-    # Disqus Comment Config (https://disqus.com/)
-    [params.comment.disqus]
-      # Disqus shortname to use Disqus in posts
-      shortname = "dillonzq"
-
-    # Gittalk Comment Config (https://github.com/gitalk/gitalk)
-    [params.comment.gitalk]
-      owner = ""
-      repo = ""
-      clientId = ""
-      clientSecret = ""
-
-    # Valine Comment Config (https://github.com/xCss/Valine)
-    [params.comment.valine]
-      enable = false
-      appId = ""
-      appKey = ""
-      placeholder = "Your comment ..."
-      notify = false
-      verify = true
-      avatar = "mp"
-      # meta= ""
-      pageSize = 10
-      visitor = true
-      recordIP = true
-
-    # Facebook Comment Config (https://developers.facebook.com/docs/plugins/comments)
-    [params.comment.facebook]
-      enable = false
-      width = "100%"
-      numPosts = 10
-      appId = ""
-      languageCode = "en_US"
+  # posts = ":year/:month/:filename"
+  posts = ":filename"
 
 # Privacy Info (https://gohugo.io/about/hugo-and-gdpr/)
+# 隐私信息设置 (https://gohugo.io/about/hugo-and-gdpr/)
 [privacy]
   [privacy.googleAnalytics]
     anonymizeIP = true
@@ -371,17 +664,20 @@ dateFormatToUse = "2006-01-02"
     privacyEnhanced = true
 
 # Options to make output .md files
+# 用于输出 Markdown 格式文档的设置
 [mediaTypes]
   [mediaTypes."text/plain"]
     suffixes = ["md"]
 
 # Options to make output .md files
+# 用于输出 Markdown 格式文档的设置
 [outputFormats.MarkDown]
   mediaType = "text/plain"
   isPlainText = true
   isHTML = false
 
 # Options to make hugo output files
+# 用于 Hugo 输出文档的设置
 [outputs]
   home = ["HTML", "RSS"]
   page = ["HTML", "MarkDown"]

exampleSite/config/css/_custom.scss

@@ -2,14 +2,3 @@
 // Custom style
 // 自定义样式
 // ==============================
-// You can override the variables in assets/css/_variables.scss to customize the style
-// 您可以覆盖 assets/css/_variables.scss 中的变量以自定义样式
-
-@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
-
-$global-font-family: Lato, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft Yahei, Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji;
-
-
-@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
-
-$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;

exampleSite/config/css/_override.scss

@@ -1,9 +1,9 @@
 // ==============================
-// Custom style
-// 自定义样式
+// Override Variables
+// 覆盖变量
 // ==============================
 // You can override the variables in assets/css/_variables.scss to customize the style
-// 您可以覆盖 assets/css/_variables.scss 中的变量以自定义样式
+// 您可以覆盖 assets/css/_variables.scss 中的变量
 
 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
 

exampleSite/content/posts/documentation.en.md

@@ -0,0 +1,50 @@
+---
+title: "Documentation"
+date: 2020-02-18T21:29:01+08:00
+lastmod: 2020-02-18T21:29:01+08:00
+draft: true
+author: ""
+authorLink: ""
+description: ""
+license: ""
+
+tags: []
+categories: []
+hiddenFromHomePage: false
+
+featuredImage: ""
+featuredImagePreview: ""
+
+toc: false
+autoCollapseToc: true
+math: false
+comment: true
+---
+
+<!--more-->
+
+```
+content
+├── level-one
+│   ├── level-two
+│   │   ├── level-three
+│   │   │   ├── level-four
+│   │   │   │   ├── _index.md       <-- /level-one/level-two/level-three/level-four
+│   │   │   │   ├── page-4-a.md     <-- /level-one/level-two/level-three/level-four/page-4-a
+│   │   │   │   ├── page-4-b.md     <-- /level-one/level-two/level-three/level-four/page-4-b
+│   │   │   │   └── page-4-c.md     <-- /level-one/level-two/level-three/level-four/page-4-c
+│   │   │   ├── _index.md           <-- /level-one/level-two/level-three
+│   │   │   ├── page-3-a.md         <-- /level-one/level-two/level-three/page-3-a
+│   │   │   ├── page-3-b.md         <-- /level-one/level-two/level-three/page-3-b
+│   │   │   └── page-3-c.md         <-- /level-one/level-two/level-three/page-3-c
+│   │   ├── _index.md               <-- /level-one/level-two
+│   │   ├── page-2-a.md             <-- /level-one/level-two/page-2-a
+│   │   ├── page-2-b.md             <-- /level-one/level-two/page-2-b
+│   │   └── page-2-c.md             <-- /level-one/level-two/page-2-c
+│   ├── _index.md                   <-- /level-one
+│   ├── page-1-a.md                 <-- /level-one/page-1-a
+│   ├── page-1-b.md                 <-- /level-one/page-1-b
+│   └── page-1-c.md                 <-- /level-one/page-1-c
+├── _index.md                       <-- /
+└── page-top.md                     <-- /page-top
+```

exampleSite/content/posts/documentation.zh.md

@@ -0,0 +1,24 @@
+---
+title: "Documentation"
+date: 2020-02-18T21:40:32+08:00
+lastmod: 2020-02-18T21:40:32+08:00
+draft: true
+author: ""
+authorLink: ""
+description: ""
+license: ""
+
+tags: []
+categories: []
+hiddenFromHomePage: false
+
+featuredImage: ""
+featuredImagePreview: ""
+
+toc: false
+autoCollapseToc: true
+math: false
+comment: true
+---
+
+<!--more-->

exampleSite/zh/config.toml

@@ -1,390 +0,0 @@
-baseURL = "https://example.com/"
-# 网站语言
-languageCode = "zh"
-# [en, zh, ...] 设定主题的国际化
-defaultContentLanguage = "zh"
-# 网站标题
-title = "LoveIt 主题"
-# 主题
-theme = "LoveIt"
-# 是否使用 git 信息来生成文章的上次修改时间
-enableGitInfo = false
-# 是否包括中日韩文字
-hasCJKLanguage = true
-# 默认每页列表显示的文章数目
-paginate = 12
-# 是否使用 emoji 代码
-enableEmoji = true
-# 是否使用 robots.txt
-enableRobotsTXT = true
-# [UA-XXXXXXXX-X] 谷歌分析代号
-googleAnalytics = ""
-# 版权描述，仅仅用于 SEO
-copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
-# 日期格式
-dateFormatToUse = "2006-01-02"
-
-# Hugo 解析文档的配置
-[markup]
-  # 代码高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
-  [markup.highlight]
-    codeFences = true
-    guessSyntax = true
-    lineNoStart = 1
-    lineNos = true
-    lineNumbersInTable = true
-    noClasses = false
-    style = "monokai"
-    tabWidth = 4
-  # Goldmark 是 Hugo 0.60 以来的默认 Markdown 解析库
-  [markup.goldmark]
-    [markup.goldmark.extensions]
-      definitionList = true
-      footnote = true
-      linkify = true
-      strikethrough = true
-      table = true
-      taskList = true
-      typographer = true
-    [markup.goldmark.renderer]
-      # 是否在文档中直接使用 HTML 标签
-      unsafe = true
-  # 目录设置
-  [markup.tableOfContents]
-    startLevel = 2
-    endLevel = 6
-
-# 作者信息
-[author]
-  name = "xxxx"
-  link = ""
-
-# 网站地图信息
-[sitemap]
-  changefreq = "weekly"
-  filename = "sitemap.xml"
-  priority = 0.5
-
-# Permalinks 信息 (https://gohugo.io/content-management/urls/#permalinks)
-[Permalinks]
-  posts = ":year/:month/:filename"
-
-# 菜单信息
-[menu]
-  [[menu.main]]
-    identifier = "posts"
-    name = "文章"
-    url = "posts"
-    weight = 1
-
-  [[menu.main]]
-    identifier = "tags"
-    name = "标签"
-    url = "tags"
-    weight = 2
-
-  [[menu.main]]
-    identifier = "categories"
-    name = "分类"
-    url = "categories"
-    weight = 3
-
-  [[menu.main]]
-    identifier = "about"
-    name = "关于"
-    url = "about"
-    weight = 4
-
-  [[menu.main]]
-    identifier = "en"
-    pre = '<i class="fas fa-language fa-fw"></i>'
-    name = ""
-    title = "English"
-    url = "https://hugo-loveit-en.netlify.com"
-    weight = 5
-
-[params]
-  # LoveIt 主题版本
-  version = "0.1.X"
-  # 网站描述
-  description = "关于 LoveIt 主题"
-  # 网站关键词
-  keywords = ["Theme", "Hugo"]
-  # 网站默认主题 ("light", "dark", "auto")
-  defaultTheme = "auto"
-  # 用于生成文章上次修改时间的公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效
-  gitRepo = ""
-
-  # 页面头部导航栏信息
-  [params.header]
-    # 桌面端导航栏模式 ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # 移动端导航栏模式 ("fixed", "normal", "auto")
-    mobileMode = "auto"
-
-  # 页面底部版权信息设置
-  [params.footer]
-    # 网站创立年份
-    since = 2019
-    # ICP 备案信息，仅在中国使用 (允许使用 HTML 格式)
-    icp = ""
-    # 许可协议信息 (允许使用 HTML 格式)
-    license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
-
-  # 主页信息设置
-  [params.home]
-    # 主页个人信息
-    [params.home.profile]
-      enable = true
-      # Gravatar 邮箱，用于优先在主页显示的头像
-      gravatarEmail = ""
-      # 主页显示头像的 URL
-      avatarURL = "images/avatar.png"
-      # 主页显示的网站副标题
-      subtitle = "一个简洁、优雅且高效的 Hugo 主题"
-      # 是否为副标题显示打字机动画
-      typeit = true
-      # 是否显示社交账号
-      social = true
-    # 主页文章列表
-    [params.home.posts]
-      enable = true
-      # 主页每页显示文章数量
-      paginate = 6
-      # 当你没有在文章前面设置 "hiddenFromHomePage" 时的默认行为
-      defaultHiddenFromHomePage = false
-
-  # 主页的社交信息设置
-  [params.social]
-    GitHub = "xxxx"
-    # Linkedin = "xxxx"
-    Twitter = "xxxx"
-    Instagram = "xxxx"
-    Email = "xxxx@outlook.com"
-    # Facebook = "xxxx"
-    # Telegram = "xxxx"
-    # Medium = "xxxx"
-    # Gitlab = "xxxx"
-    # Youtubelegacy = "xxxx"
-    # Youtubecustom = "xxxx"
-    # Youtubechannel = "xxxx"
-    # Tumblr ="xxxx"
-    # Quora = "xxxx"
-    # Keybase = "xxxx"
-    # Pinterest = "xxxx"
-    # Reddit = "xxxx"
-    # Codepen = "xxxx"
-    # FreeCodeCamp = "xxxx"
-    # Bitbucket = "xxxx"
-    # Stackoverflow = "xxxx"
-    Weibo = "xxxx"
-    # Odnoklassniki = "xxxx"
-    # VK = "xxxx"
-    # Flickr = "xxxx"
-    # Xing = "xxxx"
-    # Snapchat = "xxxx"
-    # Soundcloud = "xxxx"
-    # Spotify = "xxxx"
-    # Bandcamp = "xxxx"
-    # Paypal = "xxxx"
-    # Fivehundredpx = "xxxx"
-    # Mix = "xxxx"
-    # Goodreads = "xxxx"
-    # Lastfm = "xxxx"
-    # Foursquare = "xxxx"
-    # Hackernews = "xxxx"
-    # Kickstarter = "xxxx"
-    # Patreon = "xxxx"
-    # Steam = "xxxx"
-    # Twitch = "xxxx"
-    # Strava = "xxxx"
-    # Skype = "xxxx"
-    # Whatsapp = "xxxx"
-    Zhihu = "xxxx"
-    Douban = "xxxx"
-    # Angellist = "xxxx"
-    # Slidershare = "xxxx"
-    # Jsfiddle = "xxxx"
-    # Deviantart = "xxxx"
-    # Behance = "xxxx"
-    # Dribble = "xxxx"
-    # Wordpress = "xxxx"
-    # Vine = "xxxx"
-    # Googlescholar = "xxxx"
-    # Researchgate = "xxxx"
-    # Mastodon = "xxxx"
-    # MastodonPrefix = "https://mastodon.technology/"
-    # Thingiverse = "xxxx"
-    # Devto = "xxxx"
-    # Gitea = "xxxx"
-    # XMPP = "xxxx"
-    # Matrix = "xxxx"
-    Bilibili = "xxxx"
-
-  # 文章页面配置
-  [params.page]
-    # 在文章页面是否使用分享功能
-    socialShare = true
-    # 是否在文章页面显示原始 Markdown 文档链接
-    linkToMarkdown = true
-
-  # 文章页面的分享信息设置
-  [params.share]
-    enable = true
-    Twitter = true
-    Facebook = true
-    # Linkedin = true
-    # Whatsapp = true
-    # Pinterest = true
-    # Tumblr = true
-    # HackerNews = true
-    # Reddit = true
-    # VK = true
-    # Buffer = true
-    # Xing = true
-    # Line = true
-    Instapaper = true
-    Pocket = true
-    # Digg = true
-    # Stumbleupon = true
-    # Flipboard = true
-    Weibo = true
-    Renren = true
-    # Myspace = true
-    # Blogger = true
-    Baidu = true
-    # Odnoklassniki = true
-    Evernote = true
-    # Skype = true
-    # Trello = true
-    # Mix = true
-
-  # 数学公式 (KaTeX https://katex.org/)
-  [params.math]
-    enable = true
-    blockLeftDelimiter = ""
-    blockRightDelimiter = ""
-    inlineLeftDelimiter = "$"
-    inlineRightDelimiter = "$"
-    # KaTeX 插件 copy_tex
-    copyTex = true
-    # KaTeX 插件 mhchem
-    mhchem = true
-
-  # CSS 和 JS 文件的 CDN 设置
-  [params.cdn]
-    ## 例如 '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">'
-    fontawesomeFreeCSS = ''
-    animateCSS = ''
-    gitalkCSS = ''
-    gitalkJS = ''
-    valineJS = ''
-    lazysizesJS = ''
-    smoothScrollJS = ''
-    sharerJS = ''
-    katexCSS = ''
-    katexJS = ''
-    katexAutoRenderJS = ''
-    katexCopyTexCSS = ''
-    katexCopyTexJS = ''
-    katexMhchemJS = ''
-    mermaidJS = ''
-    echartsJS = ''
-    echartsMacaronsJS = ''
-    typeitJS = ''
-    aplayerCSS = ''
-    aplayerJS = ''
-    metingJS = ''
-
-  # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
-  [params.verification]
-    google = ""
-    bing = ""
-    yandex = ""
-    pinterest = ""
-    baidu = ""
-
-  # 出版者信息，仅用于 SEO
-  [params.publisher]
-    name = "xxxx"
-    [params.publisher.logo]
-      url = "logo.png"
-      width = 127
-      height = 40
-
-  # 网站图标信息，仅用于 SEO
-  [params.logo]
-    url = "logo.png"
-    width = 127
-    height = 40
-
-  #  网站图标信息，仅用于 SEO
-  [params.image]
-    url = "cover.png"
-    width = 800
-    height = 600
-
-  # 评论系统设置
-  [params.comment]
-    enable = true
-
-    # Disqus 评论系统设置 (https://disqus.com/)
-    [params.comment.disqus]
-      # Disqus 的用户名，用来在文章中启用 Disqus 评论系统
-      shortname = "dillonzq"
-
-    # Gittalk 评论系统设置 (https://github.com/gitalk/gitalk)
-    [params.comment.gitalk]
-      owner = ""
-      repo = ""
-      clientId = ""
-      clientSecret = ""
-
-    # Valine 评论系统设置 (https://github.com/xCss/Valine)
-    [params.comment.valine]
-      enable = false
-      appId = ""
-      appKey = ""
-      placeholder = "你的评论 ..."
-      notify = false
-      verify = true
-      avatar = "mp"
-      # meta= ""
-      pageSize = 10
-      visitor = true
-      recordIP = true
-
-    # Facebook 评论系统设置 (https://developers.facebook.com/docs/plugins/comments)
-    [params.comment.facebook]
-      enable = false
-      width = "100%"
-      numPosts = 10
-      appId = ""
-      languageCode = "en_US"
-
-# 隐私信息设置 (https://gohugo.io/about/hugo-and-gdpr/)
-[privacy]
-  [privacy.googleAnalytics]
-    anonymizeIP = true
-
-  [privacy.youtube]
-    privacyEnhanced = true
-
-# 用于输出 Markdown 格式文档的设置
-[mediaTypes]
-  [mediaTypes."text/plain"]
-    suffixes = ["md"]
-
-# 用于输出 Markdown 格式文档的设置
-[outputFormats.MarkDown]
-  mediaType = "text/plain"
-  isPlainText = true
-  isHTML = false
-
-# 用于 Hugo 输出文档的设置
-[outputs]
-  home = ["HTML", "RSS"]
-  page = ["HTML", "MarkDown"]
-  section = ["HTML", "RSS"]
-  taxonomy = ["HTML", "RSS"]
-  taxonomyTerm = ["HTML"]

exampleSite/zh/static/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#2d89ef</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

exampleSite/zh/static/safari-pinned-tab.svg

@@ -1,28 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="560.000000pt" height="560.000000pt" viewBox="0 0 560.000000 560.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,560.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2445 5384 c-117 -28 -184 -56 -287 -122 -144 -93 -268 -261 -281
--380 -4 -39 -26 -71 -50 -72 -4 0 -34 -27 -67 -60 -198 -201 -262 -716 -130
--1061 11 -30 20 -54 20 -55 0 0 -21 -11 -47 -23 -56 -26 -109 -100 -119 -166
--3 -23 -4 -122 -2 -221 3 -195 7 -208 66 -271 17 -17 48 -39 69 -48 58 -25 68
--31 68 -41 3 -38 21 -122 42 -189 90 -286 268 -507 525 -652 l68 -38 0 -182 0
--183 -69 0 c-44 0 -71 4 -73 12 -3 9 -16 9 -54 0 -27 -6 -100 -22 -162 -36
--312 -70 -521 -184 -738 -400 -212 -213 -330 -428 -395 -719 -16 -68 -22 -142
--26 -284 l-5 -193 2001 0 2001 0 0 154 c0 436 -144 777 -453 1072 -200 192
--440 316 -712 369 -49 9 -94 21 -100 25 -17 14 -115 23 -115 11 0 -7 -27 -11
--70 -11 l-70 0 0 184 c0 175 1 185 20 191 79 25 311 218 398 331 100 130 177
-318 218 532 3 13 12 25 22 28 40 12 88 41 115 69 59 61 62 74 65 281 2 119 -1
-207 -8 232 -17 64 -68 123 -125 146 -28 11 -52 21 -53 22 -2 1 6 15 17 31 24
-32 72 168 92 258 8 37 13 131 13 245 1 161 -2 196 -22 270 -30 113 -100 253
--162 322 l-50 56 35 52 c100 149 79 382 -43 478 -82 65 -172 67 -317 8 -197
--80 -279 -82 -550 -11 -163 43 -192 48 -310 50 -87 2 -150 -1 -190 -11z"/>
-</g>
-</svg>

exampleSite/zh/static/site.webmanifest

@@ -1,19 +0,0 @@
-{
-    "name": "LoveIt",
-    "short_name": "LoveIt",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
-}

layouts/404.html

@@ -7,7 +7,7 @@
         <h1 id="error-emoji"></h1>
         <p class="error-text">
             {{- T "pageNotFoundText" -}}&nbsp;
-            <a href="{{ .Site.BaseURL }}" title="{{ T "backToHome" }}">↩︎</a>
+            <a href="{{ `/` | relLangURL }}" title="{{ T `backToHome` }}">↩︎</a>
         </p>
     </div>
     <script>

layouts/_default/summary.html

@@ -13,25 +13,30 @@
     </h1>
 
     {{- /* Meta */ -}}
-    <div class="meta">
+    <div class="post-meta">
         {{- $author := .Params.author | default .Site.Author.name -}}
-        {{- $authorLink := .Params.authorLink | default .Site.Author.link | default .Site.BaseURL -}}
-        <a class="author" href="{{ $authorLink }}" rel="author" target="_blank">
-            <i class="fas fa-user-circle fa-fw"></i>{{ $author }}
-        </a>
+        {{- $authorLink := .Params.authorLink | default .Site.Author.link | default (relLangURL "/") -}}
+        <span class="post-author">
+            <a class="author" href="{{ $authorLink }}" rel="author" target="_blank">
+                <i class="fas fa-user-circle fa-fw"></i>{{ $author }}
+            </a>
+        </span>
 
         {{- $publish_date := .PublishDate.Format (.Site.Params.dateFormatToUse | default "2006-01-02") -}}
-        {{ T "publish" }}  <time datetime={{ $publish_date }}>{{ $publish_date }}</time>&nbsp;
+        &nbsp;<span class="post-publish">
+            {{ T "publish" }}&nbsp;<time datetime={{ $publish_date }}>{{ $publish_date }}</time>
+        </span>
 
         {{- with .Params.categories -}}
-            <span class="post-category">
-                {{- T "included" -}}&nbsp;
+            &nbsp;<span class="post-category">
+                {{- T "included" -}}
                 {{- range . -}}
-                    {{- $name := . -}}
-                    {{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
-                        <i class="far fa-folder fa-fw"></i>
-                        <a href="{{ .Permalink }}">{{ $name | humanize }}</a>
-                    {{- end -}}
+                    &nbsp;
+                    <span>
+                        <a href="{{ `/categories/` | relLangURL }}{{ urlize .}}">
+                            <i class="far fa-folder fa-fw"></i>{{ . | humanize }}
+                        </a>
+                    </span>
                 {{- end -}}
             </span>
         {{- end -}}
@@ -48,8 +53,10 @@
         {{- with .Params.tags -}}
             <div class="post-tags">
                 {{- range . -}}
-                    <span class="tag">
-                        &nbsp;<a href="{{ "tags/" | absURL }}{{ . | urlize }}/"><i class="fas fa-tag fa-fw"></i>&nbsp;{{ . }}</a>
+                    &nbsp;<span>
+                        <a href="{{ `/tags/` | relLangURL }}{{ urlize .}}">
+                            <i class="fas fa-tag fa-fw"></i>{{ . }}
+                        </a>
                     </span>
                 {{- end -}}
             </div>

layouts/partials/footer.html

@@ -18,7 +18,7 @@
 
             {{- /* Author */ -}}
             {{- with .Site.Author.name -}}
-                <span class="author" itemprop="copyrightHolder">&nbsp;<a href="{{ $.Site.Author.link | default $.Site.BaseURL }}" target="_blank">{{ . }}</a></span>
+                <span class="author" itemprop="copyrightHolder">&nbsp;<a href="{{ $.Site.Author.link | default (relLangURL `/`) }}" target="_blank">{{ . }}</a></span>
             {{- end -}}
 
             {{- /* License */ -}}

layouts/partials/head/link.html

@@ -22,10 +22,10 @@
 
 {{- /* style.min.css */ -}}
 {{- $res := resources.Get "css/style.template.scss" -}}
-{{- $options := dict "targetPath" "css/style.min.css" "outputStyle" "compressed" "enableSourceMap" true -}}
-{{- if fileExists "config/css/_custom.scss" -}}
-    {{- $options = dict "includePaths" (slice "config/css") | merge $options -}}
-{{- end -}}
+{{- $options := dict "targetPath" "css/style.min.css" -}}
+{{- $options  = dict "includePaths" (slice "config/css") | merge $options -}}
+{{- $options  = dict "outputStyle" "compressed" | merge $options -}}
+{{- $options  = dict "enableSourceMap" true | merge $options -}}
 {{- $res = resources.ExecuteAsTemplate "style.scss" . $res | toCSS $options -}}
 <link rel="stylesheet" href="{{ $res.RelPermalink }}">
 

layouts/partials/head/seo.html

@@ -20,7 +20,7 @@
     {
         "@context": "http://schema.org",
         "@type": "WebSite",
-        "url": "{{ .Site.BaseURL }}",
+        "url": "{{ relLangURL `/` }}",
         {{- with .Site.Author.name -}}
             "author": {
                 "@type": "Person",

layouts/partials/header.html

@@ -2,14 +2,13 @@
 <header class="desktop" id="header-desktop">
     <div class="header-wrapper">
         <div class="header-title animated bounceIn">
-            <a href="{{ .Site.BaseURL }}">
+            <a href="{{ `/` | relLangURL }}">
                 {{- .Site.Title -}}
             </a>
         </div>
         <div class="menu">
-            {{- $currentPage := . }}
             {{- range .Site.Menus.main -}}
-                <a class="menu-item{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) | or (eq $currentPage.RelPermalink .URL) }} active{{ end }}" href="{{ .URL | absLangURL }}" title="{{ .Title }}">
+                <a class="menu-item{{ if $.IsMenuCurrent "main" . | or ($.HasMenuCurrent "main" .) | or (.URL | relLangURL | string | eq $.RelPermalink ) }} active{{ end }}" href="{{ .URL | relLangURL }}"{{ with .Title }} title="{{ . }}"{{ end }}>
                     {{- .Pre | safeHTML }}{{ .Name -}}
                 </a>
             {{- end -}}
@@ -25,18 +24,18 @@
     <div class="header-wrapper">
         <div class="header-container">
             <div class="header-title animated bounceIn">
-                <a href="{{ .Site.BaseURL }}">
+                <a href="{{ `/` | relLangURL }}">
                     {{- .Site.Title -}}
                 </a>
             </div>
-            <div class="menu-toggle" id="menu-toggle">
+            <div class="menu-toggle" id="menu-toggle-mobile">
                 <span></span><span></span><span></span>
             </div>
         </div>
         <div class="menu" id="menu-mobile">
             {{- $currentPage := . -}}
             {{- range .Site.Menus.main -}}
-                <a class="menu-item" href="{{ .URL | absLangURL }}" title="{{ .Title }}">
+                <a class="menu-item" href="{{ .URL | relLangURL }}" title="{{ .Title }}">
                     {{- .Pre | safeHTML }}{{ .Name -}}
                 </a>
             {{- end -}}

layouts/partials/home/social.html

@@ -302,7 +302,7 @@
 {{- /* 044: 知乎 */ -}}
 {{- with .Site.Params.Social.Zhihu -}}
     {{- $options := dict "href" (printf "https://www.zhihu.com/people/%s" .) "title" "知乎" -}}
-    {{- $options = dict "class" "fab fa-zhihu fa-fw" | merge $options -}}
+    {{- $options = dict "class" "loveit it-zhihu-line" "type" "other" "scratch" $.Scratch | merge $options -}}
     {{- partial "function/icon-link.html" $options -}}
 {{- end -}}
 

layouts/partials/post/footer.html

@@ -41,14 +41,16 @@
         <section>
             {{- with .Params.tags -}}
                 {{- range . -}}
-                    <span class="tag">
-                        <a href="{{ "tags/" | absURL }}{{ . | urlize }}/"><i class="fas fa-tag fa-fw"></i>&nbsp;{{ . }}</a>&nbsp;
-                    </span>
+                    <span>
+                        <a href="{{ `/tags/` | relLangURL }}{{ urlize .}}">
+                            <i class="fas fa-tag fa-fw"></i>{{ . }}
+                        </a>
+                    </span>&nbsp;
                 {{- end -}}
             {{- end -}}
         </section>
         <section>
-            <span><a href="javascript:window.history.back();">{{ T "back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{ .Site.BaseURL }}">{{ T "home" }}</a></span>
+            <span><a href="javascript:window.history.back();">{{ T "back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{  `/` | relLangURL  }}">{{ T "home" }}</a></span>
         </section>
     </div>
 

layouts/partials/script.html

@@ -90,15 +90,16 @@
         document.addEventListener("DOMContentLoaded", function () {
             renderMathInElement(document.body, {
                 delimiters: [
+                    { left: "$", right: "$", display: false },
                     { left: "$$", right: "$$", display: true },
                     { left: "\\(", right: "\\)", display: false },
                     { left: "\\[", right: "\\]", display: true },
-                    {{- if and $math.blockLeftDelimiter $math.blockRightDelimiter -}}
-                        { left: "{{ $math.blockLeftDelimiter }}", right: "{{ $math.blockRightDelimiter }}", display: true },
-                    {{- end -}}
                     {{- if and $math.inlineLeftDelimiter $math.inlineRightDelimiter -}}
                         { left: "{{ $math.inlineLeftDelimiter }}", right: "{{ $math.inlineRightDelimiter }}", display: false },
                     {{- end -}}
+                    {{- if and $math.blockLeftDelimiter $math.blockRightDelimiter -}}
+                        { left: "{{ $math.blockLeftDelimiter }}", right: "{{ $math.blockRightDelimiter }}", display: true },
+                    {{- end -}}
                 ]
             });
         });
@@ -161,7 +162,6 @@
                     {{- $key }}: {{ $var | safeJS -}},
                 {{- end -}}
             };
-            window.echartsArr = [];
         </script>
     {{- end -}}
 {{- end -}}

layouts/posts/single.html

@@ -6,26 +6,31 @@
         <h1 class="single-title animated flipInX">{{ .Title }}</h1>
 
         {{- /* Meta */ -}}
-        <div class="meta">
-            <div class="meta-line">
+        <div class="post-meta">
+            <div class="post-meta-line">
                 {{- $author := .Params.author | default .Site.Author.name -}}
-                {{- $authorLink := .Params.authorLink | default .Site.Author.link | default .Site.BaseURL -}}
-                <a class="author" href="{{ $authorLink }}" rel="author" target="_blank">
-                    <i class="fas fa-user-circle fa-fw"></i>{{ $author }}
-                </a>&nbsp;
+                {{- $authorLink := .Params.authorLink | default .Site.Author.link | default (relLangURL "/") -}}
+                <span class="post-author">
+                    <a class="author" href="{{ $authorLink }}" rel="author" target="_blank">
+                        <i class="fas fa-user-circle fa-fw"></i>{{ $author }}
+                    </a>
+                </span>
+
                 {{- with .Params.categories -}}
-                    <span class="post-category">
-                        {{- T "included" -}}&nbsp;
+                    &nbsp;<span class="post-category">
+                        {{- T "included" -}}
                         {{- range . -}}
-                            {{- $name := . -}}
-                            {{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
-                                <i class="far fa-folder fa-fw"></i><a href="{{ .Permalink }}">{{ $name | humanize }}</a>&nbsp;
-                            {{- end -}}
+                            &nbsp;
+                            <span>
+                                <a href="{{ `/categories/` | relLangURL }}{{ urlize .}}">
+                                    <i class="far fa-folder fa-fw"></i>{{ . | humanize }}
+                                </a>
+                            </span>
                         {{- end -}}
                     </span>
                 {{- end -}}
             </div>
-            <div class="meta-line">
+            <div class="post-meta-line">
                 {{- $publish_date := .PublishDate.Format (.Site.Params.dateFormatToUse | default "2006-01-02") -}}
                 <i class="far fa-calendar-alt fa-fw"></i><time datetime={{ $publish_date }}>{{ $publish_date }}</time>&nbsp;
                 <i class="fas fa-pencil-alt fa-fw"></i>{{ T "wordCount" .WordCount }}&nbsp;
@@ -47,28 +52,24 @@
 
         {{- /* TOC */ -}}
         {{- if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}}
-            <aside class="post-toc" id="post-toc">
-                <h2 class="post-toc-title">{{ T "toc" }}</h2>
+            <div class="toc-auto" id="toc-auto">
+                <h2 class="toc-title">{{ T "toc" }}</h2>
                 {{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default true }}
-                <div class="post-toc-content{{ if not (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false)) }} always-active{{ end }}">
-                    {{- .TableOfContents -}}
-                </div>
-            </aside>
-            <aside class="post-toc-mobile" id="post-toc-mobile">
+                <div class="toc-content{{ if not (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false)) }} always-active{{ end }}" id="toc-content-auto"></div>
+            </div>
+            <div class="toc-static" id="toc-static">
                 <details>
                     <summary>
-                        <div class="post-toc-title">
+                        <div class="toc-title">
                             <span>{{ T "toc" }}</span>
                             <span><i class="details icon fas fa-angle-down"></i></span>
                         </div>
                     </summary>
-                    <div class="post-toc-content">
-                        {{- $toc := .TableOfContents -}}
-                        {{- $toc = replaceRE `id="TableOfContents"` `id="TableOfContentsMobile"` $toc -}}
-                        {{- $toc | safeHTML -}}
+                    <div class="toc-content" id="toc-content-static">
+                        {{- .TableOfContents -}}
                     </div>
                 </details>
-            </aside>
+            </div>
         {{- end -}}
 
         {{- /* Content */ -}}

resources/_gen/assets/scss/css/mermaid.scss_4fddb88d50abca04f2e7ef77f0bb1c3b.json

@@ -0,0 +1 @@
+{"Target":"css/mermaid.css","MediaType":"text/css","Data":{}}

src/js/theme.js

@@ -12,20 +12,41 @@
         getScrollTop() {
             return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
         }
+
+        isMobile() {
+            return window.matchMedia('only screen and (max-width: 560px)').matches;
+        }
+
+        isTocStatic() {
+            return window.matchMedia('only screen and (max-width: 960px)').matches;
+        }
     }
 
     class Theme {
         constructor() {
             this.util = new Util();
-            this.scrollTop = 0;
-            this.scrollEvents = [];
+            this.newScrollTop = this.util.getScrollTop();
+            this.oldScrollTop = this.newScrollTop;
+            this.scrollEventSet = new Set();
+            this.resizeEventSet = new Set();
         }
 
-        initMobileMenu() {
-            document.getElementById('menu-toggle').onclick = () => {
-                document.getElementById('menu-toggle').classList.toggle('active');
-                document.getElementById('menu-mobile').classList.toggle('active');
-            };
+        initMenuMobile() {
+            const menuToggleMobile = document.getElementById('menu-toggle-mobile');
+            const menuMobile = document.getElementById('menu-mobile');
+            this._menuMobileOnScroll = this._menuMobileOnScroll || (() => {
+                menuToggleMobile.classList.remove('active');
+                menuMobile.classList.remove('active');
+            });
+            if (this.util.isMobile()) {
+                menuToggleMobile.onclick = () => {
+                    menuToggleMobile.classList.toggle('active');
+                    menuMobile.classList.toggle('active');
+                };
+                this.scrollEventSet.add(this._menuMobileOnScroll);
+            } else {
+                this.scrollEventSet.delete(this._menuMobileOnScroll);
+            }
         }
 
         initSwitchTheme() {
@@ -80,46 +101,55 @@
             }
         }
 
-        _refactorToc(toc) {
-            this.util.forEach(toc.querySelectorAll('a:first-child'), (link) => {
-                link.classList.add('toc-link');
-            });
-        }
-
-        _initTocState(tocContainer) {
-            if (window.getComputedStyle(tocContainer, null).display !== 'none') {
-                const fixed = window.desktopHeaderMode !== 'normal';
-                const fixedHeight = document.getElementById('header-desktop').getBoundingClientRect().height;
-                const TOP_SPACING = 20 + (fixed ? fixedHeight : 0);
-                const minTop = tocContainer.offsetTop;
-                const minScrollTop = minTop - TOP_SPACING + (fixed ? 0 : fixedHeight);
-                const footerTop = document.getElementById('post-footer').offsetTop;
-                const toclinks = tocContainer.getElementsByClassName('toc-link');
-                const headerLinks = document.getElementsByClassName('headerLink') || [];
-                const tocLinkLis = tocContainer.querySelectorAll('.post-toc-content li');
-                const INDEX_SPACING = 5 + (fixed ? fixedHeight : 0);
-
-                const changeTocState = () => {
-                    const scrollTop = this.util.getScrollTop();
-                    const maxTop = footerTop - tocContainer.getBoundingClientRect().height;
-                    const maxScrollTop = maxTop - TOP_SPACING + (fixed ? 0 : fixedHeight);
-                    if (scrollTop < minScrollTop) {
-                        tocContainer.style.position = 'absolute';
-                        tocContainer.style.top = `${minTop}px`;
-                    } else if (scrollTop > maxScrollTop) {
-                        tocContainer.style.position = 'absolute';
-                        tocContainer.style.top = `${maxTop}px`;
+        initToc() {
+            const tocCore = document.getElementById('TableOfContents');
+            if (tocCore === null) return;
+            if (this.util.isTocStatic()) {
+                const tocContentStatic = document.getElementById('toc-content-static');
+                if (tocCore.parentElement !== tocContentStatic) {
+                    tocCore.parentElement.removeChild(tocCore);
+                    tocContentStatic.appendChild(tocCore);
+                }
+                if (this._tocOnScroll) this.scrollEventSet.delete(this._tocOnScroll);
+            } else {
+                const tocContentAuto = document.getElementById('toc-content-auto');
+                if (tocCore.parentElement !== tocContentAuto) {
+                    tocCore.parentElement.removeChild(tocCore);
+                    tocContentAuto.appendChild(tocCore);
+                }
+                const toc = document.getElementById('toc-auto');
+                const page = document.getElementsByClassName('page')[0];
+                toc.style.maxWidth = `${page.getBoundingClientRect().left - 40}px`;
+                this._tocLinks = this._tocLinks || tocCore.getElementsByTagName('a');
+                this._tocLis = this._tocLis || tocCore.getElementsByTagName('li');
+                this._headerLinks = this._headerLinks || document.getElementsByClassName('headerLink') || [];
+                const headerIsFixed = window.desktopHeaderMode !== 'normal';
+                const headerHeight = document.getElementById('header-desktop').offsetHeight;
+                const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
+                const minTocTop = toc.offsetTop;
+                const minScrollTop = minTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
+                this._tocOnScroll = this._tocOnScroll || (() => {
+                    const footerTop = document.getElementById('post-footer').offsetTop;
+                    const maxTocTop = footerTop - toc.getBoundingClientRect().height;
+                    const maxScrollTop = maxTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
+                    if (this.newScrollTop < minScrollTop) {
+                        toc.style.position = 'absolute';
+                        toc.style.top = `${minTocTop}px`;
+                    } else if (this.newScrollTop > maxScrollTop) {
+                        toc.style.position = 'absolute';
+                        toc.style.top = `${maxTocTop}px`;
                     } else {
-                        tocContainer.style.position = 'fixed';
-                        tocContainer.style.top = `${TOP_SPACING}px`;
+                        toc.style.position = 'fixed';
+                        toc.style.top = `${TOP_SPACING}px`;
                     }
 
-                    this.util.forEach(toclinks, (link) => { link.classList.remove('active'); });
-                    this.util.forEach(tocLinkLis, (link) => { link.classList.remove('has-active'); });
-                    let activeTocIndex = headerLinks.length - 1;
-                    for (let i = 0; i < headerLinks.length - 1; i++) {
-                        const thisTop = headerLinks[i].getBoundingClientRect().top;
-                        const nextTop = headerLinks[i + 1].getBoundingClientRect().top;
+                    this.util.forEach(this._tocLinks, (link) => { link.classList.remove('active'); });
+                    this.util.forEach(this._tocLis, (link) => { link.classList.remove('has-active'); });
+                    const INDEX_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
+                    let activeTocIndex = this._headerLinks.length - 1;
+                    for (let i = 0; i < this._headerLinks.length - 1; i++) {
+                        const thisTop = this._headerLinks[i].getBoundingClientRect().top;
+                        const nextTop = this._headerLinks[i + 1].getBoundingClientRect().top;
                         if ((i == 0 && thisTop > INDEX_SPACING)
                          || (thisTop <= INDEX_SPACING && nextTop > INDEX_SPACING)) {
                             activeTocIndex = i;
@@ -127,47 +157,25 @@
                         }
                     }
                     if (activeTocIndex !== -1) {
-                        toclinks[activeTocIndex].classList.add('active');
-                        let parent = toclinks[activeTocIndex].parentElement;
-                        while (parent.tagName !== 'NAV') {
+                        this._tocLinks[activeTocIndex].classList.add('active');
+                        let parent = this._tocLinks[activeTocIndex].parentElement;
+                        while (parent !== tocCore) {
                             parent.classList.add('has-active');
                             parent = parent.parentElement.parentElement;
                         }
                     }
-                };
-                changeTocState();
-
-                if (!this._initTocOnce) {
-                    this.scrollEvents.push(changeTocState);
-                    this._initTocOnce = true;
-                }
-            }
-        }
-
-        initToc() {
-            const tocContainer = document.getElementById('post-toc');
-            if (tocContainer !== null) {
-                const toc = document.getElementById('TableOfContents');
-                if (toc === null) {
-                    tocContainer.parentElement.removeChild(tocContainer);
-                } else {
-                    this._refactorToc(toc);
-                    this._initTocState(tocContainer);
-                    window.addEventListener('resize', () => {
-                        window.setTimeout(() => {
-                            this._initTocState(tocContainer);
-                        }, 0);
-                    }, false);
-                }
+                });
+                this._tocOnScroll();
+                this.scrollEventSet.add(this._tocOnScroll);
             }
         }
 
         initMermaid() {
             if (window.mermaidMap) {
                 mermaid.initialize({startOnLoad: false, theme: null});
-                Object.keys(mermaidMap).forEach((id) => {
+                Object.keys(window.mermaidMap).forEach((id) => {
                     const element = document.getElementById(id);
-                    mermaid.mermaidAPI.render("d" + id, mermaidMap[id], (svgCode) => {
+                    mermaid.mermaidAPI.render("d" + id, window.mermaidMap[id], (svgCode) => {
                         element.innerHTML = svgCode;
                         const svg = element.firstChild;
                         svg.style.width = "100%"
@@ -178,29 +186,29 @@
 
         initEcharts() {
             if (window.echartsMap) {
-                for (let i = 0; i < echartsArr.length; i++) {
-                    echartsArr[i].dispose();
+                this._echartsArr = this._echartsArr || [];
+                for (let i = 0; i < this._echartsArr.length; i++) {
+                    this._echartsArr[i].dispose();
                 }
-                echartsArr = [];
-                Object.keys(echartsMap).forEach((id) => {
-                    let myChart = echarts.init(document.getElementById(id), window.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
-                    myChart.setOption(echartsMap[id]);
-                    echartsArr.push(myChart);
+                this._echartsArr = [];
+                Object.keys(window.echartsMap).forEach((id) => {
+                    const chart = echarts.init(document.getElementById(id), window.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
+                    chart.setOption(window.echartsMap[id]);
+                    this._echartsArr.push(chart);
                 });
-                window.addEventListener("resize", function () {
-                    this.setTimeout(() => {
-                        for (let i = 0; i < echartsArr.length; i++) {
-                            echartsArr[i].resize();
-                        }
-                    }, 0);
-                }, false);
+                this._echartsOnResize = this._echartsOnResize || (() => {
+                    for (let i = 0; i < this._echartsArr.length; i++) {
+                        this._echartsArr[i].resize();
+                    }
+                });
+                this.resizeEventSet.add(this._echartsOnResize);
             }
         }
 
         initTypeit() {
             if (window.typeitArr) {
-                for (let i = 0; i < typeitArr.length; i++) {
-                    const group = typeitArr[i];
+                for (let i = 0; i < window.typeitArr.length; i++) {
+                    const group = window.typeitArr[i];
                     (function typeone(i) {
                         const content = document.getElementById(`r${group[i]}`).innerHTML;
                         if (i === group.length - 1) {
@@ -221,25 +229,16 @@
             }
         }
 
-        initScroll() {
-            for (let i = 0; i < this.scrollEvents.length; i++) {
-                document.addEventListener('scroll', this.scrollEvents[i], false);
+        initSmoothScroll() {
+            if ((!this.util.isMobile() && window.desktopHeaderMode === 'normal')
+              || (this.util.isMobile() && window.mobileHeaderMode === 'normal')) {
+                new SmoothScroll('[href^="#"]', {speed: 300, speedAsDuration: true});
+            } else {
+                new SmoothScroll('[href^="#"]', {speed: 300, speedAsDuration: true, header: '#header-desktop'});
             }
-            const initSmoothScroll = () => {
-                const isMobile = window.matchMedia('only screen and (max-width: 560px)').matches;
-                if ((!isMobile && window.desktopHeaderMode === 'normal')
-                 || (isMobile && window.mobileHeaderMode === 'normal')) {
-                    new SmoothScroll('[href^="#"]', {speed: 300, speedAsDuration: true});
-                } else {
-                    new SmoothScroll('[href^="#"]', {speed: 300, speedAsDuration: true, header: '#header-desktop'});
-                }
-            };
-            initSmoothScroll();
-            window.addEventListener('resize', () => {
-                window.setTimeout(() => {
-                    initSmoothScroll();
-                }, 0);
-            }, false);
+        }
+
+        onScroll() {
             const headers = [];
             if (window.desktopHeaderMode === 'auto') headers.push(document.getElementById('header-desktop'));
             if (window.mobileHeaderMode === 'auto') headers.push(document.getElementById('header-mobile'));
@@ -248,43 +247,57 @@
                 header.classList.add('faster');
             });
             const toTopButton = document.getElementById('dynamic-to-top');
-            document.addEventListener('scroll', () => {
-                const scrollTop = this.util.getScrollTop();
+            const MIN_SCROLL = 20;
+            window.addEventListener('scroll', () => {
+                this.newScrollTop = this.util.getScrollTop();
+                const scroll = this.newScrollTop - this.oldScrollTop;
                 this.util.forEach(headers, (header) => {
-                    if (this.scrollTop < scrollTop) {
-                        if (!header.classList.contains('fadeOutUp')) {
-                            header.classList.remove('fadeInDown');
-                            header.classList.add('fadeOutUp');
-                        }
-                    } else {
-                        if (!header.classList.contains('fadeInDown')) {
-                            header.classList.remove('fadeOutUp');
-                            header.classList.add('fadeInDown');
-                        }
-                    }
-                    if (scrollTop > 600) {
-                        if (this.scrollTop < scrollTop) {
-                            if (!toTopButton.classList.contains('fadeOut')) {
-                                toTopButton.classList.remove('fadeIn');
-                                toTopButton.classList.add('fadeOut');
-                            }
-                        } else {
-                            toTopButton.style.display = 'block';
-                            if (!toTopButton.classList.contains('fadeIn')) {
-                                toTopButton.classList.remove('fadeOut');
-                                toTopButton.classList.add('fadeIn');
-                            }
-                        }
-                    } else {
-                        toTopButton.style.display = 'none';
+                    if (scroll > MIN_SCROLL) {
+                        header.classList.remove('fadeInDown');
+                        header.classList.add('fadeOutUp');
+                    } else if (scroll < - MIN_SCROLL) {
+                        header.classList.remove('fadeOutUp');
+                        header.classList.add('fadeInDown');
                     }
                 });
-                this.scrollTop = scrollTop;
+                if (this.newScrollTop > 400) {
+                    if (scroll > MIN_SCROLL) {
+                        toTopButton.classList.remove('fadeIn');
+                        toTopButton.classList.add('fadeOut');
+                    } else if (scroll < - MIN_SCROLL) {
+                        toTopButton.style.display = 'block';
+                        toTopButton.classList.remove('fadeOut');
+                        toTopButton.classList.add('fadeIn');
+                    }
+                } else {
+                    toTopButton.style.display = 'none';
+                }
+                if (!this._scrollTimeout) {
+                    this._scrollTimeout = window.setTimeout(() => {
+                        this._scrollTimeout = null;
+                        for (let event of this.scrollEventSet) event();
+                    }, 10);
+                }
+                this.oldScrollTop = this.newScrollTop;
+            }, false);
+        }
+
+        onResize() {
+            window.addEventListener('resize', () => {
+                if (!this._resizeTimeout) {
+                    this._resizeTimeout = window.setTimeout(() => {
+                        this._resizeTimeout = null;
+                        for (let event of this.resizeEventSet) event();
+                        this.initMenuMobile();
+                        this.initToc();
+                        this.initSmoothScroll();
+                    }, 100);
+                }
             }, false);
         }
 
         init() {
-            this.initMobileMenu();
+            this.initMenuMobile();
             this.initSwitchTheme();
             this.initHighlight();
             this.initTable();
@@ -293,7 +306,10 @@
             this.initEcharts();
             this.initTypeit();
             this.initToc();
-            this.initScroll();
+            this.initSmoothScroll();
+
+            this.onScroll();
+            this.onResize();
         }
     }