From 692461f34876bb33833d73061b305320e3a06dbb Mon Sep 17 00:00:00 2001
From: liuzhihang <liuzhihangs@qq.com>
Date: Wed, 23 Nov 2022 00:19:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=80=E6=9C=AF=E6=A0=88=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 settings.yaml                               | 85 +++++++++-----------
 templates/modules/widgets/banner-group.html | 88 +++++----------------
 2 files changed, 57 insertions(+), 116 deletions(-)

diff --git a/settings.yaml b/settings.yaml
index dbf17dd5..b903333b 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -70,53 +70,18 @@ spec:
           placeholder: 请输入小标题
           value: 更多信息请关注 GitHub
           help: 支持 HTML 语法
-        - $formkit: repeater
-          if: "$get(recentTop).value"
-          name: bannersIconPair
-          label: Banner 滚动图标
-          help: 为空时会使用系统内置图标
-          value: []
-          children:
-            - $formkit: group
-              name: top
-              label: 上图标
-              value:
-                url:
-                name:
-                background:
-              children:
-                - $formkit: url
-                  name: url
-                  label: 路径
-                  placeholder: 请输入图标路径
-                  validation: "url"
-                - $formkit: text
-                  name: name
-                  label: 名称
-                  placeholder: 请输入名称
-                - $formkit: color
-                  name: background
-                  label: 背景色
-            - $formkit: group
-              name: bottom
-              label: 下图标
-              value:
-                url:
-                name:
-                background:
-              children:
-                - $formkit: url
-                  name: url
-                  label: 路径
-                  placeholder: 请输入图标路径
-                  validation: "url"
-                - $formkit: text
-                  name: name
-                  label: 名称
-                  placeholder: 请输入名称
-                - $formkit: color
-                  name: background
-                  label: 背景色
+        - $formkit: select
+          name: bannersBackground
+          label: 文章列表布局
+          value: default
+          options:
+            - label: 默认
+              value: default
+            - label: 技术栈
+              value: techStack
+            - label: 图片（WIP）
+              value: img
+          help: "Banner 底部背景，默认使用主题技术栈、自定义技术栈需要在【个人】中配置技术栈"
         - $formkit: url
           if: "$get(recentTop).value"
           name: bikan
@@ -126,13 +91,13 @@ spec:
         - $formkit: url
           if: "$get(recentTop).value"
           name: remen
-          label: 必看精选
+          label: 热门文章
           placeholder: 请输入地址
           validation: "url"
         - $formkit: url
           if: "$get(recentTop).value"
           name: shiyong
-          label: 必看精选
+          label: 实用教程
           placeholder: 请输入地址
           validation: "url"
         - $formkit: radio
@@ -500,6 +465,28 @@ spec:
           placeholder: '本文是原创文章，采用 <a target="_blank" href="/cc">CC BY-NC-ND 4.0</a> 协议，完整转载请注明来自 <a href="/" target="_blank" >程序员小航</a>'
           help: "版权声明内容，支持填入 HTML 标签"
 
+    - group: about
+      label: 个人
+      formSchema:
+        - $formkit: repeater
+          name: techStack
+          label: 技术栈
+          help: 个人技术栈
+          value: []
+          children:
+            - $formkit: text
+              name: name
+              label: 名称
+              placeholder: 请输入名称
+            - $formkit: url
+              name: url
+              label: 路径
+              placeholder: 请输入图标路径
+              validation: "url"
+            - $formkit: color
+              name: background
+              label: 背景色
+
     - group: style
       label: 样式（WIP）
       formSchema:
diff --git a/templates/modules/widgets/banner-group.html b/templates/modules/widgets/banner-group.html
index c4c0467e..c53983d8 100644
--- a/templates/modules/widgets/banner-group.html
+++ b/templates/modules/widgets/banner-group.html
@@ -13,65 +13,10 @@
                  th:utext="${theme.config.top.bannersTitleSmall}"></div>
         </div>
 
-        <!--  后台可配置，未配置时使用默认值-->
         <div class="tags-group-all">
-            <div class="tags-group-wrapper" th:if="${#lists.isEmpty(theme.config.top.bannersIconPair)}">
-                <div class="tags-group-icon-pair">
-                    <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 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 th:src="@{/assets/images/icons/Docker.png}" title="Docker">
-                    </div>
-                    <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 th:src="@{/assets/images/icons/FinalCutPro.png}" title="FinalCutPro">
-                    </div>
-                    <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 th:src="@{/assets/images/icons/Swift.png}" title="Swift">
-                    </div>
-                    <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 th:src="@{/assets/images/icons/illustrator.png}" title="illustrator">
-                    </div>
-                    <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 th:src="@{/assets/images/icons/JS.png}" title="JS">
-                    </div>
-                    <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 th:src="@{/assets/images/icons/Git.webp}" title="Git">
-                    </div>
-                    <div class="tags-group-icon" style="background:#e65164">
-                        <img th:src="@{/assets/images/icons/Apifox.webp}" title="Apifox">
-                    </div>
-                </div>
+
+            <!--  banners 使用默认值-->
+            <div class="tags-group-wrapper" th:if="${#strings.equals(theme.config.top.bannersBackground, 'default')}">
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#989bf8">
                         <img th:src="@{/assets/images/icons/AfterEffect.png}" title="AfterEffect">
@@ -129,17 +74,26 @@
                     </div>
                 </div>
             </div>
+
+            <!--  banners 使用默认值-->
             <div class="tags-group-wrapper"
-                 th:if="${not #lists.isEmpty(theme.config.top.bannersIconPair)}"
-                 th:with="iconPairs = ${theme.config.top.bannersIconPair}" >
-                <div class="tags-group-icon-pair" th:each="iconPair : ${iconPairs}">
-                    <div class="tags-group-icon" th:style="'background:' + ${iconPair.top.background}">
-                        <img th:src="@{${iconPair.top.url}}" th:title="${iconPair.top.name}">
+                 th:if="${#strings.equals(theme.config.top.bannersBackground, 'techStack')}"
+                 th:with="techs = ${theme.config.about.techStack}">
+                <th:block th:each="tech,iterStat : ${techs}">
+                    <div class="tags-group-icon-pair" th:if="${iterStat.odd}">
+                        <div class="tags-group-icon"
+                             th:style="'background:' + ${techOdd.background}"
+                             th:with="techOdd = ${techs.get(iterStat.index - 1)}">
+                            <img th:src="@{${techOdd.url}}" th:title="${techOdd.name}">
+                        </div>
+
+                        <div class="tags-group-icon"
+                             th:style="'background:' + ${techEven.background}"
+                             th:with="techEven = ${tech}">
+                            <img th:src="@{${techEven.url}}" th:title="${techEven.name}">
+                        </div>
                     </div>
-                    <div class="tags-group-icon" th:style="'background:' + ${iconPair.bottom.background}">
-                        <img th:src="@{${iconPair.bottom.url}}" th:title="${iconPair.bottom.name}">
-                    </div>
-                </div>
+                </th:block>
             </div>
         </div>
         <!-- 随机前往一篇文章 -->