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;
}
}
mark.search-keyword {
background: transparent;
border-bottom: 1px dashed $red;
color: $red;
font-weight: bold;
}
}
@if $algolia_search_enable {
@ -169,11 +176,4 @@
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') {
search.on('render', () => {
pjax.refresh(document.querySelector('.algolia-hits'));
@ -62,16 +66,16 @@ document.addEventListener('DOMContentLoaded', () => {
instantsearch.widgets.hits({
container: '.algolia-hits',
escapeHTML: false,
escapeHTML: true,
templates: {
item: data => {
const { title, excerpt, excerptStrip, content } = data._highlightResult;
let result = `<a href="${data.permalink}" class="search-result-title">${title.value}</a>`;
const content = excerpt || excerptStrip || content;
const { title, content } = data._highlightResult;
let result = `<a href="${data.permalink}" class="search-result-title">${markKeyWords(title.value)}</a>`;
//const content = excerpt || excerptStrip || content;
if (content && content.value) {
const div = document.createElement('div');
div.innerHTML = content.value;
result += `<a href="${data.permalink}"><p class="search-result">${div.textContent.substring(0, 200)}...</p></a>`;
div.innerHTML = markKeyWords(content.value);
result += `<a href="${data.permalink}"><p class="search-result">${div.innerHTML.substring(0, 200)}...</p></a>`;
}
return result;
},