织梦循环如何加载不同样式？

在循环中设置一个计数器变量，通过判断这个计数器的奇偶性或其他条件，来动态拼接不同的CSS类名。

下面我将介绍几种最常用和最实用的方法，从简单到复杂,并附上完整的代码示例。

使用 if 语句判断奇偶（最常用，实现斑马纹）

这是最基础也是最常用的方法，主要用于实现列表的隔行变色效果，也就是常说的“斑马纹”。

实现步骤：

1. 在循环开始前，定义一个变量（$i）并初始化为0。
2. 在循环内部，每次循环都将 $i 的值加1。
3. 使用 if 语句判断 $i 是奇数还是偶数。
4. 根据判断结果，给HTML元素的 class 属性赋不同的值。

代码示例（以栏目列表为例）：

{dede:channel type='top' row='8'}
    <!-- 1. 定义并初始化计数器 -->
    {php $i = 0;}
    <!-- 2. 开始循环 -->
    <li>
        <!-- 3. 判断奇偶并添加不同的class -->
        {php $i++;} 
        {if $i % 2 == 1}
            <a href="[field:typelink/]" class="odd-style">[field:typename/]</a>
        {else}
            <a href="[field:typelink/]" class="even-style">[field:typename/]</a>
        {/if}
    </li>
{/dede:channel}

代码解释：

• {php $i = 0;}：在循环开始前，将变量 $i 设置为0，注意,这个代码块在织梦模板中是有效的。
• {php $i++;}：每次循环执行时，$i 的值都会增加1。 是自增运算符。
• $i % 2 == 1：这是判断奇偶的核心。 是取余运算符，如果一个数除以2的余数是1,那它就是奇数。
• odd-style 和 even-style：这是你自定义的CSS类名,你需要在你的CSS文件中定义它们的样式。

对应的CSS样式：

/* 奇数行样式，例如背景色为浅灰色 */
.odd-style {
    background-color: #f5f5f5;
    color: #333;
}
/* 偶数行样式，背景色为白色 */
.even-style {
    background-color: #ffffff;
    color: #333;
}
/* 为了美观，可以给li也加个基础样式 */
li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

使用 cycle 标签（更简洁，织梦内置功能）

织梦CMS提供了一个非常方便的标签 {dede:cycle}，专门用于在循环中轮流切换一组值，这比手动用 if 判断更简洁。

实现步骤：

1. 使用 {dede:cycle} 标签，在里面用 name 属性定义你想要轮流切换的值（通常是CSS类名）。
2. 在需要应用样式的HTML元素上，直接调用 {dede:cycle} 输出的值。

代码示例：

<ul>
    {dede:arclist titlelen='30' row='6'}
        <li class="{dede:cycle name='odd,even'/}">
            <a href="[field:arcurl/]">[field:title/]</a>
        </li>
    {/dede:arclist}
</ul>

代码解释：

• {dede:cycle name='odd,even'}：这个标签会在每次循环时，依次从 name 属性的值中取出一个，第一次循环是 odd，第二次是 even，第三次又是 odd,以此类推。
• class="{dede:cycle name='odd,even'}"：将 {dede:cycle} 的输出结果直接作为 class 的值，这样，第一个 <li> 的 class odd，第二个就是 even。

对应的CSS样式：

与方法一完全相同，你需要定义 .odd 和 .even 的样式。

.odd {
    background-color: #e9f7fe; /* 浅蓝色 */
}
.even {
    background-color: #f9f9f9; /* 浅灰色 */
}

为前N项添加特殊样式（例如前3个）

有时候我们可能需要为循环列表中的前几项添加特殊的样式,比如突出显示热门文章。

实现步骤：

1. 同样定义一个计数器 $i。
2. 在循环内部判断 $i 的值是否小于某个数字（例如3）。
3. 如果小于，就应用一个特殊的 class。

代码示例：

{dede:arclist titlelen='30' row='6'}
    {php $i = 0;}
    <li>
        {php $i++;}
        {if $i <= 3}
            <a href="[field:arcurl/]" class="hot-item">[field:title/]</a>
        {else}
            <a href="[field:arcurl/]">[field:title/]</a>
        {/if}
    </li>
{/dede:arclist}

代码解释：

• {if $i <= 3}：判断当前计数 $i 是否小于或等于3。
• hot-item：这是为前三项定义的特殊CSS类名。

对应的CSS样式：

.hot-item {
    color: #ff4400; /* 红色突出显示 */
    font-weight: bold;
    font-size: 1.1em;
}

循环添加不同图标或背景图

这个需求与方法一、二类似,只是将CSS类名换成了包含背景图的类。

代码示例（使用 cycle 标签）：

假设你有三个图标类：icon-1, icon-2, icon-3。

<ul>
    {dede:arclist titlelen='30' row='6'}
        <li class="list-item {dede:cycle name='icon-1,icon-2,icon-3'}">
            <a href="[field:arcurl/]">[field:title/]</a>
        </li>
    {/dede:arclist}
</ul>

对应的CSS样式：

.list-item {
    padding-left: 25px; /* 给图标留出空间 */
    background-repeat: no-repeat;
    background-position: 5px center;
}
.icon-1 {
    background-image: url('/images/icon1.png');
}
.icon-2 {
    background-image: url('/images/icon2.png');
}
.icon-3 {
    background-image: url('/images/icon3.png');
}

总结与建议

最佳实践建议：

• 如果只是简单的隔行变色，强烈推荐使用 {dede:cycle}，因为它最简洁、最高效。
• 如果逻辑更复杂，比如需要根据文章ID、栏目ID等来判断样式，或者要为前几项添加特殊样式，方法一或方法三 的 if 判断会更灵活。
• 永远记得在CSS文件中定义好你使用的类名,否则样式不会生效。

希望这些方法能帮助你解决织梦循环样式的难题！