publiccms实现遍历多级分类下的不同样式内容

大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂

前言

现在是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到现在越来越上手，不得不说这是一个很大的进步！！！