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

简介: 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标题的时候找不到对应的内容。

image-20220102173726375

我用的方法是重新加了两个变量,外层循环一个,内层循环一个,这样既不会重复,也能和上面的标题href后面的值对应上。

假如每个三级分类下面的内容都一样的话,我就可以直接根据三级分类,再次遍历该分类下面的内容,但是,不一样……,三个分类的内容都不一样,一下子不知道咋遍历了。

后来又是通过加了个变量,判断变量的值,代码如下:

image-20220102175145062

 <!--中间内容-->
        <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到现在越来越上手,不得不说这是一个很大的进步!!!

目录
相关文章
|
1月前
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
223 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
|
2月前
uniapp实战 —— 竖排多级分类展示
uniapp实战 —— 竖排多级分类展示
39 0
|
2月前
|
前端开发
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
101 0
|
4月前
|
Java 数据库
publiccms实现遍历多级分类下的不同样式内容
publiccms实现遍历多级分类下的不同样式内容
|
4月前
|
定位技术
Word目录中自动添加自定义样式的多级标题的方法
Word目录中自动添加自定义样式的多级标题的方法
|
前端开发
Freemarker动态模板渲染&flyingsaucer将html转PDF(多页固定头尾)
Freemarker动态模板渲染&flyingsaucer将html转PDF(多页固定头尾)
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
271 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
|
前端开发 JavaScript 信息无障碍
导航条-组件结构分析|学习笔记
快速学习 导航条-组件结构分析
157 0
导航条-组件结构分析|学习笔记
|
前端开发 开发者 容器
分类页-两栏自适应 |学习笔记
快速学习 分类页-两栏自适应
分类页-两栏自适应 |学习笔记
html+css实战29-表格-结构标签
html+css实战29-表格-结构标签
98 0
html+css实战29-表格-结构标签