feat(about): 重构 Artalk 评论组件加载逻辑
- 添加 reloadArtalk 方法用于完全重载评论组件 - 在主题变更时重新加载整个评论组件而非仅更新主题 - 在语言切换时重新加载整个评论组件而非仅更新语言 - 移除旧的 updateArtalkLanguage 和 setDarkMode 调用逻辑 - 确保组件销毁和容器清空后再进行重新初始化
This commit is contained in:
33
js/about.js
33
js/about.js
@@ -535,6 +535,23 @@ class UIManager {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 重新加载 Artalk 评论组件
|
||||||
|
reloadArtalk() {
|
||||||
|
// 销毁现有的 Artalk 实例
|
||||||
|
if (typeof Artalk !== 'undefined' && Artalk.instances) {
|
||||||
|
Artalk.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空容器
|
||||||
|
const container = document.getElementById('artalk-container');
|
||||||
|
if (container) {
|
||||||
|
container.innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新初始化
|
||||||
|
this.initArtalk();
|
||||||
|
}
|
||||||
|
|
||||||
enhanceArtalkUI() {
|
enhanceArtalkUI() {
|
||||||
const container = document.getElementById('artalk-container');
|
const container = document.getElementById('artalk-container');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
@@ -567,16 +584,10 @@ class UIManager {
|
|||||||
// 监听主题变化
|
// 监听主题变化
|
||||||
const themeObserver = new MutationObserver(() => {
|
const themeObserver = new MutationObserver(() => {
|
||||||
const newTheme = document.documentElement.getAttribute('data-theme');
|
const newTheme = document.documentElement.getAttribute('data-theme');
|
||||||
if (typeof Artalk !== 'undefined') {
|
if (newTheme !== currentTheme) {
|
||||||
try {
|
// 重新加载整个评论组件而不是仅仅设置主题
|
||||||
Artalk.setDarkMode(newTheme === 'night');
|
this.reloadArtalk();
|
||||||
} catch (e) {
|
|
||||||
console.warn('Failed to update Artalk dark mode:', e);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新自定义样式类
|
|
||||||
this.updateCustomStyles(container, newTheme);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
themeObserver.observe(document.documentElement, {
|
themeObserver.observe(document.documentElement, {
|
||||||
@@ -590,8 +601,8 @@ class UIManager {
|
|||||||
langBtn.addEventListener('click', () => {
|
langBtn.addEventListener('click', () => {
|
||||||
// 延迟执行以确保语言已经切换
|
// 延迟执行以确保语言已经切换
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const newLang = getStoredLanguage();
|
// 重新加载整个评论组件而不是仅仅更新语言
|
||||||
this.updateArtalkLanguage(container, newLang, isMobile);
|
this.reloadArtalk();
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user