Blazor Server项目共享布局与资源加载机制咨询

A) 共享布局文件夹的工作原理 #

Blazor Server项目里的Shared文件夹下的布局组件（比如默认的MainLayout.razor）能被自动识别并应用，核心是全局导入指令和布局继承机制：

• 全局默认布局：项目根目录的_Imports.razor文件里，默认包含@layout MainLayout这条指令。这条指令会作用于所有没有单独指定布局的Razor组件（包括页面），所以你不用在每个页面里手动引用布局，Blazor会自动把页面内容嵌套到MainLayout的@Body位置。
• 布局组件的本质：布局组件继承自LayoutComponentBase基类，这个基类提供了Body属性，对应@Body标记的位置，用来渲染被嵌套的页面内容。
• 自定义布局切换：如果某个页面要使用其他布局，直接在页面顶部加@layout 自定义布局组件名即可；要是想全局换默认布局，修改_Imports.razor里的@layout指令就行。

B) CSS与JS文件的跨页面共享方式 #

CSS文件共享 #

• 全局CSS：项目的wwwroot/css/site.css是默认全局样式文件，它通过Pages/_Host.cshtml里的<link href="css/site.css" rel="stylesheet" />标签引入。因为_Host.cshtml是Blazor应用的宿主页面，所有组件最终都会渲染在这个页面的DOM中，所以这里引入的CSS会对所有页面生效。
• 组件样式共享：如果是组件的.razor.css隔离样式，默认只作用于当前组件。要让它共享给子组件或全局，可以用::deep伪类穿透隔离，或者直接把共享样式写到全局CSS文件里。

JS文件共享 #

• 全局JS：和CSS类似，共享的JS函数可以放在wwwroot/js/site.js这类文件里，然后在_Host.cshtml里通过<script src="js/site.js"></script>引入（建议放在<body>底部，或者加defer属性，确保DOM加载完成后执行）。这样所有组件都能通过IJSRuntime调用这些全局JS函数。
• 注意事项：如果是组件级的.razor.js隔离JS，默认只能被当前组件调用，要共享的话就放到全局JS文件里，或者通过模块导入的方式在多个组件里引用同一个JS模块。

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