提问人：ktary 提问时间：1/21/2022 更新时间：2/10/2022 访问量：140
食人鱼CMS块内部和外部容器div
Piranha CMS block inside and outside container div
问：
从代码模板中，我们有：
<div class="block @block.CssName()">
<div class="container">
@Html.DisplayFor(m => block, block.GetType().Name)
</div>
</div>
它使我的内容块始终在容器类中。如何制作一个灵活的页面，我们可以在容器内外放置一个块
答：
1赞
Dave Mueller
2/5/2022
#1
您可以检查块类型，并在 div 上放置一个除了“容器”之外的其他类，如下所示：
<!-- language: lang-razor -->
<div class="block @block.CssName()">
<div class="@(block.GetType().Name == "MySpecialBlock" ? "myspecialclass" : "container") ">
@Html.DisplayFor(m => block, block.GetType().Name)
</div>
</div>
或者你可以完全删除 div：
<!-- language: lang-razor -->
<div class="block @block.CssName()">
@Html.DisplayFor(m => block, block.GetType().Name)
</div>
目的是编辑每个 DisplayTemplate .cshtml 文件，并在其中添加包装器 div。即 /Views/Cms/DisplayTemplates/HtmlBlock.cshtml ：
<div class="myWrapperClass">
@Html.Raw(Model)
</div>
注意：如果这样做，您可能希望编辑各种块类型模板中的每一个，以添加某种包装器。
另一种可能性是编写一个帮助程序类，用于检查块类型并根据每个块类型自动返回特定类。
using Piranha.Extend;
namespace MyProject.Classes
{
public static class Helper
{
public static string getWrapperCssClassForBlockType (Block block)
{
string blockName = block.GetType().Name;
string className = "";
switch(blockName)
{
case "HtmlBlock":
className = "row";
break;
case "QuoteBlock":
className = "myQuoteClass";
break;
default:
className = "container";
break;
}
return className;
}
}
}
然后只需从模板中调用帮助程序方法：
@using MyProject.Classes;
@foreach (var block in Model.Blocks)
{
var wrapperClass = Helper.getWrapperCssClassForBlockType(block);
<div class="block @block.CssName()">
<div class="@wrapperClass">
@Html.DisplayFor(m => block, block.GetType().Name)
</div>
</div>
}
评论
0赞
ktary
2/6/2022
所以食人鱼标准块会留在容器内吗？
0赞
Dave Mueller
2/7/2022
是的。您在问题中没有提到标准块类型。该解决方案假定你已创建不需要“容器”类的自定义块类型。如果要基于每个块类型进行控制，可以从模板中完全删除 div，并将包装 div 放在每个块的相应 DisplayTemplate .cshtml 文件中。
0赞
Dave Mueller
2/7/2022
我已经编辑了答案，以提供一些其他选项，说明如何实现特定于块类型的包装类，而不必总是在包装器上使用“容器”。
0赞
ktary
2/10/2022
#2
所以最后我通过从模板中删除容器来做到这一点：
<div class="block @block.CssName()">
<!--<div class="container">-->
@Html.DisplayFor(m => block, block.GetType().Name)
<!--</div>-->
</div>
它使所有标准块都位于容器外部。接下来，我制作了一个容器组块。任何块都可以位于此容器组块内，但标准组块（如库和列）除外。幸运的是，它是开源的，因此我们可以通过修改 cshtml 模板将自己的列和库组块设在容器内。我不知道 piranha.org 是怎么做到的
但我认为我的解决方案符合我的目的
评论