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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/323749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

四张图带你了解Tomcat系统架构--让面试官颤抖的Tomcat回答系列

转载自 四张图带你了解Tomcat系统架构--让面试官颤抖的Tomcat回答系列 俗话说&#xff0c;站在巨人的肩膀上看世界&#xff0c;一般学习的时候也是先总览一下整体&#xff0c;然后逐个部分个个击破&#xff0c;最后形成思路&#xff0c;了解具体细节&#xff0c;Tomcat的结构…

.NET Core 2.0应用程序大小减少50%

.NET Core 2.0应用程序减小体积瘦身官方工具 IL Linker。 IL Linker 来源于mono的linker https://github.com/mono/linker&#xff0c;目前还是预览版本。 在一般的情况下&#xff0c;链接器可以将应用程序的大小减少50&#xff05;&#xff0c;大型应用程序的大小可能更有利…

P1368-工艺【最小表示法】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP1368 题目大意 n个块&#xff0c;可以进行若干次将最左边的方块放在最右边&#xff0c;然后如果前面那个比后面那个瑕疵度小那么前面那个就是美丽的&#xff0c;求一个让最美丽的序列。 解题思路 求…

Orleans解决并发之痛(五):Web API

通过前面几篇文章的介绍&#xff0c;可能会疑问怎么在实际开发中调用Grain&#xff0c;之前Demo的Client都是基于控制台应用程序&#xff0c;实际开发下可能是基于Web Form、Web API、MVC......&#xff0c;由于一时短路了&#xff0c;没有联想到控制台应用程序的方式怎么切到其…

ASP.Net Core WebApi几种版本控制对比

一、版本控制的好处&#xff1a; &#xff08;1&#xff09;有助于及时推出功能, 而不会破坏现有系统。 &#xff08;2&#xff09;它还可以帮助为选定的客户提供额外的功能。 API 版本控制可以采用不同的方式进行控制&#xff0c;方法如下&#xff1a; &#xff08;1&…

POJ2279-Mr. Young's Picture Permutations【线性dp】

正题 题目链接:http://poj.org/problem?id2279 题目大意 有k列&#xff0c;每列人数不同&#xff0c;要求从左到右和从前到后身高都单调递减&#xff0c;学生高度是1∼N1∼N(人数总和) 解题思路 我们开一个五维数组&#xff0c;然后每次在人少那列填充&#xff0c;按照这总…

JoyOI(TYVJ)1071-LCIS【线性dp,LIS,LCS】

正题 题目链接:http://www.joyoi.cn/problem/tyvj-1071 题目大意 求两个序列的最长公共上升子序列。 code 我们先回顾一下LIS和LCS LIS:fimax{fj1}(j<i,aj<ai)fimax{fj1}(j<i,aj<ai)LCS:fi,jmax⎧⎩⎨⎪⎪⎪⎪⎪⎪⎪⎪⎪⎪⎪⎪⎪⎪fi−1,jfi,j−1fi−1,j−11(a…

asp.net core策略授权

在《asp.net core认证与授权》中讲解了固定和自定义角色授权系统权限&#xff0c;其实我们还可以通过其他方式来授权&#xff0c;比如可以通过角色组&#xff0c;用户名&#xff0c;生日等&#xff0c;但这些主要取决于ClaimTypes&#xff0c;其实我们也可以自定义键值来授权&a…

Safari浏览器不支持let声明的解决方式

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是2022年1月7日16:19:38,前几天用publiccms改了个网站&#xff0c;因为客户那边各种机型都有&#xff08;各PC端的分辨率也都不一样&#xff09;&#xff0c;所以导致页面呈现的效…

Executor 与 ExecutorService 和 Executors 傻傻分不清

转载自 Executor 与 ExecutorService 和 Executors 傻傻分不清 java.util.concurrent.Executor, java.util.concurrent.ExecutorService, java.util.concurrent. Executors 这三者均是 Java Executor 框架的一部分&#xff0c;用来提供线程池的功能。因为创建和管理线程非常心…

POJ3666-Making the Grade【线性dp】

正题 题目链接&#xff1a;http://poj.org/problem?id3666 题目大意 给定序列A,B。要求B严格单调&#xff0c;要求最小化 S∑Ni1|Ai−Bi|S∑Ni1|Ai−Bi|解题思路 根据书上说的数学归纳法&#xff0c;我们可以证明在S最小化的条件下&#xff0c;一定存在一种构造B的方案&am…

ASP.NET Core 2.0 自定义 _ViewStart 和 _ViewImports 的目录位置

在 ASP.NET Core 里扩展 Razor 查找视图目录不是什么新鲜和困难的事情&#xff0c;但 _ViewStart 和 _ViewImports 这2个视图比较特殊&#xff0c;如果想让 Razor 在我们指定的目录中查找它们&#xff0c;则需要耗费一点额外的精力。本文将提供一种方法做到这一点。注意&#x…

Safari浏览器不支持……

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂前言现在是2022年1月7日16:19:38,前几天用publiccms改了个网站&#xff0c;因为客户那边各种机型都有&#xff08;各PC端的分辨率也都不一样&#xff09;&#xff0c;所以导致页面呈现的效果…

json-lib的字符串自动转换坑

一、场景复现 &#xff08;1&#xff09;代码 import com.google.gson.Gson; import com.google.gson.GsonBuilder; import com.google.gson.JsonObject; import com.google.gson.JsonParser; import net.sf.json.JSONObject;public class C {public static void main(String…

JoyOI(TYVJ)1061-Mobile Service【线性dp】

正题 题目链接:http://www.joyoi.cn/problem/tyvj-1061 题目大意 有n个点&#xff0c;每个点之间都有权值不同的边&#xff0c;有3个机器人&#xff0c;有m个任务地点&#xff0c;机器人必须按顺序赶到任务地点&#xff0c;求最小代价。 解题思路 我们可以让fi,jfi,j表示两个…

开源分享 Unity3d客户端与C#分布式服务端游戏框架

很久之前&#xff0c;在博客园写了一篇文章&#xff0c;《分布式网游server的一些想法语言和平台的选择》&#xff0c;当时就有了用C#做网游服务端的想法。写了个Unity3d客户端分布式服务端框架&#xff0c;最近发布了1.0版本&#xff0c;取名ET框架。ET框架的目标就是简化客户…

freemarker中遇到null报错的处理方法

错误分析 今天遇到了这样的个问题&#xff0c;就是在获取分类的父id的时候发现如果是父级分类&#xff0c;则回去父id就会报错。 直接导致了后面的样式失败。 解决办法&#xff1a; 给添加了个默认值0&#xff0c;就可以了&#xff0c;代码如下&#xff1a; var cate_pare…

IDEA的debug方法头坑

一、现象复现 web程序跑起来很卡顿&#xff0c;十几分钟都跑步起来&#xff0c;而且页面刷新十几秒都没有反应。 三月 23, 2019 11:58:22 上午 com.mchange.v2.log.MLog <clinit> 信息: MLog clients using java 1.4 standard logging. 三月 23, 2019 11:58:22 上午 co…

背包例题の01,完全,多重

01背包&#xff1a;TYVJ1096-数字组合 题目链接:http://www.joyoi.cn/problem/tyvj-1096 题目大意 给N个正整数&#xff0c;求能组成M的方法有多少种 解题思路 不是说了吗&#xff0c;01背包呀&#xff01; code #include<cstdio> using namespace std; int n,m,a[10…

ASP.NET Core MVC I\/O编程模型

1.1. I/O编程模型浅析 服务器端编程经常需要构造高性能的IO模型&#xff0c;常见的IO模型有四种&#xff1a; &#xff08;1&#xff09;同步阻塞IO&#xff08;Blocking IO&#xff09;&#xff1a;即传统的IO模型。 &#xff08;2&#xff09;同步非阻塞IO&#xff08;Non…