1

Orchard 1.4.2にインポートしようとしているサイト テーマがあり、いくつかの領域しか残っていません。それらの 1 つは、このテーマのホームページに実装されているNivoSliderです。ここで、サイトの管理者に、これを機能させるために必要な適切な 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>

今、私はこのレイアウトを実現するために使用しようとしている代替を持っていますが、これを行うような方法で代替を動作させる方法を一生理解することはできません。コレクション自体で代替を使用してみましたが、コレクションを写真用とキャプション用に 2 回列挙しましたが、テンプレート内のスライドの情報にアクセスする方法がわかりません。キャプションまたは画像用のカスタム テンプレートを使用することはできますが、両方を行う方法がわからないため、アイテム レベルでそれを行うことはできないと思います。コレクション テンプレートを 2 回呼び出し@Html.Display(Model.List)て、呼び出しごとに異なるアイテム テンプレートを提供することはできますか?

4

1 に答える 1

0

私は現在、Nivo スライダーを注目ゾーンに含めたサイトを設計しています。HTML ウィジェットを HomePage レイヤーに追加し、Nivo HMTL コード (Web サイトから) をコピーしてウィジェットの HTML エディターに貼り付け、Nivo CSS と Javascript をホームページ (layout.cshtml) の先頭に含め、一番下に別のwindow.loadスクリプトを作成して、必要なオプション（期間、トランジション効果、コントロールナビゲーションなど）で初期化します。機能していることに満足したら、Nivo のデフォルト テーマの CSS も head に含めました。

私が最も時間を費やした問題は、画像への正しいパスを見つけることでした。ここSOで同様の投稿を見つけた後、フルパス（Themes/YourThemeName/Content/Images/image.xxx）を書きました。それはそれをすべて整理し、完璧に機能します。

彼らのサイトには、スライダーを通常の HTML サイトに追加するプロセスを示すビデオがあります。お役に立てれば。

于 2012-06-28T10:32:09.767 に答える