feat: make tags & categories list flex

This commit is contained in:
草师傅 2025-08-18 18:29:37 +08:00
parent ca28bd2d36
commit 9e0afdad03
Signed by: gb
GPG key ID: 43330A030E2D6478
2 changed files with 20 additions and 6 deletions

View file

@ -9,11 +9,18 @@ const uniqueCategories = [...new Set(allPosts.map((post: any) => post.data.categ
<Layout title="Categoies" description="List all categories used in the blog posts."> <Layout title="Categoies" description="List all categories used in the blog posts.">
<h1 class="title">~/blog/categories</h1> <h1 class="title">~/blog/categories</h1>
<div style="margin-top: 2rem;"> <div style="margin-top: 2rem;">
<span class="command">ls -l categories/</span> <span class="command">ls categories/</span>
<div style="margin-top: 1rem; margin-left: 1rem;"> <div style="margin-top: 1rem; margin-left: 1rem;" class="category-list">
{uniqueCategories.map((tag) => ( {uniqueCategories.map((category) => (
<p><a href={`/categories/${tag}`}>{tag}</a></p> <p><a href={`/categories/${category}`}>{category}</a></p>
))} ))}
</div> </div>
</div> </div>
</Layout> </Layout>
<style>
div.category-list {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
</style>

View file

@ -9,11 +9,18 @@ const uniqueTags = [...new Set(allPosts.map((post: any) => post.data.tags ? post
<Layout title="Tags" description="List all tags used in the blog posts."> <Layout title="Tags" description="List all tags used in the blog posts.">
<h1 class="title">~/blog/tags</h1> <h1 class="title">~/blog/tags</h1>
<div style="margin-top: 2rem;"> <div style="margin-top: 2rem;">
<span class="command">ls -l tags/</span> <span class="command">ls tags/</span>
<div style="margin-top: 1rem; margin-left: 1rem;"> <div style="margin-top: 1rem; margin-left: 1rem;" class="tags-list">
{uniqueTags.map((tag) => ( {uniqueTags.map((tag) => (
<p><a href={`/tags/${tag}`}>{tag}</a></p> <p><a href={`/tags/${tag}`}>{tag}</a></p>
))} ))}
</div> </div>
</div> </div>
</Layout> </Layout>
<style>
div.tags-list {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
</style>