feat(about): 增强 Artalk 评论系统 UI 和配置
- 为移动端和桌面端添加不同的样式适配 - 实现评论内容截断显示及展开/收起功能 - 将 JavaScript 和 TypeScript 分类调整为前端技术栈 - 新增 RocketMQ、多种前端框架和技术到技能配置中 - 添加 UI 增强逻辑以提升用户体验 - 优化夜间模式下的按钮样式和阴影效果
This commit is contained in:
32
js/about.js
32
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() {
|
||||
|
||||
Reference in New Issue
Block a user