From ada798ab697cfed4fade3138d1d0c90d967c3969 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Mon, 21 Nov 2022 08:00:59 +0000 Subject: [PATCH] website: add search enter shortcat key to jump to the page. 32af5af854d43016b7e76562f4c6757a14e7f88c --- index.html | 8 ++++---- js/main.js | 22 ++++++++++++++++------ style/style.css | 2 +- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index ec5ac7bd..444da2d6 100644 --- a/index.html +++ b/index.html @@ -556,15 +556,15 @@ fw_qaq + + mofelee + Alex expoli - - mofelee - Jefferson @@ -689,7 +689,7 @@

如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 docker 快捷部署 web 版。

-
+
diff --git a/js/main.js b/js/main.js index 72189076..93ba4317 100644 --- a/js/main.js +++ b/js/main.js @@ -55,7 +55,9 @@ const closeBtn = document.getElementById('mysearch-close'); const searchMenu = document.getElementById('mysearch-menu'); const searchContent = document.getElementById('mysearch-content'); const isHome = document.body.classList.contains('home'); - +function getDocUrl(url = '') { + return isHome ? url : url.replace('docs/', ''); +} searchBtn.addEventListener('click', (ev) => { ev.preventDefault(); showSearch(); @@ -65,15 +67,22 @@ closeBtn.addEventListener('click', hideSearch); searchBox.addEventListener('click', hideSearch); searchBox.firstChild.addEventListener('click', (ev) => ev.stopPropagation()); searchInput.addEventListener('input', (evn) => searchResult(evn.target.value)); + +let activeMenu = {} +let result = [] +let inputValue = ''; + document.addEventListener('keydown', (ev) => { + console.log('ev::', ev) if (ev.metaKey && ev.key.toLocaleLowerCase() === 'k') { searchBox.classList.contains('show') ? hideSearch() : showSearch(); } + if (ev.key.toLocaleLowerCase() === 'enter') { + console.log('activeMenu:', activeMenu) + window.location.href = getDocUrl(activeMenu.path) + } }); -let result = [] -let inputValue = ''; - function showSearch() { document.body.classList.add('search'); searchBox.classList.add('show'); @@ -105,6 +114,7 @@ function searchResult(value) { }) const href = isHome ? item.item.path : item.item.path.replace('docs/', ''); if (idx === 0) { + activeMenu = item.item; menuHTML += `${label}${tags}`; } else { menuHTML += `${label}${tags}`; @@ -117,6 +127,7 @@ function searchResult(value) { anchor.onmouseenter = (evn) => { data.forEach(item => item.classList.remove('active')); evn.target.classList.add('active'); + activeMenu = result[idx]; searchSectionsResult(idx); } }); @@ -125,7 +136,6 @@ function searchResult(value) { item.addEventListener('click', hideSearch); }) } - function searchSectionsResult(idx = 0) { const data = result[idx] || []; const title = (data.item?.intro || '').replace(getValueReg(inputValue), (txt) => { @@ -137,7 +147,7 @@ function searchSectionsResult(idx = 0) { const label = item.t.replace(getValueReg(inputValue), (txt) => { return `${txt}` }) - const href = isHome ? data.item.path : data.item.path.replace('docs/', ''); + const href = getDocUrl(data.item.path); if (item.l < 3) { sectionHTML += `
  • ${label}
    ` } else { diff --git a/style/style.css b/style/style.css index 57c1a50d..3447166e 100644 --- a/style/style.css +++ b/style/style.css @@ -549,7 +549,7 @@ a.text-grey { .header-nav .menu .searchbtn span:last-child { transition: all 0.3s; border: 1px solid var(--color-border-default); - border-radius: 3px; + border-radius: 0.4rem; padding: 1px 1px 1px 3px; letter-spacing: 3px; }