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表达式中的选项可以有两种不同的用法：

它们可以作为处理表达式输出的指令，就像函数一样。
当表达式位于data-sly- *语句中时，它们允许为该语句提供指令或参数。

注意： 要轻松尝试下面提供的示例，您可以在AEM实例上安装REPL tool。 < / p>

在普通表达式（不在data-sly-*语句中）中，可以使用以下选项：

format：连接字符串示例：${'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 and 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 mode。

的 data-sly-resource ：
简短的写作形式也是：<div data-sly-resource="par"></div>
与data-sly-include相同，但它还接受以下选项：

选择器：替换选择器。

addSelectors：添加选择器。

removeSelectors：删除选择器。

resourceType：定义或更改资源类型（仅在内容节点上根据需要尚未定义时才需要）。

decorationTagName 和 cssClassName：为了向后兼容AEM在JSP中包含的组件周围添加DIV元素的方式。

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

的 data-sly-test

的 data-sly-list

的 data-sly-unwrap

的 data-sly-element

表达选项很明显

1 个答案: