Question

我有一个使用Docusaurus.io构建的文档站点，并且正在使用Docsearch作为我在导航栏中的搜索-效果很好。但是，我也想在该网站的目标网页上实施Algolia Instantsearch。该代码在使用Instantsearch设置的旧索引上可以正常工作，但是当我将API密钥和新Docsearch索引的ID插入InstantSearch配置函数中时，我得到了我无法理解的JSON对象流

这是我要使用的模板（该模板在Jekyll网站上的旧索引上有效）：

const hitTemplate = function(hit) {
    console.log(hit);
  let url = hit.url;
  const title = hit.lvl1;
  const content = hit._highlightResult.matchedWords;

  return `
    <div class="post-item">
      <a class="post-link" href="${url}">
        <h4>${title}</h4>
      </a>
      <div class="search-article-description">${content}</div>
      <a href="${url}" class="read-more">Read More &raquo;</a>
    </div>
  `;

这将导致空白<div>。

不应用模板时，我的结果作为嵌套的JSON对象返回。

我要实现的是一个附加的即时搜索，该搜索仅出现在docs网站的主页上。据我了解，我在Docsearch中没有两个输入选择器，这就是为什么我一直尝试使用InstantSearch的原因。我需要一个与Docsearch API返回数据的方式兼容的模板。

Answer 1

经过一周的反复试验和Docsearch开发人员通过github提供的一些非常宝贵的帮助，我想出了一个适用于我的文档站点的解决方案，并在此分享了它，希望对Docusaurus感到沮丧的其他用户， Docsearch和Instantsearch找到了解决方案的方法：

在instantsearch.js中（可在website / static / js中找到）：

// instantSearch on homepage
document.addEventListener('DOMContentLoaded', () => {
  // Set initial parameters for instantsearch on the homepage
  const mainSearch = instantsearch({
    appId: '...',
    apiKey: '...',
    indexName: 'your-docsearch-index-name',
    searchParameters: {
      hitsPerPage: 10
    },
    routing: true
  });

  mainSearch.addWidget(
    instantsearch.widgets.configure({
      filters: 'version:1.5.5' // set latest version here
    })
  );

  // initialize SearchBox
  mainSearch.addWidget(
    instantsearch.widgets.searchBox({
      container: '#search_input_main',
      placeholder: 'Search the Docs',
      autofocus: false,
      poweredBy: true
    })
  );
  // add hits cont
  mainSearch.addWidget(
    instantsearch.widgets.hits({
      container: '#search-hits',
      templates: {
        empty: 'No results for the search term <em>"{{query}}"</em>.',
        item: $('#results-template').html() // this is the template at index.js
      },
      hitsPerPage: 10
    })
  );

  // add pagination
  mainSearch.addWidget(
    instantsearch.widgets.pagination({
      container: '#pagination-container',
      maxPages: 20,
      // default is to scroll to 'body', here we disable this behavior
      scrollTo: '#search-container'
    })
  );

  mainSearch.start();

  // Toggle search results
  const search_input_main = document.querySelector('#search_input_main');
  const searchContainer = document.querySelector('#search-container');

  // Bind keyup event on the input
  search_input_main.addEventListener('keyup', function() {
    if (search_input_main.value.length > 0) {
      searchContainer.classList.remove('hidden');
    } else {
      searchContainer.classList.add('hidden');
    }
  });

  // hide results on reset
  document.querySelector('.ais-search-box--reset').addEventListener('click', function() {
    searchContainer.classList.add('hidden');
  });

});

这是我的pages / en / index.js：

const React = require('react');
...
// for homepage instantsearch
let resultsTemplate = `
<script type="text/template" id="results-template">
  <div class="ais-result">
    {{#hierarchy.lvl0}}
    <div class="ais-lvl0">
      <a title="{{_highlightResult.hierarchy.lvl1.value}}" href="{{{url}}}"><h4>{{{_highlightResult.hierarchy.lvl0.value}}}</h4></a>
    </div>
    {{/hierarchy.lvl0}}

    <div class="ais-lvl1 breadcrumbs">
      {{#hierarchy.lvl1}} {{{_highlightResult.hierarchy.lvl1.value}}} {{/hierarchy.lvl1}} {{#hierarchy.lvl2}} > {{{_highlightResult.hierarchy.lvl2.value}}} {{/hierarchy.lvl2}} {{#hierarchy.lvl3}} > {{{_highlightResult.hierarchy.lvl3.value}}} {{/hierarchy.lvl3}}
      {{#hierarchy.lvl4}} > {{{_highlightResult.hierarchy.lvl4.value}}} {{/hierarchy.lvl4}}
    </div>

    <div class="ais-content">
      {{{#content}}} {{{_highlightResult.content.value}}} {{{/content}}}
    </div>
  </div>
</script>
`
...

const SearchInput = () => (
  <div>
    <div className='productShowcaseSection small-paddingBottom paddingTop' style={{textAlign: 'center'}}>
      <h3>Get the most out of Stackery's serverless toolkit</h3>
      <Container>
        <div className='search_input_div'>
          <input id="search_input_main" type="text" className="form-control" placeholder="Search the docs" aria-label="Search" aria-describedby="search"></input>
        </div>
      </Container>
    </div>
  </div>
);

const SearchHits = () => {
  return (
    <Container className='hidden' id='search-container'>
      <h3>Search results:</h3>
      <div id='search-hits'></div>
      <div id='pagination-container'></div>
      <div
        dangerouslySetInnerHTML={{ __html: resultsTemplate }}
      />
    </Container>
  )
}

class HomeSplash extends React.Component {
  render () {
    const language = this.props.language || '';
    return (
      <SplashContainer>
        <div className='inner'>
          <ProjectTitle />
          <PromoSection>
            ...
          </PromoSection>
          <SearchInput />
        </div>
      </SplashContainer>
    );
  }
}
...

class Index extends React.Component {
  render () {
    const language = this.props.language || '';

    return (
      <div>
        <HomeSplash language={language} />
        <SearchHits />
        <BrowseDocs />
        <TryIt />
      </div>
    );
  }
}

module.exports = Index;

注意事项：

请务必添加filters: 'version:your-version'，否则InstantSearch将针对您拥有的每个版本返回结果，从而导致大量重复。
instantsearch.js底部的JQuery用于显示和隐藏<div>，具体取决于搜索输入中的键入事件，您的搜索结果将出现在这里
我使用const mainSearch = instantsearch({...而不是const search的原因是，默认导航栏Docsearch已经使用了search变量。如果页面上有多个搜索，则需要执行此操作。
尽管本指南是针对Docusaurus的，但该实用的JSfiddle展示了如何在常规静态站点上使用Docsearch索引实施即时搜索：https://jsfiddle.net/s_pace/965a4w3o/1/
如果您需要在自己的Docusaurus网站上实施此操作方面需要帮助，请发表评论，我们很乐意为您提供帮助

在Docusaurus页面的Instantsearch.js部分中使用Algolia Docsearch索引

1 个答案: