当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
同意しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。詳細はこちらから

Document

ドキュメント

サイトレイアウトの作成

最終更新日:

このページはチュートリアルの一部であり、最初から最後まで順番に実行する必要があります。最初のページに移動します:Xperienceのインターフェース

以下について説明します

  • CSSリソースの追加

  • サイトレイアウトの作成

  • ViewStartファイルの追加

チュートリアルのウェブサイトが順調に立ち上がってきました。前のステップでは、ライブサイトアプリケーションを構築するために必要なすべてのリソースを作成しました。

ウェブサイトで一貫したエクスペリエンスを実現するために、レイアウトビューを作成します。このビューには、ウェブサイトのヘッダー、ナビゲーションメニュー、フッターのコンテンツが含まれ、ウェブサイト上のすべてのページで統一された外観を保証します。また、プロジェクト内のすべてのビューにデフォルトのレイアウトを割り当てる _ViewStart ファイルを追加します。

CSSリソースの追加

Medioクリニックのウェブサイトの基本的なデザインは、チュートリアルリソース内のstyles.cssファイルのCSSスタイルに依存しています(リソースはこちらからダウンロードできます:TutorialWebsite.zip)。

以下の手順でCSSリソースを追加します。

  1. Visual Studio でライブサイトプロジェクトを開きます。

  2. プロジェクトのルートディレクトリに wwwrootフォルダを作成します。

  3. wwwrootフォルダ内にcssフォルダを作成します。

  4. チュートリアル リソースのstyles.cssファイルをcssフォルダに追加します。

これで、あなたのプロジェクトには、ウェブサイトのデザインを定義するために使用するスタイルシートが含まれています。

サイトレイアウトの作成

このステップでは、レイアウトビューを作成します。

  1. Visual Studioで、Views/Shared/Layout.cshtmlを開きます。

  2. Layout.cshtml内のコードを、チュートリアルリソースのindex.htmlファイル内のサンプルコードに置き換えます(リソースはこちらからダウンロードできます:TutorialWebsite.zip)。

  3. 「<title>...</title>」タグを探し、ハードコードされたページタイトルの"Tutorial website"をMedio Clinic~接頭辞とRazorコール「@ViewBag.Title」に置き換えます。

  4. 「<head>」タグの中にサイトのCSSを含むファイルをリンクします。

    <link href="~/css/styles.css" rel="stylesheet" type="text/css" />
  5. 「</head>」タグを閉じる前に styles Razor セクションを追加します。このセクションはページビルダーを使うビューのためのページ固有のスタイルシートを追加するために使われます。

    @RenderSection("styles", required: false)
  6. 閉じている「</header>」タグと開いている「<footer>」タグの間の内容を削除し、Razorコールの「@RenderBody()」で置き換えます。

  7. 「</body>」タグを閉じる前にスクリプトRazorセクションを追加します。このセクションは、ページビルダーを使用するビューのためのページ固有のスクリプトを追加するために使用されます。

    @RenderSection("scripts", required: false)
  8. _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>
    
  9. 変更を保存します。

これで、あなたのウェブサイトの一貫したレイアウトができました。また、サイトの訪問者に異なる体験を提供したい場合は、すべてのビューの共通レイアウトを一箇所に変更するオプションもあります。

ViewStartファイルの追加

ViewStartファイルを使用すると、各ビューのレンダリングの開始時に実行される共通のRazorコードを定義することができます。これを使用して、_Layout.cshtml をウェブサイト上のすべてのビューのデフォルトレイアウトとして設定します。

  1. Viewsフォルダを選択し、新しいEmptyビューを追加します。という名前の新しい空のビューを追加します。

  2. デフォルトのコードを以下の Razor マークアップに置き換えてください。

    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
  3. 変更を保存します。

これで、あなたのウェブサイトの一貫したレイアウトができました。また、ウェブサイトの訪問者に異なる体験を提供したい場合は、すべてのビューの共通レイアウトを一箇所に変更するオプションもあります。

前のページ: 生成されたページタイプクラスの操作次のページ: ページコンテンツの表示

完成したページ: 7/10

 

原文:https://docs.xperience.io/13tutorial/asp-net-core-development-tutorial/creating-the-site-layout