*
您的位置:鄭州SEO網站優化 > Z-Blog > 內容詳情

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

发布时间:2016-06-28 00:00 來源:互聯網 編輯:本站編輯 浏覽次數:151人

我想對于使用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,不然设置的二级菜单代码会消失而导致不起作用。

最新文章

  • 1使用自媒體平台做SEO優化成未來趨勢
  • 2直播都那麽火爲什麽還一直堅持做
  • 3百度將近一個月的瘋狂更新,今天終
  • 4洛陽優化公司教你關于搜索引擎優化
  • 5SEO從業者學習免費自助建站的三個思
  • 6洛陽seo教你怎樣才能做好SEO管理者?
  • 7图片外链有什么用 可以提高网站的排
  • 8驚爆!有關SEO文章收錄的問題,詳情
  • 9數據庫遷移造成網站兩三天內打不開
  • 10新鄉SEO感想篇:SEO基礎五要素回顧
  • 11教你通過逆向思維實施SEO達成目的
  • 12新鄉網站優化網站一直不收錄怎麽辦
  • 13新鄉SEO告訴你網站如何進行圖片搜索
  • 14新鄉SEO告訴你新站怎樣快速獲得百度
  • 15開封裝修公司案例-開封漢東裝飾設計
  • 16開封SEO案例-開封婚紗攝影工作室
  • 17開封SEO案例-蔬菜大棚,大棚骨架
  • 18開封SEO優化案例-開封大衆婚慶公司
  • 19開封優化案例-開封大衆搬家公司
  • 20開封SEO案例-開封美的空調維修