3

みなさん、こんにちは。私は、Experience Managerでサイト編集可能であると同時に、Twitterブートストラップでいくつかの画面幅に完全に応答するRazorテンプレートのセットに取り組んできました。その結果、Experience Managerエディターが追加または削除したものに基づいて、DOM出力を動的に操作する必要がありますが、レスポンシブデザインは維持されます。この構造の一部は、Twitterのブートストラップが指示する規則に準拠しています。

twitterブートストラップは、クラスを使用して動的に計算されたdiv幅を導入することにより、優れたレスポンシブデザインを可能にします。<div class="span12>たとえば、Aはラッパーの幅全体を使用します。「span6」は効果的に半分を使用し、「span6」で別のdivを可能にするために特定のマージンも計算されます。ただし、これは、前のクラスが呼び出された場合にのみ機能<div class="row-fluid">し、スパンが実際に合計で正確に12になる限り、この数に実際に達し<numbers>たときに閉じる必要がある場合に問題が発生します。<div class="row-fluid">

明確にするために：それはこのように出力する必要があります

<div class="row-fluid">
    <div class="span6">..code</div>
    <div class="span4">..code</div>
    <div class="span2">..code</div>
</div>

ページテンプレートがレンダリングする内の複数のコンポーネントを可能にするために、はコンポーネントテンプレートを使用し<div class="span[#]">てレンダリングされます。<div class="row-fluid>

ただし、コンポーネントテンプレートレベルからは、このテンプレートの実際のコンポーネントの量をページ自体に実際に存在させることはできないようです。コンポーネント自体のスキーマオプションに基づいて、使用されるコンポーネントの幅を計算します。次のコンポーネントテンプレートコードを使用して、正しくレンダリングします。

@{
var spanClass = String.Empty;
if (Fields.HasField("component_width") && Fields.component_width != null) {
    if (Fields.component_width.ToLower() == "full") {
        spanClass = "span12";
    } else if (Fields.component_width.ToLower() == "half") {
        spanClass = "span6";
    } else if (Fields.component_width == "40%") {
        spanClass = "span5";
    } else if (Fields.component_width == "35%") {
        spanClass = "span4";
    } else if (Fields.component_width == "25%") {
        spanClass = "span3";
    }
}
}
<div class="@spanClass">...code

私の質問にたどり着くには：<row-fluid>12番に達した場合、divを閉じることができる必要があります。したがって、オプション「フル」（幅）を持つコンポーネントを1つ選択すると、次の出力コードが表示される必要があります。

<div class="row-fluid">
    <div class="span12">..code</div>
</div>

オプション「half」が選択されているページに2つのコンポーネントがある場合、それは許可する必要があります

<div class="row-fluid">
    <div class="span6">..code</div>
    <div class="span6">..code</div>
</div>

最後に最後のdivを気に留めてください。var spanClass = String.Empty;ページテンプレートからコンポーネントテンプレートで作成した変数に到達する方法はありますか？何かのようなもの：

@foreach (var cp in GetComponentPresentationsByTemplate("XM_Generic Content")) {
            @if (cp.Component.spanClass == "span6") {
                <div class="row-fluid">
                @cp.RenderComponentPresentation()
                @if (cp.Index == 1) {
                   </div>
                }
            }
}

私はまだRazorテンプレート、レスポンシブデザインの実用性、そしてもちろんStackOverflowについて知るようになっています。たぶん、私は何かを完全に見逃し、ばかげた質問をしたばかりの私のコードでばかげたエラーを犯した可能性があります。ぜひ、教えてください。

4

3 に答える 3

6

パッケージはテンプレートランタイム間で共有されないため、この動作は正常です（別のインスタンスから1つのテンプレートに設定された変数を表示できません）。

これを回避する方法はいくつかありますが、Tridionがテンプレートの実行を分離することを選択したのにはおそらく正当な理由があることを考慮する必要があります。

これを回避する方法の1つについては、ここを参照してください。

于 2012-12-07T13:34:09.857 に答える
3

ContextVariablesディクショナリを使用する標準的な手法では、CTに何かを設定し、PTからアクセスすることはできません。事実上、コンポーネントがレンダリングされるたびに、レンダリングコンテキストはページレンダリングコンテキストから変数の新しいコピーを取得します。したがって、彼らに書き戻すことは効果的ではありません。これを回避する手法があります。これについては、tridion-practiceで詳しく説明されています。すでに述べたように、これらの種類の手法に頼ることは最初の選択肢ではありませんが、場合によってはそうする必要があります。

于 2012-12-07T18:55:53.233 に答える
2

現在、ユーザーはコンポーネントフィールドで幅の位置を定義しているようです。非常に一般的だと思いますが、同じRazor TBBを呼び出す5つのコンポーネントテンプレートを作成し、コンポーネントの幅を設定できるコンポーネントテンプレートのパラメータスキーマを定義すると、後でこれらの異なるCTを簡単に呼び出すことができます。ページテンプレート。

于 2012-12-07T11:29:42.723 に答える