Question

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

org.json

子页面位于：

@{
    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>

由于母版页包含所有样式表正在此处加载。

例如我不希望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中的不同页面上加载不同的样式

2 个答案: