“

大家好，我是雄雄，歡迎關(guān)注微信公眾號：????**雄雄的小課堂????。

”

?????????前言

昨天，給大家整理的是通過publiccms實(shí)現(xiàn)動態(tài)可維護(hù)的輪播圖，有需要的小伙伴可以點(diǎn)擊這里：publiccms實(shí)現(xiàn)動態(tài)可維護(hù)的首頁輪播效果。

今天，我們繼續(xù)拿出來昨天的頁面看看，發(fā)現(xiàn)首頁除了有會動的輪播圖之外，還有上面的導(dǎo)航菜單。

image-20210822082052364

以上導(dǎo)航，我們在實(shí)際開法中，肯定也是需要做個(gè)動態(tài)的，可讓用戶對其自定義管理，那么，今天我們就來看看如何使用publiccms實(shí)現(xiàn)動態(tài)導(dǎo)航，且包含二級導(dǎo)航。

?????♀?思路

和輪播圖一樣，導(dǎo)航也是通過頁面片段的方式來實(shí)現(xiàn)，在這里我多說一句，一般各個(gè)頁面都需要共用的地方，都是通過頁面片段來實(shí)現(xiàn)的，將共用部分的代碼提取到一個(gè)頁面片段中，后面其他頁面哪個(gè)位置需要使用，直接通過@_includePlace 引入即可，語法：

<@_includePlace?path="/eef45b01-0ac1-43eb-b8a3-96fa12922b4a.html"/>?<#--?首頁輪播圖?-->

?????????實(shí)現(xiàn)

點(diǎn)擊開發(fā)--》頁面片段模板--》創(chuàng)建頁面片段

image-20210822082955846

由于默認(rèn)的那個(gè)16進(jìn)制的名字看著太別扭，這次我們還是改一下吧，然后起個(gè)別名，數(shù)據(jù)條數(shù)不用指定，導(dǎo)航菜單只作為一個(gè)普通的頁面供其他頁面引用，故不用指定。最后點(diǎn)擊保存的按鈕

image-20210822083221696

點(diǎn)擊左側(cè)的導(dǎo)航菜單，右側(cè)就會顯示代碼，此時(shí)我們需要從頁面中將導(dǎo)航的代碼剪切出來放在導(dǎo)航菜單的頁面片段中。

我已經(jīng)將代碼拿出來了，如下：

?<!--?導(dǎo)航菜單欄開始?--><nav?id="main_menu"><div?class="menu_wrap"><ul?class="nav?sf-menu"><li?class="current?first"><a?href="index-2.html">Home</a></li><li?class="last"><a?href="about.html">About</a></li><li?class="sub-menu?first"><a?href="javascript:{}">Services</a><ul><li><a?href="internet.html"><span>-</span>Internet?Strategy</a></li><li><a?href="mobile.html"><span>-</span>Mobile?Marketing</a></li><li><a?href="social.html"><span>-</span>Social?Media</a></li><li><a?href="analytics.html"><span>-</span>Analytics</a></li></ul></li><li?class="sub-menu?first"><a?href="javascript:{}">Features</a><ul><li><a?href="scaffolding.html"><span>-</span>Scaffolding</a></li><li><a?href="typography.html"><span>-</span>Typography</a></li><li><a?href="shortcodes.html"><span>-</span>Shortcodes</a></li><li><a?href="tables.html"><span>-</span>Tables</a></li></ul></li><li?class="sub-menu?last"><a?href="javascript:{}">Portfolio</a><ul><li><a?href="portfolio_2columns.html"><span>-</span>2?Columns</a></li><li><a?href="portfolio_3columns.html"><span>-</span>3?Columns</a></li><li><a?href="portfolio_4columns.html"><span>-</span>4?Columns</a></li></ul></li><li?class="sub-menu?first"><a?href="javascript:{}">Blog</a><ul><li><a?href="blog.html"><span>-</span>Blog?with?right?sidebar</a></li><li><a?href="blog_post.html"><span>-</span>Blog?post</a></li></ul></li><li?class="last"><a?href="contacts.html">Contact</a></li></ul></div></nav><!--?導(dǎo)航菜單欄結(jié)束?-->

然后通過遍歷分類的方式實(shí)現(xiàn)循環(huán)遍歷用戶自定義的分類，下面我們現(xiàn)在添加幾個(gè)普通分類。

點(diǎn)擊內(nèi)容--》分類管理--》增加分類，此處按照實(shí)際增加分類即可。（可以參考我的添加，編碼隨便起一個(gè)就行，因?yàn)榉诸惱锩婵隙ㄓ袃?nèi)容，所以分類的頁面最后不要寫成靜態(tài)的，我們需要將分類訪問路徑:改成category.html?id=${category.id},此處的意思是根據(jù)分類編號查詢分類信息）--》最后點(diǎn)擊保存

image-20210822084157457

先將父分類添加完畢，我已經(jīng)添加完成，如下所示：

image-20210822084728364

從靜態(tài)頁面中，我們可以發(fā)現(xiàn)該導(dǎo)航欄中除了有一級菜單之外，還有二級菜單。二級菜單我們可以通過對應(yīng)的添加子分類的方式來實(shí)現(xiàn)。

在服務(wù)業(yè)菜單下面添加子分類：互聯(lián)網(wǎng)戰(zhàn)略、移動營銷、社交媒體、分析學(xué)。

image-20210822085045849image-20210822085540725

后臺已經(jīng)將所有的父分類和子分類添加完成，接下來回到導(dǎo)航菜單的頁面片段，我們寫代碼動態(tài)遍歷所有添加完成的導(dǎo)航。

點(diǎn)擊開發(fā)--》頁面片段模板--》打開導(dǎo)航菜單的頁面片段。

image-20210822085722440

10.將代碼改成如下（一定要根據(jù)自己的史記情況改代碼）：

?<!--?導(dǎo)航菜單欄開始?--><nav?id="main_menu"><div?class="menu_wrap"><ul?class="nav?sf-menu"><@_categoryList?><#list?page.list?as?a>?<!--?遍歷父分類?--><#assign?counts=0>?<!--?聲明一個(gè)變量，因?yàn)檫@邊代碼中有隔行不同效果?--><#if?counts%2==0><span><!--?判斷是否有子分類?--><#if?a.name??><li?class="sub-menu??last"><a?href="${a.url}">${a.name}</a></li><!--?開始遍歷子分類?--><@_categoryList?parentId=a.id?><ul><#list?page.list?as?b><li><a?href="${b.url!}"><span>-</span>${b.name}</a></li></#list></ul></@_categoryList><#else><li?class="last"><a?href="${a.url}">${a.name}</a></li></#if>??</span><#else><span><!--?判斷是否有子分類?--><#if?a.haschildIds?has_content><li?class="sub-menu??first"><a?href="${a.url}">${a.name}</a></li><!--?開始遍歷子分類?--><@_categoryList?parentId=a.id?><ul><#list?page.list?as?b><li><a?href="${b.url!}"><span>-</span>${b.name}</a></li></#list></ul></@_categoryList><#else><li?class="first"><a?href="${a.url}">${a.name}</a></li></#if>??</span></#if><#assign?counts=counts+1></#list></@_categoryList></ul></div></nav><!--?導(dǎo)航菜單欄結(jié)束?-->

最后就可以實(shí)現(xiàn)動態(tài)導(dǎo)航效果了。注意代碼中的邏輯有點(diǎn)兒復(fù)雜，大致原理就是，先判斷父分類是否不為空，如果不為空的話遍歷其下的子節(jié)點(diǎn)，否則不進(jìn)行遍歷。

今天的分享就到這里，歡迎一鍵三連~????

?????♀?推薦推薦小商店的一些小商品

總結(jié)

以上是生活随笔為你收集整理的【最全最详细】使用publiccms实现动态可维护的导航菜单栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。