v2 original port

12 files changed, 286 insertions, 209 deletions

diff --git a/layouts/partials/comment-disqus.html b/layouts/partials/comment-disqus.html
deleted file mode 100644
index 539f8c7..0000000
--- a/layouts/partials/comment-disqus.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{{ with .Site.Params.disqusShortname }}
-<div class="post-comment">
-    <div id="disqus_thread"></div>
-    <script>
-        var disqus_config = function () {
-            this.page.url = "{{ $.Permalink }}";
-            this.page.identifier = "{{ $.RelPermalink }}";
-        };
-        (function () {
-            var d = document,
-                s = d.createElement('script');
-            s.src = 'https://{{ . }}.disqus.com/embed.js';
-            s.setAttribute('data-timestamp', +new Date());
-            (d.head || d.body).appendChild(s);
-        })();
-    </script>
-</div>
-{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/comment-utterances.html b/layouts/partials/comment-utterances.html
index 3e56201..43c06bf 100644
--- a/layouts/partials/comment-utterances.html
+++ b/layouts/partials/comment-utterances.html
@@ -4,6 +4,8 @@
     <p>{{ i18n "postCommentLoading" }}</p>
 </div>
 <div class="post-comment">
-    <script src="https://utteranc.es/client.js" repo="{{ . }}" issue-term="{{ $.Site.Params.utterancesIssueTerm }}" theme="{{ $.Site.Params.utterancesTheme }}" crossorigin="anonymous" async></script>
+    <script src="https://utteranc.es/client.js" repo="{{ . }}" issue-term="{{ $.Site.Params.utterancesIssueTerm }}"
+            theme="{{ if eq $.Site.Params.toggleMode "dark" }}photon-dark{{ else }}github-light{{ end }}"
+            crossorigin="anonymous" async></script>
 </div>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/components.html b/layouts/partials/components.html
new file mode 100644
index 0000000..273f813
--- /dev/null
+++ b/layouts/partials/components.html
@@ -0,0 +1,8 @@
+<div class="btn">
+    <div class="btn-toggle-mode">
+        <i class="fas fa-adjust"></i>
+    </div>
+    <div class="btn-scroll-top">
+        <i class="fas fa-chevron-up"></i>
+    </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index be8f5bf..cb43e10 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,10 @@
 <footer>
-    <div class="container-lg text-center">
-        <p>&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author }}</a> | {{ i18n "footerPoweredFront" }}<a href="https://github.com/amzrk2/hugo-theme-fuji/" target="_blank">Fuji</a> & <a href="https://gohugo.io/" target="_blank">Hugo</a>{{ i18n "footerPoweredEnd" }}</p>
+    <div class="container-lg clearfix">
+        <div class="col-12 footer">
+            <span>&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author }}</a> |
+                {{ i18n "footerPoweredFront" }}<a href="https://github.com/amzrk2/hugo-theme-fuji/"
+                   target="_blank">Fuji-v2</a> & <a href="https://gohugo.io/"
+                   target="_blank">Hugo</a>{{ i18n "footerPoweredEnd" }}</span>
+        </div>
     </div>
 </footer>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 134f6e4..c306ade 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -18,51 +18,54 @@
 {{ else }}
 <title>{{ .Title }} - {{ .Site.Title }}</title>
 {{ end }}
-<meta name="author" content="{{if .Params.author }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}" />
-<meta name="description" content="{{if .Params.description }}{{ .Params.description }}{{ else if .Summary }}{{ .Summary }}{{ else }}{{ .Site.Params.description }}{{ end }}" />
+{{ if or (.Params.author) (.Site.Params.author) }}
+<meta name="author" content="{{ if .Params.author }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}" />
+{{ end }}
+{{ if or (.Params.description) (.Site.Params.description) }}
+<meta name="description"
+      content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Site.Params.description }}{{ end }}" />
+{{ end }}
 {{ if .Params.tags }}
 <meta name="keywords" content="{{ delimit .Params.tags ", " }}" />
 {{ end }}
+
 {{ template "_internal/opengraph.html" . }}
 {{ template "_internal/twitter_cards.html" . }}
-{{ template "_internal/google_analytics_async.html" . }}
 
-<!-- global main css -->
-{{ $options := (dict "targetPath" "css/main.min.css" "outputStyle" "compressed") }}
-{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}
-<link rel="stylesheet" href="{{ $style.Permalink }}" />
+<!-- dep -->
+{{ $sass := resources.Get "fuji.scss" }}
+{{ $options := (dict "targetPath" "assets/css/fuji.min.css" "outputStyle" "compressed" "enableSourceMap" true) }}
+{{ $style := $sass | resources.ToCSS $options }}
+<link rel="stylesheet" href="{{ $style.RelPermalink }}" />
 
