Orchardcms 在Orchard中为自定义ContentType(NivoSlider)的投影制作模板

Orchardcms 在Orchard中为自定义ContentType(NivoSlider)的投影制作模板,orchardcms,nivo-slider,Orchardcms,Nivo Slider,我有一个网站主题,我正试图导入,我只剩下几个领域。其中一个是在这个主题的主页上实现的。现在,我决定创建一个表示单个幻灯片的新内容类型,向特色区域添加一个投影小部件,并创建一个自定义模板,以正确构造HTML,从而使幻灯片正常工作,而不是强迫网站维护者知道正确的HTML和格式,但我遇到了一个障碍,Nivo滑块的格式要求所有图像首先在一个DIV中,然后是一系列其他DIV,表示与每个幻灯片相关的标题 <div id="slider-container-default"> <di

我有一个网站主题,我正试图导入,我只剩下几个领域。其中一个是在这个主题的主页上实现的。现在,我决定创建一个表示单个幻灯片的新内容类型,向特色区域添加一个投影小部件,并创建一个自定义模板,以正确构造HTML,从而使幻灯片正常工作,而不是强迫网站维护者知道正确的HTML和格式,但我遇到了一个障碍,Nivo滑块的格式要求所有图像首先在一个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.DisplayModel.List两次并为每次调用提供不同的项目模板吗?

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

我花了大部分时间在寻找图像的正确路径上。在这里找到一篇类似的文章后,我写了完整的主题路径/YourThemeName/Content/Images/image.xxx。这一切都解决了,它的工作完美无瑕


在将滑块添加到普通HTML站点的过程中,会遇到一个问题。希望这能有所帮助。

听起来小部件比投影更好。这将使您能够完全控制形状数据和模板。您仍然可以使用为客户端创建的内容类型。它实际上是一个小部件,是使用查询的投影小部件。但我还是不知道该怎么做。我似乎碰到了这堵墙,试图找出如何访问部分值或字段值。我试图建议构建您自己的小部件。这使您可以轻松访问所有零件和字段值。投影对于很多场景来说都很好,但是如果你需要更多的控制,也许构建你自己的小部件是合适的。啊,我明白你的意思了,很抱歉。我将在网上浏览一下,看看我能找到什么关于创建你自己的小部件的教程,你知道一个好的起点吗?如果我记得的话,它是从使用codegen模块为小部件创建项目开始的,对吗?我通过查看代码学到了最多。也许可以看看博客模块。有一个BlogArchivesPart用作小部件。文档还有一个简单的开始: