【Hexo】修复Matery主题相册加密bug


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下,引用路径也要改一下。

由于原主题已经有了源文件,所以这里只需要安装下即可。

4 参考文章


文章作者: Kezade
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Kezade !
评论
  目录