d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-31 23:16:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

gitbook 改版

Browse Source
This commit is contained in:
tangly1024.com
2024-09-24 11:39:18 +08:00
parent d94344c14a
commit fd4e96506b
13 changed files with 130 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
themes/gitbook/components/ArticleAround.js
View File

@@ -1,3 +1,4 @@
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
/**
@@ -9,21 +10,29 @@ export default function ArticleAround({ prev, next }) {
if (!prev || !next) {
return <></>
}
const { locale } = useGlobal()
return (
<section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
<section className='text-gray-800 dark:text-gray-400 flex items-center justify-between gap-x-3 my-4'>
<Link
href={prev.href}
passHref
className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
<i className='mr-1 fas fa-angle-double-left' />
{prev.title}
className='rounded border w-full h-20 px-3 cursor-pointer justify-between items-center flex hover:text-green-500 duration-300'>
<i className='mr-1 fas fa-angle-left' />
<div>
<div>{locale.COMMON.PREV_POST}</div>
<div>{prev.title}</div>
</div>
</Link>
<Link
href={next.href}
passHref
className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
{next.title}
<i className='ml-1 my-1 fas fa-angle-double-right' />
className='rounded border w-full h-20 px-3 cursor-pointer justify-between items-center flex hover:text-green-500 duration-300'>
<div>
<div>{locale.COMMON.NEXT_POST}</div>
<div> {next.title}</div>
</div>
<i className='ml-1 my-1 fas fa-angle-right' />
</Link>
</section>
)

12
themes/gitbook/components/BlogPostCard.js
View File

@@ -3,7 +3,6 @@ import NotionIcon from '@/components/NotionIcon'
import { siteConfig } from '@/lib/config'
import Link from 'next/link'
import { useRouter } from 'next/router'
import CONFIG from '../config'
const BlogPostCard = ({ post, className }) => {
const router = useRouter()
@@ -14,8 +13,8 @@ const BlogPostCard = ({ post, className }) => {
<Link href={post?.href} passHref>
<div
key={post.id}
className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600
${currentSelected && 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600'}`}>
className={`${className} relative py-1.5 cursor-pointer px-1.5 rounded-md hover:bg-gray-50
${currentSelected ? 'text-green-500 dark:bg-yellow-100 dark:text-yellow-600 font-semibold' : ' dark:hover:bg-yellow-100 dark:hover:text-yellow-600'}`}>
<div className='w-full select-none'>
{siteConfig('POST_TITLE_ICON') && (
<NotionIcon icon={post?.pageIcon} />
@@ -23,10 +22,9 @@ const BlogPostCard = ({ post, className }) => {
{post.title}
</div>
{/* 最新文章加个红点 */}
{post?.isLatest &&
siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && (
<Badge />
)}
{post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE') && (
<Badge />
)}
</div>
</Link>
)

13
themes/gitbook/components/Catalog.js
View File

@@ -1,4 +1,3 @@
import { useGlobal } from '@/lib/global'
import { isBrowser } from '@/lib/utils'
import throttle from 'lodash.throttle'
import { uuidToId } from 'notion-utils'
@@ -14,7 +13,6 @@ const Catalog = ({ post }) => {
const toc = post?.toc
// 同步选中目录事件
const [activeSection, setActiveSection] = useState(null)
const {locale}= useGlobal()
// 监听滚动事件
useEffect(() => {
@@ -69,25 +67,28 @@ const Catalog = ({ post }) => {
return (
<>
<div className='w-full hidden md:block'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
{/* <div className='w-full hidden md:block'>
<i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}
</div> */}
<div
id='toc-wrapper'
className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>
<nav className='h-full text-black'>
<nav className='h-full text-black'>
{toc?.map(tocItem => {
const id = uuidToId(tocItem.id)
return (
<a
key={id}
href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
className={`border-l pl-4 notion-table-of-contents-item duration-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 ? 'font-bold text-gray-500 underline' : ''}`}>
className={`truncate ${activeSection === id ? 'border-green-500 font-bold text-gray-500 underline' : ''}`}>
{tocItem.text}
</span>
</a>

67
themes/gitbook/components/Header.js
View File

@@ -7,6 +7,7 @@ import CONFIG from '../config'
import LogoBar from './LogoBar'
import { MenuBarMobile } from './MenuBarMobile'
import { MenuItemDrop } from './MenuItemDrop'
import SearchInput from './SearchInput'
/**
* 页头：顶部导航栏 + 菜单
@@ -60,6 +61,43 @@ 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='max-w-screen-4xl w-full flex gap-x-3 justify-between items-center'>
{/* 左侧*/}
<div className='flex'>
<LogoBar {...props} />
{/* 桌面端顶部菜单 */}
<div className='hidden md:flex'>
{links &&
links?.map((link, index) => (
<MenuItemDrop key={index} link={link} />
))}
</div>
</div>
{/* 右侧 */}
<div className='flex items-center gap-3'>
<SearchInput className='hidden md:flex md:w-52 lg:w-72' />
<DarkModeButton className='text-sm items-center h-full hidden md:flex' />
{/* 折叠按钮、仅移动端显示 */}
<div className='mr-1 flex md:hidden justify-end items-center space-x-4 dark:text-gray-200'>
<DarkModeButton className='flex text-md items-center h-full' />
<div
onClick={toggleMenuOpen}
className='cursor-pointer text-lg hover:scale-110 duration-150'>
{isOpen ? (
<i className='fas fa-times' />
) : (
<i className='fa-solid fa-bars' />
)}
</div>
</div>
</div>
</div>
</div>
{/* 移动端折叠菜单 */}
<Collapse
type='vertical'
@@ -75,35 +113,6 @@ export default function Header(props) {
/>
</div>
</Collapse>
{/* 导航栏菜单 */}
<div className='flex w-full h-14 shadow glassmorphism bg-white dark:bg-hexo-black-gray px-7 items-between'>
{/* 左侧图标Logo */}
<LogoBar {...props} />
{/* 折叠按钮、仅移动端显示 */}
<div className='mr-1 flex md:hidden justify-end items-center space-x-4 dark:text-gray-200'>
<DarkModeButton className='flex text-md items-center h-full' />
<div
onClick={toggleMenuOpen}
className='cursor-pointer text-lg hover:scale-110 duration-150'>
{isOpen ? (
<i className='fas fa-times' />
) : (
<i className='fa-solid fa-bars' />
)}
</div>
</div>
{/* 桌面端顶部菜单 */}
<div className='hidden md:flex'>
{links &&
links?.map((link, index) => (
<MenuItemDrop key={index} link={link} />
))}
<DarkModeButton className='text-sm flex items-center h-full' />
</div>
</div>
</div>
)
}

9
themes/gitbook/components/NavPostItem.js
View File

@@ -2,7 +2,6 @@ import Badge from '@/components/Badge'
import Collapse from '@/components/Collapse'
import { siteConfig } from '@/lib/config'
import { useEffect, useState } from 'react'
import CONFIG from '../config'
import BlogPostCard from './BlogPostCard'
/**
@@ -14,7 +13,7 @@ import BlogPostCard from './BlogPostCard'
*/
const NavPostItem = props => {
const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND', false, CONFIG)
const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND')
const [isTouchDevice, setIsTouchDevice] = useState(false)
// 检测是否为触摸设备
@@ -55,13 +54,15 @@ const NavPostItem = props => {
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'
key={group?.category}>
<span>{group?.category}</span>
<span className={`${expanded && 'font-semibold'}`}>
{group?.category}
</span>
<div className='inline-flex items-center select-none pointer-events-none '>
<i
className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-700 ${expanded ? '-rotate-90' : ''}`}></i>
</div>
{groupHasLatest &&
siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&
siteConfig('GITBOOK_LATEST_POST_RED_BADGE') &&
!expanded && <Badge />}
</div>
<Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>

16
themes/gitbook/components/NavPostList.js
View File

@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import CONFIG from '../config'
import BlogPostCard from './BlogPostCard'
import NavPostItem from './NavPostItem'
/**
@@ -13,7 +14,7 @@ import NavPostItem from './NavPostItem'
* @constructor
*/
const NavPostList = props => {
const { filteredNavPages } = props
const { filteredNavPages, post } = props
const { locale, currentSearch } = useGlobal()
const router = useRouter()
@@ -80,11 +81,22 @@ const NavPostList = props => {
</div>
)
}
// 如果href
const href = siteConfig('GITBOOK_INDEX_PAGE') + ''
const homePost = {
id: '-1',
title: siteConfig('DESCRIPTION'),
href: href.indexOf('/') !== 0 ? '/' + href : href
}
return (
<div
id='posts-wrapper'
className='w-full flex-grow space-y-0.5 tracking-wider'>
className='w-full flex-grow space-y-0.5 pr-4 tracking-wider'>
{/* 当前文章 */}
<BlogPostCard className='text-sm py-2' post={homePost} />
{/* 文章列表 */}
{categoryFolders?.map((group, index) => (
<NavPostItem

5
themes/gitbook/components/SearchInput.js
View File

@@ -103,13 +103,14 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
}
return (
<div className={'flex w-full'}>
<div className={`${className}`}>
<input
ref={searchInputRef}
type='text'
className={`${className} 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-gray-800 dark:text-white`}
onFocus={handleFocus}
onKeyUp={handleKeyUp}
placeholder='Search'
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}