亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 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 關注
  • 152 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號