通过复选框将finefinementList与Jekyll排序结果一起使用

时间:2019-02-21 18:28:52

标签: algolia instantsearch.js instantsearch

首先,能否与Jekyll一起使用finementList?我想通过Jekyll中的标签通过复选框来优化搜索。

这是我的Algolia代码块

const search = instantsearch({
    appId: '{{ site.algolia.application_id }}',
    indexName: '{{ site.algolia.index_name }}',
    apiKey: '{{ site.algolia.search_only_api_key }}'
});

const hitTemplate = function (hit) {

    let date = '';
    if (hit.dateposted) {
        date = moment.unix(hit.dateposted).format('MMM D, YYYY');
    }

    let url = `{{ site.url }}${hit.url}#${hit.anchor}`;

    const title = hit._highlightResult.title.value;

    let breadcrumbs = '';
    if (hit._highlightResult.headings) {
        breadcrumbs = hit._highlightResult.headings.map(match => {
            return `<span class="post-breadcrumb">${match.value}</span>`
        }).join(' > ')
    }

    const content = hit._highlightResult.html.value;

    return `
        <div class="post-item">
            <h2><a class="post-link" href="${hit.url}">${hit.jobtitle}</a></h2>
            <span class="text-muted text-lower date-posted">Posted ${hit.dateposted}</span>
            <div class="listing-meta my-3">
                <span class="listing-tags text-lower">${hit.salary}</span>
                <span class="listing-tags text-lower">${hit.location}</span>
            </div>

            <div class="post-snippet">${content}</div>
            <hr>
        </div>
    `;
}

// Adding searchbar and results widgets
search.addWidget(
    instantsearch.widgets.searchBox({
        container: '#search-searchbar',
        placeholder: 'Search for vacancies',
        poweredBy: true // This is required if you're on the free Community plan
    })
);
search.addWidget(
    instantsearch.widgets.hits({
        container: '#search-hits',
        empty: 'No results',
        templates: {
            item: hitTemplate 
        }
    })
);


// Starting the search
search.start();

我已经使用Jekyll教程来进行排序,这对Algolia来说还是很新的。我浏览了文档并提出了...

search.addWidget(
    instantsearch.widgets.refinementList({
        container: '#refinement-list',
        attribute: 'tags',
        templates: {
            item: `
            <a href="{{url}}" style="{{#isRefined}}font-weight: bold{{/isRefined}}">
                <span>{{label}} ({{count}})</span>
            </a>
            `,
        }
    })
);

这似乎不起作用,当添加到以上代码中位于最后一个小部件下的代码中时,搜索也会从网站上消失。

我在做什么错了:(

0 个答案:

没有答案