bugfix:

二维码溢出；
移动端边距；
详情页标签；
文章分类页hover颜色；

components/CategoryList.js

@@ -12,8 +12,10 @@ const CategoryList = ({ currentCategory, categories }) => {
       return (
       <Link key={category} href={`/category/${category}`}>
           <li
-            className={`cursor-pointer border hover:bg-gray-300 rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap
-                 dark:text-gray-300 dark:hover:bg-gray-800 ${selected ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800' : 'bg-gray-100 text-gray-600 dark:bg-gray-600 dark:border-gray-600'
+            className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap dark:text-gray-300 
+                 ${selected
+              ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
+              : 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:border-gray-600'
             }`}
           >
             <a>

components/RewardButton.js

@@ -24,8 +24,8 @@ const RewardButton = () => {
       </div>
 
       <div id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
-           <img className='md:w-72' src='/reward_code_alipay.png' />
-           <img className='md:w-72' src='/reward_code_wechat.png' />
+           <div><img className='md:w-72' src='/reward_code_alipay.png' /></div>
+           <div><img className='md:w-72' src='/reward_code_wechat.png' /></div>
       </div>
     </div>
   )

pages/article/[slug].js

@@ -25,11 +25,12 @@ import RecommendPosts from '@/components/RecommendPosts'
 import TocDrawer from '@/components/TocDrawer'
 import TocDrawerButton from '@/components/TocDrawerButton'
 import { useGlobal } from '@/lib/global'
+import { getNotionPageData } from '@/lib/notion/getNotionData'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
-const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories }) => {
+const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories }) => {
   if (!post) {
     return <Custom404 />
   }
@@ -44,7 +45,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
   const url = BLOG.link + useRouter().asPath
   const { locale } = useGlobal()
 
-  return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} categories={categories}>
+  return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={allPosts} categories={categories}>
     <Progress targetRef={targetRef} />
 
     <article id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black pt-16'>
@@ -110,7 +111,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
         <RewardButton />
 
         {/* 推荐文章 */}
-        <RecommendPosts currentPost={post} totalPosts={posts} />
+        <RecommendPosts currentPost={post} totalPosts={allPosts} />
 
         {/* 版权声明 */}
         <section
@@ -185,32 +186,32 @@ export async function getStaticPaths () {
 }
 
 export async function getStaticProps ({ params: { slug } }) {
-  let posts = await getAllPosts({ from: 'slug-props', includePage: true })
-  const post = posts.find(t => t.slug === slug)
+  const from = 'slug-props'
+  const notionPageData = await getNotionPageData({ from })
+  let allPosts = await getAllPosts({ notionPageData, from, includePage: true })
+  const post = allPosts.find(p => p.slug === slug)
+
   if (!post) {
-    return {
-      props: {},
-      revalidate: 1
-    }
+    return { props: {}, revalidate: 1 }
   }
 
   const blockMap = await getPostBlocks(post.id, 'slug')
+  post.toc = []
   if (blockMap) {
     post.toc = getPageTableOfContents(post, blockMap)
-  } else {
-    post.toc = []
   }
-  posts = posts.filter(post => post.type[0] === 'Post')
-  const tags = await getAllTags(posts)
-  const categories = await getAllCategories(posts)
 
-  // 获取推荐文章
-  const index = posts.indexOf(post)
-  const prev = posts.slice(index - 1, index)[0] ?? posts.slice(-1)[0]
-  const next = posts.slice(index + 1, index + 2)[0] ?? posts[0]
+  allPosts = allPosts.filter(post => post.type[0] === 'Post')
+  const tagOptions = notionPageData.tagOptions
+  const tags = await getAllTags({ allPosts, tagOptions })
+  const categories = await getAllCategories(allPosts)
+  // 上一篇、下一篇文章关联
+  const index = allPosts.indexOf(post)
+  const prev = allPosts.slice(index - 1, index)[0] ?? allPosts.slice(-1)[0]
+  const next = allPosts.slice(index + 1, index + 2)[0] ?? allPosts[0]
 
   return {
-    props: { post, blockMap, tags, prev, next, posts, categories },
+    props: { post, blockMap, tags, prev, next, allPosts, categories },
     revalidate: 1
   }
 }

pages/category/index.js

@@ -16,7 +16,7 @@ export default function Category ({ tags, allPosts, categories }) {
     type: 'website'
   }
   return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
-    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'>
+    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-2 lg:px-14'>
     <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
       <div className='dark:text-gray-200 mb-5'><i className='fa fa-th-list mr-4'/>{locale.COMMON.CATEGORY}:</div>
       <div id='category-list' className='duration-200 flex flex-wrap'>

pages/tag/index.js

@@ -14,18 +14,18 @@ export default function Tag ({ tags, allPosts, categories }) {
     type: 'website'
   }
   return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}>
-    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'>
-    <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
-      <div className='dark:text-gray-200 mb-5'><i className='fa fa-tags mr-4'/>{locale.COMMON.TAGS}:</div>
-      <div id='tags-list' className='duration-200 flex flex-wrap'>
-        {
-          tags.map(tag => {
-            return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>
-          })
-        }
+    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-2 lg:px-14'>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
+        <div className='dark:text-gray-200 mb-5'><i className='fa fa-tags mr-4'/>{locale.COMMON.TAGS}:</div>
+        <div id='tags-list' className='duration-200 flex flex-wrap'>
+          {
+            tags.map(tag => {
+              return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>
+            })
+          }
+        </div>
       </div>
     </div>
-    </div>
   </BaseLayout>
 }