feature：

新增标签汇总页

components/BlogPostListScroll.js

@@ -55,19 +55,19 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
 
       {currentCategory && (
         <div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
-          <div className='cursor-pointer py-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{currentCategory}</div>
+          <div className='cursor-pointer p-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{currentCategory}</div>
         </div>
       )}
 
       {currentSearch && (
         <div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
-          <div className='cursor-pointer py-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-search mr-1'/>关键字：{currentSearch}</div>
+          <div className='cursor-pointer p-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-search mr-1'/>关键字：{currentSearch}</div>
         </div>
       )}
 
       {currentTag && (
         <div className='w-full p-1 bg-gray-100 dark:bg-gray-700 flex'>
-          <div className='cursor-pointer py-1.5 mr-2 hover:underline bg-gray-200 dark:bg-gray-400 px-2 rounded'><i className='fa fa-tag mr-1 '/> {currentTag}</div>
+          <div className='cursor-pointer p-1.5 mr-2 hover:underline bg-gray-200 dark:bg-gray-500 dark:text-gray-200 px-2 rounded'><i className='fa fa-tag mr-1 '/> {currentTag}</div>
         </div>
       )}
 

components/PostsCategories.js

@@ -8,7 +8,7 @@ const PostsCategories = ({ currentCategory, categories }) => {
       <div className='w-32'>文章分类</div>
     </section>
     <div>
-      <div id='category-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-66'>
+      <div id='category-list' className='dark:border-gray-600 dark:bg-gray-800 w-66'>
         {Object.keys(categories).map(category => {
           return <Link key={category} href={`/category/${category}`}>
             <div className={(currentCategory === category ? 'bg-gray-200 dark:bg-black' : '') + ' dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}><i className='fa fa-folder-open-o mr-4'/>{category}({categories[category]})</div>

components/SearchInput.js

@@ -5,7 +5,7 @@ import { useRef, useState } from 'react'
 const SearchInput = ({ currentTag, currentSearch }) => {
   const { locale } = useGlobal()
   const [searchKey, setSearchKey] = useState(currentSearch)
-  const [onLoading,setLoadingState] = useState(false)
+  const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
   const handleSearch = (key) => {
@@ -41,7 +41,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
       ref={searchInputRef}
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'pl-2 w-full transition duration-200 leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
+      className={'pl-2 w-full transition leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
@@ -50,7 +50,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
 
     <div className='py-4 px-4 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
          onClick={() => { handleSearch(searchKey) }}>
-      <i className={`fa ${onLoading ? 'fa-spinner animate-spin':'fa-search'} text-black cursor-pointer`}/>
+      <i className={`fa ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} text-black cursor-pointer`}/>
     </div>
   </div>
 }

components/SideBar.js

@@ -6,7 +6,7 @@ import LatestPosts from '@/components/LatestPosts'
 import PostsCategories from '@/components/PostsCategories'
 import Toc from '@/components/Toc'
 import SearchInput from '@/components/SearchInput'
-import DarkModeButton from '@/components/DarkModeButton'
+import Link from 'next/link'
 
 /**
  * 侧边栏
@@ -20,7 +20,6 @@ import DarkModeButton from '@/components/DarkModeButton'
  * @constructor
  */
 const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
-
   return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
     <section>
       <InfoCard />
@@ -57,8 +56,9 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory })
       {tags && (
         <section className='mt-2'>
           <section
-            className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
-            <div className='w-32'>标签</div>
+            className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap justify-between'>
+            <div>标签</div>
+            <div><Link href='/tag'><div className='hover:underline cursor-pointer opacity-50'>更多标签</div></Link></div>
           </section>
           <div className='px-5'>
             <TagList tags={tags} currentTag={currentTag} />

components/TagItem.js

@@ -1,10 +1,10 @@
 import Link from 'next/link'
 
-const TagItem = ({ tag }) => (
+const TagItem = ({ tag, count }) => (
   <Link href={`/tag/${encodeURIComponent(tag)}`}>
     <div className="cursor-pointer hover:shadow hover:border-gray-600 rounded-md dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
       dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
-     <div className='whitespace-nowrap'>  <i className='fa fa-tag mr-1 '/> {tag}</div>
+     <span className='whitespace-nowrap'>  <i className='fa fa-tag mr-1 '/> {tag}({count})</span>
     </div>
   </Link>
 )

components/TagItemMini.js

@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false, count }) => {
   return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
-    <div className={`cursor-pointer inline-block border rounded hover:bg-gray-300 duration-200 
+    <div className={`cursor-pointer inline-block border rounded hover:bg-gray-300 
       mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:text-gray-300 dark:hover:bg-gray-500
        ${selected
       ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'

components/TagList.js

@@ -12,10 +12,10 @@ const TagList = ({ tags, currentTag }) => {
   return (
     <div id='tags-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-66'>
       {
-          tags.map(tag=>{
-            const selected = tag.name === currentTag
-            return  <TagItemMini key={tag.name} tag={tag.name} selected={selected} count={tag.count}/>
-          })
+        tags.map(tag => {
+          const selected = tag.name === currentTag
+          return <TagItemMini key={tag.name} tag={tag.name} selected={selected} count={tag.count} />
+        })
       }
     </div>
   )

lib/notion/getAllTags.js

@@ -1,11 +1,11 @@
-import { rest } from "lodash"
 
 /**
  * 获取所有文章的标签
  * @param allPosts
+ * @param sliceCount 默认截取数量为12，若为0则返回全部
  * @returns {Promise<{}|*[]>}
  */
-export async function getAllTags (allPosts) {
+export async function getAllTags (allPosts, sliceCount = 12) {
   if (!allPosts) {
     return []
   }
@@ -24,7 +24,13 @@ export async function getAllTags (allPosts) {
   })
 
   // 按照标签数量排序
-  const list = Object.keys(tagObj).map((index) => {return {name:index,count:tagObj[index]}})
+  const list = Object.keys(tagObj).map((index) => {
+    return { name: index, count: tagObj[index] }
+  })
   list.sort((a, b) => b.count - a.count)
-  return list
+  if (sliceCount) {
+    return list.slice(0, 12)
+  } else {
+    return list
+  }
 }

pages/tag/index.js

@@ -0,0 +1,43 @@
+import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion'
+import BLOG from '@/blog.config'
+import BaseLayout from '@/layouts/BaseLayout'
+import TagItem from '@/components/TagItem'
+
+export default function Tag ({ tags, posts, categories }) {
+  const meta = {
+    title: `${BLOG.title} | 标签`,
+    description: BLOG.description,
+    type: 'website'
+  }
+  return <BaseLayout meta={meta} categories={categories} totalPosts={posts}>
+    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-10'>
+    <div className='bg-white dark:bg-gray-700 px-10 py-5 mt-20'>
+      <div className='dark:text-gray-200 my-5'>所有标签:</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.name} count={tag.count} /></div>
+          })
+        }
+      </div>
+    </div>
+    </div>
+  </BaseLayout>
+}
+
+export async function getStaticProps () {
+  let posts = await getAllPosts({ from: 'tag-props' })
+  posts = posts.filter(
+    post => post.status[0] === 'Published' && post.type[0] === 'Post'
+  )
+  const tags = await getAllTags(posts, 0)
+  const categories = await getAllCategories(posts)
+  return {
+    props: {
+      tags,
+      posts,
+      categories
+    },
+    revalidate: 1
+  }
+}