Merge pull request #5 from liuzhihang/dev

适配 halo alpha.4

README.md

@@ -12,6 +12,17 @@
 
 本主题是根据 [Heo](https://blog.zhheo.com/) 的博客进行开发，其中部分功能暂未支持
 
+部分功能支持需要安装插件：
+- [留言](https://github.com/halo-sigs/plugin-comment-widget)
+- [代码高亮](https://github.com/liuzhihang/plugin-prismjs)
+- [懒加载](https://github.com/liuzhihang/plugin-lazyload)
+- [文章目录](https://github.com/liuzhihang/plugin-tocbot)
+
+图标 icon 来自于 [iconfont](https://www.iconfont.cn/)：
+- [Awesome常用免费开源图标](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.dc64b3430&cid=11790)
+
+
+
 ## 预览
 
 ## 支持的功能

settings.yaml

@@ -5,13 +5,11 @@ metadata:
 spec:
   forms:
     - group: nav
-      label: 导航栏
+      label: 导航
       formSchema:
-        - $formkit: text
+        - $formkit: menuRadio
           name: left_menu
           label: 导航栏左侧相关链接
-          placeholder: 请填写 metadata name
-          help: "需要通过开发者模式获取菜单对应的 metadata name"
         - $formkit: radio
           name: right_menu
           label: 右侧四个按钮
@@ -107,9 +105,9 @@ spec:
           label: 博客封面随机 API
           validation: "url"
           value: "https://source.unsplash.com/random/600x400/?blog,scenery,night,desert,sea"
-          help: 默认随机封面图 url 不能保证一直可用
+          help: 二次元随机图地址：https://www.dmoe.cc/random.php    默认随机封面图 url 不能保证一直可用
     - group: sidebar
-      label: 侧边栏
+      label: 侧栏
       formSchema:
         - $formkit: select
           name: location
@@ -124,9 +122,26 @@ spec:
               label: "左侧"
         - $formkit: textarea
           name: widgets
-          label: 小部件（无效）
+          label: 小部件
-          value: "profile,recent-posts,latest-comments,categories,tags"
+          value: "profile,wechat,comments,recent-posts,categories,tags-stat"
-          help: "目前提供的小部件有：profile（站点资料）, recent-posts（近期文章）, latest-comments（最新评论）, categories（文章分类）, tags（文章标签）。你可以随意组合或排序，以逗号隔开。"
+          help: "目前提供的小部件有：profile（站点资料）, wechat（微信）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&统计）。你可以随意组合或排序，以逗号隔开。"
+        - $formkit: textarea
+          name: post_widgets
+          label: 文章页面小部件
+          value: "profile,wechat,toc,comments,recent-posts,categories,tags-stat"
+          help: "post 可以支持设置 toc "
+        - $formkit: textarea
+          name: tag_widgets
+          label: 标签页面小部件
+          value: "profile,wechat,comments,recent-posts,categories,tags-stat"
+        - $formkit: textarea
+          name: category_widgets
+          label: 分类页面小部件
+          value: "profile,wechat,comments,recent-posts,categories,tags-stat"
+        - $formkit: textarea
+          name: page_widgets
+          label: 自定义页面小部件
+          value: ""
         - $formkit: text
           name: profile_name
           label: 个人卡片名称
@@ -153,11 +168,9 @@ spec:
           label: 社交链接（无效）
           placeholder: 暂时不支持配置
           help: "当前版本不支持配置"
-        - $formkit: text
+        - $formkit: menuRadio
           name: menu
           label: 底部相关链接
-          placeholder: 请填写 metadata name
-          help: "需要通过开发者模式获取菜单对应的 metadata name"
         - $formkit: text
           name: copyright_start
           label: 开始时间
@@ -168,6 +181,28 @@ spec:
           label: ICP 备案
           placeholder: 请输入 ICP 备案号
           help: "京ICP备xxxxxxxx号"
+    - group: post
+      label: 文章
+      formSchema:
+        - $formkit: radio
+          name: copyright
+          label: 版权声明
+          value: true
+          options:
+            - label: 打开
+              value: true
+            - label: 关闭
+              value: false
+          help: "文章底部显示版权声明模块"
+        - $formkit: url
+          name: copyrightAgreement
+          label: 版权协议
+          placeholder: "请输入版权协议地址"
+        - $formkit: textarea
+          name: copyrightInfo
+          label: 版权声明
+          placeholder: '本文是原创文章，采用 <a target="_blank" href="/cc">CC BY-NC-ND 4.0</a> 协议，完整转载请注明来自 <a href="/" target="_blank" >程序员小航</a>'
+          help: "版权声明内容，支持填入 HTML 标签"
     - group: right_menu
       label: 右键菜单
       formSchema:

templates/assets/js/main.js

@@ -46,7 +46,6 @@ document.addEventListener("DOMContentLoaded", function () {
 
         let initTop = 0;
         let $header = document.getElementById("page-header");
-        let $cookies = document.getElementById("cookies-window");
 
         window.scrollCollect = btf.throttle(function () {
 
@@ -66,7 +65,6 @@ document.addEventListener("DOMContentLoaded", function () {
                     }
                 }
                 $header.classList.add("nav-fixed")
-                $cookies.classList.add("cw-hide")
             } else {
                 if (0 === currentTop) {
                     $header.classList.remove("nav-fixed", "nav-visible")
@@ -79,31 +77,35 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // 滚动处理
     const scrollFnToDo = function () {
-        let $cardTocLayout = document.getElementById("card-toc");
-        let $cardToc = $cardTocLayout.getElementsByClassName("toc-content")[0];
-        let $tocLink = $cardToc.querySelectorAll(".toc-link");
-        let $article = document.getElementById("article-container");
 
+        const isToc = GLOBAL_CONFIG.htmlType === 'post' && document.getElementById("card-toc");
+        const $article = document.getElementById("article-container");
 
-        const scrollPercent = function (currentTop) {
+        if (!($article && isToc)) return
+
+        let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand
+
+        if (isToc) {
+
+            const $cardTocLayout = document.getElementById("card-toc");
+            $cardToc = $cardTocLayout.getElementsByClassName("toc-content")[0];
+            $tocLink = $cardToc.querySelectorAll(".toc-link");
+
+            // const $tocPercentage = $cardTocLayout.querySelector(".toc-percentage");
+            isExpand = $cardToc.classList.contains("is-expand");
+
+            scrollPercent = function (currentTop) {
                 const docHeight = $article.clientHeight;
                 const winHeight = document.documentElement.clientHeight;
                 const headerHeight = $article.offsetTop;
-            const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
+                const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight);
                 const scrollPercent = (currentTop - headerHeight) / (contentMath);
-            const scrollPercentRounded = Math.round(100 * scrollPercent);
+                const scrollPercentRounded = Math.round(scrollPercent * 100);
-            const percentage = 100 < scrollPercentRounded ? 100 : scrollPercentRounded <= 0 ? 0 : scrollPercentRounded;
+                const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded;
+                // $tocPercentage.textContent = percentage
                 $cardToc.setAttribute("progress-percentage", percentage);
-        }
+            };
 
-        document.getElementById("mobile-toc-button")
-            .addEventListener("click", function () {
-                if ("0" === window.getComputedStyle($cardTocLayout).getPropertyValue("opacity")) {
-                    window.mobileToc.open();
-                } else {
-                    window.mobileToc.close();
-                }
-            });
 
             window.mobileToc = {
                 open: () => {
@@ -121,21 +123,27 @@ document.addEventListener("DOMContentLoaded", function () {
             // toc 元素点击
             $cardToc.addEventListener("click", e => {
                 e.preventDefault();
-            const target = e.target.classList.contains("toc-link") ? e.target : e.target.parentElement;
+                const target = e.target.classList;
+                if (target.contains('toc-content')) return;
+                const $target = e.target.classList.contains("toc-link") ? e.target : e.target.parentElement;
 
-            btf.scrollToDest(
+                btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute("href")).replace("#", ""))), 300);
-                btf.getEleTop(
-                    document.getElementById(
-                        decodeURI(target.getAttribute("href")).replace("#", "")
-                    )
-                ),
-                300
-            );
                 if (window.innerWidth < 900) {
-                window.mobileToc.close();
+                    window.mobileToc.close()
                 }
             });
 
+            autoScrollToc = item => {
+                const activePosition = item.getBoundingClientRect().top
+                const sidebarScrollTop = $cardToc.scrollTop
+                if (activePosition > (document.documentElement.clientHeight - 100)) {
+                    $cardToc.scrollTop = sidebarScrollTop + 150
+                }
+                if (activePosition < 100) {
+                    $cardToc.scrollTop = sidebarScrollTop - 150
+                }
+            };
+        }
         // find head position & add active class
         const list = $article.querySelectorAll("h1,h2,h3,h4,h5,h6");
         let detectItem = "";
@@ -150,7 +158,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
             list.forEach(function (ele, index) {
                 if (top > btf.getEleTop(ele) - 80) {
-                    currentId = "#" + encodeURI(ele.getAttribute("id"));
+                    const id = ele.id
+                    currentId = id ? "#" + encodeURI(id) : ""
                     currentIndex = index
                 }
 
@@ -161,28 +170,30 @@ document.addEventListener("DOMContentLoaded", function () {
 
             detectItem = currentIndex
 
+            if (isToc) {
                 $cardToc.querySelectorAll(".active").forEach(i => {
                     i.classList.remove("active")
-            })
+                });
-
                 if (currentId === "") {
-                return
+                    return;
                 }
 
-            const currentActive = $tocLink[currentIndex]
+                const currentActive = $tocLink[currentIndex];
-            currentActive.classList.add("active")
+
+                currentActive.classList.add("active");
 
                 setTimeout(() => {
                     autoScrollToc(currentActive)
-            }, 0)
+                }, 0);
 
-            if (isExpand) return
+                if (isExpand) return;
-            let parent = currentActive.parentNode
+                let parent = currentActive.parentNode;
 
-            for (; !parent.matches(".toc"); parent = parent.parentNode) {
+                for (; !parent.matches(".toc-list"); parent = parent.parentNode) {
                     if (parent.matches("li")) parent.classList.add("active")
                 }
             }
+        }
 
         window.tocScrollFn = function () {
             return btf.throttle(function () {

templates/assets/js/utils.js

@@ -167,10 +167,6 @@ const btf = {
         }
     },
 
-    isJqueryLoad: function (e) {
-        "undefined" == typeof jQuery ? getScript(GLOBAL_CONFIG.source.jQuery).then(e) : e()
-    },
-
     isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
 
     getEleTop: ele => {
@@ -185,14 +181,4 @@ const btf = {
         return actualTop
     },
 
-    updateAnchor: (anchor) => {
-        if (anchor !== window.location.hash) {
-            if (!anchor) anchor = location.pathname
-            const title = GLOBAL_CONFIG_SITE.title
-            window.history.replaceState({
-                url: location.href,
-                title: title
-            }, title, anchor)
-        }
-    }
 };

templates/assets/libs/iconfont/iconfont.css

@@ -0,0 +1,227 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3736806 */
+  src: url('iconfont.woff2?t=1667571412098') format('woff2'),
+       url('iconfont.woff?t=1667571412098') format('woff'),
+       url('iconfont.ttf?t=1667571412098') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-mail-line:before {
+  content: "\e668";
+}
+
+.icon-github-line:before {
+  content: "\e74c";
+}
+
+.icon-moon:before {
+  content: "\f057";
+}
+
+.icon-closed-captioning:before {
+  content: "\ef76";
+}
+
+.icon-hand-holding:before {
+  content: "\f000";
+}
+
+.icon-dice:before {
+  content: "\ef94";
+}
+
+.icon-list-ul:before {
+  content: "\f039";
+}
+
+.icon-baidu:before {
+  content: "\e6b6";
+}
+
+.icon-search:before {
+  content: "\f0a8";
+}
+
+.icon-download:before {
+  content: "\efa5";
+}
+
+.icon-image:before {
+  content: "\f024";
+}
+
+.icon-window-restore:before {
+  content: "\f159";
+}
+
+.icon-comment-dots1:before {
+  content: "\f288";
+}
+
+.icon-copy:before {
+  content: "\ef86";
+}
+
+.icon-bus:before {
+  content: "\ef58";
+}
+
+.icon-hotjar:before {
+  content: "\f1cf";
+}
+
+.icon-weibo:before {
+  content: "\f261";
+}
+
+.icon-robot:before {
+  content: "\f09a";
+}
+
+.icon-paste:before {
+  content: "\f068";
+}
+
+.icon-link:before {
+  content: "\f037";
+}
+
+.icon-qrcode:before {
+  content: "\f08d";
+}
+
+.icon-calendar-alt:before {
+  content: "\ef5a";
+}
+
+.icon-clock:before {
+  content: "\ef75";
+}
+
+.icon-file-word:before {
+  content: "\efd1";
+}
+
+.icon-chevron-down:before {
+  content: "\ef6d";
+}
+
+.icon-times-circle:before {
+  content: "\f10a";
+}
+
+.icon-grip-vertical:before {
+  content: "\efff";
+}
+
+.icon-book:before {
+  content: "\ef46";
+}
+
+.icon-burn:before {
+  content: "\ef57";
+}
+
+.icon-dove:before {
+  content: "\efa4";
+}
+
+.icon-arrow-circle-right:before {
+  content: "\ef23";
+}
+
+.icon-comment-dots:before {
+  content: "\ef7e";
+}
+
+.icon-folder-open:before {
+  content: "\efdc";
+}
+
+.icon-file-alt:before {
+  content: "\efc1";
+}
+
+.icon-bullseye:before {
+  content: "\ef56";
+}
+
+.icon-sliders:before {
+  content: "\f0bf";
+}
+
+.icon-tags:before {
+  content: "\f0f3";
+}
+
+.icon-comment-alt:before {
+  content: "\f287";
+}
+
+.icon-eye:before {
+  content: "\f28f";
+}
+
+.icon-arrow-left:before {
+  content: "\ef26";
+}
+
+.icon-arrow-right:before {
+  content: "\ef27";
+}
+
+.icon-arrow-up:before {
+  content: "\ef2a";
+}
+
+.icon-chevron-left:before {
+  content: "\ef6e";
+}
+
+.icon-chevron-right:before {
+  content: "\ef6f";
+}
+
+.icon-redo-alt:before {
+  content: "\f094";
+}
+
+.icon-listol:before {
+  content: "\e767";
+}
+
+.icon-bars:before {
+  content: "\e9ee";
+}
+
+.icon-arrowup:before {
+  content: "\e64c";
+}
+
+.icon-icon-sidebar-scxmtj:before {
+  content: "\e643";
+}
+
+.icon-train-public-transport:before {
+  content: "\e600";
+}
+
+.icon-a-theconsole-fill:before {
+  content: "\ea32";
+}
+
+.icon-shuffle:before {
+  content: "\e67e";
+}
+
+.icon-md-train:before {
+  content: "\e77d";
+}
+

templates/assets/libs/iconfont/iconfont.json

@@ -0,0 +1,380 @@
+{
+  "id": "3736806",
+  "name": "hao",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "20817029",
+      "name": "mail-line",
+      "font_class": "mail-line",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "20818096",
+      "name": "github-line",
+      "font_class": "github-line",
+      "unicode": "e74c",
+      "unicode_decimal": 59212
+    },
+    {
+      "icon_id": "5634247",
+      "name": "moon",
+      "font_class": "moon",
+      "unicode": "f057",
+      "unicode_decimal": 61527
+    },
+    {
+      "icon_id": "5633944",
+      "name": "closed-captioning",
+      "font_class": "closed-captioning",
+      "unicode": "ef76",
+      "unicode_decimal": 61302
+    },
+    {
+      "icon_id": "5634114",
+      "name": "hand-holding",
+      "font_class": "hand-holding",
+      "unicode": "f000",
+      "unicode_decimal": 61440
+    },
+    {
+      "icon_id": "5633983",
+      "name": "dice",
+      "font_class": "dice",
+      "unicode": "ef94",
+      "unicode_decimal": 61332
+    },
+    {
+      "icon_id": "5634194",
+      "name": "list-ul",
+      "font_class": "list-ul",
+      "unicode": "f039",
+      "unicode_decimal": 61497
+    },
+    {
+      "icon_id": "386278",
+      "name": "baidu",
+      "font_class": "baidu",
+      "unicode": "e6b6",
+      "unicode_decimal": 59062
+    },
+    {
+      "icon_id": "5634346",
+      "name": "search",
+      "font_class": "search",
+      "unicode": "f0a8",
+      "unicode_decimal": 61608
+    },
+    {
+      "icon_id": "5634003",
+      "name": "download",
+      "font_class": "download",
+      "unicode": "efa5",
+      "unicode_decimal": 61349
+    },
+    {
+      "icon_id": "5634158",
+      "name": "image",
+      "font_class": "image",
+      "unicode": "f024",
+      "unicode_decimal": 61476
+    },
+    {
+      "icon_id": "5634542",
+      "name": "window-restore",
+      "font_class": "window-restore",
+      "unicode": "f159",
+      "unicode_decimal": 61785
+    },
+    {
+      "icon_id": "5634960",
+      "name": "comment-dots",
+      "font_class": "comment-dots1",
+      "unicode": "f288",
+      "unicode_decimal": 62088
+    },
+    {
+      "icon_id": "5633967",
+      "name": "copy",
+      "font_class": "copy",
+      "unicode": "ef86",
+      "unicode_decimal": 61318
+    },
+    {
+      "icon_id": "5633878",
+      "name": "bus",
+      "font_class": "bus",
+      "unicode": "ef58",
+      "unicode_decimal": 61272
+    },
+    {
+      "icon_id": "5634718",
+      "name": "hotjar",
+      "font_class": "hotjar",
+      "unicode": "f1cf",
+      "unicode_decimal": 61903
+    },
+    {
+      "icon_id": "5634903",
+      "name": "weibo",
+      "font_class": "weibo",
+      "unicode": "f261",
+      "unicode_decimal": 62049
+    },
+    {
+      "icon_id": "5634330",
+      "name": "robot",
+      "font_class": "robot",
+      "unicode": "f09a",
+      "unicode_decimal": 61594
+    },
+    {
+      "icon_id": "5634271",
+      "name": "paste",
+      "font_class": "paste",
+      "unicode": "f068",
+      "unicode_decimal": 61544
+    },
+    {
+      "icon_id": "5634192",
+      "name": "link",
+      "font_class": "link",
+      "unicode": "f037",
+      "unicode_decimal": 61495
+    },
+    {
+      "icon_id": "5634313",
+      "name": "qrcode",
+      "font_class": "qrcode",
+      "unicode": "f08d",
+      "unicode_decimal": 61581
+    },
+    {
+      "icon_id": "5633882",
+      "name": "calendar-alt",
+      "font_class": "calendar-alt",
+      "unicode": "ef5a",
+      "unicode_decimal": 61274
+    },
+    {
+      "icon_id": "5633943",
+      "name": "clock",
+      "font_class": "clock",
+      "unicode": "ef75",
+      "unicode_decimal": 61301
+    },
+    {
+      "icon_id": "5634058",
+      "name": "file-word",
+      "font_class": "file-word",
+      "unicode": "efd1",
+      "unicode_decimal": 61393
+    },
+    {
+      "icon_id": "5633931",
+      "name": "chevron-down",
+      "font_class": "chevron-down",
+      "unicode": "ef6d",
+      "unicode_decimal": 61293
+    },
+    {
+      "icon_id": "5634458",
+      "name": "times-circle",
+      "font_class": "times-circle",
+      "unicode": "f10a",
+      "unicode_decimal": 61706
+    },
+    {
+      "icon_id": "5634113",
+      "name": "grip-vertical",
+      "font_class": "grip-vertical",
+      "unicode": "efff",
+      "unicode_decimal": 61439
+    },
+    {
+      "icon_id": "5633858",
+      "name": "book",
+      "font_class": "book",
+      "unicode": "ef46",
+      "unicode_decimal": 61254
+    },
+    {
+      "icon_id": "5633877",
+      "name": "burn",
+      "font_class": "burn",
+      "unicode": "ef57",
+      "unicode_decimal": 61271
+    },
+    {
+      "icon_id": "5634002",
+      "name": "dove",
+      "font_class": "dove",
+      "unicode": "efa4",
+      "unicode_decimal": 61348
+    },
+    {
+      "icon_id": "5633812",
+      "name": "arrow-circle-right",
+      "font_class": "arrow-circle-right",
+      "unicode": "ef23",
+      "unicode_decimal": 61219
+    },
+    {
+      "icon_id": "5633958",
+      "name": "comment-dots",
+      "font_class": "comment-dots",
+      "unicode": "ef7e",
+      "unicode_decimal": 61310
+    },
+    {
+      "icon_id": "5634073",
+      "name": "folder-open",
+      "font_class": "folder-open",
+      "unicode": "efdc",
+      "unicode_decimal": 61404
+    },
+    {
+      "icon_id": "5634038",
+      "name": "file-alt",
+      "font_class": "file-alt",
+      "unicode": "efc1",
+      "unicode_decimal": 61377
+    },
+    {
+      "icon_id": "5633876",
+      "name": "bullseye",
+      "font_class": "bullseye",
+      "unicode": "ef56",
+      "unicode_decimal": 61270
+    },
+    {
+      "icon_id": "5634373",
+      "name": "sliders-h",
+      "font_class": "sliders",
+      "unicode": "f0bf",
+      "unicode_decimal": 61631
+    },
+    {
+      "icon_id": "5634433",
+      "name": "tags",
+      "font_class": "tags",
+      "unicode": "f0f3",
+      "unicode_decimal": 61683
+    },
+    {
+      "icon_id": "5634959",
+      "name": "comment-alt",
+      "font_class": "comment-alt",
+      "unicode": "f287",
+      "unicode_decimal": 62087
+    },
+    {
+      "icon_id": "5634971",
+      "name": "eye",
+      "font_class": "eye",
+      "unicode": "f28f",
+      "unicode_decimal": 62095
+    },
+    {
+      "icon_id": "5633815",
+      "name": "arrow-left",
+      "font_class": "arrow-left",
+      "unicode": "ef26",
+      "unicode_decimal": 61222
+    },
+    {
+      "icon_id": "5633816",
+      "name": "arrow-right",
+      "font_class": "arrow-right",
+      "unicode": "ef27",
+      "unicode_decimal": 61223
+    },
+    {
+      "icon_id": "5633820",
+      "name": "arrow-up",
+      "font_class": "arrow-up",
+      "unicode": "ef2a",
+      "unicode_decimal": 61226
+    },
+    {
+      "icon_id": "5633932",
+      "name": "chevron-left",
+      "font_class": "chevron-left",
+      "unicode": "ef6e",
+      "unicode_decimal": 61294
+    },
+    {
+      "icon_id": "5633933",
+      "name": "chevron-right",
+      "font_class": "chevron-right",
+      "unicode": "ef6f",
+      "unicode_decimal": 61295
+    },
+    {
+      "icon_id": "5634323",
+      "name": "redo-alt",
+      "font_class": "redo-alt",
+      "unicode": "f094",
+      "unicode_decimal": 61588
+    },
+    {
+      "icon_id": "836718",
+      "name": "list-ol",
+      "font_class": "listol",
+      "unicode": "e767",
+      "unicode_decimal": 59239
+    },
+    {
+      "icon_id": "348268",
+      "name": "bars",
+      "font_class": "bars",
+      "unicode": "e9ee",
+      "unicode_decimal": 59886
+    },
+    {
+      "icon_id": "433860",
+      "name": "arrow-up",
+      "font_class": "arrowup",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "5652805",
+      "name": "icon-side bar-scxmtj",
+      "font_class": "icon-sidebar-scxmtj",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "21169476",
+      "name": "train-public-transport",
+      "font_class": "train-public-transport",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "24342573",
+      "name": "the console-fill",
+      "font_class": "a-theconsole-fill",
+      "unicode": "ea32",
+      "unicode_decimal": 59954
+    },
+    {
+      "icon_id": "1251292",
+      "name": "shuffle",
+      "font_class": "shuffle",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "11102802",
+      "name": "md-train",
+      "font_class": "md-train",
+      "unicode": "e77d",
+      "unicode_decimal": 59261
+    }
+  ]
+}

templates/assets/zhheo/blogex.js

@@ -63,16 +63,59 @@ function checkOpen() {
 
 // https://blog.zhheo.com/p/c86d8f1f.html
 // ?imageAve 使用 七牛云获取图片主色调，阿里云 oss 则是 @imageAve
-// TODO 可以切换为使用本地 JS 获取色调
+// 效果比较低微，这块应该添加配置项
-// function coverColor() {
+// 用户选择是否开启主色调背景
-//     var _document$getElementB,
+// 然后选择是使用图床的 API 获取主色还是选择使用 js 获取
-//         path = null === (_document$getElementB = document.getElementById("post-cover")) || void 0 === _document$getElementB ? void 0 : _document$getElementB.src,
+// https://lokeshdhakar.com/projects/color-thief/
-//         httpRequest;
+function coverColor() {
-//     void 0 !== path ? (httpRequest = new XMLHttpRequest, httpRequest.open("GET", path + "?imageAve", !0), httpRequest.send(), httpRequest.onreadystatechange = function () {
+
-//         var json, obj, value, value;
+    let img = document.getElementById("post-cover");
-//         4 == httpRequest.readyState && 200 == httpRequest.status && (json = httpRequest.responseText, obj = eval("(" + json + ")"), value = obj.RGB, value = "#" + value.slice(2), "light" == getContrastYIQ(value) && (value = LightenDarkenColor(colorHex(value), -40)), document.styleSheets[0].addRule(":root", "--heo-main:" + value + "!important"), document.styleSheets[0].addRule(":root", "--heo-main-op:" + value + "23!important"), document.styleSheets[0].addRule(":root", "--heo-main-none:" + value + "00!important"), heo.initThemeColor(), document.getElementById("coverdiv").classList.add("loaded"))
+    let path = img.src;
-//     }) : (document.styleSheets[0].addRule(":root", "--heo-main: var(--heo-theme)!important"), document.styleSheets[0].addRule(":root", "--heo-main-op: var(--heo-theme-op)!important"), document.styleSheets[0].addRule(":root", "--heo-main-none: var(--heo-theme-none)!important"), heo.initThemeColor())
+    if (void 0 !== path) {
-// }
+
+        const colorThief = new ColorThief();
+
+        // Make sure image is finished loading
+        if (img.complete) {
+            loadColor(colorThief.getColor(img));
+        } else {
+            img.addEventListener('load', function () {
+                loadColor(colorThief.getColor(img));
+            });
+        }
+
+
+        function loadColor(rgbColor) {
+
+            let hexColor = rgbToHex(rgbColor[0], rgbColor[1], rgbColor[2]);
+
+            if ("light" === getContrastYIQ(hexColor)) {
+                hexColor = LightenDarkenColor(colorHex(hexColor), -40);
+                document.styleSheets[0].addRule(":root", "--heo-main:" + hexColor + "!important");
+                document.styleSheets[0].addRule(":root", "--heo-main-op:" + hexColor + "23!important");
+                document.styleSheets[0].addRule(":root", "--heo-main-none:" + hexColor + "00!important");
+                heo.initThemeColor();
+                document.getElementById("coverdiv").classList.add("loaded");
+            }
+
+        }
+
+
+    } else {
+        document.styleSheets[0].addRule(":root", "--heo-main: var(--heo-theme)!important");
+        document.styleSheets[0].addRule(":root", "--heo-main-op: var(--heo-theme-op)!important");
+        document.styleSheets[0].addRule(":root", "--heo-main-none: var(--heo-theme-none)!important");
+        heo.initThemeColor();
+    }
+}
+
+function rgbToHex(r, g, b) {
+    return '#' + [r, g, b].map(x => {
+        const hex = x.toString(16)
+        return hex.length === 1 ? '0' + hex : hex
+    }).join('');
+}
+
 
 function colorHex(e) {
     var t = e;
@@ -161,6 +204,7 @@ var navFn = {
 function RemoveRewardMask() {
     $(".reward-main").attr("style", "display: none"), $("#quit-box").attr("style", "display: none")
 }
+
 // 移除加载动画
 function removeLoading() {
     setTimeout(function () {
@@ -246,21 +290,7 @@ document.getElementById("post-comment") && owoBig(), document.addEventListener("
     var e, t = window.scrollY + document.documentElement.clientHeight,
         o = (window.scrollY, document.getElementById("pagination")), n = document.getElementById("post-tools");
     n && o && (e = n.offsetTop + n.offsetHeight / 2, 1300 < document.body.clientWidth && (e < t ? o.classList.add("show-window") : o.classList.remove("show-window")))
-}, 200)), "false" !== localStorage.getItem("keyboardToggle") ? document.querySelector("#consoleKeyboard").classList.add("on") : document.querySelector("#consoleKeyboard").classList.remove("on"), $(window).on("keydown", function (e) {
+}, 200));
-    if (27 == e.keyCode && (heo.hideLoading(), heo.hideConsole(), rm.hideRightMenu()), heo_keyboard && e.shiftKey) {
-        if (16 == e.keyCode && document.querySelector("#keyboard-tips").classList.add("show"), 75 == e.keyCode) return heo.keyboardToggle(), !1;
-        if (65 == e.keyCode) return heo.showConsole(), !1;
-        if (77 == e.keyCode) return heo.musicToggle(), !1;
-        if (82 == e.keyCode) return toRandomPost(), !1;
-        if (66 == e.keyCode) return pjax.loadUrl("/"), !1;
-        if (68 == e.keyCode) return rm.switchDarkMode(), !1;
-        if (70 == e.keyCode) return pjax.loadUrl("/moments/"), !1
-    }
-});
-
-$(window).on("keyup", function (e) {
-    16 == e.keyCode && document.querySelector("#keyboard-tips").classList.remove("show")
-});
 
 document.addEventListener("pjax:send", function () {
     heo.showLoading()

templates/assets/zhheo/rightmenu.js

@@ -252,17 +252,14 @@ function addRightMenuClickEvent() {
         $("#menu-home").on("click", function () {
             window.location.href = window.location.origin;
         }),
-        $("#menu-randomPost").on("click", function () {
+        // $("#menu-randomPost").on("click", function () {
-            toRandomPost();
+        //     toRandomPost();
-        }),
+        // }),
         $("#menu-commentBarrage").on("click", heo.switchCommentBarrage),
         $("#rightmenu-mask").on("click", rm.hideRightMenu),
         $("#rightmenu-mask").contextmenu(function () {
             return rm.hideRightMenu(), !1;
         }),
-        $("#menu-translate").on("click", function () {
-            rm.hideRightMenu(), translateInitialization();
-        }),
         $("#menu-copy").on("click", rm.copyPageUrl),
         $("#menu-pastetext").on("click", rm.pasteText),
         $("#menu-copytext").on("click", function () {

templates/assets/zhheo/zhheoblog.css

@@ -4653,7 +4653,8 @@ html {
 .fal,
 .far,
 .fas,
-.fat {
+.fat
+.iconfont {
     line-height: 1;
 }
 
@@ -13061,47 +13062,6 @@ span.hexo-douban-pagenum {
     transform: rotate(20deg);
 }
 
-#about-page .myInfoAndSayHello {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    color: var(--heo-white);
-    background: linear-gradient(120deg, rgb(91, 39, 255) 0px, rgb(0, 212, 255) 100%) 0% 0% / 200%;
-    animation: 15s ease 0s infinite normal none running gradient;
-    width: 59%;
-}
-
-#about-page .myInfoAndSayHello .title1 {
-    opacity: 0.8;
-    line-height: 1.3;
-}
-
-#about-page .myInfoAndSayHello .title2 {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1.1;
-    margin: 0.5rem 0px;
-}
-
-.author-content-item-group.column.mapAndInfo {
-    width: 59%;
-}
-
-.author-content-item.map {
-    background: url(../images/404.gif) center center / 100% no-repeat;
-    min-height: 160px;
-    max-height: 400px;
-    position: relative;
-    overflow: hidden;
-    margin-bottom: 0.5rem;
-    height: 60%;
-    transition: all 1s ease-in-out 0s;
-}
-
-[data-theme="dark"] .author-content-item.map {
-    background: url(../images/404.gif) center center / 100% no-repeat;
-}
-
 .author-content-item.map:hover {
     background-size: 120%;
     transition: all 4s ease-in-out 0s;
@@ -13481,7 +13441,6 @@ span.hexo-douban-pagenum {
 #about-page .about-statistic {
     min-height: 380px;
     width: 39%;
-    background: url(../images/404.gif) center top / cover no-repeat;
     color: var(--heo-white);
     overflow: hidden;
 }
@@ -13658,14 +13617,6 @@ span.hexo-douban-pagenum {
     display: none;
 }
 
-.author-content-item.game-lol {
-    background: url(../images/404.gif) center top / cover no-repeat;
-    min-height: 300px;
-    overflow: hidden;
-    color: var(--heo-white);
-    width: 59%;
-}
-
 .author-content-item .card-content {
     position: absolute;
     width: 100%;
@@ -13684,16 +13635,6 @@ span.hexo-douban-pagenum {
     }
 }
 
-.author-content-item.game-lol::after {
-    box-shadow: rgb(4, 18, 15) 0px -69px 203px 11px inset;
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-}
-
 .author-content-item .content-bottom {
     margin-top: auto;
     display: flex;
@@ -13712,55 +13653,6 @@ span.hexo-douban-pagenum {
     margin-right: 0.5rem;
 }
 
-.icon-pos-sup {
-    background: url(../images/404.gif);
-}
-
-.icon-pos-mid {
-    background: url(../images/404.gif);
-}
-
-.author-content-item.game-wolf {
-    width: 39%;
-    background: url(../images/404.gif) center top / cover no-repeat;
-    min-height: 300px;
-    overflow: hidden;
-    color: var(--heo-white);
-}
-
-.author-content-item.game-wolf::after {
-    box-shadow: rgb(65, 93, 201) 0px -69px 203px 11px inset;
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-}
-
-.author-content-item.like-technology {
-    background: url(../images/404.gif) 0% 0% / cover no-repeat;
-    min-height: 230px;
-    color: var(--heo-white);
-}
-
-.author-content-item.like-music {
-    background: url(../images/404.gif) center top / cover no-repeat;
-    min-height: 400px;
-    color: var(--heo-white);
-    overflow: hidden;
-}
-
-.author-content-item.like-music::after {
-    box-shadow: rgb(115, 104, 150) 0px -69px 203px 11px inset;
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-}
-
 .author-content-item .card-content .author-content-item-title {
     margin-bottom: 0.5rem;
 }
@@ -13819,92 +13711,6 @@ span.hexo-douban-pagenum {
     }
 }
 
-.author-content-item.single.like-movie {
-    height: 19rem;
-    background: url(../images/404.gif) center top / cover no-repeat;
-    color: var(--heo-white);
-    overflow: hidden;
-}
-
-.author-content-item.single.like-movie::after {
-    box-shadow: rgb(28, 28, 28) 0px 21px 133px 81px inset;
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-}
-
-#article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
-    padding: 8px 12px;
-    background: var(--heo-white);
-    border-radius: 12px;
-    color: var(--heo-black);
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    transition: all 0.3s ease 0s;
-    cursor: pointer;
-    border: none;
-}
-
-#article-container .author-content-item.single.like-movie .banner-button-group .banner-button:hover {
-    background: rgb(208, 178, 71);
-    color: var(--heo-white);
-}
-
-#article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
-    margin-right: 8px;
-    font-size: 1rem;
-}
-
-@media screen and (max-width: 768px) {
-    #article-container .author-content-item.single.like-movie .banner-button-group {
-        right: 1rem;
-        bottom: 1rem;
-    }
-
-    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
-        background: 0px 0px;
-        color: var(--heo-white);
-        padding: 0px;
-    }
-
-    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
-        margin-right: 0px;
-        font-size: 1.5rem;
-    }
-
-    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text {
-        display: none;
-    }
-}
-
-.author-content.author-content-item.toolPage {
-    height: 19rem;
-    background: url(../images/404.gif) center top / cover no-repeat;
-    color: var(--heo-white);
-    overflow: hidden;
-    margin-top: 0px;
-}
-
-.author-content.author-content-item.momentsPage {
-    height: 19rem;
-    background: url(../images/404.gif) center top / cover no-repeat;
-    color: var(--heo-white);
-    overflow: hidden;
-    margin-top: 0px;
-}
-
-.author-content.author-content-item.essayPage {
-    height: 19rem;
-    background: url(../images/404.gif) center center / cover no-repeat;
-    color: var(--heo-white);
-    overflow: hidden;
-    margin-top: 0px;
-}
-
 #console {
     display: flex;
     position: fixed;

templates/category.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
+<html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category')" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:fragment="content">
 
@@ -20,7 +20,7 @@
                                  th:classappend="${category.metadata.name == categoryItem.metadata.name} ? 'select'"
                                  th:each="categoryItem : ${categoryFinder.listAll()}"
                                  th:id="${categoryItem.spec.displayName}">
-                                <a th:href="${categoryItem.status.permalink}"
+                                <a th:href="@{${categoryItem.status.permalink}}"
                                    th:text="${categoryItem.spec.displayName}"></a>
                             </div>
 
@@ -34,7 +34,7 @@
                     <!-- TODO 按照年份分组 需要 halo 提供归档数据-->
                     <!--<div class="article-sort-item year">2022</div>-->
                     <div class="article-sort-item" th:each="post : ${posts.items}">
-                        <a class="article-sort-item-img" th:href="${post.status.permalink}"
+                        <a class="article-sort-item-img" th:href="@{${post.status.permalink}}"
                            th:title="${post.spec.title}">
                             <img th:alt="${post.spec.title}"
                                  th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
@@ -48,11 +48,11 @@
                                 </time>
                             </div>
                             <a class="article-sort-item-title" onclick="window.event.cancelBubble=!0"
-                               th:href="${post.status.permalink}" th:text="${post.spec.title}"
+                               th:href="@{${post.status.permalink}}" th:text="${post.spec.title}"
                                th:title="${post.spec.title}"></a>
                             <div class="article-sort-item-tags">
                                 <a class="article-meta__tags"
-                                   th:each="tag : ${post.tags}" th:href="${tag.status.permalink}">
+                                   th:each="tag : ${post.tags}" th:href="@{${tag.status.permalink}}">
                                     <span class="tags-punctuation">#</span>
                                     [[${tag.spec.displayName}]]
                                 </a>
@@ -66,7 +66,7 @@
                     <div class="pagination"><span class="page-number current">1</span></div>
                 </nav>
             </div>
-            <div th:replace="modules/aside :: aside('profile,recent-posts,tags-stat')"></div>
+            <div th:replace="modules/aside :: aside(${theme.config.sidebar.category_widgets})"></div>
         </main>
 
         <!-- 底部 -->

templates/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
+<html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'index')" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:fragment="content">
 
@@ -24,7 +24,7 @@
                 <th:block th:replace="modules/post-list :: post-list"></th:block>
 
             </div>
-            <div th:replace="modules/aside :: aside('profile,wechat,recent-posts,tags-stat')"></div>
+            <div th:replace="modules/aside :: aside(${theme.config.sidebar.widgets})"></div>
         </main>
         <!-- 底部 -->
         <footer th:replace="modules/footer :: footer"></footer>

templates/modules/aside.html

@@ -1,13 +1,34 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
+<!-- 侧边栏 -->
 <div class="aside-content" id="aside-content" th:fragment="aside(widgets)"
      th:if="${theme.config.sidebar.location != 'hide-aside' && not #strings.isEmpty(widgets)}">
 
-    <!-- 侧栏部件不确定都有什么 -->
+    <!-- 侧栏部件，不包含 toc 则直接遍历 -->
+    <th:block th:if="${not #strings.contains(widgets, 'toc')}">
         <th:block th:each="widget : ${#strings.listSplit(widgets, ',')}">
             <th:block th:replace="'modules/widgets/aside/'+ ${widget}"/>
         </th:block>
+    </th:block>
+
+    <!-- 侧栏部件，toc 之后的组件需要被 sticky_layout 包裹 -->
+    <th:block th:if="${#strings.contains(widgets, 'toc')}">
+
+        <th:block th:each="widget : ${#strings.listSplit(#strings.substringBefore(widgets, 'toc'), ',')}">
+
+            <th:block th:replace="'modules/widgets/aside/'+ ${widget}"/>
+        </th:block>
+
+        <!-- toc 之后的组件需要被 sticky_layout 包裹 -->
+        <div class="sticky_layout">
+            <th:block th:replace="modules/widgets/aside/toc :: toc"/>
+
+            <th:block th:each="widget : ${#strings.listSplit(#strings.substringAfter(widgets, 'toc'), ',')}">
+                <th:block th:replace="'modules/widgets/aside/'+ ${widget}"/>
+            </th:block>
+        </div>
+    </th:block>
 
 
 </div>

templates/modules/category-bar.html

@@ -12,7 +12,7 @@
             <div class="category-bar-item"
                  th:each="categoryItem : ${categories}"
                  th:id="${categoryItem.spec.displayName}">
-                <a th:href="${categoryItem.status.permalink}" th:text="${categoryItem.spec.displayName}"></a>
+                <a th:href="@{${categoryItem.status.permalink}}" th:text="${categoryItem.spec.displayName}"></a>
             </div>
 
         </th:block>

templates/modules/footer.html

@@ -13,14 +13,15 @@
 
     <!-- 相关地址  -->
     <th:block th:if="${not #strings.isEmpty(theme.config.footer.menu)}"
-              th:with="footMenu = ${theme.config.footer.menu}">
+              th:with="footMenu = ${menuFinder.getByName(theme.config.footer.menu)}">
-        <div id="heo-footer"
+        <div id="heo-footer" th:if="${not #lists.isEmpty(footMenu)}">
-             th:if="${not #strings.isEmpty(footMenu)} and ${not #lists.isEmpty(menuFinder.getByName(footMenu))}">
+            <div class="footer-group" th:each="menuItem : ${footMenu.menuItems}">
-            <div class="footer-group" th:each="menuItem : ${menuFinder.getByName(footMenu).menuItems}">
+                <h3 class="footer-title" th:text="${menuItem.status.displayName}"></h3>
-                <h3 class="footer-title" th:text="${menuItem.status.displayName}">软件</h3>
                 <div class="footer-links">
-                    <a class="footer-item" th:each="childMenu : ${menuItem.children}" th:href="${childMenu.status.href}"
+                    <a class="footer-item" th:each="childMenu : ${menuItem.children}"
-                       th:text="${childMenu.status.displayName}"></a>
+                       th:href="@{${childMenu.status.href}}"
+                       th:text="${childMenu.status.displayName}">
+                    </a>
                 </div>
             </div>
         </div>

templates/modules/head.html

@@ -15,12 +15,11 @@
     <script th:src="@{/assets/js/heo.js}"></script>
 
     <link rel="stylesheet" th:href="@{/assets/zhheo/zhheoblog.css}">
-    <!-- fontawesome-pro https://github.com/duyplus/fontawesome-pro  -->
+
     <link media="print"
           onload='this.media="all"'
           rel="stylesheet"
-          href="https://cdn2.tianli0.top/gh/duyplus/fontawesome-pro/css/all.min.css"
+          th:href="@{/assets/libs/iconfont/iconfont.css}">
-    />
 
     <!-- 右下角通知 -->
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css"
@@ -118,9 +117,6 @@
     </script>
     <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
 
-    <!--  todo 不知道是否有用 https://remixicon.com/  -->
-    <link href="https://cdn2.tianli0.top/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
-
     <!-- 动态加载条 -->
     <script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
             src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"

templates/modules/layouts/layout.html

@@ -1,8 +1,30 @@
 <!DOCTYPE html>
-<html lang="en" th:fragment="layout(content)" xmlns:th="http://www.thymeleaf.org">
+<html lang="en" th:fragment="layout(content, htmlType)" xmlns:th="http://www.thymeleaf.org">
 
 <!-- head 中自定义的  -->
-<head th:replace="modules/head :: head(metas = null,links = null, scripts = null)"></head>
+<head th:replace="modules/head :: head(metas = null, links = null, scripts =  ~{::head/script})">
+
+    <!-- 声明一些公共信息 -->
+    <script th:inline="javascript">
+        const GLOBAL_CONFIG = {
+            siteTitle : [[${site.title}]],
+            // 页面类型 index,page,post,tag,category
+            htmlType: [[${htmlType}]],
+            postTitle: [[${htmlType == 'post' ? post.spec.title : ''}]],
+            Snackbar: {
+                chs_to_cht: "你已切换为繁体",
+                cht_to_chs: "你已切换为简体",
+                day_to_night: "你已切换为深色模式",
+                night_to_day: "你已切换为浅色模式",
+                bgLight: "#49b1f5",
+                bgDark: "#121212",
+                position: "top-center",
+            },
+
+        };
+    </script>
+
+</head>
 
 <body>
 
@@ -26,10 +48,6 @@
     <script th:src="@{/assets/js/main.js}"></script>
     <script charset="utf-8" data-pjax="" th:src="@{/assets/zhheo/blogex.js}"></script>
 
-    <!-- 繁简翻译 js -->
-    <!-- 改成可配置 -->
-    <script th:src="@{/assets/libs/translate/tw_cn.js}"></script>
-
     <!-- https://instant.page/ 网站预加载， 放在 </body> 之前 -->
     <script th:src="@{/assets/libs/instantpage/instantpage.min.js}" type="module"></script>
 
@@ -46,11 +64,16 @@
 
     <!--  https://raphamorim.io/waterfall.js/  应该是这个 还有相关的 js 代码 是否可以调整-->
     <script th:src="@{/assets/libs/waterfall/waterfall.min.js}"></script>
+
+    <!-- 获取主色 https://lokeshdhakar.com/projects/color-thief/ -->
+    <script th:src="@{/assets/libs/color-thief/color-thief.umd.js}"></script>
 </div>
 
 <div>
+
     <script th:inline="javascript">
-        //coverColor();
+
+        coverColor();
 
         if ([[${theme.config.other.loading_box} and not ${#strings.isEmpty(theme.config.other.loading_box_img)}]]) {
             // 移除加载动画

templates/modules/post-list.html

@@ -11,7 +11,7 @@
          th:each="post,iStat : ${postItems}">
 
         <div class="post_cover cover_radius">
-            <a th:attr="title=${post.spec.title}" th:href="${post.status.permalink}">
+            <a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
                 <img class="post_bg entered loaded" loading="lazy"
                      th:alt="${post.status.excerpt}"
                      th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
@@ -21,7 +21,7 @@
         <th:block th:if="${not #lists.isEmpty(post.categories)}">
             <a class="article-meta__categories"
                th:each="category : ${post.categories}"
-               th:href="${category.status.permalink}"
+               th:href="@{${category.status.permalink}}"
                th:text="${category.spec.displayName}"
                th:title="${category.spec.displayName}">
             </a>
@@ -31,7 +31,7 @@
                 <span class="lastestpost">最新文章</span>
                 <a class="article-title"
                    th:attr="title=${post.spec.title}"
-                   th:href="${post.status.permalink}"
+                   th:href="@{${post.status.permalink}}"
                    th:text="${post.spec.title}">
                 </a>
                 <div class="content" th:text="${post.status.excerpt}"></div>
@@ -45,7 +45,7 @@
                         <a class="article-meta__tags" event.cancelbubble
                            onclick="window.event.cancelBubble=!0"
                            th:each="tag : ${post.tags}"
-                           th:href="${tag.status.permalink}"
+                           th:href="@{${tag.status.permalink}}"
                            th:title="${tag.spec.displayName}">
                             <span class="tags-punctuation">#[[${tag.spec.displayName}]]</span>
                         </a>
@@ -72,8 +72,8 @@
         <div class="pagination" th:if="${(totalPages le 7) && (totalPages gt 0)}">
 
             <!-- 上一页 -->
-            <a class="extend prev" rel="prev" th:href="${posts.prevUrl}" th:if="${posts.hasPrevious()}">
+            <a class="extend prev" rel="prev" th:href="@{${posts.prevUrl}}" th:if="${posts.hasPrevious()}">
-                <i class="fas fa-chevron-left fa-fw"></i>
+                <i class="iconfont icon-chevron-left"></i>
                 <div class="pagination_tips_prev">上页</div>
             </a>
 
@@ -85,9 +85,9 @@
             </a>
 
             <!-- 下一页 -->
-            <a class="extend next" rel="next" th:href="${posts.nextUrl}" th:if="${posts.hasNext()}">
+            <a class="extend next" rel="next" th:href="@{${posts.nextUrl}}" th:if="${posts.hasNext()}">
                 <div class="pagination_tips_next">下页</div>
-                <i class="fas fa-chevron-right fa-fw"></i>
+                <i class="iconfont icon-chevron-right"></i>
             </a>
 
         </div>
@@ -98,8 +98,8 @@
         <div class="pagination" th:if="${totalPages gt 7}">
 
             <!-- 上一页 -->
-            <a class="extend prev" rel="prev" th:href="${posts.prevUrl}" th:if="${posts.hasPrevious()}">
+            <a class="extend prev" rel="prev" th:href="@{${posts.prevUrl}}" th:if="${posts.hasPrevious()}">
-                <i class="fas fa-chevron-left fa-fw"></i>
+                <i class="iconfont icon-chevron-left"></i>
                 <div class="pagination_tips_prev">上页</div>
             </a>
 
@@ -151,9 +151,9 @@
             </a>
 
             <!-- 下一页 -->
-            <a class="extend next" rel="next" th:href="${posts.nextUrl}" th:if="${posts.hasNext()}">
+            <a class="extend next" rel="next" th:href="@{${posts.nextUrl}}" th:if="${posts.hasNext()}">
                 <div class="pagination_tips_next">下页</div>
-                <i class="fas fa-chevron-right fa-fw"></i>
+                <i class="iconfont icon-chevron-right"></i>
             </a>
 
         </div>

templates/modules/right-menu.html

@@ -4,61 +4,80 @@
 <div th:fragment="right-menu">
     <div id="rightMenu">
         <div class="rightMenu-group rightMenu-small">
-            <div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div>
+            <div class="rightMenu-item" id="menu-backward"><i class="iconfont icon-arrow-left"></i></div>
-            <div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div>
+            <div class="rightMenu-item" id="menu-forward"><i class="iconfont icon-arrow-right"></i></div>
-            <div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div>
+            <div class="rightMenu-item" id="menu-refresh"><i class="iconfont icon-redo-alt"></i></div>
-            <div class="rightMenu-item" id="menu-top"><i class="fa-solid fa-arrow-up"></i></div>
+            <div class="rightMenu-item" id="menu-top"><i class="iconfont icon-arrow-up"></i></div>
         </div>
         <div class="rightMenu-group rightMenu-line rightMenuPlugin">
-            <div class="rightMenu-item" id="menu-copytext"><i class="fa-duotone fa-copy"></i><span>复制选中文本</span>
+            <div class="rightMenu-item" id="menu-copytext">
+                <i class="iconfont icon-copy"></i>
+                <span>复制选中文本</span>
             </div>
-            <div class="rightMenu-item" id="menu-pastetext"><i class="fa-duotone fa-paste"></i><span>粘贴文本</span>
+            <div class="rightMenu-item" id="menu-pastetext">
+                <i class="iconfont icon-paste"></i>
+                <span>粘贴文本</span>
             </div>
-            <a class="rightMenu-item" id="menu-commenttext"><i
+            <a class="rightMenu-item" id="menu-commenttext">
-                    class="fa-duotone fa-comment-medical"></i><span>引用到评论</span></a>
+                <i class="iconfont icon-comment-dots1"></i>
-            <div class="rightMenu-item" id="menu-newwindow"><i
+                <span>引用到评论</span>
-                    class="fa-duotone fa-window-restore"></i><span>新窗口打开</span></div>
+            </a>
-            <div class="rightMenu-item" id="menu-copylink"><i
+            <div class="rightMenu-item" id="menu-newwindow">
-                    class="fa-duotone fa-link-horizontal"></i><span>复制链接地址</span></div>
+                <i class="iconfont icon-window-restore"></i>
-            <div class="rightMenu-item" id="menu-copyimg"><i class="fa-duotone fa-images"></i><span>复制此图片</span>
+                <span>新窗口打开</span>
             </div>
-            <div class="rightMenu-item" id="menu-downloadimg"><i
+            <div class="rightMenu-item" id="menu-copylink">
-                    class="fa-duotone fa-download"></i><span>下载此图片</span></div>
+                <i class="iconfont icon-link"></i>
-            <div class="rightMenu-item" id="menu-search"><i
+                <span>复制链接地址</span>
-                    class="fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div>
+            </div>
-            <div class="rightMenu-item" id="menu-searchBaidu"><i
+            <div class="rightMenu-item" id="menu-copyimg">
-                    class="fa-solid fa-magnifying-glass"></i><span>百度搜索</span></div>
+                <i class="iconfont icon-image"></i>
-            <div class="rightMenu-item" id="menu-music-toggle"><i class="fas fa-play"></i><span>播放音乐</span></div>
+                <span>复制此图片</span>
-            <div class="rightMenu-item" id="menu-music-back"><i
+            </div>
-                    class="fa-duotone fa-backward"></i><span>切换到上一首</span></div>
+            <div class="rightMenu-item" id="menu-downloadimg">
-            <div class="rightMenu-item" id="menu-music-forward"><i
+                <i class="iconfont icon-download"></i>
-                    class="fa-duotone fa-forward"></i><span>切换到下一首</span></div>
+                <span>下载此图片</span>
-            <div class="rightMenu-item" id="menu-music-playlist"
+            </div>
-                 onclick='window.open("https://music.163.com/#/playlist?app_version=8.8.36&amp;id=5197802668","_blank")'>
+            <div class="rightMenu-item" id="menu-search">
-                <i class="fa-duotone fa-list-music"></i><span>查看所有歌曲</span></div>
+                <i class="iconfont icon-search"></i>
-            <div class="rightMenu-item" id="menu-music-copyMusicName"><i class="fa-duotone fa-copy"></i>
+                <span>站内搜索</span>
-                <span>复制歌名</span></div>
+            </div>
+            <div class="rightMenu-item" id="menu-searchBaidu">
+                <i class="iconfont icon-baidu"></i>
+                <span>百度搜索</span>
+            </div>
+        </div>
+        <div class="rightMenu-group rightMenu-line rightMenuOther">
+            <a class="rightMenu-item menu-link" id="menu-randomPost">
+                <i class="iconfont icon-dice"></i>
+                <span>随便逛逛</span>
+            </a>
+            <a class="rightMenu-item menu-link" href="categories/index.html">
+                <i class="iconfont icon-list-ul"></i>
+                <span>博客分类</span>
+            </a>
+            <a class="rightMenu-item menu-link" href="tags/index.html">
+                <i class="iconfont icon-tags"></i><span>文章标签</span>
+            </a>
+        </div>
+        <div class="rightMenu-group rightMenu-line">
+            <a class="rightMenu-item menu-link" href="cc/index.html">
+                <i class="iconfont icon-hand-holding"></i>
+                <span>隐私协议</span>
+            </a>
+            <a class="rightMenu-item menu-link" href="cc/index.html">
+                <i class="iconfont icon-closed-captioning"></i>
+                <span>版权协议</span>
+            </a>
         </div>
-        <div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link"
-                                                                      id="menu-randomPost"><i
-                class="fa-duotone fa-dice"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link"
-                                                                           href="categories/index.html"><i
-                class="fa-duotone fa-list-tree"></i><span>博客分类</span></a><a class="rightMenu-item menu-link"
-                                                                                href="tags/index.html"><i
-                class="fa-duotone fa-tags"></i><span>文章标签</span></a></div>
-        <div class="rightMenu-group rightMenu-line"><a class="rightMenu-item menu-link" href="cc/index.html"><i
-                class="fa-solid fa-hand"></i><span>隐私协议</span></a><a class="rightMenu-item menu-link"
-                                                                         href="cc/index.html"><i
-                class="fa-solid fa-closed-captioning"></i><span>版权协议</span></a></div>
         <div class="rightMenu-group rightMenu-line rightMenuOther">
             <div class="rightMenu-item" id="menu-copy">
-                <i class="fa-duotone fa-link-horizontal"></i><span>复制地址</span>
+                <i class="iconfont icon-link"></i>
+                <span>复制地址</span>
             </div>
             <div class="rightMenu-item" id="menu-darkmode">
-                <i class="fa-solid fa-moon"></i><span class="menu-darkmode-text">显示模式</span>
+                <i class="iconfont icon-moon"></i>
-            </div>
+                <span class="menu-darkmode-text">显示模式</span>
-            <div class="rightMenu-item" id="menu-translate">
-                <i class="fa-duotone fa-language"></i><span>轉為繁體</span>
             </div>
         </div>
     </div>

templates/modules/widgets/aside/archives.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 归档 -->
+<div class="card-widget card-categories" th:fragment="archives">
+
+</div>
+
+</html>

templates/modules/widgets/aside/categories.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 目录 -->
+<div class="card-widget card-categories" th:fragment="categories" th:with="categories = ${categoryFinder.listAll()}">
+    <div class="item-headline"><i class="iconfont icon-folder-open"></i><span>分类</span></div>
+    <div class="aside-list">
+        <ul class="card-category-list">
+            <li class="card-category-list-item" th:each="category : ${categories}">
+                <a class="card-category-list-link" th:href="@{${category.status.permalink}}">
+                    <span class="card-category-list-name" th:title="${category.spec.displayName}" th:text="${category.spec.displayName}"></span>
+                    <span class="card-category-list-count" th:text="${category.status.postCount}"></span>
+                </a>
+            </li>
+        </ul>
+
+
+    </div>
+</div>
+
+</html>

templates/modules/widgets/aside/comments.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 归档 -->
+<div class="card-widget card-recent-post"  th:fragment="comments">
+    <div class="item-headline"><i class="iconfont icon-comment-dots"></i><span>最新评论</span></div>
+    <div class="aside-list">
+
+        <div class="aside-list-item">
+            <a class="thumbnail" href="/404.html">
+                <img loading="lazy" alt="dasda" src="https://seccdn.libravatar.org/avatar/7d88658473effdd6b068e181b9636878?d=robohash">
+            </a>
+            <div class="content">
+                <a class="comment" href="/messageboard/#635ba6370ccf12000f30a175" title="test">
+                    评论模块未完成
+                </a>
+                <div class="name">
+                    <span>liuzhihang / </span>
+                    <time datetime="2022-10-28T09:51:51.581Z">20 小時前</time>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+</html>

templates/modules/widgets/aside/profile.html

@@ -22,7 +22,7 @@
     <!-- 跳转信息 -->
     <div class="banner-button-group">
         <a class="banner-button" href="/about">
-            <i class="fas fa-circle-arrow-up-right"></i>
+            <i class="iconfont icon-arrow-circle-right"></i>
             <span class="banner-button-text">了解更多</span>
         </a>
     </div>
@@ -30,11 +30,11 @@
     <div class="card-info-social-icons is-center">
         <a class="social-icon" href="#" rel="external nofollow" target="_blank"
            title="Github">
-            <i class="ri-github-line"></i>
+            <i class="iconfont icon-github-line"></i>
         </a>
         <a class="social-icon" href="#" rel="external nofollow" target="_blank"
            title="Mail">
-            <i class="ri-mail-line"></i>
+            <i class="iconfont icon-mail-line"></i>
         </a>
     </div>
 </div>

templates/modules/widgets/aside/recent-posts.html

@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <div class="card-widget card-recent-post" th:fragment="recent-posts" th:with="posts = ${postFinder.list(1,6)}">
-    <div class="item-headline"><i class="fas fa-list-ol"></i><span>最近发布</span></div>
+    <div class="item-headline"><i class="iconfont icon-listol"></i><span>最近发布</span></div>
     <div class="aside-list">
         <!-- 最新文章，用户可以自定义展示数量 -->
         <div class="aside-list-item" th:each="post : ${posts}">
-            <a class="thumbnail" th:href="${post.status.permalink}" th:title="${post.spec.title}">
+            <a class="thumbnail" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
                 <img loading="lazy" th:alt="${post.spec.title}" th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
             </a>
             <div class="content">
-                <a class="title" th:href="${post.status.permalink}" th:text="${post.spec.title}"
+                <a class="title" th:href="@{${post.status.permalink}}" th:text="${post.spec.title}" th:title="${post.spec.title}"></a>
-                   th:title="${post.spec.title}"></a>
                 <time th:attr="datetime=${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm:ss')}"
                       th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}"
                       th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}">

templates/modules/widgets/aside/stat.html

@@ -2,28 +2,45 @@
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <!-- 侧边栏站点信息统计 -->
 
-<th:block th:fragment="stat">
+<th:block th:fragment="stat" th:with="stats = ${siteStatsFinder.getStats()}">
 
-    <!-- 这里还需要换成动态的 -->
+    <div class="item-headline"><i class="iconfont icon-icon-sidebar-scxmtj"></i><span>统计</span></div>
-    <div class="item-headline"><i class="fas fa-chart-line"></i><span>统计</span></div>
     <div class="webinfo">
         <div class="webinfo-item">
-            <div class="webinfo-item-title"><i class="item-icon fas fa-file-alt"></i>
+            <div class="webinfo-item-title"><i class="iconfont icon-file-alt"></i>
-                <div class="item-name">文章总数 :</div>
+                <div class="item-name">文章数 :</div>
             </div>
-            <div class="item-count">649</div>
+            <div class="item-count" th:text="${stats.post}"></div>
+        </div>
+        <!--<div class="webinfo-item">-->
+        <!--    <div class="webinfo-item-title"><i class="item-icon fas fa-stopwatch"></i>-->
+        <!--        <div class="item-name">建站天数 :</div>-->
+        <!--    </div>-->
+        <!--    <div class="item-count" data-publishdate="2019-10-27T16:00:00.000Z" id="runtimeshow"></div>-->
+        <!--</div>-->
+        <!--<div class="webinfo-item">-->
+        <!--    <div class="webinfo-item-title"><i class="item-icon fas fa-font"></i>-->
+        <!--        <div class="item-name">全站字数 :</div>-->
+        <!--    </div>-->
+        <!--    <div class="item-count">606.7k</div>-->
+        <!--</div>-->
+        <div class="webinfo-item">
+            <div class="webinfo-item-title"><i class="iconfont icon-sliders"></i>
+                <div class="item-name">分类数 :</div>
+            </div>
+            <div class="item-count" th:text="${stats.category}"></div>
         </div>
         <div class="webinfo-item">
-            <div class="webinfo-item-title"><i class="item-icon fas fa-stopwatch"></i>
+            <div class="webinfo-item-title"><i class="iconfont icon-comment-alt"></i>
-                <div class="item-name">建站天数 :</div>
+                <div class="item-name">评论数 :</div>
             </div>
-            <div class="item-count" data-publishdate="2019-10-27T16:00:00.000Z" id="runtimeshow"></div>
+            <div class="item-count" th:text="${stats.comment}"></div>
         </div>
         <div class="webinfo-item">
-            <div class="webinfo-item-title"><i class="item-icon fas fa-font"></i>
+            <div class="webinfo-item-title"><i class="iconfont icon-bullseye"></i>
-                <div class="item-name">全站字数 :</div>
+                <div class="item-name">访问量 :</div>
             </div>
-            <div class="item-count">606.7k</div>
+            <div class="item-count" th:text="${stats.visit}"></div>
         </div>
     </div>
 </th:block>

templates/modules/widgets/aside/tags.html

@@ -4,10 +4,10 @@
 
 <th:block th:fragment="tags" th:with="tags = ${tagFinder.listAll()}">
 
-    <div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div>
+    <div class="item-headline"><i class="iconfont icon-tags"></i><span>标签</span></div>
     <div class="card-tag-cloud">
         <a style="font-size:1em;color:#d3d3d3" th:each="tag : ${tags}"
-           th:href="${tag.status.permalink}"
+           th:href="@{${tag.status.permalink}}"
            th:title="${tag.spec.displayName}">
             <!-- 角标 -->
             [[${tag.spec.displayName}]]<sup th:text="${tag.status.postCount}"></sup>

templates/modules/widgets/aside/toc.html

@@ -5,54 +5,12 @@
 <th:block th:fragment="toc">
     <div class="card-widget" id="card-toc">
         <div class="item-headline">
-            <i class="fas fa-bars"></i>
+            <i class="iconfont icon-bars"></i>
             <span>文章目录</span>
+            <span class="toc-percentage"></span>
         </div>
         <!-- 目录容器 -->
         <div class="toc-content"></div>
     </div>
-
-    <!-- tocbot 用来生成目录 -->
-    <div>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js"></script>
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.css" rel="stylesheet">
-    </div>
-    <script>
-        // 给标签添加 id
-        var headerEl = 'h1,h2,h3,h4,h5,h6', // headers
-            content = '.post-content', // 文章容器
-            idArr = {};
-        var headers = $(content).children(headerEl);
-
-        // 没有 toc 目录，则直接移除
-        if (headers.length === 0) {
-            document.getElementById("card-toc").remove();
-        } else {
-            headers.each(function () {
-
-                // 去除空格以及多余标点
-                var headerId = $(this).text().replace(/[\s|\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\：|\，|\。]/g, '');
-
-                headerId = headerId.toLowerCase();
-                if (idArr[headerId]) {
-                    // id已经存在
-                    $(this).attr('id', headerId + '-' + idArr[headerId]);
-                    idArr[headerId]++;
-                } else {
-                    // id未存在
-                    idArr[headerId] = 1;
-                    $(this).attr('id', headerId);
-                }
-            });
-            tocbot.init({
-                tocSelector: '.toc-content',
-                contentSelector: '.post-content',
-                headingSelector: headerEl,
-                hasInnerContainers: true,
-
-            });
-        }
-
-    </script>
 </th:block>
 </html>

templates/modules/widgets/banner-group.html

@@ -133,7 +133,7 @@
         <!-- 随机前往一篇文章 -->
         <a id="banner-hover" onclick="randomPost()">
             <span class="bannerText">随便逛逛</span>
-            <i class="fas fa-arrow-right banner-righticon"></i>
+            <i class="iconfont icon-arrow-right banner-righticon"></i>
         </a>
     </div>
 
@@ -141,20 +141,20 @@
     <div class="categoryGroup">
         <div class="categoryItem" style="box-shadow:var(--heo-shadow-blue)">
             <a class="categoryButton CB1 bikan"
-               th:href="${#strings.isEmpty(theme.config.top.bikan)? theme.config.top.bikan : 'javascript:void(0);'}">
+               th:href="@{${#strings.isEmpty(theme.config.top.bikan)? theme.config.top.bikan : 'javascript:void(0);'}}">
-                <span class="categoryButtonText">必看精选</span><i class="fas fa-dove"></i>
+                <span class="categoryButtonText">必看精选</span><i class="iconfont icon-book"></i>
             </a>
         </div>
         <div class="categoryItem" style="box-shadow:var(--heo-shadow-red)">
             <a class="categoryButton remen"
-               th:href="${#strings.isEmpty(theme.config.top.remen)? theme.config.top.remen : 'javascript:void(0);'}">
+               th:href="@{${#strings.isEmpty(theme.config.top.remen)? theme.config.top.remen : 'javascript:void(0);'}}">
-                <span class="categoryButtonText">热门文章</span><i class="fas fa-burn"></i>
+                <span class="categoryButtonText">热门文章</span><i class="iconfont icon-burn"></i>
             </a>
         </div>
         <div class="categoryItem" style="box-shadow:var(--heo-shadow-green)">
             <a class="categoryButton shiyong"
-               th:href="${#strings.isEmpty(theme.config.top.shiyong)? theme.config.top.shiyong : 'javascript:void(0);'}">
+               th:href="@{${#strings.isEmpty(theme.config.top.shiyong)? theme.config.top.shiyong : 'javascript:void(0);'}}">
-                <span class="categoryButtonText">实用教程</span><i class="fas fa-book"></i>
+                <span class="categoryButtonText">实用教程</span><i class="iconfont icon-book"></i>
             </a>
         </div>
     </div>

templates/modules/widgets/console.html

@@ -3,7 +3,7 @@
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <div id="console" th:fragment="console">
     <div class="close-btn" href="javascript:void(0);" onclick="heo.hideConsole()">
-        <i class="fas fa-circle-xmark"></i>
+        <i class="iconfont icon-times-circle"></i>
     </div>
     <div class="console-card-group">
         <!-- 评论，需要使用评论插件，获取最近评论 -->
@@ -26,7 +26,7 @@
                 <div class="card-tag-cloud" th:with="tags = ${tagFinder.listAll()}">
                     <a style="font-size:1em;color:#d3d3d3"
                        th:each="tag : ${tags}"
-                       th:href="${tag.status.permalink}"
+                       th:href="@{${tag.status.permalink}}"
                        th:text="${tag.spec.displayName}">
                         <sup th:text="${tag.status.postCount}"> </sup>
                     </a>

templates/modules/widgets/nav-left.html

@@ -5,21 +5,21 @@
 <div id="blog_name" th:fragment="nav-left">
 
     <th:block th:if="${not #strings.isEmpty(theme.config.nav.left_menu)}"
-              th:with="leftMenu = ${theme.config.nav.left_menu}">
+              th:with="leftMenu = ${menuFinder.getByName(theme.config.nav.left_menu)}">
         <!-- 菜单栏左侧按钮，没有配置时，则不展示-->
         <div class="back-home-button" tabindex="-1"
-             th:if="${not #strings.isEmpty(leftMenu)} and ${not #lists.isEmpty(menuFinder.getByName(leftMenu))}">
+             th:if="${not #lists.isEmpty(leftMenu)}">
 
-            <i class="back-home-button-icon fas fa-grip-vertical"></i>
+            <i class="back-home-button-icon iconfont icon-grip-vertical"></i>
             <div class="back-menu-list-groups">
-                <div class="back-menu-list-group" th:each="menuItem : ${menuFinder.getByName(leftMenu).menuItems}">
+                <div class="back-menu-list-group" th:each="menuItem : ${leftMenu.menuItems}">
                     <!-- 菜单必须有子项才会展示 -->
                     <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
                         <div class="back-menu-list-title" th:text="${menuItem.status.displayName}"></div>
                         <div class="back-menu-list">
                             <th:block th:each="childMenu : ${menuItem.children}">
                                 <a class="back-menu-item" rel="external nofollow"
-                                   target="_blank" th:href="${childMenu.status.href}">
+                                   target="_blank" th:href="@{${childMenu.status.href}}">
                                     <!-- icon 预留 -->
                                     <!--<img class="back-menu-item-icon" th:src="@{图片地址}">-->
                                     <span class="back-menu-item-text" th:text="${childMenu.status.displayName}"></span>

templates/modules/widgets/nav-menu.html

@@ -9,9 +9,8 @@
         <div class="menus_item" th:each="menuItem : ${menuFinder.getDefault().menuItems}">
 
             <!-- javascript:void(0);" -->
-            <a class="site-page" rel="external nofollow" th:href="${menuItem.status.href}">
+            <a class="site-page" rel="external nofollow" th:href="@{${menuItem.status.href}}">
                 <span th:text="${menuItem.status.displayName}"></span>
-                <i class="fas fa-chevron-down expand"></i>
             </a>
 
             <!-- 有子菜单则显示子菜单 -->
@@ -19,7 +18,7 @@
                 <!-- 子菜单 -->
                 <ul class="menus_item_child">
                     <li th:each="childMenu : ${menuItem.children}">
-                        <a class="site-page child" th:href="${childMenu.status.href}">
+                        <a class="site-page child" th:href="@{${childMenu.status.href}}">
                             <!-- 这里应该有一个 icon 暂时还不支持 -->
                             <!--<i class="fa-fw fa-duotone fa-list-timeline"></i>-->
                             <span th:text="${menuItem.status.displayName}"></span>

templates/modules/widgets/nav-right.html

@@ -10,20 +10,20 @@
     <div class="nav-button only-home" id="travellings_button">
         <a class="site-page" href="javascript:void(0);" rel="external nofollow"
            title="友链">
-            <i class="fa-duotone fa-train-subway" style="font-size:1rem"></i>
+            <i class="iconfont icon-bus" style="font-size:1rem"></i>
         </a>
     </div>
 
     <div class="nav-button">
         <a class="site-page" href="javascript:void(0);" title="随机文章">
-            <i class="fa-duotone fa-dice" style="font-size:1rem"></i>
+            <i class="iconfont icon-shuffle" style="font-size:1rem"></i>
         </a>
     </div>
 
     <!-- 搜索使用搜索插件 -->
     <div class="nav-button" id="search-button">
         <a class="site-page social-icon search" href="javascript:void(0);" rel="external nofollow" title="站内搜索">
-            <i class="fas fa-magnifying-glass" style="font-size:1rem"></i>
+            <i class="iconfont icon-search" style="font-size:1rem"></i>
         </a>
     </div>
 
@@ -31,21 +31,21 @@
     <div class="nav-button">
         <a class="console_switchbutton" href="javascript:void(0);" onclick="heo.showConsole()" rel="external nofollow"
            title="控制台">
-            <i class="fa-duotone fa-gear" style="font-size:1rem"></i>
+            <i class="iconfont icon-a-theconsole-fill" style="font-size:1rem"></i>
         </a>
     </div>
 
     <div class="nav-button" id="nav-totop" onclick="btf.scrollToDest(0,500)">
         <a class="totopbtn">
-            <i class="fas fa-arrow-up"></i><span id="percent">0</span>
+            <i class="iconfont icon-arrowup"></i><span id="percent">0</span>
         </a>
     </div>
 
-    <div id="toggle-menu">
+    <!--<div id="toggle-menu">-->
-        <a class="site-page">
+    <!--    <a class="site-page">-->
-            <i class="fas fa-bars fa-fw"></i>
+    <!--        <i class="fas fa-bars fa-fw"></i>-->
-        </a>
+    <!--    </a>-->
-    </div>
+    <!--</div>-->
 </div>
 
 

templates/modules/widgets/top-group.html

@@ -5,7 +5,7 @@
 <div class="topGroup" th:fragment="top-group" th:with="posts = ${postFinder.list(1,6)}">
     <div class="recent-post-item" th:each="post : ${posts}">
         <div class="post_cover">
-            <a th:href="${post.status.permalink}" th:title="${post.spec.title}">
+            <a th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
                 <span class="recent-post-top-text">荐</span>
                 <img class="post_bg" loading="lazy"
                      th:alt="${post.spec.title}"
@@ -14,7 +14,7 @@
         </div>
         <div class="recent-post-info">
             <a class="article-title"
-               th:href="${post.status.permalink}"
+               th:href="@{${post.status.permalink}}"
                th:text="${post.spec.title}"
                th:title="${post.spec.title}">
             </a>

templates/page.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
+<html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page')" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:fragment="content">
 
@@ -13,6 +13,10 @@
             <div id="page">
                 <div id="article-container line-numbers" th:utext="${singlePage.content.content}"></div>
             </div>
+
+            <!-- 侧栏 -->
+            <div th:replace="modules/aside :: aside(${theme.config.sidebar.page_widgets})"></div>
+
         </main>
         <!-- 底部 -->
         <footer th:replace="modules/footer :: footer"></footer>

templates/post.html

@@ -1,13 +1,15 @@
 <!DOCTYPE html>
-<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
+<html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'post')"
+      xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:fragment="content">
     <div class="post" id="body-wrap">
 
-        <header class="post-bg" id="page-header" th:style="'background-image:url(' + (${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}) + ')'">
+        <header class="post-bg" id="page-header"
+                th:style="'background-image:url(' + (${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}) + ')'">
             <nav th:replace="modules/nav :: nav"></nav>
             <div class="coverdiv" id="coverdiv">
-                <img alt="cover" id="post-cover" loading="lazy"
+                <img crossorigin="anonymous" id="post-cover"
                      th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
             </div>
 
@@ -20,7 +22,7 @@
                               th:each="category : ${post.categories}"
                               th:if="${not #lists.isEmpty(post.categories)}">
                             <a class="post-meta-categories"
-                               th:href="${category.status.permalink}"
+                               th:href="@{${category.status.permalink}}"
                                th:text="${category.spec.displayName}"
                                th:title="${category.spec.displayName}">
                             </a>
@@ -29,7 +31,7 @@
                             <div class="post-meta__tag-list">
                                 <a class="post-meta__tags"
                                    th:each="tag : ${post.tags}"
-                                   th:href="${tag.status.permalink}"
+                                   th:href="@{${tag.status.permalink}}"
                                    th:text="'#'+${tag.spec.displayName}"
                                    th:title="${tag.spec.displayName}"></a>
                             </div>
@@ -42,14 +44,14 @@
 
                         <span class="post-meta-wordcount"
                               th:with="wordCount = ${#strings.length(post.content.content)}">
-                            <i class="fas fa-file-word fa-fw post-meta-icon" title="字数"></i>
+                            <i class="iconfont icon-file-word post-meta-icon" title="字数"></i>
                             <span class="post-meta-label">字数:</span>
                             <span class="word-count" th:text="${{wordCount}}"></span>
                             <span class="post-meta-separator"></span>
-                            <i class="fas fa-clock post-meta-icon" title="阅读耗时"></i>
+                            <i class="iconfont icon-clock post-meta-icon" title="阅读耗时"></i>
                             <span class="post-meta-label">阅读耗时:</span><span>[[${wordCount / 400}]] 分钟</span>
                         </span>
-                        <span class="post-meta-date"><i class="fa-fw post-meta-icon fas fa-calendar"></i>
+                        <span class="post-meta-date"><i class="iconfont icon-calendar-alt post-meta-icon"></i>
                             <time th:attr="datetime=${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm:ss')}"
                                   th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}"
                                   th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}">
@@ -60,7 +62,7 @@
                         <!--<span class="post-meta-position" title="作者IP属地为北京"><i-->
                         <!--        class="fas fa-location-dot post-meta-icon"></i>北京</span>-->
                         <span class="post-meta-pv" data-flag-title="热度">
-                            <i class="fab fa-hotjar fa-fw post-meta-icon"></i>
+                            <i class="iconfont icon-hotjar post-meta-icon"></i>
                             <span class="post-meta-label">热度:</span>
                             <span id="visit" th:text="${post.stats.visit}"></span>
                         </span>
@@ -118,7 +120,8 @@
                         <!-- 分享 -->
                         <div class="share-link mobile">
                             <div class="share-qrcode">
-                                <div class="share-button" title="使用手机访问这篇文章"><i class="fas fa-qrcode"></i>
+                                <div class="share-button" title="使用手机访问这篇文章"><i
+                                        class="iconfont icon-qrcode"></i>
                                 </div>
                                 <div class="share-main">
                                     <div class="share-main-all">
@@ -134,17 +137,17 @@
                                target="_blank"
                                th:href="'https://service.weibo.com/share/share.php?title=' + ${post.spec.title}"
                                title="分享到微博">
-                                <i class="fab fa-weibo" style="font-size:22px"></i></a></div>
+                                <i class="iconfont icon-weibo" style="font-size:22px"></i></a></div>
                         <div class="share-link copyurl">
                             <div class="share-button" id="post-share-url" onclick="rm.copyPageUrl()" title="复制链接"><i
-                                    class="fas fa-link"></i></div>
+                                    class="iconfont icon-link"></i></div>
                         </div>
                     </div>
                     <div class="post-tools-right">
                         <div class="tag_share">
                             <div class="post-meta__tag-list">
                                 <a class="post-meta__tags" th:each="tag : ${post.tags}"
-                                   th:href="${tag.status.permalink}">
+                                   th:href="@{${tag.status.permalink}}">
                                     <span class="tags-punctuation">#</span>
                                     <th:block th:text="${tag.spec.displayName}"
                                               th:title="${tag.spec.displayName}"></th:block>
@@ -156,51 +159,48 @@
                 </div>
 
                 <!-- 版权声明 -->
-                <div class="post-copyright">
+                <div class="post-copyright" th:if="${theme.config.post.copyright}">
                     <div class="post-copyright__author">
                         <!-- 版权页 以及版权描述文字 -->
-                        <a class="post-copyright__original" th:href="@{/cc}"
+                        <a class="post-copyright__original" th:href="@{${theme.config.post.copyrightAgreement}}" title="该文章为原创文章，注意版权协议">原创</a>
-                           title="该文章为原创文章，注意版权协议">原创</a>
                         <a class="post-copyright-title" href="#"><span th:text="${post.spec.title}"></span></a>
                     </div>
                     <div class="post-copyright__type">
                         <span class="post-copyright-info" id="post-copyright-url">
-                    <a href="javascript:window.location.href;">
+                            <a href="javascript:window.location.href;">[[${post.spec.title}]]</a>
-                        text
-                    </a>
                         </span>
                         <button class="post-copyright-copybtn" onclick="rm.copyPageUrl()">
-                            <i class="fas fa-paste copy-btn"></i>
+                            <i class="iconfont icon-paste"></i>
                         </button>
                     </div>
                     <div class="post-copyright__notice">
-                    <span class="post-copyright-info">
+                        <span class="post-copyright-info" th:utext="${theme.config.post.copyrightInfo}"></span>
-                        本文是原创文章，采用 <a target="_blank" th:href="@{/cc}">CC BY-NC-ND 4.0</a> 协议，完整转载请注明来自 <a
-                            href="/" target="_blank" th:text="${site.title}"></a>
-                    </span>
                     </div>
                 </div>
-
+                <nav class="pagination-post" id="pagination"
-                <nav class="pagination-post" id="pagination">
+                     th:with="postCursor = ${postFinder.cursor(post.metadata.name)}">
-                    <div class="prev-post pull-left">
+                    <div class="prev-post pull-left" th:if="${postCursor.hasPrevious()}">
-                        <a href="#">
+                        <a th:href="@{${postCursor.previous.status.permalink}}">
                             <div class="pagination-info">
                                 <div class="label">上一篇</div>
-                                <div class="prev_info">上一篇文章的标题</div>
+                                <div class="prev_info" th:text="${postCursor.previous.spec.title}"></div>
                             </div>
                         </a>
                     </div>
-                    <div class="next-post pull-right">
+                    <div class="next-post pull-right" th:if="${postCursor.hasNext()}">
-                        <a href="#">
+                        <a th:href="@{${postCursor.next.status.permalink}}">
                             <div class="pagination-info">
                                 <div class="label">下一篇</div>
-                                <div class="next_info">下一篇文章的标题</div>
+                                <div class="next_info" th:text="${postCursor.next.spec.title}"></div>
                             </div>
                         </a>
                     </div>
                 </nav>
                 <div class="relatedPosts">
-                    <div class="headline"><i class="fas fa-robot fa-fw"></i> <span>阅读建议</span></div>
+                    <div class="headline">
+                        <i class="iconfont icon-robot"></i>
+                        <span>阅读建议</span>
+                    </div>
                     <div class="relatedPosts-list">
                         <!-- 建议阅读，这里可以自定义文章数量，然后遍历展示 -->
                         <div>
@@ -219,7 +219,7 @@
                 <!-- 评论模块，使用评论插件 -->
                 <div id="post-comment">
                     <div class="comment-head">
-                        <div class="comment-headline"><i class="fas fa-message fa-fw"></i> <span>评论</span></div>
+                        <div class="comment-headline"><i class="iconfont icon-comment-alt"></i> <span>评论</span></div>
                         <div class="comment-privacy"><a href="#">隐私政策</a></div>
                         <div class="comment-tips" id="comment-tips">
                             <span>你无需删除空行，直接评论以获取最佳展示效果</span>
@@ -230,7 +230,7 @@
             </div>
 
             <!-- 侧栏 -->
-            <div th:replace="modules/aside :: aside('profile,toc,recent-posts,tags-stat')"></div>
+            <div th:replace="modules/aside :: aside(${theme.config.sidebar.post_widgets})"></div>
         </main>
 
         <!-- 底部 -->

templates/tag.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
+<html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'tag')" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:fragment="content">
 
@@ -12,7 +12,7 @@
                 <div id="tag-page-tags" th:with="tags = ${tagFinder.listAll()}">
                     <a style="font-size:1em;color:#3c228c"
                        th:each="tag : ${tags}"
-                       th:href="${tag.status.permalink}"
+                       th:href="@{${tag.status.permalink}}"
                        th:id="${tag.spec.displayName}">
                         <span class="tags-punctuation">#</span> [[${tag.spec.displayName}]]
                         <span class="tagsPageCount" th:text="${tag.status.postCount}"></span>
@@ -22,7 +22,7 @@
                 <div class="article-sort" th:with="postItems=${posts.items}">
                     <!--<div class="article-sort-item year">2022</div>-->
                     <div class="article-sort-item" th:each="post : ${postItems}">
-                        <a class="article-sort-item-img" th:href="${post.status.permalink}"
+                        <a class="article-sort-item-img" th:href="@{${post.status.permalink}}"
                            th:title="${post.spec.title}">
                             <img loading="lazy" th:alt="${post.status.excerpt}" th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
                         </a>
@@ -33,12 +33,12 @@
                                 </time>
                             </div>
                             <a class="article-sort-item-title" onclick="window.event.cancelBubble=!0"
-                               th:href="${post.status.permalink}"
+                               th:href="@{${post.status.permalink}}"
                                th:text="${post.spec.title}" th:title="${post.spec.title}">
                             </a>
                             <div class="article-sort-item-tags">
                                 <a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0"
-                                   th:each="tag : ${post.tags}" th:href="${tag.status.permalink}">
+                                   th:each="tag : ${post.tags}" th:href="@{${tag.status.permalink}}">
                                     <span class="tags-punctuation">#[[${tag.spec.displayName}]]</span>
                                 </a>
                                 <span class="article-meta__link">•</span>
@@ -50,7 +50,7 @@
                     <div class="pagination"><span class="page-number current">1</span></div>
                 </nav>
             </div>
-            <div th:replace="modules/aside :: aside('profile,recent-posts,tags-stat')"></div>
+            <div th:replace="modules/aside :: aside(${theme.config.sidebar.tag_widgets})"></div>
         </main>
 
         <!-- 底部 -->