Merge pull request #318 from Roozenlz/main

修复关于页面我的问候部件无法显示的bug,添加渐变滚动条和标签云随机标签颜色效果可选设置

settings.yaml

@@ -1378,8 +1378,8 @@ spec:
         - $formkit: textarea
           name: widgets
           label: 小部件
-          value: content-idea,authorCareers,personalities-photo,textarea,game,like-music,statistics-map
+          value: content-idea,hello-about,authorCareers,personalities-photo,textarea,game,like-music,statistics-map
-          help: content-idea（我的介绍&我的想法）, authorCareers（技能&职业生涯）, personalities-photo（性格&图片）, textarea（座右铭）, game（爱好）, like-music（关注偏好&音乐偏好）, statistics-map（数据统计&音乐偏好）。你可以随意组合或排序，以逗号隔开。
+          help: content-idea（我的介绍&我的想法）, hello-about（我的问候）, authorCareers（技能&职业生涯）, personalities-photo（性格&图片）, textarea（座右铭）, game（爱好）, like-music（关注偏好&音乐偏好）, statistics-map（数据统计&音乐偏好）。你可以随意组合或排序，以逗号隔开。
         - $formkit: repeater
           name: authorInfoLeftTags
           label: 个人标签-左
@@ -2390,6 +2390,24 @@ spec:
               value: true
             - label: 禁用
               value: false
+        - $formkit: radio
+          name: scrollbarLinearGradientEnable
+          label: 渐变滚动条效果
+          value: false
+          options:
+            - label: 启用
+              value: true
+            - label: 禁用
+              value: false
+        - $formkit: radio
+          name: tagRandomColorEnable
+          label: 标签云随机颜色效果
+          value: false
+          options:
+            - label: 启用
+              value: true
+            - label: 禁用
+              value: false
         - $formkit: group
           name: greeting
           label: 首页问候语

templates/assets/css/fullPage.css

@@ -1,6 +1,4 @@
-
 :root {
-
     --light-grey: rgba(255, 255, 255, 0.7);
     --white: rgba(255, 255, 255, 0.9);
 }
@@ -13,7 +11,6 @@
 
 }
 
-
 .back-home-button {
     color: rgba(255, 255, 255, 0.7);
 }

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

templates/modules/head.html

@@ -22,6 +22,13 @@
 
     <link rel="stylesheet" th:href="${assets_link + '/zhheo/commentBarrage.css'}">
 
+    <style th:if="${theme.config.other.scrollbarLinearGradientEnable}">
+        *::-webkit-scrollbar-thumb {
+            background-color: var(--heo-main);
+            background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
+            border-radius: 2em
+        }
+    </style>
 
     <link media="print"
           onload='this.media="all"'

templates/modules/widgets/about-widgets/hello-about.html

@@ -5,11 +5,14 @@
     <div class="cursor" style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);"></div>
     <div class="shapes">
         <div class="shape shape-1"
-            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);"></div>
+            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);">
+        </div>
         <div class="shape shape-2"
-            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);"></div>
+            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);">
+        </div>
         <div class="shape shape-3"
-            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);"></div>
+            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);">
+        </div>
     </div>
     <div class="content">
         <h1>[[${theme.config.about.helloAbout}]]</h1>
@@ -17,7 +20,8 @@
     <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js"></script>
     <style>
         .hello-about {
-            margin: 20px auto;
+            margin: 20px auto 0;
+            width: 100%;
             border-radius: 24px;
             background: var(--heo-card-bg);
             border: var(--style-border-always);
@@ -105,6 +109,12 @@
             }
         }
 
+        @media (max-width: 768px) {
+            .hello-about {
+                margin:20px 0 auto
+            }
+        }
+
         .cursor {
             position: absolute;
             background: #2128bd;
@@ -123,11 +133,9 @@
             background: #2128bd;
         }
     </style>
-    <script>(() => {
+    <script>
-
+        (() => {
-
+            const helloAboutEl = document.querySelector(".hello-about");
-
-            var helloAboutEl = document.querySelector(".hello-about");
             helloAboutEl.addEventListener("mousemove", evt => {
                 const mouseX = evt.offsetX;
                 const mouseY = evt.offsetY;

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>