检查build

This commit is contained in:
tangly1024.com
2023-07-05 12:50:57 +08:00
parent a2b593d9db
commit 705e15a202
14 changed files with 36 additions and 276 deletions

View File

@@ -1,138 +0,0 @@
import CommonHead from '@/components/CommonHead'
import { useState, createContext, useContext, useEffect } from 'react'
import Footer from './components/Footer'
import InfoCard from './components/InfoCard'
import RevolverMaps from './components/RevolverMaps'
import CONFIG_GITBOOK from './config_gitbook'
import TopNavBar from './components/TopNavBar'
import SearchInput from './components/SearchInput'
import { useGlobal } from '@/lib/global'
import Live2D from '@/components/Live2D'
import BLOG from '@/blog.config'
import NavPostList from './components/NavPostList'
import ArticleInfo from './components/ArticleInfo'
import Catalog from './components/Catalog'
import { useRouter } from 'next/router'
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'
const ThemeGlobalMedium = createContext()
/**
* 基础布局 采用左右两侧布局,移动端使用顶部导航栏
* @returns {JSX.Element}
* @constructor
*/
const LayoutBase = (props) => {
const { children, meta, post, allNavPages, slotLeft, slotRight, slotTop } = props
const [tocVisible, changeTocVisible] = useState(false)
const [pageNavVisible, changePageNavVisible] = useState(false)
const [filterPosts, setFilterPosts] = useState(allNavPages)
const { onLoading } = useGlobal()
const router = useRouter()
const showTocButton = post?.toc?.length > 1
useEffect(() => {
setFilterPosts(allNavPages)
}, [post])
const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
<div className='w-full h-screen flex justify-center items-center'>
<i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin"> </i>
</div>
</div>
return (
<ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible, filterPosts, setFilterPosts, allNavPages, pageNavVisible, changePageNavVisible }}>
<CommonHead meta={meta} />
<div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
{/* 顶部导航栏 */}
<TopNavBar {...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 md:block border-r dark:border-transparent relative z-10 '}>
<div className='pt-14 pb-4 px-6 sticky top-0 overflow-y-scroll h-screen flex flex-col justify-between'>
{slotLeft}
<SearchInput className='my-3 rounded-md' />
{/* 所有文章列表 */}
<NavPostList posts={filterPosts} />
<div className='mt-2'>
<Footer {...props} />
</div>
</div>
</div>
<div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-12 min-h-screen'>
<div id='container-inner' className='w-full px-7 max-w-3xl justify-center mx-auto'>
{slotTop}
<AdSlot type='in-article' />
{onLoading ? LoadingCover : children}
<AdSlot type='in-article' />
{/* 回顶按钮 */}
<JumpToTopButton />
</div>
{/* 底部 */}
<div className='md:hidden'>
<Footer {...props}/>
</div>
<div className='text-center'>
<AdSlot type='native' />
</div>
</div>
{/* 右侧侧推拉抽屉 */}
<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} />
<div className='py-6'>
<Catalog {...props} />
{slotRight}
{router.route === '/' && <>
<InfoCard {...props} />
{CONFIG_GITBOOK.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
<Live2D />
</>}
{/* gitbook主题首页只显示公告 */}
<Announcement {...props} />
</div>
<Live2D />
</div>
</div>
</main>
{showTocButton && !tocVisible && <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
<FloatTocButton {...props} />
</div>}
<PageNavDrawer {...props} />
{/* 移动端底部导航栏 */}
{/* <BottomMenuBar {...props} className='block md:hidden' /> */}
</div>
</ThemeGlobalMedium.Provider>
)
}
export default LayoutBase
export const useGitBookGlobal = () => useContext(ThemeGlobalMedium)

View File

