diff --git a/css/about.css b/css/about.css index 0628ea6..2520c02 100644 --- a/css/about.css +++ b/css/about.css @@ -932,20 +932,47 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .mbti-traits { - display: flex; gap: 0.8rem; flex-wrap: wrap; } .trait { - background: rgba(255, 255, 255, 0.15); padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.2); - color: #667eea; + /* 添加文字渐变效果 */ + background: linear-gradient(135deg, #a5b4fc, #67e8f9, #a5f3fc); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; } +/* 为不同的trait添加不同的清新淡雅的渐变颜色 */ +.trait:nth-child(1) { + background: linear-gradient(135deg, #a5b4fc, #67e8f9); + -webkit-background-clip: text; + background-clip: text; +} + +.trait:nth-child(2) { + background: linear-gradient(135deg, #c7d2fe, #a5f3fc); + -webkit-background-clip: text; + background-clip: text; +} + +.trait:nth-child(3) { + background: linear-gradient(135deg, #bfdbfe, #93c5fd); + -webkit-background-clip: text; + background-clip: text; +} + +.trait:nth-child(4) { + background: linear-gradient(135deg, #a5f3fc, #67e8f9); + -webkit-background-clip: text; + background-clip: text; +} .hero-title { font-size: 4rem; @@ -2185,6 +2212,298 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); } +/* PC端评论系统样式 */ +@media (min-width: 1025px) { + #artalk-container { + padding: 2.5rem; + } + + #artalk-container .artalk-editor { + border-radius: 18px; + margin-bottom: 2rem; + } + + #artalk-container .artalk-editor .artalk-editor-header { + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--glass-border); + } + + #artalk-container .artalk-editor .artalk-editor-textarea { + min-height: 120px; + padding: 1.2rem; + } + + #artalk-container .artalk-list { + margin-top: 2rem; + } + + #artalk-container .artalk-list-item { + border-radius: 18px; + margin-bottom: 1.5rem; + padding: 1.5rem; + transition: all 0.3s ease; + } + + #artalk-container .artalk-list-item:hover { + transform: translateY(-3px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, calc(var(--glass-alpha) + 0.05)); + } + + #artalk-container .artalk-list-item .artalk-comment-body { + padding: 1rem 0; + } +} + +/* 平板端评论系统样式 */ +@media (min-width: 769px) and (max-width: 1024px) { + .comments-section { + padding: 1.5rem; + margin: 1.5rem; + border-radius: 30px; + } + + #artalk-container { + padding: 2rem; + } + + #artalk-container .artalk-editor { + border-radius: 15px; + margin-bottom: 1.5rem; + } + + #artalk-container .artalk-editor .artalk-editor-header { + padding: 0.8rem 1.2rem; + } + + #artalk-container .artalk-editor .artalk-editor-textarea { + min-height: 100px; + padding: 1rem; + } + + #artalk-container .artalk-list-item { + border-radius: 15px; + margin-bottom: 1.2rem; + padding: 1.2rem; + } + + #artalk-container .artalk-list-item .artalk-comment-body { + padding: 0.8rem 0; + } +} + +/* 移动端评论系统样式 */ +@media (max-width: 768px) { + .comments-section { + padding: 1rem; + margin: 1rem; + border-radius: 20px; + } + + .comments-container { + padding: 0 0.5rem; + } + + .comments-container .section-title { + font-size: 1.8rem; + } + + .comments-container .section-subtitle { + font-size: 1rem; + margin-bottom: 1.5rem; + } + + #artalk-container { + padding: 1.2rem; + border-radius: 18px; + } + + #artalk-container .artalk-editor { + border-radius: 12px; + margin-bottom: 1rem; + } + + #artalk-container .artalk-editor .artalk-editor-header { + padding: 0.6rem 1rem; + flex-wrap: wrap; + } + + #artalk-container .artalk-editor .artalk-editor-textarea { + min-height: 80px; + padding: 0.8rem; + } + + #artalk-container .artalk-list-item { + border-radius: 12px; + margin-bottom: 1rem; + padding: 1rem; + } + + #artalk-container .artalk-list-item .artalk-comment-body { + padding: 0.6rem 0; + } + + #artalk-container .artalk-pagination { + padding: 1rem 0; + } +} + +/* 评论系统通用美化样式 */ +#artalk-container .artalk-editor { + background: rgba(255, 255, 255, 0.15); + border: 1px solid var(--glass-border); + transition: all 0.3s ease; +} + +#artalk-container .artalk-editor:focus-within { + background: rgba(255, 255, 255, 0.2); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); +} + +#artalk-container .artalk-editor .artalk-editor-textarea { + background: transparent; + color: var(--text-strong); + font-family: 'Inter', 'SF Pro Text', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 1rem; + line-height: 1.6; + resize: none; + border: none; + outline: none; +} + +#artalk-container .artalk-editor .artalk-editor-textarea::placeholder { + color: var(--text-soft); + opacity: 0.7; +} + +#artalk-container .artalk-editor .artalk-editor-bottom { + padding: 0.8rem 1.2rem; + border-top: 1px solid var(--glass-border); +} + +#artalk-container .artalk-editor .artalk-editor-bottom .artalk-send-btn { + background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); + border: none; + border-radius: 20px; + padding: 0.5rem 1.5rem; + color: white; + font-weight: 600; + transition: all 0.3s ease; + box-shadow: 0 4px 10px rgba(58, 160, 255, 0.3); +} + +#artalk-container .artalk-editor .artalk-editor-bottom .artalk-send-btn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(58, 160, 255, 0.4); +} + +#artalk-container .artalk-list-item { + background: rgba(255, 255, 255, 0.1); + border: 1px solid var(--glass-border); +} + +#artalk-container .artalk-list-item .artalk-comment-header { + padding-bottom: 0.5rem; +} + +#artalk-container .artalk-list-item .artalk-comment-header .artalk-comment-nick { + color: var(--text-strong); + font-weight: 600; +} + +#artalk-container .artalk-list-item .artalk-comment-header .artalk-comment-date { + color: var(--text-soft); + font-size: 0.85rem; +} + +#artalk-container .artalk-list-item .artalk-comment-body { + color: var(--text-soft); + font-size: 1rem; + line-height: 1.7; +} + +#artalk-container .artalk-list-item .artalk-comment-body a { + color: var(--accent-a); + text-decoration: none; +} + +#artalk-container .artalk-list-item .artalk-comment-body a:hover { + text-decoration: underline; +} + +#artalk-container .artalk-pagination { + margin-top: 1.5rem; +} + +#artalk-container .artalk-pagination .artalk-page-item { + background: rgba(255, 255, 255, 0.1); + border: 1px solid var(--glass-border); + color: var(--text-strong); + border-radius: 8px; + padding: 0.4rem 0.8rem; + margin: 0 0.2rem; + transition: all 0.3s ease; +} + +#artalk-container .artalk-pagination .artalk-page-item:hover, +#artalk-container .artalk-pagination .artalk-page-item.active { + background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); + color: white; + border-color: transparent; +} + +/* 夜间模式适配 */ +.theme-night #artalk-container .artalk-editor .artalk-editor-textarea { + color: var(--text-strong); +} + +.theme-night #artalk-container .artalk-list-item .artalk-comment-nick { + color: var(--text-strong); +} + +.theme-night #artalk-container .artalk-list-item .artalk-comment-body { + color: var(--text-soft); +} + +/* 白天模式适配 */ +.theme-day #artalk-container { + background: rgba(255, 255, 255, 0.7); +} + +.theme-day #artalk-container .artalk-editor { + background: rgba(255, 255, 255, 0.9); +} + +.theme-day #artalk-container .artalk-list-item { + background: rgba(255, 255, 255, 0.9); +} + +.theme-day #artalk-container .artalk-list-item .artalk-comment-nick { + color: var(--day-text-primary); +} + +.theme-day #artalk-container .artalk-list-item .artalk-comment-date { + color: var(--day-text-secondary); +} + +.theme-day #artalk-container .artalk-list-item .artalk-comment-body { + color: var(--day-text-secondary); +} + +.theme-day #artalk-container .artalk-editor .artalk-editor-textarea { + color: var(--day-text-primary); +} + +.theme-day #artalk-container .artalk-editor .artalk-editor-textarea::placeholder { + color: var(--day-text-tertiary); +} + +.theme-day #artalk-container .artalk-pagination .artalk-page-item { + background: rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.1); + color: var(--day-text-primary); +} + /* 加载动画 */ .loading-placeholder { @@ -2247,7 +2566,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .nav-links { - gap: 1rem; + gap: 0.3rem; } .hero-title { @@ -2411,6 +2730,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info .mbti-traits { justify-content: center; + display: grid; + grid-template-columns: repeat(2, minmax(0,1fr)); + } + .trait { + padding: 0.1rem 0.2rem; + border-radius: 20px; + font-size: 0.7rem; + border: 1px solid rgba(255, 255, 255, 0.2); } .infj-decoration { @@ -2495,11 +2822,11 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .nav-links { - padding: 0.1rem 0.3rem; + padding: 0.2rem 0.3rem; } .nav-links a { - padding: 0.1rem 0.3rem; + padding: 0.2rem 0.3rem; font-size: 0.7rem; } diff --git a/data/github_user.json b/data/github_user.json index 0c8ccda..5133f10 100644 --- a/data/github_user.json +++ b/data/github_user.json @@ -9,7 +9,7 @@ "name": "Honesty", "blog": "https://www.hehouhui.cn", "hireable": true, - "bio": "Honesty Shanghai Student", + "bio": "Hi, I’m Honesty—Shanghai Java/AI Dev (7+ yrs). Spring AI, LLM, TensorFlow, Faiss. Write tech content, cycle for inspiration. AI-obsessed.", "public_repos": 165, "public_gists": 0, "followers": 6, diff --git a/index.html b/index.html index 78e7d29..5f9f559 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,7 @@
- + + + function closeOnEsc(e) { + if (e.key === 'Escape') { + closeWeixin(); + } + } + + // 点击空白处关闭 + document.getElementById('weixinOverlay').addEventListener('click', function(e) { + if (e.target === this) { + closeWeixin(); + } + }); + + // 阻止点击弹框内容时关闭 + document.querySelector('.weixin-qrcode-container').addEventListener('click', function(e) { + e.stopPropagation(); + }); +

diff --git a/js/about.js b/js/about.js index 5f8683b..f7018eb 100644 --- a/js/about.js +++ b/js/about.js @@ -180,31 +180,59 @@ function initProjects() { localStorage.removeItem(cacheKey); localStorage.removeItem(cacheTimeKey); - // 使用jQuery AJAX获取项目数据 - $.ajax({ - url: 'https://api.github.com/users/' + username + '/repos?sort=stars&per_page=30', - method: 'GET', - timeout: 10000, - success: function(repos) { - // 过滤并排序：优先显示原创项目（非fork），按星数排序 - var filteredRepos = repos.filter(function(repo) { - return repo.stargazers_count > 0 || repo.forks_count > 0; // 过滤掉fork的项目 - }).sort(function(a, b) { - return b.stargazers_count - a.stargazers_count; // 按星数降序排序 - }).slice(0, 12); // 只取前12个 - - // 缓存数据 - localStorage.setItem(cacheKey, JSON.stringify(filteredRepos)); - localStorage.setItem(cacheTimeKey, now.toString()); - displayProjects(filteredRepos); - }, - error: function() { - fetch('data/github_repos.json') - .then(function(res) { return res.json(); }) - .then(function(json) { displayProjects(json); }) - .catch(function() { displayProjects([]); }); - } - }); + // 使用分页获取所有项目数据 + var allRepos = []; + var page = 1; + var perPage = 100; + + function fetchReposPage() { + $.ajax({ + url: 'https://api.github.com/users/' + username + '/repos?sort=stars&page=' + page + '&per_page=' + perPage + '&visibility=public', + method: 'GET', + timeout: 10000, + success: function(repos) { + if (!repos || repos.length === 0) { + // 如果没有返回数据，则说明没有更多项目 + processAllRepos(allRepos); + return; + } + // 将当前页的项目添加到总列表中 + allRepos = allRepos.concat(repos); + + // 如果当前页返回的项目数量小于请求的数量，说明已经到最后一页 + if (repos.length < perPage) { + // 处理所有获取到的项目数据 + processAllRepos(allRepos); + } else { + // 继续获取下一页 + page++; + fetchReposPage(); + } + }, + error: function() { + // 出错时只显示已获取到的项目 + processAllRepos(allRepos); + } + }); + } + + // 开始获取第一页数据 + fetchReposPage(); + + // 处理所有获取到的项目数据 + function processAllRepos(repos) { + // 过滤并排序：保留原创项目（非fork），按星数排序 + var filteredRepos = repos.filter(function(repo) { + return !repo.fork && (repo.stargazers_count > 0 || repo.forks_count > 0); // 过滤掉fork的项目 + }).sort(function(a, b) { + return b.stargazers_count - a.stargazers_count; // 按星数降序排序 + }).slice(0, 12); // 只取前12个 + + // 缓存数据 + localStorage.setItem(cacheKey, JSON.stringify(filteredRepos)); + localStorage.setItem(cacheTimeKey, now.toString()); + displayProjects(filteredRepos); + } } function displayProjects(repos) { @@ -427,7 +455,12 @@ function initArtalkComments() { return res.json(); }) .then(function() { - Artalk.init({ + // 检测设备类型 + var isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth <= 768; + var isTablet = window.innerWidth > 768 && window.innerWidth <= 1024; + + // 根据设备类型设置不同的配置 + var artalkConfig = { el: '#artalk-container', pageKey: window.location.pathname, pageTitle: document.title, @@ -443,7 +476,36 @@ function initArtalkComments() { imgUpload: false, preview: true, versionCheck: true - }); + }; + + // 根据设备类型调整配置 + if (isMobile) { + // 移动端配置 + artalkConfig.editor = { + draft: { enable: true }, + emoji: { show: true }, + upload: { enable: false } + }; + artalkConfig.pagination = { pageSize: 10, readMore: true, autoLoad: true }; + } else if (isTablet) { + // 平板端配置 + artalkConfig.editor = { + draft: { enable: true }, + emoji: { show: true }, + upload: { enable: false } + }; + artalkConfig.pagination = { pageSize: 15, readMore: true, autoLoad: true }; + } else { + // PC端配置 + artalkConfig.editor = { + draft: { enable: true }, + emoji: { show: true }, + upload: { enable: false } + }; + artalkConfig.pagination = { pageSize: 20, readMore: true, autoLoad: true }; + } + + Artalk.init(artalkConfig); }) .catch(function() { renderCommentsFallback('评论系统暂不可用'); }); } catch (e) { @@ -1076,7 +1138,7 @@ var githubStyles = '