From ec78a223d01deb2e6e84e56bc28aa6ea12f0515c Mon Sep 17 00:00:00 2001
From: liuzhihang <liuzhihangs@qq.com>
Date: Tue, 11 Oct 2022 09:28:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20tags=20=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=20header=20=E4=BB=8E=E9=85=8D=E7=BD=AE=E4=B8=AD=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 HELP.md                                   |  2 +-
 http/http-client.env.json                 |  2 +-
 http/settings.http                        | 21 +++++-
 settings.yaml                             | 15 +++-
 templates/modules/aside.html              | 40 ++---------
 templates/modules/footer.html             | 85 +++++++++++++----------
 templates/modules/header.html             | 51 ++++++++------
 templates/modules/layouts/layout.html     |  2 +-
 templates/modules/widgets/statistics.html | 27 ++++++-
 templates/modules/widgets/tags.html       | 17 ++++-
 10 files changed, 162 insertions(+), 100 deletions(-)

diff --git a/HELP.md b/HELP.md
index 6e0e0c1d..a64e83e0 100644
--- a/HELP.md
+++ b/HELP.md
@@ -46,7 +46,7 @@ halo 的主题路径：
 
 ![img_1.png](images/mac.png)
 
-![img.png](images/windows.png)s
+![img.png](images/windows.png)
 
 可以通过 IDEA 或者 vscode 直接打开主题文件夹，进行操作开发，这里会实时生效。
 
diff --git a/http/http-client.env.json b/http/http-client.env.json
index e8b9bbe9..60960bb7 100644
--- a/http/http-client.env.json
+++ b/http/http-client.env.json
@@ -1,5 +1,5 @@
 {
   "dev": {
-    "cookie": "Idea-b3bcefb1=28a94d07-f033-473f-aaff-bce5a96ae38b; Hm_lvt_828db1fd637f3717a876af84bf0678bd=1664877624,1664884710; mozi-assist={\"show\":false,\"audio\":false,\"speed\":\"middle\",\"zomm\":1,\"cursor\":false,\"pointer\":false,\"bigtext\":false,\"overead\":false}; Hm_lpvt_828db1fd637f3717a876af84bf0678bd=1665275924; XSRF-TOKEN=73e4ac5d-1176-4b86-aeb8-65ac5ac5155b; SESSION=81c19961-bd6b-44f3-ad30-a9a3da699d07"
+    "cookie": "Idea-b3bcefb1=28a94d07-f033-473f-aaff-bce5a96ae38b; Hm_lvt_828db1fd637f3717a876af84bf0678bd=1664877624,1664884710; mozi-assist={\"show\":false,\"audio\":false,\"speed\":\"middle\",\"zomm\":1,\"cursor\":false,\"pointer\":false,\"bigtext\":false,\"overead\":false}; Hm_lpvt_828db1fd637f3717a876af84bf0678bd=1665275924; XSRF-TOKEN=b761100c-0fd3-4851-9499-ef79b2b881a5; SESSION=4f6dc3c4-67e6-4e47-bd5a-6bb631ec7efc"
   }
 }
\ No newline at end of file
diff --git a/http/settings.http b/http/settings.http
index 206bd0bb..86e67838 100644
--- a/http/settings.http
+++ b/http/settings.http
@@ -137,11 +137,30 @@ Cookie: {{cookie}}
           {
             "$formkit": "textarea",
             "name": "profile_desc",
-            "label": "个人卡片描述信息",
             "placeholder": "请填写个人卡片描述信息",
             "help": "支持使用 HTML 标签"
           }
         ]
+      },
+      {
+        "group": "menu",
+        "label": "菜单映射",
+        "formSchema": [
+          {
+            "$formkit": "text",
+            "name": "header_left_menu",
+            "label": "菜单栏左侧相关链接",
+            "placeholder": "请填写 metadata name",
+            "help": "需要通过开发者模式获取菜单对应的 metadata name"
+          },
+          {
+            "$formkit": "text",
+            "name": "footer_menu",
+            "label": "底部相关链接",
+            "placeholder": "请填写 metadata name",
+            "help": "需要通过开发者模式获取菜单对应的 metadata name"
+          }
+        ]
       }
     ]
   }
diff --git a/settings.yaml b/settings.yaml
index f2308ea8..3bb3480d 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -74,4 +74,17 @@ spec:
         - $formkit: textarea
           name: profile_desc
           placeholder: 请填写个人卡片描述信息
