refactor: NEXT 主题配置规整

2026-05-13 23:16:47 +00:00 · 2022-01-16 09:23:00 +08:00
parent 8be7389462
commit 4909557397
26 changed files with 132 additions and 316 deletions
--- a/blog.config.js
+++ b/blog.config.js
@@ -6,15 +6,6 @@ const BLOG = {
  email: 'tlyong1992@hotmail.com', // 联系邮箱
  link: 'https://tangly1024.com', // 网站地址
  keywords: ['Notion', '写作', '博客'], // 网站关键词
-  home: { // 首页
-    showHomeBanner: false, // 首页是否显示大图及标语 [true,false]
-    homeBannerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
-    homeBannerImage: './bg_image.jpg', // 背景图地址
-    showPostCover: false, // 文章列表显示封面图
-    showPreview: true, // 列表展示文章预览
-    previewLines: 12, // 预览文章的篇幅
-    showSummary: false // 显示用户自定义摘要
-  },
  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
@@ -26,29 +17,8 @@ const BLOG = {
  since: 2020, // if leave this empty, current year will be used.
  postListStyle: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
  postsPerPage: 6, // post counts per page
+  previewLines: 12, // 预览博客行数
  sortByDate: false,
-  topNavType: 'normal', // ['fixed','autoCollapse','normal'] 分别是固定顶部、固定底部滑动时自动折叠，不固定
-  menu: { // 菜单栏设置
-    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: false, // 显示回底
-    showDarkMode: false, // 显示日间/夜间模式切换
-    showToc: true, // 移动端显示悬浮目录
-    showShareBar: false, // 文章分享功能
-    showRelatePosts: true, // 相关文章推荐
-    showCopyRight: true, // 文章版权声明
-    showLatestPost: false, // 右侧边栏显示最近更新
-    showCategoryList: false, // 右侧边栏显示文章分类列表
-    showTagList: false // 右侧边栏显示标签分类列表
-  },
  socialLink: { // 社交链接，如不需要展示可以留空白，例如 weibo:''
    weibo: 'https://weibo.com/tangly1024',
    twitter: 'https://twitter.com/troy1024_1',
--- a/pages/index.js
+++ b/pages/index.js
@@ -28,7 +28,7 @@ export async function getStaticProps () {
    )
    for (const i in postsToShow) {
      const post = postsToShow[i]
-      const blockMap = await getPostBlocks(post.id, 'slug', BLOG.home.previewLines)
+      const blockMap = await getPostBlocks(post.id, 'slug', BLOG.previewLines)
      if (blockMap) {
        post.blockMap = blockMap
      }
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -44,7 +44,7 @@ export async function getStaticProps ({ params: { page } }) {

  for (const i in postsToShow) {
    const post = postsToShow[i]
-    const blockMap = await getPostBlocks(post.id, 'slug', BLOG.home.previewLines)
+    const blockMap = await getPostBlocks(post.id, 'slug', BLOG.previewLines)
    if (blockMap) {
      post.blockMap = blockMap
    }
--- a/themes/NEXT/LayoutBase.js
+++ b/themes/NEXT/LayoutBase.js
@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import CommonHead from '@/components/CommonHead'
 import FloatDarkModeButton from './components/FloatDarkModeButton'
 import Footer from './components/Footer'
@@ -12,6 +11,7 @@ import { useGlobal } from '@/lib/global'
 import PropTypes from 'prop-types'
 import React, { useEffect, useRef, useState } from 'react'
 import smoothscroll from 'smoothscroll-polyfill'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -79,7 +79,7 @@ const LayoutBase = ({

      <main id='wrapper' className='flex justify-center flex-1 pb-12'>
          <SideAreaLeft targetRef={targetRef} post={post} postCount={postCount} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
-          <section id='center' className={`${BLOG.topNavType !== 'normal' ? 'mt-14' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full`} ref={targetRef}>
+          <section id='center' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'mt-40' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full`} ref={targetRef}>
            {onLoading
              ? <LoadingCover/>
              : <>
--- a/themes/NEXT/LayoutIndex.js
+++ b/themes/NEXT/LayoutIndex.js
@@ -4,7 +4,7 @@ import LatestPostsGroup from './components/LatestPostsGroup'
 import Card from './components/Card'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
-import { CONFIG_NEXT } from './index'
+import CONFIG_NEXT from './config_next'

 export const LayoutIndex = ({ posts, tags, meta, categories, postCount, latestPosts }) => {
  return <LayoutBase
@@ -18,7 +18,7 @@ export const LayoutIndex = ({ posts, tags, meta, categories, postCount, latestPo
    postCount={postCount}
    categories={categories}
  >
-    {CONFIG_NEXT.POSTS_LIST_TYPE !== 'page'
+    {CONFIG_NEXT.POST_LIST_TYPE !== 'page'
      ? (
        <BlogPostListScroll posts={posts} tags={tags} showSummary={true} />
        )
--- a/themes/NEXT/LayoutPage.js
+++ b/themes/NEXT/LayoutPage.js
@@ -1,7 +1,7 @@
 import LayoutBase from './LayoutBase'
 import LatestPostsGroup from './components/LatestPostsGroup'
 import BlogPostListPage from './components/BlogPostListPage'
-import { CONFIG_NEXT } from './index'
+import CONFIG_NEXT from './config_next'

 export const LayoutPage = ({ page, posts, tags, meta, categories, postCount, latestPosts }) => {
  return (
--- a/themes/NEXT/LayoutSlug.js
+++ b/themes/NEXT/LayoutSlug.js
@@ -14,7 +14,7 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
-import { CONFIG_NEXT } from './index'
+import CONFIG_NEXT from './config_next'

 export const LayoutSlug = ({
  post,
--- a/themes/NEXT/components/ArticleCopyright.js
+++ b/themes/NEXT/components/ArticleCopyright.js
@@ -1,9 +1,9 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 export default function ArticleCopyright ({ author, url }) {
-  if (!BLOG.widget?.showCopyRight) {
+  if (!CONFIG_NEXT.ARTICLE_COPYRIGHT) {
    return <></>
  }
  const { locale } = useGlobal()
@@ -11,7 +11,7 @@ export default function ArticleCopyright ({ author, url }) {
    <ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-700 bg-gray-100 p-5 leading-8 border-l-2 border-blue-500">
      <li>
        <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
-        <Link href="/about">
+        <Link href={'/about'} >
          <a className="hover:underline">{author}</a>
        </Link>
      </li>
--- a/themes/NEXT/components/BlogPostCard.js
+++ b/themes/NEXT/components/BlogPostCard.js
@@ -8,10 +8,11 @@ import React from 'react'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
 import Card from './Card'
 import TagItemMini from './TagItemMini'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 const BlogPostCard = ({ post, showSummary }) => {
  const { locale } = useGlobal()
-  const showPreview = BLOG.home?.showPreview && post.blockMap
+  const showPreview = CONFIG_NEXT.POST_LIST_PREVIEW && post.blockMap
  return (
    <Card className='w-full'>
       <div key={post.id} className='animate__animated animate__fadeIn flex flex-col-reverse justify-between duration-300'>
@@ -67,7 +68,7 @@ const BlogPostCard = ({ post, showSummary }) => {
        </div>
      </div>

-      {BLOG.home?.showPostCover && post?.page_cover && (
+      {CONFIG_NEXT.POST_LIST_COVER && post?.page_cover && (
        <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
        <div className='h-72 w-full relative duration-200 cursor-pointer transform overflow-hidden'>
          <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
--- a/themes/NEXT/components/BlogPostListScroll.js
+++ b/themes/NEXT/components/BlogPostListScroll.js
@@ -4,16 +4,16 @@ import BlogPostListEmpty from '@/themes/NEXT/components/BlogPostListEmpty'
 import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 /**
 * 博客列表滚动分页
 * @param posts 所有文章
 * @param tags 所有标签
- * @param targetRef 指向父容器，用于计算下拉滚动的高度
 * @returns {JSX.Element}
 * @constructor
 */
-const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home.showSummary }) => {
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_NEXT.POST_LIST_SUMMARY }) => {
  const postsPerPage = BLOG.postsPerPage
  const [page, updatePage] = useState(1)
  const postsToShow = getPostByPage(page, posts, postsPerPage)
--- a/themes/NEXT/components/FloatDarkModeButton.js
+++ b/themes/NEXT/components/FloatDarkModeButton.js
@@ -1,11 +1,11 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme'
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 export default function FloatDarkModeButton () {
-  if (!BLOG.widget?.showDarkMode) {
+  if (!CONFIG_NEXT.WIDGET_DARK_MODE) {
    return <></>
  }

--- a/themes/NEXT/components/Header.js
+++ b/themes/NEXT/components/Header.js
@@ -1,9 +1,9 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 let wrapperTop = 0
 let windowTop = 0
@@ -19,7 +19,7 @@ export default function Header () {
    if (!typed && window && document.getElementById('typed')) {
      changeType(
        new Typed('#typed', {
-          strings: BLOG.home.homeBannerStrings,
+          strings: CONFIG_NEXT.HOME_BANNER_Strings,
          typeSpeed: 200,
          backSpeed: 100,
          backDelay: 400,
@@ -41,7 +41,7 @@ export default function Header () {
  const scrollTrigger = () => {
    if (
      (window.scrollY > windowTop) &
-      (window.scrollY < window.innerHeight) &
+      (window.scrollY < window.innerHeight) &&
      !autoScroll
    ) {
      autoScroll = true
@@ -50,7 +50,7 @@ export default function Header () {
    }
    if (
      (window.scrollY < windowTop) &
-      (window.scrollY < window.innerHeight) &
+      (window.scrollY < window.innerHeight) &&
      !autoScroll
    ) {
      autoScroll = true
@@ -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.home.homeBannerImage}")`
+          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${CONFIG_NEXT.HOME_BANNER_IMAGE}")`
      }}
    >
      <div className="absolute flex h-full items-center lg:-mt-14 justify-center w-full text-4xl md:text-7xl text-white">
--- a/themes/NEXT/components/JumpToBottomButton.js
+++ b/themes/NEXT/components/JumpToBottomButton.js
@@ -1,8 +1,8 @@
-import BLOG from '@/blog.config'
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useEffect, useState } from 'react'
 import smoothscroll from 'smoothscroll-polyfill'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 /**
 * 跳转到网页顶部
@@ -13,7 +13,7 @@ import smoothscroll from 'smoothscroll-polyfill'
 * @constructor
 */
 const JumpToBottomButton = ({ showPercent = false }) => {
-  if (!BLOG.widget?.showToBottom) {
+  if (!CONFIG_NEXT.WIDGET_TO_BOTTOM) {
    return <></>
  }

--- a/themes/NEXT/components/JumpToTopButton.js
+++ b/themes/NEXT/components/JumpToTopButton.js
@@ -1,8 +1,8 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 /**
 * 跳转到网页顶部
@@ -13,7 +13,7 @@ import React from 'react'
 * @constructor
 */
 const JumpToTopButton = ({ showPercent = true, percent }) => {
-  if (!BLOG.widget?.showToTop) {
+  if (!CONFIG_NEXT.WIDGET_TO_TOP) {
    return <></>
  }
  const { locale } = useGlobal()
--- a/themes/NEXT/components/Live2D.js
+++ b/themes/NEXT/components/Live2D.js
@@ -1,9 +1,9 @@
 /* eslint-disable no-undef */
-import BLOG from '@/blog.config'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 let hasLoad = false
 export default function Live2D () {
-  if (!BLOG.widget?.showPet) {
+  if (!CONFIG_NEXT.WIDGET_PET) {
    return <></>
  }

@@ -13,7 +13,7 @@ export default function Live2D () {
  }

  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>
+    <canvas id="live2d" className='animate__slideInLeft animate__animated' width="280" height="250"/>
  </div>
 }

@@ -25,7 +25,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', BLOG.widget.petLink)
+      loadlive2d('live2d', CONFIG_NEXT.WIDGET_PET_LINK)
    })
  }
 }
--- a/themes/NEXT/components/MenuButtonGroup.js
+++ b/themes/NEXT/components/MenuButtonGroup.js
@@ -4,19 +4,19 @@ import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArchive, faHome, faTag, faTh, faUser } from '@fortawesome/free-solid-svg-icons'
-import BLOG from 'blog.config'
+import CONFIG_NEXT from '../config_next'

-const MenuButtonGroup = ({ allowCollapse = false, postCount }) => {
+const MenuButtonGroup = ({ postCount }) => {
  const { locale } = useGlobal()
  const router = useRouter()
  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>

  const links = [
    { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory },
-    { id: 2, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag },
-    { id: 3, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: BLOG.menu.showArchive },
-    { id: 4, icon: faUser, name: locale.NAV.ABOUT, to: '/about', show: BLOG.menu.showAbout }
+    { id: 1, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_NEXT.MENU_CATEGORY },
+    { id: 2, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_NEXT.MENU_TAG },
+    { id: 3, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_NEXT.MENU_ARCHIVE },
+    { id: 4, icon: faUser, name: locale.NAV.ABOUT, to: '/about', show: CONFIG_NEXT.MENU_ABOUT }
  ]
  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans'>
      {links.map(link => {
--- a/themes/NEXT/components/NavBar.js
+++ b/themes/NEXT/components/NavBar.js
@@ -1,120 +0,0 @@
-import { useEffect, useRef } from 'react'
-import Link from 'next/link'
-import BLOG from '@/blog.config'
-import Image from 'next/image'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBars } from '@fortawesome/free-solid-svg-icons'
-
-const NavBar = () => {
-  const links = []
-  return (
-    <div className='flex-shrink-0'>
-      <ul className='flex flex-row'>
-        {links.map(
-          link =>
-            link.show && (
-              <li
-                key={link.id}
-                className='block ml-4 text-black dark:text-gray-50 nav'
-              >
-                <Link href={link.to}>
-                  <a>{(link.icon && (<i className={'px-1 fa ' + link.icon} />))} {link.name}</a>
-                </Link>
-              </li>
-            )
-        )}
-      </ul>
-    </div>
-  )
-}
-
-const Header = ({ navBarTitle, fullWidth = true }) => {
-  const navRef = useRef(null)
-  const sentinelRef = useRef([])
-  // 当Header移出屏幕时改变的样式
-  const handler = ([entry]) => {
-    if (navRef && navRef.current) {
-      if (!entry.isIntersecting && entry !== undefined) {
-        navRef.current.classList.add('sticky-nav-full')
-      } else {
-        navRef.current.classList.remove('sticky-nav-full')
-      }
-    }
-  }
-  useEffect(() => {
-    const observer = new window.IntersectionObserver(handler)
-    observer.observe(sentinelRef.current)
-    // Don't touch this, I have no idea how it works XD
-    // return () => {
-    //   if (sentinalRef.current) obvserver.unobserve(sentinalRef.current)
-    // }
-  }, [sentinelRef])
-  return (
-    <>
-      {BLOG.autoCollapsedNavBar === true && (
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-                      var windowTop=0;
-                      function scrollTrigger(){
-                          let scrollS = window.scrollY;
-                          let nav = document.querySelector('.sticky-nav');
-                          if(scrollS >= windowTop){
-                              nav.style.opacity = 0;
-                              windowTop = scrollS;
-                          }else{
-                              nav.style.opacity = 1;
-                              windowTop = scrollS;
-                          }
-                      };
-                      window.addEventListener('scroll',scrollTrigger);
-                      `
-          }}
-        />
-      )}
-       <div className='observer-element h-0.5 ' ref={sentinelRef} />
-
-      <div
-        className='z-30 px-4 sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center py-6 bg-white bg-opacity-80 '
-        id='sticky-nav'
-        ref={navRef}
-      >
-        <div className='flex items-center'>
-
-          <div className='flex cursor-pointer'>
-            <div className='px-2 text-xl'>
-              <FontAwesomeIcon icon={faBars} className='hover:scale-125 transform duration-200' />
-            </div>
-            <Image
-              alt={BLOG.title}
-              width={28}
-              height={28}
-              src='/avatar.jpg'
-              className='rounded-full'
-            />
-            <div
-              className='mx-1 text-center cursor-pointer text-xl p-1
-              dark:bg-gray-900 dark:text-gray-300 font-semibold
-              dark:hover:bg-gray-600 text-black hover:scale-105
-              hover:shadow-2xl duration-200 transform'>{BLOG.title}</div>
-
-          </div>
-          {navBarTitle
-            ? (
-              <p className='ml-1 font-medium text-gray-500 dark:text-night header-name'>
-                {navBarTitle}
-              </p>
-              )
-            : (
-              <p className='ml-1 font-medium dark:text-night header-name'>
-                <span className='font-normal'>{BLOG.description}</span>
-              </p>
-              )}
-        </div>
-        <NavBar />
-      </div>
-    </>
-  )
-}
-
-export default Header
--- a/themes/NEXT/components/RecommendPosts.js
+++ b/themes/NEXT/components/RecommendPosts.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 /**
 * 展示文章推荐
 */
 const RecommendPosts = ({ recommendPosts }) => {
-  if (!BLOG.widget?.showRelatePosts || !recommendPosts || recommendPosts.length < 1) {
+  if (!CONFIG_NEXT.ARTICLE_RELATE_POSTS || !recommendPosts || recommendPosts.length < 1) {
    return <></>
  }
  const { locale } = useGlobal()
--- a/themes/NEXT/components/ShareBar.js
+++ b/themes/NEXT/components/ShareBar.js
@@ -15,9 +15,10 @@ import {
  faWeixin
 } from '@fortawesome/free-brands-svg-icons'
 import { faLink } from '@fortawesome/free-solid-svg-icons'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 const ShareBar = ({ post }) => {
-  if (!BLOG.widget?.showShareBar) {
+  if (!CONFIG_NEXT.ARTICLE_SHARE) {
    return <></>
  }
  const router = useRouter()
@@ -77,12 +78,12 @@ const ShareBar = ({ post }) => {
        </a>
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='text-red-600' target='_blank' rel='noreferrer'href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} >
+        <a className='text-red-600' target='_blank' rel='noreferrer' href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} >
          <FontAwesomeIcon icon={faWeibo}/>
        </a>
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='text-blue-400' target='_blank' rel='noreferrer'href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} >
+        <a className='text-blue-400' target='_blank' rel='noreferrer' href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} >
          <FontAwesomeIcon icon={faQq}/>
        </a>
      </div>
--- a/themes/NEXT/components/SideAreaLeft.js
+++ b/themes/NEXT/components/SideAreaLeft.js
@@ -5,23 +5,20 @@ import Toc from '@/themes/NEXT/components/Toc'
 import { useGlobal } from '@/lib/global'
 import React from 'react'
 import Tabs from '@/themes/NEXT/components/Tabs'
-import BLOG from '@/blog.config'
 import Logo from './Logo'
 import Card from './Card'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 /**
 * 侧边平铺
 * @param tags
 * @param currentTag
 * @param post
- * @param posts
- * @param categories
- * @param currentCategory
 * @param currentSearch
 * @returns {JSX.Element}
 * @constructor
 */
-const SideAreaLeft = ({ title, tags, currentTag, post, postCount, categories, currentCategory, currentSearch, targetRef }) => {
+const SideAreaLeft = ({ currentTag, post, postCount, currentSearch }) => {
  const { locale } = useGlobal()
  const showToc = post && post.toc && post.toc.length > 1
  return <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
@@ -33,7 +30,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, postCount, categories, cu
        <div className='pt-2 px-2 font-sans'>
        <MenuButtonGroup allowCollapse={true} postCount={postCount} />
        </div>
-        {BLOG.menu.showSearch && <div className='px-2 pt-2 font-sans'>
+        {CONFIG_NEXT.MENU_SEARCH && <div className='px-2 pt-2 font-sans'>
           <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
        </div>}
      </section>
--- a/themes/NEXT/components/SideAreaRight.js
+++ b/themes/NEXT/components/SideAreaRight.js
@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { faAngleDoubleRight, faAngleRight, faTag, faThList } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -7,59 +6,53 @@ import React from 'react'
 import Card from './Card'
 import CategoryGroup from './CategoryGroup'
 import TagGroups from './TagGroups'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 /**
 * 侧边平铺
 * @param tags
 * @param currentTag
 * @param post
- * @param posts
 * @param categories
 * @param currentCategory
- * @param currentSearch
 * @returns {JSX.Element}
 * @constructor
 */
 const SideAreaRight = ({
-  title,
  tags,
  currentTag,
-  post,
  slot,
  categories,
-  currentCategory,
-  currentSearch,
-  targetRef
+  currentCategory
 }) => {
  const { locale } = useGlobal()
-  const { widget } = BLOG
-  if (!widget?.showCategoryList && !widget.showTagList && !widget.showLatestPost) {
+  if (!CONFIG_NEXT.RIGHT_BAR) {
    return <></>
  }

  return (<aside id='right' className='hidden 2xl:block flex-col w-60 ml-4'>

-      <Card className='mb-2'>
-          {/* 展示广告  */}
-          <ins
-            className="adsbygoogle"
-            style={{ display: 'block' }}
-            data-adtest="on"
-            data-ad-client="ca-pub-2708419466378217"
-            data-ad-slot="8807314373"
-            data-ad-format="auto"
-            data-full-width-responsive="true"
-          ></ins>
-      </Card>
+      {CONFIG_NEXT.RIGHT_AD && <Card className='mb-2'>
+        {/* 展示广告  */}
+        <ins
+          className='adsbygoogle'
+          style={{ display: 'block' }}
+          data-adtest='on'
+          data-ad-client='ca-pub-2708419466378217'
+          data-ad-slot='8807314373'
+          data-ad-format='auto'
+          data-full-width-responsive='true'
+        />
+      </Card>}

      <div className="sticky top-4">

        {/* 分类  */}
-        {widget?.showCategoryList && categories && (
+        {CONFIG_NEXT.RIGHT_CATEGORY_LIST && categories && (
          <Card>
            <div className='text-sm px-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>
+              <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={faAngleRight} />
                </a>
@@ -71,14 +64,14 @@ const SideAreaRight = ({

        {slot}

-         {widget?.showTagList && tags && (
+         {CONFIG_NEXT.RIGHT_TAG_LIST && tags && (
          <Card>
            <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
              <div className="text-gray-600 dark:text-gray-200">
                <FontAwesomeIcon icon={faTag} className="mr-2" />
                {locale.COMMON.TAGS}
              </div>
-              <Link href="/tag" passHref>
+              <Link href={'/tag'} passHref>
                <a className="text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer">
                  {locale.COMMON.MORE}{' '}
                  <FontAwesomeIcon icon={faAngleDoubleRight} />
--- a/themes/NEXT/components/StickyBar.js
+++ b/themes/NEXT/components/StickyBar.js
@@ -1,20 +1,19 @@
-import BLOG from '@/blog.config'
 import throttle from 'lodash.throttle'
 import { useCallback, useEffect } from 'react'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 let windowTop = 0

 /**
 * 标签组导航条，默认隐藏仅在移动端显示
 * @param tags
- * @param currentTag
 * @returns {JSX.Element}
 * @constructor
 */
 const StickyBar = ({ children }) => {
  if (!children) return <></>
  const scrollTrigger = useCallback(throttle(() => {
-    if (BLOG.topNavType === 'normal') {
+    if (CONFIG_NEXT.NAV_TYPE === 'normal') {
      return
    }
    const scrollS = window.scrollY
@@ -27,7 +26,7 @@ const StickyBar = ({ children }) => {
      stickyBar && stickyBar.classList.replace('top-0', 'top-14')
      windowTop = scrollS
    }
-  }, 200))
+  }, 200), [])

  // 监听滚动
  useEffect(() => {
--- a/themes/NEXT/components/TocDrawerButton.js
+++ b/themes/NEXT/components/TocDrawerButton.js
@@ -1,8 +1,8 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { faListOl } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 /**
 * 点击召唤目录抽屉
@@ -12,7 +12,7 @@ import React from 'react'
 * @constructor
 */
 const TocDrawerButton = (props) => {
-  if (!BLOG.widget?.showToc) {
+  if (!CONFIG_NEXT.WIDGET_TOC) {
    return <></>
  }
  const { locale } = useGlobal()
--- a/themes/NEXT/components/TopNav.js
+++ b/themes/NEXT/components/TopNav.js
@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { faAngleDoubleRight, faBars, faSearch, faTag, faThList, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -11,6 +10,7 @@ import Logo from './Logo'
 import MenuButtonGroup from './MenuButtonGroup'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
+import CONFIG_NEXT from '@/themes/NEXT/config_next'

 let windowTop = 0

@@ -19,7 +19,7 @@ let windowTop = 0
 * @param {*} param0
 * @returns
 */
-const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, autoHide = true, postCount }) => {
+const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) => {
  const { locale } = useGlobal()
  const searchDrawer = useRef()

@@ -27,23 +27,23 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
    const scrollS = window.scrollY
    if (scrollS >= windowTop && scrollS > 10) {
      const nav = document.querySelector('#sticky-nav')
-      nav && nav.classList.replace('top-0', '-top-16')
+      nav && nav.classList.replace('top-0', '-top-40')
      windowTop = scrollS
    } else {
      const nav = document.querySelector('#sticky-nav')
-      nav && nav.classList.replace('-top-16', 'top-0')
+      nav && nav.classList.replace('-top-40', 'top-0')
      windowTop = scrollS
    }
  }, 200), [])

  // 监听滚动
  useEffect(() => {
-    if (BLOG.topNavType === 'autoCollapse') {
+    if (CONFIG_NEXT.NAV_TYPE === 'autoCollapse') {
      scrollTrigger()
      window.addEventListener('scroll', scrollTrigger)
    }
    return () => {
-      BLOG.autoCollapsedNavBar && window.removeEventListener('scroll', scrollTrigger)
+      CONFIG_NEXT.NAV_TYPE === 'autoCollapse' && window.removeEventListener('scroll', scrollTrigger)
    }
  }, [])

@@ -58,7 +58,7 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
        <section className='mt-8'>
          <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
-            <Link href='/category' passHref>
+            <Link href={'/category'} passHref>
              <a className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
              </a>
@@ -72,7 +72,7 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
        <section className='mt-4'>
          <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTag} className='mr-2'/>{locale.COMMON.TAGS}</div>
-            <Link href='/tag' passHref>
+            <Link href={'/tag'} passHref>
              <a className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
              </a>
@@ -89,7 +89,7 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
    <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>

    {/* 导航栏 */}
-    <div id='sticky-nav' className={`${BLOG.topNavType !== 'normal' ? 'fixed' : ''} lg:relative w-full top-0 z-20 transform duration-500`}>
+    <div id='sticky-nav' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'fixed' : ''} lg:relative w-full top-0 z-20 transform duration-500`}>
      <div className='w-full flex justify-between items-center p-4 bg-black text-white'>
        {/* 左侧LOGO 标题 */}
        <div className='flex flex-none flex-grow-0'>
--- a/themes/NEXT/config_next.js
+++ b/themes/NEXT/config_next.js
@@ -0,0 +1,52 @@
+const CONFIG_NEXT = {
+
+  HOME_BANNER: false, // 首页是否显示大图及标语 [true,false]
+  HOME_BANNER_Strings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
+  HOME_BANNER_IMAGE: './bg_image.jpg', // 背景图地址
+
+  POST_LIST_TYPE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
+  POST_LIST_COVER: false, // 文章列表显示封面图
+  POST_LIST_PREVIEW: true, // 显示文章预览
+  POST_LIST_SUMMARY: false, // 显示用户自定义摘要，有预览时优先只展示预览
+
+  // 右侧组件
+  RIGHT_BAR: false, // 是否显示右侧栏
+  RIGHT_LATEST_POSTS: false, // 右侧栏最新文章
+  RIGHT_CATEGORY_LIST: false, // 右侧边栏文章分类列表
+  RIGHT_TAG_LIST: false, // 右侧边栏标签分类列表
+  RIGHT_AD: false, // 右侧广告
+
+  // 菜单
+  MENU_ABOUT: false, // 显示关于
+  MENU_CATEGORY: true, // 显示分类
+  MENU_TAG: true, // 显示标签
+  MENU_ARCHIVE: true, // 显示归档
+  MENU_SEARCH: true, // 显示搜索
+
+  // 悬浮挂件
+  WIDGET_PET: false, // 是否显示宠物挂件
+  WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
+  WIDGET_TO_TOP: true, // 是否显示回顶
+  WIDGET_TO_BOTTOM: false, // 显示回底
+  WIDGET_DARK_MODE: false, // 显示日间/夜间模式切换
+  WIDGET_TOC: true, // 移动端显示悬浮目录
+
+  ARTICLE_SHARE: false, // 文章分享功能
+  ARTICLE_RELATE_POSTS: true, // 相关文章推荐
+  ARTICLE_COPYRIGHT: true, // 文章版权声明
+
+  NAV_TYPE: 'fixed', // ['fixed','autoCollapse','normal'] 分别是固定屏幕顶部、屏幕顶部自动折叠，不固定
+
+  appearance: 'auto', // ['light', 'dark', 'auto'],
+  font: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
+  lightBackground: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
+  darkBackground: '#111827', // use hex value, don't forget '#'
+  path: '', // leave this empty unless you want to deploy in a folder
+  since: 2020, // if leave this empty, current year will be used.
+  postListStyle: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
+  postsPerPage: 6, // post counts per page
+  sortByDate: false,
+  topNavType: 'normal' // ['fixed','autoCollapse','normal'] 分别是固定顶部、固定底部滑动时自动折叠，不固定
+}
+
+export default CONFIG_NEXT
--- a/themes/NEXT/index.js
+++ b/themes/NEXT/index.js
@@ -8,80 +8,3 @@ export { LayoutCategoryIndex } from './LayoutCategoryIndex'
 export { LayoutPage } from './LayoutPage'
 export { LayoutTag } from './LayoutTag'
 export { LayoutTagIndex } from './LayoutTagIndex'
-
-export const CONFIG_NEXT = {
-  // 首页相关配置
-  HOME_BANNER: false, // 首页是否显示大图及标语 [true,false]
-  POSTS_LIST_TYPE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
-  // 右侧组件
-  RIGHT_LATEST_POSTS: false,
-
-  home: { // 首页
-    showHomeBanner: false,
-    homeBannerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
-    homeBannerImage: './bg_image.jpg', // 背景图地址
-    showPostCover: false, // 文章列表显示封面图
-    showPreview: true, // 列表展示文章预览
-    previewLines: 12, // 预览文章的篇幅
-    showSummary: false // 显示用户自定义摘要
-  },
-  appearance: 'auto', // ['light', 'dark', 'auto'],
-  font: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
-  lightBackground: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
-  darkBackground: '#111827', // use hex value, don't forget '#'
-  path: '', // leave this empty unless you want to deploy in a folder
-  since: 2020, // if leave this empty, current year will be used.
-  postListStyle: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
-  postsPerPage: 6, // post counts per page
-  sortByDate: false,
-  topNavType: 'normal', // ['fixed','autoCollapse','normal'] 分别是固定顶部、固定底部滑动时自动折叠，不固定
-  menu: { // 菜单栏设置
-    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: false, // 显示回底
-    showDarkMode: false, // 显示日间/夜间模式切换
-    showToc: true, // 移动端显示悬浮目录
-    showShareBar: false, // 文章分享功能
-    showRelatePosts: true, // 相关文章推荐
-    showCopyRight: true, // 文章版权声明
-    showLatestPost: false, // 右侧边栏显示最近更新
-    showCategoryList: false, // 右侧边栏显示文章分类列表
-    showTagList: false // 右侧边栏显示标签分类列表
-  },
-  socialLink: { // 社交链接，如不需要展示可以留空白，例如 weibo:''
-    weibo: 'https://weibo.com/tangly1024',
-    twitter: 'https://twitter.com/troy1024_1',
-    github: 'https://github.com/tangly1024',
-    telegram: 'https://t.me/tangly_1024'
-  },
-  comment: { // 评论插件，支持 gitalk, utterances, cusdis
-    provider: 'gitalk', // 不需要则留空白
-    gitalkConfig: {
-      repo: 'NotionNext', // The repository of store comments
-      owner: 'tangly1024',
-      admin: ['tangly1024'],
-      clientID: process.env.GITALK_ID || 'be7864a16b693e256f8f',
-      clientSecret: process.env.GITALK_SECRET || 'dbd0f6d9ceea8940f6ed20936b415274b8fe66a2',
-      distractionFreeMode: false
-    },
-    cusdisConfig: {
-      appId: '445ba48e-f751-487f-b22f-cdbe3310d28f', // data-app-id
-      host: 'https://cusdis.com', // data-host, change this if you're using self-hosted version
-      scriptSrc: 'https://cusdis.com/js/cusdis.es.js' // change this if you're using self-hosted version
-    },
-    utterancesConfig: {
-      repo: 'tangly1024/NotionNext'
-    },
-    gitter: '', // gitter聊天室
-    DaoVoiceId: '', // DaoVoice http://dashboard.daovoice.io/get-started
-    TidioId: '' // https://www.tidio.com/
-  }
-}