alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Mark the search result of algolia search.

Browse Source
This commit is contained in:
凡梦星尘 2022-08-02 15:12:49 +08:00
parent 1917055634
commit fdd49ab3cb
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/_common/components/third-party/search.scss vendored
View File

@ -106,6 +106,13 @@
padding: 5px 0; padding: 5px 0;
} }
} }
mark.search-keyword {
background: transparent;
border-bottom: 1px dashed $red;
color: $red;
font-weight: bold;
}
} }
@if $algolia_search_enable { @if $algolia_search_enable {
@ -169,11 +176,4 @@
margin: auto; margin: auto;
} }
} }
mark.search-keyword {
background: transparent;
border-bottom: 1px dashed $red;
color: $red;
font-weight: bold;
}
} }

16
assets/js/third-party/search/algolia.js vendored
View File

@ -21,6 +21,10 @@ document.addEventListener('DOMContentLoaded', () => {
} }
}); });
const markKeyWords = function(content) {
return content.replaceAll("<mark>", '<mark class="search-keyword">');
};
if (typeof pjax === 'object') { if (typeof pjax === 'object') {
search.on('render', () => { search.on('render', () => {
pjax.refresh(document.querySelector('.algolia-hits')); pjax.refresh(document.querySelector('.algolia-hits'));
@ -62,16 +66,16 @@ document.addEventListener('DOMContentLoaded', () => {
instantsearch.widgets.hits({ instantsearch.widgets.hits({
container: '.algolia-hits', container: '.algolia-hits',
escapeHTML: false, escapeHTML: true,
templates: { templates: {
item: data => { item: data => {
const { title, excerpt, excerptStrip, content } = data._highlightResult; const { title, content } = data._highlightResult;
let result = `<a href="${data.permalink}" class="search-result-title">${title.value}</a>`; let result = `<a href="${data.permalink}" class="search-result-title">${markKeyWords(title.value)}</a>`;
const content = excerpt || excerptStrip || content; //const content = excerpt || excerptStrip || content;
if (content && content.value) { if (content && content.value) {
const div = document.createElement('div'); const div = document.createElement('div');
div.innerHTML = content.value; div.innerHTML = markKeyWords(content.value);
result += `<a href="${data.permalink}"><p class="search-result">${div.textContent.substring(0, 200)}...</p></a>`; result += `<a href="${data.permalink}"><p class="search-result">${div.innerHTML.substring(0, 200)}...</p></a>`;
} }
return result; return result;
}, },