添加标签云随机标签颜色效果可选设置

2023-07-25 02:06:12 +08:00 · 2023-07-25 02:06:12 +08:00 · f047b3cbb1
parent edad1a5434
commit f047b3cbb1
3 changed files with 17 additions and 4 deletions
--- a/settings.yaml
+++ b/settings.yaml
@ -2399,6 +2399,15 @@ spec:
              value: true
            - label: 禁用
              value: false
+        - $formkit: radio
+          name: tagRandomColorEnable
+          label: 标签云随机颜色效果
+          value: false
+          options:
+            - label: 启用
+              value: true
+            - label: 禁用
+              value: false
        - $formkit: group
          name: greeting
          label: 首页问候语
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@ -10562,7 +10562,7 @@ div#author-info__sayhi:hover {

 /* 标签云卡片 */
 #aside-content .card-tag-cloud a {
-    color: var(--heo-fontcolor) !important;
+    color: var(--heo-fontcolor);
    font-size: 0.8rem;
    border-radius: 8px;
 }
--- a/templates/modules/widgets/aside/contain/tags-contain.html
+++ b/templates/modules/widgets/aside/contain/tags-contain.html
@ -1,21 +1,25 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <!-- 标签 -->
-
 <th:block th:fragment="tags-contain"
          th:with="tags = ${tagFinder.listAll()}, tagQuantity = ${#conversions.convert(theme.config.sidebar.tagQuantity, 'java.lang.Integer')}">

    <div class="item-headline"><i class="iconfont icon-tags"></i><span>标签</span></div>
    <div class="card-tag-cloud">
-        <a style="font-size:1em;color:#d3d3d3" th:each="tag,iterStat : ${tags}"
+        <a class="tag-item" style="font-size:1em" th:each="tag,iterStat : ${tags}"
           th:href="@{${tag.status.permalink}}"
           th:if="${tagQuantity >= 0 && iterStat.index < tagQuantity || tagQuantity < 0}"
           th:title="${tag.spec.displayName}">
            <!-- 角标 -->
            [[${tag.spec.displayName}]]<sup th:text="${tag.status.visiblePostCount}"></sup>
        </a>
-
    </div>
+    <script th:if="${theme.config.other.tagRandomColorEnable}">
+        for (const tag of document.getElementsByClassName('tag-item')) {
+            let randomColor ="#"+((1<<24)*Math.random()|0).toString(16);
+            tag.style.color = randomColor;
+        }
+    </script>

 </th:block>