From 8e8b6c1f73c5ed8cf3ace26a4548f0c85fdb9fd2 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sat, 1 Jan 2022 22:22:52 +0800
Subject: [PATCH 01/12] =?UTF-8?q?feature:=20=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=EF=BC=8C=E5=8A=A0=E5=85=A5Tabs=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js                |  7 ++++-
 components/Analytics.js       |  4 +--
 components/Header.js          |  2 +-
 components/InfoCard.js        |  7 +++--
 components/Live2D.js          |  2 +-
 components/MenuButtonGroup.js |  6 +++--
 components/Progress.js        |  9 ++++---
 components/SearchDrawer.js    | 35 ++++++++++++++++++++++++
 components/SideAreaLeft.js    | 33 +++++++++++------------
 components/SideAreaRight.js   | 15 +++++------
 components/SocialButton.js    | 24 +++++++++++------
 components/Tabs.js            | 51 +++++++++++++++++++++++++++++++++++
 components/Toc.js             |  2 +-
 components/TocDrawer.js       |  4 ++-
 components/TopNav.js          | 33 ++++++++---------------
 pages/about.js                |  1 +
 pages/search.js               |  4 +--
 styles/globals.css            |  8 +++---
 18 files changed, 167 insertions(+), 80 deletions(-)
 create mode 100644 components/SearchDrawer.js
 create mode 100644 components/Tabs.js

