From a7b7166fefc7a826c3b9c804332a986a16c125f0 Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Fri, 21 Nov 2025 11:45:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(about):=20=E4=BC=98=E5=8C=96=E5=85=B3?=
 =?UTF-8?q?=E4=BA=8E=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=B8=8E=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增渐变文字与发光文字样式类
- 引入 Google Fonts 字体资源提升视觉效果
- 重构英雄区域布局结构，支持响应式网格排列
- 更新 GitHub 统计模块 UI，采用卡片式设计展示数据
- 调整配色方案，新增主题相关变量定义
- 优化移动端显示效果，改进原有媒体查询逻辑
- 完善夜间模式下的文字与背景适配
- 移除旧版提交统计图表，替换为简洁数字展示形式
---
 about.html    |  17 +--
 css/about.css |  89 +++++++++++++--
 js/about.js   | 301 +++++++++++++++++++++++++++++++++++---------------
 3 files changed, 299 insertions(+), 108 deletions(-)

diff --git a/about.html b/about.html
index d7aa27d..6e45784 100644
--- a/about.html
+++ b/about.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>关于我 - Honesty</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Playfair+Display:ital,wght@0,400;0,700;1,600&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/about.css">
     <link rel="stylesheet" href="css/iconfont.css">
@@ -50,13 +53,13 @@
                             </div>
                         </div>
                     </div>
-                    <div class="hero-right">
+                    <div class="hero-right hero-right-grid">
                         <div class="intro-content">
                             <div class="intro-text">
                                 <div class="quote-section">
                                     <div class="quote-line"></div>
                                     <div class="quote-content">
-                                        <h2>关于我</h2>
+                                        <h2><span class="gradient-text">关于我</span></h2>
                                         <blockquote class="intro-quote">
                                             <p>"我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。"</p>
                                         </blockquote>
@@ -71,7 +74,7 @@
                                     <div class="mbti-header">
                                         <img src="https://blog-file.hehouhui.cn/INFJ.png" alt="INFJ" style="width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.4)">
                                         <span class="mbti-tag">INFJ</span>
-                                        <span class="mbti-name">提倡者人格</span>
+                                        <span class="mbti-name"><span class="gradient-text">提倡者人格</span></span>
                                     </div>
                                     <div class="mbti-traits">
                                         <span class="trait">理想主义与道德感</span>
@@ -80,21 +83,21 @@
                                         <span class="trait">关怀与同理心</span>
                                     </div>
                                     <div class="infj-quote">
-                                        <p>"提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。"</p>
+                                        <p style="margin-top: 1.5rem; color: #2a2d34; font-style: italic">"提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。"</p>
                                     </div>
                                 </div>
                             </div>
                             <div class="hero-stats">
                                 <div class="stat-item">
-                                    <span class="stat-number" id="github-repos">--</span>
+                                    <span class="stat-number glow-text" 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-number glow-text" 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-number glow-text" id="coding-years">7+</span>
                                     <span class="stat-label">编程年限</span>
                                 </div>
                             </div>
diff --git a/css/about.css b/css/about.css
index d808b0e..7ca691c 100644
--- a/css/about.css
+++ b/css/about.css
@@ -34,6 +34,8 @@
     --text-soft: var(--day-text-secondary);
     --glass-alpha: 0.25; /* 增加毛玻璃效果 */
     --glass-border: rgba(0, 0, 0, 0.08);
+    --accent-b: #8adbd0;
+    --accent-coral: #ff887a;
 }
 
 :root.theme-night {
@@ -43,6 +45,8 @@
     --text-soft: rgba(248, 249, 250, 0.85);
     --glass-alpha: 0.18;
     --glass-border: rgba(255, 255, 255, 0.12);
+    --accent-b: #36e4cf;
+    --accent-coral: #ff6b6b;
 }
 
 
@@ -290,6 +294,46 @@ body {
     background-attachment: fixed;
 }
 
