This commit is contained in:
tangly1024
2023-06-23 15:56:59 +08:00
parent 5f29858c37
commit a1708605da
7 changed files with 39 additions and 25 deletions

View File

@@ -4,7 +4,6 @@ import { useRouter } from 'next/router'
import BLOG from '@/blog.config'
import { ALL_THEME, initDarkMode } from '@/themes/theme'
import NProgress from 'nprogress'
import LoadingCover from '@/components/LoadingCover'
import { getQueryVariable, isBrowser } from './utils'
const GlobalContext = createContext()
@@ -22,7 +21,7 @@ export function GlobalContextProvider({ children }) {
const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
const [onReading, setOnReading] = useState(false) // 网页资源加载
// const [onReading, setOnReading] = useState(false) // 网页资源加载
useEffect(() => {
initLocale(lang, locale, updateLang, updateLocale)
@@ -34,7 +33,7 @@ export function GlobalContextProvider({ children }) {
// setOnReading(true)
}
// 监听页面元素加载完
setOnReading(false)
// setOnReading(false)
window.addEventListener('beforeunload', handleBeforeUnload)
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload)
@@ -88,10 +87,8 @@ export function GlobalContextProvider({ children }) {
updateDarkMode,
theme,
setTheme,
switchTheme,
setOnReading
switchTheme
}}>
<LoadingCover onReading={onReading} setOnReading={setOnReading}/>
{children}
</GlobalContext.Provider>
)

View File

@@ -38,6 +38,8 @@ const LayoutBase = props => {
<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'}>
@@ -56,11 +58,9 @@ const LayoutBase = props => {
</div>
</div>
<div id='container-inner' className='w-full relative z-10'>
{/* 顶部导航栏 */}
<TopNavBar {...props} />
<div id='center-wrapper' className='w-full relative z-10 pt-12'>
<div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
<div id='container-inner' className='w-full px-7 max-w-5xl justify-center mx-auto min-h-screen'>
{slotTop}
{onLoading ? LoadingCover : children}
@@ -80,6 +80,21 @@ const LayoutBase = props => {
<Footer title={siteInfo?.title} />
</div>
{/* 左侧推拉抽屉 */}
<div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
<div className='py-14 px-6 sticky top-0'>
<Tabs>
{slotLeft}
<div key={locale.NAV.ABOUT}>
{router.pathname !== '/search' && <SearchInput className='mt-6 mb-12' />}
{showInfoCard && <InfoCard {...props} />}
{CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
</div>
</Tabs>
<Live2D />
</div>
</div>
</main>
{/* 移动端底部导航栏 */}

View File

@@ -1,12 +1,14 @@
import BLOG from '@/blog.config'
import Link from 'next/link'
export default function LogoBar (props) {
export default function LogoBar(props) {
const { siteInfo } = props
return (
<div id='top-wrapper' className='w-full flex items-center '>
<Link href='/' className='text-md md:text-xl dark:text-gray-200'>
{siteInfo?.title}
</Link>
</div>
);
<div id='top-wrapper' className='w-full flex items-center'>
<Link href='/' className='flex text-md md:text-xl dark:text-gray-200'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2' /> {siteInfo?.title}
</Link>
</div>
)
}

View File

@@ -17,7 +17,7 @@ export const MenuItemDrop = ({ link }) => {
return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{hasSubMenu &&
<div className={'px-1 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
<div className={'px-3 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
<div>
{link?.icon && <i className={link?.icon} />} {link?.name}
@@ -27,7 +27,7 @@ export const MenuItemDrop = ({ link }) => {
}
{!hasSubMenu &&
<div className={'px-1 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
<div className={'px-3 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
<Link href={link?.to}>
{link?.icon && <i className={link?.icon} />} {link?.name}

View File

@@ -42,7 +42,7 @@ export default function TopNavBar(props) {
}
return (
<div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
<div id='top-nav' className={'fixed top-0 w-full z-40 ' + className}>
{/* 移动端折叠菜单 */}
<Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>

View File

@@ -21,7 +21,7 @@ const ThemeGlobalMedium = createContext()
* @constructor
*/
const LayoutBase = props => {
const { children, meta, showInfoCard = true, slotLeft, slotTop, siteInfo } = props
const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo } = props
const { locale } = useGlobal()
const router = useRouter()
const [tocVisible, changeTocVisible] = useState(false)
@@ -43,7 +43,7 @@ const LayoutBase = props => {
{/* 桌面端左侧菜单 */}
{/* <LeftMenuBar/> */}
<div id='container-inner' className='w-full relative z-10'>
<div id='container-wrapper' className='w-full relative z-10'>
{/* 顶部导航栏 */}
<TopNavBar {...props} />
@@ -71,7 +71,7 @@ const LayoutBase = props => {
<div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
<div className='py-14 px-6 sticky top-0'>
<Tabs>
{slotLeft}
{slotRight}
<div key={locale.NAV.ABOUT}>
{router.pathname !== '/search' && <SearchInput className='mt-6 mb-12' />}
{showInfoCard && <InfoCard {...props} />}

View File

@@ -17,7 +17,7 @@ export const MenuItemDrop = ({ link }) => {
return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{hasSubMenu &&
<div className={'px-1 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
<div className={'px-3 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
<div>
{link?.icon && <i className={link?.icon} />} {link?.name}
@@ -27,7 +27,7 @@ export const MenuItemDrop = ({ link }) => {
}
{!hasSubMenu &&
<div className={'px-1 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
<div className={'px-3 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
<Link href={link?.to}>
{link?.icon && <i className={link?.icon} />} {link?.name}