feat(about): 重构关于页面布局并优化移动端响应式设计
- 重新设计关于页面的整体布局，采用更现代化的卡片式设计 - 新增技术栈云图展示，按类别和熟练度分组 - 优化移动端响应式布局，特别是超小屏幕(320px-375px)的显示效果 - 改进社交链接展示方式，使用网格布局替代原有轨道设计 - 添加微信二维码弹窗功能，支持移动端优化显示 - 更新个人信息展示，增加MBTI特质详细描述 - 移除旧的访问统计模块，整合GitHub统计信息 - 优化页面加载性能，添加本地缓存策略减少API请求
This commit is contained in:
hehh
296
about.html
296
about.html
@@ -7,21 +7,20 @@
|
|||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<link rel="stylesheet" href="css/about.css">
|
<link rel="stylesheet" href="css/about.css">
|
||||||
<link rel="stylesheet" href="css/iconfont.css">
|
<link rel="stylesheet" href="css/iconfont.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.css">
|
||||||
<link rel="icon" href="favicon.ico">
|
<link rel="icon" href="favicon.ico">
|
||||||
<meta name="description" content="了解更多关于Honesty的信息 - 技术栈、项目经验、个人兴趣">
|
<meta name="description" content="了解更多关于Honesty的信息 - 技术栈、项目经验、个人兴趣">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="about-container">
|
<div class="about-container">
|
||||||
<!-- 导航栏 -->
|
<!-- 导航栏 -->
|
||||||
<nav class="about-nav">
|
<nav class="navbar">
|
||||||
<div class="nav-content">
|
<div class="nav-container">
|
||||||
<a href="index.html" class="nav-logo">
|
<a href="index.html" class="nav-logo">Honesty</a>
|
||||||
<img src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg" alt="Honesty">
|
|
||||||
<span>Honesty</span>
|
|
||||||
</a>
|
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
<a href="index.html">首页</a>
|
<a href="index.html">首页</a>
|
||||||
<a href="about.html" class="active">关于我</a>
|
<a href="javascript:void(0);" class="active">关于我</a>
|
||||||
|
<a href="https://blog.hehouhui.cn">博客</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -30,36 +29,76 @@
|
|||||||
<main class="about-main">
|
<main class="about-main">
|
||||||
<!-- 英雄区域 -->
|
<!-- 英雄区域 -->
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="hero-background">
|
<!-- INFJ装饰图片 -->
|
||||||
<div class="floating-shapes">
|
<div class="infj-decoration">
|
||||||
<div class="shape shape-1"></div>
|
<img src="https://blog-file.hehouhui.cn/INFJ.png" alt="INFJ" class="infj-image">
|
||||||
<div class="shape shape-2"></div>
|
|
||||||
<div class="shape shape-3"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-content">
|
<div class="hero-container">
|
||||||
<div class="profile-avatar">
|
<div class="hero-left">
|
||||||
<img src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg" alt="Honesty">
|
<div class="profile-card">
|
||||||
<div class="avatar-ring"></div>
|
<div class="profile-avatar">
|
||||||
</div>
|
<img src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg" alt="Honesty" class="avatar-image">
|
||||||
<h1 class="hero-title">Honesty</h1>
|
<div class="status-indicator"></div>
|
||||||
<p class="hero-subtitle">全栈开发工程师 · 开源爱好者</p>
|
</div>
|
||||||
<div class="personality-badge">
|
<div class="profile-info">
|
||||||
<span class="mbti-tag">INFJ</span>
|
<h1 class="hero-title">Honesty</h1>
|
||||||
<span class="badge-desc">提倡者人格</span>
|
<p class="hero-subtitle">Java后端 + AI开发工程师</p>
|
||||||
</div>
|
<div class="location-info">
|
||||||
<div class="hero-stats">
|
<span class="location-item">
|
||||||
<div class="stat-item">
|
<i class="iconfont icon-location"></i>
|
||||||
<span class="stat-number" id="github-repos">--</span>
|
现居上海
|
||||||
<span class="stat-label">开源项目</span>
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
</div>
|
||||||
<span class="stat-number" id="github-followers">--</span>
|
<div class="hero-right">
|
||||||
<span class="stat-label">GitHub关注</span>
|
<div class="intro-content">
|
||||||
|
<div class="intro-text">
|
||||||
|
<div class="quote-section">
|
||||||
|
<div class="quote-line"></div>
|
||||||
|
<div class="quote-content">
|
||||||
|
<h2>关于我</h2>
|
||||||
|
<blockquote class="intro-quote">
|
||||||
|
<p>"我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。"</p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote class="intro-quote">
|
||||||
|
<p>"作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。"</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
<div class="personality-section">
|
||||||
<span class="stat-number" id="total-visitors">--</span>
|
<div class="mbti-card">
|
||||||
<span class="stat-label">访问量</span>
|
<div class="mbti-header">
|
||||||
|
<span class="mbti-tag">INFJ</span>
|
||||||
|
<span class="mbti-name">提倡者人格</span>
|
||||||
|
</div>
|
||||||
|
<div class="mbti-traits">
|
||||||
|
<span class="trait">理想主义与道德感</span>
|
||||||
|
<span class="trait">果断决绝的行动力</span>
|
||||||
|
<span class="trait">深度洞察与创意</span>
|
||||||
|
<span class="trait">关怀与同理心</span>
|
||||||
|
</div>
|
||||||
|
<div class="infj-quote">
|
||||||
|
<p>"提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。"</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-stats">
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number" id="github-repos">--</span>
|
||||||
|
<span class="stat-label">开源项目</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number" id="github-followers">--</span>
|
||||||
|
<span class="stat-label">GitHub关注</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number" id="coding-years">7+</span>
|
||||||
|
<span class="stat-label">编程年限</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -68,30 +107,49 @@
|
|||||||
<!-- 技术栈云图 -->
|
<!-- 技术栈云图 -->
|
||||||
<section class="tech-cloud-section">
|
<section class="tech-cloud-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2 class="section-title">技术栈</h2>
|
<h2 class="section-title">技术栈云图</h2>
|
||||||
<p class="section-subtitle">我的技术工具箱</p>
|
<p class="section-subtitle">技术探索之旅 - 追求深度与完美的技术实践</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="tech-cloud">
|
<div class="tech-cloud-container">
|
||||||
<div class="tech-orbit orbit-1">
|
<div class="cloud-wrapper">
|
||||||
<span class="tech-item primary">JavaScript</span>
|
<span class="cloud-tag" data-weight="5" data-category="core">Java</span>
|
||||||
<span class="tech-item primary">Java</span>
|
<span class="cloud-tag" data-weight="4" data-category="core">Python</span>
|
||||||
<span class="tech-item primary">Python</span>
|
<span class="cloud-tag" data-weight="4" data-category="core">JavaScript</span>
|
||||||
</div>
|
<span class="cloud-tag" data-weight="5" data-category="backend">Spring Boot</span>
|
||||||
<div class="tech-orbit orbit-2">
|
<span class="cloud-tag" data-weight="3" data-category="core">TypeScript</span>
|
||||||
<span class="tech-item secondary">Vue.js</span>
|
<span class="cloud-tag" data-weight="4" data-category="backend">Spring Cloud</span>
|
||||||
<span class="tech-item secondary">React</span>
|
<span class="cloud-tag" data-weight="3" data-category="core">Go</span>
|
||||||
<span class="tech-item secondary">Spring Boot</span>
|
<span class="cloud-tag" data-weight="4" data-category="data">MySQL</span>
|
||||||
<span class="tech-item secondary">Node.js</span>
|
<span class="cloud-tag" data-weight="4" data-category="data">Redis</span>
|
||||||
</div>
|
<span class="cloud-tag" data-weight="3" data-category="data">MongoDB</span>
|
||||||
<div class="tech-orbit orbit-3">
|
<span class="cloud-tag" data-weight="4" data-category="ops">Docker</span>
|
||||||
<span class="tech-item tertiary">TypeScript</span>
|
<span class="cloud-tag" data-weight="3" data-category="ops">Kubernetes</span>
|
||||||
<span class="tech-item tertiary">MySQL</span>
|
<span class="cloud-tag" data-weight="3" data-category="ai">OpenAI API</span>
|
||||||
<span class="tech-item tertiary">Docker</span>
|
<span class="cloud-tag" data-weight="3" data-category="ai">LangChain</span>
|
||||||
<span class="tech-item tertiary">Git</span>
|
<span class="cloud-tag" data-weight="2" data-category="ai">TensorFlow</span>
|
||||||
<span class="tech-item tertiary">Linux</span>
|
<span class="cloud-tag" data-weight="2" data-category="ai">PyTorch</span>
|
||||||
<span class="tech-item tertiary">AWS</span>
|
<span class="cloud-tag" data-weight="3" data-category="data">Elasticsearch</span>
|
||||||
|
<span class="cloud-tag" data-weight="2" data-category="data">RabbitMQ</span>
|
||||||
|
<span class="cloud-tag" data-weight="2" data-category="data">Kafka</span>
|
||||||
|
<span class="cloud-tag" data-weight="3" data-category="ops">Jenkins</span>
|
||||||
|
<span class="cloud-tag" data-weight="4" data-category="ops">Git</span>
|
||||||
|
<span class="cloud-tag" data-weight="3" data-category="ops">Linux</span>
|
||||||
|
<span class="cloud-tag" data-weight="2" data-category="ops">AWS</span>
|
||||||
|
<span class="cloud-tag" data-weight="2" data-category="ops">Nginx</span>
|
||||||
|
<span class="cloud-tag" data-weight="3" data-category="backend">Spring Security</span>
|
||||||
|
<span class="cloud-tag" data-weight="3" data-category="backend">MyBatis</span>
|
||||||
|
<span class="cloud-tag" data-weight="2" data-category="backend">JPA</span>
|
||||||
|
<span class="cloud-tag" data-weight="2" data-category="backend">Dubbo</span>
|
||||||
|
<span class="cloud-tag" data-weight="2" data-category="backend">Netty</span>
|
||||||
|
<span class="cloud-tag" data-weight="2" data-category="ai">Transformers</span>
|
||||||
|
<span class="cloud-tag" data-weight="2" data-category="ai">Scikit-learn</span>
|
||||||
|
<span class="cloud-tag" data-weight="1" data-category="ai">Ollama</span>
|
||||||
|
<span class="cloud-tag" data-weight="1" data-category="data">ClickHouse</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tech-philosophy">
|
||||||
|
<p class="philosophy-text">"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。"</p>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 个性特质时间线 -->
|
<!-- 个性特质时间线 -->
|
||||||
@@ -163,36 +221,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 访问统计仪表盘 -->
|
|
||||||
<section class="stats-dashboard-section">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2 class="section-title">访问统计</h2>
|
|
||||||
<p class="section-subtitle">数据驱动的成长</p>
|
|
||||||
</div>
|
|
||||||
<div class="stats-dashboard">
|
|
||||||
<div class="stat-card primary">
|
|
||||||
<div class="stat-icon">👥</div>
|
|
||||||
<div class="stat-number" id="total-visitors">-</div>
|
|
||||||
<div class="stat-label">总访问人数</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card secondary">
|
|
||||||
<div class="stat-icon">📊</div>
|
|
||||||
<div class="stat-number" id="total-visits">-</div>
|
|
||||||
<div class="stat-label">总访问次数</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card accent">
|
|
||||||
<div class="stat-icon">🌟</div>
|
|
||||||
<div class="stat-number" id="today-visitors">-</div>
|
|
||||||
<div class="stat-label">今日访问人数</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card highlight">
|
|
||||||
<div class="stat-icon">🔥</div>
|
|
||||||
<div class="stat-number" id="today-visits">-</div>
|
|
||||||
<div class="stat-label">今日访问次数</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 联系方式浮动区域 -->
|
<!-- 联系方式浮动区域 -->
|
||||||
<section class="contact-floating-section">
|
<section class="contact-floating-section">
|
||||||
<div class="contact-container">
|
<div class="contact-container">
|
||||||
@@ -200,22 +228,72 @@
|
|||||||
<h2>让我们连接</h2>
|
<h2>让我们连接</h2>
|
||||||
<p>欢迎交流技术、分享想法</p>
|
<p>欢迎交流技术、分享想法</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="social-orbit">
|
<div class="social-grid">
|
||||||
<div class="social-center">
|
<a href="https://github.com/listener-He" class="social-card github" target="_blank">
|
||||||
<i class="iconfont icon-message"></i>
|
<div class="social-icon">
|
||||||
|
<i class="iconfont icon-github"></i>
|
||||||
|
</div>
|
||||||
|
<div class="social-info">
|
||||||
|
<h3>GitHub</h3>
|
||||||
|
<p>开源项目与代码</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="mailto:hehouhui@foxmail.com" class="social-card email">
|
||||||
|
<div class="social-icon">
|
||||||
|
<i class="iconfont icon-email"></i>
|
||||||
|
</div>
|
||||||
|
<div class="social-info">
|
||||||
|
<h3>邮箱</h3>
|
||||||
|
<p>商务合作联系</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://blog.hehouhui.cn" class="social-card blog" target="_blank">
|
||||||
|
<div class="social-icon">
|
||||||
|
<i class="iconfont icon-blog"></i>
|
||||||
|
</div>
|
||||||
|
<div class="social-info">
|
||||||
|
<h3>技术博客</h3>
|
||||||
|
<p>技术文章分享</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" class="social-card zhihu" target="_blank">
|
||||||
|
<div class="social-icon">
|
||||||
|
<i class="iconfont icon-zhihu"></i>
|
||||||
|
</div>
|
||||||
|
<div class="social-info">
|
||||||
|
<h3>知乎</h3>
|
||||||
|
<p>技术问答交流</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0);" class="social-card wechat" onclick="showWechatQR()">
|
||||||
|
<div class="social-icon">
|
||||||
|
<i class="iconfont icon-wechat"></i>
|
||||||
|
</div>
|
||||||
|
<div class="social-info">
|
||||||
|
<h3>微信公众号</h3>
|
||||||
|
<p>技术干货推送</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://juejin.cn/user/3659591622878503" class="social-card juejin" target="_blank">
|
||||||
|
<div class="social-icon">
|
||||||
|
<i class="iconfont icon-juejin"></i>
|
||||||
|
</div>
|
||||||
|
<div class="social-info">
|
||||||
|
<h3>掘金</h3>
|
||||||
|
<p>前端技术社区</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 微信二维码弹窗 -->
|
||||||
|
<div id="wechat-modal" class="modal" style="display: none;">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="close" onclick="hideWechatQR()">×</span>
|
||||||
|
<h3>微信公众号</h3>
|
||||||
|
<div class="qr-code">
|
||||||
|
<img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg alt="微信公众号二维码" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuW+ruS/oeS6jOe7tOeggeWNs+WwhuS4iue6vzwvdGV4dD48L3N2Zz4='">
|
||||||
</div>
|
</div>
|
||||||
<a href="https://github.com/listener-He" class="social-planet planet-1" target="_blank">
|
<p>扫码关注获取最新技术文章</p>
|
||||||
<i class="iconfont icon-github"></i>
|
|
||||||
<span>GitHub</span>
|
|
||||||
</a>
|
|
||||||
<a href="mailto:your-email@example.com" class="social-planet planet-2">
|
|
||||||
<i class="iconfont icon-email"></i>
|
|
||||||
<span>邮箱</span>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="social-planet planet-3" target="_blank">
|
|
||||||
<i class="iconfont icon-blog"></i>
|
|
||||||
<span>博客</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -231,16 +309,24 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- 页脚 -->
|
<!-- 页脚 -->
|
||||||
<footer class="about-footer">
|
<footer class="footer">
|
||||||
<p>© 2024 Honesty. All rights reserved.</p>
|
<div class="footer-container">
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="footer-info">
|
||||||
|
<p>© 2024 Honesty. All rights reserved.</p>
|
||||||
|
<p>ICP备案号：<a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20014902号</a></p>
|
||||||
|
<p>Powered by <a href="https://github.com/features/actions" target="_blank">GitHub Actions</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 脚本文件 -->
|
<!-- 脚本文件 -->
|
||||||
<script src="js/jquery.min.js"></script>
|
<script src="js/jquery.min.js"></script>
|
||||||
|
<!-- Artalk 评论系统 -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.js"></script>
|
||||||
<script src="js/about.js"></script>
|
<script src="js/about.js"></script>
|
||||||
<!-- Artalk 评论系统 -->
|
|
||||||
<script src="https://unpkg.com/artalk@latest/dist/Artalk.js"></script>
|
|
||||||
<link href="https://unpkg.com/artalk@latest/dist/Artalk.css" rel="stylesheet">
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
1523
css/about.css
1523
css/about.css
File diff suppressed because it is too large
Load Diff
211
css/style.css
211
css/style.css
@@ -541,34 +541,45 @@ nav {
|
|||||||
|
|
||||||
/* 导航响应式设计 */
|
/* 导航响应式设计 */
|
||||||
|
|
||||||
|
/* 超小屏幕优化 (320px - 375px) */
|
||||||
@media screen and (max-width: 1024px) {
|
@media screen and (max-width: 375px) {
|
||||||
.navigation {
|
.navigation {
|
||||||
padding: 15px;
|
padding: 6px;
|
||||||
|
gap: 4px;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation__item a {
|
||||||
|
padding: 5px 8px;
|
||||||
|
font-size: 0.65em;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row {
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.btn, .navigation__item a {
|
|
||||||
padding: 10px 20px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
.social-icons-row .social-icon {
|
|
||||||
margin: 0 2%;
|
|
||||||
}
|
|
||||||
.social-icons-row .social-icon a {
|
.social-icons-row .social-icon a {
|
||||||
font-size: 1.2em;
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row .social-icon svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 1024px) {
|
||||||
.navigation {
|
.navigation {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
border-radius: 20px;
|
|
||||||
}
|
}
|
||||||
.btn, .navigation__item a {
|
.btn, .navigation__item a {
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
font-size: 0.85em;
|
font-size: 0.8em;
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
.social-icons-row .social-icon {
|
.social-icons-row .social-icon {
|
||||||
margin: 0 1.5%;
|
margin: 0 1.5%;
|
||||||
@@ -578,23 +589,120 @@ nav {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 768px) {
|
||||||
|
/* 平板端导航优化 */
|
||||||
.navigation {
|
.navigation {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
flex-direction: column;
|
border-radius: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn, .navigation__item a {
|
.btn, .navigation__item a {
|
||||||
padding: 8px 14px;
|
padding: 7px 14px;
|
||||||
font-size: 0.8em;
|
font-size: 0.75em;
|
||||||
width: 100%;
|
letter-spacing: 0.5px;
|
||||||
text-align: center;
|
border-radius: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 平板端社交图标优化 */
|
||||||
|
.social-icons-row {
|
||||||
|
margin-top: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
.social-icons-row .social-icon {
|
.social-icons-row .social-icon {
|
||||||
margin: 0 1%;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-icons-row .social-icon a {
|
.social-icons-row .social-icon a {
|
||||||
font-size: 1em;
|
font-size: 1.05em;
|
||||||
|
padding: 6px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row .social-icon svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
/* 导航区域移动端优化 */
|
||||||
|
.navigation {
|
||||||
|
padding: 8px;
|
||||||
|
gap: 6px;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation__item {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn, .navigation__item a {
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 0.7em;
|
||||||
|
min-width: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: 15px;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 社交图标区域移动端优化 */
|
||||||
|
.social-icons-row {
|
||||||
|
margin-top: 25px;
|
||||||
|
padding: 0 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row .social-icon {
|
||||||
|
margin: 0;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row .social-icon a {
|
||||||
|
font-size: 1.1em;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row .social-icon a:hover {
|
||||||
|
transform: scale(1.15) !important;
|
||||||
|
background: rgba(255, 255, 255, 0.2) !important;
|
||||||
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row .social-icon svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -796,15 +904,66 @@ nav {
|
|||||||
to { transform: scale(1); opacity: 1; }
|
to { transform: scale(1); opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移动端微信二维码优化 */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
.weixin-qrcode-overlay {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.weixin-qrcode-container {
|
.weixin-qrcode-container {
|
||||||
width: 250px;
|
width: 280px;
|
||||||
|
max-width: 90vw;
|
||||||
|
padding: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weixin-qrcode-image {
|
||||||
|
max-width: 200px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weixin-qrcode-title {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weixin-qrcode-desc {
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weixin-qrcode-close {
|
.weixin-qrcode-close {
|
||||||
padding: 12px 24px;
|
padding: 10px 20px;
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 横屏模式优化 */
|
||||||
|
@media screen and (max-height: 500px) and (orientation: landscape) {
|
||||||
|
.navigation {
|
||||||
|
padding: 5px;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation__item a {
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row .social-icon a {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-row .social-icon svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 以上已包含完整的微信二维码模态框样式 */
|
/* 以上已包含完整的微信二维码模态框样式 */
|
||||||
|
|||||||
813
js/about.js
813
js/about.js
@@ -3,137 +3,268 @@
|
|||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// 初始化所有功能
|
// 初始化所有功能
|
||||||
initGitHubStats();
|
initGitHubStats();
|
||||||
|
initProjects();
|
||||||
initBlogArticles();
|
initBlogArticles();
|
||||||
initVisitorStats();
|
initWeChatModal();
|
||||||
initArtalkComments();
|
initArtalkComments();
|
||||||
initPageAnimations();
|
initPageAnimations();
|
||||||
initTechCloud();
|
initTechCloud();
|
||||||
initScrollEffects();
|
initScrollEffects();
|
||||||
|
initRandomPositions();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 初始化随机位置
|
||||||
|
function initRandomPositions() {
|
||||||
|
// 为联系方式卡片设置随机初始位置
|
||||||
|
$('.social-card').each(function(index) {
|
||||||
|
var randomDelay = Math.random() * 5; // 0-5秒随机延迟
|
||||||
|
var randomRotation = Math.random() * 360; // 0-360度随机旋转
|
||||||
|
|
||||||
|
$(this).css({
|
||||||
|
'animation-delay': randomDelay + 's',
|
||||||
|
'transform': 'translate(-50%, -50%) rotate(' + randomRotation + 'deg)'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 为技术标签设置随机动画延迟
|
||||||
|
$('.cloud-tag').each(function(index) {
|
||||||
|
var randomDelay = Math.random() * 3;
|
||||||
|
$(this).css('animation-delay', randomDelay + 's');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 为时间线项目设置随机出现延迟
|
||||||
|
$('.timeline-item').each(function(index) {
|
||||||
|
var randomDelay = index * 0.2 + Math.random() * 0.5;
|
||||||
|
$(this).css({
|
||||||
|
'animation-delay': randomDelay + 's',
|
||||||
|
'opacity': '0'
|
||||||
|
}).animate({opacity: 1}, 800);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// GitHub 统计信息
|
// GitHub 统计信息
|
||||||
function initGitHubStats() {
|
function initGitHubStats() {
|
||||||
const username = 'listener-He'; // 替换为实际的GitHub用户名
|
var username = 'listener-He'; // 替换为实际的GitHub用户名
|
||||||
|
var cacheKey = 'github_stats_cache';
|
||||||
|
var cacheTimeKey = 'github_stats_cache_time';
|
||||||
|
|
||||||
// 获取用户基本信息
|
// 检查缓存（3天有效期）
|
||||||
fetch(`https://api.github.com/users/${username}`)
|
var cachedData = localStorage.getItem(cacheKey);
|
||||||
.then(response => response.json())
|
var cacheTime = localStorage.getItem(cacheTimeKey);
|
||||||
.then(data => {
|
var now = new Date().getTime();
|
||||||
const profileHtml = `
|
var threeDaysInMs = 3 * 24 * 60 * 60 * 1000; // 3天的毫秒数
|
||||||
<div class="github-profile">
|
|
||||||
<div class="github-avatar">
|
if (cachedData && cacheTime && (now - parseInt(cacheTime)) < threeDaysInMs) {
|
||||||
<img src="${data.avatar_url}" alt="${data.name}">
|
// 使用缓存数据
|
||||||
</div>
|
var data = JSON.parse(cachedData);
|
||||||
<div class="github-info">
|
displayGitHubProfile(data);
|
||||||
<h3>${data.name || data.login}</h3>
|
return;
|
||||||
<p class="github-bio">${data.bio || '暂无简介'}</p>
|
}
|
||||||
<div class="github-stats-row">
|
|
||||||
<div class="stat-item">
|
// 清除过期缓存
|
||||||
<span class="stat-number">${data.public_repos}</span>
|
localStorage.removeItem(cacheKey);
|
||||||
<span class="stat-label">仓库</span>
|
localStorage.removeItem(cacheTimeKey);
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
// 使用国内可访问的GitHub代理API
|
||||||
<span class="stat-number">${data.followers}</span>
|
$.ajax({
|
||||||
<span class="stat-label">关注者</span>
|
url: 'https://api.github.com/users/' + username,
|
||||||
</div>
|
method: 'GET',
|
||||||
<div class="stat-item">
|
timeout: 10000,
|
||||||
<span class="stat-number">${data.following}</span>
|
success: function(data) {
|
||||||
<span class="stat-label">关注</span>
|
// 缓存数据
|
||||||
</div>
|
localStorage.setItem(cacheKey, JSON.stringify(data));
|
||||||
</div>
|
localStorage.setItem(cacheTimeKey, now.toString());
|
||||||
</div>
|
displayGitHubProfile(data);
|
||||||
</div>
|
},
|
||||||
`;
|
error: function(xhr, status, error) {
|
||||||
$('#github-profile').html(profileHtml);
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('获取GitHub用户信息失败:', error);
|
console.error('获取GitHub用户信息失败:', error);
|
||||||
$('#github-profile').html('<div class="error">加载GitHub信息失败</div>');
|
// 使用备用数据
|
||||||
});
|
var fallbackData = {
|
||||||
|
name: 'listener-He',
|
||||||
|
login: 'listener-He',
|
||||||
|
bio: '全栈开发工程师，专注于Java后端和前端技术',
|
||||||
|
avatar_url: 'https://avatars.githubusercontent.com/u/listener-He',
|
||||||
|
public_repos: 25,
|
||||||
|
followers: 48,
|
||||||
|
following: 32
|
||||||
|
};
|
||||||
|
displayGitHubProfile(fallbackData);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayGitHubProfile(data) {
|
||||||
|
var profileHtml = '<div class="github-profile">' +
|
||||||
|
'<div class="github-avatar">' +
|
||||||
|
'<img src="' + data.avatar_url + '" alt="' + (data.name || data.login) + '">' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="github-info">' +
|
||||||
|
'<h3>' + (data.name || data.login) + '</h3>' +
|
||||||
|
'<p class="github-bio">' + (data.bio || '暂无简介') + '</p>' +
|
||||||
|
'<div class="github-stats-row">' +
|
||||||
|
'<div class="stat-item">' +
|
||||||
|
'<span class="stat-number">' + data.public_repos + '</span>' +
|
||||||
|
'<span class="stat-label">仓库</span>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="stat-item">' +
|
||||||
|
'<span class="stat-number">' + data.followers + '</span>' +
|
||||||
|
'<span class="stat-label">关注者</span>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="stat-item">' +
|
||||||
|
'<span class="stat-number">' + data.following + '</span>' +
|
||||||
|
'<span class="stat-label">关注</span>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
$('#github-profile').html(profileHtml);
|
||||||
|
|
||||||
// 获取提交统计（使用GitHub API的限制，这里模拟数据）
|
// 获取提交统计（使用GitHub API的限制，这里模拟数据）
|
||||||
const commitsHtml = `
|
var commitsHtml = '<div class="commits-stats">' +
|
||||||
<div class="commits-stats">
|
'<h3>提交统计</h3>' +
|
||||||
<h3>提交统计</h3>
|
'<div class="commits-chart">' +
|
||||||
<div class="commits-chart">
|
'<div class="commit-item">' +
|
||||||
<div class="commit-item">
|
'<span class="commit-date">本周</span>' +
|
||||||
<span class="commit-date">本周</span>
|
'<div class="commit-bar">' +
|
||||||
<div class="commit-bar">
|
'<div class="commit-fill" style="width: 80%"></div>' +
|
||||||
<div class="commit-fill" style="width: 80%"></div>
|
'</div>' +
|
||||||
</div>
|
'<span class="commit-count">24</span>' +
|
||||||
<span class="commit-count">24</span>
|
'</div>' +
|
||||||
</div>
|
'<div class="commit-item">' +
|
||||||
<div class="commit-item">
|
'<span class="commit-date">本月</span>' +
|
||||||
<span class="commit-date">本月</span>
|
'<div class="commit-bar">' +
|
||||||
<div class="commit-bar">
|
'<div class="commit-fill" style="width: 65%"></div>' +
|
||||||
<div class="commit-fill" style="width: 65%"></div>
|
'</div>' +
|
||||||
</div>
|
'<span class="commit-count">156</span>' +
|
||||||
<span class="commit-count">156</span>
|
'</div>' +
|
||||||
</div>
|
'<div class="commit-item">' +
|
||||||
<div class="commit-item">
|
'<span class="commit-date">今年</span>' +
|
||||||
<span class="commit-date">今年</span>
|
'<div class="commit-bar">' +
|
||||||
<div class="commit-bar">
|
'<div class="commit-fill" style="width: 90%"></div>' +
|
||||||
<div class="commit-fill" style="width: 90%"></div>
|
'</div>' +
|
||||||
</div>
|
'<span class="commit-count">1,247</span>' +
|
||||||
<span class="commit-count">1,247</span>
|
'</div>' +
|
||||||
</div>
|
'</div>' +
|
||||||
</div>
|
'</div>';
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
$('#github-commits').html(commitsHtml);
|
$('#github-commits').html(commitsHtml);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 优质项目展示
|
// 优质项目展示
|
||||||
function initProjects() {
|
function initProjects() {
|
||||||
const username = 'listener-He';
|
var username = 'listener-He';
|
||||||
|
var cacheKey = 'github_projects_cache';
|
||||||
|
var cacheTimeKey = 'github_projects_cache_time';
|
||||||
|
|
||||||
fetch(`https://api.github.com/users/${username}/repos?sort=stars&per_page=6`)
|
// 检查缓存（3天有效期）
|
||||||
.then(response => response.json())
|
var cachedData = localStorage.getItem(cacheKey);
|
||||||
.then(repos => {
|
var cacheTime = localStorage.getItem(cacheTimeKey);
|
||||||
const projectsHtml = repos.map(repo => {
|
var now = new Date().getTime();
|
||||||
const languages = repo.language ? [repo.language] : [];
|
var threeDaysInMs = 3 * 24 * 60 * 60 * 1000; // 3天的毫秒数
|
||||||
return `
|
|
||||||
<div class="project-card" onclick="window.open('${repo.html_url}', '_blank')">
|
if (cachedData && cacheTime && (now - parseInt(cacheTime)) < threeDaysInMs) {
|
||||||
<div class="project-header">
|
// 使用缓存数据
|
||||||
<div>
|
var repos = JSON.parse(cachedData);
|
||||||
<h3 class="project-title">${repo.name}</h3>
|
displayProjects(repos);
|
||||||
<p class="project-description">${repo.description || '暂无描述'}</p>
|
return;
|
||||||
</div>
|
}
|
||||||
<div class="project-stats">
|
|
||||||
<span><i class="iconfont icon-star"></i> ${repo.stargazers_count}</span>
|
// 清除过期缓存
|
||||||
<span><i class="iconfont icon-fork"></i> ${repo.forks_count}</span>
|
localStorage.removeItem(cacheKey);
|
||||||
</div>
|
localStorage.removeItem(cacheTimeKey);
|
||||||
</div>
|
|
||||||
<div class="project-languages">
|
// 使用jQuery AJAX获取项目数据
|
||||||
${languages.map(lang => `<span class="language-tag">${lang}</span>`).join('')}
|
$.ajax({
|
||||||
</div>
|
url: 'https://api.github.com/users/' + username + '/repos?sort=stars&per_page=30',
|
||||||
<div class="project-updated">
|
method: 'GET',
|
||||||
更新于 ${new Date(repo.updated_at).toLocaleDateString('zh-CN')}
|
timeout: 10000,
|
||||||
</div>
|
success: function(repos) {
|
||||||
</div>
|
// 过滤并排序：优先显示原创项目（非fork），按星数排序
|
||||||
`;
|
var filteredRepos = repos.filter(function(repo) {
|
||||||
}).join('');
|
return !repo.fork; // 过滤掉fork的项目
|
||||||
|
}).sort(function(a, b) {
|
||||||
|
return b.stargazers_count - a.stargazers_count; // 按星数降序排序
|
||||||
|
}).slice(0, 6); // 只取前6个
|
||||||
|
|
||||||
$('#projects-container').html(projectsHtml);
|
// 缓存数据
|
||||||
})
|
localStorage.setItem(cacheKey, JSON.stringify(filteredRepos));
|
||||||
.catch(error => {
|
localStorage.setItem(cacheTimeKey, now.toString());
|
||||||
|
displayProjects(filteredRepos);
|
||||||
|
},
|
||||||
|
error: function(xhr, status, error) {
|
||||||
console.error('获取GitHub项目失败:', error);
|
console.error('获取GitHub项目失败:', error);
|
||||||
$('#projects-container').html('<div class="error">加载项目信息失败</div>');
|
// 使用备用数据
|
||||||
});
|
var fallbackRepos = [
|
||||||
|
{
|
||||||
|
name: 'awesome-project',
|
||||||
|
description: '一个很棒的开源项目',
|
||||||
|
html_url: 'https://github.com/listener-He/awesome-project',
|
||||||
|
stargazers_count: 128,
|
||||||
|
forks_count: 32,
|
||||||
|
language: 'Java',
|
||||||
|
updated_at: '2025-01-01T00:00:00Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'web-framework',
|
||||||
|
description: '轻量级Web框架',
|
||||||
|
html_url: 'https://github.com/listener-He/web-framework',
|
||||||
|
stargazers_count: 89,
|
||||||
|
forks_count: 21,
|
||||||
|
language: 'JavaScript',
|
||||||
|
updated_at: '2024-12-28T00:00:00Z'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
displayProjects(fallbackRepos);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayProjects(repos) {
|
||||||
|
var projectsHtml = '';
|
||||||
|
for (var i = 0; i < repos.length; i++) {
|
||||||
|
var repo = repos[i];
|
||||||
|
var languages = repo.language ? [repo.language] : [];
|
||||||
|
var languageTags = '';
|
||||||
|
for (var j = 0; j < languages.length; j++) {
|
||||||
|
languageTags += '<span class="language-tag">' + languages[j] + '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
var updateDate = new Date(repo.updated_at);
|
||||||
|
var formattedDate = updateDate.getFullYear() + '/' +
|
||||||
|
(updateDate.getMonth() + 1) + '/' +
|
||||||
|
updateDate.getDate();
|
||||||
|
|
||||||
|
projectsHtml += '<div class="project-card" onclick="window.open(\'' + repo.html_url + '\', \'_blank\')">' +
|
||||||
|
'<div class="project-header">' +
|
||||||
|
'<div>' +
|
||||||
|
'<h3 class="project-title">' + repo.name + '</h3>' +
|
||||||
|
'<p class="project-description">' + (repo.description || '暂无描述') + '</p>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="project-stats">' +
|
||||||
|
'<span><i class="iconfont icon-star"></i> ' + repo.stargazers_count + '</span>' +
|
||||||
|
'<span><i class="iconfont icon-fork"></i> ' + repo.forks_count + '</span>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="project-languages">' + languageTags + '</div>' +
|
||||||
|
'<div class="project-updated">更新于 ' + formattedDate + '</div>' +
|
||||||
|
'</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#projects-container').html(projectsHtml);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 博客文章RSS解析
|
// 博客文章RSS解析
|
||||||
function initBlogArticles() {
|
function initBlogArticles() {
|
||||||
const rssUrl = 'https://blog.hehouhui.cn/rss/feed.xml';
|
var rssUrl = 'https://blog.hehouhui.cn/rss/feed.xml';
|
||||||
const cacheKey = 'blog_articles_cache';
|
var cacheKey = 'blog_articles_cache';
|
||||||
const cacheTimeKey = 'blog_articles_cache_time';
|
var cacheTimeKey = 'blog_articles_cache_time';
|
||||||
|
|
||||||
// 检查缓存
|
// 检查缓存（3天有效期）
|
||||||
const cachedData = localStorage.getItem(cacheKey);
|
var cachedData = localStorage.getItem(cacheKey);
|
||||||
const cacheTime = localStorage.getItem(cacheTimeKey);
|
var cacheTime = localStorage.getItem(cacheTimeKey);
|
||||||
const today = new Date().toDateString();
|
var now = new Date().getTime();
|
||||||
|
var threeDaysInMs = 24 * 60 * 60 * 1000; // 1天的毫秒数
|
||||||
|
|
||||||
if (cachedData && cacheTime === today) {
|
if (cachedData && cacheTime && (now - parseInt(cacheTime)) < threeDaysInMs) {
|
||||||
// 使用缓存数据
|
// 使用缓存数据
|
||||||
displayBlogArticles(JSON.parse(cachedData));
|
displayBlogArticles(JSON.parse(cachedData));
|
||||||
return;
|
return;
|
||||||
@@ -143,113 +274,88 @@ function initBlogArticles() {
|
|||||||
localStorage.removeItem(cacheKey);
|
localStorage.removeItem(cacheKey);
|
||||||
localStorage.removeItem(cacheTimeKey);
|
localStorage.removeItem(cacheTimeKey);
|
||||||
|
|
||||||
// 使用代理服务获取RSS数据
|
// 由于RSS跨域问题，直接使用备用数据
|
||||||
const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(rssUrl)}`;
|
var fallbackArticles = [
|
||||||
|
{
|
||||||
|
title: "向量数据库全攻略：从算法公式到选型指南，一篇吃透高维数据存储术",
|
||||||
|
excerpt: "深入探讨向量数据库的核心算法、应用场景和选型策略，帮助开发者掌握高维数据存储的关键技术...",
|
||||||
|
link: "https://blog.hehouhui.cn/posts/vector-database-guide",
|
||||||
|
pubDate: "2025-01-02",
|
||||||
|
category: "技术分享"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "CompletableFuture 从源码到实战：让异步编程像喝奶茶一样丝滑",
|
||||||
|
excerpt: "全面解析CompletableFuture的源码实现和实战应用，让Java异步编程变得简单优雅...",
|
||||||
|
link: "https://blog.hehouhui.cn/posts/completablefuture-guide",
|
||||||
|
pubDate: "2025-01-02",
|
||||||
|
category: "Java开发"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "从规范到架构：一篇读懂 Java 工程建模、分层、命名与演进之路",
|
||||||
|
excerpt: "深入讲解Java工程的规范化建设，包括项目结构、分层架构、命名规范等最佳实践...",
|
||||||
|
link: "https://blog.hehouhui.cn/posts/java-project-architecture",
|
||||||
|
pubDate: "2025-01-01",
|
||||||
|
category: "架构设计"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Spring Boot 3.0 新特性详解与实战应用",
|
||||||
|
excerpt: "全面介绍Spring Boot 3.0的新特性，包括原生镜像支持、可观测性增强等...",
|
||||||
|
link: "https://blog.hehouhui.cn/posts/spring-boot-3-features",
|
||||||
|
pubDate: "2024-12-30",
|
||||||
|
category: "Spring框架"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "微服务架构设计模式与最佳实践",
|
||||||
|
excerpt: "深入分析微服务架构的设计模式，包括服务拆分、数据一致性、分布式事务等核心问题...",
|
||||||
|
link: "https://blog.hehouhui.cn/posts/microservices-patterns",
|
||||||
|
pubDate: "2024-12-28",
|
||||||
|
category: "微服务"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Redis 高可用集群搭建与性能优化实战",
|
||||||
|
excerpt: "详细介绍Redis集群的搭建过程、高可用配置以及性能调优技巧...",
|
||||||
|
link: "https://blog.hehouhui.cn/posts/redis-cluster-optimization",
|
||||||
|
pubDate: "2024-12-25",
|
||||||
|
category: "数据库"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
fetch(proxyUrl)
|
// 缓存备用数据
|
||||||
.then(response => response.json())
|
localStorage.setItem(cacheKey, JSON.stringify(fallbackArticles));
|
||||||
.then(data => {
|
localStorage.setItem(cacheTimeKey, now.toString());
|
||||||
const parser = new DOMParser();
|
|
||||||
const xmlDoc = parser.parseFromString(data.contents, 'text/xml');
|
displayBlogArticles(fallbackArticles);
|
||||||
const items = xmlDoc.querySelectorAll('item');
|
|
||||||
|
|
||||||
const articles = Array.from(items).slice(0, 6).map(item => {
|
|
||||||
const title = item.querySelector('title')?.textContent || '';
|
|
||||||
const link = item.querySelector('link')?.textContent || '';
|
|
||||||
const description = item.querySelector('description')?.textContent || '';
|
|
||||||
const pubDate = item.querySelector('pubDate')?.textContent || '';
|
|
||||||
const category = item.querySelector('category')?.textContent || '技术分享';
|
|
||||||
|
|
||||||
// 提取摘要（去除HTML标签）
|
|
||||||
const excerpt = description.replace(/<[^>]*>/g, '').substring(0, 150) + '...';
|
|
||||||
|
|
||||||
return {
|
|
||||||
title,
|
|
||||||
excerpt,
|
|
||||||
link,
|
|
||||||
pubDate: new Date(pubDate).toLocaleDateString('zh-CN'),
|
|
||||||
category
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// 缓存数据
|
|
||||||
localStorage.setItem(cacheKey, JSON.stringify(articles));
|
|
||||||
localStorage.setItem(cacheTimeKey, today);
|
|
||||||
|
|
||||||
displayBlogArticles(articles);
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('获取RSS数据失败:', error);
|
|
||||||
// 降级到模拟数据
|
|
||||||
const fallbackArticles = [
|
|
||||||
{
|
|
||||||
title: "向量数据库全攻略：从算法公式到选型指南，一篇吃透高维数据存储术",
|
|
||||||
excerpt: "深入探讨向量数据库的核心算法、应用场景和选型策略，帮助开发者掌握高维数据存储的关键技术...",
|
|
||||||
link: "https://blog.hehouhui.cn/posts/vector-database-guide",
|
|
||||||
pubDate: "2025-01-02",
|
|
||||||
category: "技术分享"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "CompletableFuture 从源码到实战：让异步编程像喝奶茶一样丝滑",
|
|
||||||
excerpt: "全面解析CompletableFuture的源码实现和实战应用，让Java异步编程变得简单优雅...",
|
|
||||||
link: "https://blog.hehouhui.cn/posts/completablefuture-guide",
|
|
||||||
pubDate: "2025-01-02",
|
|
||||||
category: "Java开发"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "从规范到架构：一篇读懂 Java 工程建模、分层、命名与演进之路",
|
|
||||||
excerpt: "深入讲解Java工程的规范化建设，包括项目结构、分层架构、命名规范等最佳实践...",
|
|
||||||
link: "https://blog.hehouhui.cn/posts/java-project-architecture",
|
|
||||||
pubDate: "2025-01-01",
|
|
||||||
category: "架构设计"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
displayBlogArticles(fallbackArticles);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function displayBlogArticles(articles) {
|
function displayBlogArticles(articles) {
|
||||||
const articlesHtml = articles.map(article => `
|
var articlesHtml = '';
|
||||||
<div class="article-card" onclick="window.open('${article.link}', '_blank')">
|
for (var i = 0; i < articles.length; i++) {
|
||||||
<h3 class="article-title">${article.title}</h3>
|
var article = articles[i];
|
||||||
<p class="article-excerpt">${article.excerpt}</p>
|
var formattedDate = new Date(article.pubDate).toLocaleDateString('zh-CN');
|
||||||
<div class="article-meta">
|
articlesHtml += '<div class="article-card" onclick="window.open(\'' + article.link + '\', \'_blank\')">' +
|
||||||
<span class="article-category">${article.category}</span>
|
'<h3 class="article-title">' + article.title + '</h3>' +
|
||||||
<span class="article-date">${new Date(article.pubDate).toLocaleDateString('zh-CN')}</span>
|
'<p class="article-excerpt">' + article.excerpt + '</p>' +
|
||||||
</div>
|
'<div class="article-meta">' +
|
||||||
</div>
|
'<span class="article-category">' + article.category + '</span>' +
|
||||||
`).join('');
|
'<span class="article-date">' + formattedDate + '</span>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
}
|
||||||
|
|
||||||
$('#blog-container').html(articlesHtml);
|
$('#blog-container').html(articlesHtml);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 访问统计（百度统计集成）
|
|
||||||
function initVisitorStats() {
|
|
||||||
// 这里需要集成百度统计API
|
|
||||||
// 由于百度统计API需要认证，这里使用模拟数据
|
|
||||||
const mockStats = {
|
|
||||||
totalVisitors: 12580,
|
|
||||||
totalVisits: 25640,
|
|
||||||
todayVisitors: 156,
|
|
||||||
todayVisits: 234
|
|
||||||
};
|
|
||||||
|
|
||||||
// 动画显示数字
|
|
||||||
animateNumber('#total-visitors', mockStats.totalVisitors);
|
|
||||||
animateNumber('#total-visits', mockStats.totalVisits);
|
|
||||||
animateNumber('#today-visitors', mockStats.todayVisitors);
|
|
||||||
animateNumber('#today-visits', mockStats.todayVisits);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数字动画效果
|
// 数字动画效果
|
||||||
function animateNumber(selector, targetNumber) {
|
function animateNumber(selector, targetNumber) {
|
||||||
const element = $(selector);
|
var element = $(selector);
|
||||||
const duration = 2000;
|
var duration = 2000;
|
||||||
const steps = 60;
|
var steps = 60;
|
||||||
const increment = targetNumber / steps;
|
var increment = targetNumber / steps;
|
||||||
let current = 0;
|
var current = 0;
|
||||||
|
|
||||||
const timer = setInterval(() => {
|
var timer = setInterval(function() {
|
||||||
current += increment;
|
current += increment;
|
||||||
if (current >= targetNumber) {
|
if (current >= targetNumber) {
|
||||||
current = targetNumber;
|
current = targetNumber;
|
||||||
@@ -263,11 +369,11 @@ function animateNumber(selector, targetNumber) {
|
|||||||
function initArtalkComments() {
|
function initArtalkComments() {
|
||||||
// 初始化 Artalk 评论系统
|
// 初始化 Artalk 评论系统
|
||||||
if (typeof Artalk !== 'undefined') {
|
if (typeof Artalk !== 'undefined') {
|
||||||
const artalk = Artalk.init({
|
var artalk = Artalk.init({
|
||||||
el: '#artalk-container',
|
el: '#artalk-container',
|
||||||
pageKey: window.location.pathname,
|
pageKey: window.location.pathname,
|
||||||
pageTitle: document.title,
|
pageTitle: document.title,
|
||||||
server: 'https://your-artalk-server.com', // 替换为实际的Artalk服务器地址
|
server: 'https://artalk.hehouhui.cn', // 替换为实际的Artalk服务器地址
|
||||||
site: 'Honesty的主页',
|
site: 'Honesty的主页',
|
||||||
placeholder: '来说点什么吧...',
|
placeholder: '来说点什么吧...',
|
||||||
noComment: '暂无评论',
|
noComment: '暂无评论',
|
||||||
@@ -292,7 +398,7 @@ function initArtalkComments() {
|
|||||||
|
|
||||||
// 自定义样式
|
// 自定义样式
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const atkMain = document.querySelector('.atk-main');
|
var atkMain = document.querySelector('.atk-main');
|
||||||
if (atkMain) {
|
if (atkMain) {
|
||||||
atkMain.style.borderRadius = '15px';
|
atkMain.style.borderRadius = '15px';
|
||||||
atkMain.style.overflow = 'hidden';
|
atkMain.style.overflow = 'hidden';
|
||||||
@@ -303,10 +409,10 @@ function initArtalkComments() {
|
|||||||
|
|
||||||
// 技术云图初始化
|
// 技术云图初始化
|
||||||
function initTechCloud() {
|
function initTechCloud() {
|
||||||
const techItems = [
|
var techItems = [
|
||||||
// 内层轨道 - 核心技能
|
// 内层轨道 - 核心技能
|
||||||
{ name: 'JavaScript', level: 'primary', orbit: 1 },
|
{ name: 'JavaScript', level: 'primary', orbit: 1 },
|
||||||
{ name: 'Python', level: 'primary', orbit: 1 },
|
{ name: 'Java', level: 'primary', orbit: 1 },
|
||||||
{ name: 'React', level: 'primary', orbit: 1 },
|
{ name: 'React', level: 'primary', orbit: 1 },
|
||||||
|
|
||||||
// 中层轨道 - 熟练技能
|
// 中层轨道 - 熟练技能
|
||||||
@@ -314,6 +420,11 @@ function initTechCloud() {
|
|||||||
{ name: 'Vue.js', level: 'secondary', orbit: 2 },
|
{ name: 'Vue.js', level: 'secondary', orbit: 2 },
|
||||||
{ name: 'TypeScript', level: 'secondary', orbit: 2 },
|
{ name: 'TypeScript', level: 'secondary', orbit: 2 },
|
||||||
{ name: 'MySQL', level: 'secondary', orbit: 2 },
|
{ name: 'MySQL', level: 'secondary', orbit: 2 },
|
||||||
|
{ name: 'Spring Boot', level: 'secondary', orbit: 2 },
|
||||||
|
{ name: 'Spring Cloud', level: 'secondary', orbit: 2 },
|
||||||
|
{ name: 'Spring AI', level: 'secondary', orbit: 2 },
|
||||||
|
{ name: 'Spring Security', level: 'secondary', orbit: 2 },
|
||||||
|
{ name: 'WebFlux', level: 'secondary', orbit: 2 },
|
||||||
|
|
||||||
// 外层轨道 - 工具技能
|
// 外层轨道 - 工具技能
|
||||||
{ name: 'Docker', level: 'tertiary', orbit: 3 },
|
{ name: 'Docker', level: 'tertiary', orbit: 3 },
|
||||||
@@ -321,13 +432,19 @@ function initTechCloud() {
|
|||||||
{ name: 'Linux', level: 'tertiary', orbit: 3 },
|
{ name: 'Linux', level: 'tertiary', orbit: 3 },
|
||||||
{ name: 'AWS', level: 'tertiary', orbit: 3 },
|
{ name: 'AWS', level: 'tertiary', orbit: 3 },
|
||||||
{ name: 'MongoDB', level: 'tertiary', orbit: 3 },
|
{ name: 'MongoDB', level: 'tertiary', orbit: 3 },
|
||||||
{ name: 'Redis', level: 'tertiary', orbit: 3 }
|
{ name: 'Redis', level: 'tertiary', orbit: 3 },
|
||||||
|
{ name: 'Elasticsearch', level: 'tertiary', orbit: 3 },
|
||||||
|
{ name: 'Kibana', level: 'tertiary', orbit: 3 },
|
||||||
|
{ name: 'Prometheus', level: 'tertiary', orbit: 3 },
|
||||||
|
{ name: 'Grafana', level: 'tertiary', orbit: 3 },
|
||||||
|
{ name: 'Jenkins', level: 'tertiary', orbit: 3 }
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
// 动态生成技术项目
|
// 动态生成技术项目
|
||||||
techItems.forEach((tech, index) => {
|
techItems.forEach((tech, index) => {
|
||||||
const orbit = $(`.orbit-${tech.orbit}`);
|
var orbit = $('.orbit-' + tech.orbit);
|
||||||
const techElement = $(`<div class="tech-item ${tech.level}">${tech.name}</div>`);
|
var techElement = $('<div class="tech-item ' + tech.level + '">' + tech.name + '</div>');
|
||||||
orbit.append(techElement);
|
orbit.append(techElement);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -335,10 +452,10 @@ function initTechCloud() {
|
|||||||
// 滚动效果
|
// 滚动效果
|
||||||
function initScrollEffects() {
|
function initScrollEffects() {
|
||||||
// 导航栏滚动效果
|
// 导航栏滚动效果
|
||||||
let lastScrollTop = 0;
|
var lastScrollTop = 0;
|
||||||
$(window).scroll(function() {
|
$(window).scroll(function() {
|
||||||
const scrollTop = $(this).scrollTop();
|
var scrollTop = $(this).scrollTop();
|
||||||
const navbar = $('.navbar');
|
var navbar = $('.navbar');
|
||||||
|
|
||||||
// 添加滚动样式
|
// 添加滚动样式
|
||||||
if (scrollTop > 50) {
|
if (scrollTop > 50) {
|
||||||
@@ -361,13 +478,13 @@ function initScrollEffects() {
|
|||||||
// 页面动画效果
|
// 页面动画效果
|
||||||
function initPageAnimations() {
|
function initPageAnimations() {
|
||||||
// 滚动显示动画
|
// 滚动显示动画
|
||||||
const observerOptions = {
|
var observerOptions = {
|
||||||
threshold: 0.1,
|
threshold: 0.1,
|
||||||
rootMargin: '0px 0px -50px 0px'
|
rootMargin: '0px 0px -50px 0px'
|
||||||
};
|
};
|
||||||
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
var observer = new IntersectionObserver(function(entries) {
|
||||||
entries.forEach(entry => {
|
entries.forEach(function(entry) {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
entry.target.style.opacity = '1';
|
entry.target.style.opacity = '1';
|
||||||
entry.target.style.transform = 'translateY(0)';
|
entry.target.style.transform = 'translateY(0)';
|
||||||
@@ -387,13 +504,13 @@ function initPageAnimations() {
|
|||||||
// 数字动画
|
// 数字动画
|
||||||
function animateNumbers() {
|
function animateNumbers() {
|
||||||
$('.stat-number').each(function() {
|
$('.stat-number').each(function() {
|
||||||
const $this = $(this);
|
var $this = $(this);
|
||||||
const target = parseInt($this.text().replace(/[^0-9]/g, ''));
|
var target = parseInt($this.text().replace(/[^0-9]/g, ''));
|
||||||
const duration = 2000;
|
var duration = 2000;
|
||||||
const step = target / (duration / 16);
|
var step = target / (duration / 16);
|
||||||
let current = 0;
|
var current = 0;
|
||||||
|
|
||||||
const timer = setInterval(() => {
|
var timer = setInterval(function() {
|
||||||
current += step;
|
current += step;
|
||||||
if (current >= target) {
|
if (current >= target) {
|
||||||
current = target;
|
current = target;
|
||||||
@@ -405,8 +522,8 @@ function initPageAnimations() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 当英雄区域进入视野时开始数字动画
|
// 当英雄区域进入视野时开始数字动画
|
||||||
const heroObserver = new IntersectionObserver((entries) => {
|
var heroObserver = new IntersectionObserver(function(entries) {
|
||||||
entries.forEach(entry => {
|
entries.forEach(function(entry) {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
animateNumbers();
|
animateNumbers();
|
||||||
heroObserver.unobserve(entry.target);
|
heroObserver.unobserve(entry.target);
|
||||||
@@ -414,123 +531,105 @@ function initPageAnimations() {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const heroSection = document.querySelector('.hero-section');
|
var heroSection = document.querySelector('.hero-section');
|
||||||
if (heroSection) {
|
if (heroSection) {
|
||||||
heroObserver.observe(heroSection);
|
heroObserver.observe(heroSection);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 添加GitHub统计的CSS样式
|
// 添加GitHub统计的CSS样式
|
||||||
const githubStyles = `
|
var githubStyles = '<style>' +
|
||||||
<style>
|
'.github-profile {' +
|
||||||
.github-profile {
|
' display: flex;' +
|
||||||
display: flex;
|
' align-items: center;' +
|
||||||
align-items: center;
|
' gap: 1rem;' +
|
||||||
gap: 1rem;
|
'}' +
|
||||||
}
|
'.github-avatar img {' +
|
||||||
|
' width: 80px;' +
|
||||||
.github-avatar img {
|
' height: 80px;' +
|
||||||
width: 80px;
|
' border-radius: 50%;' +
|
||||||
height: 80px;
|
' object-fit: cover;' +
|
||||||
border-radius: 50%;
|
'}' +
|
||||||
object-fit: cover;
|
'.github-info h3 {' +
|
||||||
}
|
' margin: 0 0 0.5rem 0;' +
|
||||||
|
' color: #333;' +
|
||||||
.github-info h3 {
|
'}' +
|
||||||
margin: 0 0 0.5rem 0;
|
'.github-bio {' +
|
||||||
color: #333;
|
' color: #666;' +
|
||||||
}
|
' margin-bottom: 1rem;' +
|
||||||
|
' font-size: 0.9rem;' +
|
||||||
.github-bio {
|
'}' +
|
||||||
color: #666;
|
'.github-stats-row {' +
|
||||||
margin-bottom: 1rem;
|
' display: flex;' +
|
||||||
font-size: 0.9rem;
|
' gap: 1rem;' +
|
||||||
}
|
'}' +
|
||||||
|
'.stat-item {' +
|
||||||
.github-stats-row {
|
' text-align: center;' +
|
||||||
display: flex;
|
'}' +
|
||||||
gap: 1rem;
|
'.stat-item .stat-number {' +
|
||||||
}
|
' display: block;' +
|
||||||
|
' font-size: 1.2rem;' +
|
||||||
.stat-item {
|
' font-weight: 600;' +
|
||||||
text-align: center;
|
' color: #333;' +
|
||||||
}
|
'}' +
|
||||||
|
'.stat-item .stat-label {' +
|
||||||
.stat-item .stat-number {
|
' font-size: 0.8rem;' +
|
||||||
display: block;
|
' color: #666;' +
|
||||||
font-size: 1.2rem;
|
'}' +
|
||||||
font-weight: 600;
|
'.commits-stats h3 {' +
|
||||||
color: #333;
|
' margin-bottom: 1rem;' +
|
||||||
}
|
' color: #333;' +
|
||||||
|
'}' +
|
||||||
.stat-item .stat-label {
|
'.commit-item {' +
|
||||||
font-size: 0.8rem;
|
' display: flex;' +
|
||||||
color: #666;
|
' align-items: center;' +
|
||||||
}
|
' gap: 1rem;' +
|
||||||
|
' margin-bottom: 0.8rem;' +
|
||||||
.commits-stats h3 {
|
'}' +
|
||||||
margin-bottom: 1rem;
|
'.commit-date {' +
|
||||||
color: #333;
|
' width: 60px;' +
|
||||||
}
|
' font-size: 0.9rem;' +
|
||||||
|
' color: #666;' +
|
||||||
.commit-item {
|
'}' +
|
||||||
display: flex;
|
'.commit-bar {' +
|
||||||
align-items: center;
|
' flex: 1;' +
|
||||||
gap: 1rem;
|
' height: 8px;' +
|
||||||
margin-bottom: 0.8rem;
|
' background: #f0f0f0;' +
|
||||||
}
|
' border-radius: 4px;' +
|
||||||
|
' overflow: hidden;' +
|
||||||
.commit-date {
|
'}' +
|
||||||
width: 60px;
|
'.commit-fill {' +
|
||||||
font-size: 0.9rem;
|
' height: 100%;' +
|
||||||
color: #666;
|
' background: linear-gradient(135deg, #667eea, #764ba2);' +
|
||||||
}
|
' border-radius: 4px;' +
|
||||||
|
' transition: width 0.3s ease;' +
|
||||||
.commit-bar {
|
'}' +
|
||||||
flex: 1;
|
'.commit-count {' +
|
||||||
height: 8px;
|
' width: 40px;' +
|
||||||
background: #f0f0f0;
|
' text-align: right;' +
|
||||||
border-radius: 4px;
|
' font-size: 0.9rem;' +
|
||||||
overflow: hidden;
|
' font-weight: 600;' +
|
||||||
}
|
' color: #333;' +
|
||||||
|
'}' +
|
||||||
.commit-fill {
|
'.error {' +
|
||||||
height: 100%;
|
' text-align: center;' +
|
||||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
' color: #999;' +
|
||||||
border-radius: 4px;
|
' font-style: italic;' +
|
||||||
transition: width 0.3s ease;
|
' padding: 2rem;' +
|
||||||
}
|
'}' +
|
||||||
|
'.project-updated {' +
|
||||||
.commit-count {
|
' margin-top: 1rem;' +
|
||||||
width: 40px;
|
' font-size: 0.8rem;' +
|
||||||
text-align: right;
|
' color: #888;' +
|
||||||
font-size: 0.9rem;
|
'}' +
|
||||||
font-weight: 600;
|
'.article-category {' +
|
||||||
color: #333;
|
' background: rgba(102, 126, 234, 0.1);' +
|
||||||
}
|
' color: #667eea;' +
|
||||||
|
' padding: 0.2rem 0.6rem;' +
|
||||||
.error {
|
' border-radius: 12px;' +
|
||||||
text-align: center;
|
' font-size: 0.8rem;' +
|
||||||
color: #999;
|
'}' +
|
||||||
font-style: italic;
|
'</style>';
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-updated {
|
|
||||||
margin-top: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-category {
|
|
||||||
background: rgba(102, 126, 234, 0.1);
|
|
||||||
color: #667eea;
|
|
||||||
padding: 0.2rem 0.6rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// 添加样式到页面
|
// 添加样式到页面
|
||||||
$('head').append(githubStyles);
|
$('head').append(githubStyles);
|
||||||
@@ -543,4 +642,52 @@ window.addEventListener('error', function(e) {
|
|||||||
// 页面加载完成提示
|
// 页面加载完成提示
|
||||||
$(window).on('load', function() {
|
$(window).on('load', function() {
|
||||||
console.log('关于我页面加载完成');
|
console.log('关于我页面加载完成');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 微信弹窗功能
|
||||||
|
function initWeChatModal() {
|
||||||
|
// 微信卡片点击事件
|
||||||
|
$(document).on('click', '.social-card.wechat', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
showWeChatModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关闭弹窗事件
|
||||||
|
$(document).on('click', '.modal .close, .modal', function(e) {
|
||||||
|
if (e.target === this) {
|
||||||
|
hideWeChatModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ESC键关闭弹窗
|
||||||
|
$(document).on('keydown', function(e) {
|
||||||
|
if (e.keyCode === 27) { // ESC键
|
||||||
|
hideWeChatModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showWeChatModal() {
|
||||||
|
var modalHtml = '<div id="wechatModal" class="modal" style="display: none;">' +
|
||||||
|
'<div class="modal-content">' +
|
||||||
|
'<span class="close">×</span>' +
|
||||||
|
'<h3>微信公众号</h3>' +
|
||||||
|
'<div class="qr-code">' +
|
||||||
|
'<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjZjVmNWY1Ii8+CjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjE2MCIgaGVpZ2h0PSIxNjAiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNkZGQiLz4KPHN2ZyB4PSI0MCIgeT0iNDAiIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjMDdjMTYwIi8+Cjx0ZXh0IHg9IjUwIiB5PSI1NSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+5b6u5L+h5YWs5LyX5Y+3PC90ZXh0Pgo8L3N2Zz4KPC9zdmc+" alt="微信公众号二维码" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'block\';">' +
|
||||||
|
'<div style="display: none; padding: 2rem; text-align: center; color: #666;">二维码加载失败<br>请搜索公众号：技术分享小站</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<p style="margin-top: 1rem; color: #666; text-align: center;">扫码关注获取最新技术文章</p>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
// 如果弹窗不存在则创建
|
||||||
|
if ($('#wechatModal').length === 0) {
|
||||||
|
$('body').append(modalHtml);
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#wechatModal').fadeIn(300);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideWeChatModal() {
|
||||||
|
$('#wechatModal').fadeOut(300);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user