Hexo教程4-文章简单加密

我是想把博客当做个人总结的地方,类似于日记,因为操作方便,随时更改,而且还可以共享给其他人看。但是总有些文章不想给别人看,就当做自己的私密日记,所以就想实现私密文件的功能。
Hexo把博客编译成纯静态文件,方便部署,可是不方便加密。

参考大神博客:
https://blog.csdn.net/Lancelot_Lewis/article/details/53422901?tdsourcetag=s_pctim_aiomsg
由于 Hexo 最终编译出来的文件是纯静态的,也就意味着文章的所有信息其实还是原封不动展示在页面中的,当你输入一篇文章的网址,所有的内容就已经跟随网络传输过来了。那我博客使用的加密是怎么实现的呢?

这就要讲到 js 的阻塞机制了,在以往的经验中,当页面中有调用alert();函数的时候,整个页面会停止运行,直到你点击确定之后,页面的中的代码才会继续执行下去。我们这里需要的也是这样一个假象,阻止整个页面的渲染,直到你输入了正确的密码才能让页面继续渲染实际的文章。可是alert只有提醒的功能,没有输入的功能,所以这里要用到的是promt函数。例子参见如下:

var password = promt(‘请输入文章密码’);
alert(password);

把上述代码添加到themes\next\layout\_partials\head.swig文件。
按道理是添加在任何地方都行,但是推荐加在所有的标签之后,个人建议,仅做参考。

<script>
   (function()
   {
        if('{{ page.password }}')
        {
            if (prompt('请输入文章密码') !== '{{ page.password }}')
            {
                alert('密码错误!');
                history.back();
            }
        }
    })();
</script>

最后一步,需要在文章顶部加上password.

password: 12345678

您的支持将鼓励我继续创作!