diff --git a/blog.config.js b/blog.config.js
index dd0180af..82f93cb8 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -20,7 +20,12 @@ const BLOG = {
   showAbout: true, // WIP 是否显示关于
   showArchive: true, // WIP 是否显示归档
   autoCollapsedNavBar: false, // the automatically collapsed navigation bar
-  socialLink: 'https://weibo.com/u/2245301913',
+  socialLink: {
+    weibo: 'https://weibo.com/u/2245301913',
+    twitter: '',
+    github: 'https://github.com/tangly1024',
+    telegram: ''
+  },
   seo: {
     keywords: ['Notion', '写作', '博客'],
     googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
diff --git a/components/Analytics.js b/components/Analytics.js
index 9edcf75e..fbd23538 100644
--- a/components/Analytics.js
+++ b/components/Analytics.js
@@ -1,6 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { faChartBar } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 /**
  * 统计网站信息
@@ -11,7 +9,7 @@ export default function Analytics ({ postCount }) {
   const { locale } = useGlobal()
 
   return <>
-    <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div>
+    {/* <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div> */}
     <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
         <span className='px-1 '>
           <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
diff --git a/components/Header.js b/components/Header.js
index 3f4b4fe6..7b9bdacb 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -96,7 +96,7 @@ export default function Header () {
   return (
     <header
       id="header"
-      className="duration-500 md:bg-fixed w-full bg-cover bg-center lg:-mt-14 h-screen bg-black"
+      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black"
       style={{
         backgroundImage:
           `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${BLOG.bannerImage}")`
diff --git a/components/InfoCard.js b/components/InfoCard.js
index da214ec8..d7a148af 100644
--- a/components/InfoCard.js
+++ b/components/InfoCard.js
@@ -2,11 +2,12 @@ import BLOG from '@/blog.config'
 import Image from 'next/image'
 import Router from 'next/router'
 import React from 'react'
+import SocialButton from './SocialButton'
 
 const InfoCard = ({ postCount }) => {
   return <>
-    <div className='flex flex-col items-center justify-center cursor-pointer' onClick={ () => { Router.push('/') }}>
-        <div className='hover:rotate-45 hover:scale-125 transform duration-200'>
+    <div className='flex flex-col items-center justify-center '>
+        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/about') }}>
           <Image
           alt={BLOG.title}
           width={120}
@@ -17,6 +18,8 @@ const InfoCard = ({ postCount }) => {
         />
         </div>
         <div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.title}</div>
+        <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.description}</div>
+        <SocialButton/>
     </div>
   </>
 }
diff --git a/components/Live2D.js b/components/Live2D.js
index f41d04f7..d17f7dd8 100644
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -9,7 +9,7 @@ export default function Live2D () {
       hasLoad = true
     }
   })
-  return <div className='fixed left-0 bottom-0 hidden md:block lg:ml-24 2xl:ml-36'>
+  return <div className='fixed right-0 bottom-0 hidden md:block lg:mr-24 2xl:mr-48 z-20'>
     <canvas id="live2d"className='animate__slideInLeft animate__animated' width="280" height="250"></canvas>
   </div>
 }
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 9d521bc1..19b276fb 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArchive, faHome, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import { faArchive, faHome, faTag, faThList } from '@fortawesome/free-solid-svg-icons'
 import BLOG from 'blog.config'
 
 const MenuButtonGroup = ({ allowCollapse = false }) => {
@@ -12,7 +12,9 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
   const links = [
     { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
     { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.showArchive },
-    { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout }
+    { id: 2, icon: faThList, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.showArchive },
+    { id: 3, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.showArchive }
+    // { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout }
     // { id: 7, icon: 'faGithub', name: 'Github', to: 'https://github.com/tangly1024', show: true },
     // { id: 5, icon: 'faWeibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
     // { id: 4, icon: 'faEnvelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }
diff --git a/components/Progress.js b/components/Progress.js
index 4191ca6f..daa60a9a 100644
--- a/components/Progress.js
+++ b/components/Progress.js
@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'
  * @returns {JSX.Element}
  * @constructor
  */
-const Progress = ({ targetRef }) => {
+const Progress = ({ targetRef, showPercent = true }) => {
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
     if (targetRef?.current) {
@@ -24,9 +24,10 @@ const Progress = ({ targetRef }) => {
   }, [percent])
 
   return (<div className='h-4 w-full shadow-2xl bg-gray-400'>
-
-    <div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}><div className='text-right text-white text-xs'>{percent}%</div></div>
-      </div>)
+      <div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}>
+        {showPercent && <div className='text-right text-white text-xs'>{percent}%</div>}
+      </div>
+  </div>)
 }
 
 export default Progress
diff --git a/components/SearchDrawer.js b/components/SearchDrawer.js
new file mode 100644
index 00000000..a63d73d8
--- /dev/null
+++ b/components/SearchDrawer.js
@@ -0,0 +1,35 @@
+import { Router } from 'next/router'
+import { useImperativeHandle, useRef } from 'react'
+import SearchInput from './SearchInput'
+const SearchDrawer = ({ cRef }) => {
+  const searchDrawer = useRef()
+  const searchInputRef = useRef()
+  useImperativeHandle(cRef, () => {
+    return {
+      show: () => {
+        searchDrawer?.current?.classList?.remove('hidden')
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+  const hidden = () => {
+    searchDrawer?.current?.classList?.add('hidden')
+  }
+  Router.events.on('routeChangeComplete', (...args) => {
+    hidden()
+  })
+  return (
+    <div id='search-drawer-wrapper' ref={searchDrawer} className='hidden'>
+      <div className='flex absolute px-5 w-full h-full left-0 top-14 z-50 justify-center'>
+          <div className='md:max-w-3xl w-full mx-auto'>
+          <SearchInput cRef={searchInputRef} />
+          </div>
+      </div>
+
+      {/* 背景蒙版 */}
+      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed glassmorphism top-0 left-0 z-30 w-full h-full' />
+    </div>
+  )
+}
+
+export default SearchDrawer
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index aeeb0bfe..c5bb9765 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -5,6 +5,7 @@ import Toc from '@/components/Toc'
 import { useGlobal } from '@/lib/global'
 import React from 'react'
 import Analytics from './Analytics'
+import Tabs from '@/components/Tabs'
 
 /**
  * 侧边平铺
@@ -24,35 +25,31 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
   const postCount = posts?.length || 0
   return <>
 
-    <section className={(!post ? 'sticky top-8 ' : ' ') + ' w-60'}>
-      <section className='shadow hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-6'>
-        <InfoCard postCount={postCount} />
-      </section>
+    <section className='sticky top-16 w-60'>
 
       {/* 菜单 */}
-      <section className='shadow hidden lg:block mb-5 py-4  bg-white dark:bg-gray-800  hover:shadow-xl duration-200'>
+      <section className='shadow hidden lg:block mb-5 py-4 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 hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-4'>
-        <Analytics postCount={postCount}/>
-      </section>
+      <Tabs>
+          {showToc && (
+            <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
+              <Toc toc={post.toc} targetRef={targetRef} />
+            </div>
+          )}
+
+          <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-gray-800 duration-200 py-6'>
+            <InfoCard postCount={postCount} />
+            <Analytics postCount={postCount}/>
+          </div>
+      </Tabs>
 
     </section>
 
-    {showToc && (
-      <section className='shadow sticky top-8 pb-20  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>
-    )}
-
  </>
 }
 export default SideAreaLeft
diff --git a/components/SideAreaRight.js b/components/SideAreaRight.js
index 4eb35421..66a12ae6 100644
--- a/components/SideAreaRight.js
+++ b/components/SideAreaRight.js
@@ -1,11 +1,8 @@
 import LatestPostsGroup from '@/components/LatestPostsGroup'
-import TagGroups from '@/components/TagGroups'
 import { useGlobal } from '@/lib/global'
-import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
+import { faArchive } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
 import React from 'react'
-import CategoryGroup from '@/components/CategoryGroup'
 
 /**
  * 侧边平铺
@@ -64,7 +61,7 @@ const SideAreaRight = ({
 
       {/* <Analytics postCount={postCount}/> */}
 
-      <div className="sticky top-8">
+      <div className="sticky top-16">
           {/* {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'>
@@ -75,7 +72,7 @@ const SideAreaRight = ({
           )} */}
 
         {/* 分类  */}
-        {categories && (
+        {/* {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>
@@ -87,7 +84,7 @@ const SideAreaRight = ({
             </div>
             <CategoryGroup currentCategory={currentCategory} categories={categories} />
           </section>
-        )}
+        )} */}
 
         {/* 最新文章 */}
         {posts && (
@@ -108,7 +105,7 @@ const SideAreaRight = ({
         </section> */}
 
         {/* 标签云  */}
-         {tags && (
+         {/* {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">
@@ -126,7 +123,7 @@ const SideAreaRight = ({
               <TagGroups tags={tags} currentTag={currentTag} />
             </div>
           </section>
-         )}
+         )} */}
 
       </div>
     </>
diff --git a/components/SocialButton.js b/components/SocialButton.js
index 81b5fb56..1b94a44c 100644
--- a/components/SocialButton.js
+++ b/components/SocialButton.js
@@ -1,4 +1,6 @@
+import BLOG from '@/blog.config'
 import { faGithub, faTelegram, faTwitter, faWeibo } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope, faRss } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 
@@ -8,19 +10,25 @@ import React from 'react'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-52'>
+  return <div className='w-52 justify-center flex'>
     <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 px-6'>
-      <a target='_blank' rel='noreferrer' title={'github'} href={'https://github.com/tangly1024'} >
+      {BLOG.socialLink.github && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.socialLink.github} >
         <FontAwesomeIcon icon={faGithub} className='transform hover:scale-125 duration-150'/>
-      </a>
-      <a target='_blank' rel='noreferrer' title={'twitter'} href={'https://twitter.com/troy1024_1'} >
+      </a>}
+      {BLOG.socialLink.twitter && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.socialLink.twitter} >
         <FontAwesomeIcon icon={faTwitter} className='transform hover:scale-125 duration-150'/>
-      </a>
-      <a target='_blank' rel='noreferrer' href={'https://t.me/tangly_1024'} title={'telegram'} >
+      </a>}
+      {BLOG.socialLink.telegram && <a target='_blank' rel='noreferrer' href={BLOG.socialLink.telegram} title={'telegram'} >
         <FontAwesomeIcon icon={faTelegram} className='transform hover:scale-125 duration-150'/>
-      </a>
-      <a target='_blank' rel='noreferrer' title={'weibo'} href={'https://weibo.com/tangly1024'} >
+      </a>}
+      {BLOG.socialLink.weibo && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.socialLink.weibo} >
         <FontAwesomeIcon icon={faWeibo} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      {BLOG.email && <a target='_blank' rel='noreferrer' title={'weibo'} href={`mailto:${BLOG.email}`} >
+        <FontAwesomeIcon icon={faEnvelope} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      <a target='_blank' rel='noreferrer' title={'weibo'} href={'/feed'} >
+        <FontAwesomeIcon icon={faRss} className='transform hover:scale-125 duration-150'/>
       </a>
     </div>
   </div>
diff --git a/components/Tabs.js b/components/Tabs.js
new file mode 100644
index 00000000..684a1a7b
--- /dev/null
+++ b/components/Tabs.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+
+/**
+ * Tabs切换标签
+ * @param {*} param0
+ * @returns
+ */
+const Tabs = ({ children }) => {
+  if (!children) {
+    return <></>
+  }
+
+  let count = children.length
+  children.forEach(e => {
+    if (!e) {
+      count--
+    }
+  })
+
+  if (count === 1) {
+    return <section>
+      {children}
+    </section>
+  }
+
+  const [currentTab, setCurrentTab] = useState(0)
+  function tabClickHandle (i) {
+    setCurrentTab(i)
+  }
+
+  return (
+    <section >
+      {<div className='shadow hidden lg:block mb-5 py-4 px-5 bg-white dark:bg-gray-800  hover:shadow-xl duration-200'>
+        <ul className='flex justify-center space-x-5 pb-4 cursor-pointer dark:text-gray-400 text-gray-600'>
+          {children.map((item, index) => {
+            return <li key={index} className={currentTab === index ? 'font-black border-b' : 'font-extralight'} onClick={() => { tabClickHandle(index) }}>
+              {item?.key}
+            </li>
+          })}
+        </ul>
+        {children.map((item, index) => {
+          return <section key={index} className={`tabContent ${currentTab === index ? 'block' : 'hidden'}`}>
+              {item}
+            </section>
+        })}
+      </div>}
+
+    </section>)
+}
+
+export default Tabs
diff --git a/components/Toc.js b/components/Toc.js
index 54c89ae7..8bc6877e 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -55,7 +55,7 @@ const Toc = ({ toc, targetRef }) => {
     <div className='w-full'>
       <Progress targetRef={targetRef}/>
     </div>
-    <nav className=' dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 overflow-y-auto scroll-hidden p-6'>
+    <nav className=' overflow-y-auto scroll-hidden'>
       {toc.map((tocItem) => {
         const id = uuidToId(tocItem.id)
         return (
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index 8d13ef42..5eadbc5e 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -32,7 +32,9 @@ const TocDrawer = ({ post, cRef, targetRef }) => {
             <div className='text-xl font-bold text-center text-black dark:text-white bg-white dark:bg-gray-600 py-2 px-6'>
               {locale.COMMON.TABLE_OF_CONTENTS}
             </div>
-            <Toc toc={post.toc} targetRef={targetRef}/>
+           <div className='p-6 dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800'>
+             <Toc toc={post.toc} targetRef={targetRef}/>
+           </div>
           </>
           }
       </div>
diff --git a/components/TopNav.js b/components/TopNav.js
index b87370a8..5d557007 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -1,11 +1,11 @@
 import BLOG from '@/blog.config'
 import SideBarDrawer from '@/components/SideBarDrawer'
 import { useGlobal } from '@/lib/global'
+import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import { useCallback, useEffect, useRef } from 'react'
-import Image from 'next/image'
-import { faBars } from '@fortawesome/free-solid-svg-icons'
+import SearchDrawer from './SearchDrawer'
 import throttle from 'lodash.throttle'
 
 let windowTop = 0
@@ -18,6 +18,7 @@ let windowTop = 0
 const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, autoHide = true }) => {
   const drawer = useRef()
   const { locale } = useGlobal()
+  const searchDrawer = useRef()
 
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
@@ -30,7 +31,7 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
       nav && nav.classList.replace('-top-16', 'top-0')
       windowTop = scrollS
     }
-  }, 200))
+  }, 200), [])
 
   // 监听滚动
   useEffect(() => {
@@ -42,10 +43,10 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
       autoHide && window.removeEventListener('scroll', scrollTrigger)
     }
   }, [])
-
-  return (<div id='top-nav'>
+  return (<div id='top-nav' className='sticky top-0 z-40 block lg:hidden'>
     {/* 侧面抽屉 */}
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
+    <SearchDrawer cRef={searchDrawer}/>
 
     {/* 导航栏 */}
     <div id='sticky-nav' className='flex animate__animated animate__fadeIn fixed lg:relative w-full top-0 z-20 transform duration-500'>
@@ -53,16 +54,10 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
         {/* 左侧LOGO 标题 */}
         <div className='flex flex-none flex-grow-0'>
           <div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
-               className='w-8 cursor-pointer dark:text-gray-300 block lg:hidden'>
+               className='w-8 cursor-pointer dark:text-gray-300'>
             <FontAwesomeIcon icon={faBars} size={'lg'}/>
           </div>
-          <div className='relative w-10 hidden lg:block' ><Image
-            alt={BLOG.title}
-            layout='fill'
-            loading='lazy'
-            src='/favicon.svg'
-            className='border-black'
-          /></div>
+
           <Link href='/' passHref>
             <a>
              <h1 className='cursor-pointer ml-2 w-full hover:scale-105 duration-200 transform font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{ BLOG.title }</h1>
@@ -72,15 +67,9 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
 
         {/* 右侧功能 */}
         <div className='mr-1 flex flex-nowrap flex-grow justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-        <Link href='/'>
-            <a>{locale.NAV.INDEX}</a>
-          </Link>
-          <Link href='/archive'>
-            <a>{locale.NAV.ARCHIVE}</a>
-          </Link>
-          <Link href='/about'>
-            <a>{locale.NAV.ABOUT}</a>
-          </Link>
+          <div className="cursor-pointer block lg:hidden" onClick={() => { searchDrawer?.current?.show() }}>
+            <FontAwesomeIcon icon={faSearch} className="mr-2" />{locale.NAV.SEARCH}
+          </div>
         </div>
       </div>
     </div>
diff --git a/pages/about.js b/pages/about.js
index d3f5b5d4..28301e6b 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -24,6 +24,7 @@ const About = ({ post, blockMap, tags, prev, next, allPosts, categories }) => {
     return <Custom404 />
   }
   const { locale } = useGlobal()
+  post.title = locale.NAV.ABOUT
   const meta = {
     title: `${locale.NAV.ABOUT} | ${BLOG.title} `,
     description: post.summary,
diff --git a/pages/search.js b/pages/search.js
index b2e4a0a7..f554da44 100644
--- a/pages/search.js
+++ b/pages/search.js
@@ -46,14 +46,12 @@ const Search = ({ allPosts, tags, categories }) => {
   }
   return (
     <BaseLayout meta={meta} tags={tags} totalPosts={allPosts} currentSearch={searchKey} categories={categories}>
-      <div className=''>
         <StickyBar>
-          <div className='p-4 dark:text-gray-200'><FontAwesomeIcon icon={faSearch} className='mr-1'/> 搜索词： {searchKey}</div>
+          <div className='p-4 dark:text-gray-200'><FontAwesomeIcon icon={faSearch} className='mr-1'/> {locale.NAV.SEARCH}： {searchKey}</div>
         </StickyBar>
         <div className='md:mt-5'>
          <BlogPostListScroll posts={filteredPosts} tags={tags} currentSearch={searchKey} />
         </div>
-      </div>
     </BaseLayout>
   )
 }
diff --git a/styles/globals.css b/styles/globals.css
index 7d4722a6..2b5e0411 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -151,12 +151,12 @@ nav {
 
 .glassmorphism{
   background: hsla(0, 0%, 100%, .75);
-  -webkit-backdrop-filter: blur(5px);    
-  backdrop-filter: blur(5px);   
+  -webkit-backdrop-filter: blur(10px);    
+  backdrop-filter: blur(10px);   
 }
 
 .dark .glassmorphism{
   background: rgba(31, 41, 55, .75);
-  -webkit-backdrop-filter: blur(3px);
-  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
 }
\ No newline at end of file

From f7056d86d72426d0e3e5ea6522fda229288ad8a9 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sun, 2 Jan 2022 10:10:01 +0800
Subject: [PATCH 02/12] feature: tips

---
 components/SocialButton.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/SocialButton.js b/components/SocialButton.js
index 1b94a44c..0b9cd617 100644
--- a/components/SocialButton.js
+++ b/components/SocialButton.js
@@ -24,10 +24,10 @@ const SocialButton = () => {
       {BLOG.socialLink.weibo && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.socialLink.weibo} >
         <FontAwesomeIcon icon={faWeibo} className='transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.email && <a target='_blank' rel='noreferrer' title={'weibo'} href={`mailto:${BLOG.email}`} >
+      {BLOG.email && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.email}`} >
         <FontAwesomeIcon icon={faEnvelope} className='transform hover:scale-125 duration-150'/>
       </a>}
-      <a target='_blank' rel='noreferrer' title={'weibo'} href={'/feed'} >
+      <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <FontAwesomeIcon icon={faRss} className='transform hover:scale-125 duration-150'/>
       </a>
     </div>

From ca06994d50b4d9bc50be3dd53defae9910351172 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sun, 2 Jan 2022 10:30:50 +0800
Subject: [PATCH 03/12] =?UTF-8?q?feature:=20Tabs=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Tabs.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Tabs.js b/components/Tabs.js
index 684a1a7b..0ce4a646 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -18,7 +18,7 @@ const Tabs = ({ children }) => {
   })
 
   if (count === 1) {
-    return <section>
+    return <section className='shadow'>
       {children}
     </section>
   }
@@ -31,15 +31,15 @@ const Tabs = ({ children }) => {
   return (
     <section >
       {<div className='shadow hidden lg:block mb-5 py-4 px-5 bg-white dark:bg-gray-800  hover:shadow-xl duration-200'>
-        <ul className='flex justify-center space-x-5 pb-4 cursor-pointer dark:text-gray-400 text-gray-600'>
+        <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
           {children.map((item, index) => {
-            return <li key={index} className={currentTab === index ? 'font-black border-b' : 'font-extralight'} onClick={() => { tabClickHandle(index) }}>
+            return <li key={index} className={currentTab === index ? 'font-black border-b' : 'font-extralight cursor-pointer'} onClick={() => { tabClickHandle(index) }}>
               {item?.key}
             </li>
           })}
         </ul>
         {children.map((item, index) => {
-          return <section key={index} className={`tabContent ${currentTab === index ? 'block' : 'hidden'}`}>
+          return <section key={index} className={`${currentTab === index ? 'block' : 'hidden'}`}>
               {item}
             </section>
         })}

From b06b72983f1e00d7d39437460890b4e6b1c54196 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sun, 2 Jan 2022 10:34:06 +0800
Subject: [PATCH 04/12] =?UTF-8?q?feature=EF=BC=9A=20LatestPosts=20truncate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/LatestPostsGroup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index 3b7d5b31..ffa832ab 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -36,7 +36,7 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
               <div className={ (selected ? 'text-white  bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-3 w-full ' +
                 'hover:text-white dark:hover:text-white cursor-pointer' }>
                 <FontAwesomeIcon icon={faFileAlt} className='mr-2'/>
-                {post.title}
+                <div className='truncate'>{post.title}</div>
               </div>
             </a>
           </Link>

From acea5fb8222a79f030fd11225b255c7096b04c64 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sun, 2 Jan 2022 11:08:13 +0800
Subject: [PATCH 05/12] =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js              | 2 +-
 components/ArticleDetail.js | 2 +-
 components/SideAreaLeft.js  | 2 +-
 components/SideAreaRight.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 82f93cb8..3df0b0aa 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -21,7 +21,7 @@ const BLOG = {
   showArchive: true, // WIP 是否显示归档
   autoCollapsedNavBar: false, // the automatically collapsed navigation bar
   socialLink: {
-    weibo: 'https://weibo.com/u/2245301913',
+    weibo: 'https://weibo.com/tangly1024',
     twitter: '',
     github: 'https://github.com/tangly1024',
     telegram: ''
diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index 136f5085..053c8af2 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -60,7 +60,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
                 {post.type && !post.type.includes('Page') && post?.page_cover && (
                   <div className="w-full relative md:flex-shrink-0 overflow-hidden">
                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img alt={post.title} ref={attachZoomRef}src={post?.page_cover} className='object-center' />
+                    <img alt={post.title} ref={attachZoomRef}src={post?.page_cover} className='object-center w-full' />
                   </div>
                 )}
 
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index c5bb9765..82685cb2 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -25,7 +25,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
   const postCount = posts?.length || 0
   return <>
 
-    <section className='sticky top-16 w-60'>
+    <section className='sticky top-8 w-60'>
 
       {/* 菜单 */}
       <section className='shadow hidden lg:block mb-5 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
diff --git a/components/SideAreaRight.js b/components/SideAreaRight.js
index 66a12ae6..2e365eab 100644
--- a/components/SideAreaRight.js
+++ b/components/SideAreaRight.js
@@ -61,7 +61,7 @@ const SideAreaRight = ({
 
       {/* <Analytics postCount={postCount}/> */}
 
-      <div className="sticky top-16">
+      <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'>

From 147689b78d1341d66ad2658aed1800fecec5a091 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sun, 2 Jan 2022 11:17:10 +0800
Subject: [PATCH 06/12] CDN

---
 components/Live2D.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Live2D.js b/components/Live2D.js
index d17f7dd8..625ebbd5 100644
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -22,7 +22,7 @@ function initLive2D () {
       loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
     ]).then(() => {
       // https://github.com/xiazeyu/live2d-widget-models
-      loadlive2d('live2d', 'https://raw.githubusercontent.com/xiazeyu/live2d-widget-models/master/packages/live2d-widget-model-wanko/assets/wanko.model.json')
+      loadlive2d('live2d', 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json')
     })
   }
 }

From 5a34ff2f053548e2bd6eb86a14c970b9d0f9e6f9 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sun, 2 Jan 2022 12:49:44 +0800
Subject: [PATCH 07/12] Update rss.js

---
 lib/rss.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/rss.js b/lib/rss.js
index 8f25e5fc..62297707 100644
--- a/lib/rss.js
+++ b/lib/rss.js
@@ -20,8 +20,8 @@ export function generateRss (posts) {
   posts.forEach(post => {
     feed.addItem({
       title: post.title,
-      id: `${BLOG.link}/${post.slug}`,
-      link: `${BLOG.link}/${post.slug}`,
+      id: `${BLOG.link}/article/${post.slug}`,
+      link: `${BLOG.link}/article/${post.slug}`,
       description: post.summary,
       date: new Date(post?.date?.start_date || post.createdTime)
     })

From ef3a5dffe25ca05b4449a0469cdd1d83a27503ba Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 4 Jan 2022 11:15:23 +0800
Subject: [PATCH 08/12] =?UTF-8?q?feature:=20=E6=B7=BB=E5=8A=A0=E5=A4=A7?=
 =?UTF-8?q?=E9=87=8F=E5=8F=AF=E9=85=8D=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js                    | 62 ++++++++++++++++----------
 components/ArticleCopyright.js    |  4 ++
 components/ArticleDetail.js       |  7 ++-
 components/Comment.js             | 74 ++++++++++++++++---------------
 components/CommonHead.js          |  2 +-
 components/FloatDarkModeButton.js | 14 ++++--
 components/Header.js              |  4 +-
 components/JumpToBottomButton.js  | 12 ++---
 components/JumpToTopButton.js     | 12 ++---
 components/Live2D.js              | 17 ++++---
 components/MenuButtonGroup.js     | 24 +++-------
 components/Progress.js            |  1 +
 components/RecommendPosts.js      |  3 +-
 components/ShareBar.js            |  3 ++
 components/SideAreaLeft.js        |  5 ++-
 components/SocialButton.js        |  4 +-
 components/ThirdPartyScript.js    |  8 ++--
 components/TocDrawerButton.js     | 12 +++--
 components/TopNav.js              |  4 +-
 pages/archive/index.js            |  2 +-
 pages/index.js                    |  2 +-
 21 files changed, 154 insertions(+), 122 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 3df0b0aa..94ffa390 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -4,8 +4,12 @@ const BLOG = {
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
   description: '分享编程技术与记录生活',
-  headerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页文字
-  bannerImage: './bg_image.jpg', // 首图
+  keywords: ['Notion', '写作', '博客'],
+  home: { // 首页
+    showHomeBanner: true, // 首页是否显示大图及标语 [true,false]
+    homeBannerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
+    homeBannerImage: './bg_image.jpg' // 首图
+  },
   lang: 'zh-CN', // ['zh-CN','en-US'] default lang => see /lib/lang.js for more.
   notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
@@ -17,18 +21,30 @@ const BLOG = {
   since: 2020, // if leave this empty, current year will be used.
   postsPerPage: 6, // post counts per page
   sortByDate: false,
-  showAbout: true, // WIP 是否显示关于
-  showArchive: true, // WIP 是否显示归档
-  autoCollapsedNavBar: false, // the automatically collapsed navigation bar
-  socialLink: {
-    weibo: 'https://weibo.com/tangly1024',
-    twitter: '',
-    github: 'https://github.com/tangly1024',
-    telegram: ''
+  autoCollapsedNavBar: true, // the automatically collapsed navigation bar
+  menu: { // menu config
+    showAbout: false,
+    showCategory: true,
+    showTag: true,
+    showArchive: true,
+    showSearch: true
   },
-  seo: {
-    keywords: ['Notion', '写作', '博客'],
-    googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
+  widget: {
+    showPet: false, // 是否显示宠物挂件
+    petLink: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 模型地址 @see https://github.com/xiazeyu/live2d-widget-models
+    showToTop: true,
+    showToBottom: true,
+    showDarkMode: true,
+    showToc: true,
+    showShareBar: false,
+    showRelatePosts: false,
+    showCopyRight: false
+  },
+  socialLink: { // 社交链接
+    weibo: 'https://weibo.com/tangly1024',
+    twitter: 'https://twitter.com/troy1024_1',
+    github: 'https://github.com/tangly1024',
+    telegram: 'https://t.me/tangly_1024'
   },
   analytics: {
     provider: 'ga', // Currently we support Google Analytics and Ackee, please fill with 'ga' or 'ackee', leave it empty to disable it.
@@ -41,12 +57,11 @@ const BLOG = {
       measurementId: 'G-68EK0W049N' // e.g: G-XXXXXXXXXX
     },
     baiduAnalytics: 'f683ef76f06bb187cbed5546f6f28f28', // e.g only need xxxxx -> https://hm.baidu.com/hm.js?[xxxxx]
-    busuanzi: true, // see http://busuanzi.ibruce.info/
+    busuanzi: true, // 展示网站阅读量访问数 see http://busuanzi.ibruce.info/
     cnzzAnalytics: '' // 站长统计id only need xxxxxxxx -> https://s9.cnzz.com/z_stat.php?id=[xxxxxxxx]&web_id=[xxxxxxx]
   },
-  comment: {
-    // support provider: gitalk, utterances, cusdis
-    provider: 'cusdis', // leave it empty if you don't need any comment plugin
+  comment: { //  support provider: gitalk, utterances, cusdis
+    provider: '', // leave it empty if you don't need any comment plugin
     gitalkConfig: {
       repo: 'NotionNext', // The repository of store comments
       owner: 'tangly1024',
@@ -62,14 +77,15 @@ const BLOG = {
     },
     utterancesConfig: {
       repo: 'tangly1024/NotionNext'
-    }
+    },
+    DaoVoiceId: '', // DaoVoice http://dashboard.daovoice.io/get-started
+    TidioId: '' // https://www.tidio.com/
+  },
+  seo: {
+    googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
   },
   googleAdsenseId: 'ca-pub-2708419466378217', // 谷歌广告ID
-  DaoVoiceId: '', // 在线聊天 DaoVoice http://dashboard.daovoice.io/get-started
-  TidioId: '', // 在线聊天 https://www.tidio.com/
-  isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
-  showPet: true // 详情页是否显示宠物挂件
-
+  isProd: process.env.VERCEL_ENV === 'production'// distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
 }
 // export default BLOG
 module.exports = BLOG
diff --git a/components/ArticleCopyright.js b/components/ArticleCopyright.js
index d2063055..727abec7 100644
--- a/components/ArticleCopyright.js
+++ b/components/ArticleCopyright.js
@@ -1,7 +1,11 @@
+import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 
 export default function ArticleCopyright ({ author, url }) {
+  if (!BLOG.widget?.showCopyRight) {
+    return <></>
+  }
   const { locale } = useGlobal()
   return <section className="dark:text-gray-300 mt-6">
     <div className="text-2xl mb-2">{locale.COMMON.COPYRIGHT}</div>
diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index 053c8af2..fa6d3298 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -51,9 +51,9 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   const attachZoomRef = attachZoom
 
   return (<>
-      <div id="article-wrapper" ref={targetRef} className="overflow-x-auto flex-grow max-w-5xl mx-auto w-screen md:w-full ">
+      <div id="article-wrapper" ref={targetRef} className="shadow md:hover:shadow-2xl duration-300 overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
           <article itemScope itemType="https://schema.org/Movie"
-            className="shadow md:hover:shadow-2xl duration-300 subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
+            className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-gray-800"
           >
 
             <header className='animate__slideInDown animate__animated'>
@@ -165,7 +165,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
           </article>
 
           {/* 评论互动 */}
-          <div className="mt-5 lg:px-40 md:hover:shadow-2xl duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
+          <div className="lg:px-40 md:hover:shadow-2xl duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-800">
             <Comment frontMatter={post} />
           </div>
       </div>
@@ -177,7 +177,6 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
       </div>
 
       {/* 宠物 */}
-      {BLOG.showPet && <Live2D/>}
       <Live2D/>
 
     </>)
diff --git a/components/Comment.js b/components/Comment.js
index d41d7de4..ea747509 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -26,42 +26,46 @@ const Comment = ({ frontMatter }) => {
   const router = useRouter()
   const { theme } = useGlobal()
 
-  return <div className='comment text-gray-800 dark:text-gray-300'>
-    {BLOG.comment.provider === 'gitalk' && (<div className='m-10'>
-      <GitalkComponent
-        options={{
-          id: frontMatter.id,
-          title: frontMatter.title,
-          clientID: BLOG.comment.gitalkConfig.clientID,
-          clientSecret: BLOG.comment.gitalkConfig.clientSecret,
-          repo: BLOG.comment.gitalkConfig.repo,
-          owner: BLOG.comment.gitalkConfig.owner,
-          admin: BLOG.comment.gitalkConfig.admin,
-          distractionFreeMode: BLOG.comment.gitalkConfig.distractionFreeMode
-        }}
-      />
-    </div>)}
-    {BLOG.comment.provider === 'utterances' && (<div className='m-10'>
-      <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-    </div>
-    )}
-    {BLOG.comment.provider === 'cusdis' && (<>
-      <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
-      <div className='m-10'>
-        <CusdisComponent
-          attrs={{
-            host: BLOG.comment.cusdisConfig.host,
-            appId: BLOG.comment.cusdisConfig.appId,
-            pageId: frontMatter.id,
-            pageTitle: frontMatter.title,
-            pageUrl: BLOG.link + router.asPath,
-            theme: theme
-          }}
-          lang={BLOG.lang.toLowerCase()}
-        />
+  return (
+    BLOG.comment.provider !== '' && (
+      <div className='comment mt-5 text-gray-800 dark:text-gray-300'>
+        {BLOG.comment.provider === 'gitalk' && (<div className='m-10'>
+          <GitalkComponent
+            options={{
+              id: frontMatter.id,
+              title: frontMatter.title,
+              clientID: BLOG.comment.gitalkConfig.clientID,
+              clientSecret: BLOG.comment.gitalkConfig.clientSecret,
+              repo: BLOG.comment.gitalkConfig.repo,
+              owner: BLOG.comment.gitalkConfig.owner,
+              admin: BLOG.comment.gitalkConfig.admin,
+              distractionFreeMode: BLOG.comment.gitalkConfig.distractionFreeMode
+            }}
+          />
+        </div>)}
+        {BLOG.comment.provider === 'utterances' && (<div className='m-10'>
+          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+        </div>
+        )}
+        {BLOG.comment.provider === 'cusdis' && (<>
+          <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
+          <div className='m-10'>
+            <CusdisComponent
+              attrs={{
+                host: BLOG.comment.cusdisConfig.host,
+                appId: BLOG.comment.cusdisConfig.appId,
+                pageId: frontMatter.id,
+                pageTitle: frontMatter.title,
+                pageUrl: BLOG.link + router.asPath,
+                theme: theme
+              }}
+              lang={BLOG.lang.toLowerCase()}
+            />
+          </div>
+        </>)}
       </div>
-    </>)}
-  </div>
+    )
+  )
 }
 
 export default Comment
diff --git a/components/CommonHead.js b/components/CommonHead.js
index eb18780b..784795a0 100644
--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -9,7 +9,7 @@ const CommonHead = ({ meta }) => {
   const title = meta?.title || BLOG.title
   const description = meta?.description || BLOG.description
   const type = meta?.type || 'website'
-  const keywords = meta?.tags || BLOG.seo.keywords
+  const keywords = meta?.tags || BLOG.keywords
 
   return <Head>
     <title>{title}</title>
diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js
index 077e904a..63ae157e 100644
--- a/components/FloatDarkModeButton.js
+++ b/components/FloatDarkModeButton.js
@@ -2,8 +2,12 @@ import { useEffect, useState } from 'react'
 import { loadUserThemeFromCookies, saveTheme, useGlobal } from '@/lib/global'
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import BLOG from '@/blog.config'
 
 export default function FloatDarkModeButton () {
+  if (!BLOG.widget?.showDarkMode) {
+    return <></>
+  }
   const [show, switchShow] = useState(false)
   const scrollListener = () => {
     const scrollY = window.pageYOffset
@@ -13,9 +17,10 @@ export default function FloatDarkModeButton () {
     }
   }
   useEffect(() => {
+    scrollListener()
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
-  })
+  }, [show])
 
   const { changeTheme } = useGlobal()
   const userTheme = loadUserThemeFromCookies()
@@ -31,11 +36,12 @@ export default function FloatDarkModeButton () {
 
   return (
     <div
+      id='float-dark-mode-button'
       onClick={handleChangeDarkMode}
       className={
-        (show ? '' : 'hidden lg:block') +
-        ' animate__fadeInRight  px-3.5 py-3 animate__animated animate__faster shadow-card fixed right-3 bottom-24 z-10 duration-200 text-xs cursor-pointer rounded-xl' +
-        ' text-black shadow-card dark:border-gray-500 glassmorphism dark:bg-gray-700 dark:text-gray-200'
+        (show ? '' : ' hidden ') +
+        ' animate__fadeInRight animate__animated animate__faster  fixed right-1 bottom-28 z-10 duration-500 text-xs cursor-pointer ' +
+        ' text-black dark:border-gray-500 flex justify-center items-center w-8 h-8 glassmorphism dark:bg-gray-700 dark:text-gray-200'
       }
     >
       <FontAwesomeIcon
diff --git a/components/Header.js b/components/Header.js
index 7b9bdacb..7170f85e 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -19,7 +19,7 @@ export default function Header () {
     if (!typed && window && document.getElementById('typed')) {
       changeType(
         new Typed('#typed', {
-          strings: BLOG.headerStrings,
+          strings: BLOG.home.homeBannerStrings,
           typeSpeed: 200,
           backSpeed: 100,
           backDelay: 400,
@@ -99,7 +99,7 @@ export default function Header () {
       className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black"
       style={{
         backgroundImage:
-          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${BLOG.bannerImage}")`
+          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${BLOG.home.homeBannerImage}")`
       }}
     >
       <div className="absolute flex h-full items-center lg:-mt-14 justify-center w-full text-4xl md:text-7xl text-white">
diff --git a/components/JumpToBottomButton.js b/components/JumpToBottomButton.js
index 7b87eaf1..591f9eab 100644
--- a/components/JumpToBottomButton.js
+++ b/components/JumpToBottomButton.js
@@ -1,3 +1,4 @@
+import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -13,6 +14,9 @@ import smoothscroll from 'smoothscroll-polyfill'
  * @constructor
  */
 const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
+  if (!BLOG.widget?.showToBottom) {
+    return <></>
+  }
   const { locale } = useGlobal()
   const [show, switchShow] = useState(false)
   const [percent, changePercent] = useState(0)
@@ -36,15 +40,13 @@ const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div id='jump-to-top' className='right-3 fixed flex bottom-36 duration-500 z-20'>
+  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 animate__animated animate__faster shadow-card rounded-xl glassmorphism py-3 cursor-pointer '}>
-        <div className='text-center'>
-        <div className='w-10 dark:text-gray-200 transform hover:scale-150 duration-200 text-xs' title={locale.POST.TOP} >
+        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} >
           <FontAwesomeIcon icon={faArrowDown} />
         </div>
           {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
-        </div>
       </div>
     </div>)
 }
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index a1d4454b..47601e7d 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
 import smoothscroll from 'smoothscroll-polyfill'
+import BLOG from '@/blog.config'
 
 /**
  * 跳转到网页顶部
@@ -13,6 +14,9 @@ import smoothscroll from 'smoothscroll-polyfill'
  * @constructor
  */
 const JumpToTopButton = ({ targetRef, showPercent = false }) => {
+  if (!BLOG.widget?.showToTop) {
+    return <></>
+  }
   const { locale } = useGlobal()
   const [show, switchShow] = useState(false)
   const [percent, changePercent] = useState(0)
@@ -37,15 +41,13 @@ const JumpToTopButton = ({ targetRef, showPercent = false }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div id='jump-to-top' className='right-3 fixed flex bottom-48 duration-500 z-20'>
+  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 animate__animated animate__faster shadow-card rounded-xl glassmorphism py-3 cursor-pointer '}>
-        <div className='text-center'>
-        <div className='w-10 dark:text-gray-200 transform hover:scale-150 duration-200 text-xs' title={locale.POST.TOP} >
+        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} >
           <FontAwesomeIcon icon={faArrowUp} />
         </div>
           {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
-        </div>
       </div>
     </div>)
 }
diff --git a/components/Live2D.js b/components/Live2D.js
index 625ebbd5..eef9f7e2 100644
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -1,15 +1,14 @@
 /* eslint-disable no-undef */
-import { useEffect } from 'react'
+import BLOG from '@/blog.config'
 
 let hasLoad = false
 export default function Live2D () {
-  useEffect(() => {
-    if (window && !hasLoad) {
-      initLive2D()
-      hasLoad = true
-    }
-  })
-  return <div className='fixed right-0 bottom-0 hidden md:block lg:mr-24 2xl:mr-48 z-20'>
+  if (BLOG.widget?.showPet && typeof window !== 'undefined' && !hasLoad) {
+    initLive2D()
+    hasLoad = true
+  }
+
+  return <div className='fixed right-0 bottom-0 hidden md:block lg:mr-24 2xl:mr-40 z-20'>
     <canvas id="live2d"className='animate__slideInLeft animate__animated' width="280" height="250"></canvas>
   </div>
 }
@@ -22,7 +21,7 @@ function initLive2D () {
       loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
     ]).then(() => {
       // https://github.com/xiazeyu/live2d-widget-models
-      loadlive2d('live2d', 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json')
+      loadlive2d('live2d', BLOG.widget.petLink)
     })
   }
 }
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 19b276fb..9216b8b1 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArchive, faHome, faTag, faThList } from '@fortawesome/free-solid-svg-icons'
+import { faArchive, faHome, faInfoCircle, faTag, faThList } from '@fortawesome/free-solid-svg-icons'
 import BLOG from 'blog.config'
 
 const MenuButtonGroup = ({ allowCollapse = false }) => {
@@ -11,21 +11,12 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
   const router = useRouter()
   const links = [
     { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.showArchive },
-    { id: 2, icon: faThList, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.showArchive },
-    { id: 3, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.showArchive }
-    // { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout }
-    // { id: 7, icon: 'faGithub', name: 'Github', to: 'https://github.com/tangly1024', show: true },
-    // { id: 5, icon: 'faWeibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
-    // { id: 4, icon: 'faEnvelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }
-    // { id: 2, icon: 'faRssSquare', name: locale.NAV.RSS, to: '/feed', show: true },
-    // { id: 3, icon: 'faCompass', name: '发现', to: 'https://search.tangly1024.com/', show: true }
-    // { id: 6, icon: 'faMapMarker', name: 'Fuzhou', to: '#', show: true },
-    // { id: 8, icon: 'faTwitter', name: 'Twitter', to: 'https://twitter.com/troy1024_1', show: true },
-    // { id: 9, icon: 'faTelegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true }
+    { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.menu.showArchive },
+    { id: 2, icon: faThList, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory },
+    { id: 3, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag },
+    { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/about', show: BLOG.menu.showAbout }
   ]
-  return <nav id='nav'>
-    <div className='leading-8 text-gray-500 dark:text-gray-400 '>
+  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 '>
       {links.map(link => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
@@ -42,7 +33,6 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
           return <></>
         }
       })}
-    </div>
-  </nav>
+    </nav>
 }
 export default MenuButtonGroup
