修改侧栏爱发电图片样式和文章页面标题最大长度限制
This commit is contained in:
parent
371b605268
commit
45e93608ab
@ -7477,7 +7477,7 @@ span.fund_name {
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
margin-right: 12px;
|
||||
/* margin-right: 12px; */
|
||||
border: var(--style-border-always);
|
||||
transition: .3s ease-out
|
||||
}
|
||||
@ -7533,7 +7533,8 @@ div#power-star-title {
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
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;
|
||||
color: var(--heo-white);
|
||||
background: var(--heo-white-op);
|
||||
@ -10027,7 +10028,7 @@ div#author-info__sayhi {
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
} */
|
||||
|
||||
div#author-info__sayhi:hover {
|
||||
background: var(--heo-white-op);
|
||||
@ -10439,7 +10440,7 @@ a.extend.prev {
|
||||
}
|
||||
|
||||
#post-info .post-title {
|
||||
width: 1100px;
|
||||
width: 1200px;
|
||||
font-size: 2.6rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,187 +1,180 @@
|
||||
<!-- 数据统计&作者相关信息 -->
|
||||
<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="haofont hao-icon-circle-arrow-up-right-1"></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>
|
||||
</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%;
|
||||
}
|
||||
|
||||
.author-content-item.map:hover {
|
||||
background-size: 120%;
|
||||
transition: 4s ease-in-out;
|
||||
background-position-x: 0;
|
||||
background-position-y: 36%;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
background: var(--heo-maskbg);
|
||||
padding: 0.5rem 2rem;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transition: 1s ease-in-out;
|
||||
font-size: 20px;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.author-content-item.map:hover .map-title {
|
||||
bottom: -100%;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title b {
|
||||
color: var(--heo-fontcolor);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.author-content-item.map.myphoto {
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- 关于统计-->
|
||||
<script defer>
|
||||
// 链接替换即可，不需要后面的参数
|
||||
function initAboutPage() {
|
||||
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()
|
||||
});
|
||||
}
|
||||
|
||||
initAboutPage();
|
||||
|
||||
</script>
|
||||
</div>
|
||||
<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://v6.51.la/" 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="haofont hao-icon-circle-arrow-up-right-1"></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>
|
||||
</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%;
|
||||
}
|
||||
|
||||
.author-content-item.map:hover {
|
||||
background-size: 120%;
|
||||
transition: 4s ease-in-out;
|
||||
background-position-x: 0;
|
||||
background-position-y: 36%;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
background: var(--heo-maskbg);
|
||||
padding: 0.5rem 2rem;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transition: 1s ease-in-out;
|
||||
font-size: 20px;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.author-content-item.map:hover .map-title {
|
||||
bottom: -100%;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title b {
|
||||
color: var(--heo-fontcolor);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.author-content-item.map.myphoto {
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- 关于统计-->
|
||||
<script defer>
|
||||
// 链接替换即可，不需要后面的参数
|
||||
function initAboutPage() {
|
||||
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()
|
||||
});
|
||||
}
|
||||
|
||||
initAboutPage();
|
||||
</script>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user