菜单管理-二级菜单

菜单功能

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

新菜单效果

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

开始

首先，请更新您的NotionNext至3.13.0以上版本；访问升级指南或在交流群寻求帮助。

NotionNext升级指南 | TANGLY’s BLOG

当NotionNext发布新版后，如何更新你的项目？

https://tangly1024.com/article/how-to-update-notionnext

其次，在您的blog.config.js中，开启完全自定义菜单: （推荐在环境变量中配置）

当该值为true时，原先读取Page生成菜单的功能将被自定义菜单覆盖。

添加普通菜单-`Menu`

在notion中添加一个类型为Menu的页面：并包含以下字段

字段名	说明	示例
type	类型	`Menu`
title	显示在菜单栏的标题	`首页`
status	状态	`Published`
slug	菜单链接	`/`
icon	菜单图标，FontAwesome类名	`fas fa-home`

示例配置

添加子菜单-`SubMenu`

子菜单绑定方法：在列表中，SubMenu紧跟在Menu后面即可做为子菜单。

子菜单3点注意：

只有普通菜单Menu 后能挂子菜单SubMenu；Menu不能挂Menu、SubMenu不能挂SubMenu；

SubMenu若没有紧跟在一个Menu后面，则成为孤儿菜单，不会显示。

Menu后面一旦挂载了SubMenu，则此Menu就无法点击跳转，只能作为展开菜单使用。

💡

提示：菜单的路径分为相对路径和绝对路径；尽量使用绝对路径。 /about 这是一个绝对路径，它以左斜杆/开头，在博客的任意页面点击此菜单都会跳到 http://域名/about 该路径。 about 这是一个相对路径，它没有左斜杆/开头，如果在博客首页点击菜单会跳到 http://域名/about 该路径，然如果在其它页面，例如 http://域名/tag/标签 这个页面下，点击菜单，会跳到 http://域名/tag/标签/about ，这会导致你的页面访问错误。

参考配置

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

www.notion.so

https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d&pvs=4

特别注意

💡

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	跳转到 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，彻底清除所有缓存。