前端实现全局 ⌘+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 ,欢迎反馈。

欢迎留言