From ad4507224ebe33533ea68abd56afee5dbfd594ab Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 18 Oct 2023 15:45:45 +0800 Subject: [PATCH] =?UTF-8?q?NAV=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 6 + themes/heo/README.md | 7 + themes/nav/README.md | 5 + themes/nav/components/LogoBar.js | 22 +-- themes/nav/components/MenuBarMobile.js | 5 + themes/nav/components/MenuItem.js | 108 +++++------- themes/nav/components/TopNavBar.js | 36 +--- themes/nav/config.js | 2 +- themes/nav/index.js | 224 ++++--------------------- 9 files changed, 108 insertions(+), 307 deletions(-) create mode 100644 themes/heo/README.md create mode 100644 themes/nav/README.md diff --git a/next.config.js b/next.config.js index 27e33e0f12d..2edebd44aaf 100644 --- a/next.config.js +++ b/next.config.js @@ -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 diff --git a/themes/heo/README.md b/themes/heo/README.md new file mode 100644 index 00000000000..61d6df9deae --- /dev/null +++ b/themes/heo/README.md @@ -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) \ No newline at end of file diff --git a/themes/nav/README.md b/themes/nav/README.md new file mode 100644 index 00000000000..493be002a7e --- /dev/null +++ b/themes/nav/README.md @@ -0,0 +1,5 @@ +# NAV 主题说明 + +> 主题开发者 [emengweb](https://github.com/emengweb) + +1. 开启方式 在blog.config.js 将主题配置为 `NAV` \ No newline at end of file diff --git a/themes/nav/components/LogoBar.js b/themes/nav/components/LogoBar.js index e3ea35d87a7..3cff6732158 100755 --- a/themes/nav/components/LogoBar.js +++ b/themes/nav/components/LogoBar.js @@ -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' @@ -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 (
- {/*
- -
*/} -
- - {BLOG.AUTHOR - {CONFIG.SHOW_TITLE_TEXT && siteInfo?.title} - -
+ + {/* eslint-disable-next-line @next/next/no-img-element */} + {BLOG.AUTHOR + {CONFIG.SHOW_TITLE_TEXT && siteInfo?.title} +
) } diff --git a/themes/nav/components/MenuBarMobile.js b/themes/nav/components/MenuBarMobile.js index 2db19133f3c..bfe3fe25fbf 100755 --- a/themes/nav/components/MenuBarMobile.js +++ b/themes/nav/components/MenuBarMobile.js @@ -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() diff --git a/themes/nav/components/MenuItem.js b/themes/nav/components/MenuItem.js index 487b928adbc..a5b35916cf4 100644 --- a/themes/nav/components/MenuItem.js +++ b/themes/nav/components/MenuItem.js @@ -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 <> -
- {link?.icon && }{link?.name} -
-
- - {link?.subMenus?.map((sLink, index) => ( -
- {/*
*/} - - {sLink.title} - - - )) - } - - + if (!link || !link.show) { + return null + } + return <> + {/* 菜单 */} +
-// return
  • changeShow(true)} onMouseOut={() => changeShow(false)} > + {link?.subMenus + ? (<> + + {link?.icon && }{link?.title} + +
    + +
    + ) + : ( + + {link?.icon && }{link?.title} + + ) -// {hasSubMenu && -//
    -//
    -// {link?.icon && } {link?.name} -// {hasSubMenu && } -//
    -//
    -// } + } +
    • -// {!hasSubMenu && -//
    -// -// {link?.icon && } {link?.name} -// -//
    -// } + {/* 菜单按钮 */} + {link?.subMenus && ( + + { + link?.subMenus?.map((sLink, index) => ( + + )) + } -// {/* 子菜单 */} -// {hasSubMenu &&
      -// {link?.subMenus?.map((sLink, index) => { -// return
    • -// -// {link?.icon &&   }{sLink.title} -// -//
      • -// })} -//
    } +     + )} -// + } diff --git a/themes/nav/components/TopNavBar.js b/themes/nav/components/TopNavBar.js index 11325fab400..fab5463cb8a 100755 --- a/themes/nav/components/TopNavBar.js +++ b/themes/nav/components/TopNavBar.js @@ -1,15 +1,10 @@ -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' /** * 顶部导航栏 + 菜单 @@ -17,13 +12,10 @@ import DarkModeButton from '@/components/DarkModeButton' * @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 // 监听滚动 @@ -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 (
    + {/* 图标Logo */} +
    + +
    {/* 移动端折叠菜单 */} @@ -86,10 +66,6 @@ export default function TopNavBar(props) { {/* 导航栏菜单 */}
    - {/* 左侧图标Logo */} - {/*
    - -
    */}
    {/* 搜索框、折叠按钮、仅移动端显示 */}
    diff --git a/themes/nav/config.js b/themes/nav/config.js index 29a97c24353..48ca7d313a0 100755 --- a/themes/nav/config.js +++ b/themes/nav/config.js @@ -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, // 显示分类 diff --git a/themes/nav/index.js b/themes/nav/index.js index 2621d76ae1c..d84c603053e 100755 --- a/themes/nav/index.js +++ b/themes/nav/index.js @@ -1,29 +1,18 @@ 'use client' import CONFIG from './config' -import { useRouter } from 'next/router' import { useEffect, useState, createContext, useContext } from 'react' -import { isBrowser } from '@/lib/utils' import Footer from './components/Footer' -import InfoCard from './components/InfoCard' -import RevolverMaps from './components/RevolverMaps' import TopNavBar from './components/TopNavBar' -import SearchInput from './components/SearchInput' import { useGlobal } from '@/lib/global' -import Live2D from '@/components/Live2D' import BLOG from '@/blog.config' -import NavPostList from './components/NavPostList' -import ArticleInfo from './components/ArticleInfo' -import Catalog from './components/Catalog' import Announcement from './components/Announcement' import PageNavDrawer from './components/PageNavDrawer' import FloatTocButton from './components/FloatTocButton' import { AdSlot } from '@/components/GoogleAdsense' import JumpToTopButton from './components/JumpToTopButton' -import ShareBar from '@/components/ShareBar' import CategoryItem from './components/CategoryItem' import TagItemMini from './components/TagItemMini' -import ArticleAround from './components/ArticleAround' import Comment from '@/components/Comment' import TocDrawer from './components/TocDrawer' import NotionPage from '@/components/NotionPage' @@ -33,14 +22,12 @@ import { Style } from './style' import CommonHead from '@/components/CommonHead' import BlogArchiveItem from './components/BlogArchiveItem' import BlogPostListAll from './components/BlogPostListAll' -import BlogPostListPage from './components/BlogPostListPage' import BlogPostCard from './components/BlogPostCard' -import LogoBar from './components/LogoBar' import Link from 'next/link' import dynamic from 'next/dynamic' -const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false }) import { MenuItem } from './components/MenuItem' +const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false }) // 主题全局变量 const ThemeGlobalNav = createContext() @@ -53,9 +40,8 @@ export const useNavGlobal = () => useContext(ThemeGlobalNav) * @constructor */ const LayoutBase = (props) => { - const { customMenu, children, post, allNavPages, categoryOptions, slotLeft, slotRight, slotTop, meta } = props + const { customMenu, children, post, allNavPages, categoryOptions, slotLeft, slotTop, meta } = props const { onLoading } = useGlobal() - const router = useRouter() const [tocVisible, changeTocVisible] = useState(false) const [pageNavVisible, changePageNavVisible] = useState(false) const [filteredNavPages, setFilteredNavPages] = useState(allNavPages) @@ -67,133 +53,55 @@ const LayoutBase = (props) => { }, [post]) let links = customMenu - // let categoryOptions = filteredNavPages + + if (!CONFIG.USE_CUSTOM_MENU) { + links = categoryOptions && categoryOptions?.map(c => { + return { id: c.name, title: `# ${c.name}`, to: `/category/${c.name}`, show: true } + }) + } return ( + {/* HEAD */} - {/* - - */} + {/* 样式 */}