防止剧透的隐藏文字

这篇文章与上一篇一样，同样是重构 LeaveIt 的成果之一

为什么要分成两篇文章呢？~~当然是为了多水一篇文章啊！~~

Start

「隐藏文字」的原理很简单：将文字颜色和背景颜色都设置成黑色，然后再在鼠标移动到文字上时将文字颜色改成白色。

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

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

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

然后再在 /assets/css/_common/_partials/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>

然后就可以用了！

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

{{</* spoiler */>}} 隐藏文字 {{</* /spoiler */>}}

效果：{{< spoiler >}} 隐藏文字 {{< /spoiler >}}