refactor: change tag to spa.

sumy7 · Dec 25, 2023 · b0d55de · b0d55de
1 parent fd82f32
commit b0d55de
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 94 deletions.
diff --git 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 → ...ponents/ArchivePostList/index.module.scss b/theme/pageLayout/Archives/index.module.scss → ...ponents/ArchivePostList/index.module.scss
diff --git a/theme/components/ArchivePostList/index.tsx 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
@@ -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
@@ -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
@@ -1,13 +1,16 @@
-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: {
  frontmatter: Record<string, unknown>
  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>
  )
 }