我发现一些论坛，还有 telegram，都支持文字 spoiler 效果，那什么是文本 spoiler?

在英文中，“spoiler”这个词原本的含义是指“破坏者”或“毁坏者”。在不同的上下文中，它可以指代能够破坏某种事情、情节、计划或体验的因素。

近年来，随着社交媒体和娱乐讨论的普及，“spoiler”一词常常用于指代剧透，特别是在讨论电影、电视剧、小说等作品时。

因此，虽然“spoiler”最初的意思是“破坏者”，但现代用法主要与“剧透”相关，体现了该词在流行文化中的演变。

在Telegram客户端中，文字的spoiler效果可以通过特定的格式来实现。用户可以将某些文本标记为spoiler，使其在聊天中不直接显示，而是被一个模糊的、可点击的框包裹。这种设计的作用主要有几个方面：

  1. 避免剧透：当讨论电影、电视剧、书籍或其他故事情节时，使用spoiler效果可以有效避免给其他人带来剧透的困扰。只有在有兴趣的人点击内容时，才会显示具体的信息。
  2. 增强互动性：通过在聊天中使用spoiler，用户可以增加互动性，鼓励其他人点击查看内容，从而引发讨论。
  3. 保护隐私：在某些情况下，用户可能希望分享敏感信息或私人事项，而使用spoiler效果可以在某种程度上保护这些信息，使其不那么显眼。

我想在typecho中实现这个效果。既然markdown不支持，那么我们就用原生css和html实现吧。

增加全局样式

我考虑了一下，还是鼠标直接悬浮（当然也支持点击）就直接展示原文，这样更加简单直接。有一些论坛的实践（比如 linux.do ）确实是需要点击后才显示原文。

登录typecho后台，进入博客的样式设置页面（控制台 -> 外观 -> 设置外观），url路由是 https://xxx.com/admin_path/options-theme.php ，其中 admin_path 默认是 admin，如果你像我一样想增强博客安全，可以更改一下这部分的路由，改成复杂字符串或者自己的名字之类的字符串，目的是为了不让别人轻易发现博客后台登录地址。

在全局css 样式中定义如下样式，这是我精心调试过的效果。效果演示放在后文。

.spoiler {
    position: relative; /* 使得伪元素可以定位 */
    background-color: rgba(200, 200, 200, 0.3); /* 浅灰色半透明背景 */
    color: rgba(0, 0, 0, 0.5); /* 半透明黑色文字 */
    user-select: none; /* 禁止选中文字 */
    overflow: hidden; /* 隐藏溢出的内容 */
    cursor: pointer; /* 鼠标悬停时光标变为手型 */
    filter: blur(3px); /* 添加模糊效果 */
    padding: 5px; /* 为文本添加内边距以增强效果 */
    transition: filter 0.3s ease; /* 添加平滑过渡效果 */
}

.spoiler:hover {
    background-color: inherit; /* 悬停时使用父元素的背景色 */
    color: inherit; /* 悬停时显示原色 */
    filter: blur(0); /* 悬停消除模糊效果 */
}

保存即可。后面就是写文章时直接引用该class即可。

文章内需要处引用

我习惯使用 <span> 标签。比如原文是 我才知道周也的父亲是叫周秦快。，如果你是写影评，为了避免剧透把周秦快做spoiler效果，那就写如下内容

我才知道周也的父亲是叫<span class="spoiler">周秦快</span>。

效果演示

我才知道周也的父亲是叫周秦快。

ok，这便是我想要的效果。