Skip to content

Commit

Permalink
NAV主题
Browse files Browse the repository at this point in the history
  • Loading branch information
tangly1024 committed Oct 18, 2023
1 parent c9915ce commit ad45072
Show file tree
Hide file tree
Showing 9 changed files with 108 additions and 307 deletions.
6 changes: 6 additions & 0 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,12 @@ module.exports = withBundleAnalyzer({
// })
// }

// 排除所有后缀名为 .md 的文件的编译
config.module.rules.push({
test: /\.md$/,
use: 'raw-loader'
});

// 动态主题:添加 resolve.alias 配置,将动态路径映射到实际路径
config.resolve.alias['@theme-components'] = path.resolve(__dirname, 'themes', THEME)
return config
Expand Down
7 changes: 7 additions & 0 deletions themes/heo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# HEO 主题说明

> 主题设计者 [张洪](https://zhheo.com/)
> 主题开发者 [tangly1024](https://github.com/tangly1024)
1. 开启方式 在blog.config.js 将主题配置为 `HEO`
2. 更多说明参考此[文档](https://docs.tangly1024.com/article/notionnext-heo)
5 changes: 5 additions & 0 deletions themes/nav/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# NAV 主题说明

> 主题开发者 [emengweb](https://github.com/emengweb)
1. 开启方式 在blog.config.js 将主题配置为 `NAV`
22 changes: 6 additions & 16 deletions themes/nav/components/LogoBar.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import { useNavGlobal } from '@/themes/nav'
import Link from 'next/link'
import CONFIG from '../config'

Expand All @@ -11,23 +9,15 @@ import CONFIG from '../config'
*/
export default function LogoBar(props) {
const { siteInfo } = props
const { pageNavVisible, changePageNavVisible } = useNavGlobal()
// const logo = siteInfo?.icon?.replaceAll("width=400", "width=280")

const togglePageNavVisible = () => {
changePageNavVisible(!pageNavVisible)
}
return (
<div id='top-wrapper' className='w-full flex items-center'>
{/* <div onClick={togglePageNavVisible} className='cursor-pointer md:hidden text-xl pr-3 hover:scale-110 duration-150'>
<i className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
</div> */}
<div className='md:w-48'>
<a href='/' className='grid justify-items-center text-md md:text-xl dark:text-gray-200'>
<img src={siteInfo?.icon?.replaceAll("width=400", "width=280")} height='44px' alt={BLOG.AUTHOR + ' - ' + BLOG.NEXT_PUBLIC_BIO} className='md:block' placeholderSrc=''/>
{CONFIG.SHOW_TITLE_TEXT && siteInfo?.title}
</a>
</div>
<Link href='/' className='md:w-48 grid justify-items-center text-md md:text-xl dark:text-gray-200'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon?.replaceAll('width=400', 'width=280')}
height='44px' alt={BLOG.AUTHOR + ' - ' + BLOG.NEXT_PUBLIC_BIO} className='md:block transition-all hover:scale-110 duration-150' placeholderSrc='' />
{CONFIG.SHOW_TITLE_TEXT && siteInfo?.title}
</Link>
</div>
)
}
5 changes: 5 additions & 0 deletions themes/nav/components/MenuBarMobile.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ import CONFIG from '../config'
import BLOG from '@/blog.config'
import { MenuItemCollapse } from './MenuItemCollapse'

/**
* 移动端菜单栏
* @param {*} props
* @returns
*/
export const MenuBarMobile = (props) => {
const { customMenu, customNav } = props
const { locale } = useGlobal()
Expand Down
108 changes: 44 additions & 64 deletions themes/nav/components/MenuItem.js
Original file line number Diff line number Diff line change
@@ -1,84 +1,64 @@
import Link from 'next/link'
import { useState } from 'react'
import { useRouter } from 'next/router'
import Collapse from './Collapse'

/**
* 菜单
* @param {} param0
* @returns
*/
export const MenuItem = ({ link }) => {
const [show, changeShow] = useState(false)
// const show = true
// const changeShow = () => {}
const router = useRouter()

if (!link || !link.show) {
return null
}
const hasSubMenu = link?.subMenus?.length > 0
const selected = (router.pathname === link.to) || (router.asPath === link.to)

link.selected = true

// const { group } = props
const [isOpen, changeIsOpen] = useState(link?.selected)

const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
}
console.log('link::')
console.log(link)

return <>
<div
onClick={toggleOpenSubMenu}
className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 cursor-pointer pt-2 font-light select-none flex justify-between cursor-pointer' key={link?.name}>
<span className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>{link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.name}</span>
<div className='inline-flex items-center select-none pointer-events-none '><i className={`text-xs dark:text-neutral-500 text-gray-300 hover:text-black dark:hover:text-white-400 px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
</div>
<Collapse isOpen={isOpen} key='collapse'>
{link?.subMenus?.map((sLink, index) => (
<div key={index} className='nav-submenu'>
{/* <BlogPostCard className='text-sm ml-3' post={post} /></div> */}
<a href={`/#${sLink.title}`}>
<span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-2 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
</a>
</div>
))
}
</Collapse>
</>

if (!link || !link.show) {
return null
}

return <>
{/* 菜单 */}
<div
onClick={toggleOpenSubMenu}
className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 pt-2 font-light select-none flex justify-between cursor-pointer' key={link?.name}>

// return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{link?.subMenus
? (<>
<span className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
{link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.title}
</span>
<div className='inline-flex items-center select-none pointer-events-none '>
<i className={`${isOpen ? '-rotate-90' : ''} text-xs dark:text-neutral-500 text-gray-300 hover:text-black dark:hover:text-white-400 px-2 fas fa-chevron-left transition-all duration-200`}></i>
</div>
</>)
: (
<Link href={link?.to} className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
{link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.title}
</Link>
)

// {hasSubMenu &&
// <div className={'px-2 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}
// {hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
// </div>
// </div>
// }
}
</div>

// {!hasSubMenu &&
// <div className={'px-2 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} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
// {link?.icon && <i className={link?.icon} />} {link?.name}
// </Link>
// </div>
// }
{/* 菜单按钮 */}
{link?.subMenus && (
<Collapse isOpen={isOpen} key='collapse'>
{
link?.subMenus?.map((sLink, index) => (
<div key={index} className='nav-submenu'>
<a href={sLink?.to}>
<span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
</a>
</div>
))
}

// {/* 子菜单 */}
// {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 block drop-shadow-lg `}>
// {link?.subMenus?.map((sLink, index) => {
// return <li key={index} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 py-3 pr-6 pl-3'>
// <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
// <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
// </Link>
// </li>
// })}
// </ul>}
</Collapse>
)}

// </li>
</>
}
36 changes: 6 additions & 30 deletions themes/nav/components/TopNavBar.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,21 @@
import LogoBar from './LogoBar'
import { useCallback, useEffect, useRef, useState } from 'react'
import Collapse from '@/components/Collapse'
import { MenuBarMobile } from './MenuBarMobile'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import BLOG from '@/blog.config'
import throttle from 'lodash.throttle'
import { useRouter } from 'next/router'
import { MenuItemDrop } from './MenuItemDrop'
import SearchInput from './SearchInput'
import DarkModeButton from '@/components/DarkModeButton'
import LogoBar from './LogoBar'

/**
* 顶部导航栏 + 菜单
* @param {} param0
* @returns
*/
export default function TopNavBar(props) {
const { className, customNav, customMenu } = props
const { className } = props
const [isOpen, changeShow] = useState(false)
const collapseRef = useRef(null)

const { locale } = useGlobal()


let windowTop = 0

// 监听滚动
Expand Down Expand Up @@ -53,28 +45,16 @@ export default function TopNavBar(props) {
}, throttleMs)
)



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 }
]

let links = defaultLinks.concat(customNav)

const toggleMenuOpen = () => {
changeShow(!isOpen)
}

// 如果 开启自定义菜单,则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}

return (
<div id='top-nav' className={'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg md:shadow-none pb-2 md:pb-0 ' + className}>
{/* 图标Logo */}
<div className='fixed top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
<LogoBar {...props} />
</div>

{/* 移动端折叠菜单 */}
<Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden mt-16'>
Expand All @@ -86,10 +66,6 @@ export default function TopNavBar(props) {
{/* 导航栏菜单 */}
<div className='h-18 px-5'>

{/* 左侧图标Logo */}
{/* <div className='absolute top-0 left-5 md:left-4 z-40 pt-3 md:pt-4 md:pt-0'>
<LogoBar {...props} />
</div> */}
<div className='absolute top-0 right-5'>
{/* 搜索框、折叠按钮、仅移动端显示 */}
<div className='pt-1 flex md:hidden justify-end items-center space-x-3 font-serif dark:text-gray-200 '>
Expand Down
2 changes: 1 addition & 1 deletion themes/nav/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const CONFIG = {
AUTO_SORT: process.env.NEXT_PUBLIC_GITBOOK_AUTO_SORT || true, // 是否自动按分类名 归组排序文章;自动归组可能会打乱您Notion中的文章顺序

SHOW_TITLE_TEXT: false, // 标题栏显示文本
USE_CUSTEM_MENU: true, // 使用自定义分组菜单(可支持子菜单,支持自定义分类图标)
USE_CUSTOM_MENU: true, // 使用自定义菜单(可支持子菜单,支持自定义分类图标),若为true则显示所有的category分类

// 菜单
MENU_CATEGORY: true, // 显示分类
Expand Down
Loading

0 comments on commit ad45072

Please sign in to comment.