Используйте индекс Docsearch Algolia для раздела Instantsearch.js на странице Docusaurus

У меня есть сайт документации, созданный с использованием Docusaurus.io, и я использую Docsearch в качестве поискового запроса в панели навигации - это работает нормально. Тем не менее, я хотел бы также использовать Algolia Instantsearch на целевой странице сайта. Код работает нормально со старым индексом, настроенным с помощью InstantSearch, но когда я подключаю ключ API и идентификатор нового индекса Docsearch в функцию конфигурации 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.

Я пытаюсь реализовать дополнительный поисковый запрос, который появляется только на главной странице сайта документации. Из того, что я понимаю, у меня не может быть двух входных селекторов в Docsearch, поэтому я пытался использовать InstantSearch. Мне нужен шаблон, который работает с тем, как API Docsearch возвращает данные.

Источник

1 ответ

Решение

После недели проб и ошибок и некоторой очень ценной помощи от разработчиков Docsearch через github, я нашел решение, которое работает для моего сайта документации, и делюсь им здесь в надежде, что другие разочарованные пользователи Docusaurus, Docsearch и Instantsearch найти свой путь к этому решению:

В instantsearch.js (найдено на сайте / статические / 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');
  });

});

И это мои страницы /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 будет возвращать результаты для каждой имеющейся версии, что приводит к тоннам повторений.
  • JQuery в нижней части instantsearch.js для отображения и скрытия <div> где ваши результаты поиска появляются в зависимости от события keyup в поисковой выдаче
  • Причину я использовал const mainSearch = instantsearch({... вместо const search является то, что по умолчанию Navbar Docsearch уже использует search переменная. Если у вас есть более одного поиска на странице, вам нужно сделать это.
  • Хотя это руководство относится к Docusaurus, в этом полезном JSfiddle показано, как реализовать InstantSearch с индексом Docsearch на обычном статическом сайте: https://jsfiddle.net/s_pace/965a4w3o/1/
  • Пожалуйста, прокомментируйте, если вам нужна помощь в реализации этого на вашем собственном сайте Docusaurus, я рад помочь
Источник
Другие вопросы по тегам