adoralaura/hugo-book-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

优化搜索，里面的摘要实现，添加视觉颜色

Browse source
This commit is contained in:
dingtalk_dxneyp 2024-01-30 21:31:20 +08:00
parent 2d229c98a7
commit 0f12973881
1 changed files with 32 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
assets/search.js
View file

@ -81,83 +81,58 @@
const searchHits = window.bookSearchIndex.search(input.value, 10); const searchHits = window.bookSearchIndex.search(input.value, 10);
searchHits.forEach(function (page) { searchHits.forEach(function (page) {
const li = element('<li><a href></a><span></span><small></small></li>'); const li = element('<li><a href></a><small contenteditable="false" ></small></li>');
const a = li.querySelector('a'), small = li.querySelector('small'),span = li.querySelector('span'); const a = li.querySelector('a'), small = li.querySelector('small');
a.href = page.href; a.href = page.href;
a.textContent = page.title; a.textContent = page.title;
small.textContent = page.section;
// 使用 Promise+async 实现 fetch(page.href)
async function asyncFn() { .then((response) => response.text())
let returnData = await getSomething(page.href) .then((content) => {
return returnData // Initialize the DOM parser
} var parser = new DOMParser();
// Parse the text
// 因为asyncFn()返回的是 Promise对象，而不是直接返回值，所以需要.then来获取值进行操作 var doc = parser.parseFromString(content, "text/html");
asyncFn().then(content => { // You can now even select part of that html as you would in the regular DOM
// 去除html标签 // Example:
content = content.replace(/(<([^>]+)>)/ig, ''); // var docArticle = doc.querySelector('article').innerHTML;
// 按换行符分割成数组 content = doc.querySelector('#content').querySelector('article').textContent
let contentArray = lengthCutting(content, 15); let contentArray = lengthSplit(content, 20);
console.log(contentArray)
contentArray.forEach(line => { contentArray.forEach(line => {
if (line.match(/^\s+$/) || line.match(/^[ ]+$/) || line.match(/^[ ]*$/) || line.match(/^\s*$/)) { if (line.match(/^\s+$/) || line.match(/^[ ]+$/) || line.match(/^[ ]*$/) || line.match(/^\s*$/)) {
console.log(1+line);
return; return;
} }
if (line.search(input.value) != -1 && span.textContent == '') { if (line.search(input.value) != -1 && small.innerHTML == '') {
console.log(2 + line); small.innerHTML = line.replaceAll(input.value, String.raw`<strong style="color:red" >${input.value}</strong>`);
span.textContent = line;
return; return;
} }
}) })
if (span.textContent == '') { if (small.innerHTML == '') {
contentArray.forEach(line => { contentArray.forEach(line => {
if (line.match(/^\s+$/) || line.match(/^[ ]+$/) || line.match(/^[ ]*$/) || line.match(/^\s*$/)) { if (line.match(/^\s+$/) || line.match(/^[ ]+$/) || line.match(/^[ ]*$/) || line.match(/^\s*$/)) {
console.log(3 + line);
return; return;
} }
input.value.split('').forEach(s => { input.value.split('').forEach(s => {
console.log(1111 + s) if (line.search(s) != -1 && small.innerHTML == '') {
console.log(2222 +line) small.innerHTML = line.replaceAll(s, String.raw`<strong style="color:red" >${s}</strong>`);
if (line.search(s) != -1 && span.textContent == '') {
console.log(4 + line);
span.textContent = line;
return; return;
} }
}) })
}) })
} }
console.log(888+span.textContent) });
})
results.appendChild(li); results.appendChild(li);
}); });
} }
function lengthCutting(str, num) { function lengthSplit(str, num) {
let strArr = []; let strArr = [];
for (let i = 0; i < str.length; i += num) strArr.push(str.slice(i, i + num)); for (let i = 0; i < str.length; i += num) strArr.push(str.slice(i, i + num));
return strArr; return strArr;
} }
// 封装数据请求方法（异步）
function getSomething(link) {
return new Promise(resolve => {
var xhr = new XMLHttpRequest();
xhr.open('GET', link, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
resolve(xhr.responseText);
}
}
})
}
/** /**
* @param {String} content * @param {String} content
* @returns {Node} * @returns {Node}