帝国CMS的灵动标签判断索引加样式
2025-09-24
在帝国 CMS 的灵动标签中,我们可以通过判断索引值(即信息的序号)来为不同位置的内容添加不同样式。这在实现隔行变色、突出显示第一条 / 前几条信息等场景非常实用。
利用灵动标签自带的
然后在灵动标签中应用:
php
通过这种方式,你可以根据内容在列表中的位置(索引值)灵活设置不同的样式,实现更丰富的页面展示效果。
利用灵动标签自带的
$bqno
变量(从 1 开始的索引值)进行判断:
[e:loop={"select * from phome_ecms_news where checked=1 order by newstime desc limit 10",10,24,0}]
<?php
// 判断索引值并定义样式类
if($bqno == 1){
$style = "first-item"; // 第一条信息的样式
} elseif($bqno % 2 == 0){
$style = "even-item"; // 偶数条信息的样式
} else {
$style = "odd-item"; // 奇数条信息的样式
}
?>
<li class="news-item <?=$style?>">
<span class="num"><?=$bqno?></span>
<a href="<?=$bqsr['titleurl']?>" title="<?=$bqsr['title']?>"><?=esub($bqsr['title'],30)?></a>
</li>
[/e:loop]
更复杂的样式判断示例
如果需要为前 3 条信息设置特殊样式,其余信息用默认样式:
[e:loop={"select * from phome_ecms_news where checked=1 order by newstime desc limit 10",10,24,0}]
<?php
// 初始化样式
$itemClass = "normal-item";
$titleStyle = "";
// 根据索引设置不同样式
if($bqno <= 3){
$itemClass = "top-item";
$titleStyle = "font-weight:bold;color:#f00;";
} elseif($bqno == 4 || $bqno == 5){
$itemClass = "secondary-item";
}
?>
<div class="list-item <?=$itemClass?>">
<h3 style="<?=$titleStyle?>">
<a href="<?=$bqsr['titleurl']?>"><?=esub($bqsr['title'],30)?></a>
</h3>
<?php if($bqno == 1): ?>
<div class="featured-badge">推荐</div>
<?php endif; ?>
</div>
[/e:loop]
结合 CSS 的完整示例
先在 CSS 中定义样式:
/* 列表项样式 */
.news-list li {padding:8px 0;border-bottom:1px dashed #eee;}
.news-list li.first-item {background:#f9f9f9;padding:12px;border-left:3px solid #369;}
.news-list li.even-item {background:#f5f5f5;}
.news-list li.hot-item {color:#f00;}
然后在灵动标签中应用:
php
<ul class="news-list">
[e:loop={"select * from phome_ecms_news where checked=1 order by newstime desc limit 10",10,24,0}]
<?php
$class = '';
if($bqno == 1) $class = 'first-item';
elseif($bqno % 2 == 0) $class = 'even-item';
// 假设第6条是热门信息
if($bqno == 6) $class .= ' hot-item';
?>
<li class="<?=$class?>">
<a href="<?=$bqsr['titleurl']?>"><?=esub($bqsr['title'],30)?></a>
</li>
[/e:loop]
</ul>
通过这种方式,你可以根据内容在列表中的位置(索引值)灵活设置不同的样式,实现更丰富的页面展示效果。
$bqno
变量是灵动标签自带的,无需额外定义即可直接使用。 声明:本文来自用户分享和网络收集,仅供学习与参考,测试请备份。