Typecho 自定义导航菜单插件：NavMenu 修改版 2022年02月02日 浪客剑心 899 下载地址：https://github.com/benzBrake/NavMenu !!! <h1 id="cl-1" style="font-weight:500;font-size:1.875rem;color:#222831;font-family:"background-color:#FFFFFF;"> <span>Typecho 自定义菜单插件</span> </h1> <h2 id="cl-2" style="font-weight:500;font-size:1.625rem;color:#222831;font-family:"background-color:#FFFFFF;"> <span>安装说明</span> </h2> <p style="color:var(--text-dark);font-size:16px;font-family:"background-color:#FFFFFF;"> 将插件克隆到本地, 放到 usr/plugins 目录下即可。 </p> <h2 id="cl-3" style="font-weight:500;font-size:1.625rem;color:#222831;font-family:"background-color:#FFFFFF;"> <span>插件说明</span> </h2> <p style="color:var(--text-dark);font-size:16px;font-family:"background-color:#FFFFFF;"> 此插件早在2015年原作者merdan在大三时就已完成。当时只支持单个菜单，后来抽点时间改成多菜单支持。 </p> <p style="color:var(--text-dark);font-size:16px;font-family:"background-color:#FFFFFF;"> 最近站长用到了这个插件，发现这个插件存在许多bug，一一修复并发布到 Github。 </p> <h2 id="cl-4" style="font-weight:500;font-size:1.625rem;color:#222831;font-family:"background-color:#FFFFFF;"> <span>插件特点：</span> </h2> <ol style="font-size:0.875rem;color:#222831;font-family:"background-color:#FFFFFF;"> <li> 多菜单支持 </li> <li> 支持分类、独立页面和自定义页面链接 </li> <li> 支持编辑菜单项（自定义菜单名称，自定义class, 新窗口等） </li> <li> 可拖动设置顺序和层级 </li> <li> 菜单结构可自定义，方便个性化布局 </li> <li> 支持内置变量替换，使用内置页面即可 </li> <li> 支持删除菜单 </li> </ol> <h2 id="cl-5" style="font-weight:500;font-size:1.625rem;color:#222831;font-family:"background-color:#FFFFFF;"> <span>使用方法</span> </h2> <ol style="font-size:0.875rem;color:#222831;font-family:"background-color:#FFFFFF;"> <li> 后台启用插件 </li> <li> 进入主菜单 控制台->菜单管理 即可看到菜单设置页面。 </li> <li> 默认有名为default 的菜单，在左侧新增菜单可以新增。 </li> <li> 左下方的菜单项里可添加分类，独立页面、内置页面和自定义链接到右侧菜单结构中。 </li> <li> 拉动菜单结构可以调整菜单顺序和层次。 </li> <li> 调整完了之后 <span>务必点击 保存设置 按钮进行保存，否则菜单不会生效</span> </li> <li> 在主题中使用一下方法调用菜单: </li> </ol> <pre> <ul style="font-size:0.875rem;"> <li> <span class="hljs-meta" style="color:#AA573C;"><?php</span> Typecho_Widget::widget(<span class="hljs-string" style="color:#2A9292;">'NavMenu_List'</span>)->navMenu(<span class="hljs-string" style="color:#2A9292;">'header'</span>); <span class="hljs-meta" style="color:#AA573C;">?></span> </li> </ul> </pre> <ol style="font-size:0.875rem;color:#222831;font-family:"background-color:#FFFFFF;"> <li> 当前菜单有相应的 .current class 名，可进行菜单高亮等布置 </li> </ol> <h2 id="cl-6" style="font-weight:500;font-size:1.625rem;color:#222831;font-family:"background-color:#FFFFFF;"> <span>调用函数说明：</span> </h2> <pre> <ul style="font-size:0.875rem;"> <li> <span class="hljs-comment" style="color:#655F6D;">/** </span> </li> <li> * <span class="hljs-doctag">@param</span> string $menu 菜单名称 </li> <li> * <span class="hljs-doctag">@param</span> null $navOptions 菜单配置 </li> <li> */ </li> <li> <span class="hljs-keyword" style="color:#955AE7;">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color:#955AE7;">function</span> <span class="hljs-title" style="color:#576DDB;">navMenu</span>(<span class="hljs-params" style="color:#AA573C;"><span class="hljs-variable" style="color:#BE4678;">$menu</span> = <span class="hljs-string" style="color:#2A9292;">'default'</span>, <span class="hljs-variable" style="color:#BE4678;">$navOptions</span> = <span class="hljs-literal">NULL</span></span>)</span> </li> </ul> </pre> <h2 id="cl-7" style="font-weight:500;font-size:1.625rem;color:#222831;font-family:"background-color:#FFFFFF;"> <span>菜单配置项</span> </h2> <pre> <ul style="font-size:0.875rem;"> <li> [ </li> <li> <span class="hljs-symbol" style="color:#2A9292;">'wrapTag</span>' => <span class="hljs-symbol" style="color:#2A9292;">'ul</span>', // 菜单项的容器 </li> <li> <span class="hljs-symbol" style="color:#2A9292;">'wrapClass</span>' => '', // 容器自定义class </li> <li> <span class="hljs-symbol" style="color:#2A9292;">'wrapId</span>' => '', // 容器自定义ID (<span class="hljs-name" style="color:#BE4678;">二级菜单展开等功能可使用ID</span> 去解决) </li> <li> <span class="hljs-symbol" style="color:#2A9292;">'itemTag</span>' => <span class="hljs-symbol" style="color:#2A9292;">'li</span>', // a 链接的容器 </li> <li> <span class="hljs-symbol" style="color:#2A9292;">'itemClass</span>' => '', // 容器自定义class </li> <li> <span class="hljs-symbol" style="color:#2A9292;">'current</span>' => <span class="hljs-symbol" style="color:#2A9292;">'current</span>', // 当前菜单的类名 </li> <li> <span class="hljs-symbol" style="color:#2A9292;">'caret</span>' => <span class="hljs-symbol" style="color:#2A9292;">'+</span>' // 有子菜单的菜单添加提示下拉图标 </li> <li> ]<span class="hljs-comment" style="color:#655F6D;">;</span> </li> </ul> </pre> <h2 id="cl-8" style="font-weight:500;font-size:1.625rem;color:#222831;font-family:"background-color:#FFFFFF;"> <span>插件截图</span> </h2> <p style="color:var(--text-dark);font-size:16px;font-family:"background-color:#FFFFFF;"> <a class="post-image" href="https://raw.githubusercontent.com/benzbrake/NavMenu/master/screen.png"><img class="photo" src="https://raw.githubusercontent.com/benzbrake/NavMenu/master/screen.png" alt="截图" title="截图" style="height:auto;" /><span class="photo-title" style="background:rgba(28, 31, 33, 0.6);color:#FFFFFF;font-size:12px;line-height:20px;">截图</span></a> </p> <h2 id="cl-9" style="font-weight:500;font-size:1.625rem;color:#222831;font-family:"background-color:#FFFFFF;"> <span>其他</span> </h2> <ol style="font-size:0.875rem;color:#222831;font-family:"background-color:#FFFFFF;"> <li> 插件没有提供前端菜单样式，可根据主题进行自定义布置 </li> <li> <del>后台菜单结构拖动有点问题， 但可以正常使用</del>，已经修复这个问题了 </li> </ol> <!--?php Typecho_Widget::widget('NavMenu_List')---> !!! TY插件 暂无标签