wait4x/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): UI 字典串接与三页薄化——/en/ 全站落成

Browse Source 
- op-gitea 车道：ui.ts 扩 26 键（占位 {n}/{title}/{exif} 约定），五组件
  locale prop 串接，zh 零回归（48 键/18 页实测）
- orchestrator 收尾：gallery/moments/about 三页 body 提取为
  components/pages/*Page（zh/en 薄页双路由），/en/ 全家福 21 页
- 提取工程三坑入库：HTML 注释不可进 frontmatter 模块区；搬移脚本会吃
  开栏 ---；单级页面搬二级目录后 import 全线差一层

验证: astro build 21 页 exit 0；/en/ 七类路由产物断言过；en 页
      ICP 备案保留；zh 侧文案抽查不变

Spec: 2026-10-25_add-blog-i18n
Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed 2026-10-25 09:26:14 +08:00
1 parent c74815b516
commit 4aa79fca06
13 files changed
+757 -653
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/gallery/index.astro
+2 -391
View File
@@ -1,393 +1,4 @@
---
import { Image, getImage } from 'astro:assets';
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import type { PhotoExif } from '../../lib/exif';
const photos = await getCollection('photos');
// EXIF 参数条（机身/镜头/光圈/快门/ISO）构建期拼好整串，灯箱运行时只做文本替换
function formatExif(exif: PhotoExif | undefined): string {
if (!exif) return '';
const shutter =
exif.exposureTime === undefined
? undefined
: exif.exposureTime >= 1
? `${exif.exposureTime}s`
: `1/${Math.round(1 / exif.exposureTime)}s`;
return [
[exif.make, exif.model].filter(Boolean).join(' ') || undefined,
exif.lens,
exif.fNumber === undefined ? undefined : `f/${exif.fNumber}`,
shutter,
exif.iso === undefined ? undefined : `ISO ${exif.iso}`,
]
.filter(Boolean)
.join(' · ');
}
/* masonry：行高/列距用容器宽百分比（0.92cqw/1.62cqw，在 864px 版心即 8px/14px 档），
行高随断点等比缩放，构建期一份 row-span 在 2/3 列全断点精确成立——
px 定值行高会让格高随列宽漂移，窄屏裁切失控 */
const ROW = 0.0092;
const GAP = 0.0162;
const spanFor = (w: number, h: number, cols: number) =>
Math.round(((1 - GAP * (cols - 1)) / (cols * (w / h)) + GAP) / (ROW + GAP));
const cards = await Promise.all(
photos.map(async (photo) => {
// 宽高比来源：photos loader 产出 ImageMetadata 的 width/height（orientation 已修正）
const w = photo.data.image.width ?? 4;
const h = photo.data.image.height ?? 3;
const full = await getImage({ src: photo.data.image, width: 1440 });
return {
group: photo.data.group,
title: photo.data.title,
alt: photo.data.alt ?? photo.data.title,
image: photo.data.image,
exif: formatExif(photo.data.exif),
fullSrc: full.src,
// 原图走仓外 store（构建时独立 rsync 到 /photos-originals/），git 不背 196M
original: `/photos-originals/${photo.id}.jpg`,
w,
h,
s3: spanFor(w, h, 3),
s2: spanFor(w, h, 2),
};
}),
);
const first = cards[0];
import GalleryPage from '../../components/pages/GalleryPage.astro';
---
<BaseLayout title="图库 · wait4x">
<h1 class="page-title">图库</h1>
<div class="g-main">
<fieldset class="filters">
<legend class="sr-only">分组筛选</legend>
<input class="f-input" type="radio" name="gallery-group" id="f-all" checked />
<label class="tap chip" for="f-all">全部</label>
<input class="f-input" type="radio" name="gallery-group" id="f-street" />
<label class="tap chip" for="f-street">街拍</label>
<input class="f-input" type="radio" name="gallery-group" id="f-landscape" />
<label class="tap chip" for="f-landscape">风景</label>
</fieldset>
<div class="stage">
<ul class="wall">
{cards.map((card) => (
<li
class="shot"
data-group={card.group}
style={`aspect-ratio:${card.w}/${card.h}; --s3:${card.s3}; --s2:${card.s2}`}
>
<button
type="button"
class="shot-btn"
data-title={card.title}
data-exif={card.exif}
data-full={card.fullSrc}
data-original={card.original}
aria-label={`查看大图：${card.title}${card.exif ? `（${card.exif}）` : ''}`}
>
<Image
src={card.image}
alt={card.alt}
widths={[320, 560, 720]}
sizes="(min-width: 820px) 30vw, 46vw"
loading="lazy"
/>
</button>
</li>
))}
</ul>
</div>
<p class="g-note">共 {cards.length} 张 · EXIF 构建期自动提取</p>
</div>
<dialog id="lb" aria-label="照片查看">
<button id="lb-close" class="tap lbnav" type="button" aria-label="关闭（Esc）">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
<path d="m5 5 14 14M19 5 5 19"></path>
</svg>
</button>
<div class="lb-figure">
<img id="lb-img" src={first?.fullSrc} alt={first?.alt ?? ''} />
</div>
<div class="lb-bottom">
<button id="lb-prev" class="tap lbnav" type="button" aria-label="上一张（←）">
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m14.5 5.5-6.5 6.5 6.5 6.5"></path>
</svg>
</button>
<div class="lb-meta">
<strong id="lb-title">{first?.title}</strong>
<span id="lb-exif">{first?.exif}</span>
<span class="lb-orig">
<a id="lb-original" href={first?.original} target="_blank" rel="noopener">原图</a>
<a id="lb-download" href={first?.original} download>下载</a>
</span>
</div>
<button id="lb-next" class="tap lbnav" type="button" aria-label="下一张（→）">
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m9.5 5.5 6.5 6.5-6.5 6.5"></path>
</svg>
</button>
</div>
</dialog>
</BaseLayout>
<script>
// 灯箱：原生 dialog，←→ 切换、Esc 原生关闭；触屏快滑翻页是键盘的等价物。
// ClientRouter 下模块脚本只执行一次，接线挂在 astro:page-load 按当前 DOM 重装
document.addEventListener('astro:page-load', () => {
const lb = document.getElementById('lb') as HTMLDialogElement | null;
const shots = [...document.querySelectorAll<HTMLButtonElement>('.shot-btn')];
if (!lb || shots.length === 0) return;
const img = document.getElementById('lb-img') as HTMLImageElement;
const titleEl = document.getElementById('lb-title') as HTMLElement;
const exifEl = document.getElementById('lb-exif') as HTMLElement;
const reduced = matchMedia('(prefers-reduced-motion: reduce)');
let idx = 0;
const show = (i: number) => {
idx = (i + shots.length) % shots.length;
const btn = shots[idx]!;
img.src = btn.dataset.full ?? '';
img.alt = btn.ariaLabel ?? '';
titleEl.textContent = btn.dataset.title ?? '';
exifEl.textContent = btn.dataset.exif ?? '';
const orig = btn.dataset.original ?? '';
(document.getElementById('lb-original') as HTMLAnchorElement).href = orig;
const dl = document.getElementById('lb-download') as HTMLAnchorElement;
dl.href = orig;
dl.setAttribute('download', btn.dataset.title ?? 'photo');
if (!reduced.matches) {
img.style.opacity = '0';
requestAnimationFrame(() => {
img.style.opacity = '1';
});
}
if (!lb.open) lb.showModal();
};
shots.forEach((btn, i) => btn.addEventListener('click', () => show(i)));
document.getElementById('lb-prev')?.addEventListener('click', () => show(idx - 1));
document.getElementById('lb-next')?.addEventListener('click', () => show(idx + 1));
document.getElementById('lb-close')?.addEventListener('click', () => lb.close());
lb.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
e.preventDefault();
show(idx - 1);
} else if (e.key === 'ArrowRight') {
e.preventDefault();
show(idx + 1);
}
});
let x0: number | null = null;
lb.addEventListener('touchstart', (e) => {
x0 = e.touches[0]!.clientX;
}, { passive: true });
lb.addEventListener('touchend', (e) => {
if (x0 === null) return;
const dx = e.changedTouches[0]!.clientX - x0;
if (Math.abs(dx) > 40) show(idx + (dx < 0 ? 1 : -1));
x0 = null;
}, { passive: true });
});
</script>
<style>
/* 版心放行：图库加宽到 measure+176（丙路线 §3；BaseLayout 默认 720） */
:global(main#main:has(.g-main)) {
max-width: calc(var(--measure) + 176px);
}
.page-title {
font-size: var(--text-h1);
line-height: var(--leading-heading);
color: var(--ink-1);
margin-top: var(--space-5);
text-wrap: balance;
}
/* 分组筛选：纯 CSS :checked + :has，radio 原生键盘可达（方向键切换） */
.filters {
border: none;
padding: 0;
margin: var(--space-3) 0 var(--space-4);
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.sr-only,
.f-input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.chip {
padding-inline: 13px;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 13px;
color: var(--ink-3);
cursor: pointer;
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { color: var(--ink-1); border-color: var(--ink-4); }
.f-input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-input:checked + .chip { color: var(--ink-1); border-color: var(--ink-3); font-weight: 500; }
.g-main:has(#f-street:checked) .shot:not([data-group='street']) { display: none; }
.g-main:has(#f-landscape:checked) .shot:not([data-group='landscape']) { display: none; }
/* masonry：stage 是容器查询锚，行高/列距以 stage 宽为基（cqw） */
.stage { container-type: inline-size; }
.wall {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 0.92cqw; /* 8px 档 @ 864px 版心 */
grid-auto-flow: dense;
gap: 1.62cqw; /* 14px 档 @ 864px 版心 */
}
@media (min-width: 820px) {
.wall { grid-template-columns: repeat(3, 1fr); }
}
.shot {
grid-row-end: span var(--s2, 10);
border-radius: 10px;
overflow: hidden;
}
@media (min-width: 820px) {
.shot { grid-row-end: span var(--s3, 12); }
}
.shot-btn {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: none;
cursor: zoom-in;
}
.shot-btn :global(img) {
width: 100%;
height: 100%;
object-fit: cover;
}
.g-note {
margin-top: var(--space-3);
font-size: 12.5px;
color: var(--ink-4);
}
/* 灯箱：全屏原生 dialog，高度用 dvh（规避 100vh 移动端地址栏陷阱） */
#lb {
inset: 0;
width: 100%;
height: 100dvh;
max-width: none;
max-height: none;
margin: 0;
border: none;
border-radius: 0;
background: transparent;
display: flex;
flex-direction: column;
padding: 0;
}
#lb::backdrop { background: rgba(8, 10, 14, 0.95); }
.lb-figure {
flex: 1;
min-height: 0;
display: grid;
place-items: center;
padding: var(--space-5) var(--space-4) var(--space-2);
}
#lb-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 6px;
transition: opacity 160ms var(--ease);
}
.lb-bottom {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4) var(--space-4);
color: var(--code-ink);
font-family: var(--font-mono);
font-size: 12.5px;
}
.lb-orig {
display: inline-flex;
gap: var(--space-3);
margin-left: var(--space-2);
}
.lb-orig a {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.lb-meta {
flex: 1;
min-width: 0;
text-align: center;
display: flex;
flex-direction: column;
gap: 2px;
}
.lb-meta strong {
color: #fff;
font-size: 13px;
font-family: var(--font-sans);
font-weight: 600;
}
.lb-meta span {
opacity: 0.82;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lbnav {
flex: none;
width: 44px;
height: 44px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: #e6e9ee;
}
.lbnav:hover { background: rgba(255, 255, 255, 0.12); }
#lb-close {
position: absolute;
top: var(--space-3);
right: var(--space-3);
}
@media (max-width: 560px) {
.lb-bottom { flex-wrap: wrap; }
.lb-orig {
display: inline-flex;
gap: var(--space-3);
margin-left: var(--space-2);
}
.lb-orig a {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.lb-meta { order: 3; flex-basis: 100%; }
}
</style>
<GalleryPage locale="zh" />