document.타이틀을 설정하고 싶어요!

Blazor 프로그램을 개발했습니다. 모든 구성 요소에 대해 페이지 (문서) 의 제목 (브라우저 탭에 표시된 텍스트) 을 설정할 생각은 없으십니까?

안타깝게도 Blazor의 표준 C# 코드만으로는 불가능합니다.
이것은 Blazor 또는 그 구성 요소의 재현 대상이 <app> 요소 내부의 DOM에만 한정되기 때문이다.

따라서 <app> 요소의 바깥쪽은 모측이고 어쨌든 <head> 요소는 Blazor로 처리할 수 없다.
그렇다면 어떻게 해야 하는지는 블라조르의 C#코드에서 자바스크립트를 활용하여 서로 기능을 활용하고 자바스크립트에 의존해야 한다.

document.title = "ここにC#コードから渡された値が来るように実装する(詳細略)"

그럼에도 불구하고 스스로 이 일을 실시하는 것은 불가능한 것은 아니지만 매우 번거로운 일이다.
따라서 Blazor 구성 요소인 "Blazor Head Element Helper"를 내부적으로 위의 메커니즘에서 제목을 변경하여 NuGet 패키지로 공개할 수 있습니다.

"NuGet Gallery | Blazor Head Element Helper"

"Blazor Head Element Helper" 사용 방법

먼저 "Blazor Head Element Helper"NuGet 패키지(패키지 ID는 "Toolbelt.Blazor.Head Element")를 프로젝트에 추가합니다.

> dotnet add package Toolbelt.Blazor.HeadElement --version 1.0.0

이어 대상 블라조어 애플리케이션Startup.ConfigureServices()에서'헤드 엘리먼트 헬퍼'서비스를 DI 기관에 등록한다.

using Toolbelt.Blazor.Extensions.DependencyInjection; // <- この行を追加し...

public class Startup
{
  public void ConfigureServices(IServiceCollection services)
  {
    services.AddHeadElementHelper(); // <- この行を追加する。
    ...

준비가 되었으면 구성 요소의 인코딩으로 넘어가야 합니다. 그 전에 _Import.razor 파일로 'Toolbelt.Blazor.HeadElement' 의 이름 공간을 미리 설정하는 것이 좋습니다.

@* This is "_Imports.razor" *@
...
@using Toolbelt.Blazor.HeadElement

이렇게 하면 성공적입니다. 어느 구성 요소든지 다음 <Title> 구성 요소만 배치하면 이 구성 요소가 렌더링될 때 이 페이지의 제목을 설정할 수 있습니다!

@* This is "Pages/Counter.razor" *@
@page "/counter"

<Title>Counter (@currentCount)</Title>

또한 제목뿐만 아니라 <head> 요소 내의<meta> 요소도 설정할 수 있습니다!

<Meta Property="ogp:title" Content="Counter" />

이렇게 OGP 대응도 잘 되네요!
...?

서버 측 사전 렌더링...?

잠깐만 기다리세요.
다양한 검색 장벽과 SNS 서버에서 결과적으로 최초의 HTTP GET 요청이 서버에서 반환된 내용만 볼 수 있습니다.
따라서 처음에 설명한 바와 같이 자바스크립트로 제목과 요소 변경만 동적으로 하면 OGP에 대응할 수 없습니다!

하지만 안심하세요.
서버 측(클라이언트 Blazor의 경우 ASP.NET Core 호스트가 필요함) "Toolbelt.Blazor.HeadElement.Server Proendering"NuGet 패키지를 추가해 보십시오.

> dotnet add package Toolbelt.Blazor.HeadElement.ServerPrerendering

그런 다음 서버 측면Startup.Configure() 메서드에서 app.UseStaticFiles() 이전 행에 "Head Element Server Preserendering"중간부품의 로그인 행을 추가합니다.

using Toolbelt.Blazor.Extensions.DependencyInjection; // <- この行を追加し...

public class Startup
{
  public void Configure(IApplicationBuilder app)
  {
    app.UseHeadElementServerPrerendering(); // <- この行を "app.UseStaticFile" より前に追加。
    ...
    app.UseStaticFiles()
    ...

아이고, 정말 불가사의하다!
HTTP GET가 반환을 요청한 HTML 컨텐트 내의 요소 및 요소 그룹<title>razor 파일<meta> 구성 요소나 <Title> 구성 요소에서 이루어진 내용
그래야지.

잘 됐다.

사이트 축소판 그림

다음은'Blazor Head Element Helper'와 서버 측 선렌더링 기능을 활용한 프레젠테이션 사이트를 공개했다.

Live Demo - https://demo-blazor-headelement.azurewebsites.net/

실제로 이 프레젠테이션 사이트에 올라온 각 관광지 페이지의 URL을 Twiiter에 트윗해보면 트위터 카드로 표시될 것으로 보인다.
[This is a demonstration of "Blazor Head Element Helper"] Museum of Pop Culture - The Museum of Pop Culture, or MoPOP (previously called EMP Museum) is a nonprofit museum dedicated to contemporary popular culture. https://t.co/08i4OwuOqS #blazor — @jsakamoto (@jsakamoto) November 1, 2019
이 프레젠테이션 사이트의 원본 코드는 아래에서 열람할 수 있다.

https://github.com/jsakamoto/Toolbelt.Blazor.HeadElement/tree/master/_SampleSites/ServerSideApp

'Blazor Head Element Helper'는 서버측 Blazor(Blazor Server App), 클라이언트측 Blazor(Blazor WebAssiembly App)의 모든 호스트 모델에서 작동합니다.
이렇게 하면 Blazor 애플리케이션도 OGP에 대응할 수 있습니다!
Happy Coding! :)

Reference

이 문제에 관하여(Blazor를 통해 제목 및 OGP 요소 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/jsakamoto/items/a68a62c5e0c13a827da0

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Blazor를 통해 제목 및 OGP 요소 설정

document.타이틀을 설정하고 싶어요!

"Blazor Head Element Helper" 사용 방법

서버 측 사전 렌더링...?

사이트 축소판 그림

Reference

좋은 웹페이지 즐겨찾기