slug 调整 兼容fukasawa主题

This commit is contained in:
tangly1024.com
2024-05-08 15:29:03 +08:00
parent a75a5acd7f
commit ff9d211a0a
4 changed files with 65 additions and 35 deletions

View File

@@ -21,7 +21,7 @@ export const MenuItemCollapse = props => {
return null
}
const selected = router.pathname === link.to || router.asPath === link.to
const selected = router.pathname === link.href || router.asPath === link.href
const toggleShow = () => {
changeShow(!show)
@@ -43,7 +43,7 @@ export const MenuItemCollapse = props => {
onClick={toggleShow}>
{!hasSubMenu && (
<Link
href={link?.to}
href={link?.href}
target={link?.target}
className='dark:text-gray-200 py-2 w-full my-auto items-center justify-between flex '>
<div>
@@ -79,7 +79,7 @@ export const MenuItemCollapse = props => {
className='whitespace-nowrap dark:text-gray-200
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
<Link href={sLink.to} target={link?.target}>
<Link href={sLink.href} target={link?.target}>
<div>
<div
className={`${sLink.icon} text-center w-3 mr-3 text-xs`}

View File

@@ -12,7 +12,7 @@ export const MenuItemDrop = ({ link }) => {
className='relative py-1 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
{!hasSubMenu && (
<Link
href={link?.to}
href={link?.href}
target={link?.target}
className='w-full my-auto items-center justify-between flex '>
<div>
@@ -47,7 +47,7 @@ export const MenuItemDrop = ({ link }) => {
return (
<li key={index}>
<Link
href={sLink.to}
href={sLink.href}
target={link?.target}
className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
{sLink.icon && (

View File

@@ -4,21 +4,23 @@ import { useRouter } from 'next/router'
export const MenuItemNormal = props => {
const { link } = props
const router = useRouter()
const selected = (router.pathname === link.to) || (router.asPath === link.to)
const selected = router.pathname === link.href || router.asPath === link.href
if (!link || !link.show) {
return null
}
return <Link
key={`${link.to}`}
title={link.to}
href={link.to}
className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<div className={'hover:text-black'}>{link.name}</div>
</div>
{link.slot}
return (
<Link
key={`${link.href}`}
title={link.href}
href={link.href}
className={
'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'text-black' : ' ')
}>
<div className='my-auto items-center justify-center flex '>
<div className={'hover:text-black'}>{link.name}</div>
</div>
{link.slot}
</Link>
)
}

View File

@@ -1,19 +1,39 @@
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { siteConfig } from '@/lib/config'
import { MenuItemDrop } from './MenuItemDrop'
import { MenuItemCollapse } from './MenuItemCollapse'
export const MenuList = (props) => {
import { MenuItemDrop } from './MenuItemDrop'
/**
* 菜单列表
* @param {*} props
* @returns
*/
export const MenuList = props => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('FUKASAWA_MENU_CATEGORY', null, CONFIG) },
{ name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('FUKASAWA_MENU_TAG', null, CONFIG) },
{ name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('FUKASAWA_MENU_ARCHIVE', null, CONFIG) },
{ name: locale.NAV.SEARCH, to: '/search', show: siteConfig('FUKASAWA_MENU_SEARCH', null, CONFIG) }
{ name: locale.NAV.INDEX, href: '/' || '/', show: true },
{
name: locale.COMMON.CATEGORY,
href: '/category',
show: siteConfig('FUKASAWA_MENU_CATEGORY', null, CONFIG)
},
{
name: locale.COMMON.TAGS,
href: '/tag',
show: siteConfig('FUKASAWA_MENU_TAG', null, CONFIG)
},
{
name: locale.NAV.ARCHIVE,
href: '/archive',
show: siteConfig('FUKASAWA_MENU_ARCHIVE', null, CONFIG)
},
{
name: locale.NAV.SEARCH,
href: '/search',
show: siteConfig('FUKASAWA_MENU_SEARCH', null, CONFIG)
}
]
if (customNav) {
@@ -29,14 +49,22 @@ export const MenuList = (props) => {
return null
}
return (<>
<menu id='nav-pc' className='hidden md:block text-sm z-10'>
{links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
</menu>
<menu id='nav-mobile' className='block md:hidden text-sm z-10 pb-1'>
{links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={props.onHeightChange}/>)}
</menu>
return (
<>
<menu id='nav-pc' className='hidden md:block text-sm z-10'>
{links?.map((link, index) => (
<MenuItemDrop key={index} link={link} />
))}
</menu>
<menu id='nav-mobile' className='block md:hidden text-sm z-10 pb-1'>
{links?.map((link, index) => (
<MenuItemCollapse
key={index}
link={link}
onHeightChange={props.onHeightChange}
/>
))}
</menu>
</>
)
}