背景:我想避免为我的主页创建一个Alternate Layout,我想保持“The Theme Machine”区域和布局完好无损,实际上“主题”大多数都使用纯CSS.所以我需要有选择地将CSS定位到特定的“页面”,包括,最重要的是,主页.最简单的方法是将一个类添加到包装整个布局的布局包装“div”中.我可以通过覆盖Document.cshtml文件向“body”元素添加一个类,但我真的认为在Layout.chstml文件中工作更加清晰,并利用Model.Classes将所需的CSS类添加到“开放”标签.
我现在正在做这样的事情:
string area = Model.DesignatedAreaField; Model.Classes.Add(string.IsNullOrWhiteSpace(area) ? "home" : area); Model.Id = "layout-wrapper"; var tag = Tag(Model,"div"); // using Tag so the layout div gets the classes,id and other attributes added to the Model
我知道区域不会剪切,因为主页和其他页面都在同一区域,而Model.DesignatedAreaField实际上为主页或其他页面返回一个空字符串.所以,最后,上面的代码总是会生成以下标记(我在主页上显示3个tripels):
<div class="home tripel-123" id="layout-wrapper">
我希望只有在显示主页时才能添加“home”CSS类.一些伪代码如下:
string wrapperCss = IsHomepage ? 'home' : Model.GetUrlPathOrSomethingUniqueForThePath(); Model.Classes.Add(wrapperCss);
这将允许我,例如,使主要内容缩小并向右浮动,并将tripels放在其左侧(这就是主页设计应该如何,但我不想写一个完整的不同布局对于家庭,如果我可以用简单的,有针对性的CSS做同样的事情).
更新:连接Bertrand的答案
Bertrand的回答允许我根据URL为包装DIV添加一个类.他没有提到它(因为Orchard对他来说是第二天性:-)但是你必须在Layout.cshtml文件中添加一个include并相应地更改“my”代码:
@using Orchard.Utility.Extensions; { /* omitted for brevity,everything in between is the same as in the Theme's Machine layout file */ string area = WorkContext.HttpContext.Request.Path.HtmlClassify(); area = string.IsNullOrWhiteSpace(area) ? "home" : area; Model.Classes.Add("url-" + area);
它导致以下类被添加到封闭div中:
1)显示主页时:
<div class="url-orchard-local- tripel-123" id="layout-wrapper">
<div class="url-orchard-local-products" id="layout-wrapper">
我的URL在我的开发机器上看起来像这样,在Visual Studio的webserver中运行:
http://localhost:30320/OrchardLocal/ or http://localhost:30320/OrchardLocal/Products
我不打赌我的生活,但我坚信“OrchardLocal”部分一旦发布就会改变生产,让我说,发布到Azure服务器……所以我已经抢先将代码更改为:
string area = WorkContext.HttpContext.Request.Path.HtmlClassify(); if (area.LastOrDefault() == '-') { area = "home"; } Model.Classes.Add("url-" + area);
当“主页”显示时,这会导致此类:
<div class="url-home tripel-123" id="layout-wrapper">
(实际上我已经将代码上面的代码滥用了一些与lambda运算符混合的三元组:-)
我推断HtmlClassify将返回以“ – ”结尾的“类”的唯一时间是它是主页…或者网站的“根”……我可能错了!