From ce37bca02023120dc7cdee6f6948983325f6b250 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Sun, 18 Feb 2024 10:54:17 +0800 Subject: [PATCH] starter-menu --- components/ThemeSwitch.js | 2 +- themes/heo/components/MenuGroupCard.js | 1 + themes/starter/components/Logo.js | 6 ++- themes/starter/components/MenuItem.js | 47 +++++++++++++++++ themes/starter/components/MenuList.js | 73 +++++++++++--------------- themes/starter/components/NavBar.js | 4 +- themes/starter/config.js | 5 +- themes/starter/index.js | 2 +- 8 files changed, 90 insertions(+), 50 deletions(-) create mode 100644 themes/starter/components/MenuItem.js diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js index ba39b539..aeaeb3ab 100644 --- a/components/ThemeSwitch.js +++ b/components/ThemeSwitch.js @@ -38,7 +38,7 @@ const ThemeSwitch = () => { return (<> -
+
{/* 深色按钮 */}
diff --git a/themes/heo/components/MenuGroupCard.js b/themes/heo/components/MenuGroupCard.js index 53157875..e1de4792 100644 --- a/themes/heo/components/MenuGroupCard.js +++ b/themes/heo/components/MenuGroupCard.js @@ -1,6 +1,7 @@ import Link from 'next/link' import { useGlobal } from '@/lib/global' import CONFIG from '../config' +import { siteConfig } from '@/lib/config' const MenuGroupCard = (props) => { const { postCount, categoryOptions, tagOptions } = props diff --git a/themes/starter/components/Logo.js b/themes/starter/components/Logo.js index e4b237a2..22d1c500 100644 --- a/themes/starter/components/Logo.js +++ b/themes/starter/components/Logo.js @@ -1,8 +1,10 @@ +import { siteConfig } from '@/lib/config'; import { useGlobal } from '@/lib/global'; import throttle from 'lodash.throttle'; import Link from 'next/link' import { useRouter } from 'next/router'; import { useEffect } from 'react'; +import CONFIG from '../config'; /** * 站点图标 @@ -26,9 +28,9 @@ export const Logo = () => { const scrollY = window.scrollY; // 何时显示浅色或白底的logo if (isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) { - logo.src = '/images/landing-2/logo/logo-white.svg'; + logo.src = siteConfig('STARTER_LOGO_WHITE', null, CONFIG); } else { - logo.src = '/images/landing-2/logo/logo.svg'; + logo.src = siteConfig('STARTER_LOGO', null, CONFIG); } }, throttleMs) diff --git a/themes/starter/components/MenuItem.js b/themes/starter/components/MenuItem.js new file mode 100644 index 00000000..d5ce70a2 --- /dev/null +++ b/themes/starter/components/MenuItem.js @@ -0,0 +1,47 @@ +import Link from 'next/link' +import { useRouter } from 'next/router' + +export const MenuItem = ({ link }) => { + const hasSubMenu = link?.subMenus?.length > 0 + const router = useRouter() + return <> + {/* MenuItem */} + {!hasSubMenu &&
  • + + {link?.icon && }{link?.name} + +
    • } + + {hasSubMenu &&
  • + + {/* 有子菜单的MenuItem */} + + {link?.icon && }{link?.name} + + + + + + +
    + {link.subMenus.map((sLink, index) => { + return + {/* 子菜单SubMenuItem */} + {link?.icon && } {sLink.title} + + })} +
    +
    • } + +} diff --git a/themes/starter/components/MenuList.js b/themes/starter/components/MenuList.js index 2799f844..932e4118 100644 --- a/themes/starter/components/MenuList.js +++ b/themes/starter/components/MenuList.js @@ -1,11 +1,25 @@ -import Link from 'next/link'; -import { useRouter } from 'next/router'; +import { siteConfig } from '@/lib/config'; +import { useGlobal } from '@/lib/global'; import { useEffect } from 'react'; +import CONFIG from '../config'; +import { MenuItem } from './MenuItem'; /** * 响应式 折叠菜单 */ -export const MenuList = () => { - const router = useRouter() +export const MenuList = (props) => { + const { customNav, customMenu } = props + const { locale } = useGlobal() + + let links = [ + { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) }, + { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEO_MENU_SEARCH', null, CONFIG) }, + { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG) }, + { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEO_MENU_TAG', null, CONFIG) } + ] + + if (customNav) { + links = customNav.concat(links) + } useEffect(() => { // ===== responsive navbar @@ -37,9 +51,19 @@ export const MenuList = () => { }); }, []) + // 如果 开启自定义菜单，则覆盖Page生成的菜单 + if (siteConfig('CUSTOM_MENU')) { + links = customMenu + } + + if (!links || links.length === 0) { + return null + } + return <>
    - {/* 移动端菜单切换按钮 */} + + {/* 移动端菜单切换按钮 */}
    diff --git a/themes/starter/components/NavBar.js b/themes/starter/components/NavBar.js index 87f8a190..b8f374fb 100644 --- a/themes/starter/components/NavBar.js +++ b/themes/starter/components/NavBar.js @@ -9,7 +9,7 @@ import { useRouter } from 'next/router'; /** * 顶部导航栏 */ -export const NavBar = () => { +export const NavBar = (props) => { const router = useRouter() useEffect(() => { // ======= Sticky @@ -49,7 +49,7 @@ export const NavBar = () => {
    {/* 中间菜单 */} - + {/* 右侧功能 */}
    diff --git a/themes/starter/config.js b/themes/starter/config.js index 08316f90..d1bfa78d 100644 --- a/themes/starter/config.js +++ b/themes/starter/config.js @@ -3,6 +3,9 @@ */ const CONFIG = { - LANDING_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_LANDING_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp + STARTER_LOGO: '/images/landing-2/logo/logo.svg', // 普通logo + STARTER_LOGO_WHITE: '/images/landing-2/logo/logo-white.svg', // 透明底浅色logo + + STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_LANDING_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp } export default CONFIG diff --git a/themes/starter/index.js b/themes/starter/index.js index 1f3b2dd6..906401fa 100644 --- a/themes/starter/index.js +++ b/themes/starter/index.js @@ -63,7 +63,7 @@ const LayoutBase = (props) => { return