前言
现在是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-tab style="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;"> <div style="margin-top: 32px; text-align: center;font-size: 20px;font-weight: bold;"> ${b.title!} </div> <div style="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到现在越来越上手，不得不说这是一个很大的进步！！！
