Question

我有一个带有多个浮动块的 ContentArea 。 EPiServer会自动将每个块包装在 div 元素中，这对于编辑模式正常运行是必需的。那么最初一个 div会变成三个嵌套div：内容区域，子元素包装器和块视图。

是否可以从块视图中向子元素包装器添加CSS类？那么今天是什么：

div.ContentArea > div > div.my-class

变为：

div.ContentArea > div.my-class

Answer 1

如果您想避免额外的换行div，请查看this post

我的猜测是你应该呈现的内容：

@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

在这里，您可以阅读有关内容区域的所有内容，以及它们为何如此工作。 http://blog.tech-fellow.net/2015/06/11/content-area-under-the-hood-part-3/

Answer 4

可以通过覆盖默认内容区域来完全删除额外的div。我在这里写了一篇详细的教程EpiServer 7 : Extra divs in content area how to remove them ?

采用这种方法是非常极端的。如果你只在一两个地方遇到这个问题，那么我建议你使用这样的东西

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

您可以在此处详细了解这些属性的工作原理：How To Render EpiServer Blocks In Your Views Using PropertyFor

EPiServer块生成的div元素的CSS类

4 个答案: