索引 instantsearch.js algolia 的不同结果模板

Question

我想为两个不同的索引使用两个不同的项目模板自定义我的 algolia 搜索结果，但我不知道如何执行此操作。我在文档中也找不到相关内容。

在这里你可以看到我现在是怎么做的。

        <script type="text/html" id="hit-template">
          <div class="hit">
            <div class="head">
              <span class="title">@{{{_highlightResult.title.value}}}</span>
              <span class="tag">@{{{_highlightResult.category.value}}}</span>
            </div>
            <div class="details">
              <span>@{{{ article_votes }}} @{{{ comment_votes }}} Points</span> &middot;
              <span>@{{{ username }}}</span> &middot;
              <span>@{{{ created_at }}}</span>
              <span class="domain">@{{{_highlightResult.link.value}}}</span>
            </div>
            <p class="comment-text">@{{{_highlightResult.body.value}}} 
           @{{{_highlightResult.description.value}}}</p>
          </div>
        </script>

    search.addWidget(
      instantsearch.widgets.hits({
        container: '#hits-container',
        templates: {
          empty: 'Sorry, there are no results.',
          // Here I need two item templates one for comments and one for articles
          item: document.getElementById('hit-template').innerHTML 
        },
        escapeHits: true,
        transformItems: items => items.map(item => item),
      })
    );

Answer 1

使用 InstantSearch 显示来自多个索引的匹配项的推荐方法是每个索引有一个 instantsearch() 实例。

例如，在您的用例中，您将有一个 articles 即时搜索和一个 comments 即时搜索，响应单个 searchBox 小部件。每个人也会有自己的 hits 小部件。

这里 fiddle 显示来自多个索引的匹配以供参考。

索引 instantsearch.js algolia 的不同结果模板

Different result templates for indices instantsearch.js algolia

templates

algolia