halo-theme-hao/templates/modules/widgets/about-widgets/statistics-map.html

<!-- 数据统计&作者相关信息 -->
<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://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>