-<!-- global dependency (CDN) -->
-{{ if .Site.Params.useCDN }}
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.0/lazysizes.min.js" integrity="sha256-h2tMEmhemR2IN4wbbdNjj9LaDIjzwk2hralQwfJmBOE=" crossorigin="anonymous"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
-<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js" integrity="sha256-Jd9xef1tT52aCb+cAqhElj/9D3c99lQvEjyKOuPn3S4=" crossorigin="anonymous"></script>
-{{ if or (.Site.Params.playerURL) (.Params.playerURL) }}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" integrity="sha256-uqQQGnDcmRKvhKwc5Vm4XT1GQ2oV6t1U0NR2N9tV+BQ=" crossorigin="anonymous" />
-<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js" integrity="sha256-6Y7CJDaltoeNgk+ZftgCD9jLgmGv4xKUo8nQ0HgAwVo=" crossorigin="anonymous"></script>
-{{ end }}
-<!-- global dependency (LOCAL) -->
+{{ if .Site.Params.useResourceCDN }}
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" data-cfasync="false"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.1/lazysizes.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
 {{ else }}
-{{ $jquery := resources.Get "js/jquery.min.js" }}
-<script src="{{ $jquery.Permalink }}"></script>
-{{ $lazysizes := resources.Get "js/lazysizes.min.js" }}
-<script src="{{ $lazysizes.Permalink }}"></script>
-{{ $fontawesome := resources.Get "css/fontawsome.min.css" }}
-<link rel="stylesheet" href="{{ $fontawesome.Permalink }}" />
-{{ $zoom := resources.Get "js/medium-zoom.min.js" }}
-<script src="{{ $zoom.Permalink }}"></script>
-{{ if or (.Site.Params.playerURL) (.Params.playerURL) }}
-{{ $aplayerCSS := resources.Get "css/APlayer.min.css" }}
-<link rel="stylesheet" href="{{ $aplayerCSS.Permalink }}" />
-{{ $aplayerJS := resources.Get "js/APlayer.min.js" }}
-<script src="{{ $aplayerJS.Permalink }}"></script>
-{{ end }}
+<script src="{{ "/assets/js/jquery-3.5.1.min.js" | relURL }}" data-cfasync="false"></script>
+<link rel="stylesheet" href="{{ "/assets/css/fa.min.css" | relURL }}" />
+<script src="{{ "/assets/js/lazysizes.min.js" | relURL }}"></script>
+<script src="{{ "/assets/js/medium-zoom.min.js" | relURL }}"></script>
+<script src="{{ "/assets/js/highlight.min.js" | relURL }}"></script>
+<script src="{{ "/assets/css/APlayer.min.css" | relURL }}"></script>
+<script src="{{ "/assets/js/APlayer.min.js" | relURL }}"></script>
 {{ end }}
 
