Drupal 9에서 Algolia 검색을 구현하는 방법(2부)

이 시리즈의 이전 장에서는 Algolia 대시보드와 Drupal 사이트를 구성하여 Algolia에서 사이트 콘텐츠를 인덱싱하는 프로세스를 안내했습니다. 이 장에서는 Drupal 웹사이트에 Algolia 검색 결과를 표시하는 방법을 배웁니다.

검색 결과를 표시하려면 Drupal 사용자 지정 블록을 만들고 /search 페이지에 블록을 배치해야 합니다. 또한 Algolia의 InstantSearch 라이브러리를 사용하는 방법을 알게 될 것입니다. 이 프로세스는 Drupal에서 사용자 정의 모듈을 만드는 방법에 대한 기본적인 이해가 있다고 가정하므로 사용자 정의 모듈을 만드는 프로세스에 대해 자세히 설명하지 않겠습니다. Drupal 9에서 프로그래밍 방식으로 사용자 정의 모듈을 만드는 방법을 배우려면 이 기사를 읽으십시오.

이것은 2부작 시리즈 기사의 두 번째 장입니다. Algolia 및 Drupal을 구성하는 방법에 대해 이야기하는 첫 번째 부분을 읽으려면 여기를 클릭하십시오.

인터페이스에 대한 사용자 정의 블록 만들기

다음 구조를 사용하여 사용자 지정 블록을 만듭니다.

 algolia_search_interface - js/ - algolia.js - src/ - Plugin - Block - DemoSearchBlock.php - templates/ - algolia_search_interface-block.html.twig - algolia_search_interface.info.yml - algolia_search_interface.libraries.yml - algolia_search_interface.module

라이브러리 선언

앞에서 설명한 것처럼 Algolia의 InstantSearch 라이브러리를 사용하여 검색 결과에 액세스합니다. 따라서 아래와 같이 algolia_search_interface.libraries.yml의 모든 라이브러리를 선언해 보겠습니다.

 algolia-javascript: js: https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js : { type: external } https://cdn.jsdelivr.net/npm/[email protected] : { type: external } js/algolia.js: {preprocess: false} dependencies: - core/drupalSettings css: theme: https://cdn.jsdelivr.net/npm/[email protected]/themes/algolia-min.css: { type: external, minified : true }

변수 액세스 및 설정

데모 검색 블록(DemoSearchBlock.php)​​에서 Drupal 구성에서 Algolia 변수에 액세스하고 다음 코드를 사용하여 drupalSettings에 할당합니다.

 public function build() { // Get Algolia config. $config = $this->configFactory->get('search_api.server.algolia_search'); $app_id = $config->get('backend_config.application_id'); $api_key = $config->get('backend_config.api_key'); $index_name = $this->configFactory->get('search_api.index.vehicles_data')->get('options.algolia_index_name'); return [ '#theme' => 'demo_search_block', '#attached' => [ 'library' => 'algolia_search_interface/algolia-javascript', 'drupalSettings' => [ 'app_id' => $app_id, 'index_name' => $index_name, 'api_key' => $api_key, ], ], '#cache' => [ 'contexts' => [ 'url.path', 'url.query_args', ], ], ]; }

템플릿 추가

이제 사용자 정의 블록에 대한 템플릿을 추가해야 합니다. algolia_search_interface.module에서 사용자 정의 블록에 대한 hook_theme를 정의해 보겠습니다.

 /** * Implements hook_theme(). */ function algolia_search_interface_theme($existing, $type, $theme, $path) { return [ 'demo_search_block' => [], ]; }

컨테이너 정의

이제 템플릿 데이터를 정의하여 검색 결과를 렌더링해 보겠습니다. InstantSearch 라이브러리가 결과를 렌더링할 컨테이너를 간단히 정의합니다. algolia_search_interface-block.html.twig에 4개의 컨테이너를 추가합니다.

 - Searchbox (#searchbox) - Search results (#hits) - Facets (#filter-widget) - Pagination (#pagination)

 <div class="demo-instant-search"> <div class="algolia-searchbox"></div> <div class="align-left"> <div class="filter-header">{{ 'Manufacturer'|t }}</div> <div></div> </div> <div class="right-col"> <div></div> </div> </div> <div></div>

검색 결과 표시

이제 검색 결과를 표시하는 데 필요한 모든 구성 요소가 있습니다. 이제 InstantSearch를 사용하여 결과를 표시하는 방법을 살펴보겠습니다.

먼저 drupalSettings 변수에서 인덱스 이름, 응용 프로그램 ID 및 응용 프로그램 키를 가져옵니다. algolia.js의 Algolia API에 전달해야 합니다.

 const index_name = drupalSettings.index_name; const app_id = drupalSettings.app_id; const api_key = drupalSettings.api_key;

응용 프로그램 키와 색인 이름이 있으면 InstantSearch를 초기화하고 시작해야 합니다.

 const search = instantsearch({ indexName: index_name, searchClient: algoliasearch(app_id, api_key), }); search.start();

이 시점에서 InstantSearch에 위젯을 추가하지 않았기 때문에 검색 페이지에 어떤 차이도 보이지 않을 것입니다. 이제 즉시 검색에 검색 창 위젯을 추가해 보겠습니다.

 search.addWidget( instantsearch.widgets.searchBox({ container: '#searchbox', }) );

하나의 위젯을 추가하기 위해 InstantSearch 의 addwidget() 함수를 사용했음을 주목하십시오. 여러 위젯을 사용하는 경우 addwidget() 을 사용할 수 없습니다. 다음과 같은 방식으로 사용해야 합니다.

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

이제 검색 페이지에서 검색 결과를 볼 수 있습니다. 그러나 우리가 볼 수 있듯이 결과는 매우 원시 형식입니다.

이를 구체화하기 위해 아래와 같이 템플릿 속성을 사용하여 결과 형식을 지정해 보겠습니다.

 instantsearch.widgets.hits({ container: '#hits', templates: { item: ` <h3 class="title">{{{title.value}}}</h3> <p class="detail"> {{{field_manufacturer}}} </p> <p class="uri">{{{uri}}} </p> `, }, }),

결과가 괜찮아 보이지만 페이지에 표시하기 전에 데이터를 처리해야 하는 경우가 있습니다. 예를 들어 위의 코드에서 URI 값은 'public://' 형식입니다. 여기에서 transformItems 속성을 사용하여 요구 사항에 따라 결과를 변경할 수 있습니다.

 instantsearch.widgets.hits({ container: '#hits', transformItems(items) { return items.map(item => ({ ...item, url: item.uri.replace('public://', /sites/default/files/'), })); }, templates: { item: ` <h3 class="title">{{{title.value}}}</h3> <p class="detail"> {{{field_manufacturer }}} </p> <p class="uri">{{{url}}} </p> `, }, })

결과 세트가 준비되면 이제 패싯 데이터를 표시하도록 이동하여 검색 기준을 필터링할 수 있습니다. 동일한 addWidgets() 함수를 사용하여 패싯을 표시합니다.

 search.addWidgets([ instantsearch.widgets. refinementList({ container: '#filter-widget, attribute: 'field_manufacturer', }), ]);

속성 옵션은 패싯을 표시할 필드 이름을 정의합니다. 이 또한 Algolia 대시보드에서 미리 구성해야 합니다.

마지막으로 더 많은 결과를 표시할 수 있도록 페이지 매김을 추가해 보겠습니다.

 search.addWidgets([ instantsearch.widgets. pagination({ container: '#pagination, }), ]);

그리고 우리는 끝났습니다! 최종 코드는 이렇게 생겼습니다.

 const index_name = drupalSettings.index_name; const app_id = drupalSettings.app_id; const api_key = drupalSettings.api_key; if(index_name && app_id && api_key) { const search = instantsearch({ indexName: index_name, searchClient: algoliasearch(app_id, api_key), }); search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', }), instantsearch.widgets.hits({ container: '#hits', transformItems(items) { return items.map(item => ({ ...item, url: item.uri.replace('public://', '/sites/default/files/'), })); }, templates: { item: ` <h3 class="title">{{{_highlightResult.title.value}}}</h3> <p class="detail"> {{{_highlightResult.field_manufacturer.value}}} </p> <p class="uri"><img src="{{{url}}}" /></p>`, }, }), instantsearch.widgets.refinementList({ container: '#filter-widget', attribute: 'field_manufacturer', }), instantsearch.widgets.pagination({ container: '#pagination', }) ]); search.start(); } else { throw "Algolia settings missing";}

마지막 생각들

2부로 구성된 기사 시리즈를 마치면서 Algolia에 대해 충분히 이해하셨기를 바랍니다. Algolia 검색을 Drupal과 통합하여 강력하고 소비자 수준의 검색을 구축하는 방법을 다루었습니다. 또한 InstantSearch 라이브러리를 사용하여 검색 결과를 사용자 지정하는 방법에 대해서도 논의했습니다. 최고의 웹을 활용하면서 야심 찬 Drupal 경험을 구축하는 데 도움을 줄 수 있는 100% Drupal 중심 회사를 찾고 계십니까? 여러분의 의견을 듣고 싶습니다!