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

Compare commits

base: UPToZ:371b6052680e3668a5dfcc50723aadde611b0aa0
Branches Tags
UPToZ:main
UPToZ:dev
UPToZ:v1.0.2
UPToZ:v1.0.1
UPToZ:v1.0.0
..
compare: UPToZ:66417cb5118bd78e3c8435bc60252c4204945678
Branches Tags
UPToZ:dev
UPToZ:main
UPToZ:v1.0.2
UPToZ:v1.0.1
UPToZ:v1.0.0

3 Commits
371b605268 ... 66417cb511

Author SHA1 Message Date
UPToZ
66417cb511 适配链接管理插件1.4.0版本 
detailed：
1.适配链接管理插件1.4.0版本，解决前台索引查询链接报错问题。
2.当爱发电接口超时未返回内容时，显示默认数据。
 2024-06-17 09:38:08 +08:00
UPToZ
236e0d6547 修复关于页面中赞赏名单在移动端下头像错位的问题 2024-06-01 14:49:11 +08:00
UPToZ
45e93608ab 修改侧栏爱发电图片样式和文章页面标题最大长度限制 2024-05-29 17:34:04 +08:00
6 changed files with 319 additions and 291 deletions
Show Stats Expand all files Collapse all files

20
templates/assets/js/halo.js
View File

