更新:虽然我还没有弄清楚这一点,但我找到了一个可行的替代方法:使用 Lunr.js 搜索 | 哲基尔法典
我一直在关注使用 lunr.js 进行Jekyll 搜索的 CloudCannon Academy 教程,但经过多次试验和错误后,我仍然无法正常工作。
当我打开我的默认 Web 浏览器 Microsoft Edge 时,出现以下错误search.js
:
search.js:47
Uncaught TypeError: idx.add is not a function
at search.js:47:11
at search.js:57:3
我一直在一步一步地学习教程,所以我基本上从上面链接的网页中复制了所有内容。我不明白的是,我当然已经像教程那样定义了 idx 。通过检查源代码,我已成功检索到所有帖子数据并将它们存储在 JSON 中。我做错了什么?
为了您的信息,我在下面附上了我的代码:
(function() {
function displaySearchResults(results, store) {
var searchResults = document.getElementById('search-results');
if (results.length) { // Are there any results?
var appendString = '';
for (var i = 0; i < results.length; i++) { // Iterate over the results
var item = store[results[i].ref];
appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
}
searchResults.innerHTML = appendString;
} else {
searchResults.innerHTML = '<li>No results found</li>';
}
}
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var 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'));
}
}
}
var searchTerm = getQueryVariable('query');
if (searchTerm) {
document.getElementById('search-box').setAttribute("value", searchTerm);
// Initalize lunr with the fields it will be searching on. I've given title
// a boost of 10 to indicate matches on this field are more important.
var idx = lunr(function () {
this.field('id');
this.field('title', { boost: 10 });
this.field('content');
});
for (var key in window.store) { // Add the data to lunr
idx.add({
'id': key,
'title': window.store[key].title,
'content': window.store[key].content
});
var results = idx.search(searchTerm); // Get lunr to perform a search
displaySearchResults(results, window.store); // We'll write this in the next section
}
}
})();