Question

这里有一个非常特别的问题：

我一直在本地开发一个tumblr托管的网站，使用API来提取帖子而无需将项目复制并粘贴到tumblr一百万次。我决定更好地使用API，并且只是在生产中使用它，但现在是时候部署我意识到我必须回到自定义主题{block:Posts}方法。

我将帖子送入Cycle2幻灯片，其中3张幻灯片包含3个帖子，总共9个播放列表可供查看，无需返回存档。这种方法与api完美配合，但在自定义主题中变得混乱。这是我目前的代码：

<div class="cycle-slideshow">
    {block:Posts}
    {block:Text}

    <div class="slide-wrapper">
        <div class="post">
            {block:Post1}
            {block:Title}<a href="{Permalink}"><h2>{Title}</h2></a>{/block:Title}
            <div class="blog_item">
                {Body}
            </div>

            {/block:Post1}
        </div>  
        <!--two more posts before end of slide... -->
    </div>

    {/block:Text}
    {/block:Posts}
    </div> <!--end of slide wrapper - 2 more of these before end of slideshow div..

我也试过删除帖子号码，但仍然没有骰子。在tumblr的文档中，他们说

示例：{block：Post5}我是第五个帖子！{/ block：Post5}只会在显示的第五个帖子上呈现。

我想知道“正在显示”是否指的是帖子的html visibility，如果是，那是否会干扰周期插件？结果是每个幻灯片一个格式错误的帖子，然后在2个空白幻灯片循环后，下一个最老的帖子取而代之。如果有人遇到类似的问题，我会感到惊喜，但我会为了一些建议而杀人。 Here's开发站点供参考（第二个轮播正在工作，因为它仍然连接到api）。谢谢！

Answer 1

一般来说，下面的代码就是你想要的3个幻灯片，每个3个帖子。

请注意，在自定义屏幕的其他设置中，您必须按顺序将帖子计数设置为每页9个为了正常工作。我把它包裹在Index Page块中，否则这会在Permalink Page上看起来很讨厌。

{block:IndexPage}
{block:Posts}
    {block:Post1}<div class="cycle-slideshow">{/block:Post1}
    {block:Post4}<div class="cycle-slideshow">{/block:Post4}
    {block:Post7}<div class="cycle-slideshow">{/block:Post7}

    <div class="slide-wrapper">

         {block:Text}
         <div class="post">
           {block:Title}<a href="{Permalink}"><h2>{Title}</h2></a>{/block:Title}
           <div class="blog_item">
               {Body}
           </div>
         </div>  
         {/block:Text}

        {block:Photo}
             ...
        {/block:Photo}

        ...

    </div>

    {block:Post3}</div>{/block:Post3}
    {block:Post6}</div>{/block:Post6}
    {block:Post9}</div>{/block:Post9}
{/block:Posts}
{/block:IndexPage}

然而，如果您想要在幻灯片之间拆分帖子类型的3个幻灯片，则代码看起来会更像以下内容。

请注意，在这种情况下，如果您在9个文章中有4个文本帖子，则所有4个文本帖子最终都会在Text幻灯片中显示。如果你对你的3非常严格，你必须使用Javascript或CSS删除或隐藏其他帖子。

{block:IndexPage}
    <div class="cycle-slideshow">
    {block:Posts}
         {block:Text}
         <div class="slide-wrapper">
         <div class="post">
           {block:Title}<a href="{Permalink}"><h2>{Title}</h2></a>{/block:Title}
           <div class="blog_item">
               {Body}
           </div>
         </div>  
         </div>
         {/block:Text}
    {/block:Posts}
    </div>

    <div class="cycle-slideshow">
    {block:Posts}
         {block:Photo}
         <div class="slide-wrapper">
             ...
         </div>
         {/block:Photo}
    {/block:Posts}
    </div>
{/block:IndexPage}

如果您需要我澄清任何事情，请告诉我。

将幻灯片/轮播结合到自定义tumblr主题中

1 个答案: