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

  • Статья

Примечание.

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

Внимание

Эта информация относится к предварительному выпуску продукта, который может быть существенно изменен до его коммерческого выпуска. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

В текущем выпуске см . версию .NET 8 этой статьи.

Компоненты 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"

<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 из шаблона проекта, 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 страницы по умолчанию в веб-приложении

Задайте заголовок страницы в компоненте 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: