表情表达选项

本文介绍了表情表达选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在仔细查看使用的表达式选项。我尝试了下面的代码行，但似乎只是在页面上呈现了文本，有人可以提供一些很好的示例使用选项。

I was looking over the expression options used in sightly. I tried the below line of code, but it seems just render the text over the page, can someone provide use of options with some good examples.

  ${'Assets' @ i18n, locale='fr-CH', hint='Translation Hint'}
  ${'Page {0} of {1}' @ format = [count,total] }

我尝试并理解了以下代码以包含parsys

I have tried and understand the below code to include the parsys

 <div data-sly-resource ="${@path='question_list', resourceType='wcm/foundation/components/parsys'}"></div>

我也可以从中获取data-sly- [elements]的整个列表。

Also from where i can get the whole list of data-sly-[elements].

谢谢

推荐答案

Sightly表达式中的选项可以有两种不同的用法：

Options in Sightly expressions can have two different kind of usage:

它们可以像处理函数一样充当处理表达式输出的指令。

当表达式位于data-sly- *语句中时，它们允许为该语句提供指令或参数。

注意：要轻松尝试下面提供的示例，您可以安装。

Note: to easily try out the examples provided below, you can install the REPL tool on your AEM instance.

在纯表达式（不位于 data-sly中的表达式上） -* 语句），可以使用以下选项：

On a plain expression (that is not located in a data-sly-* statement), following options are possible:

：连接字符串。

示例： $ {'{{}的第{0}页}'@格式= [1，10]}

显示：第1页，共10

：：翻译字符串。另外，如果要采用与当前页面语言不同的语言，则 locale 允许更改语言，并且 hint 允许为翻译人员提供帮助并区分可能相同但含义不同的字符串。

示例： $ {'Number'@ i18n，locale ='de'，提示='Media DPS Folio Number'}

显示： Nummer

：

示例： $ {['foo'，'bar'] @ join ='-'}

显示： foo-bar

：控制HTML转义和XSS保护的应用方式。

示例： $ {'< p> Hi！< / p>< script> alert（ hack！）< / script>'@ contex t ='html'}

显示：< p> Hi！< / p>

format: Concatenates strings.
Example: ${'Page {0} of {1}' @ format = [1, 10]}
Displays: Page 1 of 10
i18n: Translates strings. Additionally, locale allows to change the language if something different to the current page language is to be taken, and hint allows to provide help to the translator and to distinguish strings that might be identical but that have different meanings.
Example: ${'Number' @ i18n, locale = 'de', hint = 'Media DPS Folio Number'}
Displays: Nummer
join: Defines the string delimiter to display between items of an array.
Example: ${['foo', 'bar'] @ join = '-'}
Displays: foo-bar
context: Control how the HTML escaping and XSS protection applies.
Example: ${'<p>Hi!</p><script>alert("hack!")</script>' @ context = 'html'}
Displays: <p>Hi!</p>

以下语句允许使用上面列出的表达式选项，因为这些语句类似于编写不带语句的表达式：

Following statements allow the expression options as listed above, because these statements are similar to writing the expression without statement:

：

此示例：< p data-sly-text = $ {currentPage.title}> Lorem ipsum< / p>

等效于：< p> $ {currentPage.title}< / p>

（如果您想在标记中保留HTML设计器提供的占位符，这将很有用。）

因此，此示例：< p数据-sly-text = $ {'{{}}的第{0}页，@格式= [1，10]}>< / p>

显示：< p>第1页，共10< / p>

：

此示例：< p href =＃ data-sly-attribute.href = $ {currentPage.path}>< / p>

等效于：< p href = $ {currentPage.path}>< / p>

（这对于编写有效的HTML很有用，因为W3C HTML5验证程序验证URL的构造正确。它还允许在标记中保留HTML设计器提供的占位符。）

因此，此示例：< p data-sly-attribute.title = $ {['foo '，'bar'] @ join ='-'}>< / p>

显示：< p title = foo -bar< / p>

请注意，data-sly-attribute也可以通过提供可迭代的键值对象用于设置多个属性，例如下面的例子。但是data-sly-attribute的这种用法不允许使用任何选项：< div data-sly-attribute = $ {properties}>< / div>

data-sly-text:
This example: <p data-sly-text="${currentPage.title}">Lorem ipsum</p>
Is equivalent to: <p>${currentPage.title}</p>
(This can be useful if you want to leave placeholders provided by the HTML designer in the markup.)
So this example: <p data-sly-text="${'Page {0} of {1}' @ format = [1, 10]}"></p>
Displays: <p>Page 1 of 10</p>
data-sly-attribute:
This example: <p href="#" data-sly-attribute.href="${currentPage.path}"></p>
Is equivalent to: <p href="${currentPage.path}"></p>
(This can be useful for writing valid HTML as the W3C HTML5 validator verifies that URLs are correctly constructed. Also it allows to leave placeholders provided by the HTML designer in the markup.)
So this example: <p data-sly-attribute.title="${['foo', 'bar'] @ join = '-'}"></p>
Displays: <p title="foo-bar"></p>
Note that data-sly-attribute can also be used to set multiple attributes by providing an iterable key-value object, like in the example below. But this usage of data-sly-attribute doesn't allow to use any options: <div data-sly-attribute="${properties}"></div>

以下语句接受任何表达式选项，因为它们允许传递命名参数：

Following statements accept any expression options as they allow to pass named parameters:

：

示例：< p data-sly-use.bar = $ {'logic.js'@ foo = 'hello'}> $ {bar}< / p>

logic.js： use（function（）{return this.foo + world;}）;

显示：< p> hello world< / p>

：

示例：

< template data-sly-template .tmpl = $ {@ foo}> $ {foo}世界< / template>

< p data-sly-call = $ {tmpl @ foo ='hello'}> ;< / p>

显示：< p> hello world< / p>

data-sly-use:
Example: <p data-sly-use.bar="${'logic.js' @ foo = 'hello'}">${bar}</p>
logic.js: use(function () { return this.foo + " world"; });
Displays: <p>hello world</p>
data-sly-template and data-sly-call:
Example:
<template data-sly-template.tmpl="${@ foo}">${foo} world</template>
<p data-sly-call="${tmpl @ foo = 'hello'}"></p>
Displays: <p>hello world</p>

以下语句允许自定义选项列表：

Following statements allow a custom list of options:

：

请注意：< div data-sly-include = $ {@ path ='path / to / template.html'}>< / div>

等效于：< div data-sly-include = $ {'path / to / template.html'}>< / div>

甚至可以：< div data-sly-include = path / to / template.html>< / div>

（我总是选择较短的书写形式。）

data-sly-include的选项（<$ c $除外） c>路径）是：
- prependPath：在路径前添加一些内容。
- appendPath：在路径后添加一些内容。
- wcmmode：更改。
- data-sly-include:
  Notice that: <div data-sly-include="${ @ path = 'path/to/template.html'}"></div>
  Is equivalent to: <div data-sly-include="${'path/to/template.html'}"></div>
  Or even to: <div data-sly-include="path/to/template.html"></div>
  (I'd always opt for the shorter writing form.)
  Options for data-sly-include (other than path) are:
  - prependPath: Adds something before the path.
  - appendPath: Adds something after the path.
  - wcmmode: Changes the WCM mode for the included file.
  - 选择器：：替换选择器。
  - addSelectors：添加选择器。
  - removeSelectors：删除选择器。
  - resourceType：定义或更改资源类型（仅
  - decorationTagName 和 cssClassName：用于与AEM添加的方式向后兼容JSP中包含的组件周围的DIV元素。
  - selectors: To replace the selectors.
  - addSelectors: To add selectors.
  - removeSelectors: To remove selectors.
  - resourceType: To define or change the resource type (only needed if not already defined as needed on the content node).
  - decorationTagName and cssClassName: For backward compatibility with the way AEM added DIV elements around included components in JSP.
  以下语句不允许使用任何表达式选项：
  And following statements allow no expression options:
  - data-sly-test
  - data-sly-list
  - data-sly-unwrap
  - data-sly-element
  这篇关于表情表达选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

tmpl