

Widgets (OrchardCore.Widgets)

小部件（OrchardCore.Widgets）

Widgets are content items of a specific category (stereotype) that can be rendered in custom locations of a page.

窗口小部件是特定类别（构造型）的内容项，可以在页面的自定义位置呈现。

The Widgets modules provides a Widget stereotype and some templates to render it. Widgets are used by different modules that need to

Widgets模块提供了一个Widget构造型和一些模板来呈现它。小部件由需要的不同模块使用

render specialized pieces of content like Layers or Forms.

渲染专门的内容，如图层或表单。

Creating custom Widgets

创建自定义小部件

Many types of Widgets can be created and the default recipes do create some custom ones like Paragraph, Blockquote, MediaWidget that you can

可以创建许多类型的小部件，默认的配方会创建一些自定义的小部件，如Paragraph，Blockquote，MediaWidget，你可以

use as examples.

用作例子。

Widgets are content items, and as such they can be composed of content fields and content parts. For instance the Paragraph widget that is included with the

窗口小部件是内容项，因此它们可以由内容字段和内容部分组成。例如，包含在内的Paragraph小部件

TheBlogTheme recipe is made out of an Html field with a Wysiwyg editor.

TheBlogTheme配方由带有Wysiwyg编辑器的Html字段组成。

Widgets can then be composed from the Admin UI during the lifetime of the site, from migrations files to include them as part of custom modules, or recipe files

然后，可以在站点生命周期内从Admin UI组合窗口小部件，从迁移文件组成窗口小部件，将其作为自定义模块或配方文件的一部分包含在内

when a site is set up. The only requirement to create a Widget is to mark a content type with the Widget stereotype. By doing so the different services that look

设置网站时。创建Widget的唯一要求是使用Widget构造型标记内容类型。通过这样做，看起来不同的服务

for Widgets will treat this content item in accordance. This is how the Layers module, or the Page editor can display the list of available Widget types.

对于小部件，将按照处理此内容项。这就是图层模块或页面编辑器可以显示可用窗口小部件类型列表的方式。

Theming

主题化

Because Widget is a stereotype, all Widget content items are rendered from a main shape named Widget.

因为Widget是一个刻板印象，所有Widget内容项都是从名为Widget的主要形状渲染的。

This main shape's template has access to these properties:

此主要形状的模板可以访问这些属性：

| Property | Description |

|财产|说明|

| --------- | ------------ |

| --------- | ------------ |

| Model.ContentItem | The Widget content item. |

| Model.ContentItem | Widget内容项。 |

| Model.Content | A list of inner shapes to display. It's populated by all the fields and parts the widget is composed of. |

| Model.Content |要显示的内部形状列表。它由窗口小部件组成的所有字段和部分组成。 |

It also contains these specific zones, which are not used most of the time and can be ignored when creating custom templates for

它还包含这些特定区域，这些区域在大多数时间不使用，在创建自定义模板时可以忽略

the website front-end.

网站前端。

| Property | Description |

|财产|说明|

| --------- | ------------ |

| --------- | ------------ |

| Model.Header | The shapes to render in the widget's header. |

| Model.Header |要在窗口小部件的标题中呈现的形状。 |

| Model.Meta | The shapes to render in the widget's metadata zone. |

| Model.Meta |要在窗口小部件的元数据区域中呈现的形状。 |

| Model.Footer | The shapes to render in the widget's footer. |

| Model.Footer |要在窗口小部件的页脚中呈现的形状。 |

The shape also contains all the properties common to all shapes like Classes, Id and Attributes.

形状还包含所有形状共有的所有属性，如Classes，Id和Attributes。

Customizing Widget templates

自定义Widget模板

The Widget shape is used to render a Widget. The default template will render something like this:

Widget形状用于渲染Widget。默认模板将呈现如下内容：

<div class="widget-container">

 <font color=#0099ff size=4 face="黑体"><div class =“widget-container”></font> 


    <div class="widget-container-title">

        <h2>A Paragraph</h2>

    </div>

    <div class="widget widget-html-widget">

        <div class="widget-body">

            <p>This is a paragraph</p>

        </div>

    </div>

</div>

 <font color=#0099ff size=4 face="黑体"></ DIV></font> 

If the HTML contains <div class="widget-container"> then your widget has been rendered by the Layers modules which will add this automatically as it needs to

如果HTML包含<div class =“widget-container”>那么你的小部件已由层模块呈现，它将根据需要自动添加

be able to render a title, and uses it as a container for both the title and the widget's actual content.

能够呈现标题，并将其用作标题和小部件实际内容的容器。

The actual template for the Widget shape can be found in src/OrchardCore.Modules/OrchardCore.Widgets/Views/Widgets.cshtml but can be simplified to this:

Widget形状的实际模板可以在src / OrchardCore.Modules / OrchardCore.Widgets / Views / Widgets.cshtml中找到，但可以简化为：

<div class="{{ Model.Classes | join " "}}">

 <font color=#0099ff size=4 face="黑体"><div class =“{{Model.Classes | join”“}}”></font> 


    <div class="widget-body">

    {{ Model.Content | shape_render }}

    </div>

</div>

 <font color=#0099ff size=4 face="黑体"></ DIV></font> 

<div class="@String.Join(" ", Model.Classes.ToArray())">

 <font color=#0099ff size=4 face="黑体"><div class =“@ String.Join（”“，Model.Classes.ToArray（））”></font> 


    <div class="widget-body">

    @await DisplayAsync(Model.Content)

    </div>

</div>

 <font color=#0099ff size=4 face="黑体"></ DIV></font> 

Alternates are available per Content Type.

每种内容类型都有替代品。

| Definition | Template | Filename|

|定义|模板|文件名|

| ---------- | --------- | ------------ |

| ---------- | --------- | ------------ |

| Widget__[ContentType] | Widget__Paragraph | Widget-Paragraph.cshtml |

| Widget __ [ContentType]| Widget__Paragraph | Widget-Paragraph.cshtml |

Customizing the Widget_Wrapper template

自定义Widget_Wrapper模板

As mentioned in the previous section, the Layers module uses a template to wrap the widgets that it renders and insert a custom title for each of them.

如上一节所述，图层模块使用模板来包装它呈现的小部件，并为每个小部件插入自定义标题。

The actual template for this wrapper shape can be found in src/OrchardCore.Modules/OrchardCore.Layers/Views/Widget.Wrapper.cshtml.

这个包装器形状的实际模板可以在src / OrchardCore.Modules / OrchardCore.Layers / Views / Widget.Wrapper.cshtml中找到。

A common requirement is to remove these tags, which can be done by creating this template instead:

一个常见的要求是删除这些标记，这可以通过创建此模板来完成：

{{ Model.Content | shape_render }}

 <font color=#0099ff size=4 face="黑体">{{Model.Content | shape_render}}</font> 

@await DisplayAsync(Model.Content)

 <font color=#0099ff size=4 face="黑体">@awa DisplayAsync（Model.Content）</font> 

Optionally you change

您可以选择更改

| Definition | Template | Filename|

|定义|模板|文件名|

| ---------- | --------- | ------------ |

| ---------- | --------- | ------------ |

| Widget_Wrapper__[ContentType] | Widget_Wrapper__Paragraph | Widget-Paragraph.Wrapper.cshtml |

| Widget_Wrapper __ [ContentType]| Widget_Wrapper__Paragraph | Widget-Paragraph.Wrapper.cshtml |

| Widget_Wrapper__Zone__[ContentZone] | Widget_Wrapper__Zone__Footer | Widget-Zone-Footer.Wrapper.cshtml |

| Widget_Wrapper__Zone __ [ContentZone]| Widget_Wrapper__Zone__Footer | Widget-Zone-Footer.Wrapper.cshtml |