0

这涉及 MODX Evolution、Ditto 和 Bootstrap3 Carousel。

我的目标是在轮播展示的各个 DIV 中展示 Ditto 加载的文章。我的代码仅在一个 DIV 中显示所有三篇文章，并且所有 DIV 都显示相同（！）三篇文章（前三篇）。我的猜测是问题出在我的 HTML 块中，但是如果我更改代码，那么我就会失去对轮播的响应能力。我哪里错了？

  • 这是一个轮播，同时显示三个独特的 DIV。总共 12 个 DIV，在 4 轮中显示（= 4 x 3）。
  • 每个 DIV 必须显示一个唯一加载的文章，即一个资源 ID。因此，每轮（总共 4 轮）一次显示三篇独特的文章。
  • 我的轮播没有 JS 或 JQuery。这都是响应式 Bootstrap3 制作的。
  • 模板的 id=2。文章资源类别的 id=9，其子类别的 id=20 直到 id=31（= 总共 12 篇文章）。

模板 (= id=2) 同上调用：

[[Ditto? &parents=`9` &display=`12` &orderBy=`createdon DESC` &tpl=`articles`]]

HTML CHUNK articles（原始 HTML 代码 --> 4 项 x 3 DIV）：

<div class="carousel-inner">
            <div class="item active">
                <div class="col-md-4 col-sm-6">
                    [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                    [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                   [+content+]
                </div>
            </div>

            <div class="item">
                <div class="col-md-4 col-sm-6">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                    [+content+]
                </div>
            </div>

            <div class="item">
                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                    [+content+]
                </div>
            </div>

            <div class="item">
                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                  [+content+]
                </div>
            </div>
        </div>
4

2 回答 2

0

你想做的是：

<div class="carousel-inner">

[[Ditto? &parents=`9` &display=`12` &orderBy=`createdon DESC` &tpl=`articles`]]

</div>

&tpl 块：

<div class="item [+active+]">
   <div class="col-md-4 col-sm-6">
     [+content+]
   </div>

   <div class="col-md-4 col-sm-6 hidden-xs">
      [+content+]
    </div>

    <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
       [+content+]
   </div>
</div>

让同上生成项目 div。

您将不得不编写一个脚本来确定哪个块将是第一个并将其标记为“活动”类，或者可能有一个属性让同上使用不同的块，因为它是第一个 tpl。

也许是这样的：

[[Ditto? 
   &parents=`9` 
   &display=`12` 
   &orderBy=`createdon DESC` 
   &tpl=`articles`
   &tplFirst=`articles-01`
]]

这是一个猜测 - 您必须检查同上文档以了解实际语法和可用性。

于 2015-01-27T23:13:12.703 回答
0

我通过在 carousel_articles 块中为每个单独的 div 放置一个 Ditto 调用来解决它（不同的父母每个都匹配我的文章类别）并使用 randomize 参数。

于 2015-01-30T01:33:24.520 回答