如何在 blazor 中设置页面标题？答案

【问题标题】：How to set page title in blazor?如何在 blazor 中设置页面标题？
【发布时间】：2020-03-10 19:27:52
【问题描述】：

由于 Blazor 是一个 SPA 框架，我想知道是否可以为 Blazor 中的每个单独页面设置页面标题？

我目前正在开发 Blazor webassembly 项目，但无法弄清楚如何添加页面标题，因为只有一个 index.html 应该在 SPA 中，但如果可以实现设置，那将非常有用每个“页面”的标题。

【问题讨论】：

标签： blazor

【解决方案1】：

注意：从 .Net 6.0 开始官方支持改标题，所以不再需要下面的解决方案。

在您的 index.html（或包含的 .js 文件）中提供以下脚本：

<script>
     setTitle = (title) => { document.title = title; };
</script>

在每个页面中注入jsinterop：
```
@inject IJSRuntime JSRuntime;
```

每次渲染后，将文档标题设置为您选择的值：

@code
{
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
      await JSRuntime.InvokeVoidAsync("setTitle", "this is the new title"); ;        
   }    
}

【讨论】：

IDE 可能会抱怨找不到IJSRuntime。无论如何尝试构建和运行，这只是一个 IDE 故障。
InvokeVoidAsync 应该只被调用一次，当 firstRender 的值为 true 时。每次 OnAfterRenderAsync 发生时都会执行上面的代码。
@enet: 没错，但上面的代码来自一个用例，我的页面主体由交换的不同组件组成，我希望页面标题反映该组件这是实际显示的。通过在每个“OnAfterRenderAsync”上执行此代码，我可以确保在主组件发生更改时更新标题。
我们怎样才能使它对 SEO 友好？爬虫将在 javascript chnages 之前看到页面标题
.NET 6 为服务器端和客户端 Blazor 提供了对此方案的官方支持。我建议为此使用官方 API，这些 API 在一些更新/更新的答案中有所描述。

【解决方案2】：

在 ASP.NET CORE 5.0 中，为 Title 添加了一个新组件

 <Title value="Page title" />

Msdn 参考：https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/additional-scenarios?view=aspnetcore-5.0#influence-html-head-tag-elements

先在组件中添加using语句

@using Microsoft.AspNetCore.Components.Web.Extensions.Head

您可以使用命令安装（如果未安装）。

dotnet add package Microsoft.AspNetCore.Components.Web.Extensions --version 5.0.0-preview9.20467.1

5.0.0-preview9.20467.1 是我写这篇文章时的版本。请检查 nuget url 以获取最新版本

Nuget 网址：https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web.Extensions/

然后添加Title标签。

<Title Value="My page title" />

查看下面的示例输出图像

【讨论】：

您不只是喜欢 Microsoft 文档吗？每次我在网络上点击指向 Microsoft 文档的链接时，内容似乎都与创建链接时不同。
我还需要将以下脚本添加到我的 index.html 以使其工作：

【解决方案3】：

来自ASP.NET CORE 6.0，official docs 说我们可以通过使用PageTitle 组件轻松地影响 HTML <title> 标签元素。

在Program.cs中添加HeadOutlet组件

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

然后使用PageTitle组件

<PageTitle>@title</PageTitle>

~~更新 1：~~

~~看起来此 API 已被搁置以进一步改进。这已从官方文档链接中删除。这是github issue 跟踪相同。一旦 API 最终在文档中可用，我将更新答案。~~

更新 2：

上述问题已解决，ASP.NET Core 团队在ASP.NET Core 6.0 中添加了<PageTitle> 组件。我也相应地更新了答案。

【讨论】：

标题在这里不起作用，但标题是（小写）
目前在 blazor 中未实现。如答案中所述，如果 blazor 中的 <Title> 组件，请跟踪 github 问题以进行正式发布

【解决方案4】：

面向 .NET Core 3.1 的用户

感谢post，您可以制作一个可重用的组件。

将以下脚本添加到 js 文件中，或添加到 index.html

<!DOCTYPE html>
<html>

<head>
...
</head>

<body>
...
    <script>
        window.setTitle = (title) => {
            document.title = title;
        }
    </script>
</body>

</html>

在共享文件夹中创建一个新组件PageTitle.razor

@inject IJSRuntime JsRuntime;

@code {
    [Parameter]
    public string Title { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await SetTitle();
    }

    private async Task SetTitle()
    {
        await JsRuntime.InvokeVoidAsync("setTitle", Title);
    }
}

在剃须刀页面添加你要改名的：

