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

修改侧栏爱发电图片样式和文章页面标题最大长度限制

Browse Source
This commit is contained in:
UPToZ 2024-05-29 17:34:04 +08:00
parent 371b605268
commit 45e93608ab
2 changed files with 184 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

363
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" th:text="${texts[0].authorInfoTitle}">生于</span><span
<span class="selfInfo-title" class="selfInfo-content" id="selfInfo-content-year"
th:text="${texts[0].authorInfoTitle}">生于</span><span th:style="'color:' + ${texts[0].authorInfoColor}"
class="selfInfo-content" th:text="${texts[0].authorInfoContent}">2000</span>
id="selfInfo-content-year" th:style="'color:' + ${texts[0].authorInfoColor}" </div>
th:text="${texts[0].authorInfoContent}">2000</span> <div th:if="${theme.config.about.map.authorInfo.size()}>'1'">
</div> <span class="selfInfo-title" th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span
<div th:if="${theme.config.about.map.authorInfo.size()}>'1'"> class="selfInfo-content" th:style="'color:' + ${texts[1].authorInfoColor}"
<span class="selfInfo-title" th:text="${texts[1].authorInfoContent}">计算机科学</span>
th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span </div>
class="selfInfo-content" <div th:if="${theme.config.about.map.authorInfo.size()}>'2'">
th:style="'color:' + ${texts[1].authorInfoColor}" <span class="selfInfo-title" th:text="${texts[2].authorInfoTitle}">现在职业</span><span
th:text="${texts[1].authorInfoContent}">计算机科学</span> class="selfInfo-content" th:style="'color:' + ${texts[2].authorInfoColor}"
</div> th:text="${texts[2].authorInfoContent}">BI工程师</span>
<div th:if="${theme.config.about.map.authorInfo.size()}>'2'"> </div>
<span class="selfInfo-title" </div>
th:text="${texts[2].authorInfoTitle}">现在职业</span><span </div>
class="selfInfo-content" <style>
th:style="'color:' + ${texts[2].authorInfoColor}" .author-content-item.map {
th:text="${texts[2].authorInfoContent}">BI工程师</span> background: url([[${theme.config.about.map.background}]]) no-repeat center;
</div> min-height: 160px;
</div> max-height: 400px;
</div> position: relative;
<style> overflow: hidden;
.author-content-item.map { margin-bottom: 0.5rem;
background: url([[${theme.config.about.map.background}]]) no-repeat center; height: 60%;
min-height: 160px; background-size: 100%;
max-height: 400px; transition: 1s ease-in-out;
position: relative; }
overflow: hidden;
margin-bottom: 0.5rem; [data-theme=dark] .author-content-item.map {
height: 60%; background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center;
background-size: 100%; background-size: 100%;
transition: 1s ease-in-out; }
}
.author-content-item.map:hover {
[data-theme=dark] .author-content-item.map { background-size: 120%;
background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center; transition: 4s ease-in-out;
background-size: 100%; background-position-x: 0;
} background-position-y: 36%;
}
.author-content-item.map:hover {
background-size: 120%; .author-content-item.map .map-title {
transition: 4s ease-in-out; position: absolute;
background-position-x: 0; bottom: 0px;
background-position-y: 36%; left: 0px;
} width: 100%;
background: var(--heo-maskbg);
.author-content-item.map .map-title { padding: 0.5rem 2rem;
position: absolute; backdrop-filter: saturate(180%) blur(20px);
bottom: 0px; -webkit-backdrop-filter: blur(20px);
left: 0px; transition: 1s ease-in-out;
width: 100%; font-size: 20px;
background: var(--heo-maskbg); border-radius: 0 0 1rem 1rem;
padding: 0.5rem 2rem; }
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px); .author-content-item.map:hover .map-title {
transition: 1s ease-in-out; bottom: -100%;
font-size: 20px; border-radius: 0 0 1rem 1rem;
border-radius: 0 0 1rem 1rem; }
}
.author-content-item.map .map-title b {
.author-content-item.map:hover .map-title { color: var(--heo-fontcolor);
bottom: -100%; }
border-radius: 0 0 1rem 1rem;
} @media screen and (max-width: 768px) {
.author-content-item.map.myphoto {
.author-content-item.map .map-title b { background-size: cover !important;
color: var(--heo-fontcolor); }
}
.author-content-item.map .map-title {
@media screen and (max-width: 768px) { padding: 1rem;
.author-content-item.map.myphoto { }
background-size: cover !important; }
} </style>
<!-- 关于统计-->
.author-content-item.map .map-title { <script defer>
padding: 1rem; // 链接替换即可，不需要后面的参数
} function initAboutPage() {
} fetch("https://v6-widget.51.la/v6/[[${theme.config.about.LingQueMonitorID}]]/quote.js")
</style> .then(res => res.text())
<!-- 关于统计--> .then(data => {
<script defer> let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
// 链接替换即可，不需要后面的参数 // let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
function initAboutPage() { let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);
fetch("https://v6-widget.51.la/v6/[[${theme.config.about.LingQueMonitorID}]]/quote.js")
.then(res => res.text()) num = num.map(el => {
.then(data => { let val = el.replace(/(<\/span><span>)/g, "");
let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"]; let str = val.replace(/(<\/span><\/p>)/g, "");
// let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g) return str;
let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g); });
num = num.map(el => { let statisticEl = document.getElementById("statistic");
let val = el.replace(/(<\/span><span>)/g, "");
let str = val.replace(/(<\/span><\/p>)/g, ""); // 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
return str; let statistic = [];
}); for (let i = 0; i < num.length; i++) {
if (!statisticEl) return;
let statisticEl = document.getElementById("statistic"); if (i == 0) continue;
statisticEl.innerHTML +=
// 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量 "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
let statistic = []; queueMicrotask(() => {
for (let i = 0; i < num.length; i++) { statistic.push(
if (!statisticEl) return; new CountUp(title[i], 0, num[i], 0, 2, {
if (i == 0) continue; useEasing: true,
statisticEl.innerHTML += useGrouping: true,
"<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>"; separator: ",",
queueMicrotask(() => { decimal: ".",
statistic.push( prefix: "",
new CountUp(title[i], 0, num[i], 0, 2, { suffix: "",
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) => {
let statisticElement = document.querySelector(".about-statistic.author-content-item"); entries.forEach(entry => {
if (entry.isIntersecting) {
function statisticUP() { for (let i = 0; i < num.length; i++) {
if (!statisticElement) return; if (i == 0) continue;
queueMicrotask(() => {
const callback = (entries, observer) => { statistic[i - 1].start();
entries.forEach(entry => { });
if (entry.isIntersecting) { }
for (let i = 0; i < num.length; i++) { observer.disconnect(); // 停止观察元素，因为不再需要触发此回调
if (i == 0) continue; }
queueMicrotask(() => { });
statistic[i - 1].start(); };
});
} const options = {
observer.disconnect(); // 停止观察元素，因为不再需要触发此回调 root: null,
} rootMargin: "0px",
}); threshold: 0
}; };
const observer = new IntersectionObserver(callback, options);
const options = { observer.observe(statisticElement);
root: null, }
rootMargin: "0px",
threshold: 0 statisticUP()
}; });
const observer = new IntersectionObserver(callback, options); }
observer.observe(statisticElement);
} initAboutPage();
</script>
statisticUP() </div>
});
}
initAboutPage();
</script>
</div>