buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 20:51:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix search error & add name field in data.json #105 b473d99111

Browse Source
This commit is contained in:
jaywcjlove
2022-11-21 05:57:52 +00:00
parent de9628c851
commit a9c6bcc060
5 changed files with 274 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data.js
View File

File diff suppressed because one or more lines are too long

2
data.json
View File

File diff suppressed because one or more lines are too long

477
index.html
View File

File diff suppressed because one or more lines are too long

28
js/main.js
View File

@ -41,8 +41,9 @@ const fuse = new Fuse(REFS_DATA, {
matchEmptyQuery: !0, matchEmptyQuery: !0,
threshold: .1, threshold: .1,
keys: [ keys: [
{ name: "title", weight: 12 }, { name: "name", weight: 12 },
{ name: 'intro', weight: 2 }, { name: 'intro', weight: 2 },
{ name: 'tags', weight: 2 },
{ name: 'sections.t', weight: 5 } { name: 'sections.t', weight: 5 }
], ],
}); });
@ -70,9 +71,13 @@ document.addEventListener('keydown', (ev) => {
} }
}); });
let result = []
let inputValue = '';
function showSearch() { function showSearch() {
document.body.classList.add('search'); document.body.classList.add('search');
searchBox.classList.add('show'); searchBox.classList.add('show');
searchResult('')
searchInput.focus(); searchInput.focus();
} }
@ -80,22 +85,29 @@ function hideSearch() {
document.body.classList.remove('search'); document.body.classList.remove('search');
searchBox.classList.remove('show'); searchBox.classList.remove('show');
} }
let result = [] function getValueReg(val = '') {
let inputValue = ''; return new RegExp(val.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d'), 'ig');
}
function searchResult(value) { function searchResult(value) {
inputValue = value; inputValue = value;
result = fuse.search(value); result = fuse.search(value);
if (!value) {
result = REFS_DATA.map(item => ({ item: item }));
}
let menuHTML = ''; let menuHTML = '';
result.forEach((item, idx) => { result.forEach((item, idx) => {
const label = item.item.title.replace(new RegExp(value, 'ig'), (txt) => { const label = item.item.name.replace(getValueReg(value), (txt) => {
return `<mark>${txt}</mark>`
})
const tags = (item.item.tags || []).join(',').replace(getValueReg(value), (txt) => {
return `<mark>${txt}</mark>` return `<mark>${txt}</mark>`
}) })
const href = isHome ? item.item.path : item.item.path.replace('docs/', ''); const href = isHome ? item.item.path : item.item.path.replace('docs/', '');
if (idx === 0) { if (idx === 0) {
menuHTML += `<a href="${href}" class="active">${label}</a>`; menuHTML += `<a href="${href}" class="active"><span>${label}</span><sup>${tags}</sup></a>`;
} else { } else {
menuHTML += `<a href="${href}">${label}</a>`; menuHTML += `<a href="${href}"><span>${label}</span><sup>${tags}</sup></a>`;
} }
}); });
searchMenu.innerHTML = menuHTML; searchMenu.innerHTML = menuHTML;
@ -116,13 +128,13 @@ function searchResult(value) {
function searchSectionsResult(idx = 0) { function searchSectionsResult(idx = 0) {
const data = result[idx] || []; const data = result[idx] || [];
const title = (data.item?.intro || '').replace(new RegExp(inputValue, 'ig'), (txt) => { const title = (data.item?.intro || '').replace(getValueReg(inputValue), (txt) => {
return `<mark>${txt}</mark>` return `<mark>${txt}</mark>`
}); });
let sectionHTML = `<h3>${title}</h3><ol>`; let sectionHTML = `<h3>${title}</h3><ol>`;
if (data && data.item && data.item.sections) { if (data && data.item && data.item.sections) {
data.item.sections.forEach((item, idx) => { data.item.sections.forEach((item, idx) => {
const label = item.t.replace(new RegExp(inputValue, 'ig'), (txt) => { const label = item.t.replace(getValueReg(inputValue), (txt) => {
return `<mark>${txt}</mark>` return `<mark>${txt}</mark>`
}) })
const href = isHome ? data.item.path : data.item.path.replace('docs/', ''); const href = isHome ? data.item.path : data.item.path.replace('docs/', '');

13
style/style.css
View File

@ -1234,7 +1234,6 @@ body.search {
height: 100%; height: 100%;
} }
#mysearch.show .mysearch-result > * { #mysearch.show .mysearch-result > * {
width: 50%;
overflow-y: auto; overflow-y: auto;
padding: 0.6rem; padding: 0.6rem;
} }
@ -1319,12 +1318,24 @@ body.search {
white-space: pre-wrap; white-space: pre-wrap;
text-decoration: none; text-decoration: none;
color: var(--color-fg-default); color: var(--color-fg-default);
align-items: center;
justify-content: space-between;
}
#mysearch-menu a > sup {
color: var(--color-fg-subtle);
font-size: 0.7rem;
} }
#mysearch-menu a:hover, #mysearch-menu a:hover,
#mysearch-menu a.active { #mysearch-menu a.active {
background-color: var(--color-neutral-muted); background-color: var(--color-neutral-muted);
border-radius: 0.5rem; border-radius: 0.5rem;
} }
#mysearch-menu {
width: 25rem;
}
#mysearch-content {
flex: 1;
}
#mysearch-content ol li div a:hover { #mysearch-content ol li div a:hover {
background-color: var(--primary-color); background-color: var(--primary-color);
color: #fff; color: #fff;