一步一步教你如何制件 ZKEACMS 的扩展组件/插件

Posted 2020-08-01 ZKEASOFT

一步一步教你如何制件 ZKEACMS 的扩展组件/插件，一起来做一个路径导航的组件

前言

如果你还不知道ZKEACMS，不妨先了解一下。

ASP.NET MVC 开源建站系统 ZKEACMS 推荐，从此网站“拼”起来

官方地址：http://www.zkea.net/zkeacms

下载地址：https://github.com/SeriaWei/ASP.NET-MVC-CMS/releases

GitHub:https://github.com/SeriaWei/ASP.NET-MVC-CMS

开源中国社区:http://git.oschina.net/seriawei/ASP.NET-MVC-CMS

演示地址：http://demo.zkea.net/  

后台：http://demo.zkea.net/admin 

用户名，密码：admin 

做一个路径导航的组件：

 

添加一个组件项目

打开Modules目录（~/Modules），找到Standard文件夹，这个是一个标准的组件项目，复制一份，并把名称改为Breadcrumb 

进入Breadcrumb文件夹，并把项目名称改为Easy.CMS.Breadcrumb.csproj

使用Visual Studio打开解决方案（ZKEASOFT.CMS.Web），在Modues目录下添加一个已有项目：

找到Easy.CMS.Breadcrumb.csproj并添加:

修改名空间组件名等相关信息

打开Easy.CMS.Breadcrumb的属性，修改程序集名称和名空间为：Easy.CMS.Breadcrumb

把StandardPlug类名改为BreadcrumbPlug，并删除注册路由代码，因为现在要加的这个导航组件不需要

方法说明：

RegistRoute() 这个方法用来注册组件的路由

AdminMenu() 这个方法用来添加后端左测的菜单

InitScript() 这个方法用来整合注册脚本，方便在View中使用

InitStyle() 这个方法用来整合注册样式，方便在View中使用

接下来打开CopyItems.xml文件，并修改内容：

这个文件的作用是把DLL复制到web的bin目录，方便调试，或者也可以直接改生成目录到web的bin目录。

接下来就要开始Coding了

在Models目录下，添加一个BreadcrumbWidget的类，并添加如下代码：

namespace Easy.CMS.Breadcrumb.Models
{
    [DataConfigure(typeof(BreadcrumbWidgetMetaData))]
    public class BreadcrumbWidget : WidgetBase
    {
        public bool IsLinkAble { get; set; }
    }

    class BreadcrumbWidgetMetaData : WidgetMetaData<BreadcrumbWidget>
    {
        protected override void ViewConfigure()
        {
            base.ViewConfigure();
            ViewConfig(m => m.IsLinkAble).AsHidden();
        }
    }
}

BreadcrumbWidget继承自WidgetBase，并拥有一个自己的属性IsLinkAble，由于现在IsLinkAble暂时没用，所以把它隐藏了。

BreadcrumbWidget这个Entity，默认会对应一个名称为BreadcrumbWidget的表，该表必须要有的字段是：ID和IsLinkAble。

在Service目录下面，添加一个BreadcrumbWidgetService的类，并添加以下代码：

namespace Easy.CMS.Breadcrumb.Service
{
    public class BreadcrumbWidgetService : WidgetService<BreadcrumbWidget>
    {
        private IPageService _pageService;

        public IPageService PageService
        {
            get { return _pageService ?? (_pageService = ServiceLocator.Current.GetInstance<IPageService>()); }
        }

        private List<PageEntity> _parentPages;

        public List<PageEntity> ParentPages
        {
            get { return _parentPages ?? (_parentPages = new List<PageEntity>()); }
        }
        public override WidgetPart Display(WidgetBase widget, HttpContextBase httpContext)
        {
            GetParentPage(httpContext.GetLayout().Page);
            return widget.ToWidgetPart(ParentPages);
        }

        void GetParentPage(PageEntity page)
        {
            ParentPages.Insert(0, page);
            if (page.ParentId.IsNotNullAndWhiteSpace() && page.ParentId != "#")
            {
                var parentPage = PageService.Get(m => m.ID == page.ParentId).FirstOrDefault();
                if (parentPage != null)
                {
                    GetParentPage(parentPage);    
                }
            }
        }
    }
}

