优化关于我的问候，数据统计
This commit is contained in:
1152958806@qq.com
parent
5e23b49423
commit
de9c963100
|
|
@ -39,91 +39,84 @@
|
|||
|
||||
<th:block th:replace="~{modules/about-widgets :: about-widgets(${theme.config.about.widgets})}"></th:block>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="author-content">
|
||||
<div class="create-site-post author-content-item single" th:utext="${theme.config.about.xjlc}">
|
||||
<div class="author-content">
|
||||
<div class="create-site-post author-content-item single" th:utext="${theme.config.about.xjlc}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="author-content">
|
||||
<div class="author-content-item single reward" id="about-reward">
|
||||
<div class="author-content-item-tips">致谢</div>
|
||||
<span class="author-content-item-title" >[[${theme.config.aboutReward.title}]]</span>
|
||||
<div class="author-content-item-description" >
|
||||
[[${theme.config.aboutReward.content}]]
|
||||
</div>
|
||||
|
||||
<div th:if="${theme.config.aboutReward.reward.enable_reward}" class="about-reward">
|
||||
<div id="con"></div>
|
||||
<div id="TA-con" onclick="heo.rewardShowConsole()">
|
||||
<div id="text-con">
|
||||
<div id="linght"></div>
|
||||
<div id="TA">[[${theme.config.aboutReward.reward.name}]]</div>
|
||||
</div>
|
||||
<div class="author-content">
|
||||
<div class="author-content-item single reward" id="about-reward">
|
||||
<div class="author-content-item-tips">致谢</div>
|
||||
<span class="author-content-item-title" >[[${theme.config.aboutReward.title}]]</span>
|
||||
<div class="author-content-item-description" >
|
||||
[[${theme.config.aboutReward.content}]]
|
||||
</div>
|
||||
<div id="tube-con"><svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path>
|
||||
<path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path>
|
||||
<path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path>
|
||||
<path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path>
|
||||
<rect y="186" width="236" height="24" fill="#e5e9ef"></rect>
|
||||
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
|
||||
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
|
||||
</svg>
|
||||
<div id="mask"><svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20"></path>
|
||||
<path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20"></path>
|
||||
<path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path>
|
||||
<path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20"></path>
|
||||
<rect y="186" width="236" height="24" fill="#f25d8e"></rect>
|
||||
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
|
||||
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
|
||||
</svg></div>
|
||||
<div id="orange-mask"><svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20"></path>
|
||||
<path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20"></path>
|
||||
<path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path>
|
||||
<path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20"></path>
|
||||
<rect y="186" width="236" height="24" fill="#ffd52b"></rect>
|
||||
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
|
||||
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
|
||||
</svg></div>
|
||||
<p id="people">共<b>[[${theme.config.aboutReward.reward_list.size()}]]</b>人</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reward-list-all" th:if="${not #lists.isEmpty(theme.config.aboutReward.reward_list)}"
|
||||
th:with="authorRewardList = ${theme.config.aboutReward.reward_list}">
|
||||
|
||||
<div class="reward-list-item" th:each="authorReward : ${authorRewardList}">
|
||||
<div class="reward-list-item-name">[[${authorReward.name}]]</div>
|
||||
<div class="reward-list-bottom-group">
|
||||
<div th:if="${authorReward.sign == 'N'}" class="reward-list-item-money">¥
|
||||
[[${authorReward.amount}]]</div>
|
||||
<div th:if="${authorReward.sign == 'Y'}" class="reward-list-item-money"
|
||||
style="background: var(--heo-vip);">¥ [[${authorReward.amount}]]
|
||||
<div th:if="${theme.config.aboutReward.reward.enable_reward}" class="about-reward">
|
||||
<div id="con"></div>
|
||||
<div id="TA-con" onclick="heo.rewardShowConsole()">
|
||||
<div id="text-con">
|
||||
<div id="linght"></div>
|
||||
<div id="TA">[[${theme.config.aboutReward.reward.name}]]</div>
|
||||
</div>
|
||||
<time class="datatime reward-list-item-time">[[${authorReward.datatime}]]</time>
|
||||
</div>
|
||||
<div id="tube-con"><svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path>
|
||||
<path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path>
|
||||
<path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path>
|
||||
<path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path>
|
||||
<rect y="186" width="236" height="24" fill="#e5e9ef"></rect>
|
||||
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
|
||||
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
|
||||
</svg>
|
||||
<div id="mask"><svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20"></path>
|
||||
<path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20"></path>
|
||||
<path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path>
|
||||
<path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20"></path>
|
||||
<rect y="186" width="236" height="24" fill="#f25d8e"></rect>
|
||||
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
|
||||
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
|
||||
</svg></div>
|
||||
<div id="orange-mask"><svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20"></path>
|
||||
<path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20"></path>
|
||||
<path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path>
|
||||
<path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20"></path>
|
||||
<rect y="186" width="236" height="24" fill="#ffd52b"></rect>
|
||||
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
|
||||
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
|
||||
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
|
||||
</svg></div>
|
||||
<p id="people">共<b>[[${theme.config.aboutReward.reward_list.size()}]]</b>人</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reward-list-all" th:if="${not #lists.isEmpty(theme.config.aboutReward.reward_list)}"
|
||||
th:with="authorRewardList = ${theme.config.aboutReward.reward_list}">
|
||||
|
||||
<div class="reward-list-item" th:each="authorReward : ${authorRewardList}">
|
||||
<div class="reward-list-item-name">[[${authorReward.name}]]</div>
|
||||
<div class="reward-list-bottom-group">
|
||||
<div th:if="${authorReward.sign == 'N'}" class="reward-list-item-money">¥
|
||||
[[${authorReward.amount}]]</div>
|
||||
<div th:if="${authorReward.sign == 'Y'}" class="reward-list-item-money"
|
||||
style="background: var(--heo-vip);">¥ [[${authorReward.amount}]]
|
||||
</div>
|
||||
<time class="datatime reward-list-item-time">[[${authorReward.datatime}]]</time>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 评论模块 -->
|
||||
|
||||
|
||||
</main>
|
||||
<!-- 底部 -->
|
||||
<footer th:replace="~{modules/footer :: footer}"></footer>
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@
|
|||
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css">
|
||||
|
||||
<!-- 关于统计-->
|
||||
<script th:src="${assets_link + '/libs/countup/countup.js'}"></script>
|
||||
<script th:if="${#strings.contains(theme.config.about.widgets,'statistics-map')}" th:src="${assets_link + '/libs/countup/countup.js'}"></script>
|
||||
|
||||
<!-- 小板报 -->
|
||||
<th:block th:if="${not #strings.isEmpty(theme.config.sidebar.welcome.key)}">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<!-- 我的介绍&我的想法 -->
|
||||
<!-- hello -->
|
||||
<div class="hello-about" th:fragment="hello-about">
|
||||
<div class="cursor" style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);"></div>
|
||||
<div class="shapes">
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
<div class="content">
|
||||
<h1>[[${theme.config.about.helloAbout}]]</h1>
|
||||
</div>
|
||||
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js"></script>
|
||||
<style>
|
||||
.hello-about {
|
||||
margin: 20px auto 0;
|
||||
|
|
@ -133,8 +132,8 @@
|
|||
background: #2128bd;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(() => {
|
||||
<script defer>
|
||||
function initHelloAbout() {
|
||||
const helloAboutEl = document.querySelector(".hello-about");
|
||||
helloAboutEl.addEventListener("mousemove", evt => {
|
||||
const mouseX = evt.offsetX;
|
||||
|
|
@ -150,7 +149,12 @@
|
|||
stagger: -0.1,
|
||||
});
|
||||
});
|
||||
})();
|
||||
}
|
||||
if (typeof gsap === "object") {
|
||||
initHelloAbout()
|
||||
} else {
|
||||
getScript("https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js").then(initHelloAbout);
|
||||
}
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -97,72 +97,77 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
<!-- 关于统计-->
|
||||
<script defer>
|
||||
// 链接替换即可，不需要后面的参数
|
||||
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);
|
||||
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: "",
|
||||
})
|
||||
);
|
||||
num = num.map(el => {
|
||||
let val = el.replace(/(<\/span><span>)/g, "");
|
||||
let str = val.replace(/(<\/span><\/p>)/g, "");
|
||||
return str;
|
||||
});
|
||||
}
|
||||
|
||||
let statisticElement = document.querySelector(".about-statistic.author-content-item");
|
||||
function statisticUP() {
|
||||
if (!statisticElement) return;
|
||||
let statisticEl = document.getElementById("statistic");
|
||||
|
||||
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(); // 停止观察元素，因为不再需要触发此回调
|
||||
}
|
||||
// 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
|
||||
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();
|
||||
|
||||
const options = {
|
||||
root: null,
|
||||
rootMargin: "0px",
|
||||
threshold: 0
|
||||
};
|
||||
const observer = new IntersectionObserver(callback, options);
|
||||
observer.observe(statisticElement);
|
||||
}
|
||||
statisticUP()
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue