Question

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

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

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

Answer 1

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

我花费最多时间的问题是找到图像的正确路径。在SO上找到类似的帖子之后，我写了完整的路径（Themes / YourThemeName / Content / Images / image.xxx）。这样就把它全部整理出来并且完美无缺。

有一个video on their site经历了将滑块添加到普通HTML网站的过程。希望这会有所帮助。

在Orchard中制作模板以投影自定义ContentType（NivoSlider）

1 个答案: