feat: Improve tag pages and article tag display

src/pages/[lang]/tags/[tag].astro

@@ -9,8 +9,8 @@ export async function getStaticPaths() {
 }
 
 const { lang } = Astro.params
-const { tags } = Astro.props
-const posts = await getPostsByTag(tags)
+const { tag } = Astro.props
+const posts = await getPostsByTag(tag)
 const allTags = await getAllTags()
 ---
 

src/pages/about.astro

@@ -3,5 +3,8 @@ import Layout from '@/layouts/Layout.astro'
 ---
 
 <Layout>
-  about me
+  <div class="h-0.125 w-10 bg-secondary opacity-25"></div>
+  <div class="heti mt-4.375">
+    <p>一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立统一的视觉规范，对原主题的所有页面进行重新编排，尽力还原传统印刷的阅读体验，同时不失现代设计的简约感受。所见皆为细节，方寸尽显优雅。</p>
+  </div>
 </Layout>

src/pages/posts/[slug].astro

@@ -25,6 +25,8 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postImage={post.data.image}
 >
   <article class="heti">
+    <!-- after:(absolute h-0.25 w-3 origin-left rotate-30 bg-secondary content-empty) before:(absolute h-0.25 w-3 origin-left rotate-330 bg-secondary content-empty) -->
+    <div class="relative h-0.25 w-10 bg-secondary opacity-25"></div>
     <h1 class="post-title">
       <span
         transition:name={`post-${post.data.slug || post.slug}`}
@@ -35,7 +37,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
     </h1>
 
     <div
-      class="mb-14.625 block c-primary font-time"
+      class="mb-16.375 block c-primary font-time"
       transition:name={`time-${post.data.slug || post.slug}`}
       data-disable-transition-on-theme
     >
@@ -47,5 +49,32 @@ const { Content, remarkPluginFrontmatter } = await post.render()
       </span>
     </div>
     <Content />
+
+    {post.data.tags && post.data.tags.length > 0 && (
+      <div class="mt-12">
+        <div class="h-0.125 w-10 bg-secondary opacity-25"></div>
+        <div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6 font-medium font-serif">
+          {post.data.tags.map(tag => (
+            <a
+              href={`/tags/${tag}/`}
+              class="inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary text-primary)"
+            >
+              {tag}
+            </a>
+          ))}
+        </div>
+      </div>
+    )}
   </article>
 </Layout>
+
+<!-- <script is:inline>
+function _handleBack(e) {
+  if (window.history.length > 2) {
+    e.preventDefault()
+    window.history.back()
+    return false
+  }
+  return true
+}
+</script> -->

src/pages/tags/[tag].astro

@@ -0,0 +1,73 @@
+---
+import Layout from '@/layouts/Layout.astro'
+import { getAllTags, getPostsByTag } from '@/utils/content'
+
+export async function getStaticPaths() {
+  const tags = await getAllTags()
+  return tags.map(tag => ({
+    params: { tag },
+    props: { tag },
+  }))
+}
+
+const { tag } = Astro.props
+const posts = await getPostsByTag(tag)
+const allTags = await getAllTags()
+---
+
+<Layout>
+  <div class="h-0.125 w-10 bg-secondary opacity-0"></div>
+  <div class="mt-3.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6 font-medium font-serif">
+    {allTags.map(tag => (
+      <a
+        href={`/tags/${tag}/`}
+        class={`inline-block whitespace-nowrap border rounded-full px-3.2 py-0.7 transition-colors ${
+          Astro.props.tag === tag
+            ? "border-secondary text-primary"
+            : "border-secondary/25 c-secondary hover:(border-secondary text-primary)"
+        }`}
+      >
+        {tag}
+      </a>
+    ))}
+  </div>
+
+  <div class="mt-10.625">
+    <ul>
+      {posts.map(post => (
+        <li class="mt-4.375">
+          <a
+            class="hover:c-primary"
+            href={`/posts/${post.data.slug || post.slug}`}
+            transition:name={`post-${post.data.slug || post.slug}`}
+            data-disable-transition-on-theme
+          >
+            {post.data.title}
+          </a>
+
+          <div
+            class="mb-5.625 text-3.5 leading-6.875 font-time lg:(hidden)"
+            transition:name={`time-${post.data.slug || post.slug}`}
+            data-disable-transition-on-theme
+          >
+            <time>
+              {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
+            </time>
+            <span class="ml-1.25">
+              {post.remarkPluginFrontmatter?.minutes} min
+            </span>
+          </div>
+
+          <div class="mb-5.625 hidden text-3.65 leading-6.875 font-time lg:(ml-2.5 inline)">
+            <time>
+              {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
+            </time>
+            <span class="ml-1.25">
+              {post.remarkPluginFrontmatter?.minutes} min
+            </span>
+          </div>
+        </li>
+      ))}
+    </ul>
+  </div>
+</Layout>

src/pages/tags/[tags].astro

@@ -1,36 +0,0 @@
----
-import Layout from '@/layouts/Layout.astro'
-import { getAllTags, getPostsByTag } from '@/utils/content'
-
-export async function getStaticPaths() {
-  const tags = await getAllTags()
-  return tags.map(tag => ({
-    params: { tags: tag },
-    props: { tags: tag },
-  }))
-}
-
-const { tags } = Astro.props
-const posts = await getPostsByTag(tags)
-const allTags = await getAllTags()
----
-
-<Layout>
-  <div>
-    {allTags.map(tag => (
-      <a href={`/tags/${tag}/`}>
-        {tag}
-      </a>
-    ))}
-  </div>
-
-  <div>
-    <ul>
-      {posts.map(post => (
-        <li>
-          <a href={`/posts/${post.data.slug || post.slug}/`}>{post.data.title}</a>
-        </li>
-      ))}
-    </ul>
-  </div>
-</Layout>

src/pages/tags/index.astro

@@ -6,10 +6,15 @@ const allTags = await getAllTags()
 ---
 
 <Layout>
-  <div>
+  <div class="h-0.125 w-10 bg-secondary opacity-0"></div>
+  <div class="mt-3.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6 font-medium font-serif">
     {allTags.map(tag => (
-      <a href={`/tags/${tag}/`}>
+      <a
+        href={`/tags/${tag}/`}
+        class="inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary text-primary)"
+      >
         {tag}
       </a>
     ))}
   </div>
+</Layout>