1. 功能概述
在 PbootCMS 中，可以通过 {pboot:nav} 和 {pboot:if} 标签组合，实现内页子栏目的当前栏目高亮显示。此功能适用于导航菜单中突出显示当前所在栏目，提升用户体验。
2. 实现方法
方法一：通过判断栏目编号实现高亮
标签语法
{pboot:nav num=10 parent={sort:tcode}}{pboot:if('[nav:scode]' == '{sort:scode}')}<li><a class="biglink left_active" href="[nav:link]">[nav:name]</a></li>{else}<li><a class="biglink" href="[nav:link]">[nav:name]</a></li>{/pboot:if}
{/pboot:nav}参数说明
| 参数 | 含义 | 示例 |
|---|---|---|
num |
显示的栏目数量 | num=10 |
parent |
指定父栏目的编号，{sort:tcode} 表示当前栏目的顶级栏目编号 |
parent={sort:tcode} |
[nav:scode] |
当前循环中的栏目编号 | [nav:scode] |
{sort:scode} |
当前页面所属的栏目编号 | {sort:scode} |
示例代码
以下代码展示了如何在内页子栏目中实现当前栏目的高亮显示：
<ul class="submenu">{pboot:nav num=10 parent={sort:tcode}}{pboot:if('[nav:scode]' == '{sort:scode}')}<li><a class="biglink left_active" href="[nav:link]">[nav:name]</a></li>{else}<li><a class="biglink" href="[nav:link]">[nav:name]</a></li>{/pboot:if}{/pboot:nav}
</ul>方法二：通过 CSS 样式优化高亮效果
样式代码
<style>
.submenu {list-style: none;padding: 0;margin: 0;
}
.submenu li {margin-bottom: 5px;
}
.biglink {text-decoration: none;color: #333;font-size: 16px;padding: 5px 10px;display: inline-block;
}
.left_active {background-color: #007bff;color: #fff;border-radius: 5px;
}
</style>效果说明
- 普通状态：链接显示为默认样式（如灰色字体）。
- 高亮状态：当前栏目链接添加
left_active类，背景色变为蓝色，文字颜色变为白色。
3. 注意事项
-
栏目编号匹配
- 确保
[nav:scode]和{sort:scode}的值正确匹配，避免高亮逻辑失效。
- 确保
-
父栏目设置
- 使用
{sort:tcode}获取当前栏目的顶级栏目编号，确保子栏目导航正确显示。
- 使用
-
样式调整
- 根据实际需求调整 CSS 样式，确保高亮效果符合设计要求。
-
兼容性测试
- 在不同浏览器和设备上测试，确保高亮效果正常显示。
4. 总结
通过 {pboot:nav} 和 {pboot:if} 标签组合，可以轻松实现 PbootCMS 内页子栏目的当前栏目高亮显示。主要涉及以下步骤：
- 遍历指定父栏目的子栏目列表。
- 判断当前栏目编号是否与循环中的栏目编号匹配。
- 根据匹配结果动态添加高亮样式。
合理配置这些参数后，即可实现灵活的导航高亮效果，同时提升用户体验。
最终效果示例：
<ul class="submenu"><li><a class="biglink left_active" href="域名/about">关于我们</a></li><li><a class="biglink" href="域名/contact">联系我们</a></li>
</ul>