hexo-blog-encrypt是我平时使用比较多的一个密码插件。但在移动设备上输入密码回车经常无法起效。针对这点我特意去修改了一下
截至写这篇文章之前，又回去看了一下插件的Github Issue区，Issue#222里的各位大佬已经给出了更好的答案和方案。
在Issue的下面，发现了一个在原插件基础上修复了回车问题的hexo-blog-encrypt-plus
hexo-blog-encrypt-plus
以及作者博客对此插件的博文：https://blog.frwalker.top/posts/3b03/
这里不再多说，感兴趣的朋友可以去上面的链接找。下面的内容主要还是记录我的解决方案
在移动设备上点回车的情况下，如果下方有评论区，那么移动设备上的回车会自动识别成切到下一行，导致无法正常提交密码查看文章。
不过本人不会js，只能拿AI出来修改。不过事实证明AI也是某种程度上确实能帮到人一些，虽然我其实修改了好多次才能正常运行。
一开始自己尝试在hbe.js的第269行修改了监听提交密码的键码（默认是13，也就是回车）
1
2
| mainElement.addEventListener('keydown', async (event) => {
if (event.isComposing || event.keyCode === 13) {
|
修改为别的按键，但移动端依旧无法使用。因为移动端的键盘使用都是虚拟的按键键盘，压根没有键码一说。
只能是自己想办法添加一个按钮的js代码进去。
首先选择一个主题文件进行修改，原版插件给了好几个主题，我选的是hbe.up
记得在hexo的config将密码插件使用的主题给切换成对应的
hbe.up的原版代码:
1
2
3
4
5
6
7
8
9
10
11
| <div class="hbe hbe-container" id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}">
<script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script>
<div class="hbe hbe-content">
<div class="hbe hbe-input hbe-input-up">
<input class="hbe hbe-input-field hbe-input-field-up" type="password" id="hbePass">
<label class="hbe hbe-input-label hbe-input-label-up" for="hbePass">
<span class="hbe hbe-input-label-content hbe-input-label-content-up">{{hbeMessage}}</span>
</label>
</div>
</div>
</div>
|
修改之后的：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div class="hbe hbe-container" id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}">
<script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script>
<div class="hbe hbe-content">
<div class="hbe hbe-input hbe-input-up" style="display: flex; flex-direction: column; align-items: center; gap: 20px;">
<div style="position: relative; width: 100%;">
<input class="hbe hbe-input-field hbe-input-field-up" type="password" id="hbePass" style="width: 100%;">
<label class="hbe hbe-input-label hbe-input-label-up" for="hbePass">
<span class="hbe hbe-input-label-content hbe-input-label-content-up">{{hbeMessage}}</span>
</label>
</div>
<button type="button" id="confirmButton" style="width: 100%;">Confirm</button>
</div>
</div>
</div>
|
可以看到我在js文件中加了一个按钮。
接着要在hbe.js中修改触发密码验证的机制（未修改前是按回车之后验证密码）
在原来的hbe.js中的第268行到文件最末尾改为以下内容：
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
| document.getElementById('confirmButton').addEventListener('click', async () => {
const password = document.getElementById('hbePass').value;
const keyMaterial = await getKeyMaterial(password);
const hmacKey = await getHmacKey(keyMaterial);
const decryptKey = await getDecryptKey(keyMaterial);
const iv = await getIv(keyMaterial);
decrypt(decryptKey, iv, hmacKey).then((result) => {
console.log(`Decrypt result: ${result}`);
if (result) {
cryptoObj.subtle.exportKey('jwk', decryptKey).then((dk) => {
cryptoObj.subtle.exportKey('jwk', hmacKey).then((hmk) => {
const newStorageData = {
'dk': dk,
'iv': arrayBufferToHex(iv),
'hmk': hmk,
};
storage.setItem(storageName, JSON.stringify(newStorageData));
});
});
}
});
});
}
hbeLoader();
})();
|
这样修改完后至少是能用了。
样式我已经尽力去修改了，虽然但是还是丑。
我试着去把键码监听和添加按钮检测添加到一起，但是无法生效。
因此我只能把键码监听的代码部分删了换成按钮监听。
个人能力有限，就先这样吧。
注意一点，在修改完密码插件后，用hexo s预览文章时，密码按钮点击了是无效的，hexo d部署上去才能生效。