Algolia - Невозможно получить basi c Панель поиска, работающая с файлом Jekyll HTML - PullRequest
Новая
       16

Algolia - Невозможно получить basi c Панель поиска, работающая с файлом Jekyll HTML

0 голосов
/ 01 февраля 2020

Давайте начнем с того, что я новичок ie с Алголией и несколько новичок с Джекиллом. При этом, надеюсь, это будет очень простое исправление и решение, учитывая, что это не сложно.

Основная цель, которую я пытаюсь достичь sh, - это отображение панели поиска Algolia на веб-сайте. с кодом, сохраненным в файле html.

Я успешно создал свой первый индекс и панель поиска Algolia, и он отлично работает в демонстрационном URL, показанном ниже. Введите что-то вроде «Глютен», и вы увидите несколько результатов.

Рабочая демонстрация моей панели поиска https://www.algolia.com/realtime-search-demo/test-sf

Фактическое имя индекса "test_sf_life", которое хранится в моей учетной записи, и я ' у нас есть правильные учетные данные API.

Однако в конечном итоге я хочу, чтобы это работало с моим собственным HTML файлом. У меня есть сайт, работающий нормально, используя фреймворк Jekyll. Я понимаю, как управлять кодом и создавать сайт, но я все еще считаю себя новичком ie, использующим Jekyll.

Я не могу понять, заключается ли проблема в том, как я добавляю Algolia код в файл HTML или инфраструктуру Jekyll.

Вы увидите в URL под страницей html, которую я добавил, код javascript и html, чтобы отобразить мою первую панель поиска Algolia. Файл подчеркивания имеет формат. html. Я понимаю, что в конечном итоге мне, вероятно, следует сохранить часть javascript в отдельном файле, однако я просто хочу, чтобы это сработало и сначала посмотрело!

Текущий URL на моем сайте для тестирования Algolia http://www.sf.life/hmm

Ниже приведен весь код, который я использую в HTML. Я удалил свои учетные данные API со значением фиктивной строки. 

layout: default
title: Patterns in data
description: Getting Algolia Search to work .
featured_image: /images/san-francisco/golden-gate-bridge.jpg

<script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.35.1/dist/algoliasearchLite.min.js" integrity="sha256-5rOQwvvJdM9oDYQYCGzaJuuTy6SUALjma3OtzEGyJM0=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.0.0/dist/instantsearch.production.min.js" integrity="sha256-6S7q0JJs/Kx4kb/fv0oMjS855QTz5Rc2hh9AkIUjUsk=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/reset-min.css" integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=" crossorigin="anonymous">

<section class="intro">
    <div class="wrap">
    <script>
    const searchClient = algoliasearch('APPLICATION_ID', 'SEARCH_API_CREDENTIALS');

    const search = instantsearch({
      indexName: 'test_sf_life',
      searchClient,
    });

    search.addWidgets([
      instantsearch.widgets.searchBox({
        container: '#searchbox',
      }),

      instantsearch.widgets.hits({
        container: '#hits',
      })
    ]);

    search.start();
    </script>
    </div>
</section>

Может кто-нибудь помочь мне разобраться? Я предполагаю, что это очень просто исправить. Заранее ценю время.

...