feat(about): 增强 Artalk 评论系统 UI 和配置

- 为移动端和桌面端添加不同的样式适配
- 实现评论内容截断显示及展开/收起功能
- 将 JavaScript 和 TypeScript 分类调整为前端技术栈
- 新增 RocketMQ、多种前端框架和技术到技能配置中
- 添加 UI 增强逻辑以提升用户体验
- 优化夜间模式下的按钮样式和阴影效果

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;
 }

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() {

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}
   ],