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

前言

現在是2022年1月2日17:06:51,假期這兩天都在做publiccms。

上篇文章遺留的問題，最終還是沒有按照富文本去做，后期在看吧；

今天遇到了個問題，解決了好久，特此記錄一下…等寫完回頭看的時候其實也不難，但是當時哎做的時候，就是沒有這樣的思路，可能也與freemarker的語法有關，用起來確實別扭，要是換做java，這個問題也不至于解決的這么慢。

效果分析：

效果如圖所示，具體分析一下：

• 學術研究：一級分類，編號為8
• 運動健康、醫療健康、飲食健康：二級分類，父級分類的編號為8
• 項目、學術、研發團隊：三級分類，父級分類分別為二級分類
• 列表、卡片、表格：三級分類下的內容，各三級分類下面對應的內容樣式不一樣。

要實現的效果就是將數據庫中的分類都遍歷出來，而且將各分類下面的內容遍歷展示出來。

實現思路：

二級分類很好遍歷，根據父分類的編號即可遍歷出來，代碼如下：

<@_categoryList parentId=8><#list page.list as a> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-0" style="padding: 0;opacity: 0;float: left;">0</div><li class="xueshu1">${a.name!}</li></#list> </@_categoryList>

三級分類也相對簡單，在遍歷二級分類的同時，再加入一個循環即可，代碼如下：

<@_categoryList parentId=8><#list page.list as a> <@_categoryList parentId=a.id><#assign counts_cate=0> <#list page.list as cate><li class="xueshu1">${a.name!}</li><#assign counts_cate=counts_cate+1> </#list></@_categoryList> </#list> </@_categoryList>

這里還涉及到了個問題，因為用到tab選項卡，所有href后面的地址需要和下面內容的id地址一樣，不然點擊的tab標題的時候找不到對應的內容。

我用的方法是重新加了兩個變量，外層循環一個，內層循環一個，這樣既不會重復，也能和上面的標題href后面的值對應上。

假如每個三級分類下面的內容都一樣的話，我就可以直接根據三級分類，再次遍歷該分類下面的內容，但是，不一樣……,三個分類的內容都不一樣，一下子不知道咋遍歷了。

后來又是通過加了個變量，判斷變量的值，代碼如下：

<!--中間內容--><div class="container" style="padding: 0;"><div class="col-lg-2 col-md-2 col-sm-2 col-xs-0" style="padding: 0;opacity: 0;">0</div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 price" style="padding: 10px;"><!--三個標題--><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 category" style="z-index: 99;padding: 0;"><ul><@_categoryList parentId=8><#list page.list as a> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-0" style="padding: 0;opacity: 0;float: left;">0</div><li class="xueshu1">${a.name!}</li></#list></@_categoryList></ul></div><@_categoryList parentId=8><#assign counts=0> <#list page.list as a> <!--第一個內容--><div class="cont"></div> <div class="cont cont_bianli" style="z-index: 0;"><div class="col-lg-2 col-md-2 col-sm-2 col-xs-0" style="padding: 0;opacity: 0;height: 58px;">0</div><!-- 第一個內容下的子分類 --><ul class="col-lg-8 col-md-8 col-sm-8 col-xs-12 tabs" data-tabstyle="z-index: 88;display: flex;align-items: center;"><@_categoryList parentId=a.id><#assign counts_cate=0> <#list page.list as cate><li class="tab-title"><a href="#home${counts}${counts_cate}">${cate.name!}</a></li><#assign counts_cate=counts_cate+1> </#list></@_categoryList></ul><div class="col-lg-2 col-md-2 col-sm-2 col-xs-0" style="padding: 0;opacity: 0;height: 58px;">0</div><div class="tabs-content" style="z-index: 0;"><@_categoryList parentId=a.id><#assign counts_cate=0> <#list page.list as cate><!-- 如果是第一次遍歷，就走第一個 --> <#if counts_cate==0><!-- 第一個分類下的內容 --><div class="content" id="home${counts}${counts_cate}" style="margin-top: 80px;"><@_contentList categoryId=cate.id pageSize=3><#list page.list as b> <div class="xiangmu" style="width: 100%;margin-bottom: 50px;max-height: 900px;"><div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"style="float: left;height: 318px;padding: 0;margin-bottom: 70px;background-image: url(${b.cover!});background-size: 100% 100%;"></div><div class="col-lg-1 col-md-1 col-sm-1 col-xs-0"style="padding: 0;opacity: 0;height: 318px;margin-bottom: 70px;">0</div><div class="col-lg-7 col-md-7 col-sm-7 col-xs-12"style="height: 318px;float: left;padding: 0;margin-bottom: 70px;"><div class="titles"style="margin-top: 36px;height: 15px;font-size: 20px;font-weight: 900;color: #1D1D28;">${b.title!}</div><div class="wenzhang"style="width: 100%;margin-top: 29px;font-size: 16px;font-weight: 400;color: #333333;">${b.description!}</div><a href="${b.url!}"><div class="zhixun_chakangengduo"><span>查看更多</span><div class="zhixun_img"></div></div></a></div></div></#list></@_contentList> </div></#if> <!-- 如果是第2次遍歷，就走第2個 --><#if counts_cate==1><!-- 第二個分類下的內容 --><div class="content" id="home${counts}${counts_cate}" style="margin-top: 80px;"><@_contentList categoryId=cate.id pageSize=4><#list page.list as b> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12 xueshuDiv"style="height: 284px;float: left;border: 1px solid;"><div style="margin-left: 25px;height: 284px;width: 93%;float: left;"><div class="titles"style="margin-top: 36px;height: 15px;font-size: 20px;font-weight: 900;color: #1D1D28;">${b.title!}</div><div class="wenzhang"style="width: 100%;margin-top: 29px;font-size: 16px;font-weight: 400;color: #333333;">${b.description!}</div><a href="${b.url!}"><div class="zhixun_chakangengduo"><span>查看更多</span><div class="zhixun_img"></div></div></a></div></div></#list></@_contentList> </div></#if><#if counts_cate==2><!-- 如果是第3次遍歷，就走第3個 --><!-- 第三個分類下的內容 --><div class="content" id="home${counts}${counts_cate}" style="margin-top: 80px;"><div class="containerss"><@_contentList categoryId=cate.id pageSize=4><#list page.list as b> <div class="son"><img src="${b.cover!}" style="width: 200px;height: 267px;"><divstyle="margin-top: 32px; text-align: center;font-size: 20px;font-weight: bold;">${b.title!}</div><divstyle="margin-top: 15px;text-align: center;font-size: 16px;font-weight: 400;color: #535353;">${b.description!}</div></div></#list></@_contentList></div></div></#if><!-- 遍歷結束 --><#assign counts_cate=counts_cate+1> </#list></@_categoryList> </div></div></#list><#assign counts=counts+1> </@_categoryList></div></div><!--中間內容結束-->

看上去有點亂，freemarker的語法不但不會自動縮進，反而賦值上去還會更亂，懶的縮進了…

從剛開始討厭freemarker到現在越來越上手，不得不說這是一個很大的進步！！！

總結

以上是生活随笔為你收集整理的publiccms实现遍历多级分类下的不同样式内容的全部內容，希望文章能夠幫你解決所遇到的問題。

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