8

背景: ホームページに代替レイアウトを作成することは避けたいと思います。「The Theme Machine」ゾーンとレイアウトをそのまま維持し、実際には純粋な CSS を使用してほとんどすべてを「テーマ」にしたいと考えています。そのため、CSS を特定の「ページ」に選択的にターゲティングする必要があります。これには、最も重要なこととして、ホームページが含まれます。これを行う最も簡単な方法は、レイアウト全体をラップするレイアウト ラッパー「div」にクラスを追加することです。Document.cshtml ファイルをオーバーライドして「body」要素にクラスを追加することもできますが、Layout.chstml ファイル内で作業し、Model.Classes を活用して必要な CSS クラスを「オープニング」タグ。

私は現在、次のようなことをしています：

string area = Model.DesignatedAreaField;
Model.Classes.Add(string.IsNullOrWhiteSpace(area) ? "home" : area);

Model.Id = "layout-wrapper";
var tag = Tag(Model, "div"); // using Tag so the layout div gets the classes, id and other attributes added to the Model

ホームページと他のページはすべて同じ領域にあり、Model.DesignatedAreaField は実際にはホームページまたは他のページのいずれかに対して空の文字列を返すため、Area がカットされないことはわかっています。したがって、最終的に、上記のコードは常に次のマークアップを生成します (ホームページに 3 つのトリプルを表示しています)。

<div class="home tripel-123" id="layout-wrapper">

ホームページが表示されているときだけ、「ホーム」CSS クラスを追加できるようにしたいと考えています。一部の疑似コードは次のようになります。

string wrapperCss = IsHomepage ? 'home' : Model.GetUrlPathOrSomethingUniqueForThePath();
Model.Classes.Add(wrapperCss);

これにより、たとえば、メイン コンテンツを縮小して右にフロートさせ、トリプルをその左側に配置できます (これがホームページのデザインの外観ですが、まったく異なるレイアウトを作成する必要はありません)。シンプルでターゲットを絞った CSS で同じことができれば)。

更新：バートランドの答えを配線する

Bertrand の回答により、URL に応じてラッピング DIV にクラスを追加することができました。彼はそれについて言及しませんでした (Orchard は彼にとって第二の性質であるため :-) が、Layout.cshtml ファイルにインクルードを追加し、それに応じて "my" コードを変更する必要があります。

@using Orchard.Utility.Extensions;
{
/* omitted for brevity, everything in between is the same as in the Theme's Machine layout file */

string area = WorkContext.HttpContext.Request.Path.HtmlClassify();
area = string.IsNullOrWhiteSpace(area) ? "home" : area;
Model.Classes.Add("url-" + area);

次のクラスが外側の div に追加されます。

1) ホームページが表示されたら:

<div class="url-orchard-local- tripel-123" id="layout-wrapper">

2) Products という名前のページが表示された場合:

<div class="url-orchard-local-products" id="layout-wrapper">

私の URL は、Visual Studio の Web サーバー内で実行されている開発マシンで次のように読み取ります。

http://localhost:30320/OrchardLocal/ or 
http://localhost:30320/OrchardLocal/Products

私は自分の人生を賭けているわけではありませんが、「OrchardLocal」の部分は、Azure サーバーに公開されると本番環境で変更されると強く信じています...したがって、コードを次のように先制的に変更しました。

string area = WorkContext.HttpContext.Request.Path.HtmlClassify();
if (area.LastOrDefault() == '-') {
    area = "home";
}
Model.Classes.Add("url-" + area);

「ホームページ」が表示されると、次のクラスになります。

<div class="url-home tripel-123" id="layout-wrapper">

（実際には、ラムダ演算子と混合されたいくつかの三項を悪用するワンライナーの上のコードを作成しました:-)

HtmlClassify が「-」で終わる「クラス」を返すのは、それがホームページの場合だけだと推測しています...またはサイトの「ルート」...私は間違っているかもしれません! :-)

(とにかく、私は nHibernate 以外で過去数年間使用してきた何よりも Orchard を愛していますが、Orchard もそれを使用しています!完璧です!)

4

2 に答える 2

7

このような何かがうまくいくはずです：

Model.Classes.Add("url-" + WorkContext.HttpContext.Request.Path.HtmlClassify())
于 2012-09-11T00:06:11.830 に答える
0

拡張メソッドでこれを行う方法は次のとおりです。

public static string GetPageCssClass(this WorkContext workContext)
{
    string pageUrl = workContext.HttpContext.Request.Url.ToString();
    string baseUrl = workContext.CurrentSite.BaseUrl; //use BaseUrl to later get app relative page path

    string pageClass = workContext.IsHomePage()
        ? "home"
        : pageUrl.Substring(baseUrl.Length).HtmlClassify();

    return string.Format("{0}-page", pageClass);
}

public static bool IsHomePage(this WorkContext workContext)
{
    string pageUrl = workContext.HttpContext.Request.Url.ToString().TrimEnd('/');
    string baseUrl = workContext.CurrentSite.BaseUrl.TrimEnd('/');

    return pageUrl == baseUrl;
}

これは、サイト設定で設定された BaseUrl に関連するクラス名に基づいているため、BaseUrl が現在の環境に設定されていれば、ローカルまたは本番環境で機能するはずです。

次に、拡張メソッド クラスの名前空間のビューに using ステートメントを追加するだけで済みます。

Model.Classes.Add(WorkContext.GetPageCssClass());

ここでの別のオプションは、現在アクティブなレイヤーごとに css クラスを追加することです。次の拡張メソッドは、{xxx} レイヤーの css クラスのリストをページに追加します。関連する別の質問があります: Orchard CMS: Conditional CSS Class based on Layer

于 2014-08-05T02:00:40.870 に答える