如何在即时搜索页面的 Algolia 搜索结果页面中显示 HTML 内容

Question

我有一个带有 Algolia 的 WordPress 网站，我想在搜索结果中以 HTML 格式显示产品 short_description（即 post_excpert）。

是的，我正在使用 woocommerce 产品插件。

属性已经用 Algolia 编入索引并在响应中返回以及来自 Algolia。

示例内容：

<table class="product-tab"> <tbody> <tr> <td>ABCD Power</td> <td>20 kW </td> </tr> <tr> <td>Volatile</td> <td>Article 63A</td> </tr> <tr> <td>Working File</td> <td>750 cm</td> </tr> <tr> <td>Hard Weight</td> <td>720 kg</td> </tr> </tbody> </table>

目前显示的是 HTML 标签，但我希望 HTML 应用于属性。

一些其他笔记

使用即时搜索
名为 search-by-algolia-instant-relevant-results 的 Wordpress 插件（我知道它已存档）:)

文件Instantsearch.php

var search = instantsearch({
                    appId: algolia.application_id,
                    apiKey: algolia.search_api_key,
                    indexName: algolia.indices.searchable_posts.name,
                    urlSync: {
                        mapping: {'q': 's'},
                        trackedParameters: ['query']
                    },
                    searchParameters: {
                        facetingAfterDistinct: true,
                        highlightPreTag: '__ais-highlight__',
                        highlightPostTag: '__/ais-highlight__'
                    }
                });

search.addWidget(
                    instantsearch.widgets.hits({
                        container: '#algolia-hits',
                        hitsPerPage: 10,
                        escapeHTML: true,
                        templates: {
                            empty: 'No results were found for "<strong>{{query}}</strong>".',
                            item: wp.template('instantsearch-hit')
                        },
                        transformData: {
                            item: function (hit) {

                                function replace_highlights_recursive (item) {                                  
                                  if( item instanceof Object && item.hasOwnProperty('value')) {
                                      item.value = _.escape(item.value);
                                      item.value = item.value.replace(/__ais-highlight__/g, '<em>').replace(/__\/ais-highlight__/g, '</em>');
                                  } else {
                                      for (var key in item) {
                                          item[key] = replace_highlights_recursive(item[key]);
                                      }
                                  }
                                  return item;
                                }

                                hit._highlightResult = replace_highlights_recursive(hit._highlightResult);
                                hit._snippetResult = replace_highlights_recursive(hit._snippetResult);

                                return hit;
                            }
                        }
                    })
                );

模板

<script type="text/html" id="tmpl-instantsearch-hit">
        <article itemtype="http://schema.org/Article">
            <# if ( data.images.thumbnail ) { #>
            <div class="ais-hits--thumbnail">
                <a href="{{ data.permalink }}" title="{{ data.post_title }}">
                    <img src="{{ data.images.thumbnail.url }}" alt="{{ data.post_title }}" title="{{ data.post_title }}" itemprop="image" />
                </a>
            </div>
            <# } #>

            <div class="ais-hits--content">
                <h2 itemprop="name headline"><a href="{{ data.permalink }}" title="{{ data.post_title }}" itemprop="url">{{{ data._highlightResult.post_title.value }}}</a></h2>
                <div class="excerpt">
                    <p>
            <# if ( data._snippetResult['content'] ) { #>
              <span class="suggestion-post-content">{{{ data._snippetResult['content'].value }}}</span>
            <# } #> 
                    </p>
                    <?php /*<p> <# if ( data.post_excerpt ) { #>
                    <span class="post-short-description">{{ data.post_excerpt }} </span>
                    <# } #></p> */ ?>
                </div>
            </div>
            <div class="ais-clearfix"></div>
        </article>
    </script>

Answer 1

只是回答问题，供参考。在下面的形式中添加了大括号并且有效。

<p> <# if ( data.post_excerpt ) { #>
<span class="post-short-description">{{{ data.post_excerpt }}} </span>
<# } #></p>

如何在即时搜索页面的 Algolia 搜索结果页面中显示 HTML 内容

How to show HTML content in the Algolia search results page on Instant Search Page

php

wordpress

algolia