-<!-- optional katex math -->
-{{ if or (.Params.math) (.Site.Params.math) }}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous" />
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
+{{ with .Site.GoogleAnalytics }}
+<!-- GA -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
+<script>
+      window.dataLayer = window.dataLayer || [];
+
+      function gtag() {
+            dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', '{{ . }}');
+</script>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 3166a36..a08e2d9 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,9 +1,9 @@
 <header>
     <div class="container-lg clearfix">
-        <div class="col-12 link-primary">
-            <a class="main-title" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+        <div class="col-12 header">
+            <a class="title-main" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
             {{ with .Site.Params.subTitle }}
-            <span class="sub-title">{{ . }}</span>
+            <span class="title-sub">{{ . }}</span>
             {{ end }}
         </div>
     </div>
diff --git a/layouts/partials/math.html b/layouts/partials/math.html
new file mode 100644
index 0000000..aca973a
--- /dev/null
+++ b/layouts/partials/math.html
@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" />
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"
+        onload="renderMathInElement(document.body);"></script>
\ No newline at end of file
diff --git a/layouts/partials/post-meta.html b/layouts/partials/post-meta.html
index 80f3a16..1d0a081 100644
--- a/layouts/partials/post-meta.html
+++ b/layouts/partials/post-meta.html
@@ -1 +1,5 @@
-<time><i class="fas fa-calendar-day"></i>&nbsp;{{ .Date.Format "2006-01-02" }}</time>{{ if .Site.Params.showWordCounter }}<span><i class="fas fa-file-alt"></i>&nbsp;{{ .WordCount }}{{ i18n "postMetaWordCount" }}</span>{{ end }}{{ if .Site.Params.showReadTime }}<span><i class="fas fa-clock"></i>&nbsp;{{ .ReadingTime }}{{ i18n "postMetaReadingTime" }}</span>{{ end }}<span><i class="fas fa-tag"></i>&nbsp;{{ if .Params.tags }}{{ range .Params.tags }}<a href="/tags/{{ . | urlize }}/">{{ . }}</a> {{ end }}{{ else }}{{ i18n "postMetaNoTag" }}{{ end }}</span>
\ No newline at end of file
+<time><i class="fas fa-calendar-day"></i>
+{{ .Date.Format "2006-01-02" }}</time>{{ if .Site.Params.showWordCounter }}<span><i class="fas fa-file-alt"></i>
+{{ .WordCount }}{{ i18n "postMetaWordCount" }}</span>{{ end }}{{ if .Site.Params.showReadTime }}<span><i class="fas fa-clock"></i>
+{{ .ReadingTime }}{{ i18n "postMetaReadingTime" }}</span>{{ end }}<span><i class="fas fa-tag"></i>
+{{ if .Params.tags }}{{ range .Params.tags }}<a href="{{ "/tags/" | relURL }}{{ . | urlize}}">{{ . }}</a> {{ end }}{{ else }}{{ i18n "postMetaNoTag" }}{{ end }}</span>
\ No newline at end of file
diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html
new file mode 100644
index 0000000..d82ab58
--- /dev/null
+++ b/layouts/partials/scripts-end.html
@@ -0,0 +1,146 @@
+<script>
+    // toggle theme
+    function toggleTheme() {
+        $('body').attr('data-theme', (index, attr) => {
+            if (attr === 'light') {
+                localStorage.setItem('fuji_theme', 'dark');
+                return 'dark';
+            } else {
+                localStorage.setItem('fuji_theme', 'light');
+                return 'light';
+            }
+        });
+    }
+    // update medium-zoom theme
+    // @params fujiTheme, mediumEvent
+    function updateMeidumTheme(fujiTheme, mediumEvent) {
+        if (fujiTheme && mediumEvent) {
+            mediumEvent.detach();
+            let mediumTheme;
+            if (fujiTheme === 'dark') {
+                mediumTheme = '#2f3136';
+            } else {
+                mediumTheme = '#fffffd';
+            }
+            mediumEvent = mediumZoom('.img-zoomable', {
+                background: mediumTheme
+            });
+        }
+    }
+    // update utterances theme
+    // @params fujiTheme, utterancesFrame
+    function updateUtterancesTheme(fujiTheme, utterancesFrame) {
+        if (fujiTheme && utterancesFrame) {
+            let ifMessage;
+            if (fujiTheme === 'dark') {
+                ifMessage = {
+                    type: 'set-theme',
+                    theme: 'photon-dark'
+                };
+            } else {
+                ifMessage = {
+                    type: 'set-theme',
+                    theme: 'github-light'
+                };
+            }
+            utterancesFrame.contentWindow.postMessage(ifMessage, 'https://utteranc.es');
+        }
+    }
+</script>
+
+<script>
+    // toc anchors & to-top button
+    $('.btn .btn-scroll-top').on('click', () => {
+        $('html, body').animate({
+            scrollTop: 0,
+        });
+    });
+    $('.sidebar-toc a').on('click', (event) => {
+        $('html, body').animate({
+            scrollTop: $($(event.currentTarget).attr('href')).offset().top
+        });
+    });
+
+    // init medium-zoom
+    var mediumTheme;
+    if ($('body').attr('data-theme') === 'dark') {
+        mediumTheme = '#2f3136';
+    } else {
+        mediumTheme = '#fffffd';
+    }
+    var mediumEvent = mediumZoom('.img-zoomable', {
+        background: mediumTheme
+    });
+
+    // init highlight.js
+    hljs.initHighlightingOnLoad();
+
+    // remove empty ul in toc if article only have ## and ###
+    if ($('.sidebar-toc ul ul').length > 0 && $('.sidebar-toc ul ul li').text() === '') {
+        $('.sidebar-toc ul ul').hide();
+    }
+</script>
+
+{{ if and (and (ne .Params.noComments true) (.IsPage)) (.Site.Params.utterancesRepo) }}
+<script>
+    // utterances comment loading indicator
+    var commentStatus; // utterence status
+    var commentLoadingTime = 0; // loading time passed
+    var commentCheckInterval = self.setInterval(checkUtterances, 500);
+
+    function checkUtterances() {
+        commentStatus = $('.post-comment .utterances').attr('style');
+        if (commentStatus) {
+            clearInterval(commentCheckInterval);
+            updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0])
+            $('.post-loading').hide();
+        } else {
+            if (++commentLoadingTime > 20) {
+                clearInterval(commentCheckInterval);
+                $('.post-comment').hide();
+                $('.post-loading p').text('{{ i18n "postCommentLoadingFailed" }}');
+                $('.post-loading i').attr('class', 'far fa-times-circle');
+            }
+        }
+    }
+
+    // theme switch button
+    $('.btn .btn-toggle-mode').on('click', () => {
+        // toggle theme
+        toggleTheme();
+        // update medium background
+        updateMeidumTheme($('body').attr('data-theme'), mediumEvent);
+        // update utterances theme if available
+        if (commentStatus) {
+            updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]);
+        }
+    });
+</script>
+{{ else }}
+<script>
+    // theme switch button
+    $('.btn .btn-toggle-mode').on('click', () => {
+        // toggle theme
+        toggleTheme();
+        // update medium background
+        updateMeidumTheme($('body').attr('data-theme'), mediumEvent);
+    });
+</script>
+{{ end }}
+
+{{ with .Params.playerURL }}
+<script>
+    // in-post aplayer
+    var aPlayer = new APlayer({
+        container: document.getElementById('post-aplayer'),
+        theme: '#8f82bc',
+        volume: 0.1,
+        audio: [{
+            name: '{{ $.Params.playerName }}',
+            artist: '{{ $.Params.playerArtist }}',
+            url: '{{ . }}',
+            cover: '{{ $.Params.playerCover }}'
+        }]
+    });
+</script>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/scripts-front.html b/layouts/partials/scripts-front.html
new file mode 100644
index 0000000..9fa99b6
--- /dev/null
+++ b/layouts/partials/scripts-front.html
@@ -0,0 +1,18 @@
+<script data-cfasync="false">
+    // detect theme data in localStorage
+    // change the data-theme attribute of body
+    var fujiThemeData = localStorage.getItem('fuji_theme');
+    if (fujiThemeData) {
+        if ($('body').attr('data-theme') !== fujiThemeData) {
+            $('body').attr('data-theme', (index, attr) => {
+                if (fujiThemeData === 'dark') {
+                    return 'dark';
+                } else {
+                    return 'light';
+                }
+            });
+        }
+    } else {
+        localStorage.setItem('fuji_theme', $('body').attr('data-theme'));
+    }
+</script>
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
deleted file mode 100644
index 6bcdd8b..0000000
--- a/layouts/partials/scripts.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!-- init zoomable images -->
-<script>
-    $(function () {
-        mediumZoom('.img-zoomable', {
-            margin: 32
-        });
-    });
-</script>
-
-<!-- utterances comment loading indicator -->
-{{ if ne .Params.noComments true }}
-{{ if and (.IsPage) (.Site.Params.utterancesRepo) }}
-<script>
-    $(function () {
-        var commentStatus;
-        var commentLoadingTime = 0;
-        var commentCheckInterval = self.setInterval(checkUtterances, 500);
-
-        function checkUtterances() {
-            commentStatus = $('.post-comment .utterances').attr('style');
-            if (commentStatus == undefined) {
-                commentLoadingTime += 1;
-                if (commentLoadingTime > 20) {
-                    clearInterval(commentCheckInterval);
-                    $('.post-comment').hide();
-                    $('.post-loading p').text('{{ i18n "postCommentLoadingFailed" }}');
-                    $('.post-loading i').attr('class', 'far fa-times-circle');
-                }
-                return;
-            } else {
-                clearInterval(commentCheckInterval);
-                $('.post-loading').hide();
-            }
-        }
-    });
-</script>
-{{ end }}
-{{ end }}
-
-<!-- toc smooth scroll & APlayer cjk html anchor fix -->
-{{ if in .Site.Params.mainSections .Type }}
-<script>
-    $('.widget-toc a').click(function () {
-        $('html, body').animate({
-            scrollTop: $($(this).attr('href')).offset().top
-        });
-    });
-</script>
-{{ end }}
-{{ if .Site.Params.scrollTop }}
-<!-- scroll to top button -->
-<script>
-    $('#scroll-top').click(function () {
-        $('html, body').animate({
-            scrollTop: 0
-        });
-    });
-</script>
-{{ end }}
-
-<!-- in-post APlayer -->
-{{ with .Params.playerURL }}
-<script>
-    $(function () {
-        const postAPlayer = new APlayer({
-            container: document.getElementById('post-aplayer'),
-            theme: '#8F82BC',
-            volume: 0.1,
-            audio: [{
-                name: '{{ $.Params.playerName }}',
-                artist: '{{ $.Params.playerArtist }}',
-                url: '{{ . }}',
-                cover: '{{ $.Params.playerCover }}'
-            }]
-        });
-    });
-</script>
-{{ end }}
-<!-- site global APlayer -->
-{{ with .Site.Params.playerURL }}
-<script>
-    $(function () {
-        const siteAPlayer = new APlayer({
-            container: document.getElementById('aplayer'),
-            fixed: true,
-            theme: '#8F82BC',
-            volume: 0.1,
-            audio: [{
-                name: '{{ $.Site.Params.playerName }}',
-                artist: '{{ $.Site.Params.playerArtist }}',
-                url: '{{ . }}',
-                cover: '{{ $.Site.Params.playerCover }}'
-            }]
-        });
-    });
-</script>
-{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 51e53d3..8e902c1 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,51 +1,53 @@
-<!-- in-post toc -->
-{{ if in .Site.Params.mainSections .Type }}
-<div class="widget-toc">
-    <h5>{{ i18n "sidebarToc" }}</h5>
-    {{.TableOfContents}}
-</div>
-{{ end }}
-<!-- pages -->
-<div class="widget-pages">
-    <h5>{{ i18n "sidebarPages" }}</h5>
-    <ul>
-        {{ $currentPage := . }}
-        {{ range .Site.Menus.nav }}
-        <li>
-            <a href="{{ .URL }}">{{ .Name }}</a>
-        </li>
-        {{ end }}
-        <li>
-            <a href="/index.xml" target="_blank">RSS</a>
-        </li>
-    </ul>
-</div>
-<!-- tags -->
-<div class="widget-tags">
-    <h5>{{ i18n "sidebarTags" }}</h5>
-    <div>
-        {{ range .Site.Taxonomies.tags }}
-        <span>
-            <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
-        </span>
-        {{ end }}
+<aside class="col-12 col-md-3 float-left sidebar">
+    <!-- in-post toc -->
+    {{ if in .Site.Params.mainSections .Type }}
+    <div class="sidebar-item sidebar-toc">
+        <h3>{{ i18n "sidebarToc" }}</h3>
+        {{ .TableOfContents }}
     </div>
-</div>
-<!-- links -->
-<div class="widget-links">
-    <h5>{{ i18n "sidebarLinks" }}</h5>
-    <ul>
-        {{ range .Site.Menus.link }}
-        <li>
-            <a href="{{ .URL }}" target="_blank"><span>{{ .Name }}</span></a>
-        </li>
-        {{ end }}
-    </ul>
-</div>
-<!-- bgm.tv image chart -->
-{{ with .Site.Params.bgmImageChart }}
-<div class="widget-bgm">
-    <h5>{{ i18n "sidebarBangumiChart" }}</h5>
-    <img class="lazyload" src="{{ $.Site.Params.lazyPlaceholder }}" data-src="https://bgm.tv/chart/img/{{ . }}" alt="Bangumi Image Chart" />
-</div>
-{{ end }}
\ No newline at end of file
+    {{ end }}
+    <!-- pages -->
+    <div class="sidebar-item sidebar-pages">
+        <h3>{{ i18n "sidebarPages" }}</h3>
+        <ul>
+            {{ range .Site.Menus.nav }}
+            <li>
+                <a href="{{ .URL }}">{{ .Name }}</a>
+            </li>
+            {{ end }}
+            <li>
+                <a href="{{ "/index.xml" | relURL }}" target="_blank">RSS</a>
+            </li>
+        </ul>
+    </div>
+    <!-- tags -->
+    <div class="sidebar-item sidebar-tags">
+        <h3>{{ i18n "sidebarTags" }}</h3>
+        <div>
+            {{ range .Site.Taxonomies.tags }}
+            <span>
+                <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>
+            </span>
+            {{ end }}
+        </div>
+    </div>
+    <!-- links -->
+    <div class="sidebar-item sidebar-links">
+        <h3>{{ i18n "sidebarLinks" }}</h3>
+        <ul>
+            {{ range .Site.Menus.link }}
+            <li>
+                <a href="{{ .URL }}" target="_blank"><span>{{ .Name }}</span></a>
+            </li>
+            {{ end }}
+        </ul>
+    </div>
+    {{ with .Site.Params.bgmImageChart }}
+    <!-- bgm.tv image chart -->
+    <div class="sidebar-item sidebar-bgm">
+        <h3>{{ i18n "sidebarBangumiChart" }}</h3>
+        <img class="lazyload" src="{{ $.Site.Params.lazyPlaceholder | relURL }}" data-src="https://bgm.tv/chart/img/{{ . }}"
+             alt="Bangumi 图像榜单" />
+    </div>
+    {{ end }}
+</aside>
\ No newline at end of file