Question

我正在使用Ghost作为我的网站基础，而后者又使用了把手。我购买了一个模板以加快我的推出，现在我正在尝试自定义一些项目。

因此主页是博客条目的砖石风格布局。该页面使用{{#foreach posts}}循环构建。

我想要做的是评估@index（我假设它在foreach中可用，就像每个循环一样），所以，就像这样。

{{#foreach posts}} 如果@index = 0 做一点事 elseif @index = 1 做一点事。。等等

或者更好的选择案例最好。目前的布局是每页6项，我的目标是在0和0上设置特定的CSS群。 3,1＆amp; 4和2＆amp; 5。

谢谢你， TY

Answer 1

所以，你不能在把手上进行比较。我想通过javascript来做到这一点。

Answer 2

{{#has}}帮助器可以与{{#foreach}} - 对象中可访问的数据变量结合使用。

当在{{#foreach}}块内时，您可以访问有关当前迭代的一组数据变量。这些是：



@index（number） - 当前迭代的从0开始的索引



@number（number） - 当前迭代的从1开始的索引



@key（string） - 如果遍历对象而不是数组，则此＆gt;包含对象键



@first（boolean） - 如果这是集合的第一次迭代，则为true



@last（boolean） - 如果这是集合的最后一次迭代，则为true



@odd（boolean） - 如果@index为奇数，则为true



@even（boolean） - 如果@index是偶数，则为true



@rowStart（boolean） - 如果传递了列，则为true，此迭代表示行开始



@rowEnd（boolean） - 如果传递了列，则为true，此迭代表示行结束



来源：http://themes.ghost.org/docs/foreach

{{#has number="3"}}{{/has}} // A single number

{{#has number="3, 6, 9"}}{{/has}} // list of numbers

{{#has number="nth:3"}}{{/has}} // special syntax for nth item

{{!-- All of these work exactly the same for index --}}

来源：http://themes.ghost.org/docs/has

所以如果你想访问1＆amp; 3您可以执行以下操作：

{{#foreach posts}}
    {{#has @index="1, 3"}}
        //DO SOMETHING
    {{/has}}
{{/foreach}}

如果你在奇数/偶数之后，那么@odd和@even数据变量就更容易使用。

Answer 3

Reedyn，我很高兴认为这可能是我想要的，但无论我使用@number还是@index我都会得到同样的错误。

消息：第5行的解析错误：...} {{#has @ number =“1,4,7,10”}} ----------------- ----- ^期待'CLOSE_RAW_BLOCK'，'CLOSE'，'CLOSE_UNESCAPED'，'OPEN_SEXPR'，'CLOSE_SEXPR'，'ID'，'OPEN_BLOCK_PARAMS'，'STRING'，'NUMBER'，'BOOLEAN'，'UNDEFINED' ，'NULL'，'DATA'，'SEP'，得到'EQUALS'

这是我试过的代码。（请注意，此片段中的foreach没有结束标记）

    {{#foreach posts}}
<article class="blog-item {{post_class}}">
    {{#if feature_image}}
    {{#has @number="1, 4, 7, 10"}}
        <div class="blog-cover-bkrnd-blue" id="{{@index}}">
            <a href="{{url}}"><img src="{{img_url feature_image}}" alt="{{title}}"></a>
        </div>
    {{/has}}
    {{#has @number="2, 5, 8, 11"}}
        <div class="blog-cover-bkrnd-purple" id="{{@index}}">
            <a href="{{url}}"><img src="{{img_url feature_image}}" alt="{{title}}"></a>
        </div>
    {{/has}}
    {{#has @number="3, 6, 9, 12"}}
        <div class="blog-cover-bkrnd-green" id="{{@index}}">
            <a href="{{url}}"><img src="{{img_url feature_image}}" alt="{{title}}"></a>
        </div>
    {{/has}}
    {{/if}}

Answer 4

更好（更简单）的解决方案就是使用CSS（view on CodePen）：

 <head>
    <style>
    .item {
        color: white
    }
    .item:nth-child(6n-2), p:first-child  {
        background: green;
    }
    .item:nth-child(6n-4), p:nth-child(6n-1)  {
        background: red;
    }
    .item:nth-child(6n-3), p:nth-child(6n)  {
        background: blue;
    }
    </style>
</head>

<body>
  <div class="items">
    <p class="item">Item 0</p>
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3</p>
    <p class="item">Item 4</p>
    <p class="item">Item 5</p>
    </div>
</body>

把手，如何评估@index

4 个答案: