5

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

  ${'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>

我也可以从那里得到完整的 data-sly-[elements] 列表。

谢谢

4

1 回答 1

25

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

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

注意：要轻松试用下面提供的示例，您可以在 AEM 实例上安装REPL 工具。

在普通表达式（不在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>

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

  • 数据狡猾使用：
    示例：<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>
    与 for 相同data-sly-include，但它还接受以下选项：
    • 选择器：替换选择器。
    • addSelectors：添加选择器。
    • removeSelectors：删除选择器。
    • resourceType：定义或更改资源类型（仅在内容节点上未根据需要定义时才需要）。
    • decorTagName和cssClassName：为了向后兼容 AEM 在 JSP 中包含的组件周围添加 DIV 元素的方式。

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

于 2015-01-07T19:20:44.917 回答