???
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 ，分為三個步驟：
第一步、創建 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></xsl:value-of>
disable-output-escaping="yes" select="root/dynamic-element[@name='caption-2']/dynamic-content"/>
1、 ? 對 image 類型的元素輸出時的格式如下：
? <xsl:attribute name="src"> </xsl:attribute>
??? <xsl:value-of></xsl:value-of>
disable-output-escaping="yes" select="root/dynamic-element[@name='image-2']/dynamic-content"/>
?
第三步、創建 Article ，添寫基本信息后，在 Structure 一欄選擇 test ，對應的 Template 一欄也選擇 test 即可，然后在對應的元素域里添入合適的文本或者圖片，點擊預覽即可以看到如下界面，確定無問題后，點擊保存或者保存并發布按鈕即可完成 content 的定制。
通過以上三個步驟，我們就實現了定制 content 的功能。使用 Journal Portlet ，我們可以定制任何不同風格的 content 來展示必要的信息。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
