publiccms实现遍历多级分类下的不同样式内容
【摘要】 大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂 前言现在是2022年1月2日17:06:51,假期这两天都在做publiccms。上篇文章遗留的问题，最终还是没有按照富文本去做，后期在看吧；今天遇到了个问题，解决了好久，特此记录一下…等写完回头看的时候其实也不难，但是当时哎做的时候，就是没有这样的思路，可能也与freemarker的语法有关，用起来确实别扭，要是换做java，这个问题也不...
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂
前言
现在是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到现在越来越上手，不得不说这是一个很大的进步！！！
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）