突出显示呈现为文本

Question

我在 Algolia 管理控制台中打开了突出显示，我的搜索结果中的字词被“”和“”包裹起来，但它们显示为普通文本而不是呈现为 HTML。换句话说，如果我搜索 "test"，我会看到单词 "test" 的所有实例都包含在标签中，而不是根据该标签的样式呈现。

我渲染结果的代码如下：

search.addWidget(
    instantsearch.widgets.hits({
         container: '#hits-container',
         templates: {
           empty: 'No results',
           item: '<strong><a href="{{url}}" target="_blank">{{title}}</a></strong><br>{{type}}<br><i><span style="font-size: smaller !important;"{{_highlightResult.summary.value}}</span></i><br>'
         },
         hitsPerPage: 25
    })
);

我觉得我忽略了一些显而易见的事情。

此外 - 在哪里可以找到对我可以在模板代码中使用的所有可能变量的引用？我不确定我是否理解两个括号与三个括号之间的区别。

Answer 1

突出显示的结果存储在_highlightResult 属性中。因此，您可以使用 {{{_highlightResult.title.value}}} 而不是 {{title}}，您将获得突出显示的 HTML 值

Answer 2

关于你的第一个问题，我在 instantsearch.js 和 hogan.js 中都找不到对 invariant.js 的引用，但它可能在它们的一个依赖项中使用。堆栈跟踪会有很大帮助。

但是，您的模板中已经有两处需要更改：
你说得对 triple braces to avoid escaping of HTML code.
您的模板还缺少结尾 >.

通常，当您对模板有疑问时，尝试使用缩进编写它，这有助于快速可视化错误。

'<strong>' +
'  <a href="{{url}}" target="_blank">' +
'    {{title}}' +
'  </a>' +
'</strong>' +
'<br>' +
'{{type}}' +
'<br>' +
'<i>' +
'  <span style="font-size: smaller !important;"' + // Here a closing > is missing
'    {{_highlightResult.summary.value}}' + // Here you need to use triple braces
'  </span>' +
'</i>' +
'<br>'

要可视化所有可用属性，您可以使用几乎所有 instantsearch.js 小部件都可用的 transformData 参数（参见 "All options" 选项卡 in the documentation）。它通常用于在将数据传递给模板之前修改数据，但也可用于进行一些日志记录。

instantsearch.widgets.hits({
     container: '#hits-container',
     transformData: {
       item: function (data) {
         console.log(data);
         return data;
       }
     }
     // Other options
});

有了这个，打开浏览器控制台并键入查询以查看对象具有哪些属性。

突出显示呈现为文本

Highlighting rendering as text

algolia