为了防止剧透给博客加上隐藏文字

  很早以前浏览steam社区以及nga、萌娘百科的时候都有发现过，涂黑一段文字，鼠标移上去文字就展示出来的一种效果，个人还是蛮喜欢这种样式的，可以防止剧透，又能表达一些想说的话。博主的主题原本是不带这个效果的，那么下面来简单实现下如何给主题加上这个功能吧～ 本文借鉴至mogeko的教程，在此感谢大佬一波

Step.1 创建html标签

  我们首先要新建一个 Hugo Shortcodes 来规范化的插入 HTML 标签

  在 layouts/shortcodes 文件夹中创建文件 spoiler.html (如果没有那个文件夹就自己新建一个)

<span class="spoiler" >{{.Inner}}</span>

  然后再在 /assets/css/_common/_page/post.scss (每个主题的不一样) 中编写 CSS

    // 隐藏文字
    .spoiler { 
        color: black; 
        background-color:black;
    }
    .spoiler:hover{
        color: white;
    }

  同样的，如果你实在是不知道你的主题的 CSS 文件在哪儿，也可以直接往 layouts/shortcodes/spoiler.html 里写

<style>
// 隐藏文字
.spoiler { 
  color: black; 
  background-color:black;
}
.spoiler:hover{
  color: white;
}
</style>

  然后就可以用了！

Step.2 用法

  在你想使用「隐藏文字」的地方这么写

<spoiler> 隐藏文字 </spoiler>
// 标签两旁记得带上{{ }}