feat(toc): support fontawesome and ruby in TOC

assets/css/_partial/_single/_toc.scss

@@ -131,3 +131,21 @@
     }
   }
 }
+
+.toc {
+  ruby {
+    background: $code-background-color;
+
+    rt {
+      color: $global-font-secondary-color;
+    }
+
+    .dark-theme & {
+      background: $code-background-color-dark;
+
+      rt {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+}

exampleSite/config.toml

@@ -9,23 +9,27 @@ theme = "LoveIt"
 # 主题目录
 themesDir = "../.."
 
+# whether to use robots.txt
+# 是否使用 robots.txt
+enableRobotsTXT = true
+# whether to use git commit log to generate lastmod record
+# 是否使用 git 信息来生成文章的上次修改时间
+enableGitInfo = false
+# whether to use emoji code
+# 是否使用 emoji 代码
+enableEmoji = true
+
 [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
@@ -311,16 +315,10 @@ themesDir = "../.."
     languageCode = "zh"
     # 网站标题
     title = "LoveIt 主题"
-    # 是否使用 git 信息来生成文章的上次修改时间
-    enableGitInfo = false
     # 是否包括中日韩文字
     hasCJKLanguage = true
     # 默认每页列表显示的文章数目
     paginate = 12
-    # 是否使用 emoji 代码
-    enableEmoji = true
-    # 是否使用 robots.txt
-    enableRobotsTXT = true
     # [UA-XXXXXXXX-X] 谷歌分析代号
     googleAnalytics = ""
     # 版权描述，仅仅用于 SEO

layouts/partials/function/checkbox.html

@@ -0,0 +1,9 @@
+{{- /* Checkbox unchecked */ -}}
+{{- $REin := `<input disabled="" type="checkbox">` -}}
+{{- $REout := `<i class="far fa-check-square fa-fw"></i>` -}}
+{{- $content := replaceRE $REin $REout . -}}
+
+{{- /* Checkbox checked */ -}}
+{{- $REin = `<input checked="" disabled="" type="checkbox">` -}}
+{{- $REout = `<i class="far fa-square fa-fw"></i>` -}}
+{{- return replaceRE $REin $REout $content -}}

layouts/partials/function/fontawesome.html

@@ -0,0 +1,5 @@
+{{- /* Font Awesome */ -}}
+{{- /* :(far fa-circle): -> <i class="far fa-circle fa-fw"></i> */ -}}
+{{- $REin := `:\(([\w- ]+?)\):` -}}
+{{- $REout := `<i class="$1 fa-fw"></i>` -}}
+{{- return replaceRE $REin $REout . -}}

layouts/partials/function/ruby.html

@@ -0,0 +1,5 @@
+{{- /* Ruby */ -}}
+{{- /* [EN]^(English) -> <strong><ruby>EN<rt>English</rt></ruby></strong> */ -}}
+{{- $REin := `\[(.+?)\]\^\((.+?)\)` -}}
+{{- $REout := `<strong><ruby>$1<rt>$2</rt></ruby></strong>` -}}
+{{- return replaceRE $REin $REout . -}}

layouts/partials/single/content.html

@@ -1,28 +1,9 @@
-{{- /* Font Awesome */ -}}
-{{- /* :(far fa-circle): -> <i class="far fa-circle fa-fw"></i> */ -}}
-{{- $REin := `:\(([\w- ]+?)\):` -}}
-{{- $REout := `<i class="$1 fa-fw"></i>` -}}
-{{- $content := replaceRE $REin $REout . -}}
+{{- $content := . -}}
 
-{{- /* Ruby */ -}}
-{{- /* [EN]^(English) -> <strong><ruby>EN<rt>English</rt></ruby></strong> */ -}}
-{{- $REin = `\[(.+?)\]\^\((.+?)\)` -}}
-{{- $REout = `<strong><ruby>$1<rt>$2</rt></ruby></strong>` -}}
-{{- $content = replaceRE $REin $REout $content -}}
+{{- $content = partial "function/fontawesome.html" $content -}}
 
-{{- /* Checkbox */ -}}
-{{- $REin = `<input disabled="" type="checkbox">` -}}
-{{- $REout = `<i class="far fa-check-square fa-fw"></i>` -}}
-{{- $content = replaceRE $REin $REout $content -}}
+{{- $content = partial "function/ruby.html" $content -}}
 
-{{- /* Checkbox checked */ -}}
-{{- $REin = `<input checked="" disabled="" type="checkbox">` -}}
-{{- $REout = `<i class="far fa-square fa-fw"></i>` -}}
-{{- $content = replaceRE $REin $REout $content -}}
-
-{{- /* Fix <sup>[return]</sup> */ -}}
-{{- $REin = `<sup>\[return\]</sup>` -}}
-{{- $REout = `↩︎` -}}
-{{- $content = replaceRE $REin $REout $content -}}
+{{- $content = partial "function/checkbox.html" $content -}}
 
 {{- $content | safeHTML -}}

layouts/posts/single.html

@@ -52,12 +52,12 @@ <h1 class="single-title animated flipInX">{{ .Title }}</h1>
 
         {{- /* TOC */ -}}
         {{- if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}}
-            <div class="toc-auto" id="toc-auto">
+            <div class="toc" id="toc-auto">
                 <h2 class="toc-title">{{ T "toc" }}</h2>
                 {{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default true }}
                 <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">
+            <div class="toc" id="toc-static">
                 <details>
                     <summary>
                         <div class="toc-title">
@@ -66,7 +66,10 @@ <h2 class="toc-title">{{ T "toc" }}</h2>
                         </div>
                     </summary>
                     <div class="toc-content" id="toc-content-static">
-                        {{- partial "single/content.html" .TableOfContents -}}
+                        {{- $toc := .TableOfContents -}}
+                        {{- $toc = partial "function/fontawesome.html" $toc -}}
+                        {{- $toc = partial "function/ruby.html" $toc -}}
+                        {{- $toc | safeHTML -}}
                     </div>
                 </details>
             </div>