各地市:
南阳网站SEO中链轮模型如何建立? 济源SEO技术中更换IP后怎么做? 濮阳网站建设Linux服务器怎么配置SSH服务器? 开封域名注册的费用是多少? 济源网站优化SEO中快速排名有哪些应用场景? 安阳网站建设公司哪家专业可靠? 开封域名注册需要多少钱? 开封网站建设怎么定期Linux服务器备份数据? 平顶山响应式设计最新技术发展趋势分析? 洛阳SEO技术如何降低跳出率? 周口网站维护分为哪些类型? 三门峡网站建设Linux服务器怎么限制shell访问权限? 开封免费搭建网站的优势是什么? 濮阳电商网站需要注意什么事项? 济源网络安全有什么技巧? 周口网站建设Linux服务器通过哪些方式隐藏服务器? 洛阳免费搭建网站如何进行学习? 漯河定制化网站需要确认哪些功能? 商丘网站空间购买需要多长时间? 南阳域名注册需要多长时间? 洛阳网站建设导航设计有什么要求? 驻马店网页开发分为哪些类型? 信阳网站维护需要多少钱? 漯河网站优化中搜索引擎怎么操作? 焦作网络安全需要考虑什么因素? 许昌网站建设日常怎么检查服务器网络安全? 新乡seo中网站空间如何进行优化? 新乡免费搭建网站去哪儿找? 新乡网站设计去哪儿找? Linux服务器通过哪些方式发现未授权访问? 南阳网站建设Linux服务器怎么过滤流量? 南阳网站建设Linux服务器怎么记录未授权访问? 三门峡网站建设Linux服务器通过哪些方式拒绝服务攻击? 濮阳网站建设Linux服务器通过哪些方式限制流量? 安阳网站建设怎么处理服务器系统安全? 鹤壁网站建设404页面怎么开发?
您的位置: 主页 > 博客cms > Z-Blog入门之导航菜单的设置方法

Z-Blog入门之导航菜单的设置方法

发布时间:2023-08-04 11:04:55 | 发布者:往流科技

我想对于使用zblog的新手来说,如何设置导航菜单可能是一个很棘手的问题吧;经常在群里看见一些用户询问zblog导航栏要怎么设置呢?zblog怎样设置二级菜单?一般大神给出的回答是‘在模块管理中点击导航栏模块,按示例代码编辑’,如果是一个不太懂html代码的同学,按照步骤操作后,看见正文中的代码可能会一口老血喷在屏幕上吧。。。里面的字母是什么意思。。。什么意思。。。

Z-Blog入门 之 导航菜单的设置方法  第1张

开个玩笑:忘记是谁说的了‘zblog的导航栏逼走了多少新手’,‘zblog的新手因为导航栏逼疯了多少开发者’。

ps:如此打脸,官方表打我,请本着娱乐至上的态度看待;

Z-Blog入门 之 导航菜单的设置方法  第2张

好了,不开玩笑了,说正事;

小白福音:KandyLinkS 链接管理简版

在教大家如何手写代码设置导航栏前先推荐一款号称‘小白福音’的插件:KandyLinkS 链接管理简版;

主题ID:   KandyLinkS

版    本:  1.0

作    者:  吉光片羽

插件介绍:

这不应该是Z-Blog自带的功能么?大部分用博客的有几个是会写代码的?虽然新版很人性的添加了新建分类和页面自动插入导航栏的功能,可友情链接什么的呢?照着格式改?万一漏了个字母或标签呢?什么,页面乱了?够了么?够了!那就用KandyLink吧:

妈妈再也不用担心我不会如何爱爱(HTML)!

无需HTML编码知识便可轻松管理含二级菜单的链接。 

可自由调整链接顺序,打开方式。 

插件启用后会自动备份原链接模块,停用后还原。 

自带二级菜单交互开合,默认为悬停开合,当父链接为“#”时,启用点击开合。

插件下载地址:应用中心下载

Z-Blog入门 之 导航菜单的设置方法  第3张

手动设置Z-Blog导航栏

如果你是个动手能力强的同学,想要自己设置导航栏,那么我们来详细说下;

一、利用‘加入导航栏菜单’按钮快速添加

1)快速添加分类至导航模块;

Z-Blog入门 之 导航菜单的设置方法  第4张

Z-Blog入门 之 导航菜单的设置方法  第5张


2)快速添加单页至导航模块(例如:留言板)

Z-Blog入门 之 导航菜单的设置方法  第6张

Z-Blog入门 之 导航菜单的设置方法  第7张

二、导航模块代码详解

Z-Blog入门 之 导航菜单的设置方法  第8张

Z-Blog入门 之 导航菜单的设置方法  第9张

<li id="nvabar-item-index"><a href="http://www.fengyan.cc/">首页</a></li>  <!--首页示例代码-->
<li id="nvabar-item-index"><a href="你网站的首页链接">首页(名称,这个不用说了吧)</a></li> <!--首页代码说明-->
<li id="nvabar-item-index"><a href="你网站的首页链接" target="_blank">首页(名称,这个不用说了吧)</a></li> <!--链接在新窗口打开-->
<li id="nvabar-item-index"><a href="你网站的首页链接" target="_blank"><i class="fa fa-home"></i>首页(字体图标添加在文字前边)</a></li> <!--导航栏添加字体图标-->

ps:以上是首页的代码详解:

li标签里的id用处为部分主题用它判断当前页面进行导航高亮;

target="_blank"用来在新窗口打开链接,以下不在叙述;

<i class="fa fa-home"></i>导航添加字体图标,以下不在叙述;

分类导航链接:

<li id="navbar-category-3"><a href="http://www.fengyan.cc/website/">建站教程</a></li>  <!--分类示例代码-->
<li id="navbar-category-当前分类ID"><a href="当前分类链接">建站教程</a></li>  <!--分类代码说明-->

单页面导航链接:

<li id="navbar-page-1262"><a href="http://www.fengyan.cc/guestbook">留言本</a></li>  <!--单页面示例代码-->
<li id="navbar-page-当前页面ID"><a href="当前页面链接">留言本</a></li>  <!--单页面代码说明-->

二级导航代码示例:

<li id="navbar-category-17">
    <a href="http://www.fengyan.cc/z-blog/">Z-Blog建站<span class="caret"></span></a>
    <ul>
	<li id="navbar-category-9"><a href="http://www.fengyan.cc/zblog-course/">Z-Blog教程</a></li>
        <li id="navbar-category-9"><a href="http://www.fengyan.cc/plug/">Z-Blog插件</a></li>
        <li id="navbar-category-10"><a href="http://www.fengyan.cc/free-theme/">Z-Blog免费模板</a></li>
        <li id="navbar-category-8"><a href="http://www.fengyan.cc/premium-theme/">Z-Blog收费模板</a></li>
    </ul>
</li>

这里我就贴下烽烟博客的二级导航代码,不做详细的说明了,因为很多的主题没有二级导航,或者设置方式有一定要求,例如ul标签要添加id或者class,具体请以当前主题的说明为准;

最后在说一点:一定要将‘禁止系统更新模块内容: ’按钮点成ON,不然设置的二级菜单代码会消失而导致不起作用。