有很多第一次接触ZBlogPHP免费主题Blogs的站长还不太懂如何添加二级菜单和个性化图标。今天老古就跟大家简单说一下如何操作可以像本站一样有二级菜单和个性化图标。
Blogs主题添加菜单（含二级菜单）步骤
登录网站后台 >> 模块管理 >> 导航栏，进入到导航栏模块编辑页面，在“正文”中添加类似以下代码（本站导航菜单的代码）即可：
<li id="nvabar-item-index"><a href="http://yigujin.wang/"><i class="fas fa-home"></i> 本站首页</a></li> <li><a href="http://yigujin.wang/category-2.html"><i class="fas fa-users"></i> 主题交流</a> <ul class="sub-menu"> <li><a href="http://yigujin.wang/category-1.html"><i class="fas fa-user"></i> 公告信息</a></li> </ul> </li> <li><a href="http://yigujin.wang/category-3.html"><i class="fas fa-sync-alt fa-spin"></i> 活动推荐</a> <ul class="sub-menu"> <li><a href="http://yigujin.wang/category-4.html"><i class="fas fa-folder"></i> 实用教程</a></li> </ul> </li> <li id="navbar-page-2"><a href="http://yigujin.wang/post/8.html" rel="nofollow noopener" target="_blank"><i class="fas fa-gift"></i> 打赏赞助</a></li> <li id="navbar-page-2"><a href="http://yigujin.wang/post/2.html" rel="nofollow noopener" target="_blank"><i class="fas fa-comments"></i> 留言&反馈</a></li>
从代码可以看出，一个菜单就是一个<li></li>，如果需要二级菜单的，就是在<li></li>中间添加<ul></ul>。比如上述代码中的公告信息和实用教程就是二级菜单。大家可以直接复制上述代码添加到正文中，然后修改链接名称和地址即可。具体效果如下图所示：
建议：把导航栏中的“禁止系统更新模块内容”的开关打开，要不然可能会出现保存后代码会变化了。
如何添加个性化图标？
上述导航菜单代码中均含有个性化图标。添加的方法也很简单的，打开Font Awesome 官网，建议选择免费图标，然后点击我们想要的图标（如点击地址簿图标 address-book），在出现的页面中点击【Start Using This Icon】按钮，然后点击下图红色箭头所示的复制图标按钮即可复制该图标 HTML 代码，然后粘贴到文件想要显示的位置即可。
如果你所添加的图标有些不显示，那就是图标的版本太高，Blogs主题所集成的是 Font Awesome 5.0.13 版本，高于这个版本的图标就无法显示。所以在添加图标的时候要顺便看一下所对应的版本，高于5.0.13版本就更换其他图标。
发表评论