【Blazor】 ページごとにカスタムヘッダーを追加する方法
- HeadContentコンポーネントの導入確認
- HeadContentコンポーネントの使い方
- まとめ
目次
HeadContentコンポーネントの導入確認
ページごとに<head>タグへ要素を追加するには、 HeadContentコンポーネントを使用する必要があります。 HeadContentコンポーネントが導入されているかを確認するために、_Layout.cshtmlを見てみましょう。
@using Microsoft.AspNetCore.Components.Web
@namespace Blazor_HeadOutlet.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="Blazor_HeadOutlet.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
@RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
14行目に<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />という記述があります。 この部分がHeadContentコンポーネントの導入箇所です。
この導入箇所がアプリ実行した場合に、各ページで指定した要素に置き換わります。
.NET6以降のBlazor Serverプロジェクトでは、14行目のコードは、デフォルトで記載されています。 記載がない場合はコードを適宜追加してください。
HeadContentコンポーネントの使い方
以下は今回のサンプルコードになります。既存のPages/Index.razorのコードに追記しています。
@page "/"
<PageTitle>PageTitleテスト</PageTitle>
<HeadContent>
@* HeadContentによって、追加された要素 *@
<meta name="description" content="HeadContentで追加された要素" />
</HeadContent>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
ページごとに<head>タグに追加する場合は、HeadContentコンポーネント内に記載しています（13行目）。 このタグの中に書いた内容が、そのまま<head>タグ内へ出力されます。
ページごとに<title>タグを追加したい場合は、PageTitleコンポーネントを指定します（3行目）。 PageTitleコンポーネントは、HeadContentコンポーネントが使用できる場合のみ利用できます。 <title>タグを追加すると、ブラウザに表示されるタブに記載されているタイトルを変更することができます。
実際に実行してみると、前セクションで説明したPages/_Layout.cshtmlの<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />が、 Pages/Index.razorのHeadContentやPageTitleで記載した内容に置換されていることが確認できます。
開発ツールを使って、赤枠部分が追加されていることを確認してみてください。
まとめ
この本では、Blazorの基本から高度なテクニックまで、実際のプロジェクトに役立つ知識を網羅しています。 初心者から経験者まで、Blazorを扱うすべての開発者にとっての必読書です。 この記事の執筆者も参考にした「Blazor入門」で、あなたのBlazorスキルを飛躍的に向上させませんか？
合わせて読みたい
ホットリロードの使い方
Blazorのホットリロード機能を活用すると、ソースコードの変更をブラウザへ自動的に反映することができ、開発の生産性が大幅に向上します。通常のデバッグでは繁重なビルドプロセスが必要だが、ホットリロードを使えば短時間で変更を確認できる。この記事では、Blazorのカウンターページを例に、コード変更後のホットリロードの手順と効果を実際に示しています。
更新日：2023/07/19