diff --git a/components/Progress.js b/components/Progress.js
index daa60a9a..23ced0be 100644
--- a/components/Progress.js
+++ b/components/Progress.js
@@ -14,6 +14,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
       const fullHeight = clientHeight - window.outerHeight
       let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
       if (per > 100) per = 100
+      if (per < 0) per = 0
       changePercent(per)
     }
   }
diff --git a/components/RecommendPosts.js b/components/RecommendPosts.js
index f3aeb7c1..ac6b8d7a 100644
--- a/components/RecommendPosts.js
+++ b/components/RecommendPosts.js
@@ -1,12 +1,13 @@
 import React from 'react'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
 
 /**
  * 展示文章推荐
  */
 const RecommendPosts = ({ recommendPosts }) => {
-  if (!recommendPosts || recommendPosts.length < 1) {
+  if (!BLOG.widget?.showRelatePosts || !recommendPosts || recommendPosts.length < 1) {
     return <></>
   }
   const { locale } = useGlobal()
diff --git a/components/ShareBar.js b/components/ShareBar.js
index 7830d754..b07b3f22 100644
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -17,6 +17,9 @@ import {
 import { faLink } from '@fortawesome/free-solid-svg-icons'
 
 const ShareBar = ({ post }) => {
+  if (!BLOG.widget?.showShareBar) {
+    return <></>
+  }
   const router = useRouter()
   const shareUrl = BLOG.link + router.asPath
 
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index 82685cb2..2b1c4a81 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -6,6 +6,7 @@ import { useGlobal } from '@/lib/global'
 import React from 'react'
 import Analytics from './Analytics'
 import Tabs from '@/components/Tabs'
+import BLOG from '@/blog.config'
 
 /**
  * 侧边平铺
@@ -30,9 +31,9 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
       {/* 菜单 */}
       <section className='shadow hidden lg:block mb-5 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
         <MenuButtonGroup allowCollapse={true} />
-        <div className='px-5 pt-2'>
+        {BLOG.menu.showSearch && <div className='px-5 pt-2'>
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
-        </div>
+        </div>}
       </section>
 
       <Tabs>
diff --git a/components/SocialButton.js b/components/SocialButton.js
index 0b9cd617..f97f71fe 100644
--- a/components/SocialButton.js
+++ b/components/SocialButton.js
@@ -10,8 +10,8 @@ import React from 'react'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-52 justify-center flex'>
-    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 px-6'>
+  return <div className='w-52 justify-center flex-wrap flex'>
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 '>
       {BLOG.socialLink.github && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.socialLink.github} >
         <FontAwesomeIcon icon={faGithub} className='transform hover:scale-125 duration-150'/>
       </a>}
diff --git a/components/ThirdPartyScript.js b/components/ThirdPartyScript.js
index c30d3c2e..f3a79c12 100644
--- a/components/ThirdPartyScript.js
+++ b/components/ThirdPartyScript.js
@@ -7,7 +7,7 @@ import BLOG from '@/blog.config'
  */
 const ThirdPartyScript = () => {
   return (<>
-    {BLOG.DaoVoiceId && (<>
+    {BLOG.comment?.DaoVoiceId && (<>
       {/* DaoVoice 反馈 */}
       <script async dangerouslySetInnerHTML={{
         __html: `
@@ -18,7 +18,7 @@ const ThirdPartyScript = () => {
       <script async dangerouslySetInnerHTML={{
         __html: `
                  daovoice('init', {
-                    app_id: "${BLOG.DaoVoiceId}"
+                    app_id: "${BLOG.comment.DaoVoiceId}"
                   });
                   daovoice('update');
                   `
@@ -30,10 +30,10 @@ const ThirdPartyScript = () => {
     {BLOG.googleAdsenseId && (<script data-ad-client={BLOG.googleAdsenseId} async
               src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>)}
 
-    {BLOG.TidioId && (<>
+    {BLOG.comment?.TidioId && (<>
       {/* Tidio在线反馈 */}
       <script async
-              src={`//code.tidio.co/${BLOG.TidioId}.js`}
+              src={`//code.tidio.co/${BLOG.comment.TidioId}.js`}
       />
     </>)}
 
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index f0ea1386..3d23ef1a 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faListOl } from '@fortawesome/free-solid-svg-icons'
+import BLOG from '@/blog.config'
 
 /**
  * 点击召唤目录抽屉
@@ -11,6 +12,9 @@ import { faListOl } from '@fortawesome/free-solid-svg-icons'
  * @constructor
  */
 const TocDrawerButton = (props) => {
+  if (!BLOG.widget?.showToc) {
+    return <></>
+  }
   const { locale } = useGlobal()
   const [show, switchShow] = useState(false)
   const scrollListener = () => {
@@ -27,10 +31,10 @@ const TocDrawerButton = (props) => {
   })
 
   return (
-    <div id='toc-drawer-button' className='right-3 fixed bottom-60 duration-500 z-20'>
-        <div onClick={props.onClick} className={(show ? 'animate__fadeInRight' : 'hidden') + ' py-3 px-3.5 animate__animated glassmorphism rounded-xl cursor-pointer shadow-card' }>
-            <div className='dark:text-gray-200 text-center transform hover:scale-150 duration-200 text-xs' title={locale.POST.TOP} >
-              <FontAwesomeIcon icon={faListOl} />
+    <div id='toc-drawer-button' className='right-1 fixed bottom-52 duration-500 z-20'>
+        <div onClick={props.onClick} className={(show ? 'animate__fadeInRight' : 'hidden') + ' animate__animated glassmorphism cursor-pointer' }>
+            <div className='dark:text-gray-200 text-center transform hover:scale-150 duration-200 text-xs flex justify-center items-center w-8 h-8' title={locale.POST.TOP} >
+              <FontAwesomeIcon icon={faListOl}/>
             </div>
         </div>
     </div>
diff --git a/components/TopNav.js b/components/TopNav.js
index 5d557007..58eb5832 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -35,12 +35,12 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
 
   // 监听滚动
   useEffect(() => {
-    if (autoHide) {
+    if (BLOG.autoCollapsedNavBar) {
       scrollTrigger()
       window.addEventListener('scroll', scrollTrigger)
     }
     return () => {
-      autoHide && window.removeEventListener('scroll', scrollTrigger)
+      BLOG.autoCollapsedNavBar && window.removeEventListener('scroll', scrollTrigger)
     }
   }, [])
   return (<div id='top-nav' className='sticky top-0 z-40 block lg:hidden'>
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 47ab9f59..1d4c1550 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -75,7 +75,7 @@ const Index = ({ allPosts, tags, categories }) => {
              <BlogPostArchive key={archiveTitle} posts={archivePosts[archiveTitle]} archiveTitle={archiveTitle}/>
           ))}
         </div>
-        {BLOG.showPet && <Live2D/>}
+        <Live2D/>
     </BaseLayout>
   )
 }
diff --git a/pages/index.js b/pages/index.js
index 198c6e26..0780e76a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -31,7 +31,7 @@ export async function getStaticProps () {
 const Index = ({ allPosts, tags, meta, categories }) => {
   return (
     <BaseLayout
-      headerSlot={<Header />}
+      headerSlot={BLOG.home.showHomeBanner && <Header />}
       meta={meta}
       tags={tags}
       totalPosts={allPosts}

From 36912041cb5daf830a09ef9ac533a7027d2d0c6c Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 4 Jan 2022 11:18:31 +0800
Subject: [PATCH 09/12] =?UTF-8?q?bugfix:=20=E8=8F=9C=E5=8D=95key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MenuButtonGroup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 9216b8b1..5dc10959 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -14,7 +14,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
     { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.menu.showArchive },
     { id: 2, icon: faThList, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory },
     { id: 3, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag },
-    { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/about', show: BLOG.menu.showAbout }
+    { id: 4, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/about', show: BLOG.menu.showAbout }
   ]
   return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 '>
       {links.map(link => {

From 72f0a0b5899ff0d523d0fd7fec74d6f0e0a2cefb Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 4 Jan 2022 11:22:41 +0800
Subject: [PATCH 10/12] =?UTF-8?q?feature:=20=E5=85=BC=E5=AE=B9=E7=A9=BA?=
 =?UTF-8?q?=E7=9A=84slug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/notion/getAllPosts.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/notion/getAllPosts.js b/lib/notion/getAllPosts.js
index e3d83594..8cd43e34 100644
--- a/lib/notion/getAllPosts.js
+++ b/lib/notion/getAllPosts.js
@@ -29,6 +29,7 @@ export async function getAllPosts ({ notionPageData, from, includePage = false }
   for (let i = 0; i < pageIds.length; i++) {
     const id = pageIds[i]
     const properties = (await getPageProperties(id, pageBlock, schema)) || null
+    properties.slug = properties.slug ?? properties.id
     properties.createdTime = new Date(pageBlock[id].value?.created_time).toString()
     properties.lastEditedTime = new Date(pageBlock[id].value?.last_edited_time).toString()
     properties.fullWidth = pageBlock[id].value?.format?.page_full_width ?? false

From d30731ff8af03d4d3177b1ce9b9cf4e344e01e04 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 4 Jan 2022 11:34:54 +0800
Subject: [PATCH 11/12] =?UTF-8?q?feature:=20=E5=8F=B3=E8=BE=B9=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=8F=AF=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js                   |  7 ++--
 components/JumpToBottomButton.js |  2 +-
 components/JumpToTopButton.js    |  2 +-
 components/SideAreaLeft.js       |  4 +--
 components/SideAreaRight.js      | 56 ++++++++++----------------------
 layouts/BaseLayout.js            |  8 ++---
 6 files changed, 28 insertions(+), 51 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 94ffa390..09582ff9 100644
--- 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',
diff --git a/components/JumpToBottomButton.js b/components/JumpToBottomButton.js
index 591f9eab..a72976a9 100644
--- 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>)}
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index 47601e7d..7512d93f 100644
--- 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>)}
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index 2b1c4a81..a8f84100 100644
--- 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
diff --git a/components/SideAreaRight.js b/components/SideAreaRight.js
index 2e365eab..408159a0 100644
--- 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
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 9142215a..c8017807 100644
--- 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}/>

From 1f705ec3e33ff5bbeb25c3e1e98af4f2333c1338 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 4 Jan 2022 11:35:59 +0800
Subject: [PATCH 12/12] =?UTF-8?q?feature:=20=E6=96=87=E7=AB=A0=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E6=9C=80=E5=A4=A7=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/BaseLayout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index c8017807..f994b1a6 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -55,7 +55,7 @@ const BaseLayout = ({
 
       <main id='wrapper' className='flex justify-center flex-1 mx-auto md:pt-14 pb-12'>
           <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}>
+          <section id='center' className='flex-grow mt-14 md:mt-0 max-w-5xl min-h-screen' ref={targetRef}>
             {onLoading
               ? <LoadingCover/>
               : <>