Kontrolowanie <head> zawartości w aplikacjach ASP.NET Core Blazor

  • Artykuł

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

Razor składniki mogą modyfikować zawartość elementu HTML <head> strony, w tym ustawiać tytuł strony (<title> element) i modyfikować metadane (<meta> elementy).

Kontrolowanie <head> zawartości w składniku Razor

Określ tytuł strony ze składnikiem PageTitleHeadOutlet, który umożliwia renderowanie elementu HTML <title> do składnika.

Określ <head> zawartość elementu za pomocą HeadContent składnika, który udostępnia zawartość składnikowiHeadOutlet.

Poniższy przykład ustawia tytuł i opis strony przy użyciu polecenia 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";
}

Kontrolowanie <head> zawartości podczas prerenderingu

Ta sekcja dotyczy wstępnie wstępnie utworzonych Blazor WebAssembly aplikacji i Blazor Server aplikacji.

Gdy Razor składniki są wstępnie sformatowane, użycie strony układu (_Layout.cshtml) jest wymagane do kontrolowania <head> zawartości za PageTitle pomocą składników i HeadContent . Powodem tego wymagania jest to, że składniki kontrolujące <head> zawartość muszą być renderowane przed układem ze składnikiem HeadOutlet . Ta kolejność renderowania jest wymagana do kontrolowania zawartości nagłówka.

Jeśli udostępniony _Layout.cshtml plik nie ma pomocnika tagów składników dla HeadOutlet składnika, dodaj go do <head> elementów.

W wymaganym pliku udostępnionego Blazor Server_Layout.cshtml aplikacji lub Razor aplikacji Pages/MVC, która osadza składniki na stronach lub widokach:

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

W wymaganym pliku udostępnionym _Layout.cshtml wstępnie hostowanej Blazor WebAssembly aplikacji:

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

Ustawianie tytułu strony dla składników za pośrednictwem układu

Ustaw tytuł strony w składniku układu:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

HeadOutlet cm6long

Składnik HeadOutlet renderuje zawartość dostarczaną przez PageTitle składniki i HeadContent .

W aplikacji internetowej utworzonej Blazor na podstawie szablonu HeadOutlet projektu składnik renderuje App.razor<head> zawartość:

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

W Blazor Server aplikacjach utworzonych na podstawie Blazor Server szablonu projektu pomocnik tagów składników renderuje <head> zawartość składnika HeadOutlet w Pages/_Host.cshtmlprogramie :

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

W Blazor Server aplikacjach utworzonych na podstawie Blazor Server szablonu projektu pomocnik tagów składników renderuje <head> zawartość składnika HeadOutlet w Pages/_Layout.cshtmlprogramie :

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

W aplikacji utworzonej Blazor WebAssembly na podstawie szablonu HeadOutlet projektu składnik jest dodawany do RootComponents kolekcji WebAssemblyHostBuilder w pliku po stronie Program klienta:

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

Po określeniu ::after pseudo-selektora zawartość składnika głównego jest dołączana do istniejącej zawartości głowy zamiast zastępowania zawartości. Dzięki temu aplikacja może zachować zawartość wwwroot/index.html statycznej głowy bez konieczności powtarzania zawartości w składnikach aplikacji Razor .

Ustawianie domyślnego Blazor tytułu strony w aplikacji internetowej

Ustaw tytuł strony w składniku App (App.razor):

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

Nie znaleziono tytułu strony w Blazor WebAssembly aplikacji

W Blazor aplikacjach utworzonych na podstawie Blazor WebAssembly szablonu projektu Aplikacja autonomiczna szablon składnika w App składniku NotFound (App.razor) ustawia tytuł strony na Not foundwartość .

W Blazor aplikacjach utworzonych na podstawie Blazor szablonu NotFound projektu szablon składnika w składniku App (App.razor) ustawia tytuł strony na Not found.

App.razor:

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

Dodatkowe zasoby

Dokumentacja sieci Web usługi Mozilla MDN: