表达选项很明显

Question

我正在查看sightly中使用的表达式选项.我尝试了下面的代码行,但似乎只是在页面上呈现文本,有人可以提供一些选项和一些很好的例子.

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

我已经尝试并理解下面的代码来包含parsys

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

此外,我可以从中获取数据狡猾的[元素]的整个列表.

谢谢

Answer 1

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

注意:要轻松尝试下面提供的示例,您可以在AEM实例上安装REPL工具.

在普通表达式(不在data-sly-*语句中),可以使用以下选项:

格式:连接字符串.
示例:${'Page {0} of {1}' @ format = [1, 10]}
显示:Page 1 of 10
i18n:翻译字符串.此外,locale如果要采用与当前页面语言不同的内容,则允许更改语言,并hint允许向翻译者提供帮助并区分可能相同但具有不同含义的字符串.
示例:${'Number' @ i18n, locale = 'de', hint = 'Media DPS Folio Number'}
显示:Nummer
join:定义要在数组项之间显示的字符串分隔符.
示例:${['foo', 'bar'] @ join = '-'}
显示:foo-bar
context:控制HTML转义和XSS保护的应用方式.
示例:${'<p>Hi!</p><script>alert("hack!")</script>' @ context = 'html'}
显示:<p>Hi!</p>

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

data-sly-text:
这个例子:<p data-sly-text="${currentPage.title}">Lorem ipsum</p>
相当于:(<p>${currentPage.title}</p>
如果你想在标记中留下HTML设计者提供的占位符,这可能很有用.)
所以这个例子:<p data-sly-text="${'Page {0} of {1}' @ format = [1, 10]}"></p>
显示:<p>Page 1 of 10</p>
data-sly-attribute:
此示例:<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-use:
示例:<p data-sly-use.bar="${'logic.js' @ foo = 'hello'}">${bar}</p>
logic.js:use(function () { return this.foo + " world"; });
显示:<p>hello world</p>
data-sly-template和data-sly-call:
示例:
<template data-sly-template.tmpl="${@ foo}">${foo} world</template>
<p data-sly-call="${tmpl @ foo = 'hello'}"></p>
显示: <p>hello world</p>

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

data-sly-include:
请注意:<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(除了path)的选项是:
- prependPath:在路径之前添加一些东西.
- appendPath:在路径后添加一些东西.
- wcmmode:更改包含文件的WCM模式.
data-sly-resource:
这里的简写形式也是:<div data-sly-resource="par"></div>
与...相同data-sly-include,但它还接受以下选项:
- 选择器:替换选择器.
- addSelectors:添加选择器.
- removeSelectors:删除选择器.
- resourceType:定义或更改资源类型(仅在内容节点上根据需要尚未定义时才需要).
- decorationTagName和cssClassName:为了向后兼容AEM在JSP中包含的组件周围添加DIV元素的方式.

以下语句不允许表达式选项: