3b81941a48
- 在页面中新增访问人数统计显示模块 - 引入不蒜子统计脚本以获取访问数据 - 将 MBTI 图片资源引用从外部链接改为本地路径 - 更新 JavaScript 文件以支持新功能渲染 - 调整 CSS 样式以适配新增的统计元素展示
375 lines
19 KiB
HTML
375 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<title>关于我 - Honesty</title>
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<!--SEO信息 -->
|
||
<meta name="description" content="关于Honesty,关于HeHouHui,关于HeHui,关于明厚, About Me Honesty, About Me HeHouHui, About Me HeHui">
|
||
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
|
||
<meta name="author" content="Honesty">
|
||
|
||
<!-- 社交平台分享优化 -->
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://www.hehouhui.cn/about.html">
|
||
<meta property="og:title" content="关于我 - Honesty的个人主页">
|
||
<meta property="og:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
||
<meta property="og:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||
<meta property="og:site_name" content="Honesty的个人主页">
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image">
|
||
<meta property="twitter:url" content="https://www.hehouhui.cn/about.html">
|
||
<meta property="twitter:title" content="关于我 - Honesty的个人主页">
|
||
<meta property="twitter:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
||
<meta property="twitter:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||
<meta property="twitter:site" content="@Honesty861024">
|
||
|
||
<!-- 微信小程序/朋友圈分享 -->
|
||
<meta property="wechat:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||
<meta property="wechat:title" content="关于我 - Honesty的个人主页">
|
||
<meta property="wechat:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。">
|
||
|
||
<!-- 核心资源：使用 BootCDN 加速 -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/remixicon/3.5.0/remixicon.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/style.css?version=20251125">
|
||
<link rel="stylesheet" href="css/about.css?version=20251125">
|
||
<!-- Artalk 评论样式 -->
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.css">
|
||
<link rel="stylesheet" href="css/artalk.css?version=20251125">
|
||
<link rel="icon" href="favicon.ico">
|
||
<!--IE淘汰计划-->
|
||
<script>
|
||
if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href = "https://imsyy.top/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- 动态背景层 -->
|
||
<div class="aurora-canvas">
|
||
<div class="glow-spot spot-1"></div>
|
||
<div class="glow-spot spot-2"></div>
|
||
<div class="glow-spot spot-3"></div>
|
||
<div class="noise-layer"></div>
|
||
</div>
|
||
|
||
<div class="app-root">
|
||
<!-- 导航栏：PC顶栏 / 移动端底栏 -->
|
||
<nav class="glass-nav">
|
||
<div class="nav-inner">
|
||
<a href="index.html" class="logo-brand">
|
||
<span class="logo-text">Honesty</span>
|
||
<span class="logo-accent">.</span>
|
||
</a>
|
||
|
||
<div class="nav-menu">
|
||
<a href="index.html" class="nav-item">
|
||
<i class="ri-home-smile-2-line"></i>
|
||
<span class="nav-label" data-i18n="nav.home">首页</span>
|
||
</a>
|
||
<a href="javascript:void(0);" class="nav-item active">
|
||
<i class="ri-user-3-line"></i>
|
||
<span class="nav-label" data-i18n="nav.about">关于</span>
|
||
</a>
|
||
<a href="https://blog.hehouhui.cn" class="nav-item">
|
||
<i class="ri-quill-pen-line"></i>
|
||
<span class="nav-label" data-i18n="nav.blog">博客</span>
|
||
</a>
|
||
|
||
<div class="nav-divider"></div>
|
||
|
||
<!-- 功能按钮 -->
|
||
<button id="lang-btn" class="action-btn" aria-label="Switch Language">
|
||
<i class="ri-translate-2"></i>
|
||
<span class="btn-text">CN/EN</span>
|
||
</button>
|
||
<button id="theme-btn" class="action-btn" aria-label="Toggle Theme">
|
||
<i class="ri-sun-line icon-sun"></i>
|
||
<i class="ri-moon-line icon-moon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="main-container">
|
||
|
||
<!-- 第一部分：Bento Grid 核心展示 -->
|
||
<div class="bento-grid">
|
||
|
||
<!-- [1] 个人卡片 (Profile) -->
|
||
<div class="bento-card area-profile">
|
||
<div class="profile-content">
|
||
<div class="avatar-ring">
|
||
<img src="images/avatar.jpeg" alt="Honesty" class="avatar-img">
|
||
<div class="status-dot" data-i18n="status.online">Online</div>
|
||
</div>
|
||
<div class="profile-info">
|
||
<h1 class="hero-name" data-i18n="profile.name">Honesty</h1>
|
||
<p class="hero-role" data-i18n="profile.role">Java Backend & AI Engineer</p>
|
||
<div class="location-tag">
|
||
<i class="ri-map-pin-user-fill"></i> <span data-i18n="profile.location">Shanghai, China</span>
|
||
</div>
|
||
</div>
|
||
<!-- 6个社交链接 (PC端显示) -->
|
||
<div class="social-dock desktop-social">
|
||
<a href="https://github.com/listener-He" target="_blank" class="s-icon"><i class="ri-github-fill"></i></a>
|
||
<a href="mailto:hehouhui@foxmail.com" class="s-icon"><i class="ri-mail-send-fill"></i></a>
|
||
<a href="https://blog.hehouhui.cn" target="_blank" class="s-icon"><i class="ri-pages-line"></i></a>
|
||
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" target="_blank" class="s-icon"><i class="ri-zhihu-line"></i></a>
|
||
<a href="javascript:void(0);" onclick="toggleWechat()" class="s-icon"><i class="ri-wechat-fill"></i></a>
|
||
<a href="https://juejin.cn/user/3659591622878503" target="_blank" class="s-icon"><i class="ri-code-box-line"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [2] 简介与格言 (Bio) -->
|
||
<div class="bento-card area-bio">
|
||
<div class="card-label" data-i18n="bio.label">About Me</div>
|
||
<p class="bio-text" data-i18n="bio.text">
|
||
"我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。"
|
||
</p>
|
||
<div class="quote-box">
|
||
<i class="ri-double-quotes-l"></i>
|
||
<p data-i18n="bio.quote">"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。 "</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [3] 数据统计 (Stats) -->
|
||
<div class="bento-card area-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-val neon-font" id="coding-years">7+</span>
|
||
<span class="stat-key" data-i18n="stats.exp">Years</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-val neon-font" id="github-repos">--</span>
|
||
<span class="stat-key" data-i18n="stats.repos">Projects</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-val neon-font" id="github-followers">--</span>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [4] MBTI 人格 (Personality) -->
|
||
<div class="bento-card area-mbti">
|
||
<div class="mbti-inner">
|
||
<div class="mbti-head">
|
||
<span class="mbti-code gradient-text">INFJ</span>
|
||
<span class="mbti-name" data-i18n="mbti.name">Advocate</span>
|
||
<span class="mbti-icon">
|
||
<img src="images/INFJ.png" alt="INFJ" style="width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.4)"/>
|
||
</span>
|
||
</div>
|
||
<p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p>
|
||
<div class="mbti-tags">
|
||
<span class="tag tag-color-1" data-i18n="mbti.tag1">Idealism & Morality</span>
|
||
<span class="tag tag-color-2" data-i18n="mbti.tag2">Decisive Action</span>
|
||
<span class="tag tag-color-3" data-i18n="mbti.tag3">Deep Insight & Creativity</span>
|
||
<span class="tag tag-color-4" data-i18n="mbti.tag4">Care & Empathy</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [5] 技术栈宇宙 (Tech Stack) -->
|
||
<div class="bento-card area-tech">
|
||
<div class="card-header">
|
||
<h3 class="glow-title"><i class="ri-stack-line"></i> <span data-i18n="tech.title">Tech Universe</span></h3>
|
||
</div>
|
||
<!-- 容器：PC端3D球，移动端横向滚动条 -->
|
||
<div id="tech-container" class="tech-wrapper">
|
||
<!-- JS 动态注入 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [6] 兴趣爱好 (Interests) -->
|
||
<div class="bento-card area-interests">
|
||
<div class="card-header">
|
||
<h3 data-i18n="interest.title">Interests</h3>
|
||
<span class="card-subtitle" data-i18n="interest.subtitle">Some of my interests</span>
|
||
</div>
|
||
<div class="interest-list">
|
||
<div class="interest-item">
|
||
<span class="i-emoji">🚴♂️</span>
|
||
<div class="i-text">
|
||
<!-- <strong data-i18n="interest.cycling">Cycling</strong>-->
|
||
<span data-i18n="interest.cycling_desc">Measuring the world</span>
|
||
</div>
|
||
</div>
|
||
<div class="interest-item">
|
||
<span class="i-emoji">📚</span>
|
||
<div class="i-text">
|
||
<!-- <strong data-i18n="interest.reading">Reading</strong>-->
|
||
<span data-i18n="interest.reading_desc">Thinking tracks</span>
|
||
</div>
|
||
</div>
|
||
<div class="interest-item">
|
||
<span class="i-emoji">🔍</span>
|
||
<div class="i-text">
|
||
<!-- <strong data-i18n="interest.opensource">Open Source</strong>-->
|
||
<span data-i18n="interest.opensource_desc">Sharing power</span>
|
||
</div>
|
||
</div>
|
||
<div class="interest-item">
|
||
<span class="i-emoji">💡</span>
|
||
<div class="i-text">
|
||
<!-- <strong data-i18n="interest.learning">Learning</strong>-->
|
||
<span data-i18n="interest.learning_desc">Always curious</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 移动端显示的社交栏 (6个链接) -->
|
||
<div class="bento-card area-social-mobile mobile-social">
|
||
<a href="https://github.com/listener-He" class="ms-btn"><i class="ri-github-fill"></i></a>
|
||
<a href="mailto:hehouhui@foxmail.com" class="ms-btn"><i class="ri-mail-send-fill"></i></a>
|
||
<a href="https://blog.hehouhui.cn" class="ms-btn"><i class="ri-pages-line"></i></a>
|
||
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" class="ms-btn"><i class="ri-zhihu-line"></i></a>
|
||
<a href="javascript:void(0);" onclick="toggleWechat()" class="ms-btn"><i class="ri-wechat-fill"></i></a>
|
||
<a href="https://juejin.cn/user/3659591622878503" class="ms-btn"><i class="ri-code-box-line"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二部分：开源项目 -->
|
||
<div class="content-section">
|
||
<div class="content-col">
|
||
<div class="col-header">
|
||
<h3 class="glow-title"><i class="ri-github-line"></i> <span data-i18n="github.title">Open Source</span></h3>
|
||
</div>
|
||
<div class="glass-panel">
|
||
<!-- 贡献图 placeholder -->
|
||
<div id="github-commits" class="commits-chart"></div>
|
||
<div id="projects-container" class="projects-list">
|
||
<!-- Loading State -->
|
||
<div class="skeleton-card"></div>
|
||
<div class="skeleton-card"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三部分：最新文章 -->
|
||
<div class="content-section">
|
||
<div class="content-col">
|
||
<div class="col-header">
|
||
<h3 class="glow-title"><i class="ri-article-line"></i> <span data-i18n="blog.title">Latest Posts</span></h3>
|
||
<a href="https://blog.hehouhui.cn" class="more-link" data-i18n="blog.more">View All →</a>
|
||
</div>
|
||
<div id="blog-container" class="blog-list glass-panel">
|
||
<!-- Loading State -->
|
||
<div class="skeleton-card"></div>
|
||
<div class="skeleton-card"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第四部分：评论 -->
|
||
<div class="comments-wrapper">
|
||
<div class="col-header">
|
||
<h3 class="glow-title"><i class="ri-discuss-line"></i> <span data-i18n="comment.title">Message Board</span></h3>
|
||
</div>
|
||
<div class="glass-panel comment-box">
|
||
<div id="artalk-container"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动端悬浮功能按钮 -->
|
||
<div class="mobile-fab">
|
||
<button id="fab-main" class="fab-main" aria-label="Actions"><i class="ri-magic-line"></i><span class="fab-label">Tools</span></button>
|
||
<div class="fab-menu" id="fab-menu">
|
||
<button id="fab-lang" class="fab-item"><i class="ri-translate-2"></i><span class="fab-text">Lang</span></button>
|
||
<button id="fab-theme" class="fab-item"><i class="ri-moon-line"></i><span class="fab-text">Theme</span></button>
|
||
<button id="fab-music" class="fab-item"><i class="ri-music-2-line"></i><span class="fab-text">Play</span></button>
|
||
</div>
|
||
</div>
|
||
<audio id="site-audio" class="site-audio" src="data/至少做一件离谱的事-Kiri T.mp3" autoplay loop preload="auto"></audio>
|
||
</main>
|
||
|
||
<!-- 微信弹窗 -->
|
||
<div id="wechat-modal" class="modal-overlay">
|
||
<div class="modal-glass">
|
||
<button class="modal-close" onclick="toggleWechat()"><i class="ri-close-line"></i></button>
|
||
<h3 data-i18n="modal.wechat">Official Account</h3>
|
||
<div class="qr-box">
|
||
<img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="WeChat QR" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
|
||
<!-- <div class="qr-fallback">QR Load Failed</div>-->
|
||
</div>
|
||
<p data-i18n="modal.desc">Scan to follow Tech Share</p>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="site-footer">
|
||
<p>© 2018 <span id="currentYear"></span> Honesty. All rights reserved. <a class="icp" href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20014902号</a> Powered By <a href="https://pages.edgeone.ai/" target="_blank"> Tencent EdgeOne </a></p>
|
||
<script>
|
||
document.getElementById("currentYear").textContent = ' - ' + new Date().getFullYear();
|
||
</script>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 脚本：BootCDN jQuery / Artalk -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
<script src="js/config.js?version=20251125"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.js"></script>
|
||
<!-- 引入多语言包（按需） -->
|
||
<script src="https://cdn.jsdelivr.net/npm/artalk@latest/dist/i18n/zh-cn.js"></script>
|
||
<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>
|
||
|
||
<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"});
|
||
</script>
|
||
<script>
|
||
// 百度站点统计
|
||
var _hmt = _hmt || [];
|
||
(function () {
|
||
try {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?ae2a009a75b13c21d5121ee51375ea4e";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
} catch (e) {
|
||
console.log("百度统计错误", e);
|
||
}
|
||
|
||
})();
|
||
</script>
|
||
|
||
<!-- 先定义 gtag 函数作为安全兜底 -->
|
||
<script type="text/javascript">
|
||
try {
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag() {
|
||
dataLayer.push(arguments);
|
||
}
|
||
gtag('js', new Date());
|
||
} catch (e) {
|
||
console.log("Google Analytics Init 错误", e);
|
||
}
|
||
|
||
</script>
|
||
|
||
<!-- 再异步加载 Google 的 gtag.js -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script>
|
||
|
||
<!-- 可选：继续调用 config -->
|
||
<script type="text/javascript">
|
||
try {
|
||
gtag('config', 'G-DYWDEVKDP0');
|
||
} catch (e) {
|
||
console.error("Google Analytics config 失败", e);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |