CMS Kit：动态小部件

CMS Kit提供了一个动态小部件，用于在页面和博客文章内容中渲染先前由软件开发的组件。这意味着您可以在静态内容中使用动态内容。下面将介绍具体实现方式。系统提供两种定义小部件的方式：代码编写和UI操作。

添加小部件

首先我们将演示如何通过手动编写代码在页面和博客文章内容中使用小部件系统。

定义视图组件：

[Widget]
[ViewComponent(Name = "CmsToday")]
public class TodayViewComponent : AbpViewComponent
{
    public IViewComponentResult Invoke()
    {
        return View("~/ViewComponents/Today.cshtml",
         new TodayViewComponent());
    }
} 

@model Volo.CmsKit.ViewComponents.TodayViewComponent

<p>欢迎使用今日组件</p>
<p>@DateTime.Now.ToString()</p>

在YourModule.cs中进行配置：

Configure<CmsKitContentWidgetOptions>(options =>
    {
        options.AddWidget("Today","CmsToday");
    }); 

现在您可以通过编写代码添加小部件： [Widget Type="Today"]

完成上述步骤后，您可以在下方截图右侧看到输出效果。

通过UI添加

现在介绍第二种方式——使用UI操作。 由于手动编写定义可能出错，我们新增了简化小部件使用的功能。在编辑器右侧，您会看到如下图所示的定制化W按钮用于添加动态小部件。请注意这是设计模式，保存后需要在视图模式下查看页面。此外，编辑器的预览选项卡将在后续功能中支持快速查看小部件配置效果。

通过UI添加带参数的小部件

让我们通过添加名为format的参数来改进上述示例。通过此功能，我们可以在多种场景下使用小部件系统（本文不做展开）。这些示例可通过依赖注入和从数据库获取值进行扩展，但我们将使用基础示例。我们将添加format参数来自定义日期格式。

[Widget]
[ViewComponent(Name = "CmsToday")]
public class TodayViewComponent : AbpViewComponent
{
    public string Format { get; set; }

    public IViewComponentResult Invoke(string format)
    {
        return View("~/ViewComponents/Today.cshtml",
         new TodayViewComponent() { Format = format });
    }
} 

@model Volo.CmsKit.ViewComponents.TodayViewComponent

<p>欢迎使用今日组件</p>
<p>@DateTime.Now.ToString(Format)</p>

定义格式组件：

[Widget]
[ViewComponent(Name = "Format")]
public class FormatViewComponent : AbpViewComponent
{
    public IViewComponentResult Invoke()
    {
        return View("~/ViewComponents/Format.cshtml",
         new FormatViewModel());
    }  
}

public class FormatViewModel
{
    [DisplayName("在组件中设置日期格式")]
    public string Format { get; set; }
}

重要提示：要正确获取属性，应在Razor页面上设置name属性，或使用ABP组件（ABP会自动处理）。

@using Volo.CmsKit.ViewComponents
@model FormatViewModel

<div>
    <abp-input asp-for="Format" />
</div>

Configure<CmsKitContentWidgetOptions>(options =>
    {
        options.AddWidget("Today", "CmsToday", "Format");
    }); 

在此图中，选择小部件后（根据配置自动切换，本例为Today，其参数名称为parameterWidgetName，值为Format）您将看到下一个部件。输入或选择值后点击添加，编辑器中会显示带下划线的输出。图片右侧可预览输出效果。

如果编码错误（错误值或拼写错误），您可以手动编辑此输出。即使小部件无法显示，页面仍可正常查看。

配置选项

要配置小部件，请在YourModule.cs中定义以下代码：

Configure<CmsKitContentWidgetOptions>(options =>
    {
        options.AddWidget(widgetType: "Today", widgetName: "CmsToday", parameterWidgetName: "Format");
    }); 

详细参数说明：

• widgetType 面向最终用户，使用更易读的名称。以下粗体字代表widgetType： [Widget Type="Today" Format="yyyy-dd-mm HH:mm:ss"]

• widgetName 指代码中使用的视图组件名称

• parameterWidgetName 用于在添加小部件模态框中显示编辑器组件。 从列表框中选择小部件类型后（当前仅定义Format），系统会自动渲染此小部件。该参数仅在需要参数化UI时使用