在Hugo中折叠部分内容

heyeshuang(53)
Published in
#cn
Words
228
Reading
2 min
Listen
Play
9y

之前疯狂粘贴自己的扩展 凑字数 的时候,我发现这种又臭又长的列表需要稍微隐藏一下。

我的博客使用的生成器 Hugo 并不原生支持折叠。所以,我利用 shortcode 功能自己写了一个。

Shortcode 的介绍在这里,主要难度在于go的html模板引擎。

折叠部分用了 HTML5 的新特性:<details>,不支持 edge,这个浏览器应该没有人用吧……

下面是shortcode的代码,放在/themes/<THEME>/layouts/shortcodes/spoiler.html下:

<details>
<summary>
  <h4>
    {{ with .Get 0}}{{.}}{{else}}click to expand{{ end }}
  </h4>
</summary>
{{.Inner}}
</details>

用法是这样的:

{{%spoiler "You killed my father!" %}}
I am your father.
NOOOOOOO!
{{% /spoiler %}}

当然,我还稍微改了一下CSS,在这里的78~92行。


这篇文章是先发在我的博客上的,解决的也是那里的问题。

那么,steemit上有没有这种功能呢?

Updated at 17-10-11:

Steemit 编辑器并不支持<details>tag,我可能要找一些别的办法……

在Hugo中折叠部分内容 | Ecency