@windcoder/astro-theme-orchid 0.1.0 → 0.2.1

package/scripts/subset-fonts.mjs

@@ -0,0 +1,227 @@
+#!/usr/bin/env node
+/**
+ * 字体子集化脚本（M4-3，移植自 orchid-blog/scripts/subset-fonts.ts）
+ *
+ * astro build 之后运行：扫描 dist/ 全部 HTML 收集实际用到的字符，
+ * 为 subset-fonts.json 清单中声明的本地字体生成 woff2 子集，
+ * 重写 dist 内 CSS/HTML 对原字体的 url()/href 引用，并删除 dist 中的原字体。
+ * 相比原版的改动：原版靠 __SUBSET_FONT_{id}__ 占位符替换，但源码中并无
+ * 占位符生成方（半成品机制）；本版直接重写原字体 URL，配合站点自写的
+ * @font-face 即可端到端生效，且不再依赖 Astro Font API 与站点 src/config。
+ *
+ * 运行：pnpm --filter site build 内链（cwd 必须是 site 根）
+ * 清单：site 根 subset-fonts.json（可选）：
+ *   { "fonts": [{ "src": "/assets/fonts/Foo.ttf", "id": "foo", "extraChars": "…" }] }
+ *   - src 必填：dist 绝对路径（/ 开头），也兼容 ./public/ 前缀写法
+ *   - id 选填：默认取文件名；extraChars 选填：补充动态内容字符
+ * 无清单或清单为空时跳过（exit 0），CI 无需感知。
+ * dev 模式不受影响：dev 直接走 public 原字体，仅构建产物被子集化。
+ */
+import crypto from "node:crypto";
+import fs from "node:fs/promises";
+import path from "node:path";
+import subsetFont from "subset-font";
+
+const DIST_DIR = "dist";
+const MANIFEST_FILE = "subset-fonts.json";
+
+/** 与 generate-lqips.mjs 一致：目录递归替代 glob 依赖 */
+async function walkFiles(dir, exts, out = []) {
+	let entries;
+	try {
+		entries = await fs.readdir(dir, { withFileTypes: true });
+	} catch {
+		return out;
+	}
+	for (const entry of entries) {
+		const full = path.join(dir, entry.name);
+		if (entry.isDirectory()) {
+			await walkFiles(full, exts, out);
+		} else if (exts.has(path.extname(entry.name).toLowerCase())) {
+			out.push(full);
+		}
+	}
+	return out;
+}
+
+/**
+ * 将清单 src 归一为 dist 绝对 URL（/ 开头）。
+ * 兼容 ./public/x、public/x、/public/x、/x 四种写法；无法归一返回 null。
+ */
+function toPublicPath(rawSrc) {
+	if (rawSrc.startsWith("/")) {
+		const m = rawSrc.match(/^\/public\/(.+)$/);
+		return m ? `/${m[1]}` : rawSrc;
+	}
+	const m = rawSrc.match(/^\.?\/?public\/(.+)$/);
+	return m ? `/${m[1]}` : null;
+}
+
+/**
+ * 从 HTML 提取可见文本：剔除 script/style，剥标签，
+ * 解常见实体，另收 alt/title/aria-label/placeholder 属性值（移植原版）
+ */
+function extractTextFromHtml(html) {
+	let text = html.replace(/<(script|style)[^>]*>[\s\S]*?<\/\1>/gi, " ");
+	text = text.replace(/<[^>]+>/g, " ");
+	text = text
+		.replace(/&amp;/g, "&")
+		.replace(/&lt;/g, "<")
+		.replace(/&gt;/g, ">")
+		.replace(/&quot;/g, '"')
+		.replace(/&#39;/g, "'")
+		.replace(/&nbsp;/g, " ");
+	const attrs = html.matchAll(
+		/(?:alt|title|aria-label|placeholder)=["']([^"']+)["']/gi,
+	);
+	for (const m of attrs) text += m[1];
+	return text;
+}
+
+async function collectChars(distDir) {
+	const files = await walkFiles(distDir, new Set([".html"]));
+	const chars = new Set();
+	for (const file of files) {
+		const html = await fs.readFile(file, "utf-8");
+		for (const c of extractTextFromHtml(html)) chars.add(c);
+	}
+	return [...chars].join("");
+}
+
+function contentHash(buffer) {
+	return crypto.createHash("sha256").update(buffer).digest("hex").slice(0, 16);
+}
+
+/** 生成 url(...) 与 href/src 属性两种引用形态的重写规则 */
+function rewriteReferences(content, originalUrl, subsetUrl) {
+	const escaped = originalUrl.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const urlRe = new RegExp(`url\\(\\s*(['"]?)${escaped}\\1\\s*\\)`, "g");
+	const attrRe = new RegExp(`((?:href|src)=['"])${escaped}(['"])`, "g");
+	return content
+		.replace(urlRe, `url($1${subsetUrl}$1)`)
+		.replace(attrRe, `$1${subsetUrl}$2`);
+}
+
+async function main() {
+	const cwd = process.cwd();
+	const distDir = path.join(cwd, DIST_DIR);
+
+	// 1. 读清单；无清单/空清单 → no-op 跳过
+	let manifest;
+	try {
+		manifest = JSON.parse(
+			await fs.readFile(path.join(cwd, MANIFEST_FILE), "utf-8"),
+		);
+	} catch {
+		console.log("[subset-fonts] 无 subset-fonts.json 清单，跳过（exit 0）");
+		return;
+	}
+	const entries = (manifest.fonts ?? [])
+		.map((e) => {
+			const publicUrl = toPublicPath(e.src ?? "");
+			if (!publicUrl) {
+				console.warn(
+					`[subset-fonts] ⚠ 无法归一 src 路径，跳过：${e.src}（需 /assets/... 或 public/ 前缀）`,
+				);
+				return null;
+			}
+			const id = (e.id || path.basename(publicUrl, path.extname(publicUrl)))
+				.toLowerCase()
+				.replace(/\s+/g, "-");
+			return { id, url: publicUrl, extraChars: e.extraChars ?? "" };
+		})
+		.filter(Boolean);
+
+	if (entries.length === 0) {
+		console.log("[subset-fonts] 清单为空，跳过（exit 0）");
+		return;
+	}
+
+	// 2. 收集 dist 页面实际字符
+	console.log("[subset-fonts] 扫描 dist/ HTML 收集字符…");
+	const pageChars = await collectChars(distDir);
+	if (pageChars.length === 0) {
+		console.warn("[subset-fonts] ⚠ dist/ 无 HTML 或无字符，跳过");
+		return;
+	}
+	console.log(`[subset-fonts] 收集到 ${pageChars.length} 个去重字符`);
+
+	// 3. 逐字体生成子集
+	const outDir = path.join(distDir, "assets", "fonts");
+	await fs.mkdir(outDir, { recursive: true });
+	const results = [];
+	for (const entry of entries) {
+		const originalPath = path.join(distDir, entry.url.slice(1));
+		let fontBuffer;
+		try {
+			fontBuffer = await fs.readFile(originalPath);
+		} catch {
+			console.error(
+				`[subset-fonts] ❌ dist 中未找到字体 ${entry.url}（确认已在 public/ 放置并参与构建）`,
+			);
+			continue;
+		}
+
+		const charSet = new Set([...pageChars, ...entry.extraChars]);
+		const chars = [...charSet].join("");
+		try {
+			const subsetBuffer = await subsetFont(fontBuffer, chars, {
+				targetFormat: "woff2",
+				preserveNameTable: true,
+			});
+			const hash = contentHash(subsetBuffer);
+			const outName = `${entry.id}.${hash}.woff2`;
+			await fs.writeFile(path.join(outDir, outName), subsetBuffer);
+
+			const kb = (n) => (n / 1024).toFixed(1);
+			const saved = (
+				((fontBuffer.length - subsetBuffer.length) / fontBuffer.length) *
+				100
+			).toFixed(1);
+			console.log(
+				`[subset-fonts] ✔ ${entry.id} → ${outName}（${kb(subsetBuffer.length)} KB，原 ${kb(fontBuffer.length)} KB，省 ${saved}%）`,
+			);
+			results.push({ ...entry, outName });
+		} catch (err) {
+			console.error(`[subset-fonts] ❌ ${entry.id} 子集化失败:`, err);
+		}
+	}
+	if (results.length === 0) {
+		console.warn("[subset-fonts] ⚠ 未产出任何子集");
+		return;
+	}
+
+	// 4. 重写 dist 内 CSS/HTML 引用（url() 与 href/src 属性）
+	console.log("[subset-fonts] 重写 dist 内字体引用…");
+	const targets = await walkFiles(distDir, new Set([".css", ".html"]));
+	for (const file of targets) {
+		let content = await fs.readFile(file, "utf-8");
+		const before = content;
+		for (const r of results) {
+			content = rewriteReferences(content, r.url, `/assets/fonts/${r.outName}`);
+		}
+		if (content !== before) {
+			await fs.writeFile(file, content);
+			console.log(`[subset-fonts] ✔ 已更新 ${path.relative(cwd, file)}`);
+		}
+	}
+
+	// 5. 删除 dist 中的原字体（public 源文件保留，dev 仍走原字体）
+	for (const r of results) {
+		const originalPath = path.join(distDir, r.url.slice(1));
+		try {
+			await fs.unlink(originalPath);
+			console.log(
+				`[subset-fonts] ✔ 已删除 ${path.relative(cwd, originalPath)}`,
+			);
+		} catch {
+			// 原文件可能已不在 dist，忽略
+		}
+	}
+	console.log("[subset-fonts] ✨ 字体子集化完成");
+}
+
+main().catch((err) => {
+	console.error("[subset-fonts] ❌ 执行失败:", err);
+	process.exit(1);
+});

package/src/i18n/en.ts

@@ -97,6 +97,9 @@ const en: Record<UiKey, string> = {
 	allTags: "All",
 	galleryNoAlbums: "No albums yet. Add one in theme config gallery.albums.",
 	galleryNoPhotos: "No photos in this album",
+	/* 说说页（§4.87） */
+	momentsTitle: "Moments",
+	momentsEmpty: "No moments yet.",
 	encryptedAlbum: "Encrypted album",
 	searchAlbumNoResults: "No matching albums",
 	postEncrypted: "Encrypted",

package/src/i18n/zh-CN.ts

@@ -112,6 +112,9 @@ const zhCN = {
 	allTags: "全部",
 	galleryNoAlbums: "还没有相册，在主题配置 gallery.albums 中添加。",
 	galleryNoPhotos: "相册里还没有照片",
+	/* 说说页（§4.87） */
+	momentsTitle: "说说",
+	momentsEmpty: "还没有说说。",
 	encryptedAlbum: "加密相册",
 	searchAlbumNoResults: "没有匹配的相册",
 	/* 加密文章（M3b-b7）：postEncrypted 用于列表/文章 meta 标记，其余构建期渲染进锁 UI */

package/src/index.ts

@@ -41,12 +41,14 @@ import {
 	rehypeExternalLinks,
 	rehypeFigure,
 	rehypeFirstImage,
+	rehypeNoReferrer,
 } from "./plugins/rehype.js";
 import {
 	rehypeDiagramPanZoom,
 	rehypeMermaid,
 	rehypePlantuml,
 } from "./plugins/rehype-diagram.js";
+import { rehypeEcVtRerun } from "./plugins/rehype-ec-vt-rerun.js";
 import { rehypeEmailProtection } from "./plugins/rehype-email.js";
 import { rehypeGithubCard } from "./plugins/rehype-github-card.js";
 import { remarkMermaid, remarkPlantuml } from "./plugins/remark-diagram.js";
@@ -124,6 +126,8 @@ export function defineTheme(userConfig: ThemeConfig): AstroIntegration[] {
 					// GitHub 仓库卡片（§4.10）：github 标签 → 卡片（自带 target，须在外链处理前）
 					rehypeGithubCard,
 					rehypeExternalLinks,
+					// 图片防盗链（§4.87）：命中域名外链图加 no-referrer（domains 空时插件空转）
+					[rehypeNoReferrer, { domains: config.noReferrer.domains }],
 					rehypeCallouts,
 					rehypeFigure,
 					rehypeFirstImage,
@@ -242,6 +246,10 @@ export function defineTheme(userConfig: ThemeConfig): AstroIntegration[] {
 						frames: { showCopyToClipboardButton: true },
 					},
 				]);
+				// §4.74：必须在 EC 之后追加——社区折叠插件（expressive-code-collapsible）
+				// 注入的内联脚本无 View Transitions 适配，ClientRouter 换页后按钮绑定
+				// 失效；此插件给该脚本打 data-astro-rerun 标记，swap 时由 Astro 重执行
+				rehypePlugins.push(rehypeEcVtRerun);
 				updateConfig({
 					// 主题路由全部按尾斜杠组织（如 /posts/xxx/），统一强制，dev 与 prod 行为一致
 					trailingSlash: "always",
@@ -303,9 +311,13 @@ export function defineTheme(userConfig: ThemeConfig): AstroIntegration[] {
 					["/page/[page]", "page/[page].astro"],
 					["/archive", "archive.astro"],
 					["/tags", "tags/index.astro"],
-					["/tags/[tag]", "tags/[tag].astro"],
+					// §4.87 分类/标签分页：第一页 /tags/<tag>/（page 段省略），后续 /2/ 起
+					["/tags/[tag]/[...page]", "tags/[tag]/[...page].astro"],
 					["/categories", "categories/index.astro"],
-					["/categories/[category]", "categories/[category].astro"],
+					[
+						"/categories/[category]/[...page]",
+						"categories/[category]/[...page].astro",
+					],
 					["/posts/[...slug]", "posts/[...slug].astro"],
 					// sitemap（§4.63）：改由官方 @astrojs/sitemap integration 产出
 					// sitemap-index.xml，原手写 /sitemap.xml 路由移除
@@ -328,6 +340,10 @@ export function defineTheme(userConfig: ThemeConfig): AstroIntegration[] {
 					routes.push(["/series", "series/index.astro"]);
 					routes.push(["/series/[name]", "series/[name].astro"]);
 				}
+				// 说说页（§4.87）：moments collection 时间流；站点需先定义该集合（默认关）
+				if (config.pages.moments) {
+					routes.push(["/moments/[...page]", "moments/[...page].astro"]);
+				}
 				// 相关/随机文章推荐（P1-12）：随机栏数据源
 				if (config.relatedPosts.enabled) {
 					routes.push(["/api/allPostMeta.json", "api/allPostMeta.json.ts"]);

package/src/plugins/rehype-ec-vt-rerun.ts

@@ -0,0 +1,80 @@
+/**
+ * §4.74：Astro ClientRouter（View Transitions）下 EC 社区折叠插件的换页失效修复。
+ * §4.76：二次根因修正——data-astro-rerun 确实会重执行脚本，但被脚本自身的
+ * window 级幂等守卫拦截（早退），新页按钮依然无监听；首版修复曾试图把守卫
+ * 标志位改名规避，实测仍有同会话跨页残留（写作指南页无折叠块但注入脚本并
+ * 置标志，再 VT 进快速开始时读标志早退），最终改为整段删除守卫与赋值。
+ *
+ * 现象：经系列导航等 VT 换页进入新文章后，折叠代码块的展开按钮点击无效。
+ *
+ * 根因（两层）：
+ * 1. expressive-code-collapsible@0.1.0 的交互脚本只在 DOMContentLoaded
+ *    绑定一次，且 MutationObserver 闭包引用换页前的旧 body——ClientRouter
+ *    swap 整体替换 body 后：内联脚本不重新执行、observer 观察的旧 body 已
+ *    脱离文档，新页面的 .ec-collapse__toggle 无 click 监听。
+ *    （EC core 官方脚本已用 astro:page-load 自适配 VT，copy 按钮等不受影响。）
+ *    → 修复：标记 data-astro-rerun 让 ClientRouter swap 时重执行该脚本。
+ * 2. §4.76 两轮实测发现重执行仍无效：脚本首两行是 window 级早退守卫
+ *    （if (window.ecCollapsibleInit) return; window.ecCollapsibleInit = true;），
+ *    ClientRouter 换页只换 body 不换 window——标志位在同一浏览器会话内跨页
+ *    存活：任何注入过该脚本的页面（含无折叠代码块的文章，脚本照注入置位）
+ *    之后 VT 进入有折叠块的文章时，重执行被早退拦截，绑定整体短路。
+ *    → 修复：脚本文本中整段删除该守卫与标志赋值，每次执行都完整初始化。
+ *      安全性：按钮级 dataset.init 守卫防重复绑定；MutationObserver 每次重
+ *      建并观察当前 body，旧 observer 附着已脱离文档的旧 body，随其 GC；
+ *      data-astro-rerun 每次 swap 恰执行一次、full load 一次，无同 DOM 重入；
+ *      离开含折叠块的页面后脚本不存在、不执行，无额外开销。
+ *
+ * 仅含折叠代码块的页面才有该脚本；若上游插件改守卫名或改结构，删除正则
+ * 不命中即退化为 §4.74 行为（仅重执行，不删守卫），不会更糟。
+ */
+
+/** 内联脚本特征：社区折叠插件按钮选择器，官方 EC 脚本不含此串 */
+const COLLAPSIBLE_SCRIPT_MARKER = "ec-collapse__toggle";
+
+/** window 级早退守卫：if (window.ecCollapsibleInit) return; （含前导空白） */
+const GUARD_RE = /\s*if\s*\(\s*window\.ecCollapsibleInit\s*\)\s*return\s*;?/;
+/** 守卫标志赋值：window.ecCollapsibleInit = true; （含前导空白） */
+const FLAG_SET_RE = /\s*window\.ecCollapsibleInit\s*=\s*true\s*;?/;
+
+interface HastNode {
+	type: string;
+	tagName?: string;
+	properties?: Record<string, unknown>;
+	children?: HastNode[];
+	value?: unknown;
+}
+
+function scriptText(node: HastNode): string {
+	return (node.children ?? [])
+		.map((child) => (typeof child.value === "string" ? child.value : ""))
+		.join("");
+}
+
+function walk(node: HastNode): void {
+	for (const child of node.children ?? []) {
+		if (child.type !== "element") continue;
+		if (
+			child.tagName === "script" &&
+			!child.properties?.src &&
+			scriptText(child).includes(COLLAPSIBLE_SCRIPT_MARKER)
+		) {
+			child.properties["data-astro-rerun"] = true;
+			// 删除 window 级早退守卫（§4.76 根因 2）：守卫标志在 ClientRouter
+			// 换页间随 window 存活，任何先访问过含该脚本页面的会话都会让后续
+			// 重执行早退短路；删除后每次执行都完整绑定新页按钮
+			for (const text of child.children ?? []) {
+				if (typeof text.value === "string") {
+					text.value = text.value
+						.replace(GUARD_RE, "")
+						.replace(FLAG_SET_RE, "");
+				}
+			}
+		}
+		walk(child);
+	}
+}
+
+export function rehypeEcVtRerun() {
+	return (tree: HastNode) => walk(tree);
+}

package/src/plugins/rehype.ts

@@ -53,6 +53,44 @@ export function rehypeExternalLinks(): Transformer {
 	};
 }
 
+/**
+ * 图片防盗链（§4.87）：部分图床/CDN（如 B 站）校验 Referer 头，站内引用返回 403。
+ * 为匹配域名的外链 <img> 追加 referrerpolicy="no-referrer"（浏览器请求图片时不发
+ * Referer，绕过防盗链限制），仅影响外链图片与匹配域名，本地图片不受影响。
+ */
+export interface NoReferrerOptions {
+	/** 域名列表：裸域名匹配自身与全部子域；*.example.com 只匹配子域 */
+	domains: string[];
+}
+
+export function rehypeNoReferrer(options: NoReferrerOptions): Transformer {
+	if (!options.domains.length) return () => {};
+	const matchers = options.domains.map((domain) => {
+		const d = domain.toLowerCase();
+		if (d.startsWith("*.")) {
+			const base = d.slice(2);
+			return (host: string) => host.endsWith(`.${base}`) && host !== base;
+		}
+		return (host: string) => host === d || host.endsWith(`.${d}`);
+	});
+	return (tree) => {
+		visit(tree, (node) => {
+			if (node.type !== "element" || node.tagName !== "img") return;
+			const src = String(node.properties?.src ?? "");
+			if (!/^https?:\/\//i.test(src)) return;
+			let host: string;
+			try {
+				host = new URL(src).hostname.toLowerCase();
+			} catch {
+				return;
+			}
+			if (matchers.some((match) => match(host))) {
+				node.properties.referrerPolicy = "no-referrer";
+			}
+		});
+	};
+}
+
 /* -------------------------------------------------------------- callouts */
 
 const CALLOUT_META: Record<

package/src/routes/categories/[category]/[...page].astro

@@ -0,0 +1,53 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import Pagination from "virtual:theme/components/Pagination.astro";
+import config from "virtual:theme/config";
+import { t } from "../../../i18n/index.js";
+import {
+	collectCategories,
+	formatDate,
+	getSortedPosts,
+} from "../../../utils.js";
+
+/**
+ * 分类详情（§4.87 分页）：每分类按 postList.pageSize 分页，第一页
+ * /categories/<category>/（page 段省略），后续 /categories/<category>/2/ 起。
+ * paginate() helper 生成 Page 对象（props.page），Page.data 即当前页文章。
+ */
+export async function getStaticPaths({ paginate }: { paginate: any }) {
+	const all = await getCollection("posts", ({ data }) =>
+		import.meta.env.PROD ? !data.draft : true,
+	);
+	// 先排序再聚合，保证每个分类内文章按新→旧排列
+	const sorted = getSortedPosts(all);
+	return [...collectCategories(sorted).entries()].flatMap(([category, posts]) =>
+		paginate(posts, {
+			params: { category },
+			props: { category },
+			pageSize: config.postList.pageSize,
+		}),
+	);
+}
+
+const { page, category } = Astro.props;
+const posts = page.data;
+---
+
+<BaseLayout title={t('categoryTitle', { category })} page="categories">
+  <header class="archive-head reveal">
+    <h1 class="page-title">{category}</h1>
+    <p class="page-sub">{t('totalPosts', { n: page.total })}</p>
+  </header>
+  <div class="tag-list">
+    {
+      posts.map((post: any) => (
+        <a class="related-card card tag-item reveal" href={`/posts/${post.id}/`}>
+          <div class="rc-title">{post.data.title}</div>
+          <div class="rc-meta">{formatDate(post.data.published)}</div>
+        </a>
+      ))
+    }
+  </div>
+  <Pagination page={page.currentPage} total={page.lastPage} basePath={`/categories/${category}/`} />
+</BaseLayout>

package/src/routes/moments/[...page].astro

@@ -0,0 +1,80 @@
+---
+import { getCollection, render } from "astro:content";
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import Pagination from "virtual:theme/components/Pagination.astro";
+import config from "virtual:theme/config";
+import { t } from "../../i18n/index.js";
+import { formatDate } from "../../utils.js";
+
+/**
+ * 说说页（§4.87）：moments collection 时间流，按 published 新→旧，
+ * 每页 20 条（第一页 /moments/，后续 /moments/2/）。
+ * 正文走主题统一 markdown processor（全部增强语法可用）；配图 images 网格
+ * 展示并接入通用灯箱（data-lightbox-group 组浏览）。
+ */
+export async function getStaticPaths({ paginate }: { paginate: any }) {
+	const all = await getCollection("moments", ({ data }) =>
+		import.meta.env.PROD ? !data.draft : true,
+	);
+	const sorted = [...all].sort(
+		(a, b) => b.data.published.valueOf() - a.data.published.valueOf(),
+	);
+	return paginate(sorted, { pageSize: 20 });
+}
+
+const { page } = Astro.props;
+const rendered = await Promise.all(
+	page.data.map(async (moment: any) => {
+		const { Content } = await render(moment);
+		return { moment, Content };
+	}),
+);
+---
+
+<BaseLayout title={t('momentsTitle')} page="moments">
+  <header class="archive-head reveal">
+    <h1 class="page-title">{t('momentsTitle')}</h1>
+  </header>
+
+  {
+    rendered.length === 0 ? (
+      <p class="gallery-empty reveal">{t('momentsEmpty')}</p>
+    ) : (
+      <div class="moments-list">
+        {rendered.map(({ moment, Content }) => (
+          <article class="moment card reveal">
+            <div class="moment-meta">
+              <time datetime={moment.data.published.toISOString()}>
+                {formatDate(moment.data.published)}
+              </time>
+              {moment.data.mood && <span class="moment-mood">{moment.data.mood}</span>}
+            </div>
+            <div class="moment-content">
+              <Content />
+            </div>
+            {moment.data.images.length > 0 && (
+              <div class="moment-images" data-lightbox-group>
+                {moment.data.images.map((src: string) => (
+                  <figure class="moment-img">
+                    <img src={src} alt={t('momentsTitle')} loading="lazy" decoding="async" />
+                  </figure>
+                ))}
+              </div>
+            )}
+            {moment.data.tags.length > 0 && (
+              <div class="moment-tags">
+                {moment.data.tags.map((tg: string) => (
+                  <a class="moment-tag" href={`/tags/${tg}/`}>
+                    {tg}
+                  </a>
+                ))}
+              </div>
+            )}
+          </article>
+        ))}
+      </div>
+    )
+  }
+
+  <Pagination page={page.currentPage} total={page.lastPage} basePath="/moments/" />
+</BaseLayout>