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

问题描述 投票:1回答:2

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

@{
    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加载到这个子页面,因为这个子页面中没有轮播,所以如何实现不加载所有样式并根据页面添加一些条件来加载样式任何想法或建议?

asp.net asp.net-mvc razor umbraco umbraco7
2个回答
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"/>
}

希望这可以帮助!


0
投票

解决这个问题的另一种方法是(除了已接受的答案)使用的是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方法进行渲染。

© www.soinside.com 2019 - 2024. All rights reserved.