即使是最简单的密码功能也足以阻止90%的访问者
一、前言
一开始使用Hexo的时候，是喜欢它的简单：因为可以直接编译成纯静态文件，方便部署。可是在使用过程中，又发现诸多不便：也因为它全是纯静态页面。突发奇想，能不能给文章加上一个加密访问的功能……
在经过实践之后，运用到自己博客中，发现有不少的访客对这个功能甚是感兴趣，所以也就在这里找个时间写写自己加密的小诀窍吧算是。
二、原理
由于 Hexo 最终编译出来的文件是纯静态的，也就意味着文章的所有信息其实还是原封不动展示在页面中的，当你输入一篇文章的网址，所有的内容就已经跟随网络传输过来了。那我博客使用的加密是怎么实现的呢？
这就要讲到 js 的阻塞机制了，在以往的经验中，当页面中有调用alert();函数的时候，整个页面会停止运行，直到你点击确定之后，页面的中的代码才会继续执行下去。我们这里需要的也是这样一个假象，阻止整个页面的渲染，直到你输入了正确的密码才能让页面继续渲染实际的文章。可是alert只有提醒的功能，没有输入的功能，所以这里要用到的是promt函数。例子参见如下：
var password = promt('请输入文章密码');
alert(password);
三、实践
究竟要把上述代码加在哪里呢？
找到themes->next->layout->_partials->head.swig文件。
按道理是添加在任何地方都行，但是推荐加在所有的<meta>标签之后，个人建议，仅做参考。以下是我加的代码：
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误！');
history.back();
}
}
})();
</script>
如果你好奇page.password是什么东西，那么恭喜你，你对 Hexo 的结构还是很熟悉的。page这个变量就是你在hexo new的时候生成文件中最顶部的东西，以下我给出这篇文章的头部参考：
---
title: Hexo文章简单加密访问
date: 2016-12-01 10:45:29
tags: hexo
categories: 博客
keywords:
- Hexo
- 加密
description: 文章访问密码：password
password: password
---
这样我们就好像使用静态页面完成了部分只有动态页面能完成的东西。
四、总结
本来只是简单的纯静态页面，但是经历不断的更新和改进，便有了静态页面统计访问量的工具；有了静态页面添加评论的工具；甚至有了静态页面进行搜索的功能等等。个人想出来的静态页面加密功能根本算不上技术上的创新，只能说是一点小技巧的应用吧，小技巧也能迷惑住大家的眼睛，也算是喜事一件。
密码功能目前只能在我个人博客查看效果
附上传送门：http://lancelot_lewis.coding.me/2016/12/01/blog/hexo-password/
网友评论