Merge pull request #6 from tangly1024/theme-Next

Theme next
2026-05-14 15:09:22 +00:00 · 2022-01-04 11:36:42 +08:00
parent 2203d1a5c9 1f705ec3e3
commit cb980d0c8a
35 changed files with 331 additions and 234 deletions
--- 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: false, // 首页是否显示大图及标语 [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,13 +21,33 @@ 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: 'https://weibo.com/u/2245301913',
-  seo: {
-    keywords: ['Notion', '写作', '博客'],
-    googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
+  autoCollapsedNavBar: true, // the automatically collapsed navigation bar
+  menu: { // menu config
+    showAbout: false,
+    showCategory: true,
+    showTag: true,
+    showArchive: true,
+    showSearch: true
+  },
+  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,
+    showLatestPost: false,
+    showCategoryList: false,
+    showTagList: 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.
@@ -36,12 +60,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',
@@ -57,14 +80,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
--- 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>
--- 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>
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -51,16 +51,16 @@ 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'>
                {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>
                )}

@@ -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/>

    </>)
--- 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
--- 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>
--- 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
--- 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,
@@ -96,10 +96,10 @@ 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}")`
+          `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">
--- 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>
  </>
 }
--- 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 duration-200' title={locale.POST.TOP} >
          <FontAwesomeIcon icon={faArrowDown} />
        </div>
          {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
-        </div>
      </div>
    </div>)
 }
--- 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 duration-200' title={locale.POST.TOP} >
          <FontAwesomeIcon icon={faArrowUp} />
        </div>
          {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
-        </div>
      </div>
    </div>)
 }
--- 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>
--- 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 left-0 bottom-0 hidden md:block lg:ml-24 2xl:ml-36'>
+  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://raw.githubusercontent.com/xiazeyu/live2d-widget-models/master/packages/live2d-widget-model-wanko/assets/wanko.model.json')
+      loadlive2d('live2d', BLOG.widget.petLink)
    })
  }
 }
--- 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, faInfoCircle, faTag, faThList } from '@fortawesome/free-solid-svg-icons'
 import BLOG from 'blog.config'

 const MenuButtonGroup = ({ allowCollapse = false }) => {
@@ -11,19 +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: 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: 4, 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)
@@ -40,7 +33,6 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
          return <></>
        }
      })}
-    </div>
-  </nav>
+    </nav>
 }
 export default MenuButtonGroup
--- 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) {
@@ -14,6 +14,7 @@ const Progress = ({ targetRef }) => {
      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)
    }
  }
@@ -24,9 +25,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
--- 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()
--- a/components/SearchDrawer.js
+++ 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
--- 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

--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -5,6 +5,8 @@ import Toc from '@/components/Toc'
 import { useGlobal } from '@/lib/global'
 import React from 'react'
 import Analytics from './Analytics'
+import Tabs from '@/components/Tabs'
+import BLOG from '@/blog.config'

 /**
 * 侧边平铺
@@ -22,37 +24,33 @@ 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={(!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-8 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'>
+        {BLOG.menu.showSearch && <div className='px-5 pt-2'>
           <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
-        </div>
+        </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>
-    )}
-
- </>
+ </aside>
 }
 export default SideAreaLeft
--- a/components/SideAreaRight.js
+++ b/components/SideAreaRight.js
@@ -1,11 +1,12 @@
+import BLOG from '@/blog.config'
 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 { 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 '@/components/CategoryGroup'
+import CategoryGroup from './CategoryGroup'
+import TagGroups from './TagGroups'

 /**
 * 侧边平铺
@@ -31,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">
        {/* 展示广告  */}
@@ -62,26 +52,16 @@ 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>
@@ -90,7 +70,7 @@ const SideAreaRight = ({
        )}

        {/* 最新文章 */}
-        {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">
@@ -103,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">
@@ -129,7 +104,7 @@ const SideAreaRight = ({
         )}

      </div>
-    </>
+    </aside>
  )
 }
 export default SideAreaRight
--- 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'>
-    <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'} >
+  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>
-      <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={'email'} href={`mailto:${BLOG.email}`} >
+        <FontAwesomeIcon icon={faEnvelope} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+        <FontAwesomeIcon icon={faRss} className='transform hover:scale-125 duration-150'/>
      </a>
    </div>
  </div>
--- a/components/Tabs.js
+++ 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 className='shadow'>
+      {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 dark:text-gray-400 text-gray-600'>
+          {children.map((item, 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={`${currentTab === index ? 'block' : 'hidden'}`}>
+              {item}
+            </section>
+        })}
+      </div>}
+
+    </section>)
+}
+
+export default Tabs
--- 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`}
      />
    </>)}

--- 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 (
--- 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>
--- 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>
--- 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,22 +31,22 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
      nav && nav.classList.replace('-top-16', 'top-0')
      windowTop = scrollS
    }
-  }, 200))
+  }, 200), [])

  // 监听滚动
  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'>
+  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>
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -54,10 +54,8 @@ 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>
-          <section id='center' className='flex-grow mt-14 md:mt-0 max-w-4xl min-h-screen' ref={targetRef}>
+          <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-5xl 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}/>
--- 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
--- 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)
    })
--- 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,
--- 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>
  )
 }
--- 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}
--- 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>
  )
 }
--- 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);
 }