⚕️ ⚙️ 🐆 アーキテクチャオーチャードCMS。レイアウトの概念 🚴🏿 👩🏼‍🔬 👨‍👩‍👦

これは、ガイド「 Orchard CMSを使用してゼロからWebサイトを作成する方法 」の第2部の続きです。このガイドの最初の部分である最初と続きを知ることができます。 Orchard CMS Architectureを開始します。 基本的な概念 」を見つけて、ここで読むことができます。

はじめに

Orchard CMSでの作業を開始するには、コンテンツを操作するためにこのCMSで使用される基本的な概念を学ぶ必要があります。ガイドのこのパートでは、CMSアーキテクチャを構成するOrchard CMSレイアウト要素を紹介します。

Orchardの自動ダウンロードは 、WebツールのクイックアクセスツールであるWeb Platform Installerを 使用して アプリケーションギャラリー から利用できることを思い出させてください （ このリンクを クリックし てインストールを開始します ）。

オーチャードCMSレイアウトの概念

Orchardコンテンツ管理システムには、Webページのレイアウト、コンテンツの場所、および外観（テーマ）の形成と管理のための豊富な機能があります。レイアウトを操作する場合、Orchard CMSは、知って理解することが重要な一連の概念で動作します。

以下に概念の簡単な概要を示し、後続の記事で詳細な概要を説明します。

テーマ

コンテンツ管理システムの重要な部分は、Webページの外観をカスタマイズするメカニズムです。 Orchard CMSは機能的なテーマを提供します。システムとともに、1つのデザインテーマ（Theme Machineと呼ばれます）が提供されますが、コントロールパネルからオンラインギャラリーにアクセスし、開発者コミュニティが作成したテーマの1つをダウンロードできます（図2.6）。

clip_image002

図 2.6。 オーチャードCMSテーマギャラリー

Orchard CMSでは、デザインテーマは、CSSスタイル、画像、レイアウトのレイアウトを記述するファイル、テンプレート、およびソースコードの組み合わせで表されます。デフォルトのテーマでは、新しいHTML5セマンティックタグが使用されます。オーチャードテーマエンジンの重要な品質は、他のテーマに基づいてテーマを作成できることです。つまり、テーマを継承します。

レイアウト

マークアップレイアウトファイルには、Webページの各コンポーネントの配置方法が記述されています。 Orchard CMSのページレイアウトは、「ゾーン」、「ウィジェット」、「レイヤー」の概念で動作します。

図2.7は、Orchard CMSでデフォルトで使用可能なテーマのレイアウトと、コンテンツが追加される使用可能なすべてのゾーンを示しています。

clip_image004

図 2.7。 デフォルトのオーチャードCMSテーマレイアウトゾーン

テンプレート

各コンテンツ部分、各コンテンツフィールド、および各ウィジェットには、それらが表すデータのグラフィカルな表現が必要です。テンプレートは、さまざまな種類のコンテンツのデータのHTML表現を作成するコードです。

Orchard CMSは、デフォルトでRazorプレゼンテーションエンジンとそれに対応する構文を使用します。 Razorの詳細については、このビデオガイドhttp://www.techdays.ru/videos/3307.htmlをご覧ください。

たとえば、ヘッダーにサイト名を表示するためのテンプレートは次のとおりです。

@{ var homeUrl = Href("~/"); } <h1 id="branding"><a href="@homeUrl">@WorkContext.CurrentSite.SiteName</a></h1>

デフォルトのテーマで見つけることができます。このテンプレートはBranding.cshtmlファイルで表され、Themes \ TheTimeMachine \ Viewsフォルダーにあります。

Orchard CMSには、レイアウトテンプレートとドキュメントテンプレートの2つの特別なパターンがあります。

レイアウト .cshtmlレイアウトテンプレートには、Webページコンポーネントのレイアウト構造が含まれています。このテンプレートと適用されたスタイルのおかげで、ページ要素は必要な場所に配置されます。

Document .cshtmlドキュメントテンプレートには、要素レイアウトテンプレートに基づいてドキュメントの最終レイアウトを形成するためのテンプレートが含まれています。図2.8は、Orchard CMSプロジェクトでデフォルトで使用されるドキュメントテンプレートを示しています。

図 2.8。 デフォルトのドキュメントテンプレートコード

タグ<！DOCTYPE>、<html>、<body>などを使用して、ドキュメントテンプレートがWebページの構造を記述していることを確認できます。

形

フォームは、Orchard CMSが情報要素のツリーを構築するために使用するコンポーネントの概念です。

ページ上のテンプレートを使用してコンテンツを表示する前に、このコンテンツはフォームに変換されます。 Webページ全体のツリーは、このようなすべてのフォームから構築されます。フォームには、レイアウトファイル、ゾーン、ウィジェット、ドキュメントパーツ（コンテンツパーツ）が含まれます。

フォームは、コンテンツとそのコンテンツを表示するテンプレートを備えたコンポーネントと考えることができます。必要に応じて、フォームを作成し、マークアップに動的に追加できます。

たとえば、もう少し上に、ページヘッダーにサイト名を表示するBranding.cshtmlテンプレートを調べました。レイアウトテンプレートでは、このテンプレートはフォームとして使用されます。このフォームは、次のコードを使用してページタイトルに動的に追加されます。

WorkContext.Layout.Header.Add（New.Branding（）、 "5" ）;

Webページツリーの最も単純な要素と同様に、フォームを操作します。

配置

Orchardコンテンツ管理システムがフィールドまたはコンテンツの一部を配置する順序を知るためには、配置ルールを定義する必要があります。

このようなルールは、XMLでの配置に関する情報を含む特別なファイルPlacement.infoを使用して形成されます。たとえば、ナビゲーションモジュールのPlacement.infoファイルには次のルールが含まれています。

<配置>

<Place Parts_Navigation_Menu_Edit = "Content：9" />

</ Placement>

このコードは、Parts_Navigation_Menu_Editという名前のフォームを、コンテンツセクションのページの9番目の位置（つまり、1から8までの位置を配置する要素の後）に配置する必要があることを意味します。

配置ファイルの助けを借りて、コンテンツの一部の場所を柔軟に構成できます。さらに、さまざまな形式のモジュールに対して、ページ上のさまざまな場所を指定できます。この機能により、ページレイアウトを柔軟に作成し、モジュールを追加できます。

Placement.infoのルールを使用して、ページの一部だけでなく、他のパラメーター、たとえば、現在のコンテンツ表示のタイプ、コンテンツのタイプ、さらには現在のURL（Orchard 1.1に追加される）にも場所を指定できます。

ゾーン

ゾーンは、コンテンツを含む可能性のあるページの一部です。 Orchard CMSのWebページレイアウトは、ゾーンに基づいています。たとえば、図2.7は、デフォルトテーマThe Time Machineで作業しているときに使用可能なすべてのゾーンを示しています。

ゾーンはスキンで定義され、 Layout.cshtmlレイアウトテンプレートで使用されます。たとえば、The Time Machineテーマ（Theme.txtファイル）には、ヘッダー、ナビゲーション、おすすめ、BeforeMain、AsideFirst、メッセージ、BeforeContent、Content、AfterContent、AsideSecond、AfterMain、TripelFirst、TripelSecond、TripelThird、FooterQuadFirst、FooterQuadSecond、 FooterQuadThird、FooterQuadFourth、Footer。

ゾーンの設計テーマを決定すると、管理パネルからウィジェットを配置するためにゾーンが自動的に使用可能になります（図2.9）。

clip_image004[4]

図 2.9。 ウィジェットを追加するときに使用可能なゾーンのリスト

ウィジェット

ウィジェットは、サイトの1つ以上のページに追加できる小さなユーザーインターフェイス要素です。ウィジェットの例には、タグクラウド、マップ、検索フォームなどが含まれます。図2.10は、ウィジェットであるページ要素の一部を強調しています。

clip_image006

図 2.10。 Orchard CMSページのウィジェット

ウィジェットはコードとマークアップで表現する必要がありますが、コードは非常に複雑で独自のMVCコントローラーを含む場合があります。さらに、コンテンツの一部に基づいてウィジェットを作成できます。

ウィジェットは開発者が作成します。いくつかのウィジェットには、Orchard CMSが付属しています。 Orchard CMSに付属する最も単純で最も一般的なウィジェットはHtmlウィジェットです。これにより、任意のHTMLマークアップをページゾーンに簡単に追加できます（図2.11）。

clip_image008

図 2.11。 Orchard CMS管理パネルからヘッダーゾーンにHTMLウィジェットを追加する

Orchard CMS配信では、合計4つのウィジェットが表示されます（図2.12）。電子メールコンテナーの表示、HTMLマークアップの表示、最新のブログエントリの一覧表示、および「ブログアーカイブ」要素の表示用です。

clip_image010

図 2.12。 Orchard CMSで利用可能なウィジェット

このガイドの後半で、独自のウィジェットを作成してサイトで使用する方法を学習します。

レイヤー

レイヤーは、さまざまなシナリオに従ってウィジェットをグループ化するためのオーチャードCMSの概念です。たとえば、許可されたユーザーにのみ表示され、ページへの匿名の訪問者には表示されないウィジェットのセットを作成できます。

レイヤーを使用すると、さまざまな条件（ユーザータイプ（匿名または登録済み）、ページタイプ（メインまたはそうでない）など）に応じて、ページの外観、要素の彩度を柔軟に調整できます。

サイト用の独自のレイヤーの作成は、管理パネルのインターフェースを介して行われます（図2.13）。

clip_image012

図 2.13。 Orchard CMSへの新しいウィジェットレイヤーの追加

ページ上のゾーンにウィジェットを追加する場合、このウィジェットを使用できるレイヤーを指定する必要があります。デフォルトでは、デフォルトレイヤーがあり、ウィジェットは条件に関係なく常に表示されます。

継続する...

アーキテクチャオーチャードCMS。 レイアウトの概念