方法1

1. 原理：

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

2. 操作：

打开 blog/themes/next/layout/_partials/head.swig, 插上代码：

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

然后在需要设置密码的文章头添加password:123456即可

3.缺点：

可以通过搜索工具查看相关内容

可以通过 curl 命令获得网站的源代码：

curl -L www.xxx.com (已加密的文章地址) # 这里的 -L 是解决部分网站 30X 跳转的问题的

方法2

安装hexo-blog-encrypt 插件: npm install hexo-blog-encrypt

在配置文件_config.yml中添加：

# Security
##
encrypt:
    enable: true
    default_abstract: 内容已被保护，请输入密码后查看！</br>
    default_message: 请输入密码后查看
    default_template:
                    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
                    <div id="security">
                        <div class="input-container">
                            <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
                            <label for="pass"> {{message}} </label>
                            <div class="bottom-line"></div>
                        </div>
                    </div>
                    <div id="encrypt-blog" style="display:none">
                        {{content}}
                    </div>

然后在文章头添加：

1
2
3

password: 123456
abstract: XXX.
message: XXX.

更新(2021/09/03)

使用插件可能无法正常使用，详看issue：https://github.com/D0n9X1n/hexo-blog-encrypt/issues/114

现象：从本机部署(hexo s)时可以访问, 但 http 页面 + http/https 的js文件不能访问

原因：Chrome 强制把所有 http 资源尝试用 https 访问, 如果访问失败, 会明确在控制台提示加载https资源不存在, 然后退化后的http资源再默认禁止

解决方法：GitHub pages上有强制开启https

另外，关于window.crypto.subtle，请看：https://stackoverflow.com/questions/46468104/how-to-use-subtlecrypto-in-chrome-window-crypto-subtle-is-undefined