<PageTitle Title="Home sweet home" />

【讨论】：

【解决方案5】：

.NET 6 RC1 引入了PageTitle 组件来处理这种情况。 PageTitle 组件位于 Microsoft.AspNetCore.Components.Web 命名空间内。

您可以将组件放置在 Blazor 应用中的任何位置，PageTitle 的内容将反映为您的页面标题。如果您有多个PageTitle 组件，最后渲染的那个将成为您页面的标题。

在这种情况下，标题将是“页面标题 2”：

@page "/counter"

<PageTitle>Page Title 1</PageTitle>
<PageTitle>Page Title 2</PageTitle>

要使PageTitle 和HeadContent 正常工作，您需要将HeadOutlet 添加为根组件。如果您完全在客户端使用 Blazor WASM（无预渲染），则需要在添加 App 作为根组件后将以下行添加到 Startup.cs 文件：

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

head::after CSS 选择器指示在哪里呈现 HeadOutlet 的输出，HeadContent 将遵循该输出，但如果已经存在标题标签，则将更新现有的标题标签。

如果您将 Blazor WASM 与预渲染一起使用，则将以下行放在 _Layout.cshtml 文件的头部：

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

这是假设您有一个来自 Microsoft's docs to setup Blazor WASM pre-rendering 的 _Layout.cshtml 文件。

如果你想了解更多细节，我写了a blog post on PageTitle, HeadContent, and HeadOutlet with more details at the Telerik Blog。

我还刚刚发现了一些非常新的documentation from Microsoft on PageTitle, HeadContent, etc，这是相关的。

【讨论】：

【解决方案6】：

您可以使用this Nuget package。如果您要显示通知，它可以更改您的 Blazor 页面标题甚至图标。查看documentation了解更多详情。

在demo app 中尝试一下。

【讨论】：

【解决方案7】：

帮助器 jsakamoto Toolbelt.Blazor.HeadElement 是唯一解决页面标题正确更改的方法。归根结底，改标题的主要原因是为了帮助 SEO，所以它必须有 SERVER SIDE PERENDERING。

要使用帮助程序，请访问https://dev.to/j_sakamoto/yet-another-way-to-changing-the-page-title-in-blazor-and-more-43k 上的作者说明

我想问一下这个 stackoverflow 问题的作者，让这个问题成为选定的答案。

【讨论】：

当你使用 Blazor 是因为你想在 C# 中编写代码，而不是在 JS 中，所以我相信这是正确的答案，因为你可以在没有任何 JS 的情况下完成所要求的工作，因为这一切都嵌入在Toolbelt.Blazor.HeadElement 组件。太棒了！

【解决方案8】：

我需要一个对 SEO 友好的解决方案，并且我找到了自己的解决方案。也许你可以使用它，而且这个解决方案是多语言的。

我们需要一个辅助静态类：

public static class MetaHelper
{
    public class MetaModel
    {
        public MetaModel(string title, string description)
        {
            Title = title;
            Description = description;
        }
        public string Title { get; set; }
        public string Description { get; set; }
    }

    public static MetaModel GetMeta(string path)
    {
        var culture = CultureHelper.GetCultureSlug();
        // culture is ".com/en/faqs" or ".com/de/faqs" etc
        path = path.Replace($"{culture }/", "");

        if (path == "faqs")
        {
            return new MetaModel("Faq - website", "Frequently Asked Questions about ....");
        }
        else if (path == "page2")
        {}......


        return new MetaModel("Web site - Default Name", "Default description");
    }
}

我们可以在 _host.cshtml 页面中使用这个助手

@{
Layout = null;

var meta = MetaHelper.GetMeta(Request.Path);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@meta.Title</title>
    <meta name="description" content="@meta.Description">

【讨论】：

【解决方案9】：

从 Net6 Preview 7 开始 ...

你可以Modify HTML content from Blazor components

Blazor 现在内置支持从组件修改 HTML 元素内容，包括设置和添加元素。

【讨论】：

嗯，我注意到如果index.html 有title，当第一次加载应用程序时，会显示index.html 中的标题。只有在导航时，PageTitle 才会被渲染。我们如何在第一次加载时显示PageTitle（index.html 标题仍然存在）？
@Meer，这是以前的预览版和 RC 中的一个错误，现在已在 .NET 6 RC2 版本中修复。这现在应该按预期运行。这是GitHub上的错误问题供您参考：github.com/dotnet/aspnetcore/issues/36967
感谢@Swimburger 提供的信息。更新到最新的 RC，现在看不到问题。