为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

呼如林 2024-01-11 16:32:24
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实际上不会改变任何内容。任何帮助,将不胜感激。谢谢。
查看完整描述

1 回答

?
MMMHUHU

TA贡献1834条经验 获得超8个赞

如果您希望搜索结果仅出现在单独的页面上,则您将希望搜索表单具有指向它的操作。该术语将被传递到该页面,然后该页面可以对其进行处理并显示搜索结果。

该模板演示了这个确切的流程:

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


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

从{% 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>

...


查看完整回答
反对 回复 2024-01-11
  • 1 回答
  • 0 关注
  • 46 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信