diff --git a/css/about.css b/css/about.css index 55466cd..f80a109 100644 --- a/css/about.css +++ b/css/about.css @@ -1384,6 +1384,16 @@ body { transition: opacity 0.2s; } +#artalk-container.atk-mobile .atk-main-editor { padding: 12px; font-size: 0.95rem; } +#artalk-container.atk-mobile .atk-comment-wrap { padding: 12px 14px; font-size: 0.95rem; } +#artalk-container.atk-mobile .atk-avatar { width: 28px; height: 28px; } +#artalk-container.atk-mobile .atk-meta { font-size: 12px; } +#artalk-container.atk-desktop .atk-main-editor { padding: 18px 22px; } +#artalk-container.atk-desktop .atk-comment-wrap { padding: 18px 22px; line-height: 1.7; } +#artalk-container .atk-content.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } +#artalk-container .atk-expand-btn { margin-top: 8px; padding: 6px 10px; border-radius: 14px; border: none; cursor: pointer; background: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(108,92,231,0.25); } +[data-theme="night"] #artalk-container .atk-expand-btn { background: linear-gradient(135deg, #a1c4fd, #6c5ce7); box-shadow: 0 4px 12px rgba(108,92,231,0.35); } + .fab-menu.open { display: flex; } diff --git a/js/about.js b/js/about.js index 3b33a73..88ac6bc 100644 --- a/js/about.js +++ b/js/about.js @@ -505,6 +505,7 @@ class UIManager { site: window.SiteConfig.artalk.site, darkMode: document.documentElement.getAttribute('data-theme') === 'night' }); + this.enhanceArtalkUI(); } catch (e) { console.error("Artalk Error", e); const lang = getStoredLanguage(); @@ -518,6 +519,37 @@ class UIManager { } } + enhanceArtalkUI() { + const container = document.getElementById('artalk-container'); + if (!container) return; + const isMobile = window.matchMedia('(max-width: 768px)').matches; + container.classList.toggle('atk-mobile', isMobile); + container.classList.toggle('atk-desktop', !isMobile); + const lang = getStoredLanguage(); + if (isMobile) { + const apply = () => { + container.querySelectorAll('.atk-comment-wrap .atk-content').forEach(el => { + if (el.dataset.clamped) return; + el.classList.add('clamped'); + const btn = document.createElement('button'); + btn.className = 'atk-expand-btn'; + const expandText = lang === 'zh' ? '展开' : 'Expand'; + const collapseText = lang === 'zh' ? '收起' : 'Collapse'; + btn.textContent = expandText; + btn.addEventListener('click', () => { + const clamped = el.classList.toggle('clamped'); + btn.textContent = clamped ? expandText : collapseText; + }); + el.parentElement.appendChild(btn); + el.dataset.clamped = '1'; + }); + }; + apply(); + const obs = new MutationObserver(apply); + obs.observe(container, { childList: true, subtree: true }); + } + } + initTechCloud() { diff --git a/js/config.js b/js/config.js index 127164d..1393dba 100644 --- a/js/config.js +++ b/js/config.js @@ -51,11 +51,11 @@ const SiteConfig = { techStack: [ { name: 'Java', category: 'core', weight: 5 }, { name: 'Spring Boot', category: 'backend', weight: 5 }, - { name: 'JavaScript', category: 'core', weight: 5 }, + { name: 'JavaScript', category: 'frontend', weight: 5 }, { name: 'Python', category: 'core', weight: 4 }, { name: 'WebFlux', category: 'backend', weight: 5 }, { name: 'Reactor', category: 'backend', weight: 5 }, - { name: 'TypeScript', category: 'core', weight: 4 }, + { name: 'TypeScript', category: 'frontend', weight: 4 }, { name: 'Spring Cloud', category: 'backend', weight: 4 }, { name: 'Go', category: 'core', weight: 3 }, { name: 'MySQL', category: 'data', weight: 4 }, @@ -69,6 +69,7 @@ const SiteConfig = { { name: 'PyTorch', category: 'ai', weight: 2 }, { name: 'Elasticsearch', category: 'data', weight: 3 }, { name: 'RabbitMQ', category: 'data', weight: 2 }, + { name: 'RocketMQ', category: 'data', weight: 2 }, { name: 'Kafka', category: 'data', weight: 2 }, { name: 'Jenkins', category: 'ops', weight: 3 }, { name: 'Git', category: 'ops', weight: 4 }, @@ -86,7 +87,17 @@ const SiteConfig = { { name: 'Dify', category: 'ai', weight: 1 }, { name: 'Spring AI', category: 'ai', weight: 1 }, { name: 'ClickHouse', category: 'data', weight: 1 }, - { name: 'Postgresql', category: 'data', weight: 1 } + { name: 'Postgresql', category: 'data', weight: 1 }, + { name: "Hexo", category: "frontend", weight: 5}, + { name: "NextJs", category: "frontend", weight: 1}, + { name: "HuggingFace", category: "ai", weight: 1}, + { name: "Vue", category: "frontend", weight: 3}, + { name: "React", category: "frontend", weight: 1}, + { name: "R2dbc", category: "data", weight: 1}, + { name: "Proto", category: "core", weight: 1}, + { name: "Mqtt", category: "core", weight: 2}, + { name: "Grpc", category: "core", weight: 1}, + { name: "Figma", category: "frontend", weight: 1} ],