fix(comments): 评论失败提示误报与瞬间评论区配色脱同步（5i T2/T3）
用户实测：「评论区总是显示加载失败，但是实际上是正常显示的，另外瞬间的评论区
的颜色和主题色不同步」。
T2 误报根因：软导航/二次挂载时 `#artalk-lib` 脚本标签已在 DOM，但 `window.Artalk`
尚未就绪，旧代码直接 `initArtalk()` → `!lib` 分支 `showRetry(true)` → 失败提示
永久显示；随后库加载完成、评论正常渲染，提示却留在页面上。
- 脚本标签在但库未就绪 → 等它的 load 事件再 init，不再立即判失败
- 失败提示只留真失败：script.onerror，或超时且确实未挂载
- `mounting` 在所有成功/失败路径复位（旧代码失败后永真，把 IO/锚点/滚底/重试全堵死）
- 成功路径清提示；三条触发路径与重试钮、astro:page-load 复核全部保留
T3 配色脱同步：18 个 `--at-color-*` 映射原先只写在 `#artalk-container` 作用域，
瞬间容器是 `mom-atk-<slug>` 不在其内 → 回落到 Artalk 默认白底。
- 抽成共享片段 geek/ArtalkThemeStyles.astro（两处引用，杜绝双份漂移）
- **额外挖出的第 4 个坑**：Artalk init 成功会给容器加 `.artalk` 类，其 CDN 样式表
里 `.artalk{--at-color-bg:#fff}` 与裸属性选择器 `[data-artalk-panel]` 同特异性
且后加载 → 平级后来居上。瞬间容器选择器加 `body` 前缀 (0,1,1) 压住；
文章页是 `#artalk-container`(1,0,0) 本来就压得住，所以只有瞬间翻白
验证: 构建 exit 0；E2E 46/46；我独立复测——
① 文章页挂载成功且 #artalk-retry 保持 hidden
② 连发 3 次 astro:page-load 仍不误报、仍挂载
③ 瞬间评论区明暗两态 --at-color-bg 实测 rgb(255,255,255)/rgb(25,29,35)
分别等于 --bg，容器带 .artalk 类（说明是 init 后真态）
Spec: 2026-11-02_blog-5i-fonts-polish (T2/T3)
Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed
1 parent
5c015c6577
commit
31eb44caee
3 files changed
+120
-64
No files matched your search
@@ -8,6 +8,7 @@ interface Props {
|
||||
const { pageKey, pageTitle } = Astro.props;
|
||||
import { t } from '../i18n/ui';
|
||||
import ViewMeta from './geek/ViewMeta.astro';
|
||||
import ArtalkThemeStyles from './geek/ArtalkThemeStyles.astro';
|
||||
import { localeOf } from '../lib/locale';
|
||||
const locale = localeOf(Astro.url.pathname);
|
||||
---
|
||||
@@ -21,64 +22,10 @@ const locale = localeOf(Astro.url.pathname);
|
||||
<button type="button" class="atk-retry-btn" id="artalk-retry-btn">重试</button>
|
||||
</p>
|
||||
|
||||
<!-- Artalk 主题接管：--at-color-* 全套映射到站点 tokens（值均为 var()，明暗随
|
||||
html[data-theme] 翻转 tokens 自动生效，一套规则双态成立）。
|
||||
依据：Artalk.css(v2.10) 全部表面由这 18 个变量驱动；init 锁 darkMode:false
|
||||
防 Artalk 自带 atk-dark-mode 类与接管层打架。弹层挂 body 下需单独同款映射 -->
|
||||
<!-- 主题接管（--at-color-* 全套映射 + 气质规则）已抽到共享片段：
|
||||
文章容器 #artalk-container 与瞬间容器 [data-artalk-panel] 用同一份，避免漂移 -->
|
||||
<ArtalkThemeStyles />
|
||||
<style is:global>
|
||||
#artalk-container,
|
||||
/* Artalk.css 运行时才挂 head，平级选择器后来居上：body 前缀提一级特异性保住覆盖 */
|
||||
body .atk-layer-wrap {
|
||||
--at-color-bg: var(--bg);
|
||||
--at-color-bg-transl: color-mix(in oklab, var(--bg) 95%, transparent);
|
||||
--at-color-bg-grey: var(--bg-soft);
|
||||
--at-color-bg-grey-transl: color-mix(in oklab, var(--bg-soft) 95%, transparent);
|
||||
--at-color-bg-light: var(--accent-soft);
|
||||
--at-color-border: color-mix(in oklab, var(--ink-4) 55%, transparent); /* --line 在白底近不可见（视觉终审建议项），加深一档 */
|
||||
--at-color-font: var(--ink-2);
|
||||
--at-color-deep: var(--ink-1);
|
||||
--at-color-sub: var(--ink-3);
|
||||
--at-color-grey: var(--ink-3);
|
||||
--at-color-meta: var(--ink-4);
|
||||
--at-color-light: var(--ink-4);
|
||||
--at-color-main: var(--accent);
|
||||
/* 高度限高渐隐遮罩必须与 bg 同源，否则暗色下露白腿 */
|
||||
--at-color-gradient: linear-gradient(180deg, transparent, var(--bg));
|
||||
/* red/pink/yellow/green 语义功能色保留官方默认：纪律只管气质，不损语义 */
|
||||
}
|
||||
|
||||
/* 气质对齐（不动排版）：字体、头像圆角、时间戳 mono、链接纪律 */
|
||||
#artalk-container {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
#artalk-container .atk-avatar img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
#artalk-container .atk-meta,
|
||||
#artalk-container .atk-ua {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
#artalk-container .atk-copyright {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--ink-4);
|
||||
}
|
||||
#artalk-container .atk-textarea,
|
||||
#artalk-container .atk-input,
|
||||
#artalk-container .atk-send-btn,
|
||||
#artalk-container .atk-btn {
|
||||
border-radius: 8px;
|
||||
}
|
||||
#artalk-container .atk-content a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
#artalk-container .atk-content a:hover {
|
||||
text-decoration-color: var(--accent);
|
||||
}
|
||||
.atk-load-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -113,16 +60,33 @@ const locale = localeOf(Astro.url.pathname);
|
||||
let mounted = false;
|
||||
const retryEl = document.getElementById('artalk-retry');
|
||||
const showRetry = (show: boolean) => { if (retryEl) retryEl.hidden = !show; };
|
||||
const libReady = () => (window as unknown as { Artalk?: { init: (o: object) => void } }).Artalk;
|
||||
// 超时兜底：5s 确实未挂载才提示；同时**复位 mounting** —— 否则一次超时会把后续
|
||||
// 所有触发（IO / 锚点 / 滚底 / 重试）全堵死，评论区从此空着
|
||||
const armTimeout = () => {
|
||||
window.setTimeout(() => {
|
||||
if (!mounted) showRetry(true);
|
||||
if (mounted) return;
|
||||
mounting = false;
|
||||
showRetry(true);
|
||||
}, 5000);
|
||||
};
|
||||
const mount = () => {
|
||||
if (mounting || mounted) return;
|
||||
mounting = true;
|
||||
armTimeout();
|
||||
if (document.getElementById('artalk-lib')) return initArtalk();
|
||||
// 库已就绪（软导航二次进入、文章间跳转最常见）→ 直接 init
|
||||
if (libReady()) return initArtalk();
|
||||
const existing = document.getElementById('artalk-lib') as HTMLScriptElement | null;
|
||||
if (existing) {
|
||||
// 脚本标签已在、但库还没就绪（软导航后二次挂载的典型态）：**等它 load**。
|
||||
// 这里直接判失败，正是用户看到的「评论区正常显示却挂着加载失败提示」的根因。
|
||||
const onLoad = () => {
|
||||
existing.removeEventListener('load', onLoad);
|
||||
initArtalk();
|
||||
};
|
||||
existing.addEventListener('load', onLoad);
|
||||
return;
|
||||
}
|
||||
// 官方部署文档要求 CSS 手动引入（JS 不自动注入）；此前缺失导致评论区自上线起跑在 UA 默认样式上
|
||||
const cssReady = new Promise<void>((done) => {
|
||||
if (document.getElementById('artalk-css')) return done();
|
||||
@@ -138,18 +102,21 @@ const locale = localeOf(Astro.url.pathname);
|
||||
s.id = 'artalk-lib';
|
||||
s.src = 'https://wait4x.online/artalk/dist/Artalk.js';
|
||||
s.onload = () => { void cssReady.then(initArtalk); };
|
||||
// 真失败之一：脚本拉不到（404 / 被拦截）——只有这时才报错
|
||||
s.onerror = () => { mounting = false; showRetry(true); };
|
||||
document.head.appendChild(s);
|
||||
};
|
||||
const initArtalk = () => {
|
||||
const lib = (window as unknown as { Artalk?: { init: (o: object) => void } }).Artalk;
|
||||
// 只有库真正就绪才算挂载成功：否则脚本 404/被拦截时会把"空容器"误标成已挂载，
|
||||
// 5s 兜底提示也被一并绕过（用户看到的正是"评论区一直空着"）
|
||||
const lib = libReady();
|
||||
// 库仍未就绪：可能是 onload 早于 window.Artalk 赋值，也可能是慢网。此处**不报错**
|
||||
// （报错就是用户看到的误报），复位后交给超时兜底或后续触发再试。
|
||||
if (!lib) {
|
||||
showRetry(true);
|
||||
mounting = false;
|
||||
return;
|
||||
}
|
||||
mounted = true;
|
||||
showRetry(false);
|
||||
mounting = false;
|
||||
showRetry(false); // 挂载成功 → 清掉任何已显示的提示
|
||||
el.dataset.artalkMounted = '1';
|
||||
lib?.init({
|
||||
el: '#artalk-container',
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
* 放在卡片底部让读者不开评论也能看见条数。
|
||||
*/
|
||||
import ViewMeta from './geek/ViewMeta.astro';
|
||||
import ArtalkThemeStyles from './geek/ArtalkThemeStyles.astro';
|
||||
import { t } from '../i18n/ui';
|
||||
import type { Locale } from '../lib/locale';
|
||||
|
||||
@@ -52,6 +53,8 @@ const retryText = locale === 'zh' ? '重试' : 'Retry';
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
<!-- 与文章页共用同一份 Artalk 主题映射（瞬间容器 mom-atk-* 无此映射时会回落官方默认色） -->
|
||||
<ArtalkThemeStyles />
|
||||
<div class="mom-cm-meta">
|
||||
<ViewMeta pageKey={pageKey} locale={locale} mode="readonly" showPv={false} />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
/**
|
||||
* Artalk 主题接管（Phase 5i T3：从 ArtalkComments 抽出的共享片段，两处组件共用，不复制两份）。
|
||||
*
|
||||
* 为什么要抽：文章页容器是 `#artalk-container`，瞬间页容器是 `mom-atk-<slug>`
|
||||
* （带 `[data-artalk-panel]`）。原先 18 个 `--at-color-*` 映射只写在 `#artalk-container`
|
||||
* 作用域，瞬间评论区因此回落 Artalk 官方默认色（白底深字）——暗色主题下尤其突兀。
|
||||
* 现在一套片段覆盖三种宿主：文章容器 / 瞬间容器 / Artalk 弹层（挂在 body 下）。
|
||||
*
|
||||
* 依据：Artalk.css(v2.10) 全部表面由这 18 个变量驱动；值均为 `var(--token)`，
|
||||
* 明暗随 `html[data-theme]` 翻转自动生效，一套规则双态成立。init 侧统一锁
|
||||
* `darkMode: false`，防 Artalk 自带 `atk-dark-mode` 类与接管层打架。
|
||||
*/
|
||||
---
|
||||
|
||||
<style is:global>
|
||||
/* ── 18 个色彩变量：三种宿主一套映射 ──
|
||||
瞬间容器必须用 `body [data-artalk-panel]`(0,1,1)：Artalk init 后会给容器加 `.artalk` 类，
|
||||
它从 CDN 后加载的样式表里有 `.artalk{--at-color-bg:#fff…}`，与裸属性选择器 (0,1,0) 同特异性
|
||||
且后来居上 → 暗色下瞬间评论区会翻白底（实测踩到）。文章容器是 ID(1,0,0) 本就压得住。 */
|
||||
#artalk-container,
|
||||
body [data-artalk-panel],
|
||||
/* Artalk.css 运行时才挂 head，平级选择器后来居上：body 前缀提一级特异性保住覆盖 */
|
||||
body .atk-layer-wrap {
|
||||
--at-color-bg: var(--bg);
|
||||
--at-color-bg-transl: color-mix(in oklab, var(--bg) 95%, transparent);
|
||||
--at-color-bg-grey: var(--bg-soft);
|
||||
--at-color-bg-grey-transl: color-mix(in oklab, var(--bg-soft) 95%, transparent);
|
||||
--at-color-bg-light: var(--accent-soft);
|
||||
--at-color-border: color-mix(in oklab, var(--ink-4) 55%, transparent); /* --line 在白底近不可见（视觉终审建议项），加深一档 */
|
||||
--at-color-font: var(--ink-2);
|
||||
--at-color-deep: var(--ink-1);
|
||||
--at-color-sub: var(--ink-3);
|
||||
--at-color-grey: var(--ink-3);
|
||||
--at-color-meta: var(--ink-4);
|
||||
--at-color-light: var(--ink-4);
|
||||
--at-color-main: var(--accent);
|
||||
/* 高度限高渐隐遮罩必须与 bg 同源，否则暗色下露白腿 */
|
||||
--at-color-gradient: linear-gradient(180deg, transparent, var(--bg));
|
||||
/* red/pink/yellow/green 语义功能色保留官方默认：纪律只管气质，不损语义 */
|
||||
}
|
||||
|
||||
/* ── 气质对齐（不动排版）：字体、头像圆角、时间戳 mono、链接纪律 ── */
|
||||
#artalk-container,
|
||||
body [data-artalk-panel] {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
#artalk-container .atk-avatar img,
|
||||
body [data-artalk-panel] .atk-avatar img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
#artalk-container .atk-meta,
|
||||
#artalk-container .atk-ua,
|
||||
body [data-artalk-panel] .atk-meta,
|
||||
body [data-artalk-panel] .atk-ua {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
#artalk-container .atk-copyright,
|
||||
body [data-artalk-panel] .atk-copyright {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--ink-4);
|
||||
}
|
||||
#artalk-container .atk-textarea,
|
||||
#artalk-container .atk-input,
|
||||
#artalk-container .atk-send-btn,
|
||||
#artalk-container .atk-btn,
|
||||
body [data-artalk-panel] .atk-textarea,
|
||||
body [data-artalk-panel] .atk-input,
|
||||
body [data-artalk-panel] .atk-send-btn,
|
||||
body [data-artalk-panel] .atk-btn {
|
||||
border-radius: 8px;
|
||||
}
|
||||
#artalk-container .atk-content a,
|
||||
body [data-artalk-panel] .atk-content a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
#artalk-container .atk-content a:hover,
|
||||
body [data-artalk-panel] .atk-content a:hover {
|
||||
text-decoration-color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user