Управление содержимым <head> в приложениях ASP.NET Core Blazor

Примечание.

Это не последняя версия этой статьи. В текущей версии см. версию .NET 10 этой статьи.

Предупреждение

Эта версия ASP.NET Core больше не поддерживается. Дополнительные сведения см. в политике поддержки .NET и .NET Core. В текущей версии см. версию .NET 10 этой статьи.

Компоненты Razor могут изменять содержимое элемента HTML <head> страницы, в том числе задавать заголовок страницы (элемент <title>) и изменять метаданные (элементы <meta>).

Управление содержимым <head> в компоненте Razor

Укажите заголовок страницы с компонентом PageTitle, который обеспечивает отрисовку HTML-элемента <title> в компоненте HeadOutlet.

Укажите содержимое элемента <head> с компонентом HeadContent, который предоставляет содержимое в компонент HeadOutlet.

В следующем примере задается заголовок и описание страницы с помощью Razor.

ControlHeadContent.razor:

@page "/control-head-content"

<PageTitle>@title</PageTitle>

<h1>Control <head> Content Example</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "This description is set by the component.";
    private string title = "Control <head> Content";
}

@page "/control-head-content"

<PageTitle>@title</PageTitle>

<h1>Control <head> Content Example</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "This description is set by the component.";
    private string title = "Control <head> Content";
}

@page "/control-head-content"

<h1>Control <head> content</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<PageTitle>@title</PageTitle>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "Description set by component";
    private string title = "Title set by component";
}

@page "/control-head-content"

<h1>Control <head> content</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<PageTitle>@title</PageTitle>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "Description set by component";
    private string title = "Title set by component";
}

Управление содержимым <head> во время предварительной подготовки

Этот раздел применяется к предварительно подготовленным приложениям Blazor WebAssembly и приложениям Blazor Server.

При Razor предварительном создании компонентов для управления содержимым с помощью страницы макета (_Layout.cshtml) требуется управление <head> содержимым с PageTitle помощью компонентов и HeadContent компонентов. Это связано с тем, что компоненты, управляющие содержимым <head>, должны быть отрисованы до макета с помощью компонента HeadOutlet. Этот порядок отрисовки необходим для управления содержимым head.

Если у общего файла _Layout.cshtml нет вспомогательного тега компонента для компонента HeadOutlet, добавьте его в элементы <head>.

Для обязательного значения общий файл _Layout.cshtml приложения Blazor Server или Razor Pages/MVC, которое внедряет компоненты в страницы или представления:

<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

Для обязательного значения общий файл _Layout.cshtml предварительно отрисованного размещенного приложения Blazor WebAssembly:

<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

Настройка заголовка страницы для компонентов с помощью макета

Задайте заголовок страницы в компоненте макета:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

<div class="page">
    ...  
</div>

Компонент HeadOutlet

Компонент HeadOutlet преобразует для просмотра содержимое, предоставляемое компонентами PageTitle и HeadContent.

В созданном Blazor Web App из шаблона HeadOutlet проекта компонент в App.razor содержимом отрисовывает <head> :

<head>
    ...
    <HeadOutlet />
</head>

В приложениях Blazor Server, созданных из шаблона проекта Blazor Server, вспомогательная функция тега компонента отрисовывает содержимое <head> для компонента HeadOutlet в Pages/_Host.cshtml:

<head>
    ...
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

В приложениях Blazor Server, созданных из шаблона проекта Blazor Server, вспомогательная функция тега компонента отрисовывает содержимое <head> для компонента HeadOutlet в Pages/_Layout.cshtml:

<head>
    ...
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

В приложении, созданном Blazor WebAssembly из шаблона проекта, HeadOutlet компонент добавляется RootComponents в коллекцию WebAssemblyHostBuilder в клиентском Program файле:

builder.RootComponents.Add<HeadOutlet>("head::after");

При указании псевдо-селектора ::after содержимое корневого компонента добавляется к существующему содержимому заголовка, а не заменяет его. Это позволяет приложению хранить статическое содержимое заголовка в wwwroot/index.html без необходимости повторять содержимое в компонентах Razor приложения.

Установка заголовка страницы по умолчанию в Blazor Web App

Задайте заголовок страницы в компоненте App (App.razor):

<head>
    ...
    <HeadOutlet />
    <PageTitle>Page Title</PageTitle>
</head>

Не найден заголовок страницы в Blazor WebAssembly приложении

В Blazor приложениях, созданных из шаблона проекта автономного Blazor WebAssembly приложения, NotFound шаблон компонента в App компоненте (App.razor) задает заголовок Not foundстраницы.

В Blazor приложениях, созданных из Blazor шаблона проекта, NotFound шаблон компонента в App компоненте (App.razor) задает для заголовка страницы значение Not found.

App.razor:

<NotFound>
    <PageTitle>Not found</PageTitle>
    ...
</NotFound>

Дополнительные ресурсы

Документация по веб-документам Mozilla MDN:

  • Last updated on