feat: optimize globalData

kuizuo · Dec 28, 2023 · e3ddba7 · e3ddba7
1 parent bb9a4b5
commit e3ddba7
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 31 deletions.
diff --git a/src/components/UserCard/index.tsx b/src/components/UserCard/index.tsx
@@ -30,19 +30,18 @@ export default function UserCard({ isNavbar = false }: { isNavbar?: boolean }) {
 
   const logoLink = useBaseUrl(logo.src || '/')
 
-  const blogPluginData = usePluginData('docusaurus-plugin-content-blog') as {
-    blogs: BlogPost[]
-    tags: BlogTags
+  const blogData = usePluginData('docusaurus-plugin-content-blog') as {
+    posts: BlogPost[]
+    postNum: number
+    tagNum: number
   }
   const docData = (
     usePluginData('docusaurus-plugin-content-docs') as { versions: { docs: BlogPost[] } }
   )?.versions[0].docs
-  const blogData = blogPluginData?.blogs
-  const tagData = blogPluginData?.tags
 
   const count: Count = {
-    blog: blogData.length,
-    tag: Object.keys(tagData).length ?? 0,
+    blog: blogData.postNum,
+    tag: blogData.tagNum ?? 0,
     doc: docData?.length ?? 0,
     project: projects?.length ?? 0,
   }

diff --git a/src/pages/_components/HomepageBlog/index.tsx b/src/pages/_components/HomepageBlog/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import clsx from 'clsx'
 import { motion, useScroll, useTransform } from 'framer-motion'
 import { BlogPost } from '@docusaurus/plugin-content-blog'
-import useGlobalData from '@docusaurus/useGlobalData'
+import { usePluginData } from '@docusaurus/useGlobalData'
 import Translate from '@docusaurus/Translate'
 import Link from '@docusaurus/Link'
 import Image from '@theme/IdealImage'
@@ -47,13 +47,13 @@ export function BlogItem({ post }: { post: BlogPost }) {
 }
 
 export default function BlogRecent(): JSX.Element {
-  const globalData = useGlobalData()
-  const blogPluginData = globalData?.['docusaurus-plugin-content-blog']?.['default'] as {
-    blogs: BlogPost[]
+  const blogData = usePluginData('docusaurus-plugin-content-blog') as {
+    posts: BlogPost[]
+    postNum: number
+    tagNum: number
   }
 
-  const blogData = blogPluginData?.blogs
-  const posts = chunk(blogData.slice(0, 6), 2)
+  const posts = chunk(blogData.posts.slice(0, 6), 2)
 
   const ref = React.useRef<HTMLDivElement>(null)
 
@@ -62,7 +62,7 @@ export default function BlogRecent(): JSX.Element {
     clamp: false,
   })
 
-  if (blogData.length === 0) {
+  if (blogData.postNum === 0) {
     return <>作者还没有写过博客哦</>
   }
 

diff --git a/src/plugin/plugin-content-blog/index.js b/src/plugin/plugin-content-blog/index.js
@@ -16,8 +16,9 @@ async function blogPluginEnhanced(context, options) {
       const { setGlobalData } = actions;
 
       setGlobalData({
-        blogs: blogPosts,
-        tags: blogTags,
+        posts: blogPosts.slice(0, 10), // Only store 10 posts
+        postNum: blogPosts.length,
+        tagNum: Object.keys(blogTags).length,
       });
     },
   };

diff --git a/src/theme/BlogPostItem/Header/Info/index.tsx b/src/theme/BlogPostItem/Header/Info/index.tsx
@@ -61,15 +61,10 @@ export default function BlogPostItemHeaderInfo({ className }: Props): JSX.Elemen
           <div className={styles.tagList}>
             {tags.slice(0, 2).map(({ label, permalink: tagPermalink }, index) => {
               return (
-                <>
+                <div key={tagPermalink}>
                   {index !== 0 && '/'}
-                  <Tag
-                    label={label}
-                    permalink={tagPermalink}
-                    key={tagPermalink}
-                    className={'tag'}
-                  />
-                </>
+                  <Tag label={label} permalink={tagPermalink} className={'tag'} />
+                </div>
               )
             })}
           </div>

diff --git a/src/theme/BlogRecommend/index.tsx b/src/theme/BlogRecommend/index.tsx
@@ -2,21 +2,20 @@ import React from 'react'
 import clsx from 'clsx'
 import { motion } from 'framer-motion'
 import { BlogPost } from '@docusaurus/plugin-content-blog'
-import useGlobalData from '@docusaurus/useGlobalData'
+import { usePluginData } from '@docusaurus/useGlobalData'
 import Translate from '@docusaurus/Translate'
 import Link from '@docusaurus/Link'
 import Image from '@theme/IdealImage'
 
 import styles from './styles.module.scss'
 
 export default function BlogRecommend(): JSX.Element {
-  const globalData = useGlobalData()
-  const blogPluginData = globalData?.['docusaurus-plugin-content-blog']?.['default'] as {
-    blogs: BlogPost[]
+  const blogData = usePluginData('docusaurus-plugin-content-blog') as {
+    posts: BlogPost[]
+    postNum: number
+    tagNum: number
   }
-
-  const blogData = blogPluginData?.blogs
-  const recommendedPosts = blogData
+  const recommendedPosts = blogData.posts
     .filter(b => (b.metadata.frontMatter.sticky as number) > 0)
     .map(b => b.metadata)
     .sort((a, b) => (a.frontMatter.sticky as number) - (b.frontMatter.sticky as number))