代码比较简单，目的就是为了取出当前页面的所有父页面，然后将这些页面显示出来，所以，为了，显示，我们需要添加一个View。

在Views目录下，添加一个名为Widget.Breadcrumb的视图：

@model List<Easy.Web.CMS.Page.PageEntity>
<ol class="breadcrumb">
    @for (int i = 0; i < Model.Count; i++)
    {
        if (i == Model.Count - 1)
        {
            <li class="active">@Model[i].PageName</li>
        }
        else
        {
            <li><a href="@Url.Content(Model[i].Url)">@Model[i].PageName</a></li>
        }
    }
</ol>

与系统整合

添加一个Content目录并往里面添加一张256x256的图片作为该组件的缩略图，该缩略图将会在选择组件时看到。

创建BreadcrumbWidget表

CREATE TABLE BreadcrumbWidget
    (
      ID NVARCHAR(100) PRIMARY KEY
                       NOT NULL ,
      IsLinkAble BIT NULL
    );

往CMS_WidgetTemplate表里面添加一条记录，告诉系统有一个新的组件：

INSERT INTO dbo.CMS_WidgetTemplate
        ( Title ,
          GroupName ,
          PartialView ,
          AssemblyName ,
          ServiceTypeName ,
          ViewModelTypeName ,
          Thumbnail ,
          [Order] ,
          Status
        )
VALUES  ( N\'路径导航\' ,
          N\'1.通用\' , 
          N\'Widget.Breadcrumb\' ,
          N\'Easy.CMS.Breadcrumb\' , 
          N\'Easy.CMS.Breadcrumb.Service.BreadcrumbWidgetService\' , 
          N\'Easy.CMS.Breadcrumb.Models.BreadcrumbWidget\' , 
          N\'~/Modules/Breadcrumb/Content/breadcrumb.png\' , 
          6 , 
          1
        )

运行程序试一下吧：

组件字段显示英文怎么办？直接到Language表里面去Update吧，怎么找到它们呢？

SELECT * FROM dbo.Language WHERE Module=N\'BreadcrumbWidget\'

或者在运行程序之前，用以下脚本初始化多语言文本

INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@ActionType\', 2052, N\'ActionType\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@AssemblyName\', 2052, N\'AssemblyName\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@CreateBy\', 2052, N\'CreateBy\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@CreatebyName\', 2052, N\'创建人\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@CreateDate\', 2052, N\'创建日期\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@CustomClass\', 2052, N\'CustomClass\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@CustomStyle\', 2052, N\'CustomStyle\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@Description\', 2052, N\'描述\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@FormView\', 2052, N\'FormView\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@ID\', 2052, N\'ID\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@IsLinkAble\', 2052, N\'IsLinkAble\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@IsSystem\', 2052, N\'IsSystem\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@IsTemplate\', 2052, N\'保存为模板\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@LastUpdateBy\', 2052, N\'LastUpdateBy\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@LastUpdateByName\', 2052, N\'更新人\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@LastUpdateDate\', 2052, N\'更新日期\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@LayoutID\', 2052, N\'布局\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@PageID\', 2052, N\'页面\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@PartialView\', 2052, N\'模版\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@Position\', 2052, N\'排序\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@ServiceTypeName\', 2052, N\'ServiceTypeName\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@Status\', 2052, N\'状态\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@StyleClass\', 2052, N\'自定义样式\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@Thumbnail\', 2052, N\'模板缩略图\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@Title\', 2052, N\'标题\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@ViewModelTypeName\', 2052, N\'ViewModelTypeName\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@WidgetName\', 2052, N\'组件名称\', N\'BreadcrumbWidget\', N\'EntityProperty\')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N\'BreadcrumbWidget@ZoneID\', 2052, N\'区域\', N\'BreadcrumbWidget\', N\'EntityProperty\')

 该插件已开放下载：

http://www.zkea.net/zkeacms/extend/detail?id=118

源代码：

https://github.com/SeriaWei/ASP.NET-MVC-CMS/tree/master/Easy.CMS.Web/Modules/Breadcrumb

还有什么不明白的吗？加入我们进一步为你解答