wait4xandGLM-5.3
58baad5a7b
用户原话：「瞬间、书架大标题下的话语我从哪里去改？包括其字号颜色还有字体」——
此前这两行是硬编码（瞬间来自 i18n 字典、书架是组件里的字面量），后台完全改不了。
- 新增 sitePages 单例（content/site/pages.yaml）+ pageNote() 访问器：note 走富文本
行内管线，空则回落内置默认（原硬编码两句逐字搬入 PAGE_NOTE_DEFAULTS）
- 样式只开放三档并全部夹取：size 11–16px、color 仅 ink-1..ink-4、font 仅排版类白名单
—— 后台可填任意值，不能让它破版或染色
- **关键坑**：字体类不能只挂 class——global.css 的 .font-kai/.font-sans 全挂在富文本
容器作用域（.prose-*/.rich/.mom-text/.prose-body），裸 .page-note.font-kai 拿不到
规则（实测第一次无效，仍是 Noto Sans）。改为复用 fontVarFor() 产出 inline
font-family，class 仅作语义
- 书架与瞬间各自独立配置；默认值取「改造前外观」（均 font-sans）
验证: 构建 exit 0；content-lint 52 页 0/0/0；E2E 56/56；
实测（只改 books 样式）书架 computed = 16px / rgb(51,52,58) / Ma Shan Zheng，
瞬间保持 13px / ink-4 / Noto Sans（两页互不影响）；
op-gitea 侧另测：仅改文本、整段删 style（与基线逐字段一致）、非法值
（size:40/color:red/font 乱写）全部安全回落
Spec: 2026-11-03_blog-5j-content-refine (T3)
Co-authored-by: GLM-5.3
319 lines
10 KiB
Plaintext
319 lines
10 KiB
Plaintext
---
|
||
import { Image } from 'astro:assets';
|
||
import { getCollection } from 'astro:content';
|
||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||
import MomentComments from '../MomentComments.astro';
|
||
import ViewMeta from '../geek/ViewMeta.astro';
|
||
import { t } from '../../i18n/ui';
|
||
import { pageNote, renderRich } from '../../lib/site-content';
|
||
import type { Locale } from '../../lib/locale';
|
||
|
||
// /en/ 侧由 T4 薄页传 locale='en'；zh 路由无人传参，默认 zh 零回归
|
||
interface Props {
|
||
locale?: Locale;
|
||
}
|
||
const { locale = 'zh' } = Astro.props;
|
||
// 标题下说明：文字与样式都可后台改（白名单校验，非法值回落）
|
||
const note = await pageNote('moments', locale);
|
||
|
||
const moments = (await getCollection('moments')).sort(
|
||
(a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
|
||
);
|
||
|
||
// 富文本预渲染（Phase 5h T2）：text 走与页面文案同一条管线（markdown → 内容净化 →
|
||
// class 白名单 → 链接卡片），因此瞬间支持 **加粗**、<span class="c-blue font-kai">、列表与换行。
|
||
// 预渲染成 map 再进模板：renderRich 是 async，模板里不能 await。
|
||
// 纯文本老数据零回归：无 markdown 的文本会得到单个 <p>，与旧的 {text} 直出视觉等价。
|
||
const richText = new Map<string, string>();
|
||
for (const m of moments) {
|
||
if (!m.data.text) continue;
|
||
richText.set(m.id, await renderRich(m.data.text));
|
||
}
|
||
const iso = (d: Date) => d.toISOString();
|
||
---
|
||
|
||
<BaseLayout title={`${t('moments_title', locale)} · wait4x`}>
|
||
<h1 class="page-title">{t('moments_title', locale)}</h1>
|
||
<!-- 标题下说明：文案/字号/颜色/字体均由后台「页面文案 → 页面说明」控制（site-content.pageNote） -->
|
||
<p class:list={['page-note', note.className]} style={note.style} set:html={note.html} />
|
||
<!-- 整页计数（Phase 5h T4）：这是本页唯一的计数点（page 模式）；
|
||
每条瞬间卡片底部的徽标是 readonly，读者开评论不会虚增浏览数 -->
|
||
<ViewMeta class="mom-page-meta" pageKey={locale === 'en' ? '/en/moments/' : '/moments/'} {locale} variant="chip" />
|
||
<ol class="tl">
|
||
{moments.map((m) => (
|
||
<li class="tl-item">
|
||
<time class="tl-date" datetime={iso(m.data.pubDate)}>
|
||
{iso(m.data.pubDate).slice(0, 10)}
|
||
</time>
|
||
<div class="mom-card">
|
||
{m.data.image && (
|
||
<figure
|
||
class:list={[
|
||
'mom-fig',
|
||
(m.data.image.width ?? 0) < (m.data.image.height ?? 0) && 'vt',
|
||
]}
|
||
>
|
||
<Image
|
||
src={m.data.image}
|
||
alt={m.data.text ?? m.data.tags.join(' ')}
|
||
widths={[480, 840]}
|
||
sizes="(min-width: 760px) 420px, calc(100vw - 140px)"
|
||
/>
|
||
</figure>
|
||
)}
|
||
{m.data.text && <div class="mom-text" set:html={richText.get(m.id) ?? ''} />}
|
||
{m.data.tags.length > 0 && (
|
||
<p class="mom-tags">
|
||
{m.data.tags.map((tag) => <code class="tag">{`#${tag}`}</code>)}
|
||
</p>
|
||
)}
|
||
<MomentComments slug={m.id} locale={locale} />
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
|
||
<!-- 安装引导（disclosure 小条）：仅浏览器明确可装且未安装时现形，克制不打扰 -->
|
||
<div class="install-cta" id="install-cta" hidden>
|
||
<span>{locale === 'en' ? 'Add to Home Screen — moments work offline' : '装到主屏，离线也能刷瞬间'}</span>
|
||
<button type="button" id="install-btn" class="install-btn">
|
||
{locale === 'en' ? 'Install' : '安装'}
|
||
</button>
|
||
</div>
|
||
</BaseLayout>
|
||
|
||
<script>
|
||
// 时间线渐显：html[data-mom-anim] 由 JS 前置标记——无 JS / reduced-motion 时
|
||
// 标记缺席，CSS 初始隐藏规则整体不生效（渐进降级，元素永远可见）
|
||
let io: IntersectionObserver | null = null;
|
||
const armAnim = () => {
|
||
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||
if (!('IntersectionObserver' in window)) return;
|
||
document.documentElement.dataset.momAnim = 'on';
|
||
io?.disconnect();
|
||
io = new IntersectionObserver(
|
||
(entries) => {
|
||
for (const e of entries) {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add('in-view');
|
||
io?.unobserve(e.target);
|
||
}
|
||
}
|
||
},
|
||
{ rootMargin: '0px 0px -8% 0px' },
|
||
);
|
||
document.querySelectorAll('.tl-item:not(.in-view)').forEach((el) => io?.observe(el));
|
||
};
|
||
|
||
document.addEventListener('astro:page-load', () => {
|
||
armAnim();
|
||
refreshInstallCta();
|
||
});
|
||
armAnim();
|
||
|
||
// —— PWA 安装引导：beforeinstallprompt 早在页面加载初期触发，
|
||
// 故模块级立即绑定存事件，page-load 只负责刷新 UI 显隐 ——
|
||
let deferredPrompt: Event & { prompt?: () => Promise<void>; userChoice?: Promise<{ outcome: string }> } | null = null;
|
||
document.addEventListener('beforeinstallprompt', (e) => {
|
||
e.preventDefault();
|
||
deferredPrompt = e as typeof deferredPrompt;
|
||
refreshInstallCta();
|
||
});
|
||
document.addEventListener('appinstalled', () => {
|
||
deferredPrompt = null;
|
||
refreshInstallCta();
|
||
});
|
||
const isInstalled = () =>
|
||
matchMedia('(display-mode: standalone)').matches ||
|
||
(navigator as Navigator & { standalone?: boolean }).standalone === true;
|
||
function refreshInstallCta() {
|
||
const cta = document.getElementById('install-cta');
|
||
if (!cta) return;
|
||
cta.hidden = !(deferredPrompt && !isInstalled());
|
||
}
|
||
document.addEventListener('click', (e) => {
|
||
if ((e.target as HTMLElement)?.id !== 'install-btn') return;
|
||
if (!deferredPrompt) return;
|
||
void (async () => {
|
||
try {
|
||
await deferredPrompt?.prompt?.();
|
||
const choice = await deferredPrompt?.userChoice;
|
||
if (choice?.outcome === 'accepted') {
|
||
deferredPrompt = null;
|
||
refreshInstallCta();
|
||
}
|
||
} catch { /* 用户关闭安装框：保留事件，小条仍在 */ }
|
||
})();
|
||
});
|
||
refreshInstallCta();
|
||
</script>
|
||
|
||
<style>
|
||
.page-title {
|
||
font-size: var(--text-h1);
|
||
line-height: var(--leading-heading);
|
||
color: var(--ink-1);
|
||
margin-top: var(--space-5);
|
||
text-wrap: balance;
|
||
}
|
||
.page-note {
|
||
font-size: 13px;
|
||
color: var(--ink-4);
|
||
margin-block: var(--space-1) var(--space-4);
|
||
}
|
||
.tl {
|
||
list-style: none;
|
||
margin: var(--space-4) 0 0;
|
||
padding: 0;
|
||
}
|
||
/* 时间线骨架：左 mono 日期 + 竖线 + --accent 节点 + 右侧内容卡 */
|
||
.tl-item {
|
||
/* 日期轨宽度集中一处：10 字符 mono 日期（2026-04-29）在 12.5px 下约 75px，
|
||
原来复用 var(--space-5)=40px 导致在「-」处折成两行（视觉终审 P1） */
|
||
--tl-rail: 5.4rem;
|
||
position: relative;
|
||
margin: 0 0 var(--space-4) calc(var(--tl-rail) + var(--space-4));
|
||
padding-left: var(--space-4);
|
||
border-left: 1px solid var(--line);
|
||
}
|
||
.tl-item:last-child { margin-bottom: 0; }
|
||
.tl-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -5px;
|
||
top: 7px;
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--bg);
|
||
}
|
||
.tl-date {
|
||
position: absolute;
|
||
left: calc(-1 * (var(--tl-rail) + var(--space-4)));
|
||
top: 4px;
|
||
width: var(--tl-rail);
|
||
white-space: nowrap;
|
||
text-align: right;
|
||
font-family: var(--font-mono);
|
||
font-size: 12.5px;
|
||
color: var(--ink-4);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.mom-card {
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--bg-soft);
|
||
}
|
||
.mom-card > p { font-size: 15px; color: var(--ink-2); }
|
||
/* 富文本正文（T2）：首尾 margin 归零，避免卡片被 <p> 的默认外边距撑开；
|
||
段间只留半档间距，列表缩进对齐正文基线。基调保持 15px / ink-2。 */
|
||
.mom-text {
|
||
font-size: 15px;
|
||
color: var(--ink-2);
|
||
line-height: 1.7;
|
||
}
|
||
.mom-text :global(> :first-child) { margin-top: 0; }
|
||
.mom-text :global(> :last-child) { margin-bottom: 0; }
|
||
.mom-text :global(p) { margin: 0 0 var(--space-1); }
|
||
.mom-text :global(ul),
|
||
.mom-text :global(ol) {
|
||
margin: 0 0 var(--space-1);
|
||
padding-left: 1.35em;
|
||
}
|
||
.mom-text :global(li) { margin: 0; }
|
||
.mom-text :global(li + li) { margin-top: 2px; }
|
||
.mom-text :global(blockquote) {
|
||
margin: var(--space-1) 0;
|
||
padding-left: var(--space-2);
|
||
border-left: 2px solid var(--line);
|
||
color: var(--ink-3);
|
||
}
|
||
.mom-text :global(code) {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.92em;
|
||
background: var(--bg);
|
||
border-radius: 4px;
|
||
padding: 1px 5px;
|
||
}
|
||
.mom-text :global(a) {
|
||
color: var(--accent);
|
||
text-decoration: underline;
|
||
text-underline-offset: 0.18em;
|
||
}
|
||
.mom-fig {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin: 0 0 var(--space-2);
|
||
max-width: 420px;
|
||
}
|
||
.mom-fig.vt { max-width: 260px; }
|
||
.mom-fig :global(img) { width: 100%; height: auto; }
|
||
.mom-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1);
|
||
margin-top: var(--space-2);
|
||
}
|
||
.tag {
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
background: var(--bg);
|
||
border-radius: 5px;
|
||
padding: 1px 7px;
|
||
white-space: nowrap;
|
||
}
|
||
/* 窄屏：日期卡到卡片上方，竖线左移收窄 */
|
||
@media (max-width: 760px) {
|
||
.tl-item { margin-left: var(--space-3); }
|
||
.tl-date {
|
||
position: static;
|
||
display: block;
|
||
width: auto;
|
||
text-align: left;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
}
|
||
@media (max-width: 560px) {
|
||
.mom-card { padding: var(--space-2) var(--space-3); }
|
||
.mom-fig { max-width: 100%; }
|
||
}
|
||
.install-cta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-top: var(--space-5);
|
||
padding: var(--space-3);
|
||
border: 1px dashed var(--line);
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
color: var(--ink-3);
|
||
}
|
||
.install-btn {
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--ink-2);
|
||
background: var(--bg-soft);
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 4px 12px;
|
||
cursor: pointer;
|
||
transition: border-color var(--dur) var(--ease);
|
||
}
|
||
.install-btn:hover { border-color: var(--accent); }
|
||
.mom-page-meta { margin: 0 0 var(--space-4); }
|
||
/* 初始隐藏仅在 JS 标记存在时生效：宁轻勿闹——透明度+8px 上移，进入视口一次性点亮 */
|
||
[data-mom-anim] .tl-item {
|
||
opacity: 0;
|
||
translate: 0 8px;
|
||
transition: opacity 0.45s var(--ease), translate 0.45s var(--ease);
|
||
}
|
||
[data-mom-anim] .tl-item.in-view {
|
||
opacity: 1;
|
||
translate: 0 0;
|
||
}
|
||
</style>
|