在Hugo中折叠部分内容

之前疯狂粘贴自己的扩展 凑字数 的时候,我发现这种又臭又长的列表需要稍微隐藏一下,但是这里用的静态博客生成器 Hugo 并不原生支持折叠。所以,我利用 shortcode 功能自己写了一个。

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

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

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

shortcode,点击展开

<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,之后会在模板里面更新。

spoiler在steemit社区的讨论:https://github.com/steemit/condenser/issues/8

 
comments powered by Disqus