“

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

”

?????????前言

昨天，給大家整理的是通過publiccms實現動態可維護的輪播圖，有需要的小伙伴可以點擊這里：publiccms實現動態可維護的首頁輪播效果。

今天，我們繼續拿出來昨天的頁面看看，發現首頁除了有會動的輪播圖之外，還有上面的導航菜單。

image-20210822082052364

以上導航，我們在實際開法中，肯定也是需要做個動態的，可讓用戶對其自定義管理，那么，今天我們就來看看如何使用publiccms實現動態導航，且包含二級導航。

?????♀?思路

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

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

?????????實現

點擊開發--》頁面片段模板--》創建頁面片段

image-20210822082955846

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

image-20210822083221696

點擊左側的導航菜單，右側就會顯示代碼，此時我們需要從頁面中將導航的代碼剪切出來放在導航菜單的頁面片段中。

我已經將代碼拿出來了，如下：

?<!--?導航菜單欄開始?--><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><!--?導航菜單欄結束?-->

然后通過遍歷分類的方式實現循環遍歷用戶自定義的分類，下面我們現在添加幾個普通分類。

點擊內容--》分類管理--》增加分類，此處按照實際增加分類即可。（可以參考我的添加，編碼隨便起一個就行，因為分類里面肯定有內容，所以分類的頁面最后不要寫成靜態的，我們需要將分類訪問路徑:改成category.html?id=${category.id},此處的意思是根據分類編號查詢分類信息）--》最后點擊保存

image-20210822084157457

先將父分類添加完畢，我已經添加完成，如下所示：

image-20210822084728364

從靜態頁面中，我們可以發現該導航欄中除了有一級菜單之外，還有二級菜單。二級菜單我們可以通過對應的添加子分類的方式來實現。

在服務業菜單下面添加子分類：互聯網戰略、移動營銷、社交媒體、分析學。

image-20210822085045849image-20210822085540725

后臺已經將所有的父分類和子分類添加完成，接下來回到導航菜單的頁面片段，我們寫代碼動態遍歷所有添加完成的導航。

點擊開發--》頁面片段模板--》打開導航菜單的頁面片段。

image-20210822085722440

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

?<!--?導航菜單欄開始?--><nav?id="main_menu"><div?class="menu_wrap"><ul?class="nav?sf-menu"><@_categoryList?><#list?page.list?as?a>?<!--?遍歷父分類?--><#assign?counts=0>?<!--?聲明一個變量，因為這邊代碼中有隔行不同效果?--><#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><!--?導航菜單欄結束?-->

最后就可以實現動態導航效果了。注意代碼中的邏輯有點兒復雜，大致原理就是，先判斷父分類是否不為空，如果不為空的話遍歷其下的子節點，否則不進行遍歷。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。