添加 HTTP.http，增加侧边栏 widgets

2022-10-10 09:28:41 +08:00 · 2022-10-10 09:28:41 +08:00 · 66e0c4ffed
parent 4e3db376e3
commit 66e0c4ffed
7 changed files with 233 additions and 170 deletions
--- a/HELP.md
+++ b/HELP.md
@ -10,6 +10,19 @@

 `-e SPRING_PROFILES_ACTIVE=dev` 则可以打开 swagger-ui。

+```
+docker run \
+  -it -d \
+  --name halo-next \
+  -p 8090:8090 \
+  -v ~/halo-next:/root/halo-next \
+  -e HALO_EXTERNAL_URL=http://localhost:8090/ \
+  -e HALO_SECURITY_INITIALIZER_SUPERADMINPASSWORD=P@88w0rd \
+  -e SPRING_THYMELEAF_CACHE=FALSE \
+  -e SPRING_PROFILES_ACTIVE=dev \
+  halohub/halo-dev:2.0.0-alpha.1 
+```
+
 ### 下载主题

 下载[halo-theme-hao](https://github.com/liuzhihang/halo-theme-hao)主题，并压缩为 zip 包，然后在 halo console 控制台上传主题，此时可以在
@ -18,6 +31,14 @@ halo 的主题路径下看到刚才上传的主题。
 > 路径为
 > ~/halo-next/theme

+### 如何动态更新配置
+
+参考 HTTP.http 文件
+
+1. 在 console 后台获取到 cookie
+2. 调用删除 settings 接口
+3. 将新的配置放在 yaml 转 json，然后调用 post 接口
+
 ### 参考主题

 > 可以参考相关主题的用法
--- a/HTTP.http
+++ b/HTTP.http
@ -0,0 +1,150 @@
+### 删除 settings 配置， Cookit 可以从 Console 后台 F12 获取
+DELETE http://localhost:8090/api/v1alpha1/settings/theme-hao-setting
+Content-Type: application/json
+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=54b8f604-bde6-4977-8ba2-1ba66a1c334f; SESSION=25179b0d-8abb-4638-ab64-54eb277d7b5e
+
+
+### 设置 settings 的配置，将 settings 的配置文件先使用 yaml 转 json 转换后放在下面即可
+
+POST http://localhost:8090/api/v1alpha1/settings
+Content-Type: application/json
+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=54b8f604-bde6-4977-8ba2-1ba66a1c334f; SESSION=25179b0d-8abb-4638-ab64-54eb277d7b5e
+
+{
+  "apiVersion": "v1alpha1",
+  "kind": "Setting",
+  "metadata": {
+    "name": "theme-hao-setting"
+  },
+  "spec": {
+    "forms": [
+      {
+        "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": "group",
+            "name": "profile",
+            "label": "信息卡片",
+            "children": [
+              {
+                "$formkit": "text",
+                "name": "name",
+                "placeholder": "请输入名称"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
+
+
+
+
+###
--- a/settings.yaml
+++ b/settings.yaml
@ -67,173 +67,10 @@ spec:
          label: 小部件
          value: "profile,popular-posts,latest-comments,categories,tags"
          help: "目前提供的小部件有：profile（站点资料）, popular-posts（热门文章）, latest-comments（最新评论）, categories（文章分类）, tags（文章标签）。你可以随意组合或排序，以逗号隔开。"
-    - group: content
-      label: 内容设置
-      formSchema:
-        - $formkit: radio
-          name: enable_lightgallery
-          label: 图片放大
-          value: false
-          options:
-            - label: 开启
-              value: true
-            - label: 关闭
-              value: false
-        - $formkit: radio
-          name: enable_code_highlight
-          label: 代码块高亮
-          value: false
-          options:
-            - label: 开启
-              value: true
-            - label: 关闭
-              value: false
-        - $formkit: textarea
-          name: code_highlight_extra_languages
-          label: 代码块额外高亮语言
-          help: "默认已经包含：php,diff,java,css,bash,json,perl,swift,plaintext,ruby,yaml,sql,vbnet,ini,scss,less,cpp,typescript,csharp,rust,python,python-repl,objectivec,r,shell,makefile,go,xml,markdown,lua,javascript,php-template,kotlin,c 如果需要添加其他语言，请按照相同格式添加。"
-        - $formkit: select
-          name: code_highlight_style
-          label: 代码块高亮主题
-          value: "default.min.css"
-          options:
-            - value: "a11y-dark.min.css"
-              label: "a11y-dark.min.css"
-            - value: "a11y-light.min.css"
-              label: "a11y-light.min.css"
-            - value: "agate.min.css"
-              label: "agate.min.css"
-            - value: "an-old-hope.min.css"
-              label: "an-old-hope.min.css"
-            - value: "androidstudio.min.css"
-              label: "androidstudio.min.css"
-            - value: "arduino-light.min.css"
-              label: "arduino-light.min.css"
-            - value: "arta.min.css"
-              label: "arta.min.css"
-            - value: "ascetic.min.css"
-              label: "ascetic.min.css"
-            - value: "atom-one-dark-reasonable.min.css"
-              label: "atom-one-dark-reasonable.min.css"
-            - value: "atom-one-dark.min.css"
-              label: "atom-one-dark.min.css"
-            - value: "atom-one-light.min.css"
-              label: "atom-one-light.min.css"
-            - value: "brown-paper.min.css"
-              label: "brown-paper.min.css"
-            - value: "codepen-embed.min.css"
-              label: "codepen-embed.min.css"
-            - value: "color-brewer.min.css"
-              label: "color-brewer.min.css"
-            - value: "dark.min.css"
-              label: "dark.min.css"
-            - value: "default.min.css"
-              label: "default.min.css"
-            - value: "devibeans.min.css"
-              label: "devibeans.min.css"
-            - value: "docco.min.css"
-              label: "docco.min.css"
-            - value: "far.min.css"
-              label: "far.min.css"
-            - value: "felipec.min.css"
-              label: "felipec.min.css"
-            - value: "foundation.min.css"
-              label: "foundation.min.css"
-            - value: "github-dark-dimmed.min.css"
-              label: "github-dark-dimmed.min.css"
-            - value: "github-dark.min.css"
-              label: "github-dark.min.css"
-            - value: "github.min.css"
-              label: "github.min.css"
-            - value: "gml.min.css"
-              label: "gml.min.css"
-            - value: "googlecode.min.css"
-              label: "googlecode.min.css"
-            - value: "gradient-dark.min.css"
-              label: "gradient-dark.min.css"
-            - value: "gradient-light.min.css"
-              label: "gradient-light.min.css"
-            - value: "grayscale.min.css"
-              label: "grayscale.min.css"
-            - value: "hybrid.min.css"
-              label: "hybrid.min.css"
-            - value: "idea.min.css"
-              label: "idea.min.css"
-            - value: "intellij-light.min.css"
-              label: "intellij-light.min.css"
-            - value: "ir-black.min.css"
-              label: "ir-black.min.css"
-            - value: "isbl-editor-dark.min.css"
-              label: "isbl-editor-dark.min.css"
-            - value: "isbl-editor-light.min.css"
-              label: "isbl-editor-light.min.css"
-            - value: "kimbie-dark.min.css"
-              label: "kimbie-dark.min.css"
-            - value: "kimbie-light.min.css"
-              label: "kimbie-light.min.css"
-            - value: "lightfair.min.css"
-              label: "lightfair.min.css"
-            - value: "lioshi.min.css"
-              label: "lioshi.min.css"
-            - value: "magula.min.css"
-              label: "magula.min.css"
-            - value: "mono-blue.min.css"
-              label: "mono-blue.min.css"
-            - value: "monokai-sublime.min.css"
-              label: "monokai-sublime.min.css"
-            - value: "monokai.min.css"
-              label: "monokai.min.css"
-            - value: "night-owl.min.css"
-              label: "night-owl.min.css"
-            - value: "nnfx-dark.min.css"
-              label: "nnfx-dark.min.css"
-            - value: "nnfx-light.min.css"
-              label: "nnfx-light.min.css"
-            - value: "nord.min.css"
-              label: "nord.min.css"
-            - value: "obsidian.min.css"
-              label: "obsidian.min.css"
-            - value: "paraiso-dark.min.css"
-              label: "paraiso-dark.min.css"
-            - value: "paraiso-light.min.css"
-              label: "paraiso-light.min.css"
-            - value: "pojoaque.min.css"
-              label: "pojoaque.min.css"
-            - value: "purebasic.min.css"
-              label: "purebasic.min.css"
-            - value: "qtcreator-dark.min.css"
-              label: "qtcreator-dark.min.css"
-            - value: "qtcreator-light.min.css"
-              label: "qtcreator-light.min.css"
-            - value: "rainbow.min.css"
-              label: "rainbow.min.css"
-            - value: "routeros.min.css"
-              label: "routeros.min.css"
-            - value: "school-book.min.css"
-              label: "school-book.min.css"
-            - value: "shades-of-purple.min.css"
-              label: "shades-of-purple.min.css"
-            - value: "srcery.min.css"
-              label: "srcery.min.css"
-            - value: "stackoverflow-dark.min.css"
-              label: "stackoverflow-dark.min.css"
-            - value: "stackoverflow-light.min.css"
-              label: "stackoverflow-light.min.css"
-            - value: "sunburst.min.css"
-              label: "sunburst.min.css"
-            - value: "tokyo-night-dark.min.css"
-              label: "tokyo-night-dark.min.css"
-            - value: "tokyo-night-light.min.css"
-              label: "tokyo-night-light.min.css"
-            - value: "tomorrow-night-blue.min.css"
-              label: "tomorrow-night-blue.min.css"
-            - value: "tomorrow-night-bright.min.css"
-              label: "tomorrow-night-bright.min.css"
-            - value: "vs.min.css"
-              label: "vs.min.css"
-            - value: "vs2015.min.css"
-              label: "vs2015.min.css"
-            - value: "xcode.min.css"
-              label: "xcode.min.css"
-            - value: "xt256.min.css"
-              label: "xt256.min.css"
+        - $formkit: group
+          name: profile
+          label: 信息卡片
+          children:
+            - $formkit: text
+              name: name
+              placeholder: 请输入名称
--- a/templates/modules/widgets/profile.html
+++ b/templates/modules/widgets/profile.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 侧边栏自我介绍 -->
+
+<div class="card-widget card-info" th:fragment="profile">
+    <!-- 描述信息 -->
+    <div class="card-content">
+        <div class="card-info-avatar is-center">
+            <div class="author-info__sayhi" id="author-info__sayhi">你好啊！我是</div>
+            <div class="author-info__name" th:text="${site.title}">Liu ZhiHang</div>
+            <div class="author-info__description" th:utext="${theme.config.aside.description}">
+                这里可以写一些<b>公告信息</b>或者<b>个人介绍</b>。
+            </div>
+        </div>
+    </div>
+
+    <!-- 跳转信息 -->
+    <!--<div class="banner-button-group">-->
+    <!--    <a class="banner-button" th:href="${theme.config.aside.button_link}">-->
+    <!--        <i class="fas fa-circle-arrow-up-right"></i>-->
+    <!--        <span class="banner-button-text" th:text="${theme.config.aside.button_text}">了解更多</span>-->
+    <!--    </a>-->
+    <!--</div>-->
+
+    <!--<div class="card-info-social-icons is-center">-->
+    <!--    <a class="social-icon" th:href="${theme.config.aside.github}" rel="external nofollow" target="_blank"-->
+    <!--       title="Github">-->
+    <!--        <i class="ri-github-line"></i>-->
+    <!--    </a>-->
+    <!--    <a class="social-icon" th:href="${theme.config.aside.mail}" rel="external nofollow" target="_blank"-->
+    <!--       title="Mail">-->
+    <!--        <i class="ri-mail-line"></i>-->
+    <!--    </a>-->
+    <!--</div>-->
+</div>
+
+</html>
--- a/templates/modules/widgets/promotion.html
+++ b/templates/modules/widgets/promotion.html
@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- 侧边栏推广 -->
+
+
+</html>
--- a/templates/modules/widgets/statistics.html
+++ b/templates/modules/widgets/statistics.html
@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- 侧边栏站点信息统计 -->
+
+
+</html>
--- a/templates/modules/widgets/tags.html
+++ b/templates/modules/widgets/tags.html
@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- 侧边栏推广 -->
+
+
+</html>