From 45e93608ab60c9762b6e7966e831c81a0baa2fb9 Mon Sep 17 00:00:00 2001
From: UPToZ <uptoz@qq.com>
Date: Wed, 29 May 2024 17:34:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BE=A7=E6=A0=8F=E7=88=B1?=
 =?UTF-8?q?=E5=8F=91=E7=94=B5=E5=9B=BE=E7=89=87=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=A1=B5=E9=9D=A2=E6=A0=87=E9=A2=98=E6=9C=80?=
 =?UTF-8?q?=E5=A4=A7=E9=95=BF=E5=BA=A6=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/assets/zhheo/zhheoblog.css          |  11 +-
 .../widgets/about-widgets/statistics-map.html | 363 +++++++++---------
 2 files changed, 184 insertions(+), 190 deletions(-)

diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index d3778ee..fd01b30 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@@ -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;
 	}
 }
diff --git a/templates/modules/widgets/about-widgets/statistics-map.html b/templates/modules/widgets/about-widgets/statistics-map.html
index 1b9d155..58e9274 100644
--- a/templates/modules/widgets/about-widgets/statistics-map.html
+++ b/templates/modules/widgets/about-widgets/statistics-map.html
@@ -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>
\ No newline at end of file