安徽元鼎建设工程网站,wordpress页面宽度改为全屏,湖南房地产加盟网站建设,网站设计推广“大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;????**雄雄的小课堂????。”????????前言昨天#xff0c;给大家整理的是通过publiccms实现动态可维护的轮播图#xff0c;有需要的小伙伴可以点击这里#xff1a;publiccms实现动… “大家好我是雄雄欢迎关注微信公众号????**雄雄的小课堂????。”????????前言昨天给大家整理的是通过publiccms实现动态可维护的轮播图有需要的小伙伴可以点击这里publiccms实现动态可维护的首页轮播效果。今天我们继续拿出来昨天的页面看看发现首页除了有会动的轮播图之外还有上面的导航菜单。image-20210822082052364以上导航我们在实际开法中肯定也是需要做个动态的可让用户对其自定义管理那么今天我们就来看看如何使用publiccms实现动态导航且包含二级导航。????♀️思路和轮播图一样导航也是通过页面片段的方式来实现在这里我多说一句一般各个页面都需要共用的地方都是通过页面片段来实现的将共用部分的代码提取到一个页面片段中后面其他页面哪个位置需要使用直接通过_includePlace 引入即可语法_includePlace path/eef45b01-0ac1-43eb-b8a3-96fa12922b4a.html/ #-- 首页轮播图 --
????????实现点击开发--》页面片段模板--》创建页面片段image-20210822082955846由于默认的那个16进制的名字看着太别扭这次我们还是改一下吧然后起个别名数据条数不用指定导航菜单只作为一个普通的页面供其他页面引用故不用指定。最后点击保存的按钮image-20210822083221696点击左侧的导航菜单右侧就会显示代码此时我们需要从页面中将导航的代码剪切出来放在导航菜单的页面片段中。我已经将代码拿出来了如下 !-- 导航菜单栏开始 --nav idmain_menudiv classmenu_wrapul classnav sf-menuli classcurrent firsta hrefindex-2.htmlHome/a/lili classlasta hrefabout.htmlAbout/a/lili classsub-menu firsta hrefjavascript:{}Services/aullia hrefinternet.htmlspan-/spanInternet Strategy/a/lilia hrefmobile.htmlspan-/spanMobile Marketing/a/lilia hrefsocial.htmlspan-/spanSocial Media/a/lilia hrefanalytics.htmlspan-/spanAnalytics/a/li/ul/lili classsub-menu firsta hrefjavascript:{}Features/aullia hrefscaffolding.htmlspan-/spanScaffolding/a/lilia hreftypography.htmlspan-/spanTypography/a/lilia hrefshortcodes.htmlspan-/spanShortcodes/a/lilia hreftables.htmlspan-/spanTables/a/li/ul/lili classsub-menu lasta hrefjavascript:{}Portfolio/aullia hrefportfolio_2columns.htmlspan-/span2 Columns/a/lilia hrefportfolio_3columns.htmlspan-/span3 Columns/a/lilia hrefportfolio_4columns.htmlspan-/span4 Columns/a/li/ul/lili classsub-menu firsta hrefjavascript:{}Blog/aullia hrefblog.htmlspan-/spanBlog with right sidebar/a/lilia hrefblog_post.htmlspan-/spanBlog post/a/li/ul/lili classlasta hrefcontacts.htmlContact/a/li/ul/div/nav!-- 导航菜单栏结束 --
然后通过遍历分类的方式实现循环遍历用户自定义的分类下面我们现在添加几个普通分类。点击内容--》分类管理--》增加分类此处按照实际增加分类即可。可以参考我的添加编码随便起一个就行因为分类里面肯定有内容所以分类的页面最后不要写成静态的我们需要将分类访问路径:改成category.html?id${category.id},此处的意思是根据分类编号查询分类信息--》最后点击保存image-20210822084157457先将父分类添加完毕我已经添加完成如下所示image-20210822084728364从静态页面中我们可以发现该导航栏中除了有一级菜单之外还有二级菜单。二级菜单我们可以通过对应的添加子分类的方式来实现。在服务业菜单下面添加子分类互联网战略、移动营销、社交媒体、分析学。image-20210822085045849image-20210822085540725后台已经将所有的父分类和子分类添加完成接下来回到导航菜单的页面片段我们写代码动态遍历所有添加完成的导航。点击开发--》页面片段模板--》打开导航菜单的页面片段。image-2021082208572244010.将代码改成如下一定要根据自己的史记情况改代码 !-- 导航菜单栏开始 --nav idmain_menudiv classmenu_wrapul classnav sf-menu_categoryList #list page.list as a !-- 遍历父分类 --#assign counts0 !-- 声明一个变量因为这边代码中有隔行不同效果 --#if counts%20span!-- 判断是否有子分类 --#if a.name??li classsub-menu lasta href${a.url}${a.name}/a/li!-- 开始遍历子分类 --_categoryList parentIda.id ul#list page.list as blia href${b.url!}span-/span${b.name}/a/li/#list/ul/_categoryList#elseli classlasta href${a.url}${a.name}/a/li/#if /span#elsespan!-- 判断是否有子分类 --#if a.haschildIds?has_contentli classsub-menu firsta href${a.url}${a.name}/a/li!-- 开始遍历子分类 --_categoryList parentIda.id ul#list page.list as blia href${b.url!}span-/span${b.name}/a/li/#list/ul/_categoryList#elseli classfirsta href${a.url}${a.name}/a/li/#if /span/#if#assign countscounts1/#list/_categoryList/ul/div/nav!-- 导航菜单栏结束 --
最后就可以实现动态导航效果了。注意代码中的逻辑有点儿复杂大致原理就是先判断父分类是否不为空如果不为空的话遍历其下的子节点否则不进行遍历。今天的分享就到这里欢迎一键三连~????????♀️推荐推荐小商店的一些小商品
