将逐浪CMS标签与JS判断灵活结合,美的不要不要的

返回逐浪CMS技术讨论区
4回复贴,共1页,点击数:121

之前发过一个有关“相关文章的内容”
逐浪CMS Tags内容关键词设计优化方向讨论 https://bbs.z01.com/PItem?id=18453 [分享自逐浪CMS开发者社区社区]
最近在使用过程当中,发现相关文章这块在使用过程当中依然有所不足。比如说“上格筑家”这个关键词吧。如果说超过了10条,或者超过了我们所预期的条数,那样式展示,或者优化效果可以达到我们的要求,如果没超过呢?
比如说除了这条,再没有别的了那可能相关这里就没有别的内容了?这怎么办?
在MVC当中,判断标签可以选择为空则,或者字段num<10 则怎么处理
但是在逐浪CMSV8当中判断标签的使用却是条件比较不好符合的那怎么办呢?
之前有一次我将CSS写法写进了标签设计当中
这次我决定用JS来控制一下
首先咱们先写一个正常的相关文章内容
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
然后将标签引用
{ZL.Label id=”相关文章列表带图简介输出” ShowNum=”10” TitleNum=”30” KeyWord=”0” Synnum=”100” /}
根据我测试的文章,我得到了3条相关内容
在这里插入图片描述
这样有点少,那怎么办?然后我再调用7个别的内容,并要求内容本文章内容不显示
写标签
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样我们会发现我们需要再调用几个内容成了问题,那如果根据第一个标签的结果来控制第二个结果呢?
逐浪CMS四则运算,将四则运算用当shownum这里
先写一个统计标签,统计第一个标签的文章数,
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样得到了第一个标签的数后,我们用10减去这个数,剩下的就是第二个标签要显示的数了
然后我们将四则运算带到第二个标签当中控制数据数目
在这里插入图片描述
代码如下:
{ZL:Calc(10-{ZL.Label id="相关文章列表带图简介输出统计数" KeyWord="@KeyWord" /},0)/}
样式调整

<ul class="news-tumlist">
{ZL.Label id="相关文章列表带图简介输出" ShowNum="10" TitleNum="30" KeyWord="{SField sid="文章模型数据源标签" FD="Tagkey" page="0"/}" Synnum="100" /}
</ul>
<ul class="news-tumlist">
{ZL.Label id="整站文章列表带图简介输出" ShowNum="" TitleNum="30" KeyWord="{SField sid="文章模型数据源标签" FD="Tagkey" page="0"/}" Synnum="100" /}
</ul>

上图
在这里插入图片描述

这样我们的问题是不是就完了?
不是的当相关文章低于10的时候是正常的。可是当相关内容超过10的时候问题就来了
{ZL:Calc(10-{ZL.Label id="相关文章列表带图简介输出统计数" KeyWord="@KeyWord" /},0)/}
这段代码来控制数据数目会出现负值
在这里插入图片描述
负值会调用出多少,我没有数,反正会很多
那怎么办呢?我采用了JS来控制第二个标签

<div class="list-more">
<ul class="news-tumlist">
{ZL.Label id="整站文章列表带图简介输出" ShowNum="" TitleNum="30" KeyWord="{SField sid="文章模型数据源标签" FD="Tagkey" page="0"/}" Synnum="100" /}
</ul>
</div>
<script>
var num = {ZL.Label id="相关文章列表带图简介输出统计数" KeyWord="{SField sid="文章模型数据源标签" FD="Tagkey" page="0"/}" /}
if(num < 10){
   $(".list-more").show();
  }else{
    $(".list-more").hide();
  }
</script>

样式呈现没问题,但是多余的代码会进行隐藏处理
这样我们就可以先这样用了
样式网页https://weihai.3j99.cn/Item/8697

此贴算是一个半拉子工程吧,后面我就用数据标签的形式再尝试改一下。如果成功了,就分享出来,如果失败了,就请大神授技了

1楼 2020/08/07 11:37

美得不胜收,这就是大约的工匠精神吧。

2楼 2020/08/07 11:48 收起回复

为负,就调用隐藏类,直接替补不就得了。
代码是你可以好好用child

nth:child()
# 举例:
p:nth-child(2)
{
background:#ff0000;
}
3楼 2020/08/07 11:54 收起回复

重点不是样式呈现,是为负值时好像可以调用出数据数目为top10000 如果当内容为十个二十个的还好,如果为数目量大则服务器压力有点大。。目前我将第二个凑数的标签删了,不够10就不够10吧,等找到方法后再说

4楼 2020/08/07 11:57 收起回复

过度js依赖症,你这样不好。

5楼 2020/08/07 12:01 收起回复
您未登录,没有发贴权限[点此登录]