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

slug调整 兼容commerce主题

Browse Source
This commit is contained in:
tangly1024.com
2024-05-08 15:22:01 +08:00
parent b1b38bcde8
commit 7db60ffa10
8 changed files with 179 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/commerce/components/Footer.js
View File

@@ -62,7 +62,7 @@ const Footer = props => {
<Link
key={`${menu.name}`}
title={`${menu.name}`}
href={`${menu.to}`}
href={`${menu.href}`}
passHref>
{menu.name}
</Link>

108
themes/commerce/components/Header.js
View File

@@ -1,12 +1,12 @@
import LogoBar from './LogoBar'
import { useEffect, useRef, useState } from 'react'
import Collapse from '@/components/Collapse'
import { MenuBarMobile } from './MenuBarMobile'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { MenuItemDrop } from './MenuItemDrop'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import throttle from 'lodash.throttle'
import { useEffect, useRef, useState } from 'react'
import CONFIG from '../config'
import LogoBar from './LogoBar'
import { MenuBarMobile } from './MenuBarMobile'
import { MenuItemDrop } from './MenuItemDrop'
/**
* 顶部导航栏 + 菜单
@@ -21,10 +21,30 @@ export default function Header(props) {
const { locale } = useGlobal()
const defaultLinks = [
{ icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
{
icon: 'fas fa-th',
name: locale.COMMON.CATEGORY,
href: '/category',
show: CONFIG.MENU_CATEGORY
},
{
icon: 'fas fa-tag',
name: locale.COMMON.TAGS,
href: '/tag',
show: CONFIG.MENU_TAG
},
{
icon: 'fas fa-archive',
name: locale.NAV.ARCHIVE,
href: '/archive',
show: CONFIG.MENU_ARCHIVE
},
{
icon: 'fas fa-search',
name: locale.NAV.SEARCH,
href: '/search',
show: CONFIG.MENU_SEARCH
}
]
let links = defaultLinks.concat(customNav)
@@ -65,32 +85,52 @@ export default function Header(props) {
return null
}
return <div id='top-navbar-wrapper' className={'sticky top-0 w-full z-40 shadow bg-white dark:bg-hexo-black-gray '}>
return (
<div
id='top-navbar-wrapper'
className={
'sticky top-0 w-full z-40 shadow bg-white dark:bg-hexo-black-gray '
}>
{/* 导航栏菜单内容 */}
<div
id='top-navbar'
className='px-4 flex w-full mx-auto max-w-screen-xl h-24 transition-all duration-200 items-between'>
{/* 左侧图标Logo */}
<LogoBar {...props} />
{/* 导航栏菜单内容 */}
<div id="top-navbar" className='px-4 flex w-full mx-auto max-w-screen-xl h-24 transition-all duration-200 items-between'>
{/* 左侧图标Logo */}
<LogoBar {...props} />
{/* 移动端折叠按钮 */}
<div className='mr-1 flex md:hidden justify-end items-center text-lg space-x-4 font-serif dark:text-gray-200'>
<div onClick={toggleMenuOpen} className='cursor-pointer'>
{isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
</div>
</div>
{/* 桌面端顶部菜单 */}
<div className='hidden md:flex items-center'>
{links && links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
</div>
{/* 移动端折叠按钮 */}
<div className='mr-1 flex md:hidden justify-end items-center text-lg space-x-4 font-serif dark:text-gray-200'>
<div onClick={toggleMenuOpen} className='cursor-pointer'>
{isOpen ? (
<i className='fas fa-times' />
) : (
<i className='fas fa-bars' />
)}
</div>
</div>
{/* 移动端折叠菜单 */}
<Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
<div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
<MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
</div>
</Collapse>
{/* 桌面端顶部菜单 */}
<div className='hidden md:flex items-center'>
{links &&
links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
</div>
</div>
{/* 移动端折叠菜单 */}
<Collapse
type='vertical'
collapseRef={collapseRef}
isOpen={isOpen}
className='md:hidden'>
<div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
<MenuBarMobile
{...props}
onHeightChange={param =>
collapseRef.current?.updateCollapseHeight(param)
}
/>
</div>
</Collapse>
</div>
)
}

26
themes/commerce/components/MenuBarMobile.js
View File

@@ -1,18 +1,22 @@
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { MenuItemCollapse } from './MenuItemCollapse'
import { siteConfig } from '@/lib/config'
export const MenuBarMobile = (props) => {
export const MenuBarMobile = props => {
const { customMenu, customNav } = props
const { locale } = useGlobal()
let links = [
// { name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
{ name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
{ name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
// { name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
// { name: locale.NAV.INDEX, href: '/' || '/', show: true },
{
name: locale.COMMON.CATEGORY,
href: '/category',
show: CONFIG.MENU_CATEGORY
},
{ name: locale.COMMON.TAGS, href: '/tag', show: CONFIG.MENU_TAG },
{ name: locale.NAV.ARCHIVE, href: '/archive', show: CONFIG.MENU_ARCHIVE }
// { name: locale.NAV.SEARCH, href: '/search', show: CONFIG.MENU_SEARCH }
]
if (customNav) {
@@ -30,7 +34,13 @@ export const MenuBarMobile = (props) => {
return (
<nav id='nav' className=' text-md'>
{links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link}/>)}
{links?.map(link => (
<MenuItemCollapse
onHeightChange={props.onHeightChange}
key={link?.id}
link={link}
/>
))}
</nav>
)
}

12
themes/commerce/components/MenuGroupCard.js
View File

@@ -14,19 +14,19 @@ const MenuGroupCard = props => {
const links = [
{
name: locale.COMMON.ARTICLE,
to: '/archive',
href: '/archive',
slot: archiveSlot,
show: CONFIG.MENU_ARCHIVE
},
{
name: locale.COMMON.CATEGORY,
to: '/category',
href: '/category',
slot: categorySlot,
show: CONFIG.MENU_CATEGORY
},
{
name: locale.COMMON.TAGS,
to: '/tag',
href: '/tag',
slot: tagSlot,
show: CONFIG.MENU_TAG
}
@@ -46,9 +46,9 @@ const MenuGroupCard = props => {
if (link.show) {
return (
<Link
key={`${link.to}`}
title={link.to}
href={link.to}
key={`${link.slug}`}
title={link.name}
href={link.href}
target={link?.target}
className={
'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'

4
themes/commerce/components/MenuItemCollapse.js
View File

@@ -33,7 +33,7 @@ export const MenuItemCollapse = props => {
onClick={toggleShow}>
{!hasSubMenu && (
<Link
href={link?.to}
href={link?.href}
target={link?.target}
className='hover:text-[#D2232A] font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
<span className=' transition-all items-center duration-200'>
@@ -64,7 +64,7 @@ export const MenuItemCollapse = props => {
<div
key={index}
className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 py-3 pr-6'>
<Link href={sLink.to} target={link?.target}>
<Link href={sLink.href} target={link?.target}>
<span className='text-sm ml-4 whitespace-nowrap'>
{link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
{sLink.title}

11
themes/commerce/components/MenuItemDrop.js
View File

@@ -2,10 +2,15 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
/**
* 下拉菜单
* @param {*} param0
* @returns
*/
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
const selected = useRouter().asPath === link?.to
const selected = useRouter().asPath === link?.href
if (!link || !link.show) {
return null
@@ -18,7 +23,7 @@ export const MenuItemDrop = ({ link }) => {
className='h-full'>
{!hasSubMenu && (
<Link
href={link?.to}
href={link?.href}
target={link?.target}
className={`${selected && 'border-b-2 border-[#D2232A]'} h-full flex space-x-1 whitespace-nowrap items-center font-sans menu-link pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1`}>
{link?.icon && <i className={link?.icon} />} <div>{link?.name}</div>
@@ -45,7 +50,7 @@ export const MenuItemDrop = ({ link }) => {
<li
key={index}
className='cursor-pointer hover:bg-red-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
<Link href={sLink.to} target={link?.target}>
<Link href={sLink.href} target={link?.target}>
<span className='text-sm text-nowrap font-extralight'>
{link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
{sLink.title}

44
themes/commerce/components/MenuListSide.js
View File

@@ -1,17 +1,37 @@
import { useGlobal } from '@/lib/global'
import { siteConfig } from '@/lib/config'
import { MenuItemCollapse } from './MenuItemCollapse'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { MenuItemCollapse } from './MenuItemCollapse'
export const MenuListSide = (props) => {
export const MenuListSide = props => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
{
icon: 'fas fa-archive',
name: locale.NAV.ARCHIVE,
href: '/archive',
show: CONFIG.MENU_ARCHIVE
},
{
icon: 'fas fa-search',
name: locale.NAV.SEARCH,
href: '/search',
show: CONFIG.MENU_SEARCH
},
{
icon: 'fas fa-folder',
name: locale.COMMON.CATEGORY,
href: '/category',
show: CONFIG.MENU_CATEGORY
},
{
icon: 'fas fa-tag',
name: locale.COMMON.TAGS,
href: '/tag',
show: CONFIG.MENU_TAG
}
]
if (customNav) {
@@ -34,9 +54,11 @@ export const MenuListSide = (props) => {
}
return (
<nav>
{/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
{links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
</nav>
<nav>
{/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
{links?.map(link => (
<MenuItemCollapse key={link?.id} link={link} />
))}
</nav>
)
}

49
themes/commerce/components/MenuListTop.js
View File

@@ -1,18 +1,36 @@
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { MenuItemDrop } from './MenuItemDrop'
import { siteConfig } from '@/lib/config'
export const MenuListTop = (props) => {
export const MenuListTop = props => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG.MENU_INDEX },
{ id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
{ id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
// { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
// { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
{
id: 1,
icon: 'fa-solid fa-house',
name: locale.NAV.INDEX,
href: '/',
show: CONFIG.MENU_INDEX
},
{
id: 2,
icon: 'fas fa-search',
name: locale.NAV.SEARCH,
href: '/search',
show: CONFIG.MENU_SEARCH
},
{
id: 3,
icon: 'fas fa-archive',
name: locale.NAV.ARCHIVE,
href: '/archive',
show: CONFIG.MENU_ARCHIVE
}
// { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, href: '/category', show: CONFIG.MENU_CATEGORY },
// { icon: 'fas fa-tag', name: locale.COMMON.TAGS, href: '/tag', show: CONFIG.MENU_TAG }
]
if (customNav) {
@@ -34,9 +52,16 @@ export const MenuListTop = (props) => {
return null
}
return (<>
<nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
{links?.map(link => link && link.show && <MenuItemDrop key={link?.id} link={link} />)}
</nav>
</>)
return (
<>
<nav
id='nav-mobile'
className='leading-8 justify-center font-light w-full flex'>
{links?.map(
link =>
link && link.show && <MenuItemDrop key={link?.id} link={link} />
)}
</nav>
</>
)
}