在内容列表查询中,可以为运行页时计算的属性定义值,以显示最近更新的内容。
站点中的组件的大多数属性是静态的。用户可为组件的属性之一选择或输入固定字符串或值,并且无论何时或在何处运行页,该字符串或值都不会更改。但是,您可以为运行页时计算的属性定义值。这可用于显示内容查询中最近更新的内容。用户可以输入“在过去 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 对象。此对象接受两个主要参数:today 和 now。
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 < 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 Small,Hello {{#person}}222{{/person}} 模板将扩展为 Hello Big。
注:
Mustache 扩展是同步执行的。如果您需要检索异步值,则需要在尝试执行 Mustache 扩展之前在模型中解析这些值,尽管可以进行定制实施,但目前不支持此操作。