Javascript 如何使用w/Lunr.js在Jekyll中打开包含搜索结果的新页面?
使用本指南在标题为Javascript 如何使用w/Lunr.js在Jekyll中打开包含搜索结果的新页面?,javascript,html,jekyll,lunrjs,Javascript,Html,Jekyll,Lunrjs,使用本指南在标题为results.html的新页面中显示搜索结果时遇到了一些问题 似乎它的设置是在进行搜索的页面上显示结果,这不是我要找的 我想做的是在index.html中有一个搜索框,按下包含搜索结果的按钮后,它会打开一个新页面 目前,在任何页面上进行的任何搜索都只会在那里显示结果 \u包括/search lunr.html <script src="/js/lunr.js"></script> <script> {% assign counter =
results.html
的新页面中显示搜索结果时遇到了一些问题
似乎它的设置是在进行搜索的页面上显示结果,这不是我要找的
我想做的是在index.html
中有一个搜索框,按下包含搜索结果的按钮后,它会打开一个新页面
目前,在任何页面上进行的任何搜索都只会在那里显示结果
\u包括/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>
{% include search-lunr.html %}
我所能想到的唯一一件事就是在表单中添加一个操作,然后打开
\u 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>
...
{% 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>
...