Note |
---|
If you for some reason do not have the Stories App, add this to your webapp pom: Code Block |
---|
<dependency>
<groupId>info.magnolia.editor</groupId>
<artifactId>stories-app</artifactId>
<version>1.1.5</version>
</dependency |
|
Expand |
---|
title | Create the module structure we will need: |
---|
|
Code Block |
---|
| cd light_modules
mkdir -p block-examples/blocks
mkdir -p block-examples/templates/blocks
mkdir block-examples/i18n
mkdir -p block-examples/decorations/stories-app/apps/
mkdir -p block-examples/templates/pages |
Alternatively, use mgnl create-light-module and add the structure you need. |
Expand |
---|
title | Add the block definition: |
---|
|
|
from https://documentation.magnolia-cms.com/display/DOCS56/Developing+and+rendering+custom+content+blocks
cd my-light-modules
mkdir -p block-examples/blocks
dfdfdd
Code Block |
---|
language | yaml |
---|
title | block-examples/blocks/quote.yaml |
---|
| class: info.magnolia.editor.block.stock.FieldSetBlockDefinition
templateId: block-examples:blocks/quote
fields:
quotation:
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
rows: 3
citedPerson:
class: info.magnolia.ui.form.field.definition.TextFieldDefinition |
|
---|
Expand |
---|
title | Add the template definition: |
---|
|
Code Block |
---|
language | yaml |
---|
title | block-examples/templates/blocks/quote.yaml |
---|
| templateScript: /block-examples/templates/blocks/quote.ftl
renderType: freemarker |
|
Expand |
---|
title | Add the template script: |
---|
|
Code Block |
---|
language | yaml |
---|
title | block-examples/templates/blocks/quote.ftl |
---|
| [#if content.quotation?has_content]
<blockquote>
<p>${cmsfn.decode(content).quotation}</p>
[#if content.citedPerson?has_content]<cite>${content.citedPerson}</cite>[/#if]
</blockquote>
[/#if] |
|
Expand |
---|
title | (Optional) Add internationalized labels: |
---|
|
Code Block |
---|
title | block-examples/i18n/example-blocks_en.properties |
---|
| blocks.quote.label=Quote
quote.quotation.label=Quote
quote.citedPerson.label=Cited person |
Code Block |
---|
language | yaml |
---|
title | block-examples/i18n/example-blocks_de.properties |
---|
| blocks.quote.label=das Zitat
quote.quotation.label=das Zitat
quote.citedPerson.label=zitierte Person |
|
Expand |
---|
title | Decorate the Stories app to allow it to use our new block type: |
---|
|
Code Block |
---|
title | block-examples/decorations/stories-app/apps/stories.yaml |
---|
| subApps:
editor:
contentDefinition:
blocks:
- text
- image
- video
- externalLink
- quote |
|
Expand |
---|
|
Image Added Add a title and lead text: Image Added Add the url: Image Added Add a new quote block: Image Added Add the quote: Image Added Click Save and Publish |
Expand |
---|
title | Add page template definition and script to use the block: |
---|
|
Code Block |
---|
language | yaml |
---|
title | block-examples/templates/pages/block.yaml |
---|
| renderType: freemarker
title: Block Page
templateScript: /block-examples/templates/pages/block.ftl |
Code Block |
---|
language | yaml |
---|
title | block-examples/templates/pages/block.ftl |
---|
| [#assign testContent = cmsfn.contentByPath("/test", "stories") /]
<!DOCTYPE html>
<html xml:lang="en" lang="en" class="no-js">
<head>
[@cms.page /]
</head>
<body>
[#if testContent?hasContent]
[#if testContent.title?hasContent]
<h2>${testContent.title}</h2>
[/#if]
[#if testContent.lead?hasContent]
<h4>${testContent.lead}</h4>
[/#if]
[#assign blocks = cmsfn.children(testContent, "mgnl:block") /]
[#list blocks as block]
[@cms.block content=block /]
[/#list]
[/#if]
</body>
</html> |
|
Expand |
---|
title | Add a page using the new block type: |
---|
|
Image Added Click Next and then preview the page you just added. The quote you entered earlier should be displayed: Image Added |
Expand |
---|
title | Resulting directory structure: |
---|
|
Code Block |
---|
| block-examples/
├── blocks
│ └── quote.yaml
├── decorations
│ └── stories-app
│ └── apps
│ └── stories.yaml
├── i18n
│ ├── example-blocks_de.properties
│ └── example-blocks_en.properties
└── templates
├── blocks
│ ├── quote.ftl
│ └── quote.yaml
└── pages
├── block.ftl
└── block.yaml |
|
YZ