feat(i18n): /en/ 双语骨架——路由/切换/hreflang/回退/AI 标注
- astro i18n(zh 默认无前缀,en /en/)+ locale.ts 路径工具
- Header 语言切换(同路径跨前缀跳转,预构建毫秒级)
- /en/index + /en/archives/{slug}(postsEn 优先,缺译回退 zh 正文
+ AiTranslatedBadge 虚线标注 TMT);en RSS(标题回退同策略)
- BaseLayout hreflang 双向 + x-default 指向 zh 源
- posts-en 集合(postsSchema.extend locked 润色锁)
- 坑:ts 端点文件误带 --- 开头会以 undefined:2:7 报 Unexpected token
验证: astro build 18 页 exit 0;/en/ 六文章路由+首页+rss 产物断言过;
zh 侧零回归(11 页不变);hreflang 抽查 dist/index.html
Spec: 2026-10-25_add-blog-i18n
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
cf42081614
commit
c74815b516
11 files changed
+273
-4
No files matched your search
@@ -0,0 +1,71 @@
|
||||
---
|
||||
// /en/archives/{slug}:英文版文章页——postsEn 优先;缺译回退 zh 正文 + 醒目标注
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import BaseLayout from '../../../layouts/BaseLayout.astro';
|
||||
import ArtalkComments from '../../../components/ArtalkComments.astro';
|
||||
import AiTranslatedBadge from '../../../components/AiTranslatedBadge.astro';
|
||||
import { t } from '../../../i18n/ui';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const zh = (await getCollection('posts', ({ data }) => !data.draft)).sort(
|
||||
(a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
|
||||
);
|
||||
const en = new Map((await getCollection('postsEn')).map((e) => [e.id, e]));
|
||||
return zh.map((entry, i) => ({
|
||||
params: { slug: entry.id },
|
||||
props: { entry, enEntry: en.get(entry.id) ?? null, prev: zh[i + 1] ?? null, next: zh[i - 1] ?? null },
|
||||
}));
|
||||
}
|
||||
|
||||
interface Props {
|
||||
entry: CollectionEntry<'posts'>;
|
||||
enEntry: CollectionEntry<'postsEn'> | null;
|
||||
prev: CollectionEntry<'posts'> | null;
|
||||
next: CollectionEntry<'posts'> | null;
|
||||
}
|
||||
const { entry, enEntry, prev, next } = Astro.props;
|
||||
// 译文存在则渲染译文;否则回退 zh 正文(语言切换的降级承诺:单篇未译不破站)
|
||||
const { Content } = await render(enEntry ?? entry);
|
||||
const isReading = entry.data.category === 'reading';
|
||||
const date = entry.data.pubDate.toISOString().slice(0, 10);
|
||||
const words = (enEntry?.body ?? entry.body ?? '').split(/\s+/).length;
|
||||
const minutes = Math.max(1, Math.ceil(words / 220));
|
||||
---
|
||||
|
||||
<BaseLayout title={`${enEntry?.data.title ?? entry.data.title} · wait4x`} track={isReading ? 'reading' : 'tech'}>
|
||||
<article class={`post ${isReading ? 'post-reading' : 'post-tech'}`}>
|
||||
<header class="post-head">
|
||||
<p class="post-cat">
|
||||
{isReading ? t('category_reading', 'en') : entry.data.category === 'tech' ? t('category_tech', 'en') : t('category_photo', 'en')}
|
||||
</p>
|
||||
<h1 class="post-title">{enEntry?.data.title ?? entry.data.title}</h1>
|
||||
<p class="post-meta">
|
||||
<i class="emo" style={`background:${entry.data.mood ?? 'var(--mood)'}`} aria-hidden="true" />
|
||||
<time datetime={entry.data.pubDate.toISOString()}>{date}</time>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>{minutes} {t('reading_time_min', 'en')}</span>
|
||||
</p>
|
||||
</header>
|
||||
<AiTranslatedBadge />
|
||||
<div class={isReading ? 'prose-reading' : 'prose-tech'}>
|
||||
<Content />
|
||||
</div>
|
||||
<nav class="pn">
|
||||
{prev && <a class="pn-item" href={`/en/archives/${prev.id}/`}>← {t('prev_post', 'en')} · {prev.data.title}</a>}
|
||||
{next && <a class="pn-item" href={`/en/archives/${next.id}/`}>{t('next_post', 'en')} · {next.data.title} →</a>}
|
||||
</nav>
|
||||
<ArtalkComments pageKey={`/archives/${entry.id}/`} pageTitle={entry.data.title} />
|
||||
</article>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.post-head { margin-bottom: var(--space-4); }
|
||||
.post-cat { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; }
|
||||
.post-title { font-size: var(--text-h1); line-height: var(--leading-heading); color: var(--ink-1); text-wrap: balance; }
|
||||
.post-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: 13px; color: var(--ink-3); }
|
||||
.emo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
|
||||
.pn { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
|
||||
.pn-item { font-size: 14px; color: var(--ink-2); transition: color var(--dur) var(--ease); }
|
||||
.pn-item:hover { color: var(--accent); }
|
||||
</style>
|
||||
Reference in new issue
Block a user