website: add search enter shortcat key to jump to the page. 32af5af854

index.html

@@ -556,15 +556,15 @@
 <a href="https://github.com/Jack-Zhang-1314" title="fw_qaq">
   <img src="https://avatars.githubusercontent.com/u/82551626?v=4" width="42;" alt="fw_qaq">
 </a>
+<a href="https://github.com/mofelee" title="mofelee">
+  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee">
+</a>
 <a href="https://github.com/Alex-Programer" title="Alex">
   <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex">
 </a>
 <a href="https://github.com/expoli" title="expoli">
   <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli">
 </a>
-<a href="https://github.com/mofelee" title="mofelee">
-  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee">
-</a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
   <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson">
 </a>
@@ -689,7 +689,7 @@
 <!--rehype:class=home-card&style=margin:1.2rem 0;display: flex;justify-content: center;-->
 <p>如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 <a href="https://hub.docker.com/r/wcjiang/reference">docker</a> 快捷部署 web 版。</p>
 
-</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2022/11/21 15:50:00</footer></footer><script src="data.js" defer></script><script src="js/fuse.min.js" defer></script><script src="js/main.js" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
+</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2022/11/21 16:00:23</footer></footer><script src="data.js" defer></script><script src="js/fuse.min.js" defer></script><script src="js/main.js" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
   <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
 </svg><input id="mysearch-input" type="search" placeholder="搜索备忘清单"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">取消</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
 </html>

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 += `<a href="${href}" class="active"><span>${label}</span><sup>${tags}</sup></a>`;
     } else {
       menuHTML += `<a href="${href}"><span>${label}</span><sup>${tags}</sup></a>`;
@@ -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 `<mark>${txt}</mark>`
       })
-      const href = isHome ? data.item.path : data.item.path.replace('docs/', '');
+      const href = getDocUrl(data.item.path);
       if (item.l < 3) {
         sectionHTML += `<li><a href="${href + item.a}">${label}</a><div>`
       } else {

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;
 }