+.gradient-text {
+    color: var(--text-strong);
+    background: none;
+    -webkit-text-fill-color: initial;
+    filter: none;
+    display: inline;
+}
+
+.glow-text {
+    background: linear-gradient(45deg, var(--accent-coral), var(--accent-b));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 0 12px rgba(78, 205, 196, 0.35);
+}
+
+.theme-day .gradient-text {
+    color: var(--day-text-primary);
+    background: none;
+    -webkit-text-fill-color: initial;
+}
+
+@supports (-webkit-background-clip: text) {
+  .theme-night .gradient-text {
+      background: linear-gradient(90deg, #a5b4fc, #67e8f9);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+  }
+}
+
+.theme-day .glow-text {
+    background: linear-gradient(45deg, #2a2d34, #3b3f46);
+    -webkit-text-fill-color: transparent;
+    text-shadow: none;
+}
+
+.theme-night .glow-text {
+    background: linear-gradient(45deg, var(--accent-coral), var(--accent-b));
+}
+
 /* 动态背景 */
 body::before {
     content: '';
@@ -386,6 +430,7 @@ a:hover {
     /*color: var(--text-strong); !* 使用主题文字颜色 *!*/
     line-height: 1.7;
     font-size: 1.1rem;
+    font-family: 'Playfair Display', 'Noto Serif SC', serif;
 }
 
 /* 链接下划线动画 */
@@ -687,7 +732,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: 0.9fr 2.1fr;
     gap: 4rem;
     align-items: center;
 }
@@ -803,12 +848,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
     font-size: 0.9rem;
 }
 
-.hero-right {
-    padding-left: 2rem;
-}
+.hero-right { padding-left: 2rem; }
+.hero-right-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-auto-rows: min-content; gap: 2rem; }
+.hero-right-grid .intro-content { grid-column: 1 / 2; }
+.hero-right-grid .personality-section { grid-column: 2 / 3; }
+.hero-right-grid .hero-stats { grid-column: 2 / 3; }
 
 .intro-content h2 {
-    font-size: 2.5rem;
+    font-size: 2.6rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 1.5rem;
@@ -816,6 +863,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    font-family: 'Playfair Display', 'Inter', 'PingFang SC', 'Microsoft YaHei', serif;
 }
 
 .intro-text p {
@@ -889,6 +937,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: titleGlow 3s ease-in-out infinite alternate;
+    font-family: 'Playfair Display', 'Inter', 'PingFang SC', 'Microsoft YaHei', serif;
 }
 
 
@@ -945,6 +994,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
     margin-bottom: 2rem;
     font-weight: 300;
     opacity: 0.8;
+    font-family: 'Inter', 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 .personality-badge {
@@ -1015,6 +1065,8 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
     margin-bottom: 1rem;
     position: relative;
     display: inline-block;
+    font-family: 'Playfair Display', 'Inter', 'PingFang SC', 'Microsoft YaHei', serif;
+    text-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
 }
 
 .section-subtitle {
@@ -2168,11 +2220,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     }
 
-    .hero-container {
-        grid-template-columns: 1fr;
-        text-align: center;
-        gap: 2rem;
-    }
+    .hero-container { grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem; }
+    .hero-right { padding-left: 0; }
+    .hero-right-grid { grid-template-columns: 1fr; grid-auto-rows: min-content; }
+    .hero-right-grid .intro-content { grid-column: 1 / -1; }
+    .hero-right-grid .personality-section { grid-column: 1 / -1; }
+    .hero-right-grid .hero-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
 
     .social-grid {
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -2686,3 +2739,19 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
 }
 
 /* 文件末尾 */
+    .hero-container { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
+    .hero-right { padding-left: 0; }
+    .hero-right-grid { display: block; }
+.theme-day .nav-logo {
+    color: var(--day-text-primary);
+    background: none;
+    -webkit-text-fill-color: initial;
+}
+
+.theme-day .section-title,
+.theme-day .hero-title,
+.theme-day .view-all-link {
+    color: var(--day-text-primary);
+    background: none;
+    -webkit-text-fill-color: initial;
+}
\ No newline at end of file
diff --git a/js/about.js b/js/about.js
index 89ba9b1..27f4ffb 100644
--- a/js/about.js
+++ b/js/about.js
@@ -1,5 +1,3 @@
-
-
 // 关于页面JavaScript功能 - 现代动态版本
 $(document).ready(function() {
     initThemeByTime();
@@ -875,94 +873,235 @@ function initPageAnimations() {
 // 添加GitHub统计的CSS样式
 var githubStyles = '<style>' +
     '.github-profile {' +
-    '    display: flex;' +
-    '    align-items: center;' +
-    '    gap: 1rem;' +
+        '    display: flex;' +
+        '    align-items: center;' +
+        '    gap: 1rem;' +
     '}' +
     '.github-avatar img {' +
-    '    width: 80px;' +
-    '    height: 80px;' +
-    '    border-radius: 50%;' +
-    '    object-fit: cover;' +
+        '    width: 80px;' +
+        '    height: 80px;' +
+        '    border-radius: 50%;' +
+        '    object-fit: cover;' +
     '}' +
     '.github-info h3 {' +
-    '    margin: 0 0 0.5rem 0;' +
-    '    color: #fff;' +
+        '    margin: 0 0 0.5rem 0;' +
+        '    color: var(--text-strong);' +
     '}' +
     '.github-bio {' +
-    '    color: rgba(255, 255, 255, 0.8);' +
-    '    margin-bottom: 1rem;' +
-    '    font-size: 0.9rem;' +
+        '    color: var(--text-soft);' +
+        '    margin-bottom: 1rem;' +
+        '    font-size: 0.9rem;' +
     '}' +
     '.github-stats-row {' +
-    '    display: flex;' +
-    '    gap: 1rem;' +
+        '    display: flex;' +
+        '    gap: 1rem;' +
     '}' +
     '.stat-item {' +
-    '    text-align: center;' +
+        '    text-align: center;' +
     '}' +
     '.stat-item .stat-number {' +
-    '    display: block;' +
-    '    font-size: 1.2rem;' +
-    '    font-weight: 600;' +
-    '    color: #fff;' +
+        '    display: block;' +
+        '    font-size: 1.2rem;' +
+        '    font-weight: 600;' +
+        '    color: var(--text-strong);' +
     '}' +
     '.stat-item .stat-label {' +
-    '    font-size: 0.8rem;' +
-    '    color: rgba(255, 255, 255, 0.8);' +
+        '    font-size: 0.8rem;' +
+        '    color: var(--text-soft);' +
     '}' +
     '.commits-stats h3 {' +
-    '    margin-bottom: 1rem;' +
-    '    color: #fff;' +
+        '    margin-bottom: 1rem;' +
+        '    color: var(--text-strong);' +
     '}' +
     '.commit-item {' +
-    '    display: flex;' +
-    '    align-items: center;' +
-    '    gap: 1rem;' +
-    '    margin-bottom: 0.8rem;' +
+        '    display: flex;' +
+        '    align-items: center;' +
+        '    gap: 1rem;' +
+        '    margin-bottom: 0.8rem;' +
     '}' +
     '.commit-date {' +
-    '    width: 60px;' +
-    '    font-size: 0.9rem;' +
-    '    color: rgba(255, 255, 255, 0.8);' +
+        '    width: 60px;' +
+        '    font-size: 0.9rem;' +
+        '    color: var(--text-soft);' +
     '}' +
     '.commit-bar {' +
-    '    flex: 1;' +
-    '    height: 8px;' +
-    '    background: rgba(255, 255, 255, 0.1);' +
-    '    border-radius: 4px;' +
-    '    overflow: hidden;' +
+        '    flex: 1;' +
+        '    height: 8px;' +
+        '    background: rgba(0, 0, 0, 0.1);' +
+        '    border-radius: 4px;' +
+        '    overflow: hidden;' +
     '}' +
     '.commit-fill {' +
-    '    height: 100%;' +
-    '    background: linear-gradient(135deg, #667eea, #764ba2);' +
-    '    border-radius: 4px;' +
-    '    transition: width 0.3s ease;' +
+        '    height: 100%;' +
+        '    background: linear-gradient(135deg, #667eea, #764ba2);' +
+        '    border-radius: 4px;' +
+        '    transition: width 0.3s ease;' +
     '}' +
     '.commit-count {' +
-    '    width: 40px;' +
-    '    text-align: right;' +
-    '    font-size: 0.9rem;' +
-    '    font-weight: 600;' +
-    '    color: #fff;' +
+        '    width: 40px;' +
+        '    text-align: right;' +
+        '    font-size: 0.9rem;' +
+        '    font-weight: 600;' +
+        '    color: var(--text-strong);' +
     '}' +
     '.error {' +
-    '    text-align: center;' +
-    '    color: rgba(255, 255, 255, 0.5);' +
-    '    font-style: italic;' +
-    '    padding: 2rem;' +
+        '    text-align: center;' +
+        '    color: var(--text-soft);' +
+        '    font-style: italic;' +
+        '    padding: 2rem;' +
     '}' +
     '.project-updated {' +
-    '    margin-top: 1rem;' +
-    '    font-size: 0.8rem;' +
-    '    color: rgba(255, 255, 255, 0.8);' +
+        '    margin-top: 1rem;' +
+        '    font-size: 0.8rem;' +
+        '    color: var(--text-soft);' +
     '}' +
     '.article-category {' +
-    '    background: rgba(102, 126, 234, 0.2);' +
-    '    color: #fff;' +
-    '    padding: 0.2rem 0.6rem;' +
-    '    border-radius: 12px;' +
-    '    font-size: 0.8rem;' +
+        '    background: rgba(102, 126, 234, 0.2);' +
+        '    color: #fff;' +
+        '    padding: 0.2rem 0.6rem;' +
+        '    border-radius: 12px;' +
+        '    font-size: 0.8rem;' +
+    '}' +
+    /* 提交统计两行横排：标题与矩阵 */ +
+    '.commit-inline-title {' +
+        '    margin-left: 12px;' +
+        '    font-weight: 600;' +
+        '    color: var(--text-strong);' +
+        '    font-size: 0.9rem;' +
+        '    opacity: 0.9;' +
+    '}' +
+    '.commit-inline-matrix {' +
+        '    display: grid;' +
+        '    grid-template-columns: repeat(3, max-content);' +
+        '    grid-template-rows: auto auto;' +
+        '    column-gap: 24px;' +
+        '    row-gap: 2px;' +
+        '    margin-top: 4px;' +
+    '}' +
+    '.commit-inline-matrix .commit-num {' +
+        '    font-size: 1.1rem;' +
+        '    font-weight: 700;' +
+        '    color: var(--text-strong);' +
+        '    text-align: left;' +
+    '}' +
+    '.commit-inline-matrix .commit-lab {' +
+        '    font-size: 0.8rem;' +
+        '    color: var(--text-soft);' +
+        '    text-align: left;' +
+    '}' +
+    '.commit-inline {' +
+        '    margin-top: 4px;' +
+    '}' +
+    '.commit-inline-nums,' +
+    '.commit-inline-labs {' +
+        '    display: flex;' +
+        '    gap: 24px;' +
+        '    align-items: baseline;' +
+    '}' +
+    '.commit-inline-nums .commit-num {' +
+        '    font-size: 1.1rem;' +
+        '    font-weight: 700;' +
+        '    color: var(--text-strong);' +
+    '}' +
+    '.commit-inline-labs .commit-lab {' +
+        '    font-size: 0.8rem;' +
+        '    color: var(--text-soft);' +
+    '}' +
+    /* 作者行内提交统计分组 */ +
+    '.commit-inline-group {' +
+        '    display: inline-block;' +
+        '    margin-left: 24px;' +
+        '    vertical-align: middle;' +
+    '}' +
+    '.commit-inline-row {' +
+        '    display: flex;' +
+        '    align-items: flex-end;' +
+        '    gap: 18px;' +
+    '}' +
+    '.commit-inline-group .commit-title {' +
+        '    font-weight: 600;' +
+        '    color: var(--text-strong);'
+        + '    font-size: 0.9rem;' +
+        '    opacity: 0.9;' +
+        '    margin: 0 0 6px 0;' +
+    '}' +
+    '.commit-inline-group .stat-item {' +
+        '    display: flex;' +
+        '    flex-direction: column;' +
+        '    align-items: center;' +
+        '    gap: 4px;' +
+    '}' +
+    '.commit-inline-group .stat-item .stat-number {' +
+        '    font-size: 1rem;' +
+        '    font-weight: 700;' +
+    '}' +
+    '.commit-inline-group .stat-item .stat-label {' +
+        '    font-size: 0.75rem;' +
+        '    color: var(--text-soft);' +
+    '}' +
+    /* 提交统计数字化样式 */ +
+    '.commits-stats {' +
+        '    margin-top: 1rem;' +
+    '}' +
+    '.commits-stats .commit-cards {' +
+        '    display: grid;' +
+        '    grid-template-columns: repeat(3, minmax(0,1fr));' +
+        '    gap: 12px;' +
+    '}' +
+    '.commits-stats .commit-card {' +
+        '    background: rgba(255, 255, 255, var(--glass-alpha));' +
+        '    backdrop-filter: blur(var(--glass-blur));' +
+        '    -webkit-backdrop-filter: blur(var(--glass-blur));' +
+        '    border: 1px solid var(--glass-border);' +
+        '    border-radius: 14px;' +
+        '    padding: 10px;' +
+        '    text-align: center;' +
+        '    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);' +
+    '}' +
+    '.commits-stats .commit-label {' +
+        '    display: block;' +
+        '    font-size: 0.85rem;' +
+        '    color: var(--text-soft);' +
+        '    margin-bottom: 6px;' +
+    '}' +
+    '.commits-stats .commit-value {' +
+        '    display: block;' +
+        '    font-size: 1.4rem;' +
+        '    font-weight: 700;' +
+        '    color: var(--text-strong);' +
+    '}' +
+    '.commit-module {' +
+        '    max-width: 1000px;' +
+        '    margin: 8px auto 24px;' +
+    '}' +
+    '.commit-module-title {' +
+        '    font-size: 1rem;' +
+        '    font-weight: 700;' +
+        '    color: var(--text-strong);' +
+        '    opacity: 0.9;' +
+        '    margin-bottom: 8px;' +
+    '}' +
+    '.commit-module-nums {' +
+        '    display: grid;' +
+        '    grid-template-columns: repeat(3, minmax(0,1fr));' +
+        '    gap: 16px;' +
+        '    align-items: end;' +
+    '}' +
+    '.commit-module-nums .commit-num {' +
+        '    display: flex;' +
+        '    flex-direction: column;' +
+        '    align-items: flex-start;' +
+    '}' +
+    '.commit-module-nums .commit-num .num {' +
+        '    font-size: 1.6rem;' +
+        '    font-weight: 800;' +
+        '    color: var(--text-strong);' +
+        '    line-height: 1;' +
+    '}' +
+    '.commit-module-nums .commit-num .lab {' +
+        '    margin-top: 4px;' +
+        '    font-size: 0.8rem;' +
+        '    color: var(--text-soft);' +
     '}' +
     '</style>';
 
@@ -1123,36 +1262,16 @@ function renderCommitStats(stats) {
     var w = parseInt(stats.week||0,10);
     var m = parseInt(stats.month||0,10);
     var y = parseInt(stats.year||0,10);
-    function pct(v){
-        var p = 0;
-        if (y>0) p = Math.min(100, Math.max(5, Math.round(v*100/Math.max(y,1))));
-        return p;
-    }
-    var commitsHtml = '<div class="commits-stats">'+
-        '<h3>提交统计</h3>'+
-        '<div class="commits-chart">'+
-        '<div class="commit-item">'+
-        '<span class="commit-date">本周</span>'+
-        '<div class="commit-bar">'+
-        '<div class="commit-fill" style="width: '+pct(w)+'%"></div>'+
-        '</div>'+
-        '<span class="commit-count">'+w+'</span>'+
-        '</div>'+
-        '<div class="commit-item">'+
-        '<span class="commit-date">本月</span>'+
-        '<div class="commit-bar">'+
-        '<div class="commit-fill" style="width: '+pct(m)+'%"></div>'+
-        '</div>'+
-        '<span class="commit-count">'+m+'</span>'+
-        '</div>'+
-        '<div class="commit-item">'+
-        '<span class="commit-date">今年</span>'+
-        '<div class="commit-bar">'+
-        '<div class="commit-fill" style="width: 100%"></div>'+
-        '</div>'+
-        '<span class="commit-count">'+y+'</span>'+
-        '</div>'+
-        '</div>'+
-        '</div>';
-    $('#github-commits').html(commitsHtml);
-}
\ No newline at end of file
+
+    Array.from(document.querySelectorAll('.commit-inline-title, .commit-inline, .commit-inline-matrix, .commit-inline-group')).forEach(function(el){ el.remove(); });
+
+    var html = '<div class="commit-module">'+
+      '<div class="commit-module-title">提交统计</div>'+
+      '<div class="commit-module-nums">'+
+        '<div class="commit-num"><span class="num">'+w+'</span><span class="lab">本周</span></div>'+
+        '<div class="commit-num"><span class="num">'+m+'</span><span class="lab">本月</span></div>'+
+        '<div class="commit-num"><span class="num">'+y+'</span><span class="lab">今年</span></div>'+
+      '</div>'+
+    '</div>';
+    $('#github-commits').html(html);
+}