一步一步教你如何制件 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

還有什么不明白的嗎？加入我們進一步為你解答