Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Rename macro 'n' to 'mgnl-n'.

 

HTML Wrap
tagspan
classnumbered-children

本教程有以下几个步骤:

Children Display
page我的第一个模板

 组件是编辑者能够整体编辑、删除、移动的最小的内容单元。将组件看作一个整体,这样当您打开一个典型的Magnolia CMS页面时,您可以凭这个感觉轻易的找到组件。最简单的组件可能是只有一个标题和相应内容组成的整体。

每个组件都可以用在几个页面和几个区域里。在区域里,编辑者可以从一个列表中选择组件。这个列表仅显示该区域可用的组件,这是在availableComponents节点里定义的。

Table of Contents

创建组件定义

textBlock组件是一个非常简单的例子,用来绘制编辑者输入的任何文字。

Advanced Tables - Table Plus
heading0
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse

节点名

Mgnl f
modules

 

Mgnl f
templating

 

Mgnl f
templates

 

Mgnl f
components

 

Mgnl n
textBlock

 

mgnl-p
dialog

templating:textBlock

mgnl-p
renderType

freemarker

mgnl-p
templateScript

/templates/components/textBlock.ftl

mgnl-p
title

Text Block

创建组件脚本

组件脚本绘制组件内容。在我们的示例组件中,内容仅为简单的文字。脚本从内容库中读取文字并绘制出来。

...

这个脚本会从当前内容对象中绘制text属性的值。在本例中,内容对象不是Hello页面节点,而是组件节点。

创建组件对话框

组件对话框使编辑者能够编辑组件内容。您可以在标准模板套件(STK > 对话框定义 > /components)中找到很多有关组件对话框的示例

Advanced Tables - Table Plus
heading0
multiplefalse
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

Mgnl f
modules

 

Mgnl f
templating

 

Mgnl f
dialogs

 

Mgnl n
textBlock

 

Mgnl n
actions

 

Mgnl n
cancel

 

mgnl-p
class

info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition

mgnl-p
label

Cancel

Mgnl n
save

 

mgnl-p
class

info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition

mgnl-p
label

Save changes

Mgnl n
form

 

Mgnl n
tabs

 

Mgnl n
text

 

Mgnl n
fields

 

Mgnl n
text

 

mgnl-p
class

info.magnolia.ui.form.field.definition.TextFieldDefinition

mgnl-p
label

Component text

mgnl-p
rows

5

mgnl-p
label

Text block

为页面添加组件

现在您已经准备好了为页面添加组件所需的一切:定义好的组件,组件脚本,组件对话框,并且在main区域内可用。

...

组件内容被存放在website内容库。每个组件都有一个内容节点及其包含的属性,您可以在JCR浏览器中看到。

下一步:激活到公共实例