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

Question

我有主模板，我在此处加载所有样式

@{
    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在这个子页面加载，因为这个子页面没有轮播所以如何实现不加载所有样式并根据页面添加一些条件加载样式有什么想法或建议吗？

Answer 1

一个原因是不要将所有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"/>
}

希望对您有所帮助！

Answer 2

解决这个问题的另一种方法是（除了已接受的答案之外）使用 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 方法的位置呈现。

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

How to load different styles on different pages in Umbraco

asp.net

asp.net-mvc

umbraco

razor

umbraco7