feat(tags): tag pages get the archive filter bar and topic chips

/tags/<tag>/ passed chrome={false}, so a tag page showed a bare list — no filter
input and no chips — while /posts/ had both. Enable the chrome and add a
chipPosts prop: the tag strip is built from the whole language collection because
its chips navigate (page-scoped counts would lie), while category chips and the
row filter stay scoped to the posts on the page so their counts match the rows.
The current tag is marked is-active + aria-current instead of looking clickable.
This commit is contained in:
hoelee committed 2026-10-20 23:37:44 +08:00
1 parent 84b412470b
commit 557f312bc7
3 files changed
+37 -9

No files matched your search

+11 -3
View File
@@ -16,11 +16,16 @@ export async function getStaticPaths() {
const counts = tagCounts(posts);
return tagPageNames(posts).map((tag) => ({
params: { tag },
props: { tag, n: counts.get(tag) ?? 0, posts: posts.filter((p) => p.data.tags.includes(tag)) },
props: {
tag,
n: counts.get(tag) ?? 0,
posts: posts.filter((p) => p.data.tags.includes(tag)),
all: posts,
},
}));
}
const { tag, posts } = Astro.props as { tag: string; posts: any[] };
const { tag, posts, all } = Astro.props as { tag: string; posts: any[]; all: any[] };
---
<BaseLayout
@@ -36,5 +41,8 @@ const { tag, posts } = Astro.props as { tag: string; posts: any[] };
<span class="sep">·</span>
<a href="/categories/">Categories</a>
</p>
<Archive posts={posts} lang="en" chrome={false} />
{/* Same filter bar and topic chips as /posts/ — a tag page that hides them makes
the reader go back up to the archive to filter anything. `chipPosts` is the whole
language collection so the tag strip keeps site-wide counts. */}
<Archive posts={posts} chipPosts={all} activeTag={tag} lang="en" />
</BaseLayout>
+9 -3
View File
@@ -14,11 +14,16 @@ export async function getStaticPaths() {
const counts = tagCounts(posts);
return tagPageNames(posts).map((tag) => ({
params: { tag },
props: { tag, n: counts.get(tag) ?? 0, posts: posts.filter((p) => p.data.tags.includes(tag)) },
props: {
tag,
n: counts.get(tag) ?? 0,
posts: posts.filter((p) => p.data.tags.includes(tag)),
all: posts,
},
}));
}
const { tag, posts } = Astro.props as { tag: string; posts: any[] };
const { tag, posts, all } = Astro.props as { tag: string; posts: any[]; all: any[] };
---
<BaseLayout
@@ -35,5 +40,6 @@ const { tag, posts } = Astro.props as { tag: string; posts: any[] };
<span class="sep">·</span>
<a href="/zh/categories/">分类</a>
</p>
<Archive posts={posts} lang="zh" chrome={false} />
{/* 与 /zh/posts/ 相同的筛选栏与主题标签条;chipPosts 传全站集合,标签条的计数才是全站数。 */}
<Archive posts={posts} chipPosts={all} activeTag={tag} lang="zh" />
</BaseLayout>