ZKEACMS template component extension and zkeacms template component

ZKEACMS template component extension and zkeacms template component
Preface

If you do not know ZKEACMS, you may want to know about it first.

ASP. net mvc open-source website construction system ZKEACMS recommendation, from this site "fight"

Official Address: http://www.zkea.net/zkeacms

: Https://github.com/SeriaWei/ASP.NET-MVC-CMS/releases

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

Open source Chinese community: http://git.oschina.net/seriawei/ASP.NET-MVC-CMS

Demo address: http://demo.zkea.net/

Background: http://demo.zkea.net/admin

Username and password: admin

Template component Introduction

 

The core idea of the ZKEACMS template component is that the content is separated from the view, and the display form of the content is all controlled by the view. You can switch the view to achieve different display effects without changing the content.

A template component can be composed of multiple groups. Each group has its own display template. Groups can be arranged vertically or horizontally (Bootstrap columns), such:

Therefore, templates are the core of template components. How can we expand them? How do people create templates?

Make a simple template together

What do you see when you see this image? "Brand" [title], "Please select mobile phone brand" [paragraph, text], "Apple, Asus .... "[a lot of pictures]. combine them.

Database

First, write a piece of data into the template table as the installed template:

Insert into dbo. sectionTemplate (TemplateName, Title, Thumbnail, ExampleData, Status) VALUES (n' SectionTemplate. brand ', n' Brand', n' Thumbnail \ SectionTemplate.Brand.png ', n' Thumbnail \ SectionTemplate. brand. xml', 0)

TemplateName

Template Name, which corresponds to the View File TemplateName. cshtml.

Title

Template display name

Thumbnail

Thumbnail of the template

ExampleData

An XML file that is used to load sample data when a group is created.

Add View File

Open the project Easy. CMS. Section, right-click Views to add a view, enter the name SectionTemplate. Brand, and select "create as a branch view"

 

Open the newly created view and enter necessary information:

@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>

 

 

Add thumbnail

Upload a thumbnail named sectiontemplate.brand.png in the thumbnaildirectory.

Next, let's try it. Add a template component on the page, add a group, and select "brand" as the template ":

Then, add the title, paragraph, and some pictures to give it a try:

Add only a few images, and then save the results:

Does it look like it?

Finally, for ease of use, you can directly add sample data when adding components. Therefore, you need to add a SectionTemplate under the Thumbnail directory. brand. xml file, and enter the following sample content:

<? Xml version = "1.0" encoding = "UTF-8"?> <Required> <item type = "Easy. CMS. Section. Models. SectionContentTitle"> <property name = "InnerText"> <! [CDATA [brand]> </property> <property name = "Href"> <! [CDATA []> </property> </item> <item type = "Easy. CMS. Section. Models. SectionContentParagraph"> <property name = "HtmlContent"> <! [CDATA [<p> select the mobile phone brand </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>

When will this XML file be used? When loading sample data, use [not required ]:

Package A sharing Template

Packaging and sharing templates is very simple:

Note: For template thumbnails, please use network images accessible to others, because they are not broken during packaging.

After packaging, upload and install the template on the design page or on the template component selection template page: