Merge pull request #318 from Roozenlz/main
修复关于页面我的问候部件无法显示的bug,添加渐变滚动条和标签云随机标签颜色效果可选设置
This commit is contained in:
困困鱼
GitHub
commit
6206983850
|
|
@ -1378,8 +1378,8 @@ spec:
|
|||
- $formkit: textarea
|
||||
name: widgets
|
||||
label: 小部件
|
||||
value: content-idea,authorCareers,personalities-photo,textarea,game,like-music,statistics-map
|
||||
help: 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（我的介绍&我的想法）, 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: 首页问候语
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"'
|
||||
|
|
|
|||
|
|
@ -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>(() => {
|
||||
|
||||
|
||||
|
||||
var helloAboutEl = document.querySelector(".hello-about");
|
||||
<script>
|
||||
(() => {
|
||||
const helloAboutEl = document.querySelector(".hello-about");
|
||||
helloAboutEl.addEventListener("mousemove", evt => {
|
||||
const mouseX = evt.offsetX;
|
||||
const mouseY = evt.offsetY;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue