Please enable JavaScript to view the comments powered by Disqus.

hexo spoiler插件

这是个新手做的非常简单的插件。

UPDATE 2016/06/27: 添加点击可见功能

UPDATE 2017/03/13: 更正一些错误知识

由于看到了萌娘百科和Steam的黑幕插件,我就萌生了在博客上也用上这个功能的想法。之前想表达一些嘿嘿嘿的信息的时候,要么使用自带的划线,或者是使用hexo-ruby-character。但这些还不够喜感,像萌娘百科的那种才有喜感,然而它在手机上十分蛋疼(手机上就算选中了也看不到内容,而且那个黑条也不是点击消失的)。我的小伙伴也做了个黑幕插件,在此打个广告我没用过,不知道怎样,效果不好不要打我

今天做制作准备工作的时候(其实就是在各网站搜刮css和脚本),偶然间发现了这个网站,他自带的spoiler是类似高斯模糊效果,点击可消失,我一下就心动了,仿照他们的做了这么个插件。

安装与使用

安装:

1
npm install hexo-spoiler --save

使用:

1
{% spoiler text %}

成果展示

可以遮蔽正常文本:text

可以遮蔽带格式的文本:text text text

可以遮蔽行内代码,但是效果非常差:code

缺点

  1. 当内部有代码块的时候效果非常糟糕

  2. 只是鼠标划过的时候显示文本,而不是像原网站那样点击显示文本,再点击隐藏 我觉得他们肯定用了js脚本点击可隐藏,再点击消失,但缺少动画效果

  3. 目前它产生的HTML代码是<span>包起来的,而且我去除了它渲染时生成的<p>, 所以如果你需要换行的话也许需要自己手动加上<br>

  4. 在手机上会有点卡,因为它似乎先触发hover效果再触发click事件。已经无所谓了

背后的故事

实际上是抄袭那个网站的css, 在每个文章的正文中都植入这个css. css长这样:

1
2
3
4
5
6
7
8
9
10
11
12
span.spoiler {
color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
text-shadow: grey 0px 0px 10px;
cursor: pointer;
}
span.spoiler:hover {
text-shadow: grey 0px 0px 5px;
}
span.spoiler.revealed {
text-shadow: grey 0px 0px 0px;
}

然后给每个需要遮蔽的文本渲染后用<span class="spoiler">框起来。使用jQuery或者是DOM API来处理它的点击事件,通过加上revealed来使马赛克消失或显示:

1
2
3
4
5
6
7
8
(function(){
var spoiler = document.getElementsByClassName("spoiler");
for(var i = 0; i < spoiler.length; ++i) {
spoiler[i].addEventListener("click", function() {
this.classList.toggle("revealed");
});
}
})();

就是这么简单。为什么我(初版)做了一天呢?因为你智障啊

作者:Dr. A. Clef
发布日期:2016-06-25
修改日期:2017-06-10
发布协议: BY-SA