blazor中动态修改head内容需使用内置headoutlet组件配合headcontent块。必须在根布局（如app.razor）中添加，并在组件内用包裹title、meta等标签，支持绑定与自动清理。
Blazor 中动态修改 `
` 内容（如 title、meta、link、style 等）主要靠 Microsoft.AspNetCore.Components.Web.Extensions 提供的HeadOutlet 组件配合 HeadContent 实现。.NET 6+ 已内置支持，无需额外 NuGet 包（旧版本需手动安装）。启用 HeadOutlet（必须第一步）
在根布局文件（通常是 App.razor 或 _Host.cshtml 对应的布局）中，确保已添加 <headoutlet></headoutlet>：
<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>
<p><HeadOutlet /> <!-- 放在 Router 外面，但仍在 Body 内 -->在组件中动态写入 HeadContent
在任意 Razor 组件（.razor）中使用 <headcontent></headcontent> 块，其中内容会自动注入到页面 `
- 支持 HTML 标签：
<title></title>、<meta>、<link>、<style></style>、<script></script>（仅静态注入，不执行 JS） - 内容可绑定参数或状态，实现“动态”效果
- 组件卸载时，对应内容会自动移除，避免重复或残留
示例：根据路由参数设置页面标题和描述
@page "/article/{Id}"
@inject NavigationManager Nav
<p><h2>@articleTitle</h2>
<p>@articleContent</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/10684" title="传媒公司模板(RTCMS)1.0"><img
src="https://img.php.cn/upload/webcode/000/000/013/176327820790052.jpg" alt="传媒公司模板(RTCMS)1.0" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/10684" title="传媒公司模板(RTCMS)1.0">传媒公司模板(RTCMS)1.0</a>
<p>传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://</p>
</div>
<a href="/xiazai/code/10684" title="传媒公司模板(RTCMS)1.0" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></p><p><HeadContent>
<title>@articleTitle - My Blog</title>
<meta name="description" content="@articleDescription" />
<meta property="og:title" content="@articleTitle" />
</HeadContent></p><p>@code {
[Parameter] public string Id { get; set; }
private string articleTitle = "Loading...";
private string articleDescription = "";</p><pre class='brush:php;toolbar:false;'>protected override void OnInitialized()
{
// 模拟加载文章数据
articleTitle = $"Article #{Id}";
articleDescription = $"This is the description for article {Id}.";
}}
注意点和常见问题
-
<headcontent></headcontent>必须在组件的顶级作用域（不能嵌套在@if、@foreach或自定义组件内），否则编译报错 - 若需条件渲染，用 C# 逻辑拼接字符串再输出（不推荐），更稳妥的是用多个
<headcontent></headcontent>配合@if包裹整个块 - SEO 友好：服务端渲染（SSR）或静态生成（SSG）模式下，这些 head 内容会真实出现在初始 HTML 中
- JS 注入限制：动态插入的
<script></script>标签不会自动执行（出于安全），如需运行脚本，请用IJSRuntime手动调用
替代方案（轻量场景）
如果只改标题，可用 NavigationManager + PageTitle 组件（.NET 7+ 更简洁）：
<PageTitle>@pageTitle</PageTitle>
<p>@code {
private string pageTitle = "Home";
}</p>它本质是 HeadContent 的语法糖，适合简单 title 场景。
基本上就这些。核心就是 HeadOutlet + HeadContent，结构清晰、无副作用、天然支持组件生命周期。
