如何使用 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: //github.com/CloudCannon/edition-jekyll-template

• 现场演示： https: //long-pig.cloudvent.net/

这是一个非常好的解决方案，因为您的网站查看者只需在执行搜索时加载并运行该代码，这对于合理大小的索引来说可以节省大量成本。

---

用上面的代码粗略地复制它：

从{% include search-lunr.html %}您的index.html.

把这个放在index.html：

<form action="{{ site.baseurl }}/search/" method="get">

  <input type="text" name="q">

  <input type="submit" value="Search">

</form>

然后在你的search.html：

...

{% include search-lunr.html %}

<script>

  function getQueryVariable(variable) {

    var query = window.location.search.substring(1),

      vars = query.split("&");

    for (var i = 0; i < vars.length; i++) {

      var pair = vars[i].split("=");

      if (pair[0] === variable) {

        return decodeURIComponent(pair[1].replace(/\+/g, '%20')).trim();

      }

    }

  }

  var query = decodeURIComponent((getQueryVariable("q") || "").replace(/\+/g, "%20"));

  lunr_search(query);

</script>

...