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

技术栈样式完善

This commit is contained in:
liuzhihang 2022-11-23 00:19:58 +08:00
parent 3004a50506
commit 692461f348
2 changed files with 57 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
settings.yaml
View File

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

88
templates/modules/widgets/banner-group.html
View File

@ -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>
<!-- 随机前往一篇文章 -->