1 前言
本博客采用银狐大佬的Matery主题,是从master分支下载的。昨儿想把自己的相册中有些隐私的搞个密码,结果始终报aes
错:
ERROR
ReferenceError: /Users/嘻嘻嘻/Documents/MyGit/xxxx.github.io/themes/matery/layout/gallery.ejs:54
52| <div id="mygallery">
53| <div class="waterfall" id="encrypt-blog" style="display:none">
>> 54| <%- aes(imageStr, page.password) %>
55| </div>
56| </div>
57| <% } else { %>
aes is not defined
在网上找了很多,最终得以解决,在此记录下修复过程。
2 加密辅助函数
本想通过引入某些加密插件来弥补主题中缺失的aes
加密方法,结果在ejs
文件里面用常规的方法引入npm插件
是不行的,无论是import 'crypto-js'
还是 require('crypto-js')
都是不行的。
所以只能看看Hexo官方的解决方案,由于之前自己弄相册搞出些道道,知道通过hexo.inject
可以注入自己想要的东东。因而有了以下代码:
'use strict';
const CryptoJS = require('crypto-js');
hexo.extend.helper.register('aes', function (content, password) {
content = escape(content);
content = CryptoJS.enc.Utf8.parse(content);
content = CryptoJS.enc.Base64.stringify(content);
content = CryptoJS.AES.encrypt(content, String(password)).toString();
return content;
});
我将其放置在主题目录
:matery/scripts/helpers/encrypt.js
。
注册一个名为aes
的辅助函数,这样才能在ejs文件里使用它。
这样在gallery.ejs
文件中,aes
才能调用到。
<div class="container">
<div class="photo-wrapper">
<% if (page.password ) { %>
<script src="/lib/crypto-js.js"></script>
<script src="/js/gallery-encrypt.js"></script>
<div id="hbe-security">
<div class="hbe-input-container">
<input type="password" class="hbe-form-control" id="pass" placeholder="请输入密码查看内容"/>
<a href="javascript:;" class="btn-decrypt" id="btn_decrypt">解密</a>
</div>
</div>
<div id="mygallery">
<div class="waterfall" id="encrypt-blog" style="display:none">
<%- aes(imageStr, page.password) %>
</div>
</div>
<% } else { %>
<div class="waterfall" id="encrypt-blog">
<%- imageStr %>
</div>
<% } %>
</div>
</div>
3 注意事项
需要注意的是上面HTML里引入的crypto-js.js
这个文件,只有安装了hexo-blog-encrypt
插件发布后才会生成,如果你不想安装这个插件,则需要手动安装crypto-js
:
npm i crypto-js,
然后在插件目录下找到crypto-js.js
文件,复制出来放到source/js
下,引用路径也要改一下。
由于原主题已经有了源文件,所以这里只需要安装下即可。