ASP.NET Core Blazor 앱에서 <head> 콘텐츠 제어

  • 아티클

참고 항목

이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

Important

이 정보는 상업적으로 출시되기 전에 실질적으로 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적, 또는 묵시적인 보증을 하지 않습니다.

현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

Razor 구성 요소는 페이지의 제목(<title> 요소) 설정과 메타데이터(<meta> 요소) 수정을 포함해 페이지의 HTML <head> 요소 콘텐츠를 수정할 수 있습니다.

Razor 구성 요소에서 <head> 콘텐츠 제어

HTML <title> 요소를 HeadOutlet 구성 요소로 렌더링할 수 있는 PageTitle 구성 요소를 사용하여 페이지 제목을 지정합니다.

HeadContent 구성 요소를 사용하여 <head> 요소 콘텐츠를 지정합니다. 이렇게 하면 HeadOutlet 구성 요소에 콘텐츠가 제공됩니다.

다음 예제에서는 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";
}

미리 렌더링하는 동안 <head> 콘텐츠 제어

이 섹션은 미리 렌더링된 Blazor WebAssembly 앱 및 Blazor Server 앱에 적용됩니다.

Razor 구성 요소가 미리 렌더링되면 레이아웃 페이지(_Layout.cshtml)를 사용하여 구성 요소와 HeadContent 함께 PageTitle 콘텐츠를 제어 <head> 해야 합니다. 그 이유는 <head> 콘텐츠를 제어하는 구성 요소가 HeadOutlet 구성 요소를 포함하는 레이아웃보다 먼저 렌더링되어야 하기 때문입니다. 이 렌더링 순서는 헤드 콘텐츠를 제어하는 데 필요합니다.

공유 _Layout.cshtml 파일에 HeadOutlet 구성 요소에 대한 구성 요소 태그 도우미가 없는 경우 <head> 요소에 추가합니다.

구성 요소를 페이지 또는 보기에 포함하는 Blazor Server 앱 또는 Razor Pages/MVC 앱의 필수, 공유 _Layout.cshtml 파일에서 다음을 수행합니다.

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

미리 렌더링된 호스트된 Blazor WebAssembly 앱의 필수, 공유 _Layout.cshtml 파일에서 다음을 수행합니다.

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

레이아웃을 통해 구성 요소의 페이지 제목 설정

레이아웃 구성 요소에서 페이지 제목을 설정합니다.

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

HeadOutlet 구성 요소

HeadOutlet 구성 요소는 PageTitle 및 HeadContent 구성 요소에서 제공하는 콘텐츠를 렌더링합니다.

Blazor 프로젝트 템플릿 HeadOutlet 에서 만든 웹앱에서 구성 요소는 App.razor 콘텐츠를 렌더링합니다.<head>

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

Blazor Server 프로젝트 템플릿으로 만든 Blazor Server 앱에서 구성 요소 태그 도우미가 Pages/_Host.cshtml에 있는 HeadOutlet 구성 요소에 <head> 콘텐츠를 렌더링합니다.

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

Blazor Server 프로젝트 템플릿으로 만든 Blazor Server 앱에서 구성 요소 태그 도우미가 Pages/_Layout.cshtml에 있는 HeadOutlet 구성 요소에 <head> 콘텐츠를 렌더링합니다.

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

프로젝트 템플릿에서 만든 앱에서 Blazor WebAssembly 구성 요소는 클라이언트 쪽 Program 파일의 WebAssemblyHostBuilder 컬렉션에 추가 RootComponents 됩니다.HeadOutlet

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

::after 의사 선택기를 지정하면 콘텐츠를 바꾸는 대신 루트 구성 요소의 내용이 기존 헤드 콘텐츠에 추가됩니다. 이렇게 하면 앱이 앱의 Razor 구성 요소에서 콘텐츠를 반복하지 않고도 wwwroot/index.html에서 정적 헤드 콘텐츠를 유지할 수 있습니다.

웹앱에서 Blazor 기본 페이지 제목 설정

구성 요소에서 페이지 제목 설정 App (App.razor):

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

앱에서 페이지 제목을 찾을 수 Blazor WebAssembly 없음

독립 실행형 앱 프로젝트 템플릿에서 Blazor WebAssembly 만든 앱에서 Blazor 구성 요소()의 NotFound 구성 요소 템플릿 App 은App.razor 페이지 제목을 .로 Not found설정합니다.

프로젝트 템플릿에서 Blazor 만든 앱에서 Blazor 구성 요소()의 NotFoundApp 구성 요소 템플릿은App.razor 페이지 제목을 .로 Not found설정합니다.

App.razor:

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

추가 리소스

Mozilla MDN 웹 문서 설명서: