gitbook主题改版

etnperlong · Sep 24, 2024 · 72736d6 · 72736d6
1 parent c8fb59a
commit 72736d6
Show file tree

Hide file tree

Showing 15 changed files with 80 additions and 85 deletions.
diff --git 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',

diff --git 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
 

diff --git 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>
+  )
 }
diff --git 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>

diff --git 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>

diff --git 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>

diff --git 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' />
             {/* 折叠按钮、仅移动端显示 */}

diff --git 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={() => {

diff --git 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>

diff --git 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>
         ))}
       </>

diff --git 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) => (

diff --git 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'

diff --git 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

diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
@@ -134,24 +134,18 @@ 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} />
 
         {/* 顶部导航栏 */}
         <Header {...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()
+  const index = siteConfig('GITBOOK_INDEX_PAGE')
+
   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)
-          }
+    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)
         }
-      }, 7 * 1000)
-    })
-  }, [])
+      }
+    }
 
-  return <></>
+    checkArticleExists()
+  }, [index, router])
+
+  return <LoadingCover /> // 返回 null 以不渲染任何内容
 }
 
 /**

diff --git 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"]
 }