3

所以我愚蠢地设计了一个最近的文章列表,世界上一切都很好,但前 2 个条目 html 与其余条目明显不同。

我还没有打开一行代码,因此非常感谢任何人提供的任何建议。

简单地说, ul 看起来像:

<li class="1of2"> /* It's number 1 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li class="1of2"> /* It's number 2 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li> /* It's not number 1 or 2 – ie. every other item, NO class per se */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>

如果您想象所有条目的 3 列网格,但前 2 个条目各有 1.5 列。这里有点面条划痕,任何想法都感激地投票。

PS。如果有帮助,我将使用 Stash!

4

5 回答 5

5

只需根据 的值输出类名{count}<li>为了简单起见,我在这里输出了整个开始标记,但您可以只输出类属性或类名本身。

{if count<=2}
    <li class="special">
{if:else}
    <li>
{/if}
        <h1>{title}</h1>
        ... etc.
    </li>

顺便说一句,我不认为你可以有以数字开头的类名。

于 2012-10-30T10:49:31.313 回答
1

如果您希望前 2 个中的每一个都具有唯一的类名,我会这样做:

<li{if count<=2}class="top{count}"{/if}>

那将输出

<li class="top1">...
<li class="top2">...
<li>...

如果您希望前 2 个项目具有相同的类别:

<li{if count<=2}class="whateveryouwant"{/if}>

这将输出

<li class="whateveryouwant">...
<li class="whateveryouwant">...
<li>...
于 2012-10-30T13:27:09.667 回答
0

你不能{if count == "1|2"}class="whatever"{/if}吗?

于 2012-10-30T09:58:09.020 回答
0

似乎您要求两个独特的课程,一个用于第一个条目,一个用于第二个条目。在这种情况下,这将起作用:

{if count == 1}
    <li class="first">
        <h1>{title}</h1>
        <p>{short_desc}</p>
    </li>
{if:else if count == "2"}
    <li class="second">
        <h1>{title}</h1>
        <p>{short_desc}</p>
    </li>
{if:else}
    <li>
        <h1>{title}</h1>
        <p>{short_desc}</p>
    </li>
{/if}

此外,以数字开头的类名也不会生效。

于 2012-10-30T15:37:43.810 回答
0

如果没有“其他”类需要条件的 if:else 部分,您也可以使用简单的条件来做到这一点:

<li{if count == "1"} class="first"{/if}{if count == "2"} class="second"{/if}">
    <h1>{title}</h1>
    <p>{short_desc}</p>
</li>

这假设您没有任何其他差异,例如一个选项与另一个选项中的不同自定义字段,MediaGirl 的建议会更优雅地处理。如果它们之间的唯一区别是班级分配,这是另一种选择。

于 2012-10-30T17:07:44.143 回答