-          help: "支持使用 HTML 标签"
\ No newline at end of file
+          help: "支持使用 HTML 标签"
+    - group: menu
+      label: 菜单映射
+      formSchema:
+        - $formkit: text
+          name: header_left_menu
+          label: 菜单栏左侧相关链接
+          placeholder: 请填写 metadata name
+          help: "需要通过开发者模式获取菜单对应的 metadata name"
+        - $formkit: text
+          name: footer_menu
+          label: 底部相关链接
+          placeholder: 请填写 metadata name
+          help: "需要通过开发者模式获取菜单对应的 metadata name"
\ No newline at end of file
diff --git a/templates/modules/aside.html b/templates/modules/aside.html
index bd9ea8a1..17a2a421 100644
--- a/templates/modules/aside.html
+++ b/templates/modules/aside.html
@@ -17,41 +17,13 @@
     </div>
     <div class="sticky_layout">
         <div class="card-widget card-tags card-archives card-webinfo card-allinfo">
-            <div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div>
-            <div class="card-tag-cloud">
-                <a href="tags/AfterEffects/index.html"
-                   style="font-size:1em;color:#d3d3d3">AfterEffects<sup>11</sup></a> <a
-                    href="tags/Chrome/index.html" style="font-size:1em;color:#d3d3d3">Chrome<sup>10</sup></a> <a
-                    href="tags/Docker/index.html" style="font-size:1em;color:#d3d3d3">Docker<sup>1</sup></a> <a
-                    href="tags/Dribbble/index.html" style="font-size:1em;color:#d3d3d3">Dribbble<sup>9</sup></a>
-                <a href="tags/FinalCutPro/index.html"
-                   style="font-size:1em;color:#d3d3d3">FinalCutPro<sup>5</sup></a> <a
-                    href="tags/Heocan/index.html"
-                    style="font-size:1em;color:#d3d3d3">Heocan<sup>21</sup></a> <a
-                    href="tags/Heomagic/index.html" style="font-size:1em;color:#d3d3d3">Heomagic<sup>5</sup></a>
-            </div>
+
+            <th:block th:replace="modules/widgets/tags :: tags"></th:block>
+
             <hr>
-            <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="item-name">文章总数 :</div>
-                    </div>
-                    <div class="item-count">649</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>
+
+            <th:block th:replace="modules/widgets/statistics :: statistics"></th:block>
+
         </div>
     </div>
 </div>
diff --git a/templates/modules/footer.html b/templates/modules/footer.html
index 222aaf61..638e76b9 100644
--- a/templates/modules/footer.html
+++ b/templates/modules/footer.html
@@ -1,35 +1,44 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <!-- 页脚模块 -->
-<footer id="footer" th:fragment="foot">
-    <div id="footer_deal"><a class="deal_link" href="mailto:zh@zhheo.com" rel="external nofollow" title="mail"><i
-            class="fa-regular fa-envelope"></i></a><a class="deal_link" target="_blank"
-                                                      href="https://weibo.com/zhheo" title="微博"
-                                                      rel="noopener external nofollow noreferrer noopener"><i
-            class="ri-weibo-line" style="font-size:1.1rem"></i></a><a class="deal_link" target="_blank"
-                                                                      href="https://www.facebook.com/zhheo/"
-                                                                      rel="noopener external nofollow noreferrer noopener"
-                                                                      title="facebook"><i
-            class="ri-facebook-circle-line" style="font-size:1.2rem"></i></a><a class="deal_link" target="_blank"
-                                                                                href="https://dribbble.com/zhheo/"
-                                                                                rel="noopener external nofollow noreferrer noopener"
-                                                                                title="dribbble"><i
-            class="ri-dribbble-line" style="font-size:1.2rem"></i></a><img class="footer_mini_logo"
-                                                                           src="../img.zhheo.com/i/2022/08/31/630ef3b505ef5.webp"
-                                                                           title="返回顶部"
-                                                                           onclick="btf.scrollToDest(0,500)"><a
-            class="deal_link" target="_blank" href="https://github.com/zhheo/"
-            rel="noopener external nofollow noreferrer noopener" title="github"><i class="ri-github-line"
-                                                                                   style="font-size:1.1rem"></i></a><a
-            class="deal_link" target="_blank" href="https://www.pinterest.com/zhheocom/_created/" title="pinterest"
-            rel="noopener external nofollow noreferrer noopener"><i class="ri-pinterest-line"
-                                                                    style="font-size:1.2rem"></i></a><a
-            class="deal_link" target="_blank" href="https://space.bilibili.com/4218173/"
-            rel="noopener external nofollow noreferrer noopener" title="bilibili"><i class="ri-bilibili-fill"
-                                                                                     style="font-size:1.1rem"></i></a><a
-            class="deal_link" target="_blank" href="https://v.douyin.com/6SMbLRQ/"
-            rel="noopener external nofollow noreferrer noopener" title="Tiktok"><i class="fa-brands fa-tiktok"></i></a>
+<footer id="footer" th:fragment="footer" th:with="leftMenu = ${theme.config.menu.footer_menu}">
+
+    <!-- 社交链接 -->
+    <div id="footer_deal">
+        <a class="deal_link" href="mailto:zh@zhheo.com" rel="external nofollow" title="mail">
+            <i class="fa-regular fa-envelope"></i></a>
+        <a class="deal_link" href="https://weibo.com/zhheo" rel="noopener external nofollow noreferrer noopener"
+           target="_blank"
+           title="微博">
+            <i class="ri-weibo-line" style="font-size:1.1rem"></i></a>
+        <a class="deal_link" href="https://www.facebook.com/zhheo/"
+           rel="noopener external nofollow noreferrer noopener"
+           target="_blank"
+           title="facebook"><i
+                class="ri-facebook-circle-line" style="font-size:1.2rem"></i></a>
+        <a class="deal_link" href="https://dribbble.com/zhheo/"
+           rel="noopener external nofollow noreferrer noopener"
+           target="_blank"
+           title="dribbble"><i class="ri-dribbble-line" style="font-size:1.2rem"></i></a>
+        <img class="footer_mini_logo" onclick="btf.scrollToDest(0,500)"
+             src="../img.zhheo.com/i/2022/08/31/630ef3b505ef5.webp"
+             title="返回顶部">
+        <a class="deal_link" href="https://github.com/zhheo/" rel="noopener external nofollow noreferrer noopener"
+           target="_blank" title="github"><i class="ri-github-line" style="font-size:1.1rem"></i></a>
+        <a class="deal_link" href="https://www.pinterest.com/zhheocom/_created/"
+           rel="noopener external nofollow noreferrer noopener" target="_blank"
+           title="pinterest"><i class="ri-pinterest-line"
+                                style="font-size:1.2rem"></i></a>
+        <a class="deal_link" href="https://space.bilibili.com/4218173/"
+           rel="noopener external nofollow noreferrer noopener"
+           target="_blank" title="bilibili"><i class="ri-bilibili-fill"
+                                               style="font-size:1.1rem"></i></a>
+        <a class="deal_link" href="https://v.douyin.com/6SMbLRQ/" rel="noopener external nofollow noreferrer noopener"
+           target="_blank" title="Tiktok"><i class="fa-brands fa-tiktok"></i></a>
     </div>
