142 lines
6.7 KiB
HTML
142 lines
6.7 KiB
HTML
<!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" style="padding: 0;">
|
|
<div id="mapContainer" style="height: 120%;"></div>
|
|
<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>
|
|
<script th:src="@{/assets/libs/countup/countup.js}"></script>
|
|
<script src="https://map.qq.com/api/gljs?v=1.exp&key=YZOBZ-34HLF-K3OJV-JV6IN-OALJ5-7MBAC"></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>
|
|
<script defer>
|
|
var t = new TMap.LatLng([[${theme.config.about.map.mapLocation}]])
|
|
, n = new TMap.Map(document.getElementById("mapContainer"),{
|
|
center: t,
|
|
zoom: 12,
|
|
});
|
|
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM),
|
|
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION),
|
|
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE),
|
|
new TMap.MultiMarker({
|
|
map: n,
|
|
styles: {
|
|
marker: new TMap.MarkerStyle({
|
|
width: 20,
|
|
height: 30,
|
|
anchor: {
|
|
x: 10,
|
|
y: 30
|
|
}
|
|
})
|
|
},
|
|
geometries: [{
|
|
id: "marker",
|
|
position: t
|
|
}]
|
|
})
|
|
</script>
|
|
</div>
|
|
|
|
</html> |