为EPiServer块生成div元素的CSS类

Question

我有一个ContentArea与若干浮动块。EPiServer自动将每个块包装在div-元素中，这是编辑模式正常工作所必需的。因此，最初的一个div变成了三个嵌套的div:内容区、子元素包装器和块视图。

是否可以从块视图中添加CSS类到子元素包装器?那么今天是什么呢:

div.ContentArea > div > div.my-class

就变成:

div.ContentArea > div.my-class

Answer 1

如果你想避免额外的换行符，可以看看这篇文章

我猜这是你应该渲染的:

@Html.PropertyFor(x => x.Teasers, 
new
    {
        ChildrenCustomTagName ="div", 
        ChildrenCssClass = "my-class"
    })

不要在局部视图中呈现换行div元素，只呈现"内部内容"(因为换行div元素将被呈现，而不管内容区域中的每个条目)。

不能排除在呈现内容区域时呈现的包装元素，因为这会破坏EPiServer中的页上编辑功能。

Answer 2

我最终使用了一个自定义内容区域渲染器:

public class CustomContentAreaRenderer : ContentAreaRenderer 
{
    protected override string GetContentAreaItemCssClass(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem)
    {
        var tag = GetContentAreaItemTemplateTag(htmlHelper, contentAreaItem);
        return string.Format("block {0} {1} {2}", GetTypeSpecificCssClasses(contentAreaItem, ContentRepository), "my own classes", tag);
    }
}

我用下面的代码将自定义渲染器应用于容器:

container.For<ContentAreaRenderer>().Use<CustomContentAreaRenderer>();

谢谢你的帮助!

Answer 3

在这里你可以读到关于扩展contentarea的所有内容，以及为什么它们是这样工作的。http://blog.tech-fellow.net/2015/06/11/content-area-under-the-hood-part-3/

Answer 4

可以通过覆盖默认内容区域来完全删除额外的div。我在这里写了相当详细的教程EpiServer 7:如何在内容区删除它们的额外div ?

采用这种方法是相当极端的。如果你只在一两个地方有这个问题，那么我建议你使用这样的

@Html.PropertyFor(x => Model.MainContentArea, new 
{
    CustomTag = "ul",
    CssClass = "list",
    ChildrenCustomTagName = "li",
    ChildrenCssClass = "list_item",
    Tag = string.Empty
})

如何使用PropertyFor在视图中渲染EpiServer块