From 9b560dcb983ae2561ebea6a085a7175104bcf5bc Mon Sep 17 00:00:00 2001 From: Sebastian Koch <31919154+skoch98@users.noreply.github.com> Date: Fri, 26 Apr 2024 14:51:20 +0200 Subject: [PATCH] DOC - Improve editable documentation and make twig syntax more consistent (#16969) --- .../01_Editables/02_Areablock/02_Bricks.md | 16 +++++----- doc/03_Documents/01_Editables/04_Area.md | 10 +++---- doc/03_Documents/01_Editables/06_Block.md | 16 +++++----- doc/03_Documents/01_Editables/08_Checkbox.md | 8 ++--- doc/03_Documents/01_Editables/10_Date.md | 6 ++-- .../01_Editables/12_Relation_Many-To-One.md | 2 +- doc/03_Documents/01_Editables/14_Image.md | 6 ++-- doc/03_Documents/01_Editables/16_Input.md | 19 ++++++------ doc/03_Documents/01_Editables/18_Link.md | 6 ++-- .../01_Editables/22_Multiselect.md | 18 ++++++------ doc/03_Documents/01_Editables/24_Numeric.md | 29 ++++++++++--------- doc/03_Documents/01_Editables/25_Embed.md | 2 +- doc/03_Documents/01_Editables/28_Renderlet.md | 14 ++++----- doc/03_Documents/01_Editables/30_Select.md | 20 ++++++------- doc/03_Documents/01_Editables/36_Textarea.md | 5 ++-- doc/03_Documents/01_Editables/38_Video.md | 20 ++++++------- doc/03_Documents/01_Editables/40_WYSIWYG.md | 23 ++++++++++++++- .../01_Editables/42_Scheduled_Block.md | 6 ++-- 18 files changed, 125 insertions(+), 101 deletions(-) diff --git a/doc/03_Documents/01_Editables/02_Areablock/02_Bricks.md b/doc/03_Documents/01_Editables/02_Areablock/02_Bricks.md index a3f328b0a7d..f214ab14b65 100644 --- a/doc/03_Documents/01_Editables/02_Areablock/02_Bricks.md +++ b/doc/03_Documents/01_Editables/02_Areablock/02_Bricks.md @@ -172,10 +172,10 @@ brick metadata. ```twig /* templates/areas/iframe/view.html.twig */ -{% set urlField = pimcore_input('iframe_url') %} -{% set widthField = pimcore_numeric('iframe_width') %} -{% set heightField = pimcore_numeric('iframe_height') %} -{% set transparentField = pimcore_checkbox('iframe_transparent') %} +{% set urlField = pimcore_input("iframe_url") %} +{% set widthField = pimcore_numeric("iframe_width") %} +{% set heightField = pimcore_numeric("iframe_height") %} +{% set transparentField = pimcore_checkbox("iframe_transparent") %} {% if editmode %}
@@ -198,9 +198,9 @@ brick metadata. {% else %} {% if not urlField.isEmpty() %} - {% set transparent = 'false' %} - {% set width = '100%' %} - {% set height = '400' %} + {% set transparent = "false" %} + {% set width = "100%" %} + {% set height = "400" %} {% if not widthField.isEmpty() %} {% set width = widthField.data %} @@ -211,7 +211,7 @@ brick metadata. {% endif %} {% if transparentField.isChecked() %} - {% set transparent = 'true' %} + {% set transparent = "true" %} {% endif %} diff --git a/doc/03_Documents/01_Editables/04_Area.md b/doc/03_Documents/01_Editables/04_Area.md index ed3f593cf1d..6f4fb2c3e0e 100644 --- a/doc/03_Documents/01_Editables/04_Area.md +++ b/doc/03_Documents/01_Editables/04_Area.md @@ -22,7 +22,7 @@ into a block element, and the editor cannot choose which area is used, this has ```twig
-{{ pimcore_area('myArea', { 'type' : 'gallery-single-images' }) }} +{{ pimcore_area("myArea", {"type": "gallery-single-images"}) }}
``` @@ -30,11 +30,11 @@ into a block element, and the editor cannot choose which area is used, this has ```twig
- {{ pimcore_area('myArea', { - type: 'gallery-single-images', + {{ pimcore_area("myArea", { + type: "gallery-single-images", params: { - 'gallery-single-images': { - 'param1': 123, + "gallery-single-images": { + "param1": 123, } } }) }} diff --git a/doc/03_Documents/01_Editables/06_Block.md b/doc/03_Documents/01_Editables/06_Block.md index a64ad469f47..f087167985c 100644 --- a/doc/03_Documents/01_Editables/06_Block.md +++ b/doc/03_Documents/01_Editables/06_Block.md @@ -37,9 +37,9 @@ The items in the loop as well as their order can be defined by the editor with t ## Basic Usage ```twig -{% for i in pimcore_block('contentblock').iterator %} -

{{ pimcore_input('subline') }}

- {{ pimcore_wysiwyg('content') }} +{% for i in pimcore_block("contentblock").iterator %} +

{{ pimcore_input("subline") }}

+ {{ pimcore_wysiwyg("content") }} {% endfor %} ``` @@ -54,13 +54,14 @@ And in the frontend of the application: ### Example for `getCurrent()` ```twig -{% set myBlock = pimcore_block('contentblock', {'reload': true}) %} +{% set myBlock = pimcore_block("contentblock", {"reload": true}) %} {% for i in myBlock.iterator %} {% if myBlock.current > 0 %} Insert this line only after the first iteration

{% endif %} -

{{ pimcore_input('subline') }}

+ +

{{ pimcore_input("subline") }}

{% endfor %} ``` @@ -72,7 +73,7 @@ And in the frontend of the application: The manual mode offers you the possibility to deal with block the way you like, this is for example useful with tables: ```twig -{% set block = pimcore_block('gridblock', {'manual' : true, 'limit' : 6}).start() %} +{% set block = pimcore_block("gridblock", {"manual": true, "limit": 6}).start() %} {% for b in block.iterator %} @@ -125,7 +126,7 @@ If you want to wrap buttons in a div or change the Position.
{% for b in block.iterator %} {% do block.blockConstruct() %} - {% do block.blockStart(true, false, 'my-additional-class') %} + {% do block.blockStart(true, false, "my-additional-class") %} Add additional class 'my-addional-class' to editmode-div {% do block.blockEnd() %} {% do block.blockDestruct() %} @@ -140,7 +141,6 @@ If you want to wrap buttons in a div or change the Position. Bricks and structure refer to the CMS demo (content/default template). ```twig - {# load document #} {% set document = pimcore_document_by_path('/en/More-Stuff/Developers-Corner/Galleries') %} diff --git a/doc/03_Documents/01_Editables/08_Checkbox.md b/doc/03_Documents/01_Editables/08_Checkbox.md index 3712ae6cc20..a0094f4135c 100644 --- a/doc/03_Documents/01_Editables/08_Checkbox.md +++ b/doc/03_Documents/01_Editables/08_Checkbox.md @@ -18,18 +18,18 @@ ## Simple Example ```twig -{{ pimcore_checkbox('myCheckbox') }} +{{ pimcore_checkbox("myCheckbox") }} ``` ## Advanced Example ```twig -Setting XYZ: {{ pimcore_checkbox('myCheckbox') }} +Setting XYZ: {{ pimcore_checkbox("myCheckbox") }} -{% if pimcore_checkbox('myCheckbox').isChecked() %} +{% if pimcore_checkbox("myCheckbox").isChecked() %}
- {{ dump('do something') }} + {{ dump("do something") }}
{% endif %} ``` \ No newline at end of file diff --git a/doc/03_Documents/01_Editables/10_Date.md b/doc/03_Documents/01_Editables/10_Date.md index 2a32bf8d902..28a928fb4bc 100644 --- a/doc/03_Documents/01_Editables/10_Date.md +++ b/doc/03_Documents/01_Editables/10_Date.md @@ -25,8 +25,8 @@ Localization (output-format, ...) is automatically used from the globally regist Please read the topic [Localization](../../06_Multi_Language_i18n/README.md). ```twig -{{ pimcore_date('myDate', { - 'format': 'd.m.Y', - 'outputIsoFormat': 'DD.MM.YYYY' +{{ pimcore_date("myDate", { + "format": "d.m.Y", + "outputIsoFormat": "DD.MM.YYYY" }) }} ``` diff --git a/doc/03_Documents/01_Editables/12_Relation_Many-To-One.md b/doc/03_Documents/01_Editables/12_Relation_Many-To-One.md index 19070ab4a7f..bff1f04f082 100644 --- a/doc/03_Documents/01_Editables/12_Relation_Many-To-One.md +++ b/doc/03_Documents/01_Editables/12_Relation_Many-To-One.md @@ -47,7 +47,7 @@ options in the editable configuration. ##### Example ```twig -{{ pimcore_relation("myRelation",{ +{{ pimcore_relation("myRelation", { "types": ["asset","object"], "subtypes": { "asset": ["video", "image"], diff --git a/doc/03_Documents/01_Editables/14_Image.md b/doc/03_Documents/01_Editables/14_Image.md index cae56a64d32..baa1e426107 100644 --- a/doc/03_Documents/01_Editables/14_Image.md +++ b/doc/03_Documents/01_Editables/14_Image.md @@ -122,7 +122,7 @@ And this is how the rendered html looks: ` @@ -133,7 +133,7 @@ And this is how the rendered html looks: `My first alternative drop target
-{{ pimcore_image("image",{ +{{ pimcore_image("image", { "thumbnail": "contentfullimage", "dropClass": "myCustomImageDropTarget" }) }} @@ -171,7 +171,7 @@ All dimensions are in percent and therefore independent from the image size, you ```twig

- {{ pimcore_image("myImage",{ + {{ pimcore_image("myImage", { "title": "Drag your image here", "width": 400, "height": 400, diff --git a/doc/03_Documents/01_Editables/16_Input.md b/doc/03_Documents/01_Editables/16_Input.md index e29f9f67010..8a1dc8acf0a 100644 --- a/doc/03_Documents/01_Editables/16_Input.md +++ b/doc/03_Documents/01_Editables/16_Input.md @@ -7,14 +7,15 @@ For a multi-line alternative have a look at the [textarea editable](./36_Textare ## Configuration -| Name | Type | Configuration | -|--------------------|---------|---------------------------------------------------------------------------------------| -| `width` | integer | Width of the input in editmode (in pixels) | -| `htmlspecialchars` | boolean | Set to false to get the raw value without HTML special chars like & (default to true) | -| `nowrap` | boolean | set to false to disable the automatic line break | -| `class` | string | A CSS class that is added to the surrounding container of this element in editmode | -| `placeholder` | string | A placeholder that is displayed when the field is empty | -| `required` | boolean | set to true to make field value required for publish | +| Name | Type | Configuration | +|--------------------|---------|------------------------------------------------------------------------------------------------| +| `width` | integer | Width of the input in editmode (in pixels) | +| `htmlspecialchars` | boolean | Set to false to get the raw value without HTML special chars like & (default to true) | +| `nowrap` | boolean | set to false to disable the automatic line break | +| `class` | string | A CSS class that is added to the surrounding container of this element in editmode | +| `placeholder` | string | A text shown in the field when it is empty to guide the user about the expected type of input. | +| `defaultValue` | string | A default value for the available options. | +| `required` | boolean | set to true to make field value required for publish | ## Methods @@ -42,6 +43,6 @@ You could also specify other parameters, like the size: ```twig

- {{ pimcore_input("headerLine", {'width': 540}) }} + {{ pimcore_input("headerLine", {"width": 540}) }}

``` diff --git a/doc/03_Documents/01_Editables/18_Link.md b/doc/03_Documents/01_Editables/18_Link.md index d47fbbb8bd9..ac87ce92d69 100644 --- a/doc/03_Documents/01_Editables/18_Link.md +++ b/doc/03_Documents/01_Editables/18_Link.md @@ -43,7 +43,7 @@ such as: `class`, `target`, `id`, `style`, `accesskey`, `name`, `title`, `data-* ```twig

{{ "Visit our" | trans }} - {{ pimcore_link('blogLink') }} + {{ pimcore_link("blogLink") }}

``` @@ -64,8 +64,8 @@ Let's see how to make a list of links with [Block](./06_Block.md). ```twig

{{ "Useful links" | trans }}

    - {% for i in pimcore_block('linkblock').iterator %} -
  • {{ pimcore_link('myLink', {'class': "special-link-class"}) }}
  • + {% for i in pimcore_block("linkblock").iterator %} +
  • {{ pimcore_link("myLink", {"class": "special-link-class"}) }}
  • {% endfor %}
``` diff --git a/doc/03_Documents/01_Editables/22_Multiselect.md b/doc/03_Documents/01_Editables/22_Multiselect.md index ef12b2c9e9b..86c84bd8fa9 100644 --- a/doc/03_Documents/01_Editables/22_Multiselect.md +++ b/doc/03_Documents/01_Editables/22_Multiselect.md @@ -27,18 +27,18 @@ Also, it shows the list of chosen elements in the frontend. ```twig {% if editmode %} - {{ pimcore_multiselect('categories', { - 'width': 200, - 'height': 100, - 'store': [ - ['cars', 'Cars'], - ['motorcycles', 'Motorcycles'], - ['accessories', 'Accessories'], + {{ pimcore_multiselect("categories", { + "width": 200, + "height": 100, + "store": [ + ["cars", "Cars"], + ["motorcycles", "Motorcycles"], + ["accessories", "Accessories"], ] }) }} {% else %} -

{{ 'This page is linked to' | trans }} - {% for categoryKey in pimcore_multiselect('categories').getData %} +

{{ "This page is linked to" | trans }} + {% for categoryKey in pimcore_multiselect("categories").getData %} {{ categoryKey | trans }} diff --git a/doc/03_Documents/01_Editables/24_Numeric.md b/doc/03_Documents/01_Editables/24_Numeric.md index 32a115f944f..0f721f81268 100644 --- a/doc/03_Documents/01_Editables/24_Numeric.md +++ b/doc/03_Documents/01_Editables/24_Numeric.md @@ -5,13 +5,14 @@ The numeric editable is very similar to the [input editable](./16_Input.md), but ## Configuration -| Name | Type | Description | -|------------|---------|------------------------------------------------------------------------------------| -| `maxValue` | float | Define a maximum value | -| `minValue` | float | Define a minimum value | -| `width` | integer | Width of the field in pixel | -| `class` | string | A CSS class that is added to the surrounding container of this element in editmode | -| `required` | boolean | set to true to make field value required for publish | +| Name | Type | Description | +|----------------|---------|------------------------------------------------------------------------------------| +| `maxValue` | float | Define a maximum value | +| `minValue` | float | Define a minimum value | +| `width` | integer | Width of the field in pixel | +| `class` | string | A CSS class that is added to the surrounding container of this element in editmode | +| `defaultValue` | string | A default value for the available options **as string** | +| `required` | boolean | set to true to make field value required for publish | ## Methods @@ -25,7 +26,7 @@ The numeric editable is very similar to the [input editable](./16_Input.md), but ### Basic Usage ```twig -{{ pimcore_numeric('myNumber') }} +{{ pimcore_numeric("myNumber") }} ``` Now you can see the **numeric** value in the editmode view @@ -36,11 +37,11 @@ Now you can see the **numeric** value in the editmode view In the following example we're going to use a minimal and maximum value as well as a decimal precision. ```twig -{{ pimcore_numeric('myNumber',{ - "width" : 300, - "minValue" : 0, - "maxValue" : 100, - "decimalPrecision" : 0 +{{ pimcore_numeric("myNumber", { + "width": 300, + "minValue": 0, + "maxValue": 100, + "decimalPrecision": 0 }) }} ``` @@ -49,6 +50,6 @@ To display the number also in editmode, you can use the method `getData()` ```twig

- {{ pimcore_numeric('myNumber').getData() }} + {{ pimcore_numeric("myNumber").getData() }}

``` diff --git a/doc/03_Documents/01_Editables/25_Embed.md b/doc/03_Documents/01_Editables/25_Embed.md index f294fc8f9d5..10a6569e4f0 100644 --- a/doc/03_Documents/01_Editables/25_Embed.md +++ b/doc/03_Documents/01_Editables/25_Embed.md @@ -24,5 +24,5 @@ Additionally you can use any configuration option of [Embera](https://github.com {{ pimcore_embed("socialWidgets") }} {# Advanced usage #} -{{ pimcore_embed("socialWidgets", { "width": 540 }) }} +{{ pimcore_embed("socialWidgets", {"width": 540}) }} ``` diff --git a/doc/03_Documents/01_Editables/28_Renderlet.md b/doc/03_Documents/01_Editables/28_Renderlet.md index 73621cecfcf..f8ce8d53d03 100644 --- a/doc/03_Documents/01_Editables/28_Renderlet.md +++ b/doc/03_Documents/01_Editables/28_Renderlet.md @@ -51,10 +51,10 @@ The code below shows how to use renderlet to create gallery based on it. ```twig @@ -96,7 +96,7 @@ Now you have to create the template file at: `templates/content/my_gallery.html. {% for asset in assets %} {% if asset is instanceof('\\Pimcore\\Model\\Asset\\Image') %} {% endif %} {% endfor %} @@ -114,9 +114,9 @@ And the final view is like, below: ```twig {{ - pimcore_renderlet('myRenderlet', { + pimcore_renderlet("myRenderlet", { .... - "editmode" : editmode + "editmode": editmode }) }} ``` diff --git a/doc/03_Documents/01_Editables/30_Select.md b/doc/03_Documents/01_Editables/30_Select.md index f476889120e..ef1bc331c5e 100644 --- a/doc/03_Documents/01_Editables/30_Select.md +++ b/doc/03_Documents/01_Editables/30_Select.md @@ -6,15 +6,15 @@ The select editable generates select-box component in Editmode. ## Configuration -| Name | Type | Description | -|----------|---------|------------------------------------------------------------------------------------| -| `store` | array | Key/Value pairs for the available options. | -| `reload` | bool | Set true to reload the page in editmode after selecting an item | -| `width` | integer | Width of the select box in pixel | -| `class` | string | A CSS class that is added to the surrounding container of this element in editmode | -| `defaultValue` | string | A default value for the available options. Note: This value needs to be saved before calling getData() or use setDataFromResource(). | -| `required` | boolean | (default: false) set to true to make field value required for publish | -| `editable` | boolean | (default: false) set to true to allow custom option | +| Name | Type | Description | +|----------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------| +| `store` | array | Key/Value pairs for the available options. | +| `reload` | bool | Set true to reload the page in editmode after selecting an item | +| `width` | integer | Width of the select box in pixel | +| `class` | string | A CSS class that is added to the surrounding container of this element in editmode | +| `defaultValue` | string | A default value for the available options. Note: This value needs to be saved before calling getData() or use setDataFromResource(). | +| `required` | boolean | (default: false) set to true to make field value required for publish | +| `editable` | boolean | (default: false) set to true to allow custom option | ## Methods @@ -38,7 +38,7 @@ in the frontend preview you will see simply the value of the chosen option. ["three-months", "Three months"], ["unlimited", "Unlimited"] ], - "defaultValue" : "unlimited" + "defaultValue": "unlimited" }) }} {% else %}

diff --git a/doc/03_Documents/01_Editables/36_Textarea.md b/doc/03_Documents/01_Editables/36_Textarea.md index d2652230b73..8bc73eb598f 100644 --- a/doc/03_Documents/01_Editables/36_Textarea.md +++ b/doc/03_Documents/01_Editables/36_Textarea.md @@ -9,12 +9,13 @@ The textarea editable is very similar to the [Input](./16_Input.md) editable, th | Name | Type | Description | |--------------------|---------|---------------------------------------------------------------------------------------| | `height` | integer | Height of the textarea in pixel | +| `width` | integer | Width of the textarea in pixel | | `htmlspecialchars` | boolean | Set to false to get the raw value without HTML special chars like & (default: `true`) | | `nl2br` | boolean | Set to true to get also breaks in frontend | | `placeholder` | string | A placeholder that is displayed when the field is empty | -| `width` | integer | Width of the textarea in pixel | | `class` | string | A CSS class that is added to the surrounding container of this element in editmode | | `required` | boolean | set to true to make field value required for publish | +| `defaultValue` | string | A default value for the available options. | ## Methods @@ -27,7 +28,7 @@ The textarea editable is very similar to the [Input](./16_Input.md) editable, th ```twig

- {{ pimcore_textarea("product_description",{ + {{ pimcore_textarea("product_description", { "nl2br": true, "height": 300, "placeholder": "Product Description" diff --git a/doc/03_Documents/01_Editables/38_Video.md b/doc/03_Documents/01_Editables/38_Video.md index cdb041bf941..f072552f097 100644 --- a/doc/03_Documents/01_Editables/38_Video.md +++ b/doc/03_Documents/01_Editables/38_Video.md @@ -53,7 +53,7 @@ To create a container for local video files you can just use the `$this->video` ```twig

- {{ pimcore_video('campaignVideo', { + {{ pimcore_video("campaignVideo", { width: 700, height: 400 }) }} @@ -81,7 +81,7 @@ In the configuration, you could also specify additional options for external ser ```twig
- {{ pimcore_video('campaignVideo', { + {{ pimcore_video("campaignVideo", { width: 700, height: 400, youtube: { @@ -101,8 +101,8 @@ It is possible to limit the available types for this editable. The selection can ```twig
- {{ pimcore_video('campaignVideo', { - allowedTypes: ['asset', 'youtube'] + {{ pimcore_video("campaignVideo", { + allowedTypes: ["asset", "youtube"] }) }}
@@ -118,15 +118,15 @@ It is possible to limit the available types for this editable. The selection can - {{ pimcore_video('myVideo', { - thumbnail: 'example', + {{ pimcore_video("myVideo", { + thumbnail: "example", width: 400, height: 300, attributes: { - 'class': 'video-js custom-class', - 'preload': 'auto', - 'controls': '', - 'data-custom-attr': 'my-test' + "class": "video-js custom-class", + "preload": "auto", + "controls": "", + "data-custom-attr": "my-test" } }) }} diff --git a/doc/03_Documents/01_Editables/40_WYSIWYG.md b/doc/03_Documents/01_Editables/40_WYSIWYG.md index 7dda79a586f..66c59f65185 100644 --- a/doc/03_Documents/01_Editables/40_WYSIWYG.md +++ b/doc/03_Documents/01_Editables/40_WYSIWYG.md @@ -4,6 +4,27 @@ Similar to Textarea and Input you can use the WYSIWYG editable in the templates to provide rich-text editing. TinyMce is installed by default in our demo. Another editor can be installed via the wysiwyg-events you find in `events.js` +## Configuration + +| Name | Type | Description | +|----------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------| +| `height` | bool | Set true to reload the page in editmode after selecting an item | +| `width` | integer | Width of the select box in pixel | +| `class` | string | A CSS class that is added to the surrounding container of this element in editmode | +| `placeholder` | string | A text shown in the field when it is empty to guide the user about the expected type of input. | +| `defaultValue` | string | A default value for the available options. Note: This value needs to be saved before calling getData() or use setDataFromResource(). | +| `required` | boolean | (default: false) set to true to make field value required for publish | + +## Example + +```twig +{{ pimcore_wysiwyg("myWYSIWYG", { + "height": 600, + "width": 1100, + "placeholder": "Enter you content" +}) }} +``` + ## Enable TinyMce In Pimcore 11 the default editor changed from CKEditor to TinyMCE and has been moved into [PimcoreTinymceBundle](https://github.com/pimcore/pimcore/blob/11.x/bundles/TinymceBundle/README.md). Check the bundle readme for installation instructions. @@ -14,7 +35,7 @@ if(!parent.pimcore.wysiwyg) { parent.pimcore.wysiwyg = {}; parent.pimcore.wysiwyg.editors = []; } -parent.pimcore.wysiwyg.editors.push('Custom_Editor'); +parent.pimcore.wysiwyg.editors.push("Custom_Editor"); ``` The Editor als needs to dispatch the `pimcore.events.changeWysiwyg` to set the value from the WYSIWYG-Field in the core. diff --git a/doc/03_Documents/01_Editables/42_Scheduled_Block.md b/doc/03_Documents/01_Editables/42_Scheduled_Block.md index 0a90d3b5c70..5b8748e56ea 100644 --- a/doc/03_Documents/01_Editables/42_Scheduled_Block.md +++ b/doc/03_Documents/01_Editables/42_Scheduled_Block.md @@ -40,9 +40,9 @@ In editmode, additional block items can be added and their timestamp can be conf ## Basic Usage ```twig -{% for i in pimcore_scheduledblock('block').iterator %} -

{{ pimcore_input('blockinput') }}

- {{ pimcore_image('myimage') }} +{% for i in pimcore_scheduledblock("block").iterator %} +

{{ pimcore_input("blockinput") }}

+ {{ pimcore_image("myimage") }} {% endfor %} ```