在 Tumblr 中循环 CSS Post 类

Question

我正在尝试在 Tumblr 中设置我的 {block:Photo} 样式，这样每次发布照片时，它都会循环选择，例如，5 个略有不同的类用于显示图片。

可以在此处找到此类示例（其中每张照片 table 都有唯一的 max-width 属性）：http://www.nontemporary.com/

到目前为止，我充分利用 Chrome 检查器得出的代码是：

            {block:Posts}

            {block:Photo}

                <li class="post photo">

                    <table width="100%" align="left" valign="top" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr class="postspace">
                                <td></td>
                            </tr>
                            <tr class="postrow">
                                <td class="postdistrict">
                                 <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
                                <td>
                                 <td class="postdistrict">
                                 <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
                                <td>
                            </tr>

                        </tbody>
                     </table>

                </li>
            {/block:Photo}


        {/block:Posts}

当然，我想我必须为宽度创建一些自定义类，但我的主要问题实际上是我应该如何让 Tumblr 循环显示这些宽度，如在这个例子。

谢谢！

Answer 1

如果您希望他们按顺序在类中循环（如示例所示），您可以利用 tumblr lets you style each number of post 这一事实。

这是您将要执行的操作的示例：

<li class="post-{block:Post1}1{/block:Post1}{block:Post2}2{/block:Post2}[...]{block:Post15}15{/block:Post15}">

这将呈现为

<li class="post-1">

与 1 取决于它是什么数字 post。

从这里您可以轻松地从类到 .post-1 到 .post-15。

如果您想要随机的东西，则需要 javascript/jquery。

在 Tumblr 中循环 CSS Post 类

Cycling through CSS Post classes in Tumblr

javascript

html

css

styles

tumblr