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

关于页面配置调整

This commit is contained in:
1152958806@qq.com 2023-07-07 13:36:51 +08:00
parent 451ec4ce49
commit be3d15f36a
11 changed files with 1016 additions and 758 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
settings.yaml
View File

@ -856,6 +856,11 @@ spec:
- $formkit: color - $formkit: color
name: background name: background
label: 背景色 label: 背景色
- $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（数据统计&音乐偏好）。你可以随意组合或排序，以逗号隔开。"
- $formkit: repeater - $formkit: repeater
name: authorInfoLeftTags name: authorInfoLeftTags
label: 个人标签-左 label: 个人标签-左
@ -886,6 +891,10 @@ spec:
label: 我的想法 label: 我的想法
value: <div class="author-content-item-tips">一定</div> <h2>记得<br> 修改这块<span class="inline-word">代码</span> <div class="mask"> <span class="first-tips" data-show="">优秀的产品</span> <span>出色的设计</span> <span>高效的编程</span> <span data-up="">人性化的用户体验</span> </div> </h2> value: <div class="author-content-item-tips">一定</div> <h2>记得<br> 修改这块<span class="inline-word">代码</span> <div class="mask"> <span class="first-tips" data-show="">优秀的产品</span> <span>出色的设计</span> <span>高效的编程</span> <span data-up="">人性化的用户体验</span> </div> </h2>
help: 支持 HTML 语法 help: 支持 HTML 语法
- $formkit: text
name: helloAbout
label: hello 文字
value: Hello there!
- $formkit: group - $formkit: group
name: authorCareers name: authorCareers
label: 职业生涯 label: 职业生涯
@ -960,7 +969,7 @@ spec:
label: 文本块 label: 文本块
min: 2 min: 2
max: 2 max: 2
help: 左边的一行10字 右面一行19字 help: 左边的一行10字 右面一行19字(设置两条数据，不然出不来)
children: children:
- $formkit: text - $formkit: text
name: tittle name: tittle

721
templates/about.html
View File

@ -37,724 +37,8 @@
<div class="author-title">关于本站</div> <div class="author-title">关于本站</div>
<div class="author-content"> <th:block th:replace="~{modules/about-widgets :: about-widgets(${theme.config.about.widgets})}"></th:block>
<div class="author-content-item myInfoAndSayHello" th:utext="${theme.config.about.content}">
</div>
<div class="aboutsiteTips author-content-item" th:utext="${theme.config.about.idea}"></div>
</div>
<script>
var pursuitInterval = null;
pursuitInterval = setInterval(function () {
const show = document.querySelector('span[data-show]')
const next = show.nextElementSibling || document.querySelector('.first-tips')
const up = document.querySelector('span[data-up]')
if (up) {
up.removeAttribute('data-up')
}
show.removeAttribute('data-show')
show.setAttribute('data-up', '')
next.setAttribute('data-show', '')
}, 2000)
document.addEventListener('pjax:send', function () {
clearInterval(pursuitInterval);
});
</script>
<div class="author-content">
<div class="author-content-item skills">
<div class="card-content">
<div class="author-content-item-tips">技能</div>
<span class="author-content-item-title">开启创造力</span>
<div class="skills-style-group">
<div class="tags-group-all">
<div class="tags-group-wrapper">
<div class="tags-group-all">
<!-- 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">
</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>
<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>
</div>
<!-- banners 使用默认值-->
<div class="tags-group-wrapper"
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>
</th:block>
</div>
</div>
</div>
</div>
<!-- banners 使用默认值-->
<div class="skills-list"
th:if="${#strings.equals(theme.config.top.bannersBackground, 'default')}"
th:with="techs = ${theme.config.about.techStack}">
<div class="skill-info">
<div class="skill-icon" style="background:#989bf8">
<img th:src="@{/assets/images/icons/AfterEffect.png}"
title="AfterEffect">
</div>
<div class="skill-name"><span>AfterEffect</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#ffffff">
<img th:src="@{/assets/images/icons/Sketch.png}" title="Sketch">
</div>
<div class="skill-name"><span>Sketch</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#57b6e6">
<img th:src="@{/assets/images/icons/Docker.png}" title="Docker">
</div>
<div class="skill-name"><span>Docker</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#4082c3">
<img th:src="@{/assets/images/icons/Photoshop.png}" title="Photoshop">
</div>
<div class="skill-name"><span>Photoshop</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#ffffff">
<img th:src="@{/assets/images/icons/FinalCutPro.png}"
title="FinalCutPro">
</div>
<div class="skill-name"><span>FinalCutPro</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#ffffff">
<img th:src="@{/assets/images/icons/Python.png}" title="Python">
</div>
<div class="skill-name"><span>Python</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#eb6840">
<img th:src="@{/assets/images/icons/Swift.png}" title="Swift">
</div>
<div class="skill-name"><span>Swift</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#8f55ba">
<img th:src="@{/assets/images/icons/Principle.png}" title="Principle">
</div>
<div class="skill-name"><span>Principle</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#f29e39">
<img th:src="@{/assets/images/icons/illustrator.png}"
title="illustrator">
</div>
<div class="skill-name"><span>illustrator</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#2c51db">
<img th:src="@{/assets/images/icons/CSS3.png}" title="CSS3">
</div>
<div class="skill-name"><span>CSS3</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#f7cb4f">
<img th:src="@{/assets/images/icons/JS.png}" title="JS">
</div>
<div class="skill-name"><span>JS</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#e9572b">
<img th:src="@{/assets/images/icons/HTML.png}" title="HTML">
</div>
<div class="skill-name"><span>HTML</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#df5b40">
<img th:src="@{/assets/images/icons/Git.webp}" title="Git">
</div>
<div class="skill-name"><span>Git</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#1f1f1f">
<img th:src="@{/assets/images/icons/Apifox.webp}" title="Apifox">
</div>
<div class="skill-name"><span>Apifox</span></div>
</div>
<div class="etc">...</div>
</div>
<div class="skills-list"
th:if="${#strings.equals(theme.config.top.bannersBackground, 'techStack')}"
th:with="techs = ${theme.config.about.techStack}">
<th:block th:each="tech : ${techs}">
<div class="skill-info">
<div class="skill-icon" th:style="'background:' + ${tech.background}">
<img th:src="@{${tech.url}}" th:title="${tech.name}">
</div>
<div class="skill-name"><span th:title="${tech.name}"></span></div>
</div>
</th:block>
</div>
</div>
</div>
</div>
<div class="author-content-item careers">
<div class="card-content">
<div class="author-content-item-tips">生涯</div>
<span class="author-content-item-title"
th:text="${theme.config.about.authorCareers.authorCareersTitle}">无限进步</span>
<div class="careers-group"
th:if="${not #lists.isEmpty(theme.config.about.authorCareers.authorCareersTags)}"
th:with="careersTags = ${theme.config.about.authorCareers.authorCareersTags}">
<div class="careers-item" th:each="tag : ${careersTags}">
<div class="circle" th:style="'background:' + ${tag.background}"></div>
<div class="name" th:text="${tag.desc}"></div>
</div>
</div>
<img alt="生涯" class="author-content-img"
th:src="@{${#strings.isEmpty(theme.config.about.authorCareers.authorCareersBackground) ? '/assets/images/hao-logo.jpg' : theme.config.about.authorCareers.authorCareersBackground}}">
</div>
</div>
</div>
<!-- personalities -->
<div class="author-content">
<div class="author-content-item personalities"
th:with="personality = ${theme.config.about.personalities}">
<div class="author-content-item-tips">性格</div>
<th:block th:if="${personality == 'infp'}">
<span class="author-content-item-title">调停者</span>
<div class="title2" style="color: #56a178;">INFP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/infp.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/INFP-%E4%BA%BA%E6%A0%BC'}">调停者</a>
</div>
</th:block>
<th:block th:if="${personality == 'intj'}">
<span class="author-content-item-title">建筑师</span>
<div class="title2" style="color: #56a178;">INTJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/intj.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/INTJ-%E4%BA%BA%E6%A0%BC'}">建筑师</a>
</div>
</th:block>
<th:block th:if="${personality == 'intp'}">
<span class="author-content-item-title">逻辑学家</span>
<div class="title2" style="color: #56a178;">INTP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/intp.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/INTP-%E4%BA%BA%E6%A0%BC'}">逻辑学家</a>
</div>
</th:block>
<th:block th:if="${personality == 'entj'}">
<span class="author-content-item-title">指挥官</span>
<div class="title2" style="color: #56a178;">ENTJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/entj.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ENTJ-%E4%BA%BA%E6%A0%BC'}">指挥官</a>
</div>
</th:block>
<th:block th:if="${personality == 'entp'}">
<span class="author-content-item-title">辩论家</span>
<div class="title2" style="color: #56a178;">ENTP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/entp.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ENTP-%E4%BA%BA%E6%A0%BC'}">辩论家</a>
</div>
</th:block>
<th:block th:if="${personality == 'enfj'}">
<span class="author-content-item-title">主人公</span>
<div class="title2" style="color: #56a178;">ENFJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/enfj.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ENFJ-%E4%BA%BA%E6%A0%BC'}">主人公</a>
</div>
</th:block>
<th:block th:if="${personality == 'enfp'}">
<span class="author-content-item-title">竞选者</span>
<div class="title2" style="color: #56a178;">ENFP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/enfp.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ENFP-%E4%BA%BA%E6%A0%BC'}">竞选者</a>
</div>
</th:block>
<th:block th:if="${personality == 'estj'}">
<span class="author-content-item-title">总经理</span>
<div class="title2" style="color: #56a178;">ESTJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/estj.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ESTJ-%E4%BA%BA%E6%A0%BC'}">总经理</a>
</div>
</th:block>
<th:block th:if="${personality == 'estp'}">
<span class="author-content-item-title">企业家</span>
<div class="title2" style="color: #56a178;">ESTP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/estp.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ESTP-%E4%BA%BA%E6%A0%BC'}">企业家</a>
</div>
</th:block>
<th:block th:if="${personality == 'esfj'}">
<span class="author-content-item-title">执政官</span>
<div class="title2" style="color: #56a178;">ESFJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/esfj.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ESFJ-%E4%BA%BA%E6%A0%BC'}">执政官</a>
</div>
</th:block>
<th:block th:if="${personality == 'esfp'}">
<span class="author-content-item-title">表演者</span>
<div class="title2" style="color: #56a178;">ESFP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/esfp.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ESFP-%E4%BA%BA%E6%A0%BC'}">表演者</a>
</div>
</th:block>
<th:block th:if="${personality == 'infj'}">
<span class="author-content-item-title">提倡者</span>
<div class="title2" style="color: #56a178;">INFJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/infj.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/INFJ-%E4%BA%BA%E6%A0%BC'}">提倡者</a>
</div>
</th:block>
<th:block th:if="${personality == 'istj'}">
<span class="author-content-item-title">物流师</span>
<div class="title2" style="color: #56a178;">ISTJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/istj.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ISTJ-%E4%BA%BA%E6%A0%BC'}">物流师</a>
</div>
</th:block>
<th:block th:if="${personality == 'istp'}">
<span class="author-content-item-title">鉴赏家</span>
<div class="title2" style="color: #56a178;">ISTP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/istp.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ISTP-%E4%BA%BA%E6%A0%BC'}">鉴赏家</a>
</div>
</th:block>
<th:block th:if="${personality == 'isfj'}">
<span class="author-content-item-title">守卫者</span>
<div class="title2" style="color: #56a178;">ISFJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/isfj.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ISFJ-%E4%BA%BA%E6%A0%BC'}">守卫者</a>
</div>
</th:block>
<th:block th:if="${personality == 'isfp'}">
<span class="author-content-item-title">探险家</span>
<div class="title2" style="color: #56a178;">ISFP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/isfp.svg"
style="transform: rotateY(180deg);"></div>
<div class="post-tips">在 <a href="https://www.16personalities.com/"
rel="noopener nofollow" target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ISFP-%E4%BA%BA%E6%A0%BC'}">探险家</a>
</div>
</th:block>
</div>
<div class="author-content-item myphoto"><img alt="自拍" class="author-content-img"
th:src="${theme.config.about.authorCareersPhoto}">
</div>
</div>
<!-- motto -->
<div class="author-content" th:with="texts = ${theme.config.about.textarea}">
<div class="author-content-item maxim">
<div class="author-content-item-tips" th:text="${texts[0].tittle}">座右铭</div>
<span class="maxim-title">
<span style="opacity: 0.6;margin-bottom:8px;"
th:text="${texts[0].textarea_up}">生活原本沉闷，</span>
<span th:text="${texts[0].textarea_down}">但跑起来就有风。</span>
</span>
</div>
<div class="author-content-item buff">
<div class="card-content">
<div class="author-content-item-tips" th:text="${texts[1].tittle}">特长</div>
<span class="buff-title">
<span style="opacity: 0.6;margin-bottom:8px;"
th:text="${texts[1].textarea_up}">玄学流电脑疑难问题解决
<span class="inline-word">专家</span>
</span>
<span th:text="${texts[1].textarea_down}">软件学习能力</span>
</span>
</div>
</div>
</div>
<div class="author-content">
<div class="author-content-item game-lol"
th:style="'background: url('+ @{${theme.config.about.game.game_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game.game_tips}">
</div><span class="author-content-item-title"
th:text="${theme.config.about.game.game_title}"></span>
<div class="content-bottom">
<div class="icon-group">
<div class="loading-bar" role="presentation" aria-hidden="true"></div>
</div>
<div class="tips" th:text="${theme.config.about.game.game_uid}"></div>
</div>
</div>
</div>
<div class="author-content-item game-wolf"
th:style="'background: url('+ @{${theme.config.about.game2.game2_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game2.game2_tips}">
</div><span class="author-content-item-title"
th:text="${theme.config.about.game2.game2_title}"></span>
<div class="content-bottom">
<div class="tips" th:text="${theme.config.about.game2.game2_uid}"></div>
</div>
</div>
</div>
</div>
<div class="author-content">
<div class="author-content-item like-technology"
th:style="'background: url('+ @{${theme.config.about.like.like_bg}} +') top / cover no-repeat;'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.like.like_tips}">
</div>
<span class="author-content-item-title"
th:text="${theme.config.about.like.like_title}"></span>
<div class="content-bottom">
<div class="tips" th:text="${theme.config.about.like.like_bottom}"></div>
</div>
</div>
</div>
<div class="author-content-item like-music"
th:style="'background: url('+ @{${theme.config.about.music.music_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.music.music_tips}">
</div>
<span class="author-content-item-title"
th:text="${theme.config.about.music.music_title}"></span>
<div class="content-bottom">
<div class="tips">跟 [[${site.title}]] 一起欣赏更多音乐</div>
</div>
<!-- <div class="banner-button-group"><a class="banner-button"
target="_blank"
rel="noopener nofollow">
<i class="heofont icon-arrow-right-circle-fill"></i>
<span class="banner-button-text">更多推荐</span></a>
</div> -->
</div>
</div>
</div>
<div class="author-content">
<div class="about-statistic author-content-item"
style="background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp);">
<div class="card-content">
<div class="author-content-item-tips">数据</div>
<span class="author-content-item-title">访问统计</span>
<div id="statistic"></div>
<div class="post-tips">统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6"
rel="noopener nofollow" target="_blank">51la网站统计</a></div>
<div class="banner-button-group"><a class="banner-button" onclick="pjax.loadUrl('/archives')"
data-pjax-state=""><i
class="anzhiyufont anzhiyu-icon-arrow-circle-right"></i><span
class="banner-button-text">文章隧道</span></a></div>
</div>
</div>
<script>
// 链接替换即可，不需要后面的参数
fetch("https://v6-widget.51.la/v6/[[${theme.config.about.LingQueMonitorID}]]/quote.js")
.then(res => res.text())
.then(data => {
let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
// let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);
num = num.map(el => {
let val = el.replace(/(<\/span><span>)/g, "");
let str = val.replace(/(<\/span><\/p>)/g, "");
return str;
});
let s = document.getElementById("statistic");
// 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
let statistic = [];
for (let i = 0; i < num.length; i++) {
if (i == 0 || i == num.length - 1) continue;
s.innerHTML += "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
}
});
</script>
<div class="author-content-item-group column mapAndInfo">
<div class="author-content-item map single">
<span class="map-title">我现在住在
<b>[[${theme.config.about.map.StrengthenTitle}]]</b></span>
</div>
<div class="author-content-item selfInfo single"
th:if="${not #lists.isEmpty(theme.config.about.map.authorInfo)}"
th:with="texts = ${theme.config.about.map.authorInfo}">
<div><span class="selfInfo-title" th:text="${texts[0].authorInfoTitle}">生于</span><span
class="selfInfo-content" th:style="'color:' + ${texts[0].authorInfoColor}"
th:text="${texts[0].authorInfoContent}">2000</span>
</div>
<div><span class="selfInfo-title"
th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span
class="selfInfo-content" th:style="'color:' + ${texts[1].authorInfoColor}"
th:text="${texts[1].authorInfoContent}">计算机科学</span>
</div>
<div><span class="selfInfo-title" th:text="${texts[2].authorInfoTitle}">现在职业</span><span
class="selfInfo-content" th:style="'color:' + ${texts[2].authorInfoColor}"
th:text="${texts[2].authorInfoContent}">BI工程师</span>
</div>
</div>
<style>
.author-content-item.map {
background: url([[${theme.config.about.map.background}]]) no-repeat center;
min-height: 160px;
max-height: 400px;
position: relative;
overflow: hidden;
margin-bottom: 0.5rem;
height: 60%;
background-size: 100%;
transition: 1s ease-in-out;
}
[data-theme=dark] .author-content-item.map {
background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center;
background-size: 100%;
}
</style>
</div>
</div>
</div> </div>
@ -833,6 +117,9 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 评论模块 --> <!-- 评论模块 -->

18
templates/modules/about-widgets.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 关于小组件 -->
<th:block th:fragment="about-widgets(widgets)"
th:if="${ not #strings.isEmpty(widgets)}">
<th:block>
<th:block th:each="widget : ${#strings.listSplit(widgets, ',')}">
<th:block >
<th:block th:replace="~{'modules/widgets/about-widgets/'+ ${widget}}"/>
</th:block>
</th:block>
</th:block>
</th:block>
</html>

320
templates/modules/widgets/about-widgets/authorCareers.html Normal file
View File

@ -0,0 +1,320 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 技能&职业生涯 -->
<div class="author-content" th:fragment="authorCareers">
<div class="author-content-item skills">
<div class="card-content">
<div class="author-content-item-tips">技能</div>
<span class="author-content-item-title">开启创造力</span>
<div class="skills-style-group">
<div class="tags-group-all">
<div class="tags-group-wrapper">
<div class="tags-group-all">
<!-- 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">
</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>
<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>
</div>
<!-- banners 使用默认值-->
<div class="tags-group-wrapper"
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>
</th:block>
</div>
</div>
</div>
</div>
<!-- banners 使用默认值-->
<div class="skills-list"
th:if="${#strings.equals(theme.config.top.bannersBackground, 'default')}"
th:with="techs = ${theme.config.about.techStack}">
<div class="skill-info">
<div class="skill-icon" style="background:#989bf8">
<img th:src="@{/assets/images/icons/AfterEffect.png}"
title="AfterEffect">
</div>
<div class="skill-name"><span>AfterEffect</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#ffffff">
<img th:src="@{/assets/images/icons/Sketch.png}" title="Sketch">
</div>
<div class="skill-name"><span>Sketch</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#57b6e6">
<img th:src="@{/assets/images/icons/Docker.png}" title="Docker">
</div>
<div class="skill-name"><span>Docker</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#4082c3">
<img th:src="@{/assets/images/icons/Photoshop.png}" title="Photoshop">
</div>
<div class="skill-name"><span>Photoshop</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#ffffff">
<img th:src="@{/assets/images/icons/FinalCutPro.png}"
title="FinalCutPro">
</div>
<div class="skill-name"><span>FinalCutPro</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#ffffff">
<img th:src="@{/assets/images/icons/Python.png}" title="Python">
</div>
<div class="skill-name"><span>Python</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#eb6840">
<img th:src="@{/assets/images/icons/Swift.png}" title="Swift">
</div>
<div class="skill-name"><span>Swift</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#8f55ba">
<img th:src="@{/assets/images/icons/Principle.png}" title="Principle">
</div>
<div class="skill-name"><span>Principle</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#f29e39">
<img th:src="@{/assets/images/icons/illustrator.png}"
title="illustrator">
</div>
<div class="skill-name"><span>illustrator</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#2c51db">
<img th:src="@{/assets/images/icons/CSS3.png}" title="CSS3">
</div>
<div class="skill-name"><span>CSS3</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#f7cb4f">
<img th:src="@{/assets/images/icons/JS.png}" title="JS">
</div>
<div class="skill-name"><span>JS</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#e9572b">
<img th:src="@{/assets/images/icons/HTML.png}" title="HTML">
</div>
<div class="skill-name"><span>HTML</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#df5b40">
<img th:src="@{/assets/images/icons/Git.webp}" title="Git">
</div>
<div class="skill-name"><span>Git</span></div>
</div>
<div class="skill-info">
<div class="skill-icon" style="background:#1f1f1f">
<img th:src="@{/assets/images/icons/Apifox.webp}" title="Apifox">
</div>
<div class="skill-name"><span>Apifox</span></div>
</div>
<div class="etc">...</div>
</div>
<div class="skills-list"
th:if="${#strings.equals(theme.config.top.bannersBackground, 'techStack')}"
th:with="techs = ${theme.config.about.techStack}">
<th:block th:each="tech : ${techs}">
<div class="skill-info">
<div class="skill-icon" th:style="'background:' + ${tech.background}">
<img th:src="@{${tech.url}}" th:title="${tech.name}">
</div>
<div class="skill-name"><span th:title="${tech.name}"></span></div>
</div>
</th:block>
</div>
</div>
</div>
</div>
<div class="author-content-item careers">
<div class="card-content">
<div class="author-content-item-tips">生涯</div>
<span class="author-content-item-title"
th:text="${theme.config.about.authorCareers.authorCareersTitle}">无限进步</span>
<div class="careers-group"
th:if="${not #lists.isEmpty(theme.config.about.authorCareers.authorCareersTags)}"
th:with="careersTags = ${theme.config.about.authorCareers.authorCareersTags}">
<div class="careers-item" th:each="tag : ${careersTags}">
<div class="circle" th:style="'background:' + ${tag.background}"></div>
<div class="name" th:text="${tag.desc}"></div>
</div>
</div>
<img alt="生涯" class="author-content-img"
th:src="@{${#strings.isEmpty(theme.config.about.authorCareers.authorCareersBackground) ? '/assets/images/hao-logo.jpg' : theme.config.about.authorCareers.authorCareersBackground}}">
</div>
</div>
</div>
</html>

28
templates/modules/widgets/about-widgets/content-idea.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 我的介绍&我的想法 -->
<div class="author-content" th:fragment="content-idea">
<div class="author-content-item myInfoAndSayHello" th:utext="${theme.config.about.content}">
</div>
<div class="aboutsiteTips author-content-item" th:utext="${theme.config.about.idea}"></div>
<script>
var pursuitInterval = null;
pursuitInterval = setInterval(function () {
const show = document.querySelector('span[data-show]')
const next = show.nextElementSibling || document.querySelector('.first-tips')
const up = document.querySelector('span[data-up]')
if (up) {
up.removeAttribute('data-up')
}
show.removeAttribute('data-show')
show.setAttribute('data-up', '')
next.setAttribute('data-show', '')
}, 2000)
document.addEventListener('pjax:send', function () {
clearInterval(pursuitInterval);
});
</script>
</div>
</html>

34
templates/modules/widgets/about-widgets/game.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 爱好 -->
<div class="author-content" th:fragment="game">
<div class="author-content-item game-lol"
th:style="'background: url('+ @{${theme.config.about.game.game_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game.game_tips}">
</div><span class="author-content-item-title"
th:text="${theme.config.about.game.game_title}"></span>
<div class="content-bottom">
<div class="icon-group">
<div class="loading-bar" role="presentation" aria-hidden="true"></div>
</div>
<div class="tips" th:text="${theme.config.about.game.game_uid}"></div>
</div>
</div>
</div>
<div class="author-content-item game-wolf"
th:style="'background: url('+ @{${theme.config.about.game2.game2_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game2.game2_tips}">
</div><span class="author-content-item-title"
th:text="${theme.config.about.game2.game2_title}"></span>
<div class="content-bottom">
<div class="tips" th:text="${theme.config.about.game2.game2_uid}"></div>
</div>
</div>
</div>
</div>
</html>

