菜单管理-二级菜单

category
tags
type
status
slug
date
password
Last edited time
Mar 26, 2024 02:50 AM
summary
icon

菜单功能

在NotionNext 3.12 之前的旧版本中,网站的菜单栏由Page控制。类型为Page的文章,不会展示在博文列表,而是在导航栏中出现菜单入口。 这一旧方案有两个弊端:一是若想关闭自带菜单,例如分类、归档、搜索,旧需要修改配置文件,很不方便;另一个弊端是,此方案若要实现二级下拉菜单显得力不从心。 于是本文的自定义菜单Menu方案诞生了。
 

新菜单效果

所有菜单都在您的Notion中自定义,旧的Page菜单将被完全覆盖。同时、系统自带的主页分类、归档、搜索等按钮都需要您自行配置
notion image
 

开始

首先,请更新您的NotionNext至3.13.0以上版本;访问升级指南或在交流群寻求帮助。
 
其次,在您的blog.config.js中,开启完全自定义菜单: (推荐在环境变量中配置)
当该值为true时,原先读取Page生成菜单的功能将被自定义菜单覆盖。
 

添加普通菜单-Menu

在notion中添加一个类型为Menu的页面:并包含以下字段
字段名
说明
示例
type
类型
Menu
title
显示在菜单栏的标题
首页
status
状态
Published
slug
菜单链接
/
icon
菜单图标,FontAwesome类名
fas fa-home
示例配置
notion image
 

添加子菜单-SubMenu

子菜单绑定方法:在列表中,SubMenu紧跟在Menu后面即可做为子菜单。
图片示例,这三个菜单构成一组一级菜单和二级菜单
图片示例,这三个菜单构成一组一级菜单和二级菜单
子菜单3点注意:
  1. 只有普通菜单Menu 后能挂子菜单SubMenuMenu不能挂MenuSubMenu不能挂SubMenu
  1. SubMenu若没有紧跟在一个Menu后面,则成为孤儿菜单,不会显示。
  1. Menu后面一旦挂载了SubMenu,则此Menu就无法点击跳转,只能作为展开菜单使用。
 
💡
提示: 菜单的路径分为相对路径绝对路径;尽量使用绝对路径。 /about 这是一个绝对路径,它以左斜杆/开头,在博客的任意页面点击此菜单都会跳到 http://域名/about 该路径。 about 这是一个相对路径,它没有左斜杆/开头,如果在博客首页点击菜单会跳到 http://域名/about 该路径,然如果在 其它页面,例如 http://域名/tag/标签 这个页面下,点击菜单,会跳到 http://域名/tag/标签/about ,这会导致你的页面访问错误。

参考配置

可参考我的notion模板进行配置:
notion image

特别注意

💡
Menu,SubMenu 这两个类型本质只是菜单,唯一功能是跳转到slug指定的页面,指定页面可以是任意page\post\外链; 但Menu和SubMenu本身不应该放文章内容。
💡
特别提醒: 在V3.13版本中 ,不要在您的数据库中添加多个视图,这将会导致您的菜单乱序。如需添加视图以便分类整理文章,建议另外新建一个视图单页,参考下文: https://github.com/tangly1024/NotionNext/issues/1056 在V4.0之后的新版本可以忽略此问题。
 

关于菜单的使用方式示例

📖
notion中添加Menu类型数据,将仅作为跳转功能使用,menu的slug字段将指定跳转的路径,而menu这条数据的页面内容没有任何实际作用。

Menu的五种使用示例:

Menu菜单总共可以有五种用法,下面是每一种用法的示例,表格第一列是这种用法的称呼,右边两列分别是 title、slug两个值的示例,最右一列是说明。
用法类型
title
slug
说明
外链
博客
跳转到 https://blog.tangly1024.com 这个地址
单页引导
关于
/about
跳转到 您站点的/about 地址,如果您站点的域名是 https://test.com ,那么点击菜单会跳转到 https://test.com/about 路径 。此时您需要创建一篇slug为about、type是Page的、status是Published的文章,否则 打开https://test.com/about 会提示404.
文章引导
文章-1
/article/example-1
跳转到 您站点的 /article/example-1 地址,如果您站点的域名是 https://test.com ,那么点击菜单会跳转到 https://test.com/article/example-1 路径 。 此时您需要检查是否存在一篇 slug 为 example-1 , type是Post、 Status是Published的文章,否则打开 https://test.com/article/example-1 会提示404
聚合分类
分类-1
/category/test
跳转到 您站点的 /category/test 地址,如果您站点的域名是 https://test.com ,那么点击菜单会跳转到 https://test.com/category/test 路径 。此页面是一个特殊的内置页面,将聚合显示所有分类为test的文章 。
聚合标签
标签-1
/tag/test
跳转到 您站点的 /tag/test 地址,如果您站点的域名是 https://test.com ,那么点击菜单会跳转到 https://test.com/tag/test 路径 。 此页面是一个特殊的内置页面,将聚合显示所有打了test标签的文章 。
聚合归档
归档
/archive
跳转到 您站点的 /archive 地址,如果您站点的域名是 https://test.com ,那么点击菜单会跳转到 https://test.com /archive 路径 。 此页面是一个特殊的内置页面,将聚合显示所有文章,并且按发布日期分组
 

关于菜单缓存

NotionNext为每一个页面都单独做了缓存,如果改动了菜单,即使刷新首页,让新菜单生效;但其它每个文章页面的菜单仍然是旧的版本,只有但用户访问了一次其他页面,会出发刷新缓存,再次访问就是新的菜单。
 
如果嫌每个页面都要刷新很麻烦,则可以在vercel后台直接redeploy,彻底清除所有缓存。
 
网站公告字体字号
  • Twikoo
  • Giscus
  • Cusdis
✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨‍👦‍👦 联系方式