Jekyll实现文章添加密码功能

因为一些文章不想让别人看到,所以写了一个简易的密码锁

GitHub上已经有Jekyll添加密码的主题项目,但是实在是太丑.

注意:密码会在审查元素里明码标注,安全需求强的话请使用wordpress

思路

想到的是跳转的方法

先在’/_posts’下写一个文章的壳子

在主题目录下新建文件夹’passed’

在文件夹中将文章复制到’/passed’一份

修改’/passed’中文章头,将layout: post修改成layout: locked

在’/layouts’文件夹中新建文件’locked.html’

复制文章所用html

在passed文件夹下的文章并不会在主页显示,但是它会生成一个跟正常文章一样的html文件在’/_site/passed’中

最后可以在’_posts’里的文章中写一段html+js,实现密码跳转到正常的’/passed’里的文章.

实现

增强代码的可维护性,在’_includes’里创建单独的文件,再在文章中引用.

‘_posts’文章中头部写入密码,文件名,密码提示.

‘/_layouts’中password.html可写成

<script>
   function check()
{
   var pass=document.getElementById("pass").value;
   if(pass==""){
   window.document.f.action="/passed/2019-12-07-Jekyll-post-password.md-.html";
   window.document.f.submit();
   }
   else{
   alert("密码错误");
   window.document.f.action="";
   }
}
</script>
<div class="mdui-textfield">
<form name="f" action="">
<input class="mdui-textfield-input" type="text" placeholder="Password()" id="pass"/>
<input type="button" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-pink-200" value="查看" onclick="check()"/>
</form>
</div>

看到这里你可能会发现它并不安全

再次提醒:密码会在审查元素里明码标注,安全需求强的话请使用wordpress

然后就完成了

总结

本人使用主题是jekyll-theme-mdui,虽然不能直接移植到其他主题,但是主题之间大同小异,同样的思路可以在你的网站上实现,甚至是hexo.