Blazor 根据请求路径设置 CSS 文件

Question

我正在尝试即时切换 css 文件 - 基于用户所在的网络系统的哪个部分（即，如果用户在 mydomain/students/page 上，则页面加载 students.min.css，而不是 site.min.css).

我试过 _Host.cshtml:

@page "/"
@namespace FIS2withSyncfusion.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;

    //sniff the requst path and switch the stylesheet accordingly
    string path = Request.Path;

    string css = "site.min.css";

    if (path.ToLowerInvariant().StartsWith("/students"))
    {
        css = "students.min.css";
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Martin's Blazor Testing Site</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/@(css)" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

    <script type="text/javascript">
        function saveAsFile(filename, bytesBase64) {
            if (navigator.msSaveBlob) {
                //Download document in Edge browser
                var data = window.atob(bytesBase64);
                var bytes = new Uint8Array(data.length);
                for (var i = 0; i < data.length; i++) {
                    bytes[i] = data.charCodeAt(i);
                }
                var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
                navigator.msSaveBlob(blob, filename);
            }
            else {
                var link = document.createElement('a');
                link.download = filename;
                link.href = "data:application/octet-stream;base64," + bytesBase64;
                document.body.appendChild(link); // Needed for Firefox
                link.click();
                document.body.removeChild(link);
            }
        }
    </script>
</head>

<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <script src="_framework/blazor.server.js"></script>

    <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>
</body>

</html>

但是，它似乎在第一次加载网站后并没有命中此代码块；这意味着他们首先登陆的页面表示整个网站的样式表。

我是否必须将此代码块放在每个页面上，还是有其他方法可以做到这一点？

Answer 1

经过进一步实验，我发现添加这个块：

@{
    //sniff the requst path and switch the stylesheet accordingly
    string path = navManager.Uri;

    Uri uri = new Uri(path);

    List<string> parts = uri.Segments.ToList();

    string module = parts[1].ToLowerInvariant().Trim('/');

    string css = "site.min.css";

    if (module == "students")
    {
        css = "students.min.css";
    }
}

<head>
    <link rel="stylesheet" href="css/@(css)" />
</head>

到 MainLayout.razor 的顶部完美运行 - 只要您从 _Host.cshtml

中删除等效块

Answer 2

您可以采用的另一种方法是创建响应您想要的不同样式的组件。从那里你有两个选择：

创建与组件专用的 css 关联。 From the docs
在组件的代码块中创建一个 class 切换，类似于 NavMenu 的工作方式。

Blazor 根据请求路径设置 CSS 文件

Blazor set CSS file based on request path

css

blazor

blazor-server-side