给文章加上一个剧透警示

最近玩了《To the Moon》这款游戏，很想写写玩后感，但是这样一款胜在剧情的游戏，写感想不可避免会剧透。文章还没动笔写，我先来折腾一下怎样给博客文章加上有效的剧透警示。

基本思路是刚打开网页时，把文章正文盖住，并显示一个提示剧透的对话框，只有读者选择继续阅读以后，才显示文章内容。得益于 Hugo 强大的自定义能力，实现这个效果还是不难的。

首先给含有剧透的文章加上一个warning属性，包含了警示对话框所提示的文字：

warning: "以下内容含有《To the Moon》的剧透，如需继续阅读，点击下面的按钮。"

之后修改 Hugo 的模版。文章正文包含在article标签里面，所以在渲染时，检查一下文章有没有warning属性，如果有，就默认加上模糊效果：

{{ if .Params.warning }}
<article class="section" style="filter:blur(8px);">
{{ else }}
<article class="section">
{{ end }}

然后，文章有剧透时，显示一个对话框，警示有剧透。

{{ if .Params.warning }}
<div id="indicator" align="center">
    <div id="warning">
        <p>{{.Params.warning}}</p>
        <a onclick="javascript:showContent();" href="#" class="button" >
        <i class="fa fa-key" aria-hidden="true"></i>
        >>> 
        <i class="fa fa-lock" aria-hidden="true"></i>
        </a>
    </div>
</div>
{{ end }}

对应的 CSS

#indicator {
    display: block;
    position: fixed;
    margin-top: 20%;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0em;
    top: 0em;
}
#warning {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
    max-width: 720px;
}

此外，在读者选择继续阅读以后，用 js 关闭对话框并去掉正文部分的模糊效果：

var showContent = function() {
    document.getElementsByTagName("article")[0].setAttribute("style", "filter: none;");
    document.getElementById("indicator").setAttribute("style", "display: none;");
}

当然这样是不够的，因为，如果有读者是通过订阅 RSS 阅读本文的，RSS 阅读器会直接把内容显示，屏蔽剧透就失效了。好吧我知道本站没什么人访问，更没什么人订阅 RSS，我自己都好几年没打开 RSS 阅读器了。出于精益求精的原则，我还是修改一下 Hugo 的默认 RSS 模版，把读者引导到网页上。

<description>
{{ if not .Params.warning }}
{{ .Summary | html }}
{{ else }}
<p>View the original webpage: {{ .Permalink }}</p>
{{end}}
</description>

最终效果可见此文：《〈To the Moon〉玩后感》（如果显示404，说明我还没写完，或者坑了#bgm38）以及 rss 。