d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

hexo-custom-menu-apart

Browse Source
This commit is contained in:
tangly1024
2023-03-20 08:15:06 +08:00
parent a64e3d3dce
commit 9db5ba7011
5 changed files with 90 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Sakura.js
View File

@@ -11,7 +11,7 @@ export const Sakura = () => {
useEffect(() => {
createSakura({})
return () => destroyRibbon()
return () => destroySakura()
}, [])
return <></>
}

2
pages/[...slug].js
View File

@@ -49,7 +49,7 @@ const Slug = props => {
})
}
}
}, 8 * 1000) // 404时长
}, 8 * 1000) // 404时长 8秒
const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading`, image: siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE }
return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
}

67
themes/hexo/components/DropMenu.js Normal file
View File

@@ -0,0 +1,67 @@
import Link from 'next/link'
import { useState } from 'react'
export const DropMenu = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{!hasSubMenu &&
<Link
href={link?.to}
className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
{link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
</Link>}
{hasSubMenu && <>
<div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
{link?.name}
<i className='px-2 fa fa-angle-down'></i>
</div>
</>}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-blue-500 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-xs font-extralight'>{sLink.title}</span>
</Link>
</li>
})}
</ul>}
</div>
}
// <Link
// key={`${link.to}`}
// title={link.to}
// href={link.to}
// target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
// className={'py-1.5 my-1 px-3 text-base justify-center items-center cursor-pointer'}>
// <div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
// <i className={`${link.icon} mr-1`}/>
// <div className='text-center'>{link.name}</div>
// </div>
// </Link>
// return (
// <Link
// key={`${link.to}`}
// title={link.to}
// href={link.to}
// className={'py-1.5 px-5 text-base justify-between hover:bg-indigo-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
// (selected ? 'bg-gray-200 text-black' : ' ')}>
// <div className='my-auto items-center justify-center flex '>
// <i className={`${link.icon} w-4 text-center`} />
// <div className={'ml-4'}>{link.name}</div>
// </div>
// {link.slot}
// </Link>
// )

36
themes/hexo/components/MenuButtonGroupTop.js
View File

@@ -1,10 +1,11 @@
import React from 'react'
import Link from 'next/link'
import { useGlobal } from '@/lib/global'
import CONFIG_HEXO from '../config_hexo'
import { DropMenu } from './DropMenu'
import BLOG from '@/blog.config'
const MenuButtonGroupTop = (props) => {
const { customNav } = props
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
@@ -19,30 +20,15 @@ const MenuButtonGroupTop = (props) => {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<nav id='nav' className='leading-8 flex justify-center font-light w-full'>
{links.map(link => {
if (link.show) {
return (
<Link
key={`${link.to}`}
title={link.to}
href={link.to}
target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
className={'py-1.5 my-1 px-3 text-base justify-center items-center cursor-pointer'}>
<div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
<i className={`${link.icon} mr-1`}/>
<div className='text-center'>{link.name}</div>
</div>
</Link>
)
} else {
return null
}
})}
</nav>
<nav id='nav' className='leading-8 flex justify-center font-light w-full'>
{links.map(link => link && link.show && <DropMenu key={link.id} link={link} />)}
</nav>
)
}
export default MenuButtonGroupTop

29
themes/hexo/components/MenuList.js
View File

@@ -1,11 +1,12 @@
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
import CONFIG_HEXO from '../config_hexo'
import BLOG from '@/blog.config'
import { DropMenu } from './DropMenu'
const MenuList = (props) => {
const { postCount, customNav } = props
const { postCount, customNav, customMenu } = props
const { locale } = useGlobal()
const router = useRouter()
const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
@@ -21,32 +22,22 @@ const MenuList = (props) => {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 '>
{links.map(link => {
if (link && link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return (
<Link
key={`${link.to}`}
title={link.to}
href={link.to}
className={'py-1.5 px-5 text-base justify-between hover:bg-indigo-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
(selected ? 'bg-gray-200 text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<i className={`${link.icon} w-4 text-center`} />
<div className={'ml-4'}>{link.name}</div>
</div>
{link.slot}
</Link>
);
return <DropMenu key={link.id} selected={selected} link={link} />
} else {
return null
}
})}
</nav>
);
)
}
export default MenuList