CSS class 在为 EPiServer 块生成的 div 元素上

Question

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

是否可以将 CSS 类添加到块视图的子元素包装器中？那么今天是几号:

div.ContentArea > div > div.my-class

变成：

div.ContentArea > div.my-class

Answer 1

如果您想避免额外的包装 divs，请查看 this post

我猜这就是您应该呈现的内容：

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

不要在部分视图中呈现环绕 div 元素，仅呈现 "inner content"（因为环绕 div 元素将被呈现，无论内容区域中的每个项目如何。

无法排除呈现内容区域时呈现的环绕元素，因为这会破坏 EPiServer 中的页面编辑功能。

希望这对您有所帮助并且足够清楚。

Answer 2

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

Answer 3

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

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

CSS class 在为 EPiServer 块生成的 div 元素上

CSS class on generated div element for EPiServer blocks

asp.net-mvc

episerver

episerver-8