这篇文章与上一篇一样,同样是重构 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 >}} 

效果: 隐藏文字


·End·