feature: 右边侧边栏可配置

2026-05-14 07:26:52 +00:00 · 2022-01-04 11:34:54 +08:00
parent 72f0a0b589
commit d30731ff8a
6 changed files with 28 additions and 51 deletions
--- a/blog.config.js
+++ b/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',
--- a/components/JumpToBottomButton.js
+++ b/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>)}
--- a/components/JumpToTopButton.js
+++ b/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>)}
--- a/components/SideAreaLeft.js
+++ b/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
--- a/components/SideAreaRight.js
+++ b/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 showToc = post && post.toc && post.toc.length > 1
+  const { widget } = BLOG
+  if (!widget?.showCategoryList && !widget.showTagList && !widget.showLatestPost) {
+    return <></>
+  }

-  return (
-    <>
-
-      {/* <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> */}
+  return (<aside id='right' className='hidden 2xl:block flex-col w-60 ml-4'>

      <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">
-          <SearchInput currentTag={currentTag} currentSearch={currentSearch}/>
-        </section> */}
-
-        {/* 标签云  */}
-         {/* {tags && (
+         {widget?.showTagList && 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
--- a/layouts/BaseLayout.js
+++ b/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}/>
-          </aside>
+          <SideAreaLeft targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
          <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}/>
-          </aside>
+          <SideAreaRight targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
      </main>

      <Footer title={meta.title}/>