如何使用WCM Menu / Nav组件创建下面显示的嵌套HTML结构?

时间:2016-06-28 06:23:37

标签: html wcm ibm-wcm

我正在设计一个带有三张图像的旋转木马。我需要使用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>

2 个答案:

答案 0 :(得分:0)

在菜单/导航器中使用列表演示 - 取决于您是否需要保留订单。设置最大数量为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>

答案 1 :(得分:-1)

因此,您在 sitearea 下有一个 sitearea ,有一组内容

开箱即用的任何东西都无法为你做到。

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

  • 在一个隐藏的Div中渲染所有图像
  • 添加一些java脚本代码来构建HTML

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

  • 创建自定义插件并传递给它项目的索引子列表项目编号,它只渲染它的正文if(“index”mod“子列表项数字“等于零”,你可以从[Placeholder tag =“listnum”获取索引htmlencode =“false”] 在您的情况下,“子列表项目编号”为3

  • 在菜单设计 header ="<div class="subBox"><div class="set">" 中 在设计中为每个结果呈现您的项目,然后使用您的自定义插件呈现“” - &gt;将呈现每3个项目 设计页脚 "</div></div>"