PbootCMS 常用判断标签与导航高亮教程
在 PbootCMS 模板开发中,灵活运用判断标签可以实现导航高亮、子菜单显示、分页控制等多种功能。以下整理 13 个常用场景的代码示例,帮助开发者快速实现常见需求。
1. 导航高亮
用于非首页时,判断当前导航栏目编码是否等于顶级栏目编码,若相等则添加 active 类。
{pboot:if('[nav:scode]'=='{sort:tcode}')}class="active"{/pboot:if}
完整示例:
{pboot:nav}[nav:name]{/pboot:nav}
2. 判断有无子菜单
通过 [nav:soncount] 判断当前导航是否有子栏目,大于 0 则显示子菜单内容。
{pboot:if([nav:soncount]>0)}…{/pboot:if}
案例1:二级栏目循环判断
{pboot:nav}
<li><a href="[nav:link]">[nav:name]</a>
{pboot:if([nav:soncount]>0)}
<div>
{pboot:2nav parent=[nav:scode]}
<a href="[2nav:link]">[2nav:name]</a>
{/pboot:2nav}
</div>
{/pboot:if}
</li>
{/pboot:nav}
案例2:判断是否链接赋值
{pboot:nav}
<li><a {pboot:if([nav:soncount]>0)} href="javascript:;" {else} href="[nav:link]" {/pboot:if}>[nav:name]</a></li>
{/pboot:nav}
3. 内页子菜单高亮
判断当前子栏目编码是否等于当前内容页栏目编码,相等则添加 active 类。
{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. 判断标签为空时不显示
当公司 QQ 等标签为空时,不显示对应内容。
{pboot:if('{pboot:companyqq}'!='')}QQ:{pboot:companyqq}{/pboot:if}
5. 判断列表页有无内容,无内容返回提示
通过 {page:rows} 判断列表是否有数据,无数据则显示“暂无内容”。
{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>
<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>
<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 选项卡,为第一个元素添加 active 类。
{pboot:if('[xx:i]'=='1')}class="active"{/pboot:if}
{pboot:nav}
<a href="[nav:link]" {pboot:if('[nav:i]'=='1')}class="active"{/pboot:if}>[nav:name]</a>
{/pboot:nav}
{pboot:list}
<a href= "[list:link]" {pboot:if('[list:i]'=='1')}class="active"{/pboot:if}>[list:title]</a>
{/pboot:list}
{pboot:slide gid=* num=*}
<img src="[slide:src]" {pboot:if('[slide:i]'=='1')}class="active"{/pboot:if}>
{/pboot:slide}
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. 内容页判断列表中的当前文章高亮
在右侧推荐文章列表中,若链接等于当前文章链接,则添加 active 类。
{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>
{/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 的菜单
隐藏栏目编码为 2、4、6 的菜单。
{pboot:if([nav:scode]==2||[nav:scode]==4||[nav:scode]==6)}style="display: none;"{/pboot:if}
案例:
{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 居中判断
在导航循环中,当循环到第 3 个菜单时插入 logo 图片,实现 logo 居中效果。
{pboot:nav}
<a href="[nav:link]">[nav:name]</a>{pboot:if([nav:i]==3)}<img src="{pboot:sitelogo}">{/pboot:if}
{/pboot:nav}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
