Kontrolowanie <head> zawartości w aplikacjach ASP.NET Core Blazor
Uwaga
Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.
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ą, zobacz wersję tego artykułu platformy .NET 9.
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 PageTitle HeadOutlet, 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"
<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 pliku utworzonym Blazor Web App 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 tytułu strony w obiekcie Blazor Web App
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
- Kontrolowanie nagłówków w kodzie języka C# podczas uruchamiania
- Blazorprzykładowe repozytorium GitHub () (
dotnet/blazor-samplesjak pobrać)
Dokumentacja sieci Web usługi Mozilla MDN:
