gitbook首页跳转

2026-05-13 23:16:47 +00:00 · 2023-06-24 12:06:03 +08:00
parent 505f713241
commit 80fc0e29e8
10 changed files with 84 additions and 69 deletions
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -8,6 +8,7 @@ import { getNotion } from '@/lib/notion/getNotion'
 import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
 import { getLayoutByTheme } from '@/themes/theme'
 import md5 from 'js-md5'
+import { isBrowser } from '@/lib/utils'

 /**
 * 根据notion的slug访问页面
@@ -37,18 +38,18 @@ const Slug = props => {
  // 文章加载
  useEffect(() => {
    // 404
-    //   if (!post) {
-    //     setTimeout(() => {
-    //       if (isBrowser()) {
-    //         const article = document.getElementById('notion-article')
-    //         if (!article) {
-    //           router.push('/404').then(() => {
-    //             console.warn('找不到页面', router.asPath)
-    //           })
-    //         }
-    //       }
-    //     }, 8 * 1000) // 404时长 8秒
-    //   }
+    if (!post) {
+      setTimeout(() => {
+        if (isBrowser()) {
+          const article = document.getElementById('notion-article')
+          if (!article) {
+            router.push('/404').then(() => {
+              console.warn('找不到页面', router.asPath)
+            })
+          }
+        }
+      }, 5 * 1000) // 404时长 8秒
+    }

    // 文章加密
    if (post?.password && post?.password !== '') {
@@ -121,6 +122,7 @@ export async function getStaticProps({ params: { slug } }) {

  // 无法获取文章
  if (!props?.post) {
+    props.post = null
    return { props, revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND) }
  }

--- a/themes/gitbook/LayoutBase.js
+++ b/themes/gitbook/LayoutBase.js
@@ -3,7 +3,7 @@ import { useState, createContext, useContext, useEffect } from 'react'
 import Footer from './components/Footer'
 import InfoCard from './components/InfoCard'
 import RevolverMaps from './components/RevolverMaps'
-import CONFIG_MEDIUM from './config_medium'
+import CONFIG_GITBOOK from './config_gitbook'
 import TopNavBar from './components/TopNavBar'
 import SearchInput from './components/SearchInput'
 import BottomMenuBar from './components/BottomMenuBar'
@@ -14,6 +14,7 @@ import BlogPostListScroll from './components/BlogPostListScroll'
 import ArticleInfo from './components/ArticleInfo'
 import Catalog from './components/Catalog'
 import { useRouter } from 'next/router'
+import Announcement from './components/Announcement'
 const ThemeGlobalMedium = createContext()

 /**
@@ -50,7 +51,7 @@ const LayoutBase = (props) => {
                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>

                    {/* 左侧推拉抽屉 */}
-                    <div style={{ width: '32rem' }} className={`font-sans hidden xl:block border-r dark:border-transparent relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
+                    <div style={{ width: '32rem' }} className={'font-sans hidden xl:block border-r dark:border-transparent relative z-10 '}>
                        <div className='py-14 px-6 sticky top-0 overflow-y-scroll h-screen'>
                            {slotLeft}

@@ -85,18 +86,20 @@ const LayoutBase = (props) => {
                    </div>

                    {/*  右侧侧推拉抽屉 */}
-                    <div style={{ width: '32rem' }} className={`hidden xl:block dark:border-transparent relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
+                    <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}>
                        <div className='py-14 px-6 sticky top-0'>
-                            <ArticleInfo post={props?.post ? props.post : props.notice} />
+                            <ArticleInfo post={props?.post ? props?.post : props.notice} />

                            <div className='pt-6'>
                                <Catalog {...props} />
                                {slotRight}
                                {router.route === '/' && <>
                                    <InfoCard {...props} />
-                                    {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+                                    {CONFIG_GITBOOK.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
                                    <Live2D />
                                </>}
+                                {/* gitbook主题首页只显示公告 */}
+                                <Announcement {...props} />
                            </div>

                        </div>
--- a/themes/gitbook/LayoutIndex.js
+++ b/themes/gitbook/LayoutIndex.js
@@ -1,10 +1,33 @@
+import { useRouter } from 'next/router'
 import LayoutBase from './LayoutBase'
-import Announcement from './components/Announcement'
-
+import { useEffect } from 'react'
+import CONFIG_GITBOOK from './config_gitbook'
+import { isBrowser } from '@/lib/utils'
+/**
+ * gitbook的首页
+ * @param {*} props
+ * @returns
+ */
 export const LayoutIndex = (props) => {
+  const router = useRouter()
+  // 直接显示指定页面
+  useEffect(() => {
+    router.push(CONFIG_GITBOOK.INDEX_PAGE).then(() => {
+      console.log('跳转到指定首页', CONFIG_GITBOOK.INDEX_PAGE)
+      setTimeout(() => {
+        if (isBrowser()) {
+          const article = document.getElementById('notion-article')
+          if (!article) {
+            console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG_GITBOOK.INDEX_PAGE)
+            const containerInner = document.getElementById('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为${CONFIG_GITBOOK.INDEX_PAGE}的文章</div></blockquote>`
+            containerInner.insertAdjacentHTML('afterbegin', newHTML)
+          }
+        }
+      }, 7 * 1000)
+    })
+  }, [])
  return <LayoutBase {...props}>
-    {/* gitbook主题首页只显示公告 */}
-    <Announcement {...props}/>
  </LayoutBase>
 }

--- a/themes/gitbook/LayoutSlug.js
+++ b/themes/gitbook/LayoutSlug.js
@@ -2,7 +2,7 @@ import LayoutBase from './LayoutBase'
 import React from 'react'
 import { ArticleLock } from './components/ArticleLock'
 import NotionPage from '@/components/NotionPage'
-import CONFIG_MEDIUM from './config_medium'
+import CONFIG_GITBOOK from './config_gitbook'
 import Comment from '@/components/Comment'
 import ArticleAround from './components/ArticleAround'
 import TocDrawer from './components/TocDrawer'
@@ -13,10 +13,6 @@ import ShareBar from '@/components/ShareBar'
 export const LayoutSlug = (props) => {
  const { post, prev, next, lock, validPassword } = props

-  if (!post) {
-    return <LayoutBase {...props}/>
-  }
-
  return (
        <LayoutBase {...props} >
            {/* 文章锁 */}
@@ -28,9 +24,9 @@ export const LayoutSlug = (props) => {
                <h1 className="text-3xl pt-12  dark:text-gray-300">{post?.title}</h1>

                {/* Notion文章主体 */}
-                <section id="notion-article" className="px-1">
-                    {post && (<NotionPage post={post} />)}
-                </section>
+                {post && (<section id="notion-article" className="px-1">
+                   <NotionPage post={post} />
+                </section>)}

                <section>

@@ -38,9 +34,9 @@ export const LayoutSlug = (props) => {
                    <ShareBar post={post} />
                    {/* 文章分类和标签信息 */}
                    <div className='flex justify-between'>
-                        {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
+                        {CONFIG_GITBOOK.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
                        <div>
-                            {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                            {CONFIG_GITBOOK.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
                        </div>
                    </div>

--- a/themes/gitbook/components/JumpToTopButton.js
+++ b/themes/gitbook/components/JumpToTopButton.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
 import React from 'react'
-import CONFIG_MEDIUM from '../config_medium'
+import CONFIG_GITBOOK from '../config_gitbook'

 /**
 * 跳转到网页顶部
@@ -12,7 +12,7 @@ import CONFIG_MEDIUM from '../config_medium'
 */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
  const { locale } = useGlobal()
-  if (!CONFIG_MEDIUM.WIDGET_TO_TOP) {
+  if (!CONFIG_GITBOOK.WIDGET_TO_TOP) {
    return <></>
  }
  return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
--- a/themes/gitbook/components/MenuBarMobile.js
+++ b/themes/gitbook/components/MenuBarMobile.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useGlobal } from '@/lib/global'
-import CONFIG_MEDIUM from '../config_medium'
+import CONFIG_GITBOOK from '../config_gitbook'
 import BLOG from '@/blog.config'
 import { MenuItemCollapse } from './MenuItemCollapse'

@@ -10,10 +10,10 @@ export const MenuBarMobile = (props) => {

  let links = [
    // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE }
-    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
+    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_GITBOOK.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_GITBOOK.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_GITBOOK.MENU_ARCHIVE }
+    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_GITBOOK.MENU_SEARCH }
  ]

  if (customNav) {
--- a/themes/gitbook/components/TopNavBar.js
+++ b/themes/gitbook/components/TopNavBar.js
@@ -3,7 +3,7 @@ import { useRef, useState } from 'react'
 import Collapse from '@/components/Collapse'
 import { MenuBarMobile } from './MenuBarMobile'
 import { useGlobal } from '@/lib/global'
-import CONFIG_MEDIUM from '../config_medium'
+import CONFIG_GITBOOK from '../config_gitbook'
 import BLOG from '@/blog.config'
 import { MenuItemDrop } from './MenuItemDrop'
 import DarkModeButton from '@/components/DarkModeButton'
@@ -21,10 +21,10 @@ export default function TopNavBar(props) {
  const { locale } = useGlobal()

  const defaultLinks = [
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_GITBOOK.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_GITBOOK.MENU_TAG },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_GITBOOK.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_GITBOOK.MENU_SEARCH }
  ]

  let links = defaultLinks.concat(customNav)
--- a/themes/gitbook/config_gitbook.js
+++ b/themes/gitbook/config_gitbook.js
@@ -0,0 +1,15 @@
+const CONFIG_GITBOOK = {
+
+  INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
+
+  // 菜单
+  MENU_CATEGORY: true, // 显示分类
+  MENU_TAG: true, // 显示标签
+  MENU_ARCHIVE: true, // 显示归档
+  MENU_SEARCH: true, // 显示搜索
+
+  // Widget
+  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+  WIDGET_TO_TOP: true // 跳回顶部
+}
+export default CONFIG_GITBOOK
--- a/themes/gitbook/config_medium.js
+++ b/themes/gitbook/config_medium.js
@@ -1,24 +0,0 @@
-const CONFIG_MEDIUM = {
-
-  // Style
-  RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MEDIUM_RIGHT_DARK || false, // 右侧面板深色模式
-
-  POST_LIST_COVER: true, // 文章列表显示图片封面
-  POST_LIST_PREVIEW: true, // 列表显示文章预览
-  POST_LIST_CATEGORY: true, // 列表显示文章分类
-  POST_LIST_TAG: true, // 列表显示文章标签
-
-  POST_DETAIL_CATEGORY: true, // 文章显示分类
-  POST_DETAIL_TAG: true, // 文章显示标签
-
-  // 菜单
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
-
-  // Widget
-  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
-  WIDGET_TO_TOP: true // 跳回顶部
-}
-export default CONFIG_MEDIUM
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -1,4 +1,4 @@
-import CONFIG_MEDIUM from './config_medium'
+import CONFIG_GITBOOK from './config_gitbook'
 import { LayoutIndex } from './LayoutIndex'
 import { LayoutSearch } from './LayoutSearch'
 import { LayoutArchive } from './LayoutArchive'
@@ -11,7 +11,7 @@ import { LayoutTag } from './LayoutTag'
 import { LayoutTagIndex } from './LayoutTagIndex'

 export {
-  CONFIG_MEDIUM as THEME_CONFIG,
+  CONFIG_GITBOOK as THEME_CONFIG,
  LayoutIndex,
  LayoutSearch,
  LayoutArchive,