Blazor 动态添加 Head 内容方法

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
<HeadOutlet /> <!-- 放在 Router 外面，但仍在 Body 内 -->

@page "/article/{Id}"
@inject NavigationManager Nav
<h2>@articleTitle</h2>
<p>@articleContent</p>
<HeadContent>
<title>@articleTitle - My Blog</title>
<meta name="description" content="@articleDescription" />
<meta property="og:title" content="@articleTitle" />
</HeadContent>
@code {
[Parameter] public string Id { get; set; }
private string articleTitle = "Loading...";
private string articleDescription = "";
protected override void OnInitialized()
{
    // 模拟加载文章数据
    articleTitle = $"Article #{Id}";
    articleDescription = $"This is the description for article {Id}.";
}
}

<PageTitle>@pageTitle</PageTitle>
@code {
private string pageTitle = "Home";
}