From 403c828696296060c5010f55ad8d03243ae5ed92 Mon Sep 17 00:00:00 2001
From: liuzhihang <liuzhihangs@qq.com>
Date: Thu, 13 Oct 2022 23:06:39 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 http/http-client.env.json                |  3 +-
 http/settings.http                       | 31 ++++++--
 settings.yaml                            | 24 ++++---
 templates/assets/zhheo/zhheoblog.css     |  6 +-
 templates/modules/nav.html               | 90 ++----------------------
 templates/modules/widgets/nav-left.html  | 42 +++++++++++
 templates/modules/widgets/nav-menu.html  | 37 ++++++++++
 templates/modules/widgets/nav-right.html | 50 +++++++++++++
 templates/post.html                      |  2 +-
 9 files changed, 181 insertions(+), 104 deletions(-)
 create mode 100644 templates/modules/widgets/nav-left.html
 create mode 100644 templates/modules/widgets/nav-menu.html
 create mode 100644 templates/modules/widgets/nav-right.html

diff --git a/http/http-client.env.json b/http/http-client.env.json
index 60960bb7..c331818a 100644
--- a/http/http-client.env.json
+++ b/http/http-client.env.json
@@ -1,5 +1,6 @@
 {
   "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=b761100c-0fd3-4851-9499-ef79b2b881a5; SESSION=4f6dc3c4-67e6-4e47-bd5a-6bb631ec7efc"
+    "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-d0810c6d6973"
   }
 }
\ No newline at end of file
diff --git a/http/settings.http b/http/settings.http
index 86e67838..4a59d0c7 100644
--- a/http/settings.http
+++ b/http/settings.http
@@ -2,6 +2,8 @@
 ### 删除 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: {{$uuid}}
 Cookie: {{cookie}}
 
 
@@ -9,7 +11,9 @@ Cookie: {{cookie}}
 
 POST http://localhost:8090/api/v1alpha1/settings
 Content-Type: application/json
+Sec-Fetch-Mode: cors
 Cookie: {{cookie}}
+X-XSRF-TOKEN: {{$uuid}}
 
 {
   "apiVersion": "v1alpha1",
@@ -19,6 +23,26 @@ Cookie: {{cookie}}
   },
   "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": "布局",
