有没有更优雅的方法将两个bootsraps/css混合在一个项目中？
我有一个Blazor应用程序(服务器预提交(，它有两个区域：
- 客户的最终用户(订购服务(
- 管理员(管理股票，价格…(-仅适用于管理员用户
例如，我使用bootstrap 5开发了Admin部分(实际上，我使用了MudBrazor及其自己的bootstrap(。
我需要"；最终用户"；网站的一部分，其中将使用完全不同的引导程序(https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/(。
我可以将2个网站拆分为2个不同的"网站"；Net projects"；，但客户更喜欢单一的应用程序，我还没有找到如何实现这一点的文档示例，所以我将_Host.cshtml更改为"；捕获"；管理页面(并将其指向页面Admin.cshtml(
@page "/"
@namespace MultiAreaDemo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
@if (Request.Query["admin"].FirstOrDefault() == "1")
{
Html.RenderPartial("Admin.cshtml", null, ViewData);
return;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MultiAreaDemo - End user</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/space-enduser/bootstrap.min.css" />
<link href="MultiAreaDemo.styles.css" rel="stylesheet" />
</head>
.....
并创建了Admin.cshtml页面(指向"Admin"bootstrap css(：
@page "/admin"
@namespace MultiAreaDemo.Pages.Admin
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MultiAreaDemo - ADMIN </title>
<base href="~/" />
<link rel="stylesheet" href="css/admin/bootstrap.min.css" />
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
所有"；管理员"；页面需要以"admin"为前缀。例如：
@page "/admin"
<h3>AdminHome</h3>
....
因此，页面https://localhost:44398/admin正在使用css/admin/bootstrap.min.css，并且https://localhost:44398/正在使用css/bootstrap/space-enduser/bootstrap.min.css
希望能有所帮助。如果有人知道更优雅的方式，我将不胜感激。
您可以切换CSS和标题中的几乎任何其他内容，如下所示：
定义您的Css链接如下，给它一个id:
<link id="dynamicCssLink" rel="stylesheet" href="/css/site.css" />
定义一些包含在你的网站中的JS代码-我通常使用site.JS:
window.DynamicCss = {
setCss: function (elementId, url) {
var link = document.getElementById(elementId);
if (link === undefined) {
link = document.createElement(elementId);
link.id = elementId;
document.head.insertBefore(link, document.head.firstChild);
link.type = 'text/css';
link.rel = 'stylesheet';
}
link.href = url;
return true;
}
}
为JS互操作代码定义一个类：
public class InteropLibrary
{
protected IJSRuntime JSRuntime { get; }
public InteropLibrary(IJSRuntime jsRuntime)
=> JSRuntime = jsRuntime;
public ValueTask<bool> SetDynamicCss(string elementId, string url)
=> JSRuntime.InvokeAsync<bool>("DynamicCss.setCss", elementId, url);
}
在服务中注册
builder.Services.AddScoped<InteropLibrary>();
创建备用site.css。Mine-site-black.css-看起来像这样：
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color:black !important;
color: white !important;
}
....
我的测试Index页面如下所示：
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<div class="m-2">
<button class="btn @this.buttonColour" @onclick="SwitchCSS">@this.buttonLabel</button>
</div>
@code {
[Inject] private InteropLibrary? interopLibrary { get; set; }
private bool isDark;
private string css => isDark ? "/css/site-black.css" : "/css/site.css";
private string buttonLabel => isDark ? "Switch To Light" : "Switch To Dark" ;
private string buttonColour => isDark ? "btn-light" : "btn-dark" ;
private async Task SwitchCSS()
{
this.isDark = !this.isDark;
await interopLibrary!.SetDynamicCss("dynamiccsslink", this.css);
}
}
示例实现在索引页和计数器页之间切换样式表
布局.razor:
@inherits LayoutComponentBase
..... Mark-up
@code {
[Inject] private InteropLibrary? interopLibrary { get; set; }
private string _stylesheet = "/css/site.css";
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await interopLibrary!.SetDynamicCss("dynamiccsslink", _stylesheet);
await base.OnInitializedAsync();
}
}
DarkLayout.razor
@inherits LayoutComponentBase
..... Mark-up
@code {
[Inject] private InteropLibrary? interopLibrary { get; set; }
private string _stylesheet = "/css/dark-site.css";
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await interopLibrary!.SetDynamicCss("dynamiccsslink", _stylesheet);
await base.OnInitializedAsync();
}
}
索引
@page "/"
@layout MainLayout
<PageTitle>Index</PageTitle>
.....
计数器
@page "/counter"
@layout DarkLayout
<PageTitle>Counter</PageTitle>
....