diff --git a/plugins/TagsPagePlugin.ts b/plugins/TagsPagePlugin.ts
index 05ec230..e6f3418 100644
--- a/plugins/TagsPagePlugin.ts
+++ b/plugins/TagsPagePlugin.ts
@@ -16,7 +16,7 @@ export function tagsPagePlugin(): RspressPlugin {
           // language=mdx
           content: `---
 layout: tags
-title: 标签
+title: 标签云
 sidebar: false
 outline: false
 ---
@@ -25,40 +25,19 @@ import Tags from ${JSON.stringify(tagPluginPath)};
 <Tags />
 `,
         },
-        ...Array.from(postTags.values()).map((tagInfo) => {
-          return {
-            routePath: `/blog/tags/${tagInfo.name}/`,
-            // language=mdx
-            content: `---
-layout: tags
-title: ${tagInfo.name} - 标签
-sidebar: false
-outline: false
-tagName: ${tagInfo.name}
----
-import Archives from ${JSON.stringify(archivePluginPath)};
- 
-<Archives />
-`,
-          }
-        }),
       ]
     },
     extendPageData(pageData) {
       // 标签页面添加当前标签信息
       if (pageData?.frontmatter.layout === 'tags') {
-        // 展示标签下的文章
-        if (pageData?.frontmatter.tagName) {
-          const tagPostInfo = postTags.get(
-            pageData.frontmatter.tagName as string
-          )
-          pageData.posts = tagPostInfo?.posts || []
-        } else {
-          // 如果没有指定tagName，则展示标签云
-          pageData.tagCloud = Array.from(postTags.values())
-            .sort((a, b) => b.count - a.count)
-            .map((item) => ({ name: item.name, count: item.count }))
-        }
+        // 封装标签云数据
+        pageData.tagCloud = Array.from(postTags.values())
+          .sort((a, b) => b.count - a.count)
+          .map((item) => ({
+            name: item.name,
+            count: item.count,
+            posts: postTags.get(item.name)?.posts || [],
+          }))
       }
     },
   }
diff --git a/theme/pageLayout/Archives/index.module.scss b/theme/components/ArchivePostList/index.module.scss
similarity index 100%
rename from theme/pageLayout/Archives/index.module.scss
rename to theme/components/ArchivePostList/index.module.scss
diff --git a/theme/components/ArchivePostList/index.tsx b/theme/components/ArchivePostList/index.tsx
new file mode 100644
index 0000000..e0cc508
--- /dev/null
+++ b/theme/components/ArchivePostList/index.tsx
@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react'
+import { Link } from '../../index'
+import { normalizeHrefInRuntime } from 'rspress/runtime'
+import { PostInfo } from '../../../plugins/PostData'
+
+import styles from './index.module.scss'
+
+interface ArchivePostListProps {
+  title?: string
+  posts: PostInfo[]
+}
+
+const ArchivePostList = (props: ArchivePostListProps) => {
+  const { title = '', posts = [] } = props
+
+  // 将posts按照日期中年份进行分组，然后倒序排列
+  const postsByYear = useMemo(() => {
+    const postMap = new Map<string, PostInfo[]>()
+    const yearList: {
+      year: string
+      posts: PostInfo[]
+    }[] = []
+
+    ;(posts as PostInfo[]).forEach((post) => {
+      const year = post.date.slice(0, 4)
+      let yearPosts = []
+      if (postMap.has(year)) {
+        yearPosts = postMap.get(year)
+      } else {
+        postMap.set(year, yearPosts)
+        yearList.push({
+          year,
+          posts: yearPosts,
+        })
+      }
+      yearPosts.push(post)
+    })
+    return yearList
+  }, [posts])
+
+  return (
+    <div className="overview-index mx-auto px-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl leading-10 tracking-tight">
+          {title || 'Archives'}
+        </h1>
+      </div>
+      {postsByYear.map((year) => (
+        <div key={year.year} className={styles.year}>
+          <h2 className={styles.yearTitle}>{year.year}</h2>
+          <ul className={styles.postList}>
+            {year.posts.map((post) => (
+              <li key={post.route} className={`${styles.postItem} gap-5`}>
+                <span className={styles.postDate}>
+                  {(post.date || '').slice(0, 10)}
+                </span>
+                &nbsp;
+                <Link
+                  href={normalizeHrefInRuntime(post.route)}
+                  className={`${styles.postLink}`}
+                >
+                  {post.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default ArchivePostList
diff --git a/theme/pageLayout/Archives/index.tsx b/theme/pageLayout/Archives/index.tsx
index 4ab0d8b..3c38edb 100644
--- a/theme/pageLayout/Archives/index.tsx
+++ b/theme/pageLayout/Archives/index.tsx
@@ -1,68 +1,19 @@
-import React, { useMemo } from 'react'
-import { Link } from 'rspress/theme'
-import { usePageData, normalizeHrefInRuntime } from 'rspress/runtime'
+import React from 'react'
+import { usePageData } from 'rspress/runtime'
 import { PostInfo } from '../../../plugins/PostData'
 
-import styles from './index.module.scss'
+import ArchivePostList from '../../components/ArchivePostList'
 
 const Archives = () => {
   const {
     page: { frontmatter, posts = [] },
   } = usePageData()
-  // 将posts按照日期中年份进行分组，然后倒序排列
-  const postsByYear = useMemo(() => {
-    const postMap = new Map<string, PostInfo[]>()
-    const yearList: {
-      year: string
-      posts: PostInfo[]
-    }[] = []
-
-    ;(posts as PostInfo[]).forEach((post) => {
-      const year = post.date.slice(0, 4)
-      let yearPosts = []
-      if (postMap.has(year)) {
-        yearPosts = postMap.get(year)
-      } else {
-        postMap.set(year, yearPosts)
-        yearList.push({
-          year,
-          posts: yearPosts,
-        })
-      }
-      yearPosts.push(post)
-    })
-    return yearList
-  }, [posts])
 
   return (
-    <div className="overview-index mx-auto px-8">
-      <div className="flex items-center justify-between">
-        <h1 className="text-3xl leading-10 tracking-tight">
-          {(frontmatter.title as string) || 'Archives'}
-        </h1>
-      </div>
-      {postsByYear.map((year) => (
-        <div key={year.year} className={styles.year}>
-          <h2 className={styles.yearTitle}>{year.year}</h2>
-          <ul className={styles.postList}>
-            {year.posts.map((post) => (
-              <li key={post.route} className={`${styles.postItem} gap-5`}>
-                <span className={styles.postDate}>
-                  {(post.date || '').slice(0, 10)}
-                </span>
-                &nbsp;
-                <Link
-                  href={normalizeHrefInRuntime(post.route)}
-                  className={`${styles.postLink}`}
-                >
-                  {post.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      ))}
-    </div>
+    <ArchivePostList
+      posts={posts as PostInfo[]}
+      title={frontmatter.title as string}
+    />
   )
 }
 
diff --git a/theme/pageLayout/Tags/TagCloud.tsx b/theme/pageLayout/Tags/TagCloud.tsx
index 2af6858..7237a22 100644
--- a/theme/pageLayout/Tags/TagCloud.tsx
+++ b/theme/pageLayout/Tags/TagCloud.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import { normalizeHrefInRuntime } from 'rspress/runtime'
-import { Link } from '../../index'
+import { useSearchParams } from 'rspress/runtime'
 
 import styles from './index.module.scss'
 
@@ -12,17 +11,23 @@ const TagCloud = (props: {
 }) => {
   const { tagCloud = [] } = props
 
+  const [_, setSearchParams] = useSearchParams()
+
+  const onTagClick = (tag: string) => {
+    setSearchParams({ tag })
+  }
+
   return (
     <div className={styles.tagList}>
       {tagCloud.map((item) => (
-        <Link
+        <a
           key={item.name}
-          href={normalizeHrefInRuntime(`/blog/tags/${item.name}/index.html`)}
           className={styles.tagItem}
+          onClick={() => onTagClick(item.name)}
         >
           <span className={styles.tagName}>{item.name} </span>
           <span className={styles.tagPostCount}>{item.count}</span>
-        </Link>
+        </a>
       ))}
     </div>
   )
diff --git a/theme/pageLayout/Tags/index.tsx b/theme/pageLayout/Tags/index.tsx
index 41eb768..b03609c 100644
--- a/theme/pageLayout/Tags/index.tsx
+++ b/theme/pageLayout/Tags/index.tsx
@@ -1,6 +1,8 @@
-import React from 'react'
-import { usePageData } from 'rspress/runtime'
+import React, { useMemo } from 'react'
+import { usePageData, useSearchParams } from 'rspress/runtime'
 import TagCloud from './TagCloud'
+import { PostInfo } from '../../../plugins/PostData'
+import ArchivePostList from '../../components/ArchivePostList'
 
 interface PageData {
   page: {
@@ -8,6 +10,7 @@ interface PageData {
     tagCloud: {
       name: string
       count: number
+      posts: PostInfo[]
     }[]
   }
 }
@@ -17,9 +20,28 @@ const Tags = () => {
     page: { frontmatter, tagCloud = [] },
   } = usePageData() as unknown as PageData
 
+  const [searchParams] = useSearchParams()
+
+  const { name, posts } = useMemo(() => {
+    const tag = searchParams.get('tag')
+    if (tag) {
+      const tagInfo = tagCloud.find((item) => item.name === tag)
+      if (tagInfo) {
+        return tagInfo
+      }
+    }
+    return { name: '', posts: [] }
+  }, [searchParams.get('tag'), tagCloud])
+
   return (
     <div>
-      <TagCloud tagCloud={tagCloud} />
+      {!posts?.length && <TagCloud tagCloud={tagCloud} />}
+      {posts?.length && (
+        <ArchivePostList
+          posts={posts}
+          title={`${name} - 标签`}
+        ></ArchivePostList>
+      )}
     </div>
   )
 }