feature: 右边侧边栏可配置

blog.config.js

@@ -6,7 +6,7 @@ const BLOG = {
   description: '分享编程技术与记录生活',
   keywords: ['Notion', '写作', '博客'],
   home: { // 首页
-    showHomeBanner: true, // 首页是否显示大图及标语 [true,false]
+    showHomeBanner: false, // 首页是否显示大图及标语 [true,false]
     homeBannerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
     homeBannerImage: './bg_image.jpg' // 首图
   },
@@ -38,7 +38,10 @@ const BLOG = {
     showToc: true,
     showShareBar: false,
     showRelatePosts: false,
-    showCopyRight: false
+    showCopyRight: false,
+    showLatestPost: false,
+    showCategoryList: false,
+    showTagList: false
   },
   socialLink: { // 社交链接
     weibo: 'https://weibo.com/tangly1024',

components/JumpToBottomButton.js

@@ -43,7 +43,7 @@ const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
   return (<div id='jump-to-top' className='right-1 fixed flex bottom-36  z-20'>
       <div onClick={() => window.scrollTo({ top: targetRef.current.clientHeight, behavior: 'smooth' })}
         className={(show ? '' : 'hidden') + ' animate__fadeInRight duration-500 animate__animated animate__faster glassmorphism flex justify-center items-center w-8 h-8 cursor-pointer '}>
-        <div className='dark:text-gray-200 transform hover:scale-150 text-xs' title={locale.POST.TOP} >
+        <div className='dark:text-gray-200 transform hover:scale-150 text-xs duration-200' title={locale.POST.TOP} >
           <FontAwesomeIcon icon={faArrowDown} />
         </div>
           {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}

components/JumpToTopButton.js

@@ -44,7 +44,7 @@ const JumpToTopButton = ({ targetRef, showPercent = false }) => {
   return (<div id='jump-to-top' className='right-1 fixed flex bottom-44 z-20'>
       <div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
         className={(show ? '' : 'hidden') + ' animate__fadeInRight duration-500 animate__animated animate__faster flex justify-center items-center w-8 h-8 glassmorphism cursor-pointer '}>
-        <div className='dark:text-gray-200 transform hover:scale-150 text-xs' title={locale.POST.TOP} >
+        <div className='dark:text-gray-200 transform hover:scale-150 text-xs duration-200' title={locale.POST.TOP} >
           <FontAwesomeIcon icon={faArrowUp} />
         </div>
           {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}

components/SideAreaLeft.js

@@ -24,7 +24,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
   const { locale } = useGlobal()
   const showToc = post && post.toc && post.toc.length > 1
   const postCount = posts?.length || 0
-  return <>
+  return <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
 
     <section className='sticky top-8 w-60'>
 
@@ -51,6 +51,6 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
 
     </section>
 
- </>
+ </aside>
 }
 export default SideAreaLeft

components/SideAreaRight.js

@@ -1,8 +1,12 @@
+import BLOG from '@/blog.config'
 import LatestPostsGroup from '@/components/LatestPostsGroup'
 import { useGlobal } from '@/lib/global'
-import { faArchive } from '@fortawesome/free-solid-svg-icons'
+import { faAngleDoubleRight, faAngleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
 import React from 'react'
+import CategoryGroup from './CategoryGroup'
+import TagGroups from './TagGroups'
 
 /**
  * 侧边平铺
@@ -28,23 +32,12 @@ const SideAreaRight = ({
   targetRef
 }) => {
   const { locale } = useGlobal()
-  // const postCount = posts?.length || 0
+  const { widget } = BLOG
-  // const showToc = post && post.toc && post.toc.length > 1
+  if (!widget?.showCategoryList && !widget.showTagList && !widget.showLatestPost) {
+    return <></>
+  }
 
-  return (
+  return (<aside id='right' className='hidden 2xl:block flex-col w-60 ml-4'>
-    <>
-
-      {/* <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-8 '>
-        <InfoCard postCount={postCount} />
-      </section> */}
-
-      {/* 菜单 */}
-      {/* <section className='hidden lg:block mb-5 py-5  bg-white dark:bg-gray-800  hover:shadow-xl duration-200'>
-        <MenuButtonGroup allowCollapse={true} />
-        <div className='px-5 pt-2'>
-           <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
-        </div>
-      </section> */}
 
       <section className="shadow mb-5 py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
         {/* 展示广告  */}
@@ -59,35 +52,25 @@ const SideAreaRight = ({
         ></ins>
       </section>
 
-      {/* <Analytics postCount={postCount}/> */}
-
       <div className="sticky top-8">
-          {/* {showToc && (
-          <section className='pb-10 mb-5  bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
-            <div className='border-b text-center text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
-              {locale.COMMON.TABLE_OF_CONTENTS}
-            </div>
-            <Toc toc={post.toc} targetRef={targetRef} />
-          </section>
-          )} */}
 
         {/* 分类  */}
-        {/* {categories && (
+        {widget?.showCategoryList && categories && (
           <section className='shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
             <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
               <div className='pb-1 text-gray-600 dark:text-gray-300'><FontAwesomeIcon icon={faThList} className='mr-2' />{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} <FontAwesomeIcon icon={faAngleDoubleRight} />
+                  {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleRight} />
                 </a>
               </Link>
             </div>
             <CategoryGroup currentCategory={currentCategory} categories={categories} />
           </section>
-        )} */}
+        )}
 
         {/* 最新文章 */}
-        {posts && (
+        {widget?.showLatestPost && posts && (
           <section className="shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
             <div className="text-sm pb-2 px-5  flex flex-nowrap justify-between">
               <div className="font-light text-gray-600  dark:text-gray-300">
@@ -100,12 +83,7 @@ const SideAreaRight = ({
           </section>
         )}
 
-        {/* <section className="shadow py-4 px-5 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+         {widget?.showTagList && tags && (
-          <SearchInput currentTag={currentTag} currentSearch={currentSearch}/>
-        </section> */}
-
-        {/* 标签云  */}
-         {/* {tags && (
           <section className="shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
             <div className="text-sm pb-1 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200">
               <div className="text-gray-600 dark:text-gray-200">
@@ -123,10 +101,10 @@ const SideAreaRight = ({
               <TagGroups tags={tags} currentTag={currentTag} />
             </div>
           </section>
-         )} */}
+         )}
 
       </div>
-    </>
+    </aside>
   )
 }
 export default SideAreaRight

layouts/BaseLayout.js

@@ -54,9 +54,7 @@ const BaseLayout = ({
       <>{headerSlot}</>
 
       <main id='wrapper' className='flex justify-center flex-1 mx-auto md:pt-14 pb-12'>
-          <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
+          <SideAreaLeft targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
-            <SideAreaLeft targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
-          </aside>
           <section id='center' className='flex-grow mt-14 md:mt-0 max-w-4xl min-h-screen' ref={targetRef}>
             {onLoading
               ? <LoadingCover/>
@@ -65,9 +63,7 @@ const BaseLayout = ({
               </>
             }
           </section>
-          <aside id='right' className='hidden 2xl:block flex-col w-60 ml-4'>
+          <SideAreaRight targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
-            <SideAreaRight targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
-          </aside>
       </main>
 
       <Footer title={meta.title}/>