feat(stats): 重构统计区域样式并优化数据展示
- 使用grid布局重构统计区域，替换原有的flex布局 - 添加响应式设计，适配PC、平板和移动端显示 - 为统计项添加悬停效果和过渡动画 - 集成verCount统计服务，替换不蒜子统计 - 添加数据格式化功能，支持K/W/M单位显示 - 增加访客数和访问量的国际化支持 - 优化统计数字的显示格式和可读性
This commit is contained in:
hehh
96
about.html
96
about.html
@@ -151,10 +151,12 @@
|
||||
<span class="stat-key" data-i18n="stats.followers">Followers</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-val neon-font" id="visit-count">
|
||||
<span id="busuanzi_value_site_pv">--</span>
|
||||
</span>
|
||||
<span class="stat-key">Visitors</span>
|
||||
<span id="busuanzi_value_site_pv" style='display:none'>0</span>
|
||||
<span class="stat-key" data-i18n="stats.visitNum">Visit num</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span id="busuanzi_value_site_uv" style='display:none'>0</span>
|
||||
<span class="stat-key" data-i18n="stats.visitors">Visitors</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -324,11 +326,16 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/artalk@latest/dist/i18n/en.js"></script>
|
||||
<script src="js/about.js?version=20251125"></script>
|
||||
|
||||
<!-- 不蒜子统计 -->
|
||||
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
|
||||
<!-- verCount统计 -->
|
||||
<script defer src="https://events.vercount.one/js"></script>
|
||||
|
||||
<script>
|
||||
!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"3OBGjwDdEIRS7XZ1",ck:"3OBGjwDdEIRS7XZ1"});
|
||||
try {
|
||||
!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"3OBGjwDdEIRS7XZ1",ck:"3OBGjwDdEIRS7XZ1"});
|
||||
} catch (e) {
|
||||
console.log("51.la统计错误", e);
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
// 百度站点统计
|
||||
@@ -346,29 +353,68 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- 先定义 gtag 函数作为安全兜底 -->
|
||||
<script type="text/javascript">
|
||||
try {
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
<!-- 自动格式化脚本 -->
|
||||
<script>
|
||||
// 核心格式化函数：支持 K / W / M，保留最多两位小数，去除尾随零
|
||||
function formatWithUnit(num) {
|
||||
num = Number(num);
|
||||
if (isNaN(num) || num < 0) return '0';
|
||||
|
||||
// 小于 1000：直接显示
|
||||
if (num < 1_000) {
|
||||
return Math.floor(num).toString();
|
||||
}
|
||||
gtag('js', new Date());
|
||||
} catch (e) {
|
||||
console.log("Google Analytics Init 错误", e);
|
||||
|
||||
// 1K ~ 9.99K
|
||||
if (num < 10_000) {
|
||||
let val = (num / 1_000).toFixed(2);
|
||||
return parseFloat(val) + 'K';
|
||||
}
|
||||
|
||||
// 1W ~ 99.99W （1W = 10,000）
|
||||
if (num < 1_000_000) {
|
||||
let val = (num / 10_000).toFixed(2);
|
||||
return parseFloat(val) + 'W';
|
||||
}
|
||||
|
||||
// ≥ 1M
|
||||
let val = (num / 1_000_000).toFixed(2);
|
||||
return parseFloat(val) + 'M';
|
||||
}
|
||||
|
||||
</script>
|
||||
// 监听不蒜子数据更新并格式化
|
||||
function initFormatter() {
|
||||
const pvEl = document.getElementById('busuanzi_value_site_pv');
|
||||
const uvEl = document.getElementById('busuanzi_value_site_uv');
|
||||
|
||||
<!-- 再异步加载 Google 的 gtag.js -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script>
|
||||
if (!pvEl && !uvEl) return;
|
||||
|
||||
<!-- 可选：继续调用 config -->
|
||||
<script type="text/javascript">
|
||||
try {
|
||||
gtag('config', 'G-DYWDEVKDP0');
|
||||
} catch (e) {
|
||||
console.error("Google Analytics config 失败", e);
|
||||
const observer = new MutationObserver(() => {
|
||||
if (pvEl?.textContent) {
|
||||
const raw = pvEl.textContent.trim().replace(/[,，]/g, '');
|
||||
const num = parseFloat(raw);
|
||||
if (!isNaN(num)) {
|
||||
pvEl.textContent = formatWithUnit(num);
|
||||
}
|
||||
}
|
||||
if (uvEl?.textContent) {
|
||||
const raw = uvEl.textContent.trim().replace(/[,，]/g, '');
|
||||
const num = parseFloat(raw);
|
||||
if (!isNaN(num)) {
|
||||
uvEl.textContent = formatWithUnit(num);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (pvEl) observer.observe(pvEl, { childList: true, subtree: true });
|
||||
if (uvEl) observer.observe(uvEl, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
// 启动
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initFormatter);
|
||||
} else {
|
||||
initFormatter();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -1769,37 +1769,105 @@ body {
|
||||
|
||||
/* --- Stats --- */
|
||||
.area-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 20px 30px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(128, 128, 128, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(128, 128, 128, 0.1);
|
||||
padding: 10px 0;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
transition: all 0.3s ease;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-item:last-child {
|
||||
border-bottom: none;
|
||||
.stat-item:hover {
|
||||
background: rgba(108, 92, 231, 0.1);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-val {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.stat-key {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 访问人数统计样式 */
|
||||
#visit-count {
|
||||
font-family: var(--font-mono);
|
||||
/* PC端统计区域响应式布局 */
|
||||
@media (min-width: 1025px) {
|
||||
.area-stats {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端统计区域布局 */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.area-stats {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.stat-val {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.stat-key {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端统计区域布局 */
|
||||
@media (max-width: 768px) {
|
||||
.area-stats {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
padding: 15px 10px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
.stat-val {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.stat-key {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Mobile Social --- */
|
||||
@@ -2138,10 +2206,11 @@ body {
|
||||
@media (min-width: 1025px) {
|
||||
.interest-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.interest-item {
|
||||
background: rgba(128, 128, 128, 0.05);
|
||||
|
||||
17
js/about.js
17
js/about.js
@@ -79,6 +79,8 @@ class I18nManager {
|
||||
"stats.exp": "编程年限",
|
||||
"stats.repos": "开源项目",
|
||||
"stats.followers": "关注者",
|
||||
"stats.visitors": "访问量",
|
||||
"stats.visitNum": "访客数",
|
||||
"mbti.name": "提倡者",
|
||||
"mbti.desc": "提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。",
|
||||
"mbti.tag1": "理想主义与道德感",
|
||||
@@ -118,6 +120,8 @@ class I18nManager {
|
||||
"stats.exp": "Years Exp",
|
||||
"stats.repos": "Projects",
|
||||
"stats.followers": "Followers",
|
||||
"stats.visitors": "Visitors",
|
||||
"stats.visitNum": "Visiting guests",
|
||||
"mbti.name": "Advocate",
|
||||
"mbti.desc": "Advocates of this personality type are very rare, with less than 1% of the population belonging to this type, but their contributions to the world cannot be ignored.",
|
||||
"mbti.tag1": "Idealism & Morality",
|
||||
@@ -324,7 +328,18 @@ class DataManager {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
formatVisitors() {
|
||||
const siteVisitorDom = window.document.getElementById('busuanzi_value_site_pv');
|
||||
if (siteVisitorDom) {
|
||||
let count = siteVisitorDom.innerText;
|
||||
if (count && count.length > 3) {
|
||||
// 格式化 k,w m等单位 支持两位小数点
|
||||
count = count.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
|
||||
count = count.replace(/(\d+)(?=(\d{3})+(?:\.\d+)?$)/g, '$0 ');
|
||||
siteVisitorDom.innerText = count;
|
||||
}
|
||||
}
|
||||
}
|
||||
renderRepos(list) {
|
||||
if (!Array.isArray(list)) list = window.SiteConfig?.defaults?.repos;
|
||||
let html = '';
|
||||
|
||||
Reference in New Issue
Block a user