如何使用 w/ Lunr.js 在 Jekyll 中打开包含搜索结果的新页面?
How to open a new page with search results in Jekyll using w/ Lunr.js?
我在尝试使用本指南 here 在标题为 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
,这实际上并没有改变任何东西。
如有任何帮助,我们将不胜感激。谢谢。
如果您只希望搜索结果位于单独的页面上,您会希望搜索表单具有指向它的操作。该字词将被传递到该页面,然后该页面可以处理它并显示搜索结果。
此模板展示了这个确切的流程:
这是一个非常好的解决方案,因为您的站点查看者只需加载并 运行 该代码,如果他们执行搜索,这可以通过合理大小的索引节省大量资金。
用上面的代码大致复制它:
从您的 index.html
中删除 {% include search-lunr.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>
...
我在尝试使用本指南 here 在标题为 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
,这实际上并没有改变任何东西。
如有任何帮助,我们将不胜感激。谢谢。
如果您只希望搜索结果位于单独的页面上,您会希望搜索表单具有指向它的操作。该字词将被传递到该页面,然后该页面可以处理它并显示搜索结果。
此模板展示了这个确切的流程:
这是一个非常好的解决方案,因为您的站点查看者只需加载并 运行 该代码,如果他们执行搜索,这可以通过合理大小的索引节省大量资金。
用上面的代码大致复制它:
从您的
index.html
中删除{% include search-lunr.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> ...