150
templates/modules/widgets/about-widgets/hello-about.html Normal file
View File

@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 我的介绍&我的想法 -->
<div class="hello-about" th:fragment="hello-about">
<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>
<div class="shape shape-2"
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>
</div>
<div class="content">
<h1>[[${theme.config.about.helloAbout}]]</h1>
</div>
<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;
border-radius: 24px;
background: var(--heo-card-bg);
border: var(--style-border-always);
box-shadow: var(--heo-shadow-border);
position: relative;
overflow: hidden;
user-select: none;
}
.shapes {
position: relative;
height: 315px;
width: 100%;
background: #2128bd;
overflow: hidden;
}
.shape {
will-change: transform;
position: absolute;
border-radius: 50%;
}
.shape.shape-1 {
background: #005ffe;
width: 650px;
height: 650px;
margin: -325px 0 0 -325px;
}
.shape.shape-2 {
background: #ffe5e3;
width: 440px;
height: 440px;
margin: -220px 0 0 -220px;
}
.shape.shape-3 {
background: #ffcc57;
width: 270px;
height: 270px;
margin: -135px 0 0 -135px;
}
.hello-about .content {
top: 0;
left: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 315px;
width: 100%;
background: #fff;
mix-blend-mode: screen;
}
[data-theme="dark"] .hello-about .content {
background: transparent;
}
[data-theme="dark"] .hello-about h1 {
color: var(--heo-white);
}
.hello-about h1 {
font-size: 200px;
color: #000;
margin: 0;
text-align: center;
font: inherit;
vertical-align: baseline;
line-height: 1;
font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 419px) {
.hello-about h1 {
font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
}
}
.cursor {
position: absolute;
background: #2128bd;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
will-change: transform;
user-select: none;
pointer-events: none;
z-index: 3;
}
::selection {
color: #fff;
background: #2128bd;
}
</style>
<script>(() => {
var helloAboutEl = document.querySelector(".hello-about");
helloAboutEl.addEventListener("mousemove", evt => {
const mouseX = evt.offsetX;
const mouseY = evt.offsetY;
gsap.set(".cursor", {
x: mouseX,
y: mouseY,
});
gsap.to(".shape", {
x: mouseX,
y: mouseY,
stagger: -0.1,
});
});
})();
</script>
</div>
</html>

42
templates/modules/widgets/about-widgets/like-music.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 关注偏好&音乐偏好 -->
<div class="author-content" th:fragment="like-music">
<div class="author-content-item like-technology"
th:style="'background: url('+ @{${theme.config.about.like.like_bg}} +') top / cover no-repeat;'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.like.like_tips}">
</div>
<span class="author-content-item-title"
th:text="${theme.config.about.like.like_title}"></span>
<div class="content-bottom">
<div class="tips" th:text="${theme.config.about.like.like_bottom}"></div>
</div>
</div>
</div>
<div class="author-content-item like-music"
th:style="'background: url('+ @{${theme.config.about.music.music_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.music.music_tips}">
</div>
<span class="author-content-item-title"
th:text="${theme.config.about.music.music_title}"></span>
<div class="content-bottom">
<div class="tips">跟 [[${site.title}]] 一起欣赏更多音乐</div>
</div>
<!-- <div class="banner-button-group"><a class="banner-button"
onclick="pjax.loadUrl('/music')"
target="_blank"
rel="noopener nofollow">
<i class="anzhiyufont anzhiyu-icon-arrow-circle-right"></i>
<span class="banner-button-text">更多推荐</span></a>
</div> -->
</div>
</div>
</div>
</html>

208
templates/modules/widgets/about-widgets/personalities-photo.html Normal file
View File

@ -0,0 +1,208 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 性格&图片 -->
<!-- personalities -->
<div class="author-content" th:fragment="personalities-photo">
<div class="author-content-item personalities" th:with="personality = ${theme.config.about.personalities}">
<div class="author-content-item-tips">性格</div>
<th:block th:if="${personality == 'infp'}">
<span class="author-content-item-title">调停者</span>
<div class="title2" style="color: #56a178;">INFP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/infp.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/INFP-%E4%BA%BA%E6%A0%BC'}">调停者</a>
</div>
</th:block>
<th:block th:if="${personality == 'intj'}">
<span class="author-content-item-title">建筑师</span>
<div class="title2" style="color: #56a178;">INTJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/intj.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/INTJ-%E4%BA%BA%E6%A0%BC'}">建筑师</a>
</div>
</th:block>
<th:block th:if="${personality == 'intp'}">
<span class="author-content-item-title">逻辑学家</span>
<div class="title2" style="color: #56a178;">INTP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/intp.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/INTP-%E4%BA%BA%E6%A0%BC'}">逻辑学家</a>
</div>
</th:block>
<th:block th:if="${personality == 'entj'}">
<span class="author-content-item-title">指挥官</span>
<div class="title2" style="color: #56a178;">ENTJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/entj.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ENTJ-%E4%BA%BA%E6%A0%BC'}">指挥官</a>
</div>
</th:block>
<th:block th:if="${personality == 'entp'}">
<span class="author-content-item-title">辩论家</span>
<div class="title2" style="color: #56a178;">ENTP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/entp.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ENTP-%E4%BA%BA%E6%A0%BC'}">辩论家</a>
</div>
</th:block>
<th:block th:if="${personality == 'enfj'}">
<span class="author-content-item-title">主人公</span>
<div class="title2" style="color: #56a178;">ENFJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/enfj.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ENFJ-%E4%BA%BA%E6%A0%BC'}">主人公</a>
</div>
</th:block>
<th:block th:if="${personality == 'enfp'}">
<span class="author-content-item-title">竞选者</span>
<div class="title2" style="color: #56a178;">ENFP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/enfp.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ENFP-%E4%BA%BA%E6%A0%BC'}">竞选者</a>
</div>
</th:block>
<th:block th:if="${personality == 'estj'}">
<span class="author-content-item-title">总经理</span>
<div class="title2" style="color: #56a178;">ESTJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/estj.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ESTJ-%E4%BA%BA%E6%A0%BC'}">总经理</a>
</div>
</th:block>
<th:block th:if="${personality == 'estp'}">
<span class="author-content-item-title">企业家</span>
<div class="title2" style="color: #56a178;">ESTP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/estp.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ESTP-%E4%BA%BA%E6%A0%BC'}">企业家</a>
</div>
</th:block>
<th:block th:if="${personality == 'esfj'}">
<span class="author-content-item-title">执政官</span>
<div class="title2" style="color: #56a178;">ESFJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/esfj.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ESFJ-%E4%BA%BA%E6%A0%BC'}">执政官</a>
</div>
</th:block>
<th:block th:if="${personality == 'esfp'}">
<span class="author-content-item-title">表演者</span>
<div class="title2" style="color: #56a178;">ESFP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/esfp.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ESFP-%E4%BA%BA%E6%A0%BC'}">表演者</a>
</div>
</th:block>
<th:block th:if="${personality == 'infj'}">
<span class="author-content-item-title">提倡者</span>
<div class="title2" style="color: #56a178;">INFJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/infj.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/INFJ-%E4%BA%BA%E6%A0%BC'}">提倡者</a>
</div>
</th:block>
<th:block th:if="${personality == 'istj'}">
<span class="author-content-item-title">物流师</span>
<div class="title2" style="color: #56a178;">ISTJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/istj.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ISTJ-%E4%BA%BA%E6%A0%BC'}">物流师</a>
</div>
</th:block>
<th:block th:if="${personality == 'istp'}">
<span class="author-content-item-title">鉴赏家</span>
<div class="title2" style="color: #56a178;">ISTP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/istp.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ISTP-%E4%BA%BA%E6%A0%BC'}">鉴赏家</a>
</div>
</th:block>
<th:block th:if="${personality == 'isfj'}">
<span class="author-content-item-title">守卫者</span>
<div class="title2" style="color: #56a178;">ISFJ</div>
<div class="image"><img src="/themes/theme-hao/assets/images/isfj.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ISFJ-%E4%BA%BA%E6%A0%BC'}">守卫者</a>
</div>
</th:block>
<th:block th:if="${personality == 'isfp'}">
<span class="author-content-item-title">探险家</span>
<div class="title2" style="color: #56a178;">ISFP</div>
<div class="image"><img src="/themes/theme-hao/assets/images/isfp.svg" style="transform: rotateY(180deg);">
</div>
<div class="post-tips">在 <a href="https://www.16personalities.com/" rel="noopener nofollow"
target="_blank">16personalities</a>
了解更多关于 <a rel="noopener external nofollow" target="_blank"
th:href="@{'https://www.16personalities.com/ch/ISFP-%E4%BA%BA%E6%A0%BC'}">探险家</a>
</div>
</th:block>
</div>
<div class="author-content-item myphoto"><img alt="自拍" class="author-content-img"
th:src="${theme.config.about.authorCareersPhoto}">
</div>
</div>
</html>

133
templates/modules/widgets/about-widgets/statistics-map.html Normal file
View File

@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 数据统计&音乐偏好 -->
<div class="author-content" th:fragment="statistics-map">
<div class="about-statistic author-content-item"
style="background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp);">
<div class="card-content">
<div class="author-content-item-tips">数据</div>
<span class="author-content-item-title">访问统计</span>
<div id="statistic"></div>
<div class="post-tips">统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6" rel="noopener nofollow"
target="_blank">51la网站统计</a></div>
<div class="banner-button-group"><a class="banner-button" onclick="pjax.loadUrl('/archives')"
data-pjax-state=""><i class="anzhiyufont anzhiyu-icon-arrow-circle-right"></i><span
class="banner-button-text">文章隧道</span></a></div>
</div>
</div>
<div class="author-content-item-group column mapAndInfo">
<div class="author-content-item map single">
<span class="map-title">我现在住在
<b>[[${theme.config.about.map.StrengthenTitle}]]</b></span>
</div>
<div class="author-content-item selfInfo single"
th:if="${not #lists.isEmpty(theme.config.about.map.authorInfo)}"
th:with="texts = ${theme.config.about.map.authorInfo}">
<div th:if="${theme.config.about.map.authorInfo.size()}>'0'"><span class="selfInfo-title" th:text="${texts[0].authorInfoTitle}">生于</span><span
class="selfInfo-content" id="selfInfo-content-year"
th:style="'color:' + ${texts[0].authorInfoColor}"
th:text="${texts[0].authorInfoContent}">2000</span>
</div>
<div th:if="${theme.config.about.map.authorInfo.size()}>'1'"><span class="selfInfo-title" th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span
class="selfInfo-content" th:style="'color:' + ${texts[1].authorInfoColor}"
th:text="${texts[1].authorInfoContent}">计算机科学</span>
</div>
<div th:if="${theme.config.about.map.authorInfo.size()}>'2'"><span class="selfInfo-title" th:text="${texts[2].authorInfoTitle}">现在职业</span><span
class="selfInfo-content" th:style="'color:' + ${texts[2].authorInfoColor}"
th:text="${texts[2].authorInfoContent}">BI工程师</span>
</div>
</div>
<style>
.author-content-item.map {
background: url([[${theme.config.about.map.background}]]) no-repeat center;
min-height: 160px;
max-height: 400px;
position: relative;
overflow: hidden;
margin-bottom: 0.5rem;
height: 60%;
background-size: 100%;
transition: 1s ease-in-out;
}
[data-theme=dark] .author-content-item.map {
background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center;
background-size: 100%;
}
</style>
</div>
<script th:src="@{/assets/libs/countup/countup.js}"></script>
<script>
// 链接替换即可，不需要后面的参数
fetch("https://v6-widget.51.la/v6/[[${theme.config.about.LingQueMonitorID}]]/quote.js")
.then(res => res.text())
.then(data => {
let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
// let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);
num = num.map(el => {
let val = el.replace(/(<\/span><span>)/g, "");
let str = val.replace(/(<\/span><\/p>)/g, "");
return str;
});
let statisticEl = document.getElementById("statistic");
// 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
let statistic = [];
for (let i = 0; i < num.length; i++) {
if (!statisticEl) return;
if (i == 0) continue;
statisticEl.innerHTML +=
"<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
queueMicrotask(() => {
statistic.push(
new CountUp(title[i], 0, num[i], 0, 2, {
useEasing: true,
useGrouping: true,
separator: ",",
decimal: ".",
prefix: "",
suffix: "",
})
);
});
}
let statisticElement = document.querySelector(".about-statistic.author-content-item");
function statisticUP() {
if (!statisticElement) return;
const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
for (let i = 0; i < num.length; i++) {
if (i == 0) continue;
queueMicrotask(() => {
statistic[i - 1].start();
});
}
observer.disconnect(); // 停止观察元素，因为不再需要触发此回调
}
});
};
const options = {
root: null,
rootMargin: "0px",
threshold: 0
};
const observer = new IntersectionObserver(callback, options);
observer.observe(statisticElement);
}
statisticUP()
});
</script>
</div>
</html>

29
templates/modules/widgets/about-widgets/textarea.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 座右铭 -->
<!-- motto -->
<div class="author-content" th:fragment="textarea" th:if="${theme.config.about.textarea.size()}=='2'" th:with="texts = ${theme.config.about.textarea}">
<div class="author-content-item maxim">
<div class="author-content-item-tips" th:text="${texts[0].tittle}">座右铭</div>
<span class="maxim-title">
<span style="opacity: 0.6;margin-bottom:8px;"
th:text="${texts[0].textarea_up}">生活原本沉闷，</span>
<span th:text="${texts[0].textarea_down}">但跑起来就有风。</span>
</span>
</div>
<div class="author-content-item buff">
<div class="card-content">
<div class="author-content-item-tips" th:text="${texts[1].tittle}">特长</div>
<span class="buff-title">
<span style="opacity: 0.6;margin-bottom:8px;"
th:text="${texts[1].textarea_up}">玄学流电脑疑难问题解决
<span class="inline-word">专家</span>
</span>
<span th:text="${texts[1].textarea_down}">软件学习能力</span>
</span>
</div>
</div>
</div>
</html>