Orchardcms 如何为Orchard布局创建自定义容器元素？

我正在使用Orchard 1.9.3，并学习了一些关于如何在Orchard中创建自定义法线元素的教程。我找不到任何关于创建容器元素的专门信息，所以我在源代码中查找了一些信息，到目前为止，我已经了解了以下内容：

元素/程序.cs

公共类过程：容器
{
公共重写字符串类别
{
获取{返回“内容”；}
}
公共重写字符串ToolboxIcon
{
获取{return“\uf0cb”；}
}
公共覆盖本地化字符串描述
{
获取{return T（“步骤的集合”）；}
}
公共覆盖布尔编辑器
{
获取{return false；}
}
}

驱动程序/ProcedureElementDriver.cs

公共类ProcedureElementDriver:ElementDriver{}

服务/程序重构图

公共类ProcedureModelMap:LayoutModelMapBase{}

查看/LayoutEditor.Template.Procedure

@使用Orchard.Layouts.ViewModels；

程序
@显示（）
@显示（新的.LayoutEditor\u模板\u属性（ElementTypeName:“过程”））




@T（“在此处拖动一个步骤”）
@显示（新的.LayoutEditor\u模板\u子项（））

所有这些或多或少都是从Row元素复制的。我现在有了一个

过程

元素，我可以将它从工具箱拖到我的布局上，但它不是用我的模板呈现的，即使我可以用这种方式覆盖其他布局元素的模板，而且我仍然不能将任何子元素拖到其中。我曾希望仅仅从

容器继承就可以做到这一点

我本质上只是想创建一个限制性更强的行和列对，以便对任意内容列表应用一些自定义样式。我如何告诉Orchard一个过程只能包含在列中，并且它应该接受
步骤
（或其他元素）作为子元素
 通过查看，我找到了如何制作容器和可包含元素的方法。
容器元素需要一些额外的角度代码才能工作我仍然需要帮助确定如何限制可以包含哪些元素

脚本/LayoutEditor.js

我必须用一个指令扩展LayoutEditor模块，以保存与我的元素相关的所有角度信息：

angular
.模块（“布局编辑器”）
.directive（“orcLayoutProcedure”、[“$compile”、“scopeConfigurator”、“environment”，
函数（$compile、scopeConfigurator、environment）{
返回{
限制：“E”，
作用域：{element:=“}，
控制器：[“$scope”、“$element”，
函数（$scope$element）{
scopeConfigurator.configureForElement（$scope$element）；
scopeConfigurator.configureForContainer（$scope，$element）；
$scope.sortableOptions[“axis”]=“y”；
}
],
templateUrl:environment.templateUrl（“过程”），
替换：正确
};
}
]);

Scripts/Models.js

以及Orchard的LayoutEditor使用的提供者：

var布局器；
（功能（布局编辑器）{
过程=函数（数据、htmlId、htmlClass、htmlStyle、isTemplated、子级）{
调用（此“过程”、数据、htmlId、htmlClass、htmlStyle、isTemplated）；
LayoutEditor.Container.call（this，[“Grid”，“Content”]，children）；
//this.isContainable=true；
this.dropTargetClass=“布局公共支架”；
this.toObject=函数（）{
var result=this.elementToObject（）；
result.children=this.childrenToObject（）；
返回结果；
};
};
LayoutEditor.Procedure.from=函数（值）{
var结果=新的LayoutEditor.Procedure(
价值数据，
value.htmlId，
value.htmlClass，
value.htmlStyle，
value.i示例，
LayoutEditor.childrenFrom（value.children））；
result.toolboxIcon=value.toolboxIcon；
result.toolboxLabel=value.toolboxLabel；
result.toolboxDescription=value.toolboxDescription；
返回结果；
};
LayoutEditor.registerFactory（“过程”，函数（值）{
返回LayoutEditor.Procedure.from（值）；
});
})（LayoutEditor | |（LayoutEditor={}））；

这是告诉元素它可以包含什么的行：

LayoutEditor.Container.call（this，[“Grid”，“Content”]，children）；

ResourceManifest.cs

然后我制作了一个资源清单，以便在Orchard的模块中轻松地使用这些资源

公共类资源清单：IResourceManifestProvider
{
公共void构建清单（ResourceManifestBuilder）
{
var manifest=builder.Add（）；
manifest.DefineScript（“MyModule.Models”）.SetUrl（“Models.js”）.SetDependencies（“Layouts.LayoutEditor”）；
manifest.DefineScript（“MyModule.LayoutEditors”）.SetUrl（“LayoutEditor.js”）.SetDependencies（“Layouts.LayoutEditor”、“MyModule.Models”）；
}
}

默认情况下，
.SetUrl（）
指向模块/主题中的/Scripts文件夹

处理程序/LayoutEditorShapeEventHandler.c
switch (type) {
    case "Container":
        parentClasses = [".layout-column", ".layout-common-holder:not(.layout-customcontainer)"];
        placeholderClasses = "layout-element layout-container ui-sortable-placeholder";
        break;
    case "Grid":
        parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder:not(.layout-customcontainer)"];
        placeholderClasses = "layout-element layout-container layout-grid ui-sortable-placeholder";
        break;
    case "Row":
        parentClasses = [".layout-grid"];
        placeholderClasses = "layout-element layout-container layout-row row ui-sortable-placeholder";
        break;
    case "Column":
        parentClasses = [".layout-row:not(.layout-row-full)"];
        placeholderClasses = "layout-element layout-container layout-column ui-sortable-placeholder";
        floating = true; // To ensure a smooth horizontal-list reordering. https://github.com/angular-ui/ui-sortable#floating
        break;
    case "Content":
        parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder"];
        placeholderClasses = "layout-element layout-content ui-sortable-placeholder";
        break;
    case "Canvas":
        parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder:not(.layout-container)"];
        placeholderClasses = "layout-element layout-container layout-grid ui-sortable-placeholder";
        break;}