如何使用 Lunr.js 在 Jekyll 中打开包含搜索结果的新页面？

Question

results.html我在尝试在标题为 using this Guide here的新页面中显示搜索结果时遇到了一些麻烦。

似乎它的设置是在正在进行搜索的页面上显示结果，这不是我要找的。

我想做的是在 中添加一个搜索框index.html，按下包含搜索结果的按钮后会打开一个新页面。

目前，在任何页面上进行的任何搜索都只会显示结果。

_includes/search-lunr.html

<script src="/js/lunr.js"></script>

<script>

{% assign counter = 0 %}

var documents = [{% for page in site.pages %}{% if page.url contains '.xml' or page.url contains 'assets' %}{% else %}{

    "id": {{ counter }},

    "url": "{{ site.url }}{{ page.url }}",

    "title": "{{ page.title }}",

    "body": "{{ page.content | markdownify | replace: '.', '. ' | replace: '</h2>', ': ' | replace: '</h3>', ': ' | replace: '</h4>', ': ' | replace: '</p>', ' ' | strip_html | strip_newlines | replace: '  ', ' ' | replace: '"', ' ' }}"{% assign counter = counter | plus: 1 %}

    }, {% endif %}{% endfor %}{% for page in site.without-plugin %}{

    "id": {{ counter }},

    "url": "{{ site.url }}{{ page.url }}",

    "title": "{{ page.title }}",

    "body": "{{ page.content | markdownify | replace: '.', '. ' | replace: '</h2>', ': ' | replace: '</h3>', ': ' | replace: '</h4>', ': ' | replace: '</p>', ' ' | strip_html | strip_newlines | replace: '  ', ' ' | replace: '"', ' ' }}"{% assign counter = counter | plus: 1 %}

    }, {% endfor %}{% for page in site.posts %}{

    "id": {{ counter }},

    "url": "{{ site.url }}{{ page.url }}",

    "title": "{{ page.title }}",

    "body": "{{ page.date | date: "%Y/%m/%d" }} - {{ page.content | markdownify | replace: '.', '. ' | replace: '</h2>', ': ' | replace: '</h3>', ': ' | replace: '</h4>', ': ' | replace: '</p>', ' ' | strip_html | strip_newlines | replace: '  ', ' ' | replace: '"', ' ' }}"{% assign counter = counter | plus: 1 %}

    }{% if forloop.last %}{% else %}, {% endif %}{% endfor %}];

var idx = lunr(function () {

    this.ref('id')

    this.field('title')

    this.field('body')

    documents.forEach(function (doc) {

        this.add(doc)

    }, this)

});

</script>

我唯一能想到的就是向表单添加一个操作，然后打开该操作，这_layout/results.html实际上不会改变任何内容。

任何帮助，将不胜感激。谢谢。

Answer 1

如果您希望搜索结果仅出现在单独的页面上，则您将希望搜索表单具有指向它的操作。该术语将被传递到该页面，然后该页面可以对其进行处理并显示搜索结果。该模板演示了这个确切的流程：仓库： https:&nbsp;//github.com/CloudCannon/edition-jekyll-template现场演示： https:&nbsp;//long-pig.cloudvent.net/这是一个非常好的解决方案，因为您的网站查看者只需在执行搜索时加载并运行该代码，这对于合理大小的索引来说可以节省大量成本。用上面的代码粗略地复制它：从{% include search-lunr.html %}您的index.html.把这个放在index.html：<form action="{{ site.baseurl }}/search/" method="get">&nbsp; <input type="text" name="q">&nbsp; <input type="submit" value="Search"></form>然后在你的search.html：...{% include search-lunr.html %}<script>&nbsp; function getQueryVariable(variable) {&nbsp; &nbsp; var query = window.location.search.substring(1),&nbsp; &nbsp; &nbsp; vars = query.split("&");&nbsp; &nbsp; for (var i = 0; i < vars.length; i++) {&nbsp; &nbsp; &nbsp; var pair = vars[i].split("=");&nbsp; &nbsp; &nbsp; if (pair[0] === variable) {&nbsp; &nbsp; &nbsp; &nbsp; return decodeURIComponent(pair[1].replace(/\+/g, '%20')).trim();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }&nbsp; var query = decodeURIComponent((getQueryVariable("q") || "").replace(/\+/g, "%20"));&nbsp; lunr_search(query);</script>...