将渲染突出显示为文本

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

关于第一个问题,我无法找到一个参考invariant.js在任instantsearch.js也不hogan.js,但它可能在它们的依赖之一,可以使用.堆栈跟踪会有很大帮助.

但是,模板中已经有两件事需要改变:
你是否需要三重括号来避免HTML代码的转义.
您的模板也错过了结束>.

通常,当您遇到模板问题时,请尝试使用缩进编写它,这有助于快速查看错误.

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

要可视化所有可用属性,可以使用transformData几乎所有instantsearch.js小部件上都可用的参数(请参阅文档中的 "所有选项"选项卡).它通常用于在将数据传递给模板之前修改数据,但也可用于执行一些日志记录.

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

这样,打开浏览器控制台并键入查询以查看对象具有哪些属性.