github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整导航栏代码

This commit is contained in:
liuzhihang 2022-10-13 23:06:39 +08:00
parent becd141089
commit 403c828696
9 changed files with 181 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
http/http-client.env.json
View File

@ -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"
}
}

31
http/settings.http
View File

@ -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",

24
settings.yaml
View File

@ -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"
help: "需要通过开发者模式获取菜单对应的 metadata name"

6
templates/assets/zhheo/zhheoblog.css
View File

@ -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;

90
templates/modules/nav.html
View File

@ -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>

42
templates/modules/widgets/nav-left.html Normal file
View File

@ -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>

37
templates/modules/widgets/nav-menu.html Normal file
View File

@ -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>

50
templates/modules/widgets/nav-right.html Normal file
View File

@ -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>

2
templates/post.html
View File

@ -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>