如何使用WCM菜单/导航组件创建如下所示的嵌套HTML结构

Question

我正在设计一个带有三个图像的旋转木马。我需要使用WCM实现以下代码。我能够设计一个单一的结果设计。请指导我如何得到三个链接在一套。所有的图像都在同一个站点区域。

<div class="subBox">
    <div class="set">
        <div class="images"><img src='slide1.jpg' alt='' /></div>
        <div class="images"><img src='slide2.jpg' alt='' /></div>
        <div class="images"><img src='slide3.jpg' alt='' /></div>
    </div>
    <div class="set">
        <div class="images"><img src='slide4.jpg' alt='' /></div>
        <div class="images"><img src='slide5.jpg' alt='' /></div>
        <div class="images"><img src='slide6.jpg' alt='' /></div>
    </div>
    <div class="set">
        <div class="images"><img src='slide7.jpg' alt='' /></div>
        <div class="images"><img src='slide8.jpg' alt='' /></div>
        <div class="images"><img src='slide9.jpg' alt='' /></div>
    </div>
</div>

Answer 1

在菜单/导航器中使用列表表示-取决于您是否需要保持顺序。设置最大数目为9

头:

<div class="subBox">
  <div class="set">

项目布局:

[Plugin:Matches pattern="(3|6)" text="[Placeholder tag='listnum']"]
  </div>
  <div class="set">
[/Plugin:Matches]
    <div class="images">[Element type="content" context="autofill" key="img"]</div>

页脚:

  </div>
</div>

Answer 2

所以你有一个sitearea在这个sitearea下面有一组内容

没有现成的东西可以为你做这件事。

第一个解决方案(使用Javascript)

• 显示所有图片在一个隐藏的Div
• 添加一些java脚本代码来构建HTML

第二个解决方案(创建自定义插件)

• 创建自定义插件并传递给它项目索引和子列表项目编号，它只呈现它的主体如果("index" mod " subblist项目编号"等于零)，你可以从[占位符标签="listnum" htmllencode ="false"]获得索引在你的情况下，"子清单项目编号"是3

• 菜单设计 header ="<div class="subBox"><div class="set">" 在设计的每个结果渲染你的项目，然后使用您的自定义插件渲染"->将渲染每3个项目页脚设计 "</div></div>"