您现在的位置是:首页 > cms教程 > PbootCMS教程PbootCMS教程
pbootcms常用if条件判断语句隔行换色,导航高亮,缩略图判断写法
梁汐季2024-09-09PbootCMS教程已有人查阅
导读1. 导航高亮。2. 判断有无子菜单。3. 内页子菜单高亮。4. 判断标签为空时不显示。5. 判断列表页有无内容,无内容返回提示。6. 分页判断进阶,在第一页时隐藏首页和上一页按钮,在之后一页时隐藏下一页和尾页按钮。
1. 导航高亮
例:
{pboot:if('[list:link]' == '{content:link}')}class=“active”{/pboot:if} //判断列表内链接等于本文链接
例:
{pboot:if(’[nav:i]’>‘2’)}……{/pboot:if} //从第二个开始
例:
例:
{pboot:if('[nav:scode]' == '{sort:tcode}' )}class="active"{/pboot:if} //用于非首页
<li {pboot:if(0=='{sort:scode}')}class="on"{/pboot:if}> <a href="{pboot:sITepath}/" title="">网站首页</a> </li> //用于首页高亮
例:
{pboot:nav}
<li {pboot:if('[nav:scode]'=='{sort:tcode}')}class="active"{/pboot:if}><a href="[nav:link]">[nav:name]</a></li>
{/pboot:nav}
2. 判断有无子菜单
{pboot:if([nav:soncount]>0)}…{/pboot:if}
例:
{pboot:nav}
<li><a href="[nav:link]">[nav:name]</a> <!--一级菜单循环-->
{pboot:if([nav:soncount]>0)} <!--当有子菜单时显示div-->
<div>
{pboot:2nav parent=[nav:scode]}
<a href="[2nav:link]">[2nav:name]</a> <!--二级菜单循环-->
{/pboot:2nav}
</div>
{/pboot:if}
</li>
{/pboot:nav}
3. 内页子菜单高亮
{pboot:if('[nav:scode]' == '{sort:scode}')}class="active"{/pboot:if}
例:
{pboot:nav parent={sort:tcode}}
<li {pboot:if('[nav:scode]'=='{sort:scode}')}class="active"{/pboot:if}><a href="[nav:link]">[nav:name]</a></li>
{/pboot:nav}
4. 判断标签为空时不显示
{pboot:if('{pboot:companyQQ}'!='')}QQ:{pboot:companyqq}{/pboot:if} <!--同理也可用在文章详情页-->
5. 判断列表页有无内容,无内容返回提示
{pboot:if({page:rows}>0)}{page:bar}{else}暂无内容{/pboot:if}
例:
{pboot:if({page:rows}>0)}
<div class="page">
<a href="{page:index}">首页</a>
<a href="{page:pre}">上一页</a>
{page:numbar}
<a href="{page:next}">下一页</a>
<a href="{page:last}">尾页</a>
</div>
{else}
<div class="page">暂无内容</div>
{/pboot:if}
6. 分页判断进阶,在第一页时隐藏首页和上一页按钮,在之后一页时隐藏下一页和尾页按钮。例:
{pboot:if({page:rows}>0)}
<div class="page">
<a href="{page:index}"{pboot:2if('{page:current}'==1)}class="hide"{/pboot:2if}>首页</a> <!--在第一页时,当前页码‘{page:current}’等于1,添加‘hide’样式,.hide{dispaly:none;}-->
<a href="{page:pre}"{pboot:2if('{page:current}'==1)}class="hide"{/pboot:2if}>上一页</a> <!--与上条同理-->
{page:numbar}
<a href="{page:next}"{pboot:2if('{page:current}'=='{page:count}')}class="hide"{/pboot:2if}>下一页</a> <!--在之后一页时,当前页码‘{page:current}’等于总页数‘{page:count},’添加‘hide’样式,.hide{dispaly:none;}-->
<a href="{page:last}"{pboot:2if('{page:current}'=='{page:count}')}class="hide"{/pboot:2if}>尾页</a><!--与上条同理-->
</div>
{else}
<div class="page">暂无内容</div>
{/pboot:if}
7.判断第一个循环项,并添加 class(常用于 banner 和 Tab 选项卡)
{pboot:if('[xx:i]' =='1')}class="active"{/pboot:if}
<!--第一个菜单添加 class="active"-->
{pboot:nav}
<a href="[nav:link]" {pboot:if('[nav:i]'=='1')}class="active"{/pboot:if}>[nav:name]</a>
{/pboot:nav}
<!--第一条文章添加 class="active"-->
{pboot:list}
<a href= "[list:link]" {pboot:if('[list:i]'=='1')}class="active"{/pboot:if}>[list:title]</a>
{/pboot:list}
<!--第一个轮播图添加 class="active"-->
{pboot:slide gid=* num=*}
<img src="[slide:src]" {pboot:if('[slide:i]'=='1')}class="active"{/pboot:if}>
{/pboot:slide}
<!--以上具体 [xx:i] 用法请参考官方手册,也可以用 jq 的选择器 + addclass-->
8.内容页判断有无多图,无多图显示缩略图
{pboot:if({content:ispics}==1)}…多图…{else}…缩略图…{/pboot:if}
例:
{pboot:if({content:ispics}==1)}
<ul>
{pboot:pics id={content:id} num=5}
<li><img src="[pics:src]" /></li> <!--多图循环-->
{/pboot:pics}
</ul>
{else}
<img src="{content:ico}" /> <!--缩略图-->
{/pboot:if}
9.内容页判断列表中的当前文章高亮(右侧推荐文章中的其中一条,正好是当前打开的文章时){pboot:if('[list:link]' == '{content:link}')}class=“active”{/pboot:if} //判断列表内链接等于本文链接
例:
<ul>
{pboot:list scode={sort:tcode} num=10 order='visits'}
<li {pboot:if('[list:link]'=='{content:link}')}class="active"{/pboot:if}><a href="[list:link]">[list:title]</a></li>
{/pboot:list}
</ul>
10.奇偶数判断(隔行变色)
{pboot:if([list:i]%2==0)}…{/pboot:if}
例:
<ul>
{pboot:list num=10}
<li {pboot:if([list:i]%2==0)}class="bg-dark"{/pboot:if}><a href="[list:link]">[list:title]</a></li> <!--等于0为偶数,等于1为奇数 .bg-dark{background:#000;}-->
{/pboot:list}
</ul>
11.判断导航从第几个开始{pboot:if(’[nav:i]’>‘2’)}……{/pboot:if} //从第二个开始
例:
{pboot:nav}
{pboot:if('[nav:i]'>'2')}
<li><a href="[nav:link]">[nav:name]</a></li>
{/pboot:if}
{/pboot:nav}
12.隐藏指定 scode 的菜单
{pboot:if([nav:scode]==2||[nav:scode]==4||[nav:scode]==6)}style=“display: none;”{/pboot:if} //隐藏 scode 为 2,4,6 的菜单
例:
{pboot:nav}
<li {pboot:if([nav:scode]==2||[nav:scode]==4||[nav:scode]==6)}style="display: none;"{/pboot:if}><a href="[nav:link]">[nav:name]</a></li>
{/pboot:nav}
13.pbootcms导航栏logo居中判断例:
{pboot:nav}
<a href="[nav:link]">[nav:name]</a>
{pboot:if([nav:i]==3)}
<img src="{pboot:sitelogo}">
{/pboot:if}
{/pboot:nav}
上面的的[nav:i]=3意思就是当输出到第三个导航栏的时候,在输出logo样式
本文标签:
很赞哦! ()
图文教程
pbootcms输出当前页面完整url的标签写法
pbootcms如何输出当前页面的完整url{pboot:httpurl}{content:link}
PbootCMS v3.0.6版本新增了哪些字段,怎么添加
PbootCMS v3.0.6版本新增了几个字段,这些字段主要用于增强内容管理和栏目的描述功能。具体新增的字段如下:多图标题字段:表名:ay_content字段名:picstitle类型:TEXT(1000)
pbootcms上传缩略图限制尺寸的方法
今天在帮客户建站的时候,不经意的发现上传了一张1920px的缩略图后,上传后实际只有1000px,后台找不到设置的地方。其实这个缩略图的限制是需要修改系统文件才可以。
pbootcms模板制作工具及基本知识介绍
在做模板之前,还要做一些准备工作,毕竟吃饭之前也要记得洗手。这里就简单介绍一下制作模板的时候需要做的一些准备工作。
相关源码
-
自适应新闻资讯技术博客个人网站pbootcms模板该模板基于PbootCMS开源内核深度开发,该模板适用于游戏新闻网站、游戏博客等企业或个人网站,新闻资讯技术博客pbootcms模板;采用六级分辨率断点适配技术查看源码 -
(自适应响应式)个人作品技术文章博客网站模板下载基于PbootCMS内核开发的响应式博客模板,为数字营销、技术分享类内容打造。采用前沿设计理念,兼顾内容展示与阅读体验,适配各类终端设备。通过本模板可快速构建专业级行业博客,有效传播专业知识与案例成果。查看源码 -
响应式帝国cms7.5NBA黑色体育资讯模板下载本模板为体育新闻媒体、报道机构设计,采用帝国CMS7.5内核开发,具备完整的资讯发布、体育日历、数据展示功能。响应式布局确保在手机端呈现实时资讯和图文内容查看源码 -
(自适应响应式)英文外贸医疗科研耗材设备pbootcms网站模板为医疗设备和外贸企业设计的响应式网站模板,基于PbootCMS系统开发。突出医疗产品认证展示和国际化特性,通过专业化的产品参数展示模块和文档管理系统,满足医疗行业严格的信息披露要求。查看源码 -
(自适应响应式)AI智能电子科技产品pbootcms网站模板下载基于PbootCMS内核的响应式模板,为AI智能硬件、电子产品等科技企业打造,通过技术创新实现品牌数字化升级。查看源码 -
(自适应响应式)英文外贸汽车零配件五金机械网站模板为汽车零部件制造商与五金机械出口企业打造的响应式网站模板,内置多语言切换功能,支持产品参数表、OEM能力展示等外贸场景需求。通过结构化数据展示帮助海外买家快速理解产品规格。查看源码
| 分享笔记 (共有 篇笔记) |
