Question

所以我愚蠢地设计了一个最近的文章列表，一切都很好，但前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！

Answer 1

只需根据{count}的值输出类名。我在这里输出了整个开头<li>标签以保持简单，但你可以输出类属性或类名本身。

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

顺便说一下，我认为你不能拥有以数字开头的类名。

Answer 2

如果您希望前两个中的每一个都有一个唯一的类名，我就会这样做：

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

将输出

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

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

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

将输出

<li class="whateveryouwant">...
<li class="whateveryouwant">...
<li>...

Answer 3

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

Answer 4

似乎你要求两个独特的类，一个用于第一个条目，一个用于第二个条目。在这种情况下，这将有效：

{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}

此外，以数字开头的类名将无法验证。

Answer 5

如果没有“其他”类需要条件的if：else部分，你也可以使用简单的条件：

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

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

处理列表中布局更改的理想方法

5 个答案: