黑幕

前情提要

在最新的一期周报中，我对剧集进行了评价，由于评价时无法避免的会涉及剧情，为避免剧透破坏读者的观看体验，我想到了萌娘百科的「黑幕」处理（将鼠标移到文字上，文字才会显示。移动端需要点击黑幕 就像这样！）。

但是 Markdown 与 Hexo 原生并不支持这一语法，因此需要额外配置一下，以下为配置过程（以Hexo中实现黑幕为例）：

修改主题的 Styl 和 Js

styl

首先修改主题的 themes\anzhiyu(你安装的主题名)\source\css_global\index.styl

在代码的最下方加入如下代码，注意缩进！（styl对缩进要求严格）

.heimu, .heimu a, a .heimu, .heimu a.new, .heimu code
   background-color: #252525 !important
   color: #252525 !important
   text-shadow: none
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu,.heimu code:hover
   color: white !important;
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu 
   color: lightblue !important;
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu
   color: #BA0000 !important;

js

打开themes\anzhiyu(你安装的主题名)\source\js\main.js

在末尾加上

const addheimuTitle = function(){
  console.log(123)
  $('.heimu').attr('title','你知道的太多了')
}

hexo操作

在终端中

hexo cl
hexo g

如何使用黑幕

格式为

<span class="heimu" title="你知道的太多了">此处为文字</span>

效果为
此处为文字

参考

萌娘百科-模板:黑幕
如何实现黑幕？即鼠标触及之地，原来黑色显示原来文字