feature:

添加大量可配置项
2026-05-18 23:16:49 +00:00 · 2022-01-04 11:15:23 +08:00
parent 5a34ff2f05
commit ef3a5dffe2
21 changed files with 154 additions and 122 deletions
--- 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,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/>

    </>)
--- 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,
@@ -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">
--- 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>)
 }
--- 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>)
 }
--- 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)
    })
  }
 }
--- 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
--- 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)
    }
  }
--- 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/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
@@ -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>
--- 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>}
--- 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/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
@@ -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'>