前端实现全局 ⌘+K 菜单导航
在国外网站和软件中经常看到用 ⌘+K 唤起弹窗面板，通过用来集成搜索和导航，或者一些用户高频的操作，以增强网站的使用体验。
Paco 大神的 ⌘+K 项目地址
感觉不够轻量，于是在网上找到了纯粹的 HTML + CSS + JS 实现方案，在 GPT 的帮助下优化了一些交互，并集成到了 Hugo 中，目前使用下来还行，没有发现明显的 bug，有几个小特性还待交给 GPT 继续写完。
功能如下：
1、全局 ⌘ + K 呼出弹窗（我没有 Win 系统，不确定 Control + K 是否有效）
2、数字1-9（你也可以改成0-9）快捷导航
3、按 ESC 或弹窗外的空白区域关闭弹窗。
4、默认选中第一个
简单说下在 Hugo 里的使用方法：
1、在 layouts/partials/ 下新建文件 cmdk.html
1<link rel="stylesheet" href="/css/cmdk.css" />
2
3<nav
4 class="command-menu"
5 aria-hidden="true"
6 aria-expanded="true"
7 role="navigation"
8>
9 <div class="command-menu-content">
10 <ul class="groups list-reset" role="listbox" aria-label="Site navigation">
11 <li class="group" role="option">
12 <span id="group-1-label" class="group-label"
13 >网站导航，按 ESC 键或点击页面空白处关闭。</span
14 >
15
16 <ul
17 id="group-options-1"
18 class="list-reset group-options group-options-1"
19 aria-labelledby="group-1-label"
20 >
21 <li class="group-option">
22 <a id="" href="/" class="group-option-link">
23 <iconpark-icon
24 name="home"
25 size="18"
26 style="color: inherit"
27 ></iconpark-icon>
28
29 首页
30 </a>
31
32 <div class="shortcuts">
33 <kbd>1</kbd>
34 </div>
35 </li>
36
37 <li class="group-option">
38 <a id="" href="/timeline/" class="group-option-link">
39 <iconpark-icon
40 name="timeline"
41 size="18"
42 style="color: inherit"
43 ></iconpark-icon>
44
45 时间线
46 </a>
47
48 <div class="shortcuts">
49 <kbd>2</kbd>
50 </div>
51 </li>
52
53 <li class="group-option">
54 <a id="" href="/gallery/" class="group-option-link">
55 <iconpark-icon
56 name="gallery"
57 size="18"
58 style="color: inherit"
59 ></iconpark-icon>
60
61 图库
62 </a>
63
64 <div class="shortcuts">
65 <kbd>3</kbd>
66 </div>
67 </li>
68 </ul>
69 </li>
70 </ul>
71 </div>
72</nav>
2、在 static/css/ 下新建cmdk.css
样式参考代码，注意一些自定义的内容修改替换。
3、在 static/js/ 下新建cmdk.js
4、在你的 footer.html 底部加上以下代码：
1{{ partial "cmdk" . }}
2<script src="/js/cmdk.js"></script>
3<script>
4// 关闭cmdk窗口
5
6document.addEventListener("click", function (e) {
7 const commandMenu = document.querySelector(".command-menu");
8 if (
9 commandMenu &&
10 !e.target.closest(".command-menu") &&
11 !commandMenu.hidden
12 ) {
13 console.log("Click outside menu, hiding menu.");
14
15 hideCommandMenu(); // 调用你的隐藏菜单的函数
16 }
17});
18</script>
5、执行hugo server --disableFastRender，清理浏览器缓存然后看看效果。
如果有什么 bug ，欢迎反馈。