如何在 Umbraco 的不同页面上加载不同的样式答案

【问题标题】：How to load different styles on different pages in Umbraco如何在 Umbraco 的不同页面上加载不同的样式
【发布时间】：2018-06-01 12:07:46
【问题描述】：

我有主模板，我在这里加载所有样式

@{
    Layout = null;
}

<!doctype html>
<html>
    <head>

        <link rel="stylesheet" href="~/css/socialiconstyle.css" />
        <link rel="stylesheet" href="~/css/bootstap/css/bootstrap3.css" />
        <link rel="stylesheet" href="~/css/carousel.css" />
        <link rel="stylesheet" href="~/css/umasterclass.css" /> 

        <script type="text/javascript" src="/scripts/jquery.min.js"></script>
        <script type="text/javascript" src="/scripts/bootstrap.min.js"></script>

    </head>

子页面在哪里：

@{
    Layout = "Master1.cshtml";
}

<div class="internal-wrapper">
   <p>@Umbraco.Field("headingSubline")</p>
    @RenderBody()

</div>

由于母版页包含所有样式表，所以这里正在加载。

比如我不希望carousel.css加载到这个子页面，因为这个子页面没有carousel所以如何实现不加载所有样式并根据页面添加一些条件来加载样式有什么想法或建议吗？

【问题讨论】：

标签： asp.net asp.net-mvc razor umbraco umbraco7

【解决方案1】：

解决此问题的另一种方法是（除了已接受的答案）是使用 ClientDependency，它已经是 Umbraco 的一部分。使用这个包的好处是它可以最小化和捆绑你的资产。

包含你的css和javascript的方式是这样的：

@{Html.RequiresCss("~/Css/ColorScheme.css");}
@{
 Html.RequiresJs("~/Js/jquery.js")
     .RequiresJs("~/Js/jquery.validation.js")
     .RequiresJs("~/Js/myCoffeeLib.coffee");
 }

要将它们包含到您的页面中，请使用：

@Html.RenderJsHere()
@Html.RenderCssHere()

回到问题。您可以从部分视图中添加其他文件，只需添加 @{Html.RequiresCss("~/Css/carousel.css");}

这将在您的布局中使用 RenderCssHere 方法的位置呈现。

【讨论】：

嗨@Mario Lopez有什么方法可以为每个页面维护一组css文件的配置文件，我们可以从那里加载文件，因为当前的实现仍然加载carousel.css文件到其他页面，因为内部子布局使用主页文件作为父文件
检查我的答案，您可以将{Html.RequiresCss("~/Css/carousel.css");} 放在您的局部视图中，并且只有在您渲染该局部视图时才会包含它。您可以在一个文件夹中包含一堆文件：@{Html.RequiresCssFolder("~/Css/Widgets/");}

【解决方案2】：

为什么不将所有 css 文件包含到布局页面中，例如，carousel.css 被一两个视图页面使用，然后只加载该 css 文件，而不是全局加载该页面。

布局页面：

<head>

    <link rel="stylesheet" href="~/css/socialiconstyle.css" />
    <link rel="stylesheet" href="~/css/bootstap/css/bootstrap3.css" />
    <link rel="stylesheet" href="~/css/umasterclass.css" /> 

    @RenderSection("css", false)

    <script type="text/javascript" src="/scripts/jquery.min.js"></script>
    <script type="text/javascript" src="/scripts/bootstrap.min.js"</script>

</head>

查看页面正在使用该 css：

@section css {
    <link href="@Url.Content("~/css/carousel.css")" rel="stylesheet"/>
}

希望这会有所帮助！

【讨论】：

嗨@Div 我在我的 mater.cs html 中尝试过这种方式，但 css 甚至没有加载到 master
我必须将它包含在我不想包含的子页面的母版页中
是的，母版页需要小时候不需要的轮播
但这是临时解决方案 ryt ，如果另一个页面我不想包含 umasterclass.css 那么我必须再创建一个母版页，这样会重复，有没有其他方法根据页面级别配置css并在某些页面上仅显示某些CSS？
嗨@DIV 是的，我做到了:)