如何在Blazor WASM中为Razor页面添加独立布局（CSS/JS）

实现方案 #

你已经通过SampleLayout为Test目录下的页面创建了独立布局，只需在该布局文件中引入资源，即可实现仅对该组页面生效的样式与脚本，完全不影响原有页面。

1. 确认资源存放路径 #

将你的资源按以下结构放到wwwroot目录下：

• 图片：wwwroot/assets/img（存放apple-icon.png、favicon.ico）
• CSS：wwwroot/assets/css（存放bootstrap.min.css、templatemo.css、custom.css、fontawesome.min.css）
• JS：wwwroot/assets/js（存放jquery-1.11.0.min.js、jquery-migrate-1.2.1.min.js、bootstrap.bundle.min.js、templatemo.js、custom.js）

2. 修改SampleLayout.razor文件 #

替换SampleLayout.razor的内容为以下代码，已将原示例的英文注释翻译成中文：

@inherits LayoutComponentBase

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="assets/img/apple-icon.png">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/templatemo.css">
    <link rel="stylesheet" href="assets/css/custom.css">

    <!-- 渲染布局样式后加载字体样式 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
</head>

<div>
    @Body
</div>

<!-- 开始引入脚本 -->
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/templatemo.js"></script>
<script src="assets/js/custom.js"></script>
<!-- 结束引入脚本 -->

3. 关键细节说明 #

• CSS加载：在布局的<head>中添加样式链接，Blazor会确保这些样式仅在使用该布局的页面生效，不会污染原有页面的样式。
• 脚本加载：将脚本放在@Body之后，保证页面DOM元素渲染完成后再执行脚本，避免出现元素未找到的错误。
• 路径正确性：所有资源路径基于wwwroot根目录，直接写assets/xxx即可，无需添加~/或wwwroot/前缀。

验证步骤 #

运行项目后访问/Test/Home，通过浏览器开发者工具的网络面板检查资源是否成功加载，同时验证页面样式和脚本功能是否正常工作。若出现404错误，检查资源是否放置在正确的目录下。

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