1

我有一个网站主题，我正试图导入Orchard 1.4.2，但我只剩下几个区域了。其中之一是在这个主题的主页上实现的NivoSlider 。现在我决定而不是强迫网站的维护者知道正确的 HTML 和格式，我将创建一个表示单个幻灯片的新内容类型，将一个投影小部件添加到特色区域并创建一个自定义模板正确构建 HTML 以使滑块正常工作，但我遇到了一个障碍，Nivo Slider 的格式首先需要 DIV 中的所有图像，然后是代表与每张幻灯片关联的标题的一系列其他 DIV。

<div id="slider-container-default">
    <div id="slider-frame"><div id="slider-box"></div></div>
    <div id="slider" class="nivoSlider">
        <img src='images/slider/slide1.jpg' alt='' title='#htmlcaption1' />
        <img src='images/slider/slide2.jpg' alt='' title='#htmlcaption2' />
        <img src='images/slider/slide3.jpg' alt='' title='#htmlcaption3' />
    </div>
    <div id="htmlcaption1" class="nivo-html-caption">
        <h1>First Caption Title</h1>
        <p>Maecenas euismod, metus ac fermentum aliquam, diam turpis ornare odio, nec lacinia orci lectus eget odio. Cras at nulla mauris, at dignissim massa. Cras non est ac ligula lacinia varius sed quis augue.</p><a href="#" class="button medium">Read More &rarr;</a>
    </div>
    <div id="htmlcaption2" class="nivo-html-caption">
            <h1>Second Caption Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel lectus eu lacus interdum laoreet at a est. Pellentesque aliquam luctus dolor.</p><a href="#" class="button medium">Read More &rarr;</a>
    </div>
    <div id="htmlcaption3" class="nivo-html-caption">
        <h1>ThirdCaption Title</h1>
        <p>Pellentesque volutpat tempor imperdiet. Duis sit amet purus vel est auctor dignissim in sed tortor. Integer vitae ante non libero euismod iaculis.</p><a href="#" class="button medium">Read More &rarr;</a>
    </div>
</div>

现在，我有一个替代品，我正试图用它来实现这种布局，但我一生都无法想出一种方法来让替代品以这样的方式运行。我尝试在集合本身上使用替代方法，并且只对集合进行了两次枚举，一次用于图片，一次用于标题，但我似乎无法弄清楚如何访问模板中幻灯片上的信息。我不认为我可以在项目级别做到这一点，因为虽然我可以为标题或图像提供自定义模板，但我不知道如何同时做到这两个。我可以@Html.Display(Model.List)两次调用集合模板并为每次调用提供不同的项目模板吗？

4

1 回答 1

0

我目前正在设计一个网站，我将 Nivo 滑块包含在特色区域中。我在主页层中添加了一个 HTML 小部件，将 Nivo HMTL 代码（从他们的网站）复制/粘贴到小部件的 HTML 编辑器中，将 Nivo CSS 和 Javascript 包含到主页的头部（layout.cshtml）中，并添加了一个底部的单独 window.load 脚本以使用我想要的选项（持续时间、过渡效果、控制导航等）对其进行初始化。一旦对它的工作感到满意，我还在头部包含了 Nivo 默认主题 CSS。

我花费最多时间的问题是找到图像的正确路径。在 SO 上找到类似的帖子后，我写了完整路径（Themes/YourThemeName/Content/Images/image.xxx）。这一切都解决了，它完美地工作。

他们网站上有一段视频，介绍了将滑块添加到普通 HTML 网站的过程。希望这可以帮助。

于 2012-06-28T10:32:09.767 回答