d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +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

3
lib/lang/en-US.js
View File

@@ -66,7 +66,8 @@ export default {
MINUTE: 'min',
WORD_COUNT: 'Words',
READ_TIME: 'Read Time',
NEXT_POST: '下一篇'
NEXT_POST: 'Next',
PREV_POST: 'Prev'
},
PAGINATION: {
PREV: 'Prev',

3
lib/lang/zh-CN.js
View File

@@ -66,7 +66,8 @@ export default {
MINUTE: '分钟',
WORD_COUNT: '字数',
READ_TIME: '阅读时长',
NEXT_POST: '下一篇'
NEXT_POST: '下一篇',
PREV_POST: '上一篇'
},
PAGINATION: {
PREV: '上页',

4
lib/lang/zh-HK.js
View File

@@ -37,7 +37,9 @@ export default {
ARTICLE_LOCK_TIPS: '文章已上鎖，請輸入訪問密碼',
SUBMIT: '提交',
POST_TIME: '发布于',
LAST_EDITED_TIME: '最后更新'
LAST_EDITED_TIME: '最后更新',
NEXT_POST: '下一篇',
PREV_POST: '上一篇'
},
PAGINATION: {
PREV: '上一頁',

4
lib/lang/zh-TW.js
View File

@@ -37,7 +37,9 @@ export default {
ARTICLE_LOCK_TIPS: '文章已上鎖，請輸入訪問密碼',
SUBMIT: '提交',
POST_TIME: '发布于',
LAST_EDITED_TIME: '最后更新'
LAST_EDITED_TIME: '最后更新',
NEXT_POST: '下一篇',
PREV_POST: '上一篇'
},
PAGINATION: {
PREV: '上一頁',

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}

50
themes/gitbook/index.js
View File

@@ -31,7 +31,6 @@ 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 CONFIG from './config'
import { Style } from './style'
@@ -145,25 +144,22 @@ const LayoutBase = props => {
id='wrapper'
className={
(siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : '') +
'relative flex justify-between w-full h-full mx-auto'
'relative flex justify-between w-full gap-x-6 h-full mx-auto max-w-screen-4xl'
}>
{/* 左侧推拉抽屉 */}
{fullWidth ? null : (
<div
className={
'hidden md:block border-r dark:border-transparent relative z-10 dark:bg-hexo-black-gray'
'hidden md:block relative z-10 dark:bg-hexo-black-gray'
}>
<div className='w-72 pt-14 pb-4 px-6 sticky top-0 h-screen flex justify-between flex-col'>
<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'>
<div className='overflow-y-scroll scroll-hidden pt-10'>
{/* 嵌入 */}
{slotLeft}
{/* 搜索框 */}
<SearchInput className='my-3 rounded-md' />
{/* 文章列表 */}
{/* 所有文章列表 */}
<NavPostList filteredNavPages={filteredNavPages} />
<NavPostList filteredNavPages={filteredNavPages} {...props} />
</div>
{/* 页脚 */}
<Footer {...props} />
@@ -171,27 +167,17 @@ const LayoutBase = props => {
</div>
)}
{/* 中间内容区域 */}
<div
id='center-wrapper'
className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen dark:bg-black'>
<div
id='container-inner'
className={`w-full px-7 ${fullWidth ? 'px-10' : 'max-w-3xl'} justify-center mx-auto`}>
className={`w-full ${fullWidth ? 'px-10' : 'max-w-3xl px-3 lg:px-0'} justify-center mx-auto`}>
{slotTop}
<WWAds className='w-full' orientation='horizontal' />
{/* <Transition
show={!onLoading}
appear={true}
enter='transition ease-in-out duration-700 transform order-first'
enterFrom='opacity-0 translate-y-16'
enterTo='opacity-100'
leave='transition ease-in-out duration-300 transform'
leaveFrom='opacity-100 translate-y-0'
leaveTo='opacity-0 -translate-y-16'
unmount={false}> */}
{children}
{/* </Transition> */}
{/* Google广告 */}
<AdSlot type='in-article' />
@@ -207,14 +193,13 @@ const LayoutBase = props => {
</div>
</div>
{/* 右侧侧推拉抽屉 */}
{/* 右侧 */}
{fullWidth ? null : (
<div
style={{ width: '20rem' }}
className={
'hidden xl:block dark:border-transparent flex-shrink-0 relative z-10 '
'w-72 hidden xl:block dark:border-transparent flex-shrink-0 relative z-10 '
}>
<div className='py-14 px-6 sticky top-0'>
<div className='py-14 sticky top-0'>
<ArticleInfo post={props?.post ? props?.post : props.notice} />
<div className='py-4'>
@@ -264,20 +249,20 @@ const LayoutBase = props => {
const LayoutIndex = props => {
const router = useRouter()
useEffect(() => {
router.push(siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)).then(() => {
// console.log('跳转到指定首页', siteConfig('INDEX_PAGE', null, CONFIG))
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', null, CONFIG)
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', null, CONFIG)}的文章</div></blockquote>`
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)
}
}
@@ -350,10 +335,11 @@ const LayoutSlug = props => {
<ShareBar post={post} />
{/* 文章分类和标签信息 */}
<div className='flex justify-between'>
{siteConfig('POST_DETAIL_CATEGORY', null, CONFIG) &&
post?.category && <CategoryItem category={post.category} />}
{siteConfig('POST_DETAIL_CATEGORY') && post?.category && (
<CategoryItem category={post.category} />
)}
<div>
{siteConfig('POST_DETAIL_TAG', null, CONFIG) &&
{siteConfig('POST_DETAIL_TAG') &&
post?.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}

30
themes/simple/components/NavBar.js
View File

@@ -25,7 +25,7 @@ export default function NavBar(props) {
const onKeyUp = e => {
if (e.keyCode === 13) {
const search = document.getElementById('simple-search').value
const search = document.getElementById('simple-search').innerText
if (search) {
router.push({ pathname: '/search/' + search })
}
@@ -33,30 +33,29 @@ export default function NavBar(props) {
}
return (
<nav className="w-full bg-white md:pt-0 relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
<nav className='w-full bg-white md:pt-0 relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black'>
<div
id="nav-bar-inner"
className="h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start"
>
id='nav-bar-inner'
className='h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start'>
{/* 左侧菜单 */}
<div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
<div className='h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4'>
{showSearchInput && (
<input
autoFocus
id="simple-search"
id='simple-search'
onKeyUp={onKeyUp}
className="float-left w-full outline-none h-full px-4"
aria-label="Submit search"
type="search"
name="s"
autoComplete="off"
placeholder="Type then hit enter to search..."
className='float-left w-full outline-none h-full px-4'
aria-label='Submit search'
type='search'
name='s'
autoComplete='off'
placeholder='Type then hit enter to search...'
/>
)}
{!showSearchInput && <MenuList {...props} />}
</div>
<div className="absolute right-12 h-full text-center px-2 flex items-center text-blue-400 cursor-pointer">
<div className='absolute right-12 h-full text-center px-2 flex items-center text-blue-400 cursor-pointer'>
{/* <!-- extra links --> */}
<i
className={
@@ -64,8 +63,7 @@ export default function NavBar(props) {
? 'fa-regular fa-circle-xmark'
: 'fa-solid fa-magnifying-glass' + ' align-middle'
}
onClick={toggleShowSearchInput}
></i>
onClick={toggleShowSearchInput}></i>
</div>
</div>
</nav>