Blazor 中 HeadOutlet 是必需的占位符组件，必须置于 _Host.cshtml 或主布局的 <head> 内，用于渲染 PageTitle 和 HeadContent；PageTitle 用于动态设置页面标题，就近路由组件生效；HeadContent 支持添加 meta、link 等 SEO 标签。
Blazor 中的 HeadOutlet 和 PageTitle 是用于管理 HTML `
` 区域内容（如页面标题、meta 标签）的内置组件，尤其在 Server 与 WebAssembly 模式下统一支持 SEO 和用户体验优化。
HeadOutlet：必须放在 _Host.cshtml 或主布局中
HeadOutlet 是一个“占位符”组件，负责将子组件中定义的 head 内容（比如 PageTitle、HeadContent）实际渲染到 HTML 文档的 `
` 里。它本身不生成任何 DOM，只起注入作用。
- Server 渲染（Blazor Server）或 WebAssembly（Blazor WASM）项目中，都需确保
HeadOutlet 出现在根布局（如 MainLayout.razor）或 _Host.cshtml 的 `` 内部
- 典型写法（在
MainLayout.razor 的 `` 中）：
<HeadOutlet />
- 如果漏掉它，所有
PageTitle 和 HeadContent 都不会生效，页面标题仍为默认值
PageTitle：简洁设置当前页面标题
PageTitle 是最常用的 head 管理组件，专用于动态更新 `
` 标签内容。它会自动绑定到最近的 <code>HeadOutlet</code>，无需额外配置。
<ul>
<li>用法简单：<br><font color="#666"><PageTitle>用户管理</PageTitle></font>
</li>
<li>推荐放在页面组件（<code>.razor</code>）顶部，靠近 <code>@page</code> 指令，便于维护和语义清晰</li>
<li>支持表达式和参数绑定，例如：<br><font color="#666"><PageTitle>编辑 @user.Name</PageTitle></font>
</li>
<li>多个 <code>PageTitle</code> 同时存在时，以**最靠近当前<a style="color:#f60; text-decoration:underline;" title="路由" href="https://www.php.cn/zt/18172.html" target="_blank">路由</a>组件的那个为准**；嵌套路由中，子组件的 <code>PageTitle</code> 会覆盖父布局的</li>
</ul>
<h3>配合 HeadContent 实现更复杂的 head 控制</h3>
<p>当需要添加 meta、link、script（仅限静态 head 脚本）等标签时，要用 <code>HeadContent</code> 组件，它也依赖 <code>HeadOutlet</code> 才能生效。</p>
<ul>
<li>示例：添加 SEO 描述和 Open Graph 标签<br><font color="#666"><HeadContent><br>
<meta name="description" content="@description" /><br>
<meta property="og:title" content="@pageTitle" /><br>
</HeadContent></font>
</li>
<li>
<code>HeadContent</code> 可在任意组件中使用，但同样要确保有 <code>HeadOutlet</code> 接收</li>
<li>注意：动态 script 标签（含 src 或内联 JS）在 Blazor 中不推荐放这里，可能执行时机不可控；应改用 <code>IJSRuntime</code> 延迟注入</li>
</ul>
<p>基本上就这些。用好 <code>HeadOutlet</code> + <code>PageTitle</code> 就能解决大部分页面标题管理需求，加上 <code>HeadContent</code> 就可覆盖基础 SEO 场景。不复杂但容易忽略 —— 记得检查 <code>HeadOutlet</code> 是否已就位。</p>
