MODX (Evo) 同上和带有多个 DIV 的轮播，其中需要加载子资源 ID

Posted 2023-02-17

【中文标题】MODX (Evo) 同上和带有多个 DIV 的轮播，其中需要加载子资源 ID

【英文标题】：MODX (Evo) Ditto and Carousel with multiple DIVs in which children resource IDs need to be loaded

【发布时间】：2015-01-27 22:36:09

【问题描述】：

这涉及 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>

【参考方案1】：

你想做的是：

<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`
]]

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

【讨论】：

嗨，肖恩，感谢您的回复。但是“使用不同的块，因为它是第一个 tpl。”是什么意思。文章可以随机抽取，以先到者为准。

查看备忘单：slideshare.net/atmaworks/ditto-cheatsheet-1-2 有一个 &tplFirst 参数可用于第一个结果，以便将其标记为活动。

我仍然在一次显示的三个 div 中获得相同的三篇文章。因此，艺术 7 - 艺术 7 - 艺术 7 然后下一轮显示艺术 9 - 艺术 9 - 艺术 9，等等？？？这怎么可能？

您在每个 div 中输出 [+content+] 3x 并且仅在小视图和超小视图中隐藏它。

我引用了三个 tpl 块.. tplFirst、tplLast 和 tpl，在我的 Ditto 调用中，这是我的 tpl 块... 下一个page

[+pagetitle+]

[+introtext+]

但它似乎没有按我的计划工作。

【参考方案2】：

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