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

  • Článek

Poznámka:

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

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v tématu .NET a .NET Core Zásady podpory. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

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 sdíleném _Layout.cshtml Blazor Server souboru aplikace nebo Razor aplikace Pages/MVC, který vkládá komponenty do stránek nebo zobrazení:

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

V požadovaném sdíleném _Layout.cshtml souboru předem uspořádané hostované Blazor WebAssembly 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 Blazor Blazor NotFound AppApp.razorNot found

App.razor:

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

Další materiály

Dokumentace k webu Mozilla MDN: