Liferay Portal学习笔记（二）：使用CMS

Liferay Portal 的 CMS（Content Manage System） 提供了两大功能：文档管理和文章发布。文档管理包括文档库和图片集两个 portlets ，能够提供对 Microsoft Office 文档、 PDFs 、文本文件和图片的管理；文章发布功能依靠 Liferay Portal 中的 Journal portlet 完成，它的特性是能够将数据（ data entry ）和版面设计（ Layout Design ）很轻易的分开，这就使得 content 能够复合一致的“ look and feel ”，另外， Journal portlet 提供了 content 的版本跟踪和发布流程的功能。
   

第一步、创建Structure，包含一下元素：一个text元素名为“headline”（对应图片1区域）、三个text area元素为名称分别为“body-text”（对应4区域）“caption-1”（对应2区域）“caption-2”（对应6区域）、两个image元素名称分别为“image-1”（对应3区域）和“image-2”（对应5区域）

添加完这些元素后的界面如下：

点击Launch Editor按钮，可以看到XML定义，也可以在此增删或修改元素及类型，内容如下：

< root >
   < dynamic - element name = ' headline '  type = ' text ' ></ dynamic - element >
   < dynamic - element name = ' body-text '  type = ' text_area ' ></ dynamic - element >
   < dynamic - element name = ' caption-1 '  type = ' text_area ' ></ dynamic - element >
   < dynamic - element name = ' caption-2 '  type = ' text_area ' ></ dynamic - element >
   < dynamic - element name = ' image-1 '  type = ' image ' ></ dynamic - element >
   < dynamic - element name = ' image-2 '  type = ' image ' ></ dynamic - element >
</ root >

第二步、创建 Template ，添入 ID 、 Name 、 Description 信息后，在 Structure 一栏选择上一步创建的 Structure （这里为 test ）

然后点击 Launch Editor 按钮，打开 Template 编辑窗口，按照所需要的格式定义 Template ，如下：

<? xml version = " 1.0 " ?>

< xsl:stylesheet xmlns:xsl = " http://www.w3.org/1999/XSL/Transform "  version = " 1.0 " >   
   < xsl:output method = " html "  omit - xml - declaration = " yes " />   
   < xsl:template match = " / " >  
     < table cellpadding = " 0 "  cellspacing = " 0 "  border = " 0 "  width = " 100% " >  
       < tr >  
         < td colspan = " 2 " >
           < xsl:value - of
 disable - output - escaping = " yes "  select = " root/dynamic-element[@name='headline']/dynamic-content " />
         </ td >
       </ tr >
       < tr >
         < td >
           < img >  
             < xsl:attribute name = " src " >  
               < xsl:value - of 
disable - output - escaping = " yes "  select = " root/dynamic-element[@name='image-1']/dynamic-content " />  
             </ xsl:attribute >  
           </ img >
         </ td >
         < td >
           < xsl:value - of 
disable - output - escaping = " yes "  select = " root/dynamic-element[@name='caption-1']/dynamic-content " />
         </ td >
       </ tr >
       < tr >
         < td colspan = " 2 " >
           < xsl:value - of 
disable - output - escaping = " yes "  select = " root/dynamic-element[@name='body-text']/dynamic-content " />
         </ td >
       </ tr >
       < tr >
         < td >
           < xsl:value - of 
disable - output - escaping = " yes "  select = " root/dynamic-element[@name='caption-2']/dynamic-content " />
         </ td >
         < td >
           < img >  
             < xsl:attribute name = " src " >  
               < xsl:value - of 
disable - output - escaping = " yes "  select = " root/dynamic-element[@name='image-2']/dynamic-content " />  
             </ xsl:attribute >  
           </ img >
         </ td >
       </ tr >
     </ table >  
   </ xsl:template >  
</ xsl:stylesheet >

下面对该文件进行说明：

1 、这里的 @name=’ 名称 ’ 必须要和第一步中创建 Structure 中的元素名称一致，页面格式根据需求使用 HTML 语言定义即可。

2 、对 text 、 text area 类型的元素输出时的格式如下：

<xsl:value-of

disable-output-escaping="yes" select="root/dynamic-element[@name='caption-2']/dynamic-content"/>

1、  对 image 类型的元素输出时的格式如下：

<img>

 <xsl:attribute name="src">

    <xsl:value-of

disable-output-escaping="yes" select="root/dynamic-element[@name='image-2']/dynamic-content"/>

 </xsl:attribute>

</img>

第三步、创建 Article ，添写基本信息后，在 Structure 一栏选择 test ，对应的 Template 一栏也选择 test 即可，然后在对应的元素域里添入合适的文本或者图片，点击预览即可以看到如下界面，确定无问题后，点击保存或者保存并发布按钮即可完成 content 的定制。

通过以上三个步骤，我们就实现了定制content的功能。使用Journal Portlet，我们可以定制任何不同风格的content来展示必要的信息。

 

Liferay Portal的CMS功能是通过Journal Portlet实现的，在介绍怎样使用Journal Portlet之前，有必要理解structures、templates和articles的概念，它们是Journal portlet功能的基础。

l         Structures：定于了content的类型和数量，content的类型包括text、text area、images、selection lists等

l         Templates：确定content怎样排列或摆放

l         Articles：确定每个content包含的实际的text和images

  
    我们以下图为例定义一个 content ，分为三个步骤：