Fork me on GitHub

如何为你的文章加密

即使是最简陋的密码功能,也足以阻止90%的目光

缘起

刚开始使用Hexo来写自己的博客,便爱上了它带来的简洁与便捷,只需hexo g -d,便可以发布一篇文章,这时的满足感让我兴奋,像是日记,更像是一个perfect的小天地。然而,这片天地终究是放置在互联网上的,有时免不了想写一些不太私密,但又不想随便拱手置于睽睽众目之下,于是,一个极简陋的文章加密器诞生了。

实现原理

背景:hexo静态网页

众所周知,hexo最终编译出来的是一堆静态的文件,也就是说每一篇文章的所有信息是毫无更改地展示在博客页面中的(rss差不多就是如此),当你在网络上请求查看一片文章时, 这篇文章的所有代码信息就全部被传输过来了

了解到的两种方法:敲好用的promt函数 VS crypto-js.js的AES算法接口

promt函数

引例

  1. js的阻塞机制:在以往的经验中,当页面中有调用alert();函数的时候,整个页面会停止运行,直到你点击确定之后,页面的中的代码才会继续执行下去

  2. 在这里需要的也是这样一个假象:阻止整个页面的渲染,直到你输入了正确的密码才能让页面继续渲染实际的文章

  3. 可是alert只有提醒的功能,没有输入的功能,所以这里要用到的是promt函数。

介绍

  1. alert()和promt()都是windows对象中的方法,promt()的作用是显示一个提示用户输入的对话框,其返回值就是用户输入的字符串

  2. 此时只需将你设置的密码与promt()返回的字符串相比较即可;若不匹配,只需将当前页的location属性设置为上一个页面或者首页即可

crypto-js.js的AES算法接口

emmm这个实在是不会,所以就不说了,但是感觉比promt()函数复杂一点【虽然说密码性会好很多,但是这个简陋的密码器足矣】

实现步骤

  1. 定位到themes->next->layout->_partials->head.swig(使用了next主题那么久,这些文件结构还是能看懂滴)

  2. 将下面的代码粘贴到所有的<meta>标签之后就可以了

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

注: page变量:就是你在hexo new的时候生成的文件中最顶部的东西

Adhere to original technology sharing, your support will encourage me to continue to create!