**************
有關 liferay 5.23 的 Web Content List 與 Web Content Display 的研究
也就是 structure 和 template 的問題.
structure: 顧名思義,結構.假如說,你要在頁面顯示一個內容,包括題目,內容,備註等等,都在這兒定義.
template: 同理,樣式.也就是控制你的structure 所顯示的樣子.
**************
1. Add Page
新建一個頁面,如 MyHome
2. Add Application - Content Management
Web Content List
Web Content Display
將這兩個 portlet 拖到頁面中
3. Control Panel - Portal - Communities 添加一個新的社區 MyHome
Control Panel - Content - 最頂部，Content for - 選擇 MyHome
WebContent - Add WebContent
填寫自己想填進去的內容,可以有源代碼模式或者直接編輯
注: ID 可以自己填寫,也可以系統自動生成
Save And Approve
4. Structures - Add Structure
我選擇 ID: Autogenerate ID
Name: MyFirstStructure
Description: This is my first structure
Permissions: Public
**********
走到這步,注意了.因爲頁面顯示的structure, 我們可以在這兒自定義field.
點擊 Add Row
填入field name, 並選擇類型
例如 Title | Text
Content | Text Area(HTML)
點擊 Save
(Add Row 旁邊有個 Launch Editor 的按鈕,等下解釋)
**********
5. 有Structure, 那就有template
選中剛剛建立好的 structure, 點擊 Action,選擇 Add template
ID, Name, Description, Permissions 都和structure 差不多,隨自己意思或者跟着自己的規劃.
*********
重點:
Language Type 有三種語言可供你選擇:VM, XSL, CSS 我選擇了VM (VM也就是 velocity模板語言)
旁邊有個按鈕 Launch Editor,這是一個說明例子
裏面包含一個文件,內容如下:
##
## Velocity Transform Template
##
## All dynamic elements in a structure can be accessed as a Velocity variable.
##
## The given structure:
##
## <root>
## <dynamic-element name="main-text" type="text_area">
## <dynamic-element name="sub-image" type="image"></dynamic-element>
## <dynamic-element name="sub-text" type="text"></dynamic-element>
## </dynamic-element>
## <dynamic-element name="more-text" type="text_area"></dynamic-element>
## <dynamic-element name="ms-list" type="multi-list">
## <dynamic-element name="chocolate" type="Chocolate"></dynamic-element>
## <dynamic-element name="strawberry" type="Strawberry"></dynamic-element>
## <dynamic-element name="vanilla" type="Vanilla"></dynamic-element>
## </dynamic-element>
## </root>
##
## The dynamic element "main-text" can be accessed in the following ways:
##
## $main-text.getName() - The name "main-text"
## $main-text.getData() - The data in the article for main-text
## $main-text.getType() - The type "text-area"
## $main-text.getChildren() - A collection with two nodes (sub-image and
## sub-text) that can be used in the #foreach clause
## $main-text.getSiblings() - A collection of elements with the name
## "main-text". This will only return more than one
## element if this element is repeatable.
##
## One special accessor exists for elements of type "multi-list":
##
## $ms-list.getOptions() - A collection with up to three string entries
## (chocolate, strawberry, or vanilla) that can be used
## in the #foreach clause
##
## Another special accessor exists for elements of type "link_to_layout":
##
## $linkToPage.getUrl() - The URL that links to the selected page in the current
## community, organization, etc.
##
## The variable $journalTemplatesPath can be used to include
## another Journal template, e.g. #parse ("$journalTemplatesPath/LAYOUT-PARENT")
##
## The variable $viewMode specifies which mode the article is being viewed in.
## For example, if $viewMode evaluates to "print", that means the user clicked
## the print icon to view this article.
##
** 解釋下這個文件,root 部分的,在創建 structure 的時候,如果你不想手動的Add Row,那就點擊旁邊的
Launch Editor 按鈕,在裏面可以自己定義. 類似上面的例子.
$main-text.getName() 這些句子,看看註釋就明白了,main-text 也就是file name.
這個例子中的 <dynamic-element name="main-text" type="text_area">,所以就要這樣取值.
而我上面添加到的是Title, 所以,應該寫爲 $Title.getName()
Content $Content.getType()
其餘同理.
*********
6. OK,看完了這個例子.那我們就開始建立我們自己的VM文件
template_test.vm
***********
<style>
.title {
border: 0px solid silver;
font-family: Verdana;
font-size: small;
color: red;
font-weight: 700;
}
.content {
border: 0px solid silver;
font-family: Verdana;
font-size: x-small;
color: black;
}
</style>
<table width="100%">
<tr>
<td class="title">$Title.getData()</td>
</tr>
<tr>
<td class="content">$Content.getData()</td>
</tr>
</table>
***********
保存,再導入.
點擊 Save and continue
當你看到 URL : http://localhost:8080/c/journal/get_template?groupId=16&templateId=11301
WebDAV URL : http://localhost:8080/tunnel-web/secure/webdav/liferay.com/guest/journal/Templates/11301
出現值的時候,就說明創建成功了.
7. Back to guest 返回到本人創建的頁面 MyHome
在 Web Content Display 中點擊 Add Web Content （注意此時的默認界面，等下與我們自己做的對比）
在右邊的 Form and Presentation 中 選擇 Structure的 select 按鈕，選擇自己剛剛建好的My First Structure
Template同理.
然後具體內容自己任意發揮.
完成之後 點擊 Save and Approve，當然也也可以點擊 Preview 預覽下.
8. 當完成這些步驟的時候，Back to guest 返回到本人創建的頁面 MyHome
Web Content List ，選擇 Configuration 配置
Community ：選擇 MyHome
...
...
... 餘下幾項都是實現控制每頁有多少記錄，怎麼顯示，排序之類的.
選擇好之後，這個步驟沒有Save 按鈕，直接點擊右上角的 Return to Full Page
然後就可以看到MyHome下有多少條記錄了.
嘗試去點擊不同的記錄看看...不同的效果吧~
// 非常感謝Martin 的鼎力幫助
// 本文倉促，如有錯誤，還請見諒
// 大家多多指教