如何使用w/Lunr.js在Jekyll中打开带有搜索结果的新页面

Question

使用本指南在标题为results.html的新页面中显示搜索结果时遇到了一些问题。

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

我想做的是在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)
});
function lunr_search(term) {
document.getElementById('lunrsearchresults').innerHTML = '<ul></ul>';
if(term) {
document.getElementById('lunrsearchresults').innerHTML = "<p>Search results for '" + term + "'</p>" + document.getElementById('lunrsearchresults').innerHTML;
//put results on the screen.
var results = idx.search(term);
if(results.length>0){
//console.log(idx.search(term));
//if results
for (var i = 0; i < results.length; i++) {
// more statements
var ref = results[i]['ref'];
var url = documents[ref]['url'];
var title = documents[ref]['title'];
var body = documents[ref]['body'].substring(0,160)+'...';
document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML + "<li class='lunrsearchresult'><a href='" + url + "'><span class='title'>" + title + "</span><br /><span class='body'>"+ body +"</span><br /><span class='url'>"+ url +"</span></a></li>";
}
} else {
document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = "<li class='lunrsearchresult'>No results found...</li>";
}
}
return false;
}
</script>
<style>
.lunrsearchresult .title {color: #d9230f;}
.lunrsearchresult .url {color: silver;}
.lunrsearchresult a {display: block; color: #777;}
.lunrsearchresult a:hover, .lunrsearchresult a:focus {text-decoration: none;}
.lunrsearchresult a:hover .title {text-decoration: underline;}
</style>

<form onSubmit="return lunr_search(document.getElementById('lunrsearch').value);">
<p><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value="" placeholder="Search via Lunr.js" /></p>
</form>
<div id="lunrsearchresults">
<ul></ul>
</div>

_layout/index.html

{% include search-lunr.html %}

---

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

如有任何帮助，我们将不胜感激。谢谢

Answer 1

如果您只想在单独的页面上显示搜索结果，您会希望搜索表单有一个指向它的操作。该术语将传递到该页面，然后该页面可以处理它并显示搜索结果。

这个模板展示了这个确切的流程：

• 回购：https://github.com/CloudCannon/edition-jekyll-template
• 现场演示：https://long-pig.cloudvent.net/

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

---

要用上面的代码大致复制它：

1. 从index.html中删除{% include search-lunr.html %}。

2. 把这个放在index.html:上

   <form action="{{ site.baseurl }}/search/" method="get">
   <input type="text" name="q">
   <input type="submit" value="Search">
   </form>
   

3. 然后在您的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>
   ...