我是想把博客当做个人总结的地方,类似于日记,因为操作方便,随时更改,而且还可以共享给其他人看。但是总有些文章不想给别人看,就当做自己的私密日记,所以就想实现私密文件的功能。
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