@@ -146,13 +170,6 @@ Cookie: {{cookie}}
         "group": "menu",
         "label": "菜单映射",
         "formSchema": [
-          {
-            "$formkit": "text",
-            "name": "header_left_menu",
-            "label": "菜单栏左侧相关链接",
-            "placeholder": "请填写 metadata name",
-            "help": "需要通过开发者模式获取菜单对应的 metadata name"
-          },
           {
             "$formkit": "text",
             "name": "footer_menu",
diff --git a/settings.yaml b/settings.yaml
index 3bb3480d..c3c56ec4 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -4,6 +4,19 @@ 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:
@@ -75,16 +88,11 @@ spec:
           name: profile_desc
           placeholder: 请填写个人卡片描述信息
           help: "支持使用 HTML 标签"
-    - group: menu
+    - group: footer
       label: 菜单映射
       formSchema:
         - $formkit: text
-          name: header_left_menu
-          label: 菜单栏左侧相关链接
-          placeholder: 请填写 metadata name
-          help: "需要通过开发者模式获取菜单对应的 metadata name"
-        - $formkit: text
-          name: footer_menu
+          name: menu
           label: 底部相关链接
           placeholder: 请填写 metadata name
-          help: "需要通过开发者模式获取菜单对应的 metadata name"
\ No newline at end of file
+          help: "需要通过开发者模式获取菜单对应的 metadata name"
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index e60ed809..e1454742 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@@ -2652,7 +2652,7 @@ blockquote footer cite::before {
 }
 
 #page-header.nav-fixed #nav #site-name:hover, #page-header.nav-fixed #nav #toggle-menu:hover, #page-header.nav-fixed #nav a:hover {
-    color: #307af6
+    color: #307af6;
 }
 
 #page-header.nav-visible #nav {
@@ -6668,11 +6668,11 @@ a.console_switchbutton {
 
 #nav #site-name {
     color: var(--heo-fontcolor);
-    padding: 0;
+    padding: 0px 5px;
     transition: .3s;
     display: flex;
     height: 35px;
-    width: 75px;
+    /*width: 75px;*/
     justify-content: center;
     align-items: center;
     text-shadow: none;
diff --git a/templates/modules/nav.html b/templates/modules/nav.html
index 34d27597..52352d92 100644
--- a/templates/modules/nav.html
+++ b/templates/modules/nav.html
@@ -3,97 +3,19 @@
 <nav id="nav" th:fragment="nav">
     <div id="nav-group">
 
-        <!-- 菜单栏左侧，需要在 console 配置一个叫 Hao 的菜单 -->
-        <div id="blog_name">
+        <!-- 导航栏左侧 -->
+        <div th:replace="modules/widgets/nav-left :: nav-left"></div>
 
-            <!-- 当前需要使用 metadata 的 Name 获取，如果后续 API 没有变动，可以将 name 获取后配置在 settings 中 -->
-            <!-- 没有这个菜单时，则不展示 -->
-
-            <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>
-
-                        </div>
-                    </div>
-                </div>
-            </th:block>
-            <!-- 返回主页 -->
-            <a href="/" id="site-name" title="返回博客主页">
-                <!-- 返回主页的 icon 可以使用文字代替-->
-                <i class="iconfont icon-heo"></i>
-            </a>
-        </div>
         <div id="page-name-mask">
             <div id="page-name"><a id="page-name-text" onclick="btf.scrollToDest(0,500)"></a></div>
         </div>
-        <!-- 中间菜单栏 -->
-        <div id="menus">
-            <div class="menus_items">
 
-                <div class="menus_item" th:each="menuItem : ${menuFinder.getDefault().menuItems}">
-                    <a class="site-page" href="javascript:void(0);" rel="external nofollow">
-                        <span th:text="${menuItem.status.displayName}"></span>
-                        <i class="fas fa-chevron-down expand"></i>
-                    </a>
+        <!-- 导航栏中间 -->
+        <div th:replace="modules/widgets/nav-menu :: nav-menu"></div>
 
-                    <ul class="menus_item_child">
+        <!-- 导航栏右侧 -->
+        <div th:replace="modules/widgets/nav-right :: nav-right"></div>
 
-                        <li th:each="childMenu : ${menuItem.children}">
-                            <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>
-                            </a>
-                        </li>
-                    </ul>
-
-                </div>
-
-            </div>
-        </div>
-        <div id="nav-right">
-            <div class="nav-button only-home" id="travellings_button"><a class="site-page"
-                                                                         href="javascript:void(0);"
-                                                                         onclick="totraveling()"
-                                                                         rel="external nofollow"
-                                                                         title="随机前往一个开往项目网站"><i
-                    class="fa-duotone fa-train-subway" style="font-size:1rem"></i></a></div>
-            <div class="nav-button" id="randomPost_button"><a class="site-page" onclick="toRandomPost()"
-                                                              title="随机前往一个文章"><i
-                    class="fa-duotone fa-dice" 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></a></div>
-            <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></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></a></div>
-            <div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div>
-        </div>
     </div>
 </nav>
 
diff --git a/templates/modules/widgets/nav-left.html b/templates/modules/widgets/nav-left.html
new file mode 100644
index 00000000..930721aa
--- /dev/null
+++ b/templates/modules/widgets/nav-left.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
+<!-- 导航栏左侧 -->
+<div id="blog_name" th:fragment="nav-left" th:with="leftMenu = ${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))}">
+
+        <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>
+
+            </div>
+        </div>
+    </div>
+
+    <!-- 返回主页 -->
+    <!-- 这里可以指定使用什么作为图标，默认使用站点名称 -->
+    <a href="/" id="site-name"
+       th:utext="${#strings.isEmpty(theme.config.nav.site_title)} ? ${site.title} : ${theme.config.nav.site_title}"
+       title="返回博客主页">
+    </a>
+</div>
+
+
+</html>
\ No newline at end of file
diff --git a/templates/modules/widgets/nav-menu.html b/templates/modules/widgets/nav-menu.html
new file mode 100644
index 00000000..f62a206b
--- /dev/null
+++ b/templates/modules/widgets/nav-menu.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
+<!-- 导航栏菜单栏 -->
+<div id="menus" th:fragment="nav-menu">
+    <div class="menus_items">
+
+        <!-- 第一层仅展示使用，不做跳转 -->
+        <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}">
+                <span th:text="${menuItem.status.displayName}"></span>
+                <i class="fas fa-chevron-down expand"></i>
+            </a>
+
+            <!-- 有子菜单则显示子菜单 -->
+            <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
+                <!-- 子菜单 -->
+                <ul class="menus_item_child">
+                    <li th:each="childMenu : ${menuItem.children}">
+                        <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>
+                        </a>
+                    </li>
+                </ul>
+            </th:block>
+
+        </div>
+
+    </div>
+</div>
+
+
+</html>
\ No newline at end of file
diff --git a/templates/modules/widgets/nav-right.html b/templates/modules/widgets/nav-right.html
new file mode 100644
index 00000000..dc3803bb
--- /dev/null
+++ b/templates/modules/widgets/nav-right.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
+<!-- 导航栏菜单栏 -->
+<div id="nav-right" th:fragment="nav-right">
+
+    <!-- 功能都需要添加开关 -->
+
+    <div class="nav-button only-home" id="travellings_button">
+        <a class="site-page" href="javascript:void(0);" onclick="totraveling()" rel="external nofollow"
+           title="随机前往一个开往项目网站">
+            <i class="fa-duotone fa-train-subway" style="font-size:1rem"></i>
+        </a>
+    </div>
+
+    <div class="nav-button" id="randomPost_button">
+        <a class="site-page" onclick="toRandomPost()" title="随机前往一个文章"><i
+                class="fa-duotone fa-dice" 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>
+        </a>
+    </div>
+
+    <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>
+        </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>
+        </a>
+    </div>
+
+    <div id="toggle-menu">
+        <a class="site-page">
+            <i class="fas fa-bars fa-fw"></i>
+        </a>
+    </div>
+</div>
+
+
+</html>
\ No newline at end of file
diff --git a/templates/post.html b/templates/post.html
index 2332460d..23bbda83 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -473,7 +473,7 @@
                     <div class="comment-tips" id="comment-tips"><span>你无需删除空行，直接评论以获取最佳展示效果</span>
                     </div>
                 </div>
-                这里放着评论模块
+                <halo:comment group="content.halo.run" kind="Post" th:attr="name=${post.metadata.name}"/>
             </div>
             <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/clipboard.js/2.0.10/clipboard.min.js"></script>
             <script>var clipboard = new ClipboardJS(".copybtn")</script>