NEXT主题，分类标签调整

blog.config.js

@@ -25,6 +25,9 @@ const BLOG = {
   POSTS_PER_PAGE: 6, // post counts per page
   POSTS_SORT_BY: 'notion', // 排序方式 'date'按时间,'notion'由notion控制
 
+  PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
+  PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制
+
   // 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
   CONTACT_EMAIL: 'tlyong1992@hotmail.com',
   CONTACT_WEIBO: '',

lib/notion/getAllCategories.js

@@ -3,11 +3,11 @@
  * @param allPosts
  * @returns {Promise<{}|*[]>}
  */
-export async function getAllCategories (allPosts) {
-  if (!allPosts) {
+export async function getAllCategories ({ allPosts, categoryOptions, sliceCount = 0 }) {
+  if (!allPosts || !categoryOptions) {
     return []
   }
-
+  // 计数
   let categories = allPosts.map(p => p.category)
   categories = [...categories.flat()]
   const categoryObj = {}
@@ -18,5 +18,19 @@ export async function getAllCategories (allPosts) {
       categoryObj[category] = 1
     }
   })
-  return categoryObj
+  const list = []
+  categoryOptions.forEach(c => {
+    const count = categoryObj[c.value]
+    if (count) {
+      list.push({ id: c.id, name: c.value, color: c.color, count })
+    }
+  })
+
+  // 按照数量排序
+  // list.sort((a, b) => b.count - a.count)
+  if (sliceCount && sliceCount > 0) {
+    return list.slice(0, sliceCount)
+  } else {
+    return list
+  }
 }

lib/notion/getAllTags.js

@@ -6,15 +6,13 @@
  * @param tagOptions tags的下拉选项
  * @returns {Promise<{}|*[]>}
  */
-export async function getAllTags ({ allPosts, sliceCount = 16, tagOptions }) {
-  if (!allPosts) {
+export async function getAllTags ({ allPosts, sliceCount = 0, tagOptions }) {
+  if (!allPosts || !tagOptions) {
     return []
   }
-
+  // 计数
   let tags = allPosts.map(p => p.tags)
   tags = [...tags.flat()]
-
-  // 标签计数
   const tagObj = {}
   tags.forEach(tag => {
     if (tag in tagObj) {
@@ -23,13 +21,16 @@ export async function getAllTags ({ allPosts, sliceCount = 16, tagOptions }) {
       tagObj[tag] = 1
     }
   })
-
-  // 按照标签数量排序
-  const list = Object.keys(tagObj).map((tag) => {
-    const color = tagOptions.find(option => option.value === tag)?.color || 'gray'
-    return { name: tag, count: tagObj[tag], color }
+  const list = []
+  tagOptions.forEach(c => {
+    const count = tagObj[c.value]
+    if (count) {
+      list.push({ id: c.id, name: c.value, color: c.color, count })
+    }
   })
-  list.sort((a, b) => b.count - a.count)
+
+  // 按照数量排序
+  // list.sort((a, b) => b.count - a.count)
   if (sliceCount && sliceCount > 0) {
     return list.slice(0, sliceCount)
   } else {

lib/notion/getNotionData.js

@@ -11,6 +11,7 @@ import { getAllTags } from './getAllTags'
  * @param {*} pageId
  * @param {*} from
  * @param latestPostCount 截取最新文章数量
+ * @param categoryCount
  * @param tagsCount 截取标签数量
  * @param pageType 过滤的文章类型，数组格式 ['Page','Post']
  * @returns {
@@ -27,15 +28,17 @@ export async function getGlobalNotionData ({
   pageId = BLOG.NOTION_PAGE_ID,
   from,
   latestPostCount = 5,
-  tagsCount = 16,
+  categoryCount = BLOG.PREVIEW_CATEGORY_COUNT,
+  tagsCount = BLOG.PREVIEW_TAG_COUNT,
   pageType = ['Post']
 }) {
   const notionPageData = await getNotionPageData({ pageId, from })
   const tagOptions = notionPageData.tagOptions
+  const categoryOptions = notionPageData.categoryOptions
   const allPosts = await getAllPosts({ notionPageData, from, pageType })
   const postCount = await getAllPostCount({ notionPageData, from })
   const customNav = await getCustomNav({ notionPageData })
-  const categories = await getAllCategories(allPosts)
+  const categories = await getAllCategories({ allPosts, categoryOptions, sliceCount: categoryCount })
   const tags = await getAllTags({ allPosts, tagOptions, sliceCount: tagsCount })
   const latestPosts = await getLatestPosts({ notionPageData, from, latestPostCount })
   return { allPosts, latestPosts, categories, postCount, customNav, tags }
@@ -110,6 +113,11 @@ function getTagOptions (schema) {
   return tagSchema?.options || {}
 }
 
+function getCategoryOptions (schema) {
+  const categorySchema = Object.values(schema).find(e => e.name === 'category')
+  return categorySchema?.options || {}
+}
+
 /**
  * 调用NotionAPI获取Page数据
  * @returns {Promise<JSX.Element|null|*>}
@@ -119,7 +127,6 @@ async function getPageRecordMapByNotionAPI ({ pageId, from }) {
   if (!pageRecordMap) {
     return []
   }
-
   pageId = idToUuid(pageId)
   const collection = Object.values(pageRecordMap.collection)[0]?.value
   const collectionQuery = pageRecordMap.collection_query
@@ -127,6 +134,7 @@ async function getPageRecordMapByNotionAPI ({ pageId, from }) {
   const schema = collection?.schema
   const rawMetadata = block[pageId].value
   const tagOptions = getTagOptions(schema)
+  const categoryOptions = getCategoryOptions(schema)
 
   // Check Type Page-Database和Inline-Database
   if (
@@ -143,6 +151,7 @@ async function getPageRecordMapByNotionAPI ({ pageId, from }) {
     block,
     schema,
     tagOptions,
+    categoryOptions,
     rawMetadata
   }
 }

pages/category/index.js

@@ -8,7 +8,7 @@ export default function Category (props) {
 
 export async function getStaticProps () {
   const from = 'category-index-props'
-  const { allPosts, categories, tags, postCount, latestPosts, customNav } = await getGlobalNotionData({ from })
+  const { allPosts, categories, tags, postCount, latestPosts, customNav } = await getGlobalNotionData({ from, categoryCount: 0 })
 
   return {
     props: {

themes/NEXT/LayoutCategoryIndex.js

@@ -12,16 +12,16 @@ export const LayoutCategoryIndex = (props) => {
     type: 'website'
   }
   return <LayoutBase meta={meta} totalPosts={allPosts} {...props}>
-    <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
+    <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow h-full'>
       <div className='dark:text-gray-200 mb-5'>
         <i className='mr-4 fas faTh' />{locale.COMMON.CATEGORY}:
       </div>
       <div id='category-list' className='duration-200 flex flex-wrap'>
-        {Object.keys(categories).map(category => {
-          return <Link key={category} href={`/category/${category}`} passHref>
+        {categories.map(category => {
+          return <Link key={category.name} href={`/category/${category.name}`} passHref>
             <div
               className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-              <i className='mr-4 fas fa-folder' />{category}({categories[category]})
+              <i className='mr-4 fas fa-folder' />{category.name}({category.count})
             </div>
           </Link>
         })}

themes/NEXT/LayoutTagIndex.js

@@ -12,7 +12,7 @@ export const LayoutTagIndex = (props) => {
     type: 'website'
   }
   return <LayoutBase meta={meta} {...props}>
-    <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
+    <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow h-full'>
       <div className='dark:text-gray-200 mb-5'><i className='fas fa-tags mr-4'/>{locale.COMMON.TAGS}:</div>
       <div id='tags-list' className='duration-200 flex flex-wrap'>
         { tags.map(tag => {

themes/NEXT/components/CategoryGroup.js

@@ -2,16 +2,17 @@ import Link from 'next/link'
 import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
+  if (!categories) return <></>
   return <>
     <div id='category-list' className='dark:border-gray-600 flex flex-wrap'>
-      {Object.keys(categories).map(category => {
-        const selected = currentCategory === category
-        return <Link key={category} href={`/category/${category}`} passHref>
+      {categories.map(category => {
+        const selected = currentCategory === category.name
+        return <Link key={category.name} href={`/category/${category.name}`} passHref>
           <a className={(selected
             ? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
             : 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
             '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
-            <i className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-400 fa-folder '} mr-2 fas`} />{category}({categories[category]})
+            <i className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-400 fa-folder '} mr-2 fas`} />{category.name}({category.count})
             </a>
         </Link>
       })}

themes/NEXT/components/CategoryList.js

@@ -10,10 +10,10 @@ const CategoryList = ({ currentCategory, categories }) => {
 
   return <ul className='flex py-1 space-x-3'>
     <li className='w-16 py-2 dark:text-gray-200 whitespace-nowrap'>{locale.COMMON.CATEGORY}</li>
-    {Object.keys(categories).map(category => {
-      const selected = category === currentCategory
+    {categories.map(category => {
+      const selected = category.name === currentCategory
       return (
-        <Link key={category} href={`/category/${category}`} passHref>
+        <Link key={category.name} href={`/category/${category.name}`} passHref>
           <li
             className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-light text-sm whitespace-nowrap dark:text-gray-300 
                  ${selected
@@ -23,7 +23,7 @@ const CategoryList = ({ currentCategory, categories }) => {
           >
             <a>
             <i className={`${selected ? 'fa-folder-open ' : 'fa-folder '} fas mr-1`}/>
-              {`${category} `}
+              {`${category.name} (${category.count})`}
             </a>
           </li>
         </Link>)

themes/NEXT/components/SideAreaRight.js

@@ -5,6 +5,7 @@ import Card from './Card'
 import CategoryGroup from './CategoryGroup'
 import TagGroups from './TagGroups'
 import CONFIG_NEXT from '../config_next'
+import { useRouter } from 'next/router'
 
 /**
  * 侧边平铺
@@ -16,18 +17,13 @@ import CONFIG_NEXT from '../config_next'
  * @returns {JSX.Element}
  * @constructor
  */
-const SideAreaRight = ({
-  tags,
-  currentTag,
-  slot,
-  categories,
-  currentCategory
-}) => {
+const SideAreaRight = (props) => {
+  const { tags, currentTag, slot, categories, currentCategory } = props
   const { locale } = useGlobal()
   if (!CONFIG_NEXT.RIGHT_BAR) {
     return <></>
   }
-
+  const router = useRouter()
   return (<aside id='right' className='hidden 2xl:block flex-col w-60 ml-4'>
 
       {CONFIG_NEXT.RIGHT_AD && <Card className='mb-2'>
@@ -44,15 +40,16 @@ const SideAreaRight = ({
       </Card>}
 
       <div className="sticky top-4">
+        {slot}
 
         {/* 分类  */}
-        {CONFIG_NEXT.RIGHT_CATEGORY_LIST && categories && (
+        {CONFIG_NEXT.RIGHT_CATEGORY_LIST && router.asPath !== '/category' && categories && (
           <Card>
             <div className='text-sm px-2 flex flex-nowrap justify-between font-light'>
-              <div className='pb-1 text-gray-600 dark:text-gray-300'><i icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
+              <div className='pb-1 text-gray-600 dark:text-gray-300'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
               <Link href={'/category'} passHref>
                 <a className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
-                  {locale.COMMON.MORE} <i icon={faAngleRight} />
+                  {locale.COMMON.MORE} <i className='fas fa-angle-right' />
                 </a>
               </Link>
             </div>
@@ -60,9 +57,7 @@ const SideAreaRight = ({
           </Card>
         )}
 
-        {slot}
-
-         {CONFIG_NEXT.RIGHT_TAG_LIST && tags && (
+         {CONFIG_NEXT.RIGHT_TAG_LIST && router.asPath !== '/tag' && tags && (
           <Card>
             <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
               <div className="text-gray-600 dark:text-gray-200">