🔌 Typecho插件

Typecho 自定义导航菜单插件：NavMenu 修改版

Ryan

2021-03-10

138 评论

117825 阅读

插件特点：

多菜单支持
支持分类、独立页面和自定义页面链接
支持编辑菜单项（自定义菜单名称，自定义class, 新窗口等）
可拖动设置顺序和层级
菜单结构可自定义，方便个性化布局
支持内置变量替换，使用内置页面即可
支持删除菜单

安装说明

将插件克隆到本地, 放到 usr/plugins 目录下即可。

插件说明

INFO

此插件早在2015年原作者merdan在大三时就已完成。当时只支持单个菜单，后来抽点时间改成多菜单支持。

最近站长用到了这个插件，发现这个插件存在许多bug，一一修复并发布到 Github。

使用方法

后台启用插件
进入主菜单 控制台->菜单管理 即可看到菜单设置页面。
默认有名为default 的菜单，在左侧新增菜单可以新增。
左下方的菜单项里可添加分类，独立页面、内置页面和自定义链接到右侧菜单结构中。
拉动菜单结构可以调整菜单顺序和层次。
调整完了之后 务必点击 保存设置 按钮进行保存，否则菜单不会生效
在主题中使用一下方法调用菜单:

<?php Typecho_Widget::widget('NavMenu_List')->navMenu('header'); ?>

当前菜单有相应的 .current class 名，可进行菜单高亮等布置

调用函数说明：

/**
 * @param string $menu 菜单名称
 * @param null $navOptions 菜单配置
 */
public function navMenu($menu = 'default', $navOptions = NULL)

菜单配置项

[
    'wrapTag' => 'ul', // 菜单项的容器
    'wrapClass' => '', // 容器自定义class
    'wrapId' => '', // 容器自定义ID (二级菜单展开等功能可使用ID 去解决)
    'itemTag' => 'li', // a 链接的容器
    'itemClass' => '{has-children}menu-has-children{/has-children}', // 容器自定义class
    'item' => '<a class="{class}" href="{url}" {target}>{name} {caret}</a>', // a 链接模板
    'linkClass' => '', // a 链接的 class
    'subMenu' => '<ul class="{class}">{content}</ul>', // 子菜单的包裹模板
    'current' => 'current', // 当前菜单的类名
    'caret' => '+' // 有子菜单的菜单添加提示下拉图标 item 属性中的 {caret} 会被替换为这个属性
];

比如我要输出 bootstrap 的菜单

Typecho_Widget::widget('NavMenu_List')->navMenu('header', [
    'wrapTag' => 'ul',
    'wrapClass' => 'navbar-nav me-auto mb-2 mb-lg-0',
    'itemClass' => 'nav-item {has-children}dropdown{/has-children}',
    'item' => '<a class="{class} {has-children}dropdown-toggle{/has-children}" href="{url}">{name}</a>',
    'linkClass' => 'nav-link',
    'subMenuClass' => 'dropdown-menu',
    'current' => 'active'
]);

插件截图

其他

WARNING

插件没有提供前端菜单样式，请自行根据主题制作

INFO

~~后台菜单结构拖动有点问题，但可以正常使用~~，已经修复这个问题了

更新日志

2023.05.09 更新至 1.12 版本，增加几个输出属性
2022.04.29 更新至 1.11 版本，修复 PHP 8.0 报错，修复删除菜单后提示菜单不存在

资源下载

Typecho 菜单

ArticlePoster：开源Typecho海报插件

上一篇 03-08

XEditor 一款基于 Vditor 的 Markdown 编辑器 for Typecho

05-04 下一篇

随机推荐

继续探索

推荐

2025年04月25日，三月廿八，星期五，在这里每天60秒读懂世界！

INFO任何一件事到最后都是好事，如果不是，那就说明还没有到最后交通运输部：今年“五一”假期小客车上高速免...

04-25 2 分钟

推荐

2025年07月23日，六月廿九，星期三，在这里每天60秒读懂世界！

INFO仅仅活着是不够的，还需要有阳光、自由、和一点花的芬芳2025《财富》中国500强发布：国家电网蝉联...

07-23 2 分钟

推荐

2026年02月11日，星期三，在这里每天60秒读懂世界！

INFO选一个方向，定一个时间；剩下的只管努力与坚持，时间会给我们最后的答案山姆、盒马、叮咚等集体官宣：春...

02-11 2 分钟

推荐

2025年03月06日，二月初七，星期四，在这里每天60秒读懂世界！

INFO生活是好的，峰回路转，柳暗花明，前面总会有另一番不同的风光官方工作报告：城乡居民基础养老金最低标准...

03-06 2 分钟

精选留言

已有 138 条评论

jaychen
2023-02-12 14:02 • 广东省

回复

不错不错，刚好做网站要用到
oo
2023-02-13 17:02 • 福建省

回复

为v地方v大幅波动
zcvs
2023-02-13 22:02 • 河南省

回复

这个需要好好学习
peter
2023-02-16 09:02 • 菲律宾

回复

感谢分享
ohho
2023-03-11 18:03 • 山西省

回复

学习学习
654
2023-03-15 09:03 • 陕西省

回复

好
hema
2023-03-20 00:03 • 北京市

回复

感谢分享！
老王
2023-03-23 10:03 • 广东省

回复

试试，支持一下
xia8098
2023-03-23 10:03 • 河北省

回复

这个需要好好学习
11
2023-03-28 14:03 • 四川省

回复

地址失效了，怎么下载
小树叶
2024-03-01 18:03 • 陕西省

回复

大佬，我想加到首页顶部导航栏那里，应该把《在主题中使用一下方法调用菜单:
<?php Typecho_Widget::widget('NavMenu_List')->navMenu('header'); ?>》加在哪里
1. Ryan
  2024-03-01 18:03 • 未知地区
  
  回复
  
  @小树叶
  header.php 首页文字附近
  1. 小树叶
    2024-03-01 21:03 • 陕西省
    
    回复
    
    @Ryan
    谢谢大佬您的回复，但是我现在插件点击启用直接提示无法启用插件
  2. 小树叶
    2024-03-01 21:03 • 陕西省
    
    回复
    
    @Ryan
    原来是插件忘了改名了，我把这个<?php Typecho_Widget::widget('NavMenu_List')->navMenu('header'); ?>放在了
  3. 小树叶
    2024-03-01 21:03 • 陕西省
    
    回复
    
    @Ryan
    但是出现了这个Warning: require_once(/www/wwwroot/35.41.25.36/usr/plugins/NavMenu/NavMenu/panel/nav-menus.php): failed to open stream: No such file or directory in /www/wwwroot/35.41.25.36/admin/extending.php on line 23
    
    Ryan
    2024-03-04 17:03 • 未知地区
    
    回复
    
    @小树叶
    目录嵌套了，你看看你的目录解构 NavMenu/NavMenu
一根烟
2025-01-20 16:01 • 陕西省

回复

插件不支持PHP7.3吗？
1. Ryan
  2025-01-23 12:01 • 未知地区
  
  回复
  
  @一根烟
  有什么报错吗？我本地测试 PHP7.3没问题
xxx
2025-10-02 15:10 • 江苏省

回复

1.3报错

导航菜单

搜索