diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js index e4429ef8..34f90c96 100644 --- a/themes/medium/LayoutBase.js +++ b/themes/medium/LayoutBase.js @@ -28,28 +28,30 @@ const LayoutBase = props => { return ( + +
-
{/* 桌面端左侧菜单 */} {/* */}
- {/* 移动端顶部菜单 */} + {/* 顶部导航栏 */} -
+ +
{slotTop} {children} {/* 回顶按钮 */}
- { window.scrollTo({ top: 0, behavior: 'smooth' }) }}/> + data-aos="fade-up" + data-aos-duration="300" + data-aos-once="false" + data-aos-anchor-placement="top-center" + className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20'> + { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
@@ -73,6 +75,7 @@ const LayoutBase = props => {
+ {/* 移动端底部导航栏 */}
diff --git a/themes/medium/components/GroupMenu.js b/themes/medium/components/GroupMenu.js deleted file mode 100644 index a64cf4e7..00000000 --- a/themes/medium/components/GroupMenu.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react' -import Link from 'next/link' -import { useRouter } from 'next/router' -import { useGlobal } from '@/lib/global' -import CONFIG_MEDIUM from '../config_medium' - -function GroupMenu ({ customMenu, customNav }) { - const { locale } = useGlobal() - const router = useRouter() - - let links = [ - // { name: locale.NAV.INDEX, to: '/' || '/', show: true }, - { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY }, - { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG }, - { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE } - // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH } - ] - - if (customNav) { - links = links.concat(customNav) - } - - return ( - - ) -} - -export default GroupMenu diff --git a/themes/medium/components/MenuBarMobile.js b/themes/medium/components/MenuBarMobile.js new file mode 100644 index 00000000..5b4049b2 --- /dev/null +++ b/themes/medium/components/MenuBarMobile.js @@ -0,0 +1,35 @@ +import React from 'react' +import { useGlobal } from '@/lib/global' +import CONFIG_MEDIUM from '../config_medium' +import BLOG from '@/blog.config' +import { MenuItemCollapse } from './MenuItemCollapse' + +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_MEDIUM.MENU_CATEGORY }, + { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG }, + { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE } + // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH } + ] + + if (customNav) { + links = links.concat(customNav) + } + + // 如果 开启自定义菜单，则不再使用 Page生成菜单。 + if (BLOG.CUSTOM_MENU) { + links = customMenu + } + + return ( + + ) +} diff --git a/themes/medium/components/MenuItemCollapse.js b/themes/medium/components/MenuItemCollapse.js new file mode 100644 index 00000000..a0a88a66 --- /dev/null +++ b/themes/medium/components/MenuItemCollapse.js @@ -0,0 +1,62 @@ +import Collapse from '@/components/Collapse' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { useState } from 'react' + +/** + * 折叠菜单 + * @param {*} param0 + * @returns + */ +export const MenuItemCollapse = (props) => { + const { link } = props + const [show, changeShow] = useState(false) + const hasSubMenu = link?.subMenus?.length > 0 + + const [isOpen, changeIsOpen] = useState(false) + + const router = useRouter() + + if (!link || !link.show) { + return null + } + + const selected = (router.pathname === link.to) || (router.asPath === link.to) + + const toggleShow = () => { + changeShow(!show) + } + + const toggleOpenSubMenu = () => { + changeIsOpen(!isOpen) + } + + return <> +
+ + {!hasSubMenu && +
{link.name}
+ } + + {hasSubMenu &&
+
{link.name}
+
+
} +
+ + {/* 折叠子菜单 */} + {hasSubMenu && + {link.subMenus.map(sLink => { + return
+ +
{sLink.title}
+ +
+ })} + } + +} diff --git a/themes/medium/components/MenuItemDrop.js b/themes/medium/components/MenuItemDrop.js new file mode 100644 index 00000000..b125ba89 --- /dev/null +++ b/themes/medium/components/MenuItemDrop.js @@ -0,0 +1,48 @@ +import Link from 'next/link' +import { useState } from 'react' +import { useRouter } from 'next/router' + +export const MenuItemDrop = ({ link }) => { + const [show, changeShow] = useState(false) + 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) + + return
  • changeShow(true)} onMouseOut={() => changeShow(false)} > + + {hasSubMenu && +
    +
    + {link?.name} + {hasSubMenu && } +
    +
    + } + + {!hasSubMenu && +
    + + {link?.name} + +
    + } + + {/* 子菜单 */} + {hasSubMenu &&
      + {link.subMenus.map(sLink => { + return
    • + + {sLink.title} + +
      • + })} +
    } + +
    • +} diff --git a/themes/medium/components/MenuItemMobileNormal.js b/themes/medium/components/MenuItemMobileNormal.js new file mode 100644 index 00000000..17f0d151 --- /dev/null +++ b/themes/medium/components/MenuItemMobileNormal.js @@ -0,0 +1,27 @@ +import Link from 'next/link' +import { useRouter } from 'next/router' + +export const NormalMenu = props => { + const { link } = props + const router = useRouter() + + if (!link || !link.show) { + return null + } + + const selected = (router.pathname === link.to) || (router.asPath === link.to) + + return + +
    +
    {link.name}
    +
    + {link.slot} + + +} diff --git a/themes/medium/components/MenuItemPCNormal.js b/themes/medium/components/MenuItemPCNormal.js new file mode 100644 index 00000000..809ae974 --- /dev/null +++ b/themes/medium/components/MenuItemPCNormal.js @@ -0,0 +1,24 @@ +import Link from 'next/link' +import { useRouter } from 'next/router' + +export const MenuItemPCNormal = props => { + const { link } = props + const router = useRouter() + const selected = (router.pathname === link.to) || (router.asPath === link.to) + if (!link || !link.show) { + return null + } + + return +
    + +
    {link.name}
    +
    + {link.slot} + +} diff --git a/themes/medium/components/TopNavBar.js b/themes/medium/components/TopNavBar.js index 592e2a2f..3217fa84 100644 --- a/themes/medium/components/TopNavBar.js +++ b/themes/medium/components/TopNavBar.js @@ -1,11 +1,11 @@ -import Link from 'next/link' -import { useRouter } from 'next/router' import LogoBar from './LogoBar' -import React from 'react' +import React, { useRef } from 'react' import Collapse from '@/components/Collapse' -import GroupMenu from './GroupMenu' +import { MenuBarMobile } from './MenuBarMobile' import { useGlobal } from '@/lib/global' import CONFIG_MEDIUM from '../config_medium' +import BLOG from '@/blog.config' +import { MenuItemDrop } from './MenuItemDrop' /** * 顶部导航栏 + 菜单 @@ -13,9 +13,9 @@ import CONFIG_MEDIUM from '../config_medium' * @returns */ export default function TopNavBar(props) { - const { className, customNav } = props - const router = useRouter() + const { className, customNav, customMenu } = props const [isOpen, changeShow] = React.useState(false) + const collapseRef = useRef(null) const { locale } = useGlobal() @@ -26,59 +26,43 @@ export default function TopNavBar(props) { { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH } ] - const navs = defaultLinks.concat(customNav) + let links = defaultLinks.concat(customNav) const toggleMenuOpen = () => { changeShow(!isOpen) } + // 如果 开启自定义菜单，则覆盖Page生成的菜单 + if (BLOG.CUSTOM_MENU) { + links = customMenu + } + return (
    - {/* 折叠菜单 */} - -
    - + + {/* 移动端折叠菜单 */} + +
    + collapseRef.current?.updateCollapseHeight(param)} />
    + {/* 导航栏菜单 */}
    - {/* 图标Logo */} + {/* 左侧图标Logo */} - {/* 右侧功能 */} + {/* 折叠按钮、仅移动端显示 */}
    {isOpen ? : }
    - {/* 顶部菜单 */} + {/* 桌面端顶部菜单 */}
    - {navs && navs.map(link => { - if (link?.show) { - const selected = (router.pathname === link.to) || (router.asPath === link.to) - return ( - - -
    - -
    {link.name}
    -
    - {link.slot} - - - ) - } else { - return null - } - })} + {links && links.map(link => )}