feature:

新增StickyBar组件；
标签页、分类页、搜索页重排；

components/BlogPostListScroll.js

@@ -53,18 +53,6 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
   } else {
     return <div id='post-list-wrapper' className='mt-20 mx-2 lg:mx-20' ref={targetRef}>
 
-      <div className='w-full mb-4 xl:sticky xl:top-0 z-30 shadow-card bg-white dark:bg-gray-700 dark:text-gray-200'>
-        {currentCategory && (
-          <div className='p-2 mr-2'><i className='fa fa-folder-open-o mr-1' />{currentCategory}</div>
-        )}
-        {currentSearch && (
-          <div className='p-2 mr-2'><i className='fa fa-search mr-1' />关键字：{currentSearch}</div>
-        )}
-        {currentTag && (
-          <div className='p-2 mr-2'> <i className='fa fa-tag mr-1' /> {currentTag}</div>
-        )}
-      </div>
-
       {/* 文章列表 */}
       <div className='flex flex-wrap'>
         {postsToShow.map(post => (

components/CategoryGroup.js

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import React from 'react'
 
-const PostsCategories = ({ currentCategory, categories }) => {
+const CategoryGroup = ({ currentCategory, categories }) => {
   return <>
     <section
       className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
@@ -19,4 +19,4 @@ const PostsCategories = ({ currentCategory, categories }) => {
   </>
 }
 
-export default PostsCategories
+export default CategoryGroup

components/CategoryList.js

@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import React from 'react'
+
+const CategoryList = ({ currentCategory, categories }) => {
+  return <ul className='flex py-1 space-x-3'>
+    <li className='w-10 py-2 dark:text-gray-200'>分类:</li>
+    {Object.keys(categories).map(category => {
+      const selected = category === currentCategory
+      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'
+            }`}
+          >
+            <a>
+              <i className='fa fa-folder-open-o mr-1'/>
+              {`${category} `}
+            </a>
+          </li>
+        </Link>)
+    })}
+  </ul>
+}
+
+export default CategoryList

components/RecommendPosts.js

@@ -34,11 +34,11 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
     filteredPosts = filteredPosts.slice(0, 5)
   }
 
-  return <div className='dark:text-gray-300 dark:bg-gray-900 bg-gray-100 p-2 mb-2  border-l-4 border-yellow-500'>
+  return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 mb-2  border-l-4 border-yellow-500'>
     <h2 className='ml-2 mb-2 font-bold'>相关推荐</h2>
     <ul className='list-disc px-5'>
       {filteredPosts.map(post => (
-        <li className='py-1' key={post.id} ><Link href={`/article/${post.slug}`}><a className='cursor-pointer underline'>{post.title}</a></Link></li>
+        <li className='py-1' key={post.id} ><Link href={`/article/${post.slug}`}><a className='cursor-pointer hover:underline'>{post.title}</a></Link></li>
       ))}
     </ul>
   </div>

components/SideBar.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import MenuButtonGroup from '@/components/MenuButtonGroup'
 import InfoCard from '@/components/InfoCard'
-import TagList from '@/components/TagList'
+import TagGroups from '@/components/TagGroups'
 import LatestPosts from '@/components/LatestPosts'
-import PostsCategories from '@/components/PostsCategories'
+import CategoryGroup from '@/components/CategoryGroup'
 import Toc from '@/components/Toc'
 import SearchInput from '@/components/SearchInput'
 import Link from 'next/link'
@@ -16,10 +16,11 @@ import Link from 'next/link'
  * @param posts
  * @param categories
  * @param currentCategory
+ * @param currentSearch
  * @returns {JSX.Element}
  * @constructor
  */
-const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
+const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
   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 />
@@ -29,7 +30,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory })
 
       {/* 搜索框 */}
       <section className='p-5'>
-        <SearchInput currentTag={currentTag} />
+        <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
       </section>
 
       <section>
@@ -41,7 +42,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory })
       {/* 分类  */}
       {categories && (
         <section className='mt-2'>
-          <PostsCategories currentCategory={currentCategory} categories={categories} />
+          <CategoryGroup currentCategory={currentCategory} categories={categories} />
         </section>
       )}
 
@@ -61,7 +62,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory })
             <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} />
+            <TagGroups tags={tags} currentTag={currentTag} />
           </div>
         </section>
       )}

components/StickyBar.js

@@ -0,0 +1,29 @@
+/**
+ * 标签组导航条，默认隐藏仅在移动端显示
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const StickyBar = ({ children }) => {
+  if (!children) return <></>
+  return (
+    <div id='sticky-bar' className='fixed lg:top-0 top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
+      <div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
+      <div className='z-30 sticky left-0 flex'>
+        <div className='pr-2 bg-white dark:bg-gray-800'/>
+        <div className='pr-3 -line-x-opacity bg-black'/>
+      </div>
+      <div id='tag-container'>
+          { children }
+      </div>
+      <div className='z-30 sticky right-0 flex'>
+        <div className='px-5 line-x-opacity'/>
+        <div className='px-2 bg-white dark:bg-gray-800'/>
+      </div>
+    </div>
+    </div>
+  )
+}
+
+export default StickyBar

components/TagGroups.js

@@ -0,0 +1,24 @@
+import TagItemMini from '@/components/TagItemMini'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tags, currentTag }) => {
+  if (!tags) return <></>
+  return (
+    <div id='tags-group' className='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} />
+        })
+      }
+    </div>
+  )
+}
+
+export default TagGroups

components/TagItemMini.js

@@ -3,10 +3,10 @@ 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-500 shadow-card
-      mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:text-gray-300 dark:hover:bg-gray-500
+      mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:text-gray-300 
        ${selected
-      ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
-      : 'bg-white text-gray-500 hover:shadow-xl hover:text-white border-gray-500 dark:bg-gray-800 dark:border-gray-600'}` }>
+      ? 'text-white bg-gray-700 dark:hover:bg-gray-900 dark:bg-gray-500 border-gray-800'
+      : 'bg-white text-gray-500 hover:shadow-xl hover:text-white border-gray-500 dark:bg-gray-800 dark:hover:bg-gray-600 dark:border-gray-600'}` }>
     <div> <i className='fa fa-tag mr-2 py-0.5'/>{tag + (count ? `(${count})` : '')} </div>
     </div>
   </Link>

components/TagList.js

@@ -1,24 +1,33 @@
-import TagItemMini from '@/components/TagItemMini'
+import Link from 'next/link'
 
 /**
- * 标签组
+ * 横向的标签列表
  * @param tags
  * @param currentTag
  * @returns {JSX.Element}
  * @constructor
  */
 const TagList = ({ tags, currentTag }) => {
-  if (!tags) return <></>
-  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} />
-        })
-      }
-    </div>
-  )
+  return <ul className='flex py-1 space-x-3'>
+    <li className='w-10 py-2 dark:text-gray-200'>标签:</li>
+    {tags.map(tag => {
+      const selected = tag.name === currentTag
+      return (
+        <Link key={tag.name} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
+          <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'
+            }`}
+          >
+            <a>
+              <i className='fa fa-tag mr-1'/>
+              {`${tag.name} (${tag.count})`}
+            </a>
+          </li>
+        </Link>
+      )
+    })}
+  </ul>
 }
 
 export default TagList

components/TagsBar.js

@@ -1,47 +0,0 @@
-import Link from 'next/link'
-
-/**
- * 标签组导航条，默认隐藏仅在移动端显示
- * @param tags
- * @param currentTag
- * @returns {JSX.Element}
- * @constructor
- */
-const TagsBar = ({ tags, currentTag }) => {
-  if (!tags) return <></>
-  return (
-    <div id='tags-bar' className='fixed block lg:hidden top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
-      <div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
-      <div className='z-30 sticky left-0 flex'>
-        <div className='px-2 bg-white dark:bg-gray-800'/>
-        <div className='px-5 -line-x-opacity bg-black'/>
-      </div>
-      <ul id='tag-container' className='flex py-1 space-x-3'>
-        <li className='w-10 py-2 dark:text-gray-200'>标签:</li>
-        {tags.map(tag => {
-          const selected = tag.name === currentTag
-          return (
-            <Link key={tag.name} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
-              <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'
-                }`}
-              >
-                <a>
-                  {`${tag.name} (${tag.count})`}
-                </a>
-              </li>
-            </Link>
-          )
-        })}
-      </ul>
-      <div className='z-30 sticky right-0 flex'>
-        <div className='px-5 line-x-opacity'/>
-        <div className='px-2 bg-white dark:bg-gray-800'/>
-      </div>
-    </div>
-    </div>
-  )
-}
-
-export default TagsBar