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 

模板組件介紹

 

ZKEACMS模板組件的核心思想在於內容於視圖分離，內容的展示形式所有由視圖控制，可在不改變內容的狀況下，經過切換視圖達到不一樣的顯示效果。

一個模板組件，能夠由多個分組構成，每一個分組都有本身的顯示模板。組以前能夠垂直排列，或者水平刪格排列（Bootstrap列），以下圖：

所以，模板是模板組件的核心，那麼如何擴展？開在人員如何製做模板呢？

一塊兒來作一個簡單的模板

看到這個圖，你看到了什麼？「品牌」【標題】，「請選擇手機品牌」【段落，文本】，「蘋果，華碩....」【不少個圖片】，把它們組合起來即是了。

數據庫

首先，往模板表裏面寫一條數據，做爲已安裝的模板：

INSERT INTO dbo.SectionTemplate
        ( TemplateName ,
          Title ,
          Thumbnail ,
          ExampleData ,
          Status
        )
VALUES  ( N'SectionTemplate.Brand' , 
          N'品牌' , 
          N'Thumbnail\SectionTemplate.Brand.png' , 
          N'Thumbnail\SectionTemplate.Brand.xml' , 
          0          
        )

TemplateName

模板名稱，對應TemplateName.cshtml這個視圖文件。

Title

模板的顯示名稱

Thumbnail

模板的縮略圖

ExampleData

一個XML文件，用因而建立分組的時候加載的示例數據。

添加視圖文件

打開項目Easy.CMS.Section，右鍵點擊Views添加視圖，並輸入名稱：SectionTemplate.Brand，選中「建立爲分部視圖」

 

打開新建的視圖，先輸入一些必要信息：

@using Easy.CMS.Section
@using Easy.CMS.Section.Models
@model SectionGroup

接下來，咱們將從分組中取出標題，段落，圖片等內容：

<div class="section-group-default text-center">
    @{
        Html.RenderContent(Model.SectionTitle);
        Html.RenderContent(Model.Paragraph);
    }
    <div class="row">
        @foreach (SectionContent content in Model.SectionImages)
        {
            <div class="col-md-2">
                <div style="border:1px solid #eee">
                    @{
                        Html.RenderContent(content);
                    }
                </div>
            </div>
                    }
    </div>
</div>

 

 

添加縮略圖

在Thumbnail目錄下添加一個名爲SectionTemplate.Brand.png的縮略圖

接下來，咱們來使用它試一下，在頁面中添加一個模板組件，添加一個分組，模板選擇「品牌」：

而後添加，標題，段落，一些圖片試一下：

先只加幾個圖片，而後保存一下看一下結果吧：

是否是有樣子了呢？

最後，爲了方便用戶使用，在添加組件的時候能夠直接添加示例數據，所以，須要在Thumbnail目錄下，加一個名爲SectionTemplate.Brand.xml的文件，並輸入以下示例內容：

<?xml version="1.0" encoding="utf-8" ?>
<required>
  <item type="Easy.CMS.Section.Models.SectionContentTitle">
    <property name="InnerText"><![CDATA[品牌]]></property>
    <property name="Href"><![CDATA[]]></property>
  </item>
  <item type="Easy.CMS.Section.Models.SectionContentParagraph">
    <property name="HtmlContent"><![CDATA[<p>請選擇手機品牌</p>]]></property>
  </item>
  <item type="Easy.CMS.Section.Models.SectionContentImage">
    <property name="ImageSrc"><![CDATA[/Content/Images/logo_min.png]]></property>
    <property name="ImageAlt"><![CDATA[]]></property>
    <property name="ImageTitle"><![CDATA[]]></property>
    <property name="Href"><![CDATA[]]></property>
    <property name="Width"><![CDATA[]]></property>
    <property name="Height"><![CDATA[]]></property>
  </item>
  <item type="Easy.CMS.Section.Models.SectionContentImage">
    <property name="ImageSrc"><![CDATA[/Content/Images/logo_min.png]]></property>
    <property name="ImageAlt"><![CDATA[]]></property>
    <property name="ImageTitle"><![CDATA[]]></property>
    <property name="Href"><![CDATA[]]></property>
    <property name="Width"><![CDATA[]]></property>
    <property name="Height"><![CDATA[]]></property>
  </item>
  <item type="Easy.CMS.Section.Models.SectionContentImage">
    <property name="ImageSrc"><![CDATA[/Content/Images/logo_min.png]]></property>
    <property name="ImageAlt"><![CDATA[]]></property>
    <property name="ImageTitle"><![CDATA[]]></property>
    <property name="Href"><![CDATA[]]></property>
    <property name="Width"><![CDATA[]]></property>
    <property name="Height"><![CDATA[]]></property>
  </item>
</required>

什麼時候會用到這個XML文件？當選中加載示例數據時使用【非必須】：

打包分享模板

打包分享模板很是簡單：

注：模板縮略圖，請使用他人也可訪問的網絡圖片，由於打包的時候，並不會打橫這些圖片。

打包好之後，在設計頁面，或者在模板組件的選擇模板頁面進行上傳安裝：