+
+
+    <!-- 相关地址 -->
     <div id="heo-footer">
         <div class="footer-group"><h3 class="footer-title">软件</h3>
             <div class="footer-links"><a class="footer-item" href="p/4db484b3.html">轻节食</a><a class="footer-item"
@@ -67,13 +76,13 @@
         </div>
         <div class="footer-group"><h3 class="footer-title">服务</h3>
             <div class="footer-links"><a class="footer-item" href="https://invite.51.la/1NzKqTeb?target=V6"
-                                         target="_blank" rel="noopener nofollow">51la统计</a><a class="footer-item"
+                                         rel="noopener nofollow" target="_blank">51la统计</a><a class="footer-item"
                                                                                                 href="https://bf.zzxworld.com/s/612"
-                                                                                                target="_blank"
-                                                                                                rel="noopener nofollow">BlogFinder</a><a
-                    class="footer-item" href="https://www.foreverblog.cn/blog/2050.html" target="_blank"
-                    rel="noopener nofollow">十年之约</a><a class="footer-item" href="https://wangzhan.qianxin.com/"
-                                                           target="_blank" rel="noopener nofollow">奇安信</a></div>
+                                                                                                rel="noopener nofollow"
+                                                                                                target="_blank">BlogFinder</a><a
+                    class="footer-item" href="https://www.foreverblog.cn/blog/2050.html" rel="noopener nofollow"
+                    target="_blank">十年之约</a><a class="footer-item" href="https://wangzhan.qianxin.com/"
+                                                   rel="noopener nofollow" target="_blank">奇安信</a></div>
         </div>
         <div class="footer-group"><h3 class="footer-title">协议</h3>
             <div class="footer-links"><a class="footer-item" href="privacy/index.html">隐私协议</a><a
@@ -89,6 +98,9 @@
                     class="footer-item" href="link/index.html">随机生成中..</a></div>
         </div>
     </div>
+
+    <!-- 底部 banner -->
+
     <div id="footer-banner">
         <div class="footer-banner-links">
             <div class="footer-banner-left">
@@ -99,8 +111,9 @@
             <div class="footer-banner-right"><a class="footer-banner-link" href="/rss/">订阅</a><a
                     class="footer-banner-link" href="/update/">主题</a><a class="footer-banner-link"
                                                                           href="/about/">关于</a><a
-                    class="footer-banner-link" target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
-                    rel="noopener external nofollow noreferrer noopener">京ICP备19051325号</a><a
+                    class="footer-banner-link" href="https://beian.miit.gov.cn/#/Integrated/index"
+                    rel="noopener external nofollow noreferrer noopener"
+                    target="_blank">京ICP备19051325号</a><a
                     class="footer-banner-link cc" href="/cc/" title="cc协议"><i class="iconfont icon-occ"></i><i
                     class="iconfont icon-occ-by"></i><i class="iconfont icon-onc"></i><i
                     class="iconfont icon-ond"></i></a></div>
diff --git a/templates/modules/header.html b/templates/modules/header.html
index 3b76e04b..57c8fad1 100644
--- a/templates/modules/header.html
+++ b/templates/modules/header.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<header class="not-top-img" id="page-header" th:fragment="header">
+<header class="not-top-img" id="page-header" th:fragment="header"
+        th:with="leftMenu = ${theme.config.menu.header_left_menu}">
     <nav id="nav">
         <div id="nav-group">
 
@@ -9,33 +10,37 @@
 
                 <!-- 当前需要使用 metadata 的 Name 获取，如果后续 API 没有变动，可以将 name 获取后配置在 settings 中 -->
                 <!-- 没有这个菜单时，则不展示 -->
-                <div class="back-home-button" tabindex="-1"
-                     th:if="${not #lists.isEmpty(menuFinder.getByName('4ee910a4-b726-4ca1-826a-27e6468c717f'))}">
-                    <i class="back-home-button-icon fas fa-grip-vertical"></i>
-                    <div class="back-menu-list-groups">
-                        <div class="back-menu-list-group"
-                             th:each="menuItem : ${menuFinder.getByName('4ee910a4-b726-4ca1-826a-27e6468c717f').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}">
-                                            <!-- icon 预留 -->
-                                            <!--<img class="back-menu-item-icon" th:src="@{图片地址}">-->
-                                            <span class="back-menu-item-text" th:text="${childMenu.status.displayName}">
+                <th:block
+                        th:if="${not #strings.isEmpty(leftMenu)} and ${not #lists.isEmpty(menuFinder.getByName(leftMenu))}">
+
+                    <div class="back-home-button" tabindex="-1">
+                        <i class="back-home-button-icon fas fa-grip-vertical"></i>
+                        <div class="back-menu-list-groups">
+                            <div class="back-menu-list-group"
+                                 th:each="menuItem : ${menuFinder.getByName(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}">
+                                                <!-- icon 预留 -->
+                                                <!--<img class="back-menu-item-icon" th:src="@{图片地址}">-->
+                                                <span class="back-menu-item-text"
+                                                      th:text="${childMenu.status.displayName}">
                                             </span>
-                                        </a>
-                                    </th:block>
-                                </div>
-                            </th:block>
+                                            </a>
+                                        </th:block>
+                                    </div>
+                                </th:block>
 
+                            </div>
                         </div>
                     </div>
-                </div>
-
+                </th:block>
                 <!-- 返回主页 -->
                 <a href="/" id="site-name" title="返回博客主页">
                     <!-- 返回主页的 icon 可以使用文字代替-->
diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html
index 2a5320a8..01ea283a 100644
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@@ -454,7 +454,7 @@
         <div th:replace="modules/aside :: aside"></div>
     </main>
     <!--&lt;!&ndash; foot &ndash;&gt;-->
-    <footer th:replace="modules/footer :: foot"></footer>
+    <footer th:replace="modules/footer :: footer"></footer>
 </div>
 
 <!--<div th:replace="module/rightside :: rightside"></div>-->
diff --git a/templates/modules/widgets/statistics.html b/templates/modules/widgets/statistics.html
index b55b049f..dab8ba71 100644
--- a/templates/modules/widgets/statistics.html
+++ b/templates/modules/widgets/statistics.html
@@ -1,6 +1,31 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <!-- 侧边栏站点信息统计 -->
 
+<th:block th:fragment="statistics">
+
+    <!-- 这里还需要换成动态的 -->
+    <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="item-name">文章总数 :</div>
+            </div>
+            <div class="item-count">649</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>
+</th:block>
 
 </html>
\ No newline at end of file
diff --git a/templates/modules/widgets/tags.html b/templates/modules/widgets/tags.html
index b8425d61..7fed8784 100644
--- a/templates/modules/widgets/tags.html
+++ b/templates/modules/widgets/tags.html
@@ -1,6 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <!-- 侧边栏推广 -->
 
+<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="card-tag-cloud">
+        <a style="font-size:1em;color:#d3d3d3" th:each="tag : ${tags}"
+           th:href="${tag.status.permalink}"
+           th:text="${tag.spec.displayName}"
+           th:title="${tag.spec.displayName}">
+            <!-- 角标 -->
+            <sup th:text="${tag.status.postCount}"></sup>
+        </a>
+    </div>
+
+</th:block>
+
 
 </html>
\ No newline at end of file