Blazor中如何实现可复用的页面标题模板？

现状说明 #

Blazor 目前没有内置支持模板化页面标题的功能，无法直接通过原生PageTitle组件实现「固定模板+动态片段」的标题效果，需要自定义组件来实现需求。

实现方案（结合配置+自定义组件） #

以下是基于appsettings.json配置和自定义组件的实现方式，可实现布局中定义统一模板，页面仅传入动态内容即可生成完整标题：

1. 配置全局标题模板
   在appsettings.json中添加标题模板配置，方便后续统一修改：

{
  "AppSettings": {
    "PageTitleTemplate": "Welcome to example.com - {0}"
  }
}

其中{0}为动态内容占位符，可根据需求调整位置（如改为"{0} - Welcome to example.com"）。

2. 创建自定义PageTitleTemplate组件
   新建PageTitleTemplate.razor组件，注入配置并组合完整标题：

@inject IConfiguration Configuration
@if (!string.IsNullOrWhiteSpace(TitleSegment))
{
    var template = Configuration["AppSettings:PageTitleTemplate"] ?? "{0}";
    <PageTitle>@string.Format(template, TitleSegment)</PageTitle>
}
else
{
    <PageTitle>@DefaultTitle</PageTitle>
}

@code {
    [Parameter, EditorRequired]
    /// <summary>
    /// 页面动态标题片段
    /// </summary>
    public string TitleSegment { get; set; } = string.Empty;

    [Parameter]
    /// <summary>
    /// 无动态片段时的默认标题
    /// </summary>
    public string DefaultTitle { get; set; } = "Welcome to example.com";
}

3. 页面中快速使用
   在任意页面中，仅需传入动态标题片段即可生成符合模板的完整标题：

<!-- 首页 -->
<PageTitleTemplate TitleSegment="Home" />

<!-- 产品列表页 -->
<PageTitleTemplate TitleSegment="Product List" />

此时浏览器标签会自动显示Welcome to example.com - Home、Welcome to example.com - Product List这类符合模板的标题。

可优化方向 #

• 支持多模板配置，可根据页面路由或业务场景切换不同模板
• 结合路由数据自动填充动态片段，减少页面重复代码
• 添加标题切换时的过渡动画效果
• 封装成独立类库，方便跨项目复用

内容的提问来源于stack exchange，提问作者benfd