Partilhar via

Controlar o conteúdo nas aplicações ASP.NET Core <head>Blazor

Observação

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 10 deste artigo.

Advertência

Esta versão do ASP.NET Core não é mais suportada. Para obter mais informações, consulte a Política de suporte do .NET e do .NET Core. Para a versão atual, consulte a versão .NET 10 deste artigo.

Razor componentes podem modificar o conteúdo do elemento HTML <head> de uma página, incluindo definir o título da página (elemento<title>) e modificar os metadados (elementos<meta>).

Controla <head> o conteúdo num Razor componente

Especifique o título da página com o PageTitle componente, o que permite renderizar um elemento HTML <title> num HeadOutlet componente.

Especifique o conteúdo do elemento com o componente , que fornece conteúdo a um componente .

O exemplo seguinte define o título e a descrição da página usando 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";
}

Controla <head> o conteúdo durante a prerenderização

Esta secção aplica-se a aplicações pré-renderizadas Blazor WebAssembly e a Blazor Server aplicações.

Quando os componentes são pré-renderizados, é necessário usar uma página de layout (Razor) para controlar o conteúdo com os componentes _Layout.cshtml e <head>. A razão para este requisito é que os componentes que controlam o conteúdo <head> devem ser renderizados antes do layout com o componente HeadOutlet. Esta sequência de renderização é necessária para controlar o conteúdo do cabeçalho.

Se o ficheiro partilhado _Layout.cshtml não tiver um Component Tag Helper para um HeadOutlet componente, adicione-o aos <head> elementos.

Num ficheiro obrigatório e partilhado _Layout.cshtml de uma Blazor Server aplicação ou Razor aplicação Pages/MVC que incorpora componentes em páginas ou vistas:

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

Num ficheiro obrigatório e partilhado _Layout.cshtml de uma aplicação pré-renderizadaBlazor WebAssembly:

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

Defina um título de página para os componentes através de um layout

Defina o título da página num componente de layout:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

componente HeadOutlet

O HeadOutlet componente gera o conteúdo fornecido por PageTitle e HeadContent componentes.

Num Blazor Web App criado a partir do modelo do projeto, o componente HeadOutlet em App.razor renderiza o conteúdo <head>:

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

Em Blazor Server aplicações criadas a partir do Blazor Server modelo de projeto, um Assistente de Etiqueta de Componente renderiza <head> o conteúdo para o HeadOutlet componente em Pages/_Host.cshtml:

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

Em Blazor Server aplicações criadas a partir do Blazor Server modelo de projeto, um Assistente de Etiqueta de Componente renderiza <head> o conteúdo para o HeadOutlet componente em Pages/_Layout.cshtml:

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

Numa aplicação criada a partir do modelo de projeto Blazor WebAssembly, o componente HeadOutlet é adicionado à coleção de RootComponents do WebAssemblyHostBuilder no ficheiro cliente Program:

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

Quando o ::after pseudo-seletor é especificado, o conteúdo do componente raiz é adicionado ao conteúdo existente do head, em vez de substituir o conteúdo. Isto permite que a aplicação mantenha o conteúdo wwwroot/index.html estático sem ter de repetir o conteúdo nos componentes Razor da aplicação.

Defina um título de página padrão num Blazor Web App

Defina o título da página no componente App (App.razor):

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

Título da página não encontrado numa Blazor WebAssembly aplicação

Em Blazor aplicações criadas a partir do Blazor WebAssembly modelo de projeto de Aplicação Independente, o NotFound modelo de componente no App componente (App.razor) define o título da página como Not found.

Nas aplicações Blazor criadas a partir de um modelo de projeto Blazor, o modelo de componente NotFound no componente App (App.razor) define o título da página como Not found.

App.razor:

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

Recursos adicionais

Documentação do Mozilla MDN Web Docs:

  • Last updated on