Acrylic 主题自定义八：禁用部分快捷键

本篇文章介绍了如何在 Acrylic 主题中禁用部分快捷键，包括新增配置、核心代码和引入文件的步骤。具体实现方法是阻止键盘事件的默认行为，让 Ctrl、Shift、Alt 和 F12 这几个键失效，同时配合 CSS 禁用选中功能。需要注意的是，这种方法只适用于普通用户，对于开发人员来说作用不大。

新增配置

在主题配置文件(_config.Acrylic.yml) 中新增配置

1
2
# 禁用
prohibit: true

核心代码

大部分快捷键都会使用到三个按键：Ctrl、Shift 和 Alt，还有打开控制台的快捷键 F12

而禁用快捷键就是让这几个键失效即可

可以利用阻止键盘事件的默认行为来实现这个效果，下面就是实现方法

在 themes/Acrylic/source/js 文件夹下新建 prohibit.js，代码如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function prohibit() {
  document.onselectstart = function (e) {
    return false;
  };

  document.oncopy = function (e) {
    return false;
  };

  document.onkeydown = function (e) {
    const event = e || window.event;
    const key = event.key;

    if (event.ctrlKey) {
      return false;
    }
    if (event.shiftKey) {
      return false;
    }
    if (event.altKey) {
      return false;
    }
    if (key == "F12") {
      return false;
    }
  };
}

prohibit();

还可以配合 CSS 禁用选中功能

代码文件位置： themes/Acrylic/source/css/main.css

代码如下👇

1
2
3
html {
  user-select: none;
}

引入文件

在 themes/Acrylic/layout/partial/head.ejs 中引入

1
2
3
<% if (theme.prohibit){ %>
    <script type="text/javascript" src="/js/prohibit.js"></script>
<% } %>

上面这种方法只适用于普通用户，对于开发人员来说作用不大