ASP.NET Core Blazor uygulamalarında içeriği denetleme <head>

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Razorbileşenleri, sayfanın başlığını (öğesi) ayarlama ve meta verileri (<title><meta>öğeler) değiştirme dahil olmak üzere sayfanın HTML <head> öğesi içeriğini değiştirebilir.

Bileşendeki Razor içeriği denetleme <head>

Bir html <title> öğesinin HeadOutlet bir bileşene işlenmesini PageTitle sağlayan bileşeniyle sayfanın başlığını belirtin.

Bileşene içerik sağlayan bileşenle öğe içeriğini HeadOutlet belirtin.<head>HeadContent

Aşağıdaki örnek, kullanarak Razorsayfanın başlığını ve açıklamasını ayarlar.

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";
}

Ön kayıt sırasında içeriği denetleme <head>

Bu bölüm önceden oluşturulmuş Blazor WebAssembly uygulamalar ve Blazor Server uygulamalar için geçerlidir.

Bileşenler önceden girildiğindeRazor, ve HeadContent bileşenleriyle PageTitle içeriği denetlemek <head> için bir düzen sayfası (_Layout.cshtml) kullanılması gerekir. Bu gereksinimin nedeni, içeriği denetleen <head> bileşenlerin bileşenle birlikte HeadOutlet düzenden önce işlenmesi gerektiğidir. Baş içeriği denetlemek için bu işleme sırası gereklidir.

Paylaşılan _Layout.cshtml dosyanın bir bileşen için HeadOutlet Bileşen Etiketi Yardımcısı yoksa, bunu öğelere <head> ekleyin.

Bileşenleri sayfalara veya görünümlere ekleyen bir Blazor Server uygulamanın veya Razor Pages/MVC uygulamasının gerekli, paylaşılan _Layout.cshtml dosyasında:

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

Önceden oluşturulmuş barındırılan bir uygulamanın gerekli, paylaşılan _Layout.cshtml dosyasında Blazor WebAssembly :

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

Düzen aracılığıyla bileşenler için sayfa başlığı ayarlama

Düzen bileşeninde sayfa başlığını ayarlayın:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

HeadOutlet bileşeni

Bileşen, HeadOutlet ve HeadContent bileşenleri tarafından PageTitle sağlanan içeriği işler.

Proje şablonundan oluşturulan bir Blazor Web Uygulamasında, HeadOutlet içindeki App.razor bileşen içeriği işler <head> :

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

Blazor Server Proje şablonundan Blazor Server oluşturulan uygulamalarda, Bileşen Etiketi Yardımcısı içindeki Pages/_Host.cshtmlbileşenin HeadOutlet içeriğini işler<head>:

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

Blazor Server Proje şablonundan Blazor Server oluşturulan uygulamalarda, Bileşen Etiketi Yardımcısı içindeki Pages/_Layout.cshtmlbileşenin HeadOutlet içeriğini işler<head>:

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

Proje şablonundan Blazor WebAssembly oluşturulan bir uygulamada, HeadOutlet bileşen istemci tarafı Program dosyasındaki koleksiyonuna WebAssemblyHostBuilder eklenirRootComponents:

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

Sahte seçici belirtildiğinde::after, kök bileşenin içeriği, içeriği değiştirmek yerine mevcut baş içeriğine eklenir. Bu, uygulamanın bileşenlerindeki wwwroot/index.html içeriği yinelemek zorunda kalmadan statik baş içeriğinin içinde tutulmasını Razor sağlar.

Web Uygulamasında varsayılan sayfa başlığı Blazor ayarlama

Bileşende App sayfa başlığını ayarlayın (App.razor):

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

Uygulamada sayfa başlığı Blazor WebAssembly bulunamadı

Blazor Tek Başına Uygulama proje şablonundan Blazor WebAssembly oluşturulan uygulamalarda, NotFound bileşendeki App (App.razor) bileşen şablonu sayfa başlığını olarak Not foundayarlar.

Blazor Proje Blazor şablonundan oluşturulan uygulamalarda, NotFound bileşendeki App (App.razor) bileşen şablonu sayfa başlığını olarak Not foundayarlar.

App.razor:

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

Ek kaynaklar

Mozilla MDN Web Belgeleri belgeleri: