github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-17 18:22:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimize local search (#64)

Browse Source 
* Highlight search keywords

* Sort search results by the number of keywords included
This commit is contained in:
Mimi 2020-07-29 17:05:45 +08:00 committed by GitHub
parent 1651043319
commit 0ebb0c5810
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 211 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layout/_partials/search/localsearch.njk
View File

@ -3,7 +3,7 @@
<i class="fa fa-search"></i>
</span>
<div class="search-input-container">
<input autocomplete="off" autocapitalize="off"
<input autocomplete="off" autocapitalize="off" maxlength="80"
placeholder="{{ __('search.placeholder') }}" spellcheck="false"
type="search" class="search-input">
</div>

16
scripts/helpers/next-config.js
View File

@ -9,7 +9,6 @@ const { parse } = require('url');
*/
hexo.extend.helper.register('next_config', function() {
const { config, theme, next_version } = this;
config.algolia = config.algolia || {};
const exportConfig = {
hostname : parse(config.url).hostname || config.url,
root : config.root,
@ -24,19 +23,22 @@ hexo.extend.helper.register('next_config', function() {
lazyload : theme.lazyload,
pangu : theme.pangu,
comments : theme.comments,
algolia : {
motion : theme.motion,
prism : config.prismjs.enable && !config.prismjs.preprocess
};
if (theme.algolia_search && theme.algolia_search.enable) {
config.algolia = config.algolia || {};
exportConfig.algolia = {
appID : config.algolia.applicationID,
apiKey : config.algolia.apiKey,
indexName: config.algolia.indexName,
hits : theme.algolia_search.hits,
labels : theme.algolia_search.labels
},
localsearch: theme.local_search,
motion : theme.motion,
prism : config.prismjs.enable && !config.prismjs.preprocess
};
};
}
if (config.search) {
exportConfig.path = config.search.path;
exportConfig.localsearch = theme.local_search;
}
return `<script class="hexo-configurations">
var NexT = window.NexT || {};

13
source/css/_common/components/third-party/search.styl vendored
View File

@ -154,12 +154,6 @@ if (hexo-config('local_search.enable')) {
font-weight: bold;
}
.search-keyword {
border-bottom: 1px dashed $red;
color: $red;
font-weight: bold;
}
#search-result {
display: flex;
height: calc(100% - 55px);
@ -172,4 +166,11 @@ if (hexo-config('local_search.enable')) {
margin: auto;
}
}
mark.search-keyword {
background: transparent;
border-bottom: 1px dashed $red;
color: $red;
font-weight: bold;
}
}

343
source/js/local-search.js
View File

@ -1,52 +1,56 @@
/* global CONFIG */
document.addEventListener('DOMContentLoaded', () => {
if (!CONFIG.path) {
console.warn('`hexo-generator-searchdb` plugin is not installed!');
return;
}
// Popup Window
let isfetched = false;
let datas;
let isXml = true;
// Search DB path
let searchPath = CONFIG.path;
if (searchPath.length === 0) {
searchPath = 'search.xml';
} else if (searchPath.endsWith('json')) {
isXml = false;
}
const input = document.querySelector('.search-input');
const resultContent = document.getElementById('search-result');
const getIndexByWord = (word, text, caseSensitive) => {
if (CONFIG.localsearch.unescape) {
const div = document.createElement('div');
div.innerText = word;
word = div.innerHTML;
}
const wordLen = word.length;
if (wordLen === 0) return [];
let startPosition = 0;
let position = [];
const getIndexByWord = (words, text, caseSensitive = false) => {
const index = [];
if (!caseSensitive) {
text = text.toLowerCase();
word = word.toLowerCase();
}
while ((position = text.indexOf(word, startPosition)) > -1) {
index.push({ position, word });
startPosition = position + wordLen;
}
return index;
const included = new Set();
words.forEach(word => {
if (CONFIG.localsearch.unescape) {
const div = document.createElement('div');
div.innerText = word;
word = div.innerHTML;
}
const wordLen = word.length;
if (wordLen === 0) return;
let startPosition = 0;
let position = -1;
if (!caseSensitive) {
text = text.toLowerCase();
word = word.toLowerCase();
}
while ((position = text.indexOf(word, startPosition)) > -1) {
index.push({ position, word });
included.add(word);
startPosition = position + wordLen;
}
});
// Sort index by position of keyword
index.sort((left, right) => {
if (left.position !== right.position) {
return left.position - right.position;
}
return right.word.length - left.word.length;
});
return [index, included];
};
// Merge hits into slices
const mergeIntoSlice = (start, end, index, searchText) => {
let item = index[index.length - 1];
const mergeIntoSlice = (start, end, index) => {
let item = index[0];
let { position, word } = item;
const hits = [];
let searchTextCountInSlice = 0;
const count = new Set();
while (position + word.length <= end && index.length !== 0) {
if (word === searchText) {
searchTextCountInSlice++;
}
count.add(word);
hits.push({
position,
length: word.length
@ -54,13 +58,13 @@ document.addEventListener('DOMContentLoaded', () => {
const wordEnd = position + word.length;
// Move to next position of hit
index.pop();
index.shift();
while (index.length !== 0) {
item = index[index.length - 1];
item = index[0];
position = item.position;
word = item.word;
if (wordEnd > position) {
index.pop();
index.shift();
} else {
break;
}
@ -70,136 +74,114 @@ document.addEventListener('DOMContentLoaded', () => {
hits,
start,
end,
searchTextCount: searchTextCountInSlice
count: count.size
};
};
// Highlight title and content
const highlightKeyword = (text, slice) => {
const highlightKeyword = (val, slice) => {
let result = '';
let prevEnd = slice.start;
slice.hits.forEach(hit => {
result += text.substring(prevEnd, hit.position);
const end = hit.position + hit.length;
result += `<b class="search-keyword">${text.substring(hit.position, end)}</b>`;
prevEnd = end;
});
result += text.substring(prevEnd, slice.end);
let index = slice.start;
for (const { position, length } of slice.hits) {
result += val.substring(index, position);
index = position + length;
result += `<mark class="search-keyword">${val.substr(position, length)}</mark>`;
}
result += val.substring(index, slice.end);
return result;
};
const getResultItems = keywords => {
const resultItems = [];
datas.forEach(({ title, content, url }) => {
// The number of different keywords included in the article.
const [indexOfTitle, keysOfTitle] = getIndexByWord(keywords, title);
const [indexOfContent, keysOfContent] = getIndexByWord(keywords, content);
const includedCount = new Set([...keysOfTitle, ...keysOfContent]).size;
// Show search results
const hitCount = indexOfTitle.length + indexOfContent.length;
if (hitCount === 0) return;
const slicesOfTitle = [];
if (indexOfTitle.length !== 0) {
slicesOfTitle.push(mergeIntoSlice(0, title.length, indexOfTitle));
}
let slicesOfContent = [];
while (indexOfContent.length !== 0) {
const item = indexOfContent[0];
const { position } = item;
// Cut out 100 characters. The maxlength of .search-input is 80.
const start = Math.max(0, position - 20);
const end = Math.min(content.length, position + 80);
slicesOfContent.push(mergeIntoSlice(start, end, indexOfContent));
}
// Sort slices in content by included keywords' count and hits' count
slicesOfContent.sort((left, right) => {
if (left.count !== right.count) {
return right.count - left.count;
} else if (left.hits.length !== right.hits.length) {
return right.hits.length - left.hits.length;
}
return left.start - right.start;
});
// Select top N slices in content
const upperBound = parseInt(CONFIG.localsearch.top_n_per_article, 10);
if (upperBound >= 0) {
slicesOfContent = slicesOfContent.slice(0, upperBound);
}
let resultItem = '';
url = new URL(url, location.origin);
url.searchParams.append('highlight', keywords.join(' '));
if (slicesOfTitle.length !== 0) {
resultItem += `<li><a href="${url.href}" class="search-result-title">${highlightKeyword(title, slicesOfTitle[0])}</a>`;
} else {
resultItem += `<li><a href="${url.href}" class="search-result-title">${title}</a>`;
}
slicesOfContent.forEach(slice => {
resultItem += `<a href="${url.href}"><p class="search-result">${highlightKeyword(content, slice)}...</p></a>`;
});
resultItem += '</li>';
resultItems.push({
item: resultItem,
id : resultItems.length,
hitCount,
includedCount
});
});
return resultItems;
};
const inputEventFunction = () => {
if (!isfetched) return;
const searchText = input.value.trim().toLowerCase();
const keywords = searchText.split(/[-\s]+/);
if (keywords.length > 1) {
keywords.push(searchText);
}
const resultItems = [];
const resultContent = document.getElementById('search-result');
let resultItems = [];
if (searchText.length > 0) {
// Perform local searching
datas.forEach(({ title, content, url }) => {
const titleInLowerCase = title.toLowerCase();
const contentInLowerCase = content.toLowerCase();
let indexOfTitle = [];
let indexOfContent = [];
let searchTextCount = 0;
keywords.forEach(keyword => {
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
});
// Show search results
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
const hitCount = indexOfTitle.length + indexOfContent.length;
// Sort index by position of keyword
[indexOfTitle, indexOfContent].forEach(index => {
index.sort((itemLeft, itemRight) => {
if (itemRight.position !== itemLeft.position) {
return itemRight.position - itemLeft.position;
}
return itemLeft.word.length - itemRight.word.length;
});
});
const slicesOfTitle = [];
if (indexOfTitle.length !== 0) {
const tmp = mergeIntoSlice(0, title.length, indexOfTitle, searchText);
searchTextCount += tmp.searchTextCountInSlice;
slicesOfTitle.push(tmp);
}
let slicesOfContent = [];
while (indexOfContent.length !== 0) {
const item = indexOfContent[indexOfContent.length - 1];
const { position, word } = item;
// Cut out 100 characters
let start = position - 20;
let end = position + 80;
if (start < 0) {
start = 0;
}
if (end < position + word.length) {
end = position + word.length;
}
if (end > content.length) {
end = content.length;
}
const tmp = mergeIntoSlice(start, end, indexOfContent, searchText);
searchTextCount += tmp.searchTextCountInSlice;
slicesOfContent.push(tmp);
}
// Sort slices in content by search text's count and hits' count
slicesOfContent.sort((sliceLeft, sliceRight) => {
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
return sliceRight.hits.length - sliceLeft.hits.length;
}
return sliceLeft.start - sliceRight.start;
});
// Select top N slices in content
const upperBound = parseInt(CONFIG.localsearch.top_n_per_article, 10);
if (upperBound >= 0) {
slicesOfContent = slicesOfContent.slice(0, upperBound);
}
let resultItem = '';
if (slicesOfTitle.length !== 0) {
resultItem += `<li><a href="${url}" class="search-result-title">${highlightKeyword(title, slicesOfTitle[0])}</a>`;
} else {
resultItem += `<li><a href="${url}" class="search-result-title">${title}</a>`;
}
slicesOfContent.forEach(slice => {
resultItem += `<a href="${url}"><p class="search-result">${highlightKeyword(content, slice)}...</p></a>`;
});
resultItem += '</li>';
resultItems.push({
item: resultItem,
id : resultItems.length,
hitCount,
searchTextCount
});
}
});
resultItems = getResultItems(keywords);
}
if (keywords.length === 1 && keywords[0] === '') {
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x"></i></div>';
} else if (resultItems.length === 0) {
resultContent.innerHTML = '<div id="no-result"><i class="far fa-frown fa-5x"></i></div>';
} else {
resultItems.sort((resultLeft, resultRight) => {
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
return resultRight.searchTextCount - resultLeft.searchTextCount;
} else if (resultLeft.hitCount !== resultRight.hitCount) {
return resultRight.hitCount - resultLeft.hitCount;
resultItems.sort((left, right) => {
if (left.includedCount !== right.includedCount) {
return right.includedCount - left.includedCount;
} else if (left.hitCount !== right.hitCount) {
return right.hitCount - left.hitCount;
}
return resultRight.id - resultLeft.id;
return right.id - left.id;
});
resultContent.innerHTML = `<ul class="search-result-list">${resultItems.map(result => result.item).join('')}</ul>`;
window.pjax && window.pjax.refresh(resultContent);
@ -207,7 +189,10 @@ document.addEventListener('DOMContentLoaded', () => {
};
const fetchData = () => {
fetch(CONFIG.root + searchPath)
// Search DB path
const searchPath = CONFIG.root + CONFIG.path;
const isXml = !CONFIG.path.endsWith('json');
fetch(searchPath)
.then(response => response.text())
.then(res => {
// Get the contents from search data
@ -227,11 +212,68 @@ document.addEventListener('DOMContentLoaded', () => {
return data;
});
// Remove loading animation
document.getElementById('no-result').innerHTML = '<i class="fa fa-search fa-5x"></i>';
inputEventFunction();
});
};
/**
* This function returns the parsed url parameters of the
* current request. Multiple values per key are supported,
* it will always return arrays of strings for the value parts.
*/
const getQueryParameters = () => {
const s = location.search;
const parts = s.substr(s.indexOf('?') + 1).split('&');
const result = {};
for (const part of parts) {
const [key, value] = part.split('=', 2);
if (key in result) {
result[key].push(value);
} else {
result[key] = [value];
}
}
return result;
};
// Highlight by wrapping node in mark elements with the given class name
const highlightText = (node, slice, className) => {
const val = node.nodeValue;
let index = slice.start;
const children = [];
for (const { position, length } of slice.hits) {
const text = document.createTextNode(val.substring(index, position));
index = position + length;
const mark = document.createElement('mark');
mark.className = className;
mark.appendChild(document.createTextNode(val.substr(position, length)));
children.push(text, mark);
}
node.nodeValue = val.substring(index, slice.end);
children.forEach(element => {
node.parentNode.insertBefore(element, node);
});
};
// Highlight the search words provided in the url in the text
const highlightSearchWords = () => {
const params = getQueryParameters();
const keywords = params.highlight ? params.highlight[0].split(/\+/).map(decodeURIComponent) : [];
const body = document.querySelector('.post-body');
if (!keywords.length || !body) return;
const walk = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null, false);
const allNodes = [];
while (walk.nextNode()) {
if (!walk.currentNode.parentNode.matches('button, select, textarea')) allNodes.push(walk.currentNode);
}
allNodes.forEach(node => {
const [indexOfNode] = getIndexByWord(keywords, node.nodeValue);
if (!indexOfNode.length) return;
const slice = mergeIntoSlice(0, node.nodeValue.length, indexOfNode);
highlightText(node, slice, 'search-keyword');
});
};
if (CONFIG.localsearch.preload) {
fetchData();
}
@ -268,7 +310,10 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
document.addEventListener('pjax:success', onPopupClose);
document.addEventListener('pjax:success', () => {
highlightSearchWords();
onPopupClose();
});
window.addEventListener('keyup', event => {
if (event.key === 'Escape') {
onPopupClose();