这指的是 #10450.
目标。 为SEO和Open Graph设置元标签（标题、描述等），数据来自页面本身。使用Javascript interop不会有任何帮助，因为页面将无法被抓取。
我已经使用了一个 建议 并将基础组件移到树的更上层，以封装@honkmother的 <html> 标签，但由于某些原因，这影响了路由。所有的链接都在前面加上了 ~/ 但我似乎不明白为什么。
我已经创建了一个示例repo 此处 如果有人有兴趣看一看。
_Hosts.cshtml
@page "/"
@namespace BlazorMetaTags.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<component type="typeof(AppBase)" render-mode="ServerPrerendered" />
AppBase.cs
using BlazorMetaTags.Shared;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
namespace BlazorMetaTags
{
public class AppBase : ComponentBase
{
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
builder.OpenElement(0, "html");
builder.AddAttribute(1, "lang", "en");
builder.OpenElement(2, "head");
builder.OpenComponent<Head>(3);
builder.CloseComponent();
builder.CloseElement();
builder.OpenElement(3, "body");
builder.OpenElement(4, "app");
builder.OpenComponent<App>(5);
builder.CloseComponent();
builder.CloseElement();
builder.OpenComponent<Body>(6);
builder.CloseComponent();
builder.AddMarkupContent(7, " <script src='_framework/blazor.server.js'></script>");
builder.CloseElement();
builder.CloseElement();
}
}
public class MetaTags
{
public string Title { get; set; } = "";
public string Description { get; set; } = "";
}
}
头部.剃刀组件设置元标签。
@inject AppState _appState
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@_appState.MetaTags.Title</title>
<meta name="description" content="@_appState.MetaTags.Description">
<base href="~/" />
<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css" />
<link href="/css/site.css" rel="stylesheet" />
</head>
@code {
protected override async Task OnInitializedAsync()
{
_appState.OnChange += StateHasChanged;
}
}
身体.剃须刀
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
AppState.cs
using System;
namespace BlazorMetaTags
{
public class AppState
{
public MetaTags MetaTags { get; private set; } = new MetaTags();
public event Action OnChange;
public void SetMetaTags(MetaTags metatags)
{
MetaTags = metatags;
NotifyStateChanged();
}
private void NotifyStateChanged() => OnChange?.Invoke();
}
}
启动.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddScoped<AppState>();
services.AddSingleton<WeatherForecastService>();
}