@@ -3,7 +3,6 @@ import { useRouter } from 'next/router'
import { useEffect, useState, createContext, useContext } from 'react' import { useEffect, useState, createContext, useContext } from 'react'
import { isBrowser } from '@/lib/utils' import { isBrowser } from '@/lib/utils'
import CommonHead from '@/components/CommonHead' import CommonHead from '@/components/CommonHead'
import Footer from './components/Footer' import Footer from './components/Footer'
import InfoCard from './components/InfoCard' import InfoCard from './components/InfoCard'
import RevolverMaps from './components/RevolverMaps' import RevolverMaps from './components/RevolverMaps'
@@ -41,7 +40,7 @@ export const useGitBookGlobal = () => useContext(ThemeGlobalGitbook)
* @constructor * @constructor
*/ */
const LayoutBase = (props) => { const LayoutBase = (props) => {
const { children, meta, post, allNavPages, slotLeft, slotRight, slotTop, siteInfo } = props const { children, meta, post, allNavPages, slotLeft, slotRight, slotTop } = props
const { onLoading } = useGlobal() const { onLoading } = useGlobal()
const router = useRouter() const router = useRouter()
const [tocVisible, changeTocVisible] = useState(false) const [tocVisible, changeTocVisible] = useState(false)
@@ -71,8 +70,10 @@ const LayoutBase = (props) => {
<SearchInput className='my-3 rounded-md' /> <SearchInput className='my-3 rounded-md' />
{/* 所有文章列表 */} {/* 所有文章列表 */}
<NavPostList posts={filterPosts} /> <NavPostList posts={filterPosts} />
<AdSlot />
</div> <div className='mt-2'>
<Footer {...props} />
</div> </div>
</div> </div>
<div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-12 min-h-screen'> <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-12 min-h-screen'>
@@ -87,7 +88,9 @@ const LayoutBase = (props) => {
</div> </div>
{/* 底部 */} {/* 底部 */}
<Footer title={siteInfo?.title} /> <div className='md:hidden'>
<Footer {...props}/>
</div>
<div className='text-center'> <div className='text-center'>
<AdSlot type='native' /> <AdSlot type='native' />
</div> </div>
@@ -110,7 +113,7 @@ const LayoutBase = (props) => {
<Announcement {...props} /> <Announcement {...props} />
</div> </div>
<AdSlot /> <Live2D />
</div> </div>
</div> </div>
@@ -124,6 +127,10 @@ const LayoutBase = (props) => {
{/* 移动端导航抽屉 */} {/* 移动端导航抽屉 */}
<PageNavDrawer {...props} /> <PageNavDrawer {...props} />
{/* 移动端底部导航栏 */}
{/* <BottomMenuBar {...props} className='block md:hidden' /> */}
</div> </div>
</ThemeGlobalGitbook.Provider> </ThemeGlobalGitbook.Provider>
) )

View File

@@ -28,10 +28,10 @@ export const MenuItemDrop = ({ link }) => {
{/* 子菜单 */} {/* 子菜单 */}
{hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block `}> {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block `}>
{link.subMenus.map(sLink => { {link.subMenus.map((sLink, index) => {
return <li key={sLink.id} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-2'> return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-2'>
<Link href={sLink.to}> <Link href={sLink.to}>
<span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span> <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link> </Link>
</li> </li>
})} })}

View File

@@ -1,10 +0,0 @@
import BlogPostListPage from './components/BlogPostListPage'
import LayoutBase from './LayoutBase'
export const LayoutPage = (props) => {
return <LayoutBase {...props}>
<BlogPostListPage {...props}/>
</LayoutBase>
}
export default LayoutPage

View File

@@ -1,6 +1,6 @@
import Link from 'next/link' import Link from 'next/link'
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import TagItemMiddle from './components/TagItemMiddle' import TagItemMiddle from './TagItemMiddle'
export default function BlogListBar(props) { export default function BlogListBar(props) {
const { category, categoryOptions, tag, tagOptions } = props const { category, categoryOptions, tag, tagOptions } = props
@@ -8,8 +8,7 @@ export default function BlogListBar(props) {
if (category) { if (category) {
return ( return (
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black"> <div className="drop-shadow-xl w-full mt-14 lg:mt-6 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
<div className='flex justify-center flex-wrap'> <div className='flex justify-center flex-wrap'>
{categoryOptions?.map(e => { {categoryOptions?.map(e => {
const selected = e.name === category const selected = e.name === category
@@ -27,12 +26,10 @@ export default function BlogListBar(props) {
) )
} else if (tag) { } else if (tag) {
return <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black"> return <div className="drop-shadow-xl w-full mt-14 lg:mt-6 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
<div className="dark:text-gray-200 py-5 text-center text-2xl"> <div className="dark:text-gray-200 py-5 text-center text-2xl">
<i className="fas fa-tags" /> {locale.COMMON.TAGS} <i className="fas fa-tags" /> {locale.COMMON.TAGS}
</div> </div>
<div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12"> <div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
{tagOptions?.map(e => { {tagOptions?.map(e => {
const selected = tag === e.name const selected = tag === e.name

View File

@@ -1,4 +1,4 @@
import { useEffect, useRef } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import throttle from 'lodash.throttle' import throttle from 'lodash.throttle'
import { uuidToId } from 'notion-utils' import { uuidToId } from 'notion-utils'
import Progress from './Progress' import Progress from './Progress'
@@ -26,9 +26,9 @@ const Catalog = ({ toc }) => {
const tocIds = [] const tocIds = []
// 同步选中目录事件 // 同步选中目录事件
const [activeSection, setActiveSection] = React.useState(null) const [activeSection, setActiveSection] = useState(null)
const throttleMs = 200 const throttleMs = 200
const actionSectionScrollSpy = React.useCallback(throttle(() => { const actionSectionScrollSpy = useCallback(throttle(() => {
const sections = document.getElementsByClassName('notion-h') const sections = document.getElementsByClassName('notion-h')
let prevBBox = null let prevBBox = null
let currentSectionId = activeSection let currentSectionId = activeSection

View File

@@ -13,7 +13,7 @@ const PaginationSimple = ({ page, totalPage }) => {
const currentPage = +page const currentPage = +page
const showNext = currentPage < totalPage const showNext = currentPage < totalPage
const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '') const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
console.log(currentPage, showNext)
return ( return (
<div className="my-10 mx-6 flex justify-between font-medium text-black dark:text-gray-100 space-x-2"> <div className="my-10 mx-6 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link <Link
@@ -29,7 +29,7 @@ const PaginationSimple = ({ page, totalPage }) => {
<button <button
rel="prev" rel="prev"
className={`${ className={`${
currentPage === 1 ? ' bg-gray-300 text-gray-500 pointer-events-none ' : 'block text-white bg-indigo-700' currentPage === 1 ? 'opacity-20 bg-gray-200 text-gray-500 pointer-events-none ' : 'block text-white bg-indigo-700'
} duration-200 px-3.5 py-2 hover:border-black rounded-full`} > } duration-200 px-3.5 py-2 hover:border-black rounded-full`} >
<i className='fas fa-angle-left text-2xl'/> <i className='fas fa-angle-left text-2xl'/>
</button> </button>
@@ -44,7 +44,7 @@ const PaginationSimple = ({ page, totalPage }) => {
<button <button
rel="next" rel="next"
className={`${ className={`${
+showNext ? 'text-white bg-indigo-700 ' : ' bg-gray-300 text-gray-500 pointer-events-none ' +showNext ? 'text-white bg-indigo-700 ' : ' opacity-20 bg-gray-200 text-gray-500 pointer-events-none '
} duration-200 px-4 py-2 hover:border-black rounded-full`} } duration-200 px-4 py-2 hover:border-black rounded-full`}
> >
<i className='fas fa-angle-right text-2xl'/> <i className='fas fa-angle-right text-2xl'/>

View File

@@ -1,13 +1,13 @@
import JumpToTopButton from './components/JumpToTopButton' import JumpToTopButton from './JumpToTopButton'
import FloatDarkModeButton from './components/FloatDarkModeButton' import FloatDarkModeButton from './FloatDarkModeButton'
import SocialButton from './components/SocialButton' import SocialButton from './SocialButton'
/** /**
* 右下角悬浮按钮 * 右下角悬浮按钮
* @param {*} param0 * @param {*} param0
* @returns * @returns
*/ */
export default function RightFloatButtons({ props }) { export default function RightFloatButtons(props) {
const { floatRightBottom } = props const { floatRightBottom } = props
return <div className="bottom-40 right-2 fixed justify-end space-y-2 z-20"> return <div className="bottom-40 right-2 fixed justify-end space-y-2 z-20">
<FloatDarkModeButton /> <FloatDarkModeButton />

View File

@@ -1,7 +1,7 @@
import SearchInput from './components/SearchInput' import SearchInput from './SearchInput'
import TagItemMini from './components/TagItemMini' import TagItemMini from './TagItemMini'
import Card from './components/Card' import Card from './Card'
import Link from 'next/link' import Link from 'next/link'
import { useEffect, useRef } from 'react' import { useEffect, useRef } from 'react'
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'

View File

@@ -101,8 +101,7 @@ const LayoutIndex = (props) => {
*/ */
const LayoutPostList = (props) => { const LayoutPostList = (props) => {
return ( return (
<LayoutBase {...props} > <LayoutBase {...props} containerSlot={<BlogListBar {...props} />}>
<BlogListBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />} {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</LayoutBase> </LayoutBase>
) )

View File

@@ -1,96 +0,0 @@
import LayoutBase from './LayoutBase'
import { useGlobal } from '@/lib/global'
import React from 'react'
import Catalog from './components/Catalog'
import { ArticleLock } from './components/ArticleLock'
import formatDate from '@/lib/formatDate'
import BLOG from '@/blog.config'
import Link from 'next/link'
import NotionPage from '@/components/NotionPage'
import CONFIG_MEDIUM from './config_medium'
import Comment from '@/components/Comment'
import ArticleAround from './components/ArticleAround'
import TocDrawer from './components/TocDrawer'
import CategoryItem from './components/CategoryItem'
import TagItemMini from './components/TagItemMini'
import ShareBar from '@/components/ShareBar'
export const LayoutSlug = props => {
const { post, prev, next, siteInfo, lock, validPassword } = props
const { locale } = useGlobal()
const date = formatDate(
post?.publishTime || post?.createdTime,
locale.LOCALE
)
if (!post) {
return <LayoutBase {...props} showInfoCard={true} />
}
const slotRight = post?.toc && post?.toc?.length >= 3 && (
<div key={locale.COMMON.TABLE_OF_CONTENTS} >
<Catalog toc={post.toc} />
{/* <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' /> */}
</div>
)
return (
<LayoutBase showInfoCard={true} slotRight={slotRight} {...props} >
{/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id='container'>
{/* title */}
<h1 className="text-3xl pt-12 dark:text-gray-300">{post?.title}</h1>
{/* meta */}
<section className="py-2 items-center text-sm px-1">
<div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
<span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
<span className='mx-1'>|</span>
<span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2' />{post.lastEditedTime}</span>
<div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
<i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
</div>
</div>
<Link href="/about" passHref legacyBehavior>
<div className='flex pt-2'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
<div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
{BLOG.AUTHOR}
</div>
</div>
</Link>
</section>
{/* Notion文章主体 */}
<section id="notion-article" className="px-1 max-w-4xl">
{post && (<NotionPage post={post} />)}
</section>
<section>
{/* 分享 */}
<ShareBar post={post} />
{/* 文章分类和标签信息 */}
<div className='flex justify-between'>
{CONFIG_MEDIUM.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} />)}
</div>
</div>
{post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
<Comment frontMatter={post} />
</section>
<TocDrawer {...props} />
</div>}
</LayoutBase>
)
}
export default LayoutSlug

View File

@@ -1,6 +1,6 @@
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
import { useMediumGlobal } from '../LayoutBase' import { useMediumGlobal } from '@/themes/medium'
import JumpToTopButton from './JumpToTopButton' import JumpToTopButton from './JumpToTopButton'
export default function BottomMenuBar ({ post, className }) { export default function BottomMenuBar ({ post, className }) {

View File

@@ -1,5 +1,5 @@
import Catalog from './Catalog' import Catalog from './Catalog'
import { useMediumGlobal } from '../LayoutBase' import { useMediumGlobal } from '@/themes/medium'
/** /**
* 悬浮抽屉目录 * 悬浮抽屉目录

View File

@@ -313,6 +313,7 @@ const LayoutTagIndex = props => {
export { export {
CONFIG_MEDIUM as THEME_CONFIG, CONFIG_MEDIUM as THEME_CONFIG,
LayoutIndex, LayoutIndex,
LayoutPostList,
LayoutSearch, LayoutSearch,
LayoutArchive, LayoutArchive,
LayoutSlug, LayoutSlug,