Bagikan melalui

Mengontrol <head> konten di aplikasi ASP.NET Core Blazor

  • Artikel

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Razor komponen dapat mengubah konten elemen HTML <head> halaman, termasuk mengatur judul (<title> elemen) halaman dan memodifikasi metadata (<meta> elemen).

Mengontrol <head> konten dalam Razor komponen

Tentukan judul halaman dengan PageTitle komponen, yang memungkinkan penyajian elemen HTML <title> ke HeadOutlet komponen.

Tentukan <head> konten elemen dengan HeadContent komponen, yang menyediakan konten ke HeadOutlet komponen.

Contoh berikut mengatur judul dan deskripsi halaman menggunakan 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";
}

Mengontrol <head> konten selama pra-penyajian

Bagian ini berlaku untuk aplikasi dan Blazor Server aplikasi yang telah Blazor WebAssembly dirender sebelumnya.

Ketika Razor komponen dirender sebelumnya, penggunaan halaman tata letak (_Layout.cshtml) diperlukan untuk mengontrol <head> konten dengan PageTitle komponen dan HeadContent . Alasan untuk persyaratan ini adalah bahwa komponen yang mengontrol <head> konten harus dirender sebelum tata letak dengan HeadOutlet komponen. Urutan penyajian ini diperlukan untuk mengontrol konten kepala.

Jika file bersama _Layout.cshtml tidak memiliki Pembantu Tag Komponen untuk HeadOutlet komponen, tambahkan ke <head> elemen.

Dalam file Blazor Server bersama _Layout.cshtml aplikasi atau Razor aplikasi Pages/MVC yang diperlukan yang menyematkan komponen ke dalam halaman atau tampilan:

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

Dalam file bersama yang diperlukan dari aplikasi yang dihosting Blazor WebAssembly sebelumnya:_Layout.cshtml

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

Mengatur judul halaman untuk komponen melalui tata letak

Atur judul halaman dalam komponen tata letak:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

HeadOutlet komponen

Komponen HeadOutlet merender konten yang disediakan oleh PageTitle komponen dan HeadContent .

Di Aplikasi Web yang Blazor dibuat dari templat proyek, HeadOutlet komponen dalam App.razor merender <head> konten:

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

Di Blazor Server aplikasi yang Blazor Serverdibuat dari templat proyek, Pembantu Tag Komponen merender <head> konten untuk HeadOutlet komponen di Pages/_Host.cshtml:

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

Di Blazor Server aplikasi yang Blazor Serverdibuat dari templat proyek, Pembantu Tag Komponen merender <head> konten untuk HeadOutlet komponen di Pages/_Layout.cshtml:

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

Dalam aplikasi yang dibuat dari Blazor WebAssembly templat proyek, HeadOutlet komponen ditambahkan ke RootComponents koleksi WebAssemblyHostBuilder dalam file sisi Program klien:

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

Ketika pemilih ::after pseudo ditentukan, konten komponen akar ditambahkan ke konten kepala yang ada alih-alih mengganti konten. Ini memungkinkan aplikasi untuk menyimpan konten kepala statis tanpa wwwroot/index.html harus mengulangi konten di komponen aplikasi Razor .

Mengatur judul halaman default di Blazor Aplikasi Web

Atur judul halaman dalam App komponen (App.razor):

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

Tidak ditemukan judul halaman di Blazor WebAssembly aplikasi

Dalam Blazor aplikasi yang Blazor WebAssembly dibuat dari templat proyek Aplikasi Mandiri, NotFound templat komponen dalam App komponen (App.razor) mengatur judul halaman ke Not found.

Di Blazor aplikasi yang Blazor dibuat dari templat proyek, NotFound templat komponen di App komponen (App.razor) mengatur judul halaman ke Not found.

App.razor:

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

Sumber Daya Tambahan:

Dokumentasi Dokumentasi Mozilla MDN Web Docs: