サイトレイアウトの作成
最終更新日:
このページはチュートリアルの一部であり、最初から最後まで順番に実行する必要があります。最初のページに移動します:Xperienceのインターフェース
以下について説明します
-
CSSリソースの追加
-
サイトレイアウトの作成
-
ViewStartファイルの追加
チュートリアルのウェブサイトが順調に立ち上がってきました。前のステップでは、ライブサイトアプリケーションを構築するために必要なすべてのリソースを作成しました。
ウェブサイトで一貫したエクスペリエンスを実現するために、レイアウトビューを作成します。このビューには、ウェブサイトのヘッダー、ナビゲーションメニュー、フッターのコンテンツが含まれ、ウェブサイト上のすべてのページで統一された外観を保証します。また、プロジェクト内のすべてのビューにデフォルトのレイアウトを割り当てる _ViewStart ファイルを追加します。
CSSリソースの追加
Medioクリニックのウェブサイトの基本的なデザインは、チュートリアルリソース内のstyles.cssファイルのCSSスタイルに依存しています(リソースはこちらからダウンロードできます:TutorialWebsite.zip)。
以下の手順でCSSリソースを追加します。
-
Visual Studio でライブサイトプロジェクトを開きます。
-
プロジェクトのルートディレクトリに wwwrootフォルダを作成します。
-
wwwrootフォルダ内にcssフォルダを作成します。
-
チュートリアル リソースのstyles.cssファイルをcssフォルダに追加します。
これで、あなたのプロジェクトには、ウェブサイトのデザインを定義するために使用するスタイルシートが含まれています。
サイトレイアウトの作成
このステップでは、レイアウトビューを作成します。
-
Visual Studioで、Views/Shared/Layout.cshtmlを開きます。
-
Layout.cshtml内のコードを、チュートリアルリソースのindex.htmlファイル内のサンプルコードに置き換えます(リソースはこちらからダウンロードできます:TutorialWebsite.zip)。
-
「<title>...</title>」タグを探し、ハードコードされたページタイトルの"Tutorial website"をMedio Clinic~接頭辞とRazorコール「@ViewBag.Title」に置き換えます。
-
「<head>」タグの中にサイトのCSSを含むファイルをリンクします。
<link href="~/css/styles.css" rel="stylesheet" type="text/css" />
-
「</head>」タグを閉じる前に styles Razor セクションを追加します。このセクションはページビルダーを使うビューのためのページ固有のスタイルシートを追加するために使われます。
@RenderSection("styles", required: false)
-
閉じている「</header>」タグと開いている「<footer>」タグの間の内容を削除し、Razorコールの「@RenderBody()」で置き換えます。
-
「</body>」タグを閉じる前にスクリプトRazorセクションを追加します。このセクションは、ページビルダーを使用するビューのためのページ固有のスクリプトを追加するために使用されます。
@RenderSection("scripts", required: false)
-
_Layout.cshtmlのコードは次のようになります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> @* Dynamically resolves the page's title *@ <title>Medio Clinic - @ViewBag.Title</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Lato:400,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> @* Links a stylesheet used by the website. ASP.NET Core automatically searches for static files inside the ~/wwwroot folder. *@ <link href="~/css/styles.css" rel="stylesheet" type="text/css" /> @* Razor section for additional page-specific styles *@ @RenderSection("styles", required: false) </head> <body> <header> <div class="col-sm-offset-3 col-sm-6"> <div class="col-sm-6"> <a href="./index.html" title="MedioClinic homepage" class="logo">MEDIO clinic</a> </div> <div class="col-sm-6 nav"> <nav> <a href="./index.html" title="Home">Home</a> <a href="./medical-center.html" title="Medical centers">Medical center</a> </nav> </div> </div> <div class="clearfix"></div> </header> @* Loads the content of your Tutorial's pages as sub views *@ @RenderBody() <footer> <div class="col-sm-offset-3 col-sm-6"> <div class="row"> <div class="col-sm-6"> <h4>MEDIO clinic</h4> <ul> <li><i class="fa fa-map-marker"></i> Address: <address>7A Kentico street, Bedford, NH 03110, USA</address></li> <li><i class="fa fa-envelope-o"></i> E-mail: <a href="mailto:info@medio-clinic.com" title="Email us">info@medio-clinic.com</a></li> <li><i class="fa fa-phone"></i> Phone number: <a href="tel:5417543010" title="Phone us">(541) 754-3010</a> </ul> </div> <div class="col-sm-6"> <span class="cms">Powered by <a href="https://xperience.io/" title="Kentico Xperience CMS">Kentico Xperience CMS for ASP.NET Core</a></span> </div> </div> </div> <div class="clearfix"></div> </footer> @* Razor section for additional page-specific scripts *@ @RenderSection("scripts", required: false) </body> </html>
-
変更を保存します。
これで、あなたのウェブサイトの一貫したレイアウトができました。また、サイトの訪問者に異なる体験を提供したい場合は、すべてのビューの共通レイアウトを一箇所に変更するオプションもあります。
ViewStartファイルの追加
ViewStartファイルを使用すると、各ビューのレンダリングの開始時に実行される共通のRazorコードを定義することができます。これを使用して、_Layout.cshtml をウェブサイト上のすべてのビューのデフォルトレイアウトとして設定します。
-
Viewsフォルダを選択し、_ViewStartという名前の新しい空のビューを追加します。
-
デフォルトのコードを以下の Razor マークアップに置き換えてください。
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
-
変更を保存します。
これで、あなたのウェブサイトの一貫したレイアウトができました。また、ウェブサイトの訪問者に異なる体験を提供したい場合は、すべてのビューの共通レイアウトを一箇所に変更するオプションもあります。
前のページ: 生成されたページタイプクラスの操作 — 次のページ: ページコンテンツの表示
完成したページ: 7/10
原文:https://docs.xperience.io/13tutorial/asp-net-core-development-tutorial/creating-the-site-layout