调整 js 放到本地，调整首页 icon 展示

http/http-client.env.json

@@ -1,6 +0,0 @@
-{
-  "dev": {
-    "cookie": "mozi-assist={\"show\":false,\"audio\":false,\"speed\":\"middle\",\"zomm\":1,\"cursor\":false,\"pointer\":false,\"bigtext\":false,\"overead\":false}; SESSION=dc56cf1a-7f74-4148-af2f-d8bde7dec653; XSRF-TOKEN=acab263c-7605-4765-873e-d0810c6d6973s",
-    "token": "acab263c-7605-4765-873e-d0810c6d6973s"
-  }
-}

http/settings.http

@@ -1,188 +0,0 @@
-### cookie 修改 http-client.env.json 配置文件中的即可
-### 删除 settings 配置， Cookit 可以从 Console 后台 F12 获取
-DELETE http://localhost:8090/api/v1alpha1/settings/theme-hao-setting
-Content-Type: application/json
-Sec-Fetch-Mode: cors
-X-XSRF-TOKEN: {{token}}
-Cookie: {{cookie}}
-
-
-### 设置 settings 的配置，将 settings 的配置文件先使用 yaml 转 json 转换后放在下面即可
-
-POST http://localhost:8090/api/v1alpha1/settings
-Content-Type: application/json
-Sec-Fetch-Mode: cors
-Cookie: {{cookie}}
-X-XSRF-TOKEN: {{token}}
-
-{
-  "apiVersion": "v1alpha1",
-  "kind": "Setting",
-  "metadata": {
-    "name": "theme-hao-setting"
-  },
-  "spec": {
-    "forms": [
-      {
-        "group": "nav",
-        "label": "导航栏",
-        "formSchema": [
-          {
-            "$formkit": "text",
-            "name": "left_menu",
-            "label": "导航栏左侧相关链接",
-            "placeholder": "请填写 metadata name",
-            "help": "需要通过开发者模式获取菜单对应的 metadata name"
-          },
-          {
-            "$formkit": "text",
-            "name": "site_title",
-            "label": "标题",
-            "placeholder": "请输入标题",
-            "help": "支持 HTML 语法，比如 <span id=\"site-name-icon\">Hao</span>，默认为站点名称"
-          }
-        ]
-      },
-      {
-        "group": "layout",
-        "label": "布局",
-        "formSchema": [
-          {
-            "$formkit": "select",
-            "name": "post_list_layout",
-            "label": "文章列表布局",
-            "value": "grid_3",
-            "options": [
-              {
-                "label": "网格（一行三列）",
-                "value": "grid_3"
-              },
-              {
-                "label": "网格（一行两列）",
-                "value": "grid_2"
-              },
-              {
-                "label": "单条",
-                "value": "single"
-              }
-            ],
-            "help": "选择单条时，文章卡片的图片将位于左侧"
-          },
-          {
-            "$formkit": "select",
-            "name": "header_widget",
-            "label": "首页顶部模块",
-            "value": "none",
-            "options": [
-              {
-                "label": "无",
-                "value": "none"
-              },
-              {
-                "label": "最新一篇文章",
-                "value": "latest_post"
-              },
-              {
-                "label": "文章网格（最新五篇文章）",
-                "value": "latest_post_grid"
-              },
-              {
-                "label": "轮播图",
-                "value": "carousel"
-              },
-              {
-                "label": "站点标题",
-                "value": "site_title"
-              }
-            ]
-          },
-          {
-            "$formkit": "select",
-            "name": "header_background_type",
-            "label": "首页顶部背景",
-            "value": "manual",
-            "options": [
-              {
-                "label": "手动设置",
-                "value": "manual"
-              },
-              {
-                "label": "图片",
-                "value": "image"
-              }
-            ]
-          },
-          {
-            "$formkit": "text",
-            "name": "header_background",
-            "label": "首页顶部背景"
-          },
-          {
-            "$formkit": "text",
-            "name": "header_background_image",
-            "label": "首页顶部背景图片"
-          },
-          {
-            "$formkit": "radio",
-            "name": "content_header",
-            "label": "文章页顶部",
-            "value": true,
-            "options": [
-              {
-                "label": "显示",
-                "value": true
-              },
-              {
-                "label": "隐藏",
-                "value": false
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "group": "sidebar",
-        "label": "侧边栏",
-        "formSchema": [
-          {
-            "$formkit": "textarea",
-            "name": "widgets",
-            "label": "小部件",
-            "value": "profile,popular-posts,latest-comments,categories,tags",
-            "help": "目前提供的小部件有：profile（站点资料）, popular-posts（热门文章）, latest-comments（最新评论）, categories（文章分类）, tags（文章标签）。你可以随意组合或排序，以逗号隔开。"
-          },
-          {
-            "$formkit": "text",
-            "name": "profile_name",
-            "label": "个人卡片名称",
-            "placeholder": "请填写个人卡片名称",
-            "help": "不填写默认为站点则名称"
-          },
-          {
-            "$formkit": "textarea",
-            "name": "profile_desc",
-            "placeholder": "请填写个人卡片描述信息",
-            "help": "支持使用 HTML 标签"
-          }
-        ]
-      },
-      {
-        "group": "footer",
-        "label": "菜单映射",
-        "formSchema": [
-          {
-            "$formkit": "text",
-            "name": "menu",
-            "label": "底部相关链接",
-            "placeholder": "请填写 metadata name",
-            "help": "需要通过开发者模式获取菜单对应的 metadata name"
-          }
-        ]
-      }
-    ]
-  }
-}
-
-
-
-###

http/theme.http

@@ -1,35 +0,0 @@
-### cookie 修改 http-client.env.json 配置文件中的即可
-### 删除 theme 配置， Cookit 可以从 Console 后台 F12 获取，删除后，在后台将看不到主题
-DELETE http://localhost:8090/apis/theme.halo.run/v1alpha1/themes/theme-hao-setting
-Content-Type: application/json
-Cookie: {{cookie}}
-
-
-### 设置主题, body 即为 theme.yaml 的内容转 json，以下是theme-hao主题示例
-
-POST http://localhost:8090/apis/theme.halo.run/v1alpha1/themes
-Content-Type: application/json
-Cookie: {{cookie}}
-
-{
-  "apiVersion": "theme.halo.run/v1alpha1",
-  "kind": "Theme",
-  "metadata": {
-    "name": "theme-hao"
-  },
-  "spec": {
-    "displayName": "Hao",
-    "author": {
-      "name": "程序员小航",
-      "website": "https://liuzhihang.com"
-    },
-    "description": "Halo 2.0 Theme base on Thymeleaf, Referring to Butterfly and Heo",
-    "logo": "https://liuzhihang.com/logo",
-    "website": "https://liuzhihang.com",
-    "repo": "https://github.com/liuzhihang/halo-theme-hao",
-    "settingName": "theme-hao-setting",
-    "configMapName": "theme-hao-configMap",
-    "version": "1.0.0",
-    "require": "2.0.0"
-  }
-}

images/630efca2abb02.png:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=https://img.zhheo.com/i/2022/08/31/630efca2abb02.png

settings.yaml

@@ -57,6 +57,21 @@ spec:
           label: Banners 小标题
           placeholder: 请输入小标题
           help: 支持 HTML 语法
+        - $formkit: url
+          name: bikan
+          label: 必看精选
+          placeholder: 请输入地址
+          validation: "url"
+        - $formkit: url
+          name: remen
+          label: 必看精选
+          placeholder: 请输入地址
+          validation: "url"
+        - $formkit: url
+          name: shiyong
+          label: 必看精选
+          placeholder: 请输入地址
+          validation: "url"
     - group: layout
       label: 布局
       formSchema:

templates/assets/waterfall/waterfall.min.js

@@ -0,0 +1 @@
+!function(a,b){"function"==typeof define&&define.amd?define("waterfall",function(){return b}):"object"==typeof module&&module.exports?module.exports=b:a.waterfall=b}(this,function(a){function b(a){return window.getComputedStyle(a)}function c(a,c){return parseFloat(b(c)["margin"+a])||0}function d(a){return parseFloat(a)+"px"}function e(a){return parseFloat(a.style.top)}function f(a){return parseFloat(a.style.left)}function g(a){return parseFloat(b(a).width)}function h(a){return parseFloat(b(a).height)}function i(a){return e(a)+h(a)+c("Bottom",a)}function j(a){return f(a)+g(a)+c("Right",a)}function k(a){a=a.sort(function(a,b){var c=i(b)-i(a);return c||f(b)-f(a)})}function l(a){var b=a;k(b),this.add=function(a){b.push(a),k(b),b.pop()},this.min=function(){return b[b.length-1]},this.max=function(){return b[0]}}function m(a,b,c){a.style.position="absolute",a.style.top=d(b),a.style.left=d(c)}function n(a){m(a,0,c("Left",a))}function o(a,b){m(b,a.style.top,j(a)+c("Left",b))}function p(a,b){m(b,i(a)+c("Top",b),f(a))}function q(a,b){a.style.position="relative",a.style.height=d(i(b)+c("Bottom",b))}function r(b,c){return j(b[c-1])+g(b[c])<=g(a)}"string"==typeof a&&(a=document.querySelector(a));var s=a.children;s.length&&n(s[0]);for(var t=1;t<s.length&&r(s,t);t++)o(s[t-1],s[t]);for(var u=[].slice.call(s,0,t),v=new l(u);t<s.length;t++)p(v.min(),s[t]),v.add(s[t]);q(a,v.max())});

templates/assets/zhheo/zhheoblog.css

@@ -6892,13 +6892,14 @@ span.fund_name {
     transform: rotateY(180deg)
 }
 
+/* 公众号推广 图片忽略 */
 .face {
     position: absolute;
     width: 100%;
     height: 100%;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    background: url(../../../images/630efc6e3e794.png) center center no-repeat;
+    /*background: url() center center no-repeat;*/
     background-size: 100%
 }
 
@@ -6907,7 +6908,7 @@ span.fund_name {
     -webkit-transform: rotateY(180deg);
     transform: rotateY(180deg);
     box-sizing: border-box;
-    background: url(../../../images/630efca2abb02.png) center center no-repeat;
+    /*background: url() center center no-repeat;*/
     background-size: 100%
 }
 

templates/modules/head.html

@@ -12,7 +12,7 @@
 
     <link rel="stylesheet" th:href="@{/assets/zhheo/zhheoblog.css}">
     <!-- fontawesome-pro https://github.com/duyplus/fontawesome-pro -->
-    <link href="https://cdn.jsdelivr.net/gh/duyplus/fontawesome-pro/css/all.min.css"
+    <link th:href="@{/assets/fontawesome-pro/v6.2.0/css/all.min.css}"
           media="print"
           onload='this.media="all"'
           rel="stylesheet"
@@ -182,8 +182,8 @@
             th:if="${theme.config.other.load_progress_bar}">
     </script>
 
-    <!-- 复制 -->
-    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
+    <!-- 复制 https://github.com/zenorocha/clipboard.js -->
+    <script th:src="@{/assets/clipboard/clipboard.min.js}"></script>
 
     <!-- 补充部分 -->
     <th:block th:if="${metas != null}">

templates/modules/layouts/layout.html

@@ -47,7 +47,7 @@
 
     <!-- https://www.andreaverlicchi.eu/vanilla-lazyload/ 懒加载-->
     <!-- todo 图片懒加载，并且可自定义懒加载图片 -->
-    <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
+    <script th:src="@{/assets/lazyload/lazyload.min.js}"></script>
 
     <!-- 右下角通知 https://www.polonel.com/snackbar/ -->
     <!-- todo head 中有它的 css，应该可以写一块，并改成后台可配置的功能，代码中应该还有他的 js -->
@@ -61,24 +61,16 @@
     <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
 
     <!-- todo -->
-    <script data-pjax=""
-            src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
+    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
 
     <!-- todo 不知道是否可以抽到 right-menu.html 中，做到后台可配置 -->
     <script th:src="@{/assets/zhheo/rightmenu.js}"></script>
 
     <!--  https://raphamorim.io/waterfall.js/  应该是这个 还有相关的 js 代码 是否可以调整-->
-    <script src="https://cdn.zhheo.com/public/waterfall/waterfall.min.js"></script>
+    <script th:src="@{/assets/waterfall/waterfall.min.js}"></script>
 
-    <!-- 无障碍功能 https://github.com/duheng/assist 无用就可以删除了 -->
-
-    <script src="https://cdn.zhheo.com/public/assist/assist-entry.min.js"></script>
-
-    <!-- 音乐播放器，应该还有相关 js 可以一并移除，或者抽出公共模块，最好是使用 halo2.0 插件 -->
-    <script src="https://cdn.zhheo.com/public/aplayer/Meting2.min.js"></script>
-
-    <!-- 不知道对要不要 -->
-    <script src="https://cdn.zhheo.com/public/pjax/pjax.min.js"></script>
+    <!-- https://github.com/MoOx/pjax -->
+    <script th:src="@{/assets/pjax/pjax.min.js}"></script>
 
     <!-- 不知道干啥的 -->
     <script>let pjaxSelectors = [
@@ -151,10 +143,14 @@
 </div>
 <!-- 不知道干啥的 -->
 <div class="js-pjax">
-    <script>
+    <script th:inline="javascript">
         coverColor();
-        // 移除加载动画
-        removeLoading();
+
+        if ([[${theme.config.other.loading_box} and not ${#strings.isEmpty(theme.config.other.loading_box_img)}]]) {
+            // 移除加载动画
+            removeLoading();
+        }
+
         addRightMenuClickEvent();
         navTitle();
         heo.topPostScroll();

templates/modules/widgets/banner-group.html

@@ -12,195 +12,150 @@
                  th:if="${not #strings.isEmpty(theme.config.top.banners_title_small)}"
                  th:utext="${theme.config.top.banners_title_small}"></div>
         </div>
+
+        <!--  改成后台动态可配置-->
         <div class="tags-group-all">
             <div class="tags-group-wrapper">
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#989bf8">
-                        <img 
-                             src="../../../images/6302f0748a83b.png"
-                             title="AfterEffect">
+                        <img th:src="@{/assets/images/icons/AfterEffect.png}" title="AfterEffect">
                     </div>
-                    <div class="tags-group-icon" style="background:#fff"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/63030a85d6458.png"
-                            title="Sketch">
+                    <div class="tags-group-icon" style="background:#fff">
+                        <img th:src="@{/assets/images/icons/Sketch.png}" title="Sketch">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#57b6e6"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/6303102c049d1.png"
-                            title="Docker">
+                    <div class="tags-group-icon" style="background:#57b6e6">
+                        <img th:src="@{/assets/images/icons/Docker.png}" title="Docker">
                     </div>
-                    <div class="tags-group-icon" style="background:#4082c3"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/63030fe730a69.png"
-                            title="Photoshop">
+                    <div class="tags-group-icon" style="background:#4082c3">
+                        <img th:src="@{/assets/images/icons/Photoshop.png}" title="Photoshop">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#fff"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630310dea00f5.png"
-                            title="FinalCutPro">
+                    <div class="tags-group-icon" style="background:#fff">
+                        <img th:src="@{/assets/images/icons/FinalCutPro.png}" title="FinalCutPro">
                     </div>
-                    <div class="tags-group-icon" style="background:#fff"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/63031127e8e2b.png"
-                            title="Python">
+                    <div class="tags-group-icon" style="background:#fff">
+                        <img th:src="@{/assets/images/icons/Python.png}" title="Python">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#eb6840"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630311760ca04.png"
-                            title="Swift">
+                    <div class="tags-group-icon" style="background:#eb6840">
+                        <img th:src="@{/assets/images/icons/Swift.png}" title="Swift">
                     </div>
-                    <div class="tags-group-icon" style="background:#8f55ba"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630311cf9dded.png"
-                            title="Principle">
+                    <div class="tags-group-icon" style="background:#8f55ba">
+                        <img th:src="@{/assets/images/icons/Principle.png}" title="Principle">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#f29e39"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/6303121db0410.png"
-                            title="illustrator">
+                    <div class="tags-group-icon" style="background:#f29e39">
+                        <img th:src="@{/assets/images/icons/illustrator.png}" title="illustrator">
                     </div>
-                    <div class="tags-group-icon" style="background:#2c51db"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630312c06cdc5.png"
-                            title="CSS3">
+                    <div class="tags-group-icon" style="background:#2c51db">
+                        <img th:src="@{/assets/images/icons/CSS3.png}" title="CSS3">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#f7cb4f"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630312f898a1c.png"
-                            title="JS">
+                    <div class="tags-group-icon" style="background:#f7cb4f">
+                        <img th:src="@{/assets/images/icons/JS.png}" title="JS">
                     </div>
-                    <div class="tags-group-icon" style="background:#e9572b"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/6303132113bbb.png"
-                            title="HTML">
+                    <div class="tags-group-icon" style="background:#e9572b">
+                        <img th:src="@{/assets/images/icons/HTML.png}" title="HTML">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#df5b40"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/632d2d33b1e1b.webp"
-                            title="Git">
+                    <div class="tags-group-icon" style="background:#df5b40">
+                        <img th:src="@{/assets/images/icons/Git.webp}" title="Git">
                     </div>
-                    <div class="tags-group-icon" style="background:#e65164"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/632d2e083fc9b.webp"
-                            title="Apifox">
+                    <div class="tags-group-icon" style="background:#e65164">
+                        <img th:src="@{/assets/images/icons/Apifox.webp}" title="Apifox">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#989bf8"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/6302f0748a83b.png"
-                            title="AfterEffect">
+                    <div class="tags-group-icon" style="background:#989bf8">
+                        <img th:src="@{/assets/images/icons/AfterEffect.png}" title="AfterEffect">
                     </div>
-                    <div class="tags-group-icon" style="background:#fff"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/63030a85d6458.png"
-                            title="Sketch">
+                    <div class="tags-group-icon" style="background:#fff">
+                        <img th:src="@{/assets/images/icons/Sketch.png}" title="Sketch">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#57b6e6"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/6303102c049d1.png"
-                            title="Docker">
+                    <div class="tags-group-icon" style="background:#57b6e6">
+                        <img th:src="@{/assets/images/icons/Docker.png}" title="Docker">
                     </div>
-                    <div class="tags-group-icon" style="background:#4082c3"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/63030fe730a69.png"
-                            title="Photoshop">
+                    <div class="tags-group-icon" style="background:#4082c3">
+                        <img th:src="@{/assets/images/icons/Photoshop.png}" title="Photoshop">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#fff"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630310dea00f5.png"
-                            title="FinalCutPro">
+                    <div class="tags-group-icon" style="background:#fff">
+                        <img th:src="@{/assets/images/icons/FinalCutPro.png}" title="FinalCutPro">
                     </div>
-                    <div class="tags-group-icon" style="background:#fff"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/63031127e8e2b.png"
-                            title="Python">
+                    <div class="tags-group-icon" style="background:#fff">
+                        <img th:src="@{/assets/images/icons/Python.png}" title="Python">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#eb6840"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630311760ca04.png"
-                            title="Swift">
+                    <div class="tags-group-icon" style="background:#eb6840">
+                        <img th:src="@{/assets/images/icons/Swift.png}" title="Swift">
                     </div>
-                    <div class="tags-group-icon" style="background:#8f55ba"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630311cf9dded.png"
-                            title="Principle">
+                    <div class="tags-group-icon" style="background:#8f55ba">
+                        <img th:src="@{/assets/images/icons/Principle.png}" title="Principle">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#f29e39"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/6303121db0410.png"
-                            title="illustrator">
+                    <div class="tags-group-icon" style="background:#f29e39">
+                        <img th:src="@{/assets/images/icons/illustrator.png}" title="illustrator">
                     </div>
-                    <div class="tags-group-icon" style="background:#2c51db"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630312c06cdc5.png"
-                            title="CSS3">
+                    <div class="tags-group-icon" style="background:#2c51db">
+                        <img th:src="@{/assets/images/icons/CSS3.png}" title="CSS3">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#f7cb4f"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/630312f898a1c.png"
-                            title="JS">
+                    <div class="tags-group-icon" style="background:#f7cb4f">
+                        <img th:src="@{/assets/images/icons/JS.png}" title="JS">
                     </div>
-                    <div class="tags-group-icon" style="background:#e9572b"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/6303132113bbb.png"
-                            title="HTML">
+                    <div class="tags-group-icon" style="background:#e9572b">
+                        <img th:src="@{/assets/images/icons/HTML.png}" title="HTML">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
-                    <div class="tags-group-icon" style="background:#df5b40"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/632d2d33b1e1b.webp"
-                            title="Git">
+                    <div class="tags-group-icon" style="background:#df5b40">
+                        <img th:src="@{/assets/images/icons/Git.webp}" title="Git">
                     </div>
-                    <div class="tags-group-icon" style="background:#e65164"><img
-                            onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
-                            src="../../../images/632d2e083fc9b.webp"
-                            title="Apifox">
+                    <div class="tags-group-icon" style="background:#e65164">
+                        <img th:src="@{/assets/images/icons/Apifox.webp}" title="Apifox">
                     </div>
                 </div>
             </div>
         </div>
         <!-- 随机前往一篇文章 -->
-        <a id="banner-hover" onclick="randomPost()"><span class="bannerText">随便逛逛</span><i
-                class="fas fa-arrow-right banner-righticon"></i></a></div>
+        <a id="banner-hover" onclick="randomPost()">
+            <span class="bannerText">随便逛逛</span>
+            <i class="fas fa-arrow-right banner-righticon"></i>
+        </a>
+    </div>
 
     <!-- category -->
     <div class="categoryGroup">
         <div class="categoryItem" style="box-shadow:var(--heo-shadow-blue)">
-            <a class="categoryButton CB1 bikan" href="tags/%E5%BF%85%E7%9C%8B/index.html">
-                <span class="categoryButtonText">必看精选</span><i class="fas fa-dove"></i></a>
+            <a class="categoryButton CB1 bikan"
+               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>
+            </a>
         </div>
         <div class="categoryItem" style="box-shadow:var(--heo-shadow-red)">
-            <a class="categoryButton remen" href="tags/%E7%83%AD%E9%97%A8/index.html">
-                <span class="categoryButtonText">热门文章</span><i class="fas fa-burn"></i></a>
+            <a class="categoryButton remen"
+               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>
+            </a>
         </div>
         <div class="categoryItem" style="box-shadow:var(--heo-shadow-green)">
-            <a class="categoryButton shiyong" href="tags/%E6%95%99%E7%A8%8B/index.html">
-                <span class="categoryButtonText">实用教程</span><i class="fas fa-book"></i></a>
+            <a class="categoryButton shiyong"
+               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>
+            </a>
         </div>
     </div>