代码之家 › 专栏 › 技术社区 › Gayathri Mohan

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

umbraco7 umbraco razor asp.net-mvc asp.net

1

Gayathri Mohan · 技术社区 · 7 年前

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

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

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

例如,我不想要旋转木马。css加载到此子页面,因为此子页面中没有旋转木马,所以如何实现不加载所有样式并根据页面添加一些条件来加载样式有何想法或建议?

2 回复 | 直到 7 年前

1

2

Divyang Desai Jonny B'Good 7 年前

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

希望这有帮助!

2

0

Mario Lopez 7 年前

另一种解决方法是(除了公认的答案外)使用 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 方法。