OrchardCore.DisplayManagement¶
本文介绍了显示管理和放置文件。
放置文件¶
任何模块或主题都可以包含一个可选的 placement.json
文件,提供自定义放置逻辑。
注意
placement.json
文件必须添加到模块或主题的根目录中。
格式¶
placement.json
文件包含一个对象,其属性是形状类型。 这些属性中的每一个都是放置规则的数组。
在以下示例中,我们描述了 TextField
和 Parts_Contents_Publish
形状的放置。
{
"TextField": [ ... ],
"Parts_Contents_Publish" : [ ... ]
}
放置规则包含两组数据:
- 过滤器 - 定义要针对哪些特定形状进行定位。
- 放置信息 - 匹配过滤器时要应用的放置信息。
目前,您可以按以下方式过滤形状:
- 它们的原始类型,即放置规则的属性名称,例如
TextField
或ContentPart
。 displayType
(可选):显示类型,例如Summary
和Detail
是最常见的。differentiator
(可选):区分用于多个元素重用的形状类型的差异器,例如字段名称。
注意
形状类型(placement.json 属性名称)不一定与您的部件类型对齐。 例如,如果您创建了一个没有部件驱动程序的内容部件 GalleryPart
,则其形状类型将是 ContentPart
,差异器为 GalleryPart
。 因此,您的 placement.json 将如下所示
{
"ContentPart": [{
"place":"SomeZone"
"differentiator":"GalleryPart"
}],
"GalleryPart": [{...}], //这不起作用,除非您为该部分注册了驱动程序
}
可以通过实现 IPlacementNodeFilterProvider
来添加其他自定义过滤器提供程序。
对于从内容项构建的形状,您可以通过以下内置过滤器提供程序进行过滤:
contentType
(可选):单个 ContentType 或 Stereotype,或与前面的值开头匹配的 ContentTypes 和/或 Stereotypes 的数组。 可以使用*
匹配以前面的值开头的所有内容类型,例如Art*
。contentPart
(可选):应该包含从中构建形状的内容项的单个 ContentPart 或 ContentParts 的数组。path
(可选):应该匹配请求路径的单个路径或路径的数组。
放置信息包括:
place
(可选):呈现区域中形状的实际位置。 值为-
将隐藏形状,以/
开头的值将将形状移动到布局区域。alternates
(可选):要添加到当前形状元数据的备用形状类型数组。wrappers
(可选):用于当前形状的包装器形状类型数组。shape
(可选):替换形状类型。
{
"TextField": [
{
"displayType": "Detail",
"differentiator": "Article-MyTextField",
"contentType": [ "Page", "BlogPost" ],
"contentPart": [ "HtmlBodyPart" ],
"path": [ "/mypage" ],
"place": "Content",
"alternates": [ "TextField_Title" ],
"wrappers": [ "TextField_Title" ],
"shape": "AnotherShape"
}
],
}
放置优先级¶
形状选择的放置信息基于以下顺序:
- 主启动项目(这可以充当超级主题)
- 活动主题(如果您正在查看前端,则为活动前端主题;如果您正在查看管理,则为活动管理主题)
- 模块(按依赖项排序)
放置字段¶
字段具有自定义差异器,因为它们的形状在许多地方使用。 它是使用它所包含的 Part
的名称和 Field
的名称构建的。 例如,如果将名为 MyField
的字段添加到 Article
内容类型中,则其差异器将为 Article-MyField
。 如果将名为 City
的字段添加到 Address
部分中,则其差异器将为 Address-City
。
形状差异器¶
您可以在模板文档中找到有关形状差异器的信息。
形状¶
什么是形状?¶
有关形状的所有信息都在此视频中。
渲染形状¶
您可以使用 <shape>
标记助手来呈现任何形状,甚至传递属性。
@{
var intValue = 1;
var stringValue = "a";
}
@await DisplayAsync(await New.MyShape(Foo: 1, Bar: "a"))
<shape type="MyShape" foo="1" bar="a" />
<shape type="MyShape" prop-foo="1" bar="a" />
<shape type="MyShape" prop-foo="@intValue" prop-bar="@stringValue" />
{% assign customShape = "MyShape" | shape_new %}
{% shape_add_properties customShape my_string: "String Test 3", my_int: 1 %}
{{ customShape | shape_render }}
{% "MyShape" | shape_new | shape_properties: my_int: 3, my_string: "String Test 3" | shape_render %}
要呈现内容项,您还可以使用以下标记助手。
注意:您需要将 @addTagHelper *,OrchardCore.Contents.TagHelpers
添加到 _ViewImports.cshtml
文件中,以加载此标记助手。 确保您的项目文件还引用了 OrchardCore.Contents.TagHelpers。
<contentitem alias="alias:main-menu" display-type="Detail" />
{% contentitem alias: "alias:main-menu", display_type: "Detail" %}
操作形状元数据¶
可以使用 metadata
标记助手作为形状标记助手的子级来操作形状的元数据。 元数据标记助手允许您:
- 更改显示类型
- 添加、删除或清除备用
- 添加、删除或清除包装器
元数据标记助手示例:
<menu alias="alias:main-menu">
<metadata display-type="summary">
<clear-alternates />
<add-alternate name="Menu_Alternate1" />
<add-alternate name="Menu_Alternate2" />
<remove-alternate name="Menu_Alternate1" />
<clear-wrappers />
<add-wrapper name="Menu_Wrapper1" />
<add-wrapper name="Menu_Wrapper2" />
<remove-wrapper name="Menu_Wrapper2" />
</metadata>
</menu>
日期时间形状¶
DateTime
¶
使用请求的时区呈现 Date
和 Time
值。
参数 | 类型 | 描述 |
---|---|---|
Utc |
DateTime? |
要呈现的日期和时间。 如果未指定,将使用当前时间。 |
Format |
string |
.NET 格式字符串。 如果未指定,则使用长格式 dddd,MMMM d,yyyy h:mm:ss tt 。 可以在 https://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.110).aspx 中找到接受的格式。 |
标记助手示例:
<datetime utc="@contentItem.CreatedUtc" />
TimeSpan
¶
呈现 Date
和 Time
间隔的相对文本表示形式。
参数 | 类型 | 描述 |
---|---|---|
Utc |
DateTime? |
初始日期和时间。 如果未指定,将使用当前时间。 |
Origin |
DateTime? |
当前日期和时间。 如果未指定,将使用当前时间。 |
标记助手示例:
<timespan utc="@contentItem.CreatedUtc" />
结果:
3 天前
编辑器形状放置¶
编辑器形状支持分组放置,这允许您分组编辑器形状,以创建各种内容编辑器布局。
支持的分组¶
- 选项卡
- 卡片
- 列
每个分组都可以单独工作,也可以是渐进的,因此选项卡可以支持卡片和/或列,卡片可以支持列。
通过应用修饰符和组名来创建分组。
修饰符¶
- 选项卡修饰符为
#
- 卡片修饰符为
%
- 列修饰符为
|
每个修饰符都支持组的位置修饰符,格式为 ;
,列支持列宽度的附加修饰符,为 _
。
要应用位置修饰符或列宽度修饰符,请将适当的值应用于每个组名。
没有分组的字段或部分将在其他字段应用分组时落入默认的 Content
组中。
示例¶
在以下示例中,我们将 MediaField_Edit
形状放置在名为 Media
的选项卡中,并将 Media
选项卡放在第一位,将 Content
选项卡放在第二位。
{
"MediaField_Edit" : [
{
"place" : "Parts:0#Media;0",
"contentType": [
"Article"
]
}
],
"HtmlField_Edit" : [
{
"place": "Parts:0#Content;1",
"contentType": [
"Article"
]
}
]
}
在以下示例中,我们将 MediaField_Edit
形状放置在名为 Media
的卡片中,并将 Media
卡片放在第一位,将 Content
卡片放在第二位。
{
"MediaField_Edit" : [
{
"place" : "Parts:0%Media;0",
"contentType": [
"Article"
]
}
],
"HtmlField_Edit" : [
{
"place": "Parts:0%Content;1",
"contentType": [
"Article"
]
}
]
}
在以下示例中,我们将 MediaField_Edit
形状放置在名为 Media
的列中,并将 Media
列放在第一位,将 Content
列放在第二位。
我们还指定 Content
列将占用默认 12 列网格的 9 列。
{
"MediaField_Edit" : [
{
"place" : "Parts:0|Media;0",
"contentType": [
"Article"
]
}
],
"HtmlField_Edit" : [
{
"place": "Parts:0|Content_9;1",
"contentType": [
"Article"
]
}
]
}
注意
默认情况下,列将在 md
断点处响应式断开,并将修饰符解析为 col-md-9
。
如果要更改断点,则还可以指定 Content_lg-9
,它将解析为 col-lg-9
。
动态部分放置¶
在以下示例中,我们将动态部分(没有驱动程序的部分,即在 json 中创建的部分) GalleryPart
放置在名为 MyGalleryZone
的区域中。 在显示该部分内的内容模板时,我们将执行:
=== Content-Product.Detail.html
@await DisplayAsync(Model.MyGalleryZone)
动态部分使用带有 Part 名称的不同分化器进行详细显示,因此放置文件如下所示:
{
"ContentPart": [
{
"place": "MyGalleryZone",
"differentiator": "GalleryPart"
}
]
}
此设置将在调用 DisplayAsync
的位置显示您的模板(例如 GalleryPart.cshtml
或 GalleryPart.Detail.cshtml
)。
如果我们想在摘要显示内容模板(或任何其他不是 Detail
显示类型的模板)中显示相同的部分:
=== Content-Product.Summary.html
@await DisplayAsync(Model.MyGalleryZone)
我们的放置将如下所示(请注意,ContentPart 名称的后缀为 _Summary
;相应更改您的后缀):
{
"ContentPart_Summary": [
{
"place": "MyGalleryZone",
"differentiator": "GalleryPart"
}
]
}
此设置将在调用 DisplayAsync
的位置显示您的模板(例如 GalleryPart.cshtml
或 GalleryPart.Summary.cshtml
)。
视频¶
该文档由ChatGPT 4 翻译