扩展内容列表查询中的宏

在内容列表查询中,可以为运行页时计算的属性定义值,以显示最近更新的内容。

站点中的组件的大多数属性是静态的。用户可为组件的属性之一选择或输入固定字符串或值,并且无论何时或在何处运行页,该字符串或值都不会更改。但是,您可以为运行页时计算的属性定义值。这可用于显示内容查询中最近更新的内容。用户可以输入“在过去 3 天”之类的日期。

您可以将 Mustache JS 扩展插入到多个属性。这些字符串中引用的值是从运行页时执行的模型派生的。有一个现成的模型可处理为内容 REST API 调用格式化的日期。您可以使用其他值来扩展此模型以满足任何用户要求。

下面是可以为属性输入的字符串示例:

Content List component:
      Additional Query String property:
             updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"

将在运行时对表示日期的此 Mustache 条目求值,以便返回值根据运行时间更改(即,扩展为 updatedDate gt "2220181002060000000")。这样,用户可以构建任何复杂的日期字符串,而不必输入预定义值。

支持的组件属性

以下属性支持 Mustache JS 模板语法:

  • 内容列表

    • 其他查询字符串

    • 例如:updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"

  • 标题/段落/文本

    • 通过 CKEditor 输入的多信息文本

    • 例如:"Content REST API format for date: {{#content.date}}now{{/content.date}}"

注:

在没有适用于 Mustache 模板的定制模型的情况下,标题/段落/文本中的扩展没什么用。但是,要验证您在其他查询字符串中输入的内容时,它很有用,因为当您在编辑和查看之间切换时会对其进行求值,并且它会立即可见。

支持的组件语法

现成支持 content.date 对象。此对象接受两个主要参数:todaynow

today 值采用当前浏览器时间,将其转换为今晚午夜,然后将该值转换为 UTC 时间。

  • {{#content.date}}today{{/content.date}} 扩展为今晚午夜的浏览器值(转换为 UTC 值并格式化为内容 REST API 日期格式)。例如:

    2220181008065959999
  • 然后可以采用以下方式扩充它:

    today +/-  [day | week | month | year]
  • 此外,当您对其使用加法或减法时,today 值的行为会有所不同。如果使用减法,则它将使用凌晨时间。如果使用加法,则它将使用午夜时间。例如:

    • {{#content.date}}today - 1 day{{/content.date}} 扩展为昨天的开始时间。

    • {{#content.date}}today + 2 days{{/content.date}} 扩展为明天午夜后的那天。

now 值采用当前浏览器时间,并将其转换为 UTC 时间,而不进行任何调整。

  • {{#content.date}}now{{/content.date}} 扩展为当前浏览器时间(转换为 UTC 值并格式化为内容 REST API 日期格式)。

  • 此外,还可以采用 hour 扩充 now。即:

    now +/-  [hour | day | week | month | year]
  • 例如:
    • {{#content.date}}now + 2 hours{{/content.date}} — 从现在起的两个小时(转换为 UTC 值并格式化为内容 REST API 日期格式)

    • {{#content.date}}now - 1 day{{/content.date}} — 昨天的当前浏览器时间(转换为 UTC 值并格式化为内容 REST API 日期格式)

使用支持的组件语法

要在其他查询字符串中使用宏扩展,假如您要返回过去 3 周的所有内容,则输入以下内容:

updatedDate gt "{{#code.date}}today - 3 weeks{{/code.date}}"

将仅返回日期,因此,要处理内容 REST API 调用,则在构造查询字符串时添加引号,就像在输入静态值时一样。

MustacheJS

有关语法,请参阅 Mustache JS 模板页,网址为 mustache.github.io/mustache.5.html。

已对扩展字符串时运行的 Mustache 实例进行了一项更改。Mustache 提供使用 {{ }}text 扩展和使用 {{{ }}}html 扩展。这两者之间的差异是 text 扩展对字符串进行 HTML 编码;即,如果值扩展为 a < b,则结果将为 a &lt; b。这不是您在构造 URL 的字符串时所需的。您可以告诉用户使用 HTML 扩展,但这就是一项额外工作,并且会产生更多问题,例如,解释为什么他们需要使用 {{{ }}}

为了避免这种情况,对 Mustache 进行了设置以便在使用 {{ }} 时它不会转义值。这意味着 {{ }}{{{ }}} 的行为相同。此外,这还将对任何结果进行编码作为练习留给用户(如果需要)。

OOTB Mustache 模型

Mustache 要求将模型应用于模板才能进行扩展。在前面的示例中,已现成定义了 {{#content.date}},但开发人员可以添加新属性,例如 {{person}}。如果用户在 Mustache 模板中输入的值不在模型中,则结果将为空字符串。因此,对于 Hello {{person}},除非开发人员将 person 添加到模型中,否则它将扩展为仅 Hello

使用的模型对象是名为 SCSMacros 的全局对象。开发人员可以将任何其他条目添加到此对象中。在对模板进行求值时,该对象将传递到 Mustache。

现成的模型对象当前仅支持 content.date 对象:

{   
   content: {
     date: <lambda implementation>
   }
}

定制 Mustache 模型

开发人员可以根据自己的要求增强支持的对象。因此,他们可以引入 lastTwoDays 对象并将扩展简化为仅 {{lastTwoDays}}

要扩展模型以支持某些内容(例如,前面示例中的 Hello {{person}}),需要将 person 对象添加到 SCSMacros。需要在运行页之前进行此操作。可以通过将脚本标记添加到页布局开头,在页布局中完成此操作。例如:

<script type="text/javascript">
window.SCSMacros = window.SCSMacros || {};  // define/get the SCSMacros object
window.SCSMacros.person = "World";
</script>

完成此更改后,Hello {{person}} 模板将扩展为:Hello World

如果要将值传递给对象(例如,Hello {{#person}}personId{{/person}}),则需要实施 mustache lambda,并在实施中包装和扩展该值。

例如:

<script type="text/javascript">
window.SCSMacros = window.SCSMacros || {};  // define/get the SCSMacros object
//implement "person" as a lambda
window.SCSMacros.person = function () {
  var people = { '111': { firstName: 'Small', lastName: 'World'}, '222': { firstName: 'Big', lastName: 'Universe'} };  
  return function (text, render) {     
     var expandedText = render(text);
     var chosenPerson = people[expandedText] || people['111'];      
     return chosenPerson.firstName;
  }
};
</script>

完成此更改后,Hello {{#person}}111{{/person}} 模板将扩展为 Hello SmallHello {{#person}}222{{/person}} 模板将扩展为 Hello Big

注:

Mustache 扩展是同步执行的。如果您需要检索异步值,则需要在尝试执行 Mustache 扩展之前在模型中解析这些值,尽管可以进行定制实施,但目前不支持此操作。