From 6c0306847d90c46868e29287b662db0280e14cbe Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Tue, 30 Apr 2024 18:21:29 +0800 Subject: [PATCH] =?UTF-8?q?gitbook=E4=B8=BB=E9=A2=98=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E5=90=8D=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/gitbook/components/ArticleLock.js | 35 +- themes/gitbook/components/Header.js | 109 +++++ themes/gitbook/components/LogoBar.js | 31 +- themes/gitbook/components/TopNavBar.js | 73 --- themes/gitbook/index.js | 567 +++++++++++++---------- 5 files changed, 479 insertions(+), 336 deletions(-) create mode 100644 themes/gitbook/components/Header.js delete mode 100644 themes/gitbook/components/TopNavBar.js diff --git a/themes/gitbook/components/ArticleLock.js b/themes/gitbook/components/ArticleLock.js index 4ba5a3b9..dd63992c 100644 --- a/themes/gitbook/components/ArticleLock.js +++ b/themes/gitbook/components/ArticleLock.js @@ -11,6 +11,7 @@ import { useEffect, useRef } from 'react' export const ArticleLock = props => { const { validPassword } = props const { locale } = useGlobal() + console.log('locale', locale) const submitPassword = () => { const p = document.getElementById('password') @@ -29,25 +30,33 @@ export const ArticleLock = props => { passwordInputRef.current.focus() }, []) - return
-
-
{locale.COMMON.ARTICLE_LOCK_TIPS}
-
- { + return ( +
+
+
{locale.COMMON.ARTICLE_LOCK_TIPS}
+
+ { if (e.key === 'Enter') { submitPassword() } }} ref={passwordInputRef} // 绑定ref到passwordInputRef变量 - className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'> - -
-  {locale.COMMON.SUBMIT} + className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'> +
+ +  {locale.COMMON.SUBMIT} + +
-
-
+
-
+ ) } diff --git a/themes/gitbook/components/Header.js b/themes/gitbook/components/Header.js new file mode 100644 index 00000000..757d4ea0 --- /dev/null +++ b/themes/gitbook/components/Header.js @@ -0,0 +1,109 @@ +import Collapse from '@/components/Collapse' +import DarkModeButton from '@/components/DarkModeButton' +import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import { useRef, useState } from 'react' +import CONFIG from '../config' +import LogoBar from './LogoBar' +import { MenuBarMobile } from './MenuBarMobile' +import { MenuItemDrop } from './MenuItemDrop' + +/** + * 页头：顶部导航栏 + 菜单 + * @param {} param0 + * @returns + */ +export default function Header(props) { + const { className, customNav, customMenu } = props + const [isOpen, changeShow] = useState(false) + const collapseRef = useRef(null) + + const { locale } = useGlobal() + + const defaultLinks = [ + { + icon: 'fas fa-th', + name: locale.COMMON.CATEGORY, + to: '/category', + show: siteConfig('GITBOOK_MENU_CATEGORY', null, CONFIG) + }, + { + icon: 'fas fa-tag', + name: locale.COMMON.TAGS, + to: '/tag', + show: siteConfig('GITBOOK_BOOK_MENU_TAG', null, CONFIG) + }, + { + icon: 'fas fa-archive', + name: locale.NAV.ARCHIVE, + to: '/archive', + show: siteConfig('GITBOOK_MENU_ARCHIVE', null, CONFIG) + }, + { + icon: 'fas fa-search', + name: locale.NAV.SEARCH, + to: '/search', + show: siteConfig('GITBOOK_MENU_SEARCH', null, CONFIG) + } + ] + + let links = defaultLinks.concat(customNav) + + const toggleMenuOpen = () => { + changeShow(!isOpen) + } + + // 如果 开启自定义菜单，则覆盖Page生成的菜单 + if (siteConfig('CUSTOM_MENU')) { + links = customMenu + } + + return ( +
+ {/* 移动端折叠菜单 */} + +
+ + collapseRef.current?.updateCollapseHeight(param) + } + /> +
+ + + {/* 导航栏菜单 */} +
+ {/* 左侧图标Logo */} + + + {/* 折叠按钮、仅移动端显示 */} +
+ +
+ {isOpen ? ( + + ) : ( + + )} +
+
+ + {/* 桌面端顶部菜单 */} +
+ {links && + links?.map((link, index) => ( + + ))} + +
+
+
+ ) +} diff --git a/themes/gitbook/components/LogoBar.js b/themes/gitbook/components/LogoBar.js index 5b6a0c87..c2d1c453 100644 --- a/themes/gitbook/components/LogoBar.js +++ b/themes/gitbook/components/LogoBar.js @@ -1,7 +1,7 @@ import LazyImage from '@/components/LazyImage' +import { siteConfig } from '@/lib/config' import { useGitBookGlobal } from '@/themes/gitbook' import Link from 'next/link' -import { siteConfig } from '@/lib/config' import CONFIG from '../config' /** @@ -17,14 +17,25 @@ export default function LogoBar(props) { changePageNavVisible(!pageNavVisible) } return ( -
-
- -
- - - {siteConfig('TITLE')} - -
+
+
+ +
+ + + {siteInfo?.title || siteConfig('TITLE')} + +
) } diff --git a/themes/gitbook/components/TopNavBar.js b/themes/gitbook/components/TopNavBar.js deleted file mode 100644 index c92df55d..00000000 --- a/themes/gitbook/components/TopNavBar.js +++ /dev/null @@ -1,73 +0,0 @@ -import LogoBar from './LogoBar' -import { useRef, useState } from 'react' -import Collapse from '@/components/Collapse' -import { MenuBarMobile } from './MenuBarMobile' -import { useGlobal } from '@/lib/global' -import CONFIG from '../config' -import { siteConfig } from '@/lib/config' -import { MenuItemDrop } from './MenuItemDrop' -import DarkModeButton from '@/components/DarkModeButton' - -/** - * 顶部导航栏 + 菜单 - * @param {} param0 - * @returns - */ -export default function TopNavBar(props) { - const { className, customNav, customMenu } = props - const [isOpen, changeShow] = useState(false) - const collapseRef = useRef(null) - - const { locale } = useGlobal() - - const defaultLinks = [ - { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('GITBOOK_MENU_CATEGORY', null, CONFIG) }, - { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('GITBOOK_BOOK_MENU_TAG', null, CONFIG) }, - { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('GITBOOK_MENU_ARCHIVE', null, CONFIG) }, - { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('GITBOOK_MENU_SEARCH', null, CONFIG) } - ] - - let links = defaultLinks.concat(customNav) - - const toggleMenuOpen = () => { - changeShow(!isOpen) - } - - // 如果 开启自定义菜单，则覆盖Page生成的菜单 - if (siteConfig('CUSTOM_MENU')) { - links = customMenu - } - - return ( -
- - {/* 移动端折叠菜单 */} - -
- collapseRef.current?.updateCollapseHeight(param)} /> -
- - - {/* 导航栏菜单 */} -
- - {/* 左侧图标Logo */} - - - {/* 折叠按钮、仅移动端显示 */} -
- -
- {isOpen ? : } -
-
- - {/* 桌面端顶部菜单 */} -
- {links && links?.map((link, index) => )} - -
-
-
- ) -} diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js index 7d52f5a7..68940b59 100644 --- a/themes/gitbook/index.js +++ b/themes/gitbook/index.js @@ -1,41 +1,44 @@ 'use client' -import CONFIG from './config' -import { useRouter } from 'next/router' -import { useEffect, useState, createContext, useContext, useRef } from 'react' -import { isBrowser } from '@/lib/utils' -import Footer from './components/Footer' -import InfoCard from './components/InfoCard' -import RevolverMaps from './components/RevolverMaps' -import TopNavBar from './components/TopNavBar' -import SearchInput from './components/SearchInput' -import { useGlobal } from '@/lib/global' -import Live2D from '@/components/Live2D' -import NavPostList from './components/NavPostList' -import ArticleInfo from './components/ArticleInfo' -import Catalog from './components/Catalog' -import Announcement from './components/Announcement' -import PageNavDrawer from './components/PageNavDrawer' -import FloatTocButton from './components/FloatTocButton' -import { AdSlot } from '@/components/GoogleAdsense' -import JumpToTopButton from './components/JumpToTopButton' -import ShareBar from '@/components/ShareBar' -import CategoryItem from './components/CategoryItem' -import TagItemMini from './components/TagItemMini' -import ArticleAround from './components/ArticleAround' import Comment from '@/components/Comment' -import TocDrawer from './components/TocDrawer' -import NotionPage from '@/components/NotionPage' -import { ArticleLock } from './components/ArticleLock' -import { Transition } from '@headlessui/react' -import { Style } from './style' -import BlogArchiveItem from './components/BlogArchiveItem' -import Link from 'next/link' -import dynamic from 'next/dynamic' -import { siteConfig } from '@/lib/config' +import { AdSlot } from '@/components/GoogleAdsense' +import Live2D from '@/components/Live2D' import NotionIcon from '@/components/NotionIcon' +import NotionPage from '@/components/NotionPage' +import ShareBar from '@/components/ShareBar' +import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import { isBrowser } from '@/lib/utils' +import { Transition } from '@headlessui/react' +import dynamic from 'next/dynamic' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { createContext, useContext, useEffect, useRef, useState } from 'react' +import Announcement from './components/Announcement' +import ArticleAround from './components/ArticleAround' +import ArticleInfo from './components/ArticleInfo' +import { ArticleLock } from './components/ArticleLock' +import BlogArchiveItem from './components/BlogArchiveItem' +import Catalog from './components/Catalog' +import CategoryItem from './components/CategoryItem' +import FloatTocButton from './components/FloatTocButton' +import Footer from './components/Footer' +import Header from './components/Header' +import InfoCard from './components/InfoCard' +import JumpToTopButton from './components/JumpToTopButton' +import NavPostList from './components/NavPostList' +import PageNavDrawer from './components/PageNavDrawer' +import RevolverMaps from './components/RevolverMaps' +import SearchInput from './components/SearchInput' +import TagItemMini from './components/TagItemMini' +import TocDrawer from './components/TocDrawer' +import CONFIG from './config' +import { Style } from './style' -const AlgoliaSearchModal = dynamic(() => import('@/components/AlgoliaSearchModal'), { ssr: false }) +const AlgoliaSearchModal = dynamic( + () => import('@/components/AlgoliaSearchModal'), + { ssr: false } +) const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false }) // 主题全局变量 @@ -47,12 +50,14 @@ export const useGitBookGlobal = () => useContext(ThemeGlobalGitbook) */ function getNavPagesWithLatest(allNavPages, latestPosts, post) { // localStorage 保存id和上次阅读时间戳： posts_read_time = {"${post.id}":"Date()"} - const postReadTime = JSON.parse(localStorage.getItem('post_read_time') || '{}'); + const postReadTime = JSON.parse( + localStorage.getItem('post_read_time') || '{}' + ) if (post) { - postReadTime[post.id] = new Date().getTime(); + postReadTime[post.id] = new Date().getTime() } // 更新 - localStorage.setItem('post_read_time', JSON.stringify(postReadTime)); + localStorage.setItem('post_read_time', JSON.stringify(postReadTime)) return allNavPages?.map(item => { const res = { @@ -67,12 +72,14 @@ function getNavPagesWithLatest(allNavPages, latestPosts, post) { lastEditedDate: item.lastEditedDate } // 属于最新文章通常6篇 && (无阅读记录 || 最近更新时间大于上次阅读时间) - if (latestPosts.some(post => post.id === item.id) && - (!postReadTime[item.id] || postReadTime[item.id] < new Date(item.lastEditedDate).getTime()) + if ( + latestPosts.some(post => post.id === item.id) && + (!postReadTime[item.id] || + postReadTime[item.id] < new Date(item.lastEditedDate).getTime()) ) { - return { ...res, isLatest: true }; + return { ...res, isLatest: true } } else { - return res; + return res } }) } @@ -83,8 +90,16 @@ function getNavPagesWithLatest(allNavPages, latestPosts, post) { * @returns {JSX.Element} * @constructor */ -const LayoutBase = (props) => { - const { children, post, allNavPages, latestPosts, slotLeft, slotRight, slotTop } = props +const LayoutBase = props => { + const { + children, + post, + allNavPages, + latestPosts, + slotLeft, + slotRight, + slotTop + } = props const { onLoading, fullWidth } = useGlobal() const router = useRouter() const [tocVisible, changeTocVisible] = useState(false) @@ -99,110 +114,140 @@ const LayoutBase = (props) => { }, [router]) return ( - -