gitbook主题改版

2026-05-13 23:16:47 +00:00 · 2024-09-24 14:51:30 +08:00
parent c8fb59a1af
commit 72736d6808
15 changed files with 82 additions and 87 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,6 +5,7 @@ module.exports = {
    node: true
  },
  extends: [
+    'plugin:react/jsx-runtime',
    'plugin:react/recommended',
    'plugin:@next/next/recommended',
    'standard',
--- a/lib/config.js
+++ b/lib/config.js
@@ -50,7 +50,7 @@ export const siteConfig = (key, defaultVal = null, extendConfig = {}) => {
    // console.warn('SiteConfig警告', key, error)
  }

-  // 首先 配置最优先读取NOTION中的表格配置
+  // 配置最优先读取NOTION中的表格配置
  let val = null
  let siteInfo = null

--- a/themes/gitbook/components/ArticleInfo.js
+++ b/themes/gitbook/components/ArticleInfo.js
@@ -1,9 +1,16 @@
+/**
+ * 文章补充咨询
+ * @param {*} param0
+ * @returns
+ */
 export default function ArticleInfo({ post }) {
  if (!post) {
    return null
  }
-  return <div className="pt-10 pb-6 text-gray-400 text-sm border-b">
-        <i className="fa-regular fa-clock mr-1" />
-        Last update:  { post.date?.start_date}
+  return (
+    <div className='pt-10 pb-6 text-gray-400 text-sm'>
+      <i className='fa-regular fa-clock mr-1' />
+      Last update: {post.date?.start_date}
    </div>
+  )
 }
--- a/themes/gitbook/components/BottomMenuBar.js
+++ b/themes/gitbook/components/BottomMenuBar.js
@@ -12,7 +12,7 @@ export default function BottomMenuBar({ post, className }) {
  return (
    <>
      {/* 移动端底部导航按钮 */}
-      <div className='dark:bg-hexo-black-gray bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
+      <div className='pb-2 dark:bg-hexo-black-gray bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
        <div className='w-full'>
          <MobileButtonPageNav />
        </div>
--- a/themes/gitbook/components/Catalog.js
+++ b/themes/gitbook/components/Catalog.js
@@ -81,14 +81,15 @@ const Catalog = ({ post }) => {
              <a
                key={id}
                href={`#${id}`}
-                className={`border-l pl-4 notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
+                //  notion-table-of-contents-item
+                className={`${activeSection === id && 'border-green-500 text-green-500 font-bold'} border-l pl-4 block hover:text-green-500 border-lduration-300 transform font-light dark:text-gray-300
              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
                <span
                  style={{
                    display: 'inline-block',
                    marginLeft: tocItem.indentLevel * 16
                  }}
-                  className={`truncate ${activeSection === id ? 'border-green-500 font-bold text-gray-500 underline' : ''}`}>
+                  className={`truncate`}>
                  {tocItem.text}
                </span>
              </a>
--- a/themes/gitbook/components/Footer.js
+++ b/themes/gitbook/components/Footer.js
@@ -13,12 +13,10 @@ const Footer = ({ siteInfo }) => {
    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear

  return (
-    <footer className='z-20 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
-      <hr className='pb-2' />
-
+    <footer className='z-20 border p-2 rounded-lg bg:white dark:border-black dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
      <SocialButton />

-      <div className='flex justify-center pt-1'>
+      <div className='flex justify-center'>
        <div>
          <i className='mx-1 animate-pulse fas fa-heart' />{' '}
          <a
@@ -31,15 +29,6 @@ const Footer = ({ siteInfo }) => {
        © {`${copyrightDate}`}
      </div>

-      <div className='text-xs font-serif'>
-        Powered By{' '}
-        <a
-          href='https://github.com/tangly1024/NotionNext'
-          className='underline text-gray-500 dark:text-gray-300'>
-          NotionNext {siteConfig('VERSION')}
-        </a>
-      </div>
-
      {siteConfig('BEI_AN') && (
        <>
          <i className='fas fa-shield-alt' />{' '}
@@ -58,6 +47,14 @@ const Footer = ({ siteInfo }) => {
        <i className='fas fa-users' />{' '}
        <span className='px-1 busuanzi_value_site_uv'> </span>{' '}
      </span>
+      <div className='text-xs font-serif'>
+        Powered By{' '}
+        <a
+          href='https://github.com/tangly1024/NotionNext'
+          className='underline text-gray-500 dark:text-gray-300'>
+          NotionNext {siteConfig('VERSION')}
+        </a>
+      </div>
      {/* SEO title */}
      <h1 className='pt-1 hidden'>{siteConfig('TITLE')}</h1>
    </footer>
--- a/themes/gitbook/components/Header.js
+++ b/themes/gitbook/components/Header.js
@@ -62,7 +62,7 @@ export default function Header(props) {
  return (
    <div id='top-nav' className={'fixed top-0 w-full z-20 ' + className}>
      {/* PC端菜单 */}
-      <div className='flex justify-center border-b items-center w-full h-14 glassmorphism bg-white dark:bg-hexo-black-gray px-7'>
+      <div className='px-5 flex justify-center border-b dark:border-black items-center w-full h-16 glassmorphism bg-white dark:bg-hexo-black-gray'>
        <div className='max-w-screen-4xl w-full flex gap-x-3 justify-between items-center'>
          {/* 左侧*/}
          <div className='flex'>
@@ -78,7 +78,7 @@ export default function Header(props) {
          </div>

          {/* 右侧 */}
-          <div className='flex items-center gap-3'>
+          <div className='flex items-center gap-4'>
            <SearchInput className='hidden md:flex md:w-52 lg:w-72' />
            <DarkModeButton className='text-sm items-center h-full hidden md:flex' />
            {/* 折叠按钮、仅移动端显示 */}
--- a/themes/gitbook/components/JumpToTopButton.js
+++ b/themes/gitbook/components/JumpToTopButton.js
@@ -14,7 +14,7 @@ const JumpToTopButton = ({ showPercent = false, percent, className }) => {
      data-aos-duration='300'
      data-aos-once='false'
      data-aos-anchor-placement='top-center'
-      className='fixed xl:right-80 right-2 bottom-24 z-20'>
+      className='fixed xl:right-96 xl:mr-20 right-2 bottom-24 z-20'>
      <i
        className='shadow fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
        onClick={() => {
--- a/themes/gitbook/components/LogoBar.js
+++ b/themes/gitbook/components/LogoBar.js
@@ -11,16 +11,16 @@ import CONFIG from '../config'
 export default function LogoBar(props) {
  const { siteInfo } = props
  return (
-    <div id='top-wrapper' className='w-full flex items-center'>
+    <div id='logo-wrapper' className='w-full flex items-center mr-2'>
      <Link
        href={`/${siteConfig('GITBOOK_INDEX_PAGE', '', CONFIG)}`}
-        className='flex text-md md:text-xl dark:text-gray-200'>
+        className='flex text-md font-bold md:text-xl dark:text-gray-200'>
        <LazyImage
          src={siteInfo?.icon}
          width={24}
          height={24}
          alt={siteConfig('AUTHOR')}
-          className='mr-2 hidden md:block'
+          className='mr-2 hidden md:block '
        />
        {siteInfo?.title || siteConfig('TITLE')}
      </Link>
--- a/themes/gitbook/components/NavPostItem.js
+++ b/themes/gitbook/components/NavPostItem.js
@@ -52,7 +52,7 @@ const NavPostItem = props => {
        <div
          onMouseEnter={onHoverToggle}
          onClick={toggleOpenSubMenu}
-          className='cursor-pointer relative flex justify-between text-sm p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
+          className='cursor-pointer relative flex justify-between text-md p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
          key={group?.category}>
          <span className={`${expanded && 'font-semibold'}`}>
            {group?.category}
@@ -68,7 +68,7 @@ const NavPostItem = props => {
        <Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
          {group?.items?.map((post, index) => (
            <div key={index} className='ml-3 border-l'>
-              <BlogPostCard className='text-sm ml-3' post={post} />
+              <BlogPostCard className='ml-3' post={post} />
            </div>
          ))}
        </Collapse>
@@ -79,7 +79,7 @@ const NavPostItem = props => {
      <>
        {group?.items?.map((post, index) => (
          <div key={index}>
-            <BlogPostCard className='text-sm py-2' post={post} />
+            <BlogPostCard className='text-md py-2' post={post} />
          </div>
        ))}
      </>
--- a/themes/gitbook/components/NavPostList.js
+++ b/themes/gitbook/components/NavPostList.js
@@ -95,7 +95,7 @@ const NavPostList = props => {
      id='posts-wrapper'
      className='w-full flex-grow space-y-0.5 pr-4 tracking-wider'>
      {/* 当前文章 */}
-      <BlogPostCard className='text-sm py-2' post={homePost} />
+      <BlogPostCard className='mb-4' post={homePost} />

      {/* 文章列表 */}
      {categoryFolders?.map((group, index) => (
--- a/themes/gitbook/components/SearchInput.js
+++ b/themes/gitbook/components/SearchInput.js
@@ -107,7 +107,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
      <input
        ref={searchInputRef}
        type='text'
-        className={`rounded-md outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white`}
+        className={`rounded-md outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-black dark:text-white`}
        onFocus={handleFocus}
        onKeyUp={handleKeyUp}
        placeholder='Search'
--- a/themes/gitbook/components/SocialButton.js
+++ b/themes/gitbook/components/SocialButton.js
@@ -144,6 +144,7 @@ const SocialButton = () => {
            target='_blank'
            rel='noreferrer'
            title={'知识星球'}
+            className='flex justify-center items-center'
            href={CONTACT_ZHISHIXINGQIU}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -134,7 +134,7 @@ const LayoutBase = props => {

      <div
        id='theme-gitbook'
-        className={`${siteConfig('FONT_STYLE')} pb-16 md:pb-0 scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
+        className={`${siteConfig('FONT_STYLE')} pb-16 md:pb-0 scroll-smooth bg-white dark:bg-black w-full h-full min-h-screen justify-center dark:text-gray-300`}>
        <AlgoliaSearchModal cRef={searchModal} {...props} />

        {/* 顶部导航栏 */}
@@ -142,16 +142,10 @@ const LayoutBase = props => {

        <main
          id='wrapper'
-          className={
-            (siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : '') +
-            'relative flex justify-between w-full gap-x-6 h-full mx-auto max-w-screen-4xl'
-          }>
+          className={`${siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : ''} relative flex justify-between w-full gap-x-6 h-full mx-auto max-w-screen-4xl`}>
          {/* 左侧推拉抽屉 */}
          {fullWidth ? null : (
-            <div
-              className={
-                'hidden md:block relative z-10 dark:bg-hexo-black-gray'
-              }>
+            <div className={'hidden md:block relative z-10 '}>
              <div className='w-80 pt-14 pb-4 sticky top-0 h-screen flex justify-between flex-col'>
                {/* 导航 */}
                <div className='overflow-y-scroll scroll-hidden pt-10'>
@@ -170,10 +164,10 @@ const LayoutBase = props => {
          {/* 中间内容区域 */}
          <div
            id='center-wrapper'
-            className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen dark:bg-black'>
+            className='dark:bg-hexo-black-gray flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen'>
            <div
              id='container-inner'
-              className={`w-full ${fullWidth ? 'px-10' : 'max-w-3xl px-3 lg:px-0'} justify-center mx-auto`}>
+              className={`w-full ${fullWidth ? 'px-5' : 'max-w-3xl px-3 lg:px-0'} justify-center mx-auto`}>
              {slotTop}
              <WWAds className='w-full' orientation='horizontal' />

@@ -182,9 +176,6 @@ const LayoutBase = props => {
              {/* Google广告 */}
              <AdSlot type='in-article' />
              <WWAds className='w-full' orientation='horizontal' />
-
-              {/* 回顶按钮 */}
-              <JumpToTopButton />
            </div>

            {/* 底部 */}
@@ -197,12 +188,12 @@ const LayoutBase = props => {
          {fullWidth ? null : (
            <div
              className={
-                'w-72 hidden xl:block dark:border-transparent flex-shrink-0 relative z-10 '
+                'w-72 hidden 2xl:block dark:border-transparent flex-shrink-0 relative z-10 '
              }>
              <div className='py-14 sticky top-0'>
                <ArticleInfo post={props?.post ? props?.post : props.notice} />

-                <div className='py-4'>
+                <div>
                  {/* 桌面端目录 */}
                  <Catalog {...props} />
                  {slotRight}
@@ -230,6 +221,9 @@ const LayoutBase = props => {

        {GITBOOK_LOADING_COVER && <LoadingCover />}

+        {/* 回顶按钮 */}
+        <JumpToTopButton />
+
        {/* 移动端导航抽屉 */}
        <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />

@@ -248,29 +242,33 @@ const LayoutBase = props => {
 */
 const LayoutIndex = props => {
  const router = useRouter()
-  useEffect(() => {
-    router.push(siteConfig('GITBOOK_INDEX_PAGE')).then(() => {
-      // console.log('跳转到指定首页', siteConfig('INDEX_PAGE'))
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            console.log(
-              '请检查您的Notion数据库中是否包含此slug页面： ',
-              siteConfig('GITBOOK_INDEX_PAGE')
-            )
-            const containerInner = document.querySelector(
-              '#theme-gitbook #container-inner'
-            )
-            const newHTML = `<h1 class="text-3xl pt-12  dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${siteConfig('GITBOOK_INDEX_PAGE')}的文章</div></blockquote>`
-            containerInner?.insertAdjacentHTML('afterbegin', newHTML)
-          }
-        }
-      }, 7 * 1000)
-    })
-  }, [])
+  const index = siteConfig('GITBOOK_INDEX_PAGE')

-  return <></>
+  useEffect(() => {
+    const checkArticleExists = async () => {
+      // 这里可以检查文章是否存在
+      const article = document.getElementById('notion-article')
+      if (!article) {
+        console.log('请检查您的Notion数据库中是否包含此slug页面： ', index)
+
+        // 显示错误信息
+        const containerInner = document.querySelector(
+          '#theme-gitbook #container-inner'
+        )
+        const newHTML = `<h1 class="text-3xl pt-12 dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${index}的文章</div></blockquote>`
+        containerInner?.insertAdjacentHTML('afterbegin', newHTML)
+      } else {
+        // 如果文章存在，立即重定向
+        if (index) {
+          router.push(index)
+        }
+      }
+    }
+
+    checkArticleExists()
+  }, [index, router])
+
+  return <LoadingCover /> // 返回 null 以不渲染任何内容
 }

 /**
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,15 +2,13 @@
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/components/*": ["components/*"],
+      "@/themes/*": ["themes/*"],
+      "@/data/*": ["data/*"],
+      "@/lib/*": ["lib/*"],
+      "@/styles/*": ["styles/*"]
    },
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
@@ -23,14 +21,6 @@
    "isolatedModules": true,
    "jsx": "preserve"
  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.js",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.jsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.js", "**/*.ts", "**/*.tsx", "**/*.jsx"],
+  "exclude": ["node_modules"]
 }