@ -379,10 +379,24 @@ let halo = {
function getPower() { function getPower() {
const url = GLOBAL_CONFIG.source.power.url; const url = GLOBAL_CONFIG.source.power.url;
let powerStar = document.getElementById("power-star")
powerStar.href = GLOBAL_CONFIG.source.power.powerLink
fetch(url) fetch(url)
.then(res => res.json()) .then(response => {
// 检查响应状态码
if (!response.ok) {
// 如果响应状态码不是 200，抛出一个错误
powerStar.innerHTML = `
<div id="power-star-image" style="background-image: url('/themes/theme-hao/assets/images/afadian/afadian.webp')">
</div>
<div class="power-star-body">
<div id="power-star-title">还没有人赞助～</div>
<div id="power-star-desc">为爱发电，点击赞助</div>
</div>`;
}
return response.json(); // 只有在状态码为 200 时才解析 JSON
})
.then(data => { .then(data => {
console.log(data)
if (200 === data["ec"]) { if (200 === data["ec"]) {
const values = data["data"]["list"]; const values = data["data"]["list"];
saveToLocal.set('power-data', JSON.stringify(values), 10 / (60 * 24)) saveToLocal.set('power-data', JSON.stringify(values), 10 / (60 * 24))
@ -390,8 +404,6 @@ let halo = {
} }
}) })
.catch(error => { .catch(error => {
let powerStar = document.getElementById("power-star")
powerStar.href = GLOBAL_CONFIG.source.power.powerLink
powerStar.innerHTML = ` powerStar.innerHTML = `
<div id="power-star-image" style="background-image: url('/themes/theme-hao/assets/images/afadian/afadian.webp')"> <div id="power-star-image" style="background-image: url('/themes/theme-hao/assets/images/afadian/afadian.webp')">
</div> </div>

2
templates/assets/js/heo.js
View File

@ -115,7 +115,7 @@ var heo = {
function getLinks() { function getLinks() {
const fetchUrl = const fetchUrl =
"/apis/api.plugin.halo.run/v1alpha1/plugins/PluginLinks/links?keyword=&sort=priority,asc" "/apis/api.plugin.halo.run/v1alpha1/plugins/PluginLinks/links?keyword="
fetch(fetchUrl) fetch(fetchUrl)
.then(res => res.json()) .then(res => res.json())
.then(json => { .then(json => {

57
templates/assets/zhheo/zhheoblog.css
View File

@ -7477,7 +7477,7 @@ span.fund_name {
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
background-size: cover; background-size: cover;
margin-right: 12px; /* margin-right: 12px; */
border: var(--style-border-always); border: var(--style-border-always);
transition: .3s ease-out transition: .3s ease-out
} }
@ -7533,7 +7533,8 @@ div#power-star-title {
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
width: calc(100% - 68px); width: calc(100% - 68px);
justify-content: center justify-content: center;
padding-left: 12px;
} }
/* 商务广告-设计周刊 */ /* 商务广告-设计周刊 */
@ -10015,7 +10016,7 @@ span.recent-post-top-text {
} }
/* 作者打招呼 */ /* 作者打招呼 */
div#author-info__sayhi { /* div#author-info__sayhi {
text-align: left; text-align: left;
color: var(--heo-white); color: var(--heo-white);
background: var(--heo-white-op); background: var(--heo-white-op);
@ -10027,7 +10028,7 @@ div#author-info__sayhi {
cursor: pointer; cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
transition: 0.3s; transition: 0.3s;
} } */
div#author-info__sayhi:hover { div#author-info__sayhi:hover {
background: var(--heo-white-op); background: var(--heo-white-op);
@ -10439,7 +10440,7 @@ a.extend.prev {
} }
#post-info .post-title { #post-info .post-title {
width: 1100px; width: 1200px;
font-size: 2.6rem !important; font-size: 2.6rem !important;
} }
} }
@ -16336,7 +16337,7 @@ span.hexo-douban-pagenum {
padding: 1rem; padding: 1rem;
border-radius: 12px; border-radius: 12px;
border: var(--style-border-always); border: var(--style-border-always);
width: calc((100% / 6) - 0.5rem); width: calc((100% / 4) - 0.5rem);
margin: 0rem 0.25rem 0.5rem 0.25rem; margin: 0rem 0.25rem 0.5rem 0.25rem;
box-shadow: var(--heo-shadow-border); box-shadow: var(--heo-shadow-border);
} }
@ -16348,11 +16349,12 @@ span.hexo-douban-pagenum {
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.author-content-item.single.reward .reward-list-all .reward-list-item { .author-content-item.single.reward .reward-list-all .reward-list-item {
width: calc((100% / 4) - 0.5rem); width: calc((100% / 3) - 0.5rem);
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 32%; /* display: none; */
/* width: 32%; */
} }
} }
@ -16361,19 +16363,19 @@ span.hexo-douban-pagenum {
width: calc((100% / 2) - 0.5rem); width: calc((100% / 2) - 0.5rem);
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { /* .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 20%; width: 20%;
} } */
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.author-content-item.single.reward .reward-list-all .reward-list-item { .author-content-item.single.reward .reward-list-all .reward-list-item {
width: 100%; width: calc((100% / 2) - 0.5rem);
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { /* .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 9%; width: 9%;
} } */
} }
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
@ -16381,9 +16383,9 @@ span.hexo-douban-pagenum {
width: 100%; width: 100%;
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { /* .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 20%; width: 20%;
} } */
} }
.author-content-item.single.reward .author-content-item-description { .author-content-item.single.reward .author-content-item-description {
@ -16406,19 +16408,34 @@ span.hexo-douban-pagenum {
width: 100%; width: 100%;
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-container {
display: flex;
justify-content: flex-start;
justify-content: space-between;
height: auto;
}
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-container .reward-list-item-content {
flex: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 15px;
}
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 32%; width: 80px;
float: left; float: left;
z-index: 10; z-index: 10;
position: static; position: static;
height: 40px; height: 80px;
transform: translateY(-40%); /* transform: translateY(-40%); */
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar img { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar img {
border-radius: 50%; border-radius: 50%;
width: 80%; width: 80px;
margin-top: 0.2rem; /* margin-top: 0.4rem; */
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar-group { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar-group {

160
templates/modules/widgets/about-widgets/about-reward.html
View File

@ -1,84 +1,90 @@
<div class="author-content" th:if="${theme.config.aboutReward.aboutRewardEnable}" <div class="author-content" th:if="${theme.config.aboutReward.aboutRewardEnable}"
xmlns:th="http://www.w3.org/1999/xhtml"> xmlns:th="http://www.w3.org/1999/xhtml">
<div class="author-content-item single reward" id="about-reward"> <div class="author-content-item single reward" id="about-reward">
<div class="author-content-item-tips">致谢</div> <div class="author-content-item-tips">致谢</div>
<span class="author-content-item-title">[[${theme.config.aboutReward.title}]]</span> <span class="author-content-item-title">[[${theme.config.aboutReward.title}]]</span>
<div class="author-content-item-description"> <div class="author-content-item-description">
[[${theme.config.aboutReward.content}]] [[${theme.config.aboutReward.content}]]
</div> </div>
<div th:if="${theme.config.aboutReward.reward.enable_reward}" class="about-reward"> <div th:if="${theme.config.aboutReward.reward.enable_reward}" class="about-reward">
<div id="con"></div> <div id="con"></div>
<div id="TA-con" onclick="heo.rewardShowConsole()"> <div id="TA-con" onclick="heo.rewardShowConsole()">
<div id="text-con"> <div id="text-con">
<div id="linght"></div> <div id="linght"></div>
<div id="TA">[[${theme.config.aboutReward.reward.name}]]</div> <div id="TA">[[${theme.config.aboutReward.reward.name}]]</div>
</div> </div>
</div> </div>
<div id="tube-con"> <div id="tube-con">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path> <path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path> <path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path> <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path> <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#e5e9ef"></rect> <rect y="186" width="236" height="24" fill="#e5e9ef"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse> <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse> <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg> </svg>
<div id="mask"> <div id="mask">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20"></path> <path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20"></path>
<path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20"></path> <path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path> <path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20"></path> <path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#f25d8e"></rect> <rect y="186" width="236" height="24" fill="#f25d8e"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse> <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse> <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg> </svg>
</div> </div>
<div id="orange-mask"> <div id="orange-mask">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20"></path> <path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20"></path>
<path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20"></path> <path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path> <path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20"></path> <path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#ffd52b"></rect> <rect y="186" width="236" height="24" fill="#ffd52b"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse> <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse> <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg> </svg>
</div> </div>
<p id="people">共<b>[[${theme.config.aboutReward.reward_list.size()}]]</b>人</p> <p id="people">共<b>[[${theme.config.aboutReward.reward_list.size()}]]</b>人</p>
</div> </div>
</div> </div>
<div class="reward-list-all" th:if="${not #lists.isEmpty(theme.config.aboutReward.reward_list)}" <div class="reward-list-all" th:if="${not #lists.isEmpty(theme.config.aboutReward.reward_list)}"
th:with="authorRewardList = ${theme.config.aboutReward.reward_list}"> th:with="authorRewardList = ${theme.config.aboutReward.reward_list}">
<div class="reward-list-item" th:each="authorReward : ${authorRewardList}"> <div class="reward-list-item" th:each="authorReward : ${authorRewardList}">
<div th:if="${not #strings.isEmpty(authorReward.avatar)}"> <div th:if="${not #strings.isEmpty(authorReward.avatar)}">
<div> <div class="reward-list-item-container">
<div class="reward-list-item-avatar"> <!-- 头像 -->
<img th:src="${authorReward.avatar}" th:alt="${authorReward.name}"> <div class="reward-list-item-avatar">
</div> <img th:src="${authorReward.avatar}" th:alt="${authorReward.name}">
<div style="z-index:20;float: left;" class="reward-list-item-avatar-group"> </div>
<div class="reward-list-item-name">[[${authorReward.name}]]</div> <div class="reward-list-item-content">
</div> <!-- 名称 -->
</div> <div style="z-index:20;float: left;" class="reward-list-item-avatar-group">
<div class="reward-list-bottom-group"> <div class="reward-list-item-name">[[${authorReward.name}]]</div>
<div th:if="${#conversions.convert(authorReward.amount, 'java.math.BigDecimal') < #conversions.convert(theme.config.aboutReward.rewardNumber, 'java.math.BigDecimal')}" class="reward-list-item-money">¥ </div>
[[${authorReward.amount}]] <!-- 金额及时间 -->
</div> <div class="reward-list-bottom-group">
<div th:if="${#conversions.convert(authorReward.amount, 'java.math.BigDecimal') >= #conversions.convert(theme.config.aboutReward.rewardNumber, 'java.math.BigDecimal')}" class="reward-list-item-money" <div th:if="${#conversions.convert(authorReward.amount, 'java.math.BigDecimal') < #conversions.convert(theme.config.aboutReward.rewardNumber, 'java.math.BigDecimal')}" class="reward-list-item-money">¥
style="background: var(--heo-vip);">¥ [[${authorReward.amount}]] [[${authorReward.amount}]]
</div> </div>
<time class="datatime reward-list-item-time">[[${authorReward.datatime}]]</time> <div th:if="${#conversions.convert(authorReward.amount, 'java.math.BigDecimal') >= #conversions.convert(theme.config.aboutReward.rewardNumber, 'java.math.BigDecimal')}" class="reward-list-item-money"
</div> style="background: var(--heo-vip);">¥ [[${authorReward.amount}]]
</div>
<time class="datatime reward-list-item-time">[[${authorReward.datatime}]]</time>
</div>
</div>
</div>
</div> </div>
<div th:if="${#strings.isEmpty(authorReward.avatar)}"> <div th:if="${#strings.isEmpty(authorReward.avatar)}">
<div class="reward-list-item-name">[[${authorReward.name}]]</div> <div class="reward-list-item-name">[[${authorReward.name}]]</div>
<div class="reward-list-bottom-group"> <div class="reward-list-bottom-group">

325
templates/modules/widgets/about-widgets/statistics-map.html
View File

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

2
theme.yaml
View File

@ -51,5 +51,5 @@ spec:
repo: https://gitea.uptoz.cn/UPToZ/halo-theme-hao repo: https://gitea.uptoz.cn/UPToZ/halo-theme-hao
settingName: "theme-hao-setting" settingName: "theme-hao-setting"
configMapName: "theme-hao-configMap" configMapName: "theme-hao-configMap"
version: "1.0.1-ce" version: "1.0.2-ce"
require: ">=2.10.0" require: ">=2.10.0"