Sdílet prostřednictvím

Řízení <head> obsahu v aplikacích ASP.NET Core Blazor

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 10 tohoto článku.

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Razor komponenty mohou upravit obsah elementu HTML <head> stránky, včetně nastavení názvu stránky (<title> element) a úpravy metadat (<meta> elementů).

Řízení <head> obsahu v komponentě Razor

Zadejte název stránky komponentou PageTitle , která umožňuje vykreslovat element HTML <title> do HeadOutlet komponenty.

Zadejte <head> obsah elementu s komponentou HeadContent , která poskytuje obsah HeadOutlet součásti.

Následující příklad nastaví název a popis stránky pomocí 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";
}

Řízení <head> obsahu během předkreslování

Tato část se týká předem určených Blazor WebAssembly aplikací a Blazor Server aplikací.

Pokud Razor jsou komponenty předem vytyčovány, je použití stránky rozložení (_Layout.cshtml) nutné k řízení <head> obsahu s komponentami PageTitle a HeadContent komponentami. Důvodem tohoto požadavku je, že součásti, které řídí <head> obsah, musí být vykresleny před rozložením komponenty HeadOutlet . Toto pořadí vykreslování se vyžaduje k řízení hlavního obsahu.

Pokud sdílený _Layout.cshtml soubor nemá pomocníka značky komponenty pro komponentu HeadOutlet , přidejte ho do <head> prvků.

V požadovaném_Layout.cshtml souboru aplikace nebo Blazor Server aplikace Pages/MVC, který vkládá komponenty do stránek nebo zobrazení:

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

V požadovanémsouboru předem uspořádané hostované _Layout.cshtml aplikace:

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

Nastavení názvu stránky pro komponenty prostřednictvím rozložení

Nastavte název stránky v komponentě rozložení:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

HeadOutlet komponenta

Komponenta HeadOutlet vykresluje obsah poskytovaný komponentami PageTitle a HeadContent jejich součástí.

Ve vytvořené Blazor Web App šabloně projektu vykresluje komponenta HeadOutlet v App.razor vykreslení <head> obsahu:

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

V Blazor Server aplikacích vytvořených ze Blazor Server šablony projektu vykreslí pomocný pomocník značky <head> komponenty obsah pro komponentu HeadOutlet v Pages/_Host.cshtml:

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

V Blazor Server aplikacích vytvořených ze Blazor Server šablony projektu vykreslí pomocný pomocník značky <head> komponenty obsah pro komponentu HeadOutlet v Pages/_Layout.cshtml:

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

V aplikaci vytvořené ze Blazor WebAssembly šablony HeadOutlet projektu se komponenta přidá do RootComponents kolekce WebAssemblyHostBuilder souboru na straně Program klienta:

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

::after Pokud je zadán pseudolektor, obsah kořenové komponenty se místo nahrazení obsahu připojí k existujícímu hlavnímu obsahu. To umožňuje aplikaci zachovat statický obsah wwwroot/index.html hlavy, aniž by se musel opakovat obsah v komponentách aplikace Razor .

Nastavení výchozího názvu stránky v Blazor Web App

Nastavte název stránky v komponentě App (App.razor):

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

Název stránky v Blazor WebAssembly aplikaci nebyl nalezen

V Blazor aplikacích vytvořených ze Blazor WebAssembly šablony NotFound projektu Samostatné aplikace nastaví šablona komponenty v App komponentě (App.razor) název stránky na Not found.

Vaplikacích BlazorBlazorNotFoundAppApp.razorNot found

App.razor:

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

Další materiály

Dokumentace k webu Mozilla MDN:

  • Last updated on