缘由

最近在写技术博客时，引入的代码太多，影响观感。 在尽力减少代码量，还是有些不可或缺的代码，代码量很惊人，已经占满整个屏幕.

因为个人博客是使用hugo生成的静态博客，我刚开始想的使用原生的js和css来实现，奈何技术不足，我是做后端的，一度想放弃 后面还是在网上发现h5有个新的标签<details><summary></summary></details>可以实现显示/隐藏的功能。

每篇博客是markdown写的，再使用hugo生成出静态的html, 怎么结合到静态博客上呢，咱肯定不会手动的一个一个的贴标签上去， hugo有shortcodes的功能结合这个新标签可以满足我的需求

代码显示/隐藏

使用shortcodes+details标签

在目录 themes/[themename]/layouts/shortcodes下新建code.html文件，内容如下

html
<details {{ with .Get 1}} open="" {{else}} {{ end }} >
    <summary style="background-color:#f5f5f5;border:1px solid #d2d2d2;padding:5px;">
        {{ with .Get 0}}{{.}}{{else}} 代码 {{ end }}
    </summary>
    {{.Inner}}
</details>

  • {{ with .Get 0}}{{.}}{{else}} 代码 {{ end }} : 意思是获取第0位的参数，参数为真则输出,否则输出"代码"
  • {{ with .Get 1}} open="" {{else}} {{ end }} : 获取第1位的参数，参数为真则输出 “open=""”, 否则为空
  • 如果第1位参数为真，则打开detials标签，否则处于默认状态, 不打开标签

markdown代码引用的地方:

{{ % code "shell" "1" %}}"
$ lua astart.lua
start .....
<6,9>
<6,10>
<7,11>
end.....
{{ % /code %}}
  • {{ 和 % 需要并在一起， % 和 }}需要并在一起, 否则hugo不会引用shortcodes下的code.html模版

效果如下:

代码
$ lua astart.lua
start .....
<6,9>
<6,10>
<7,11>
end.....

bilibili播放器

copy的DoIt主题的shortcodes

shortcodes/bilibili.html 文件内容如下

<div class="bilibili">
    {{- if .IsNamedParams -}}
        <iframe src="//player.bilibili.com/player.html?bvid={{ .Get `id` }}&page={{ .Get `p` | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
    {{- else -}}
        <iframe src="//player.bilibili.com/player.html?bvid={{ .Get 0 }}&page={{ .Get 1 | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
    {{- end -}}
</div>

static/css/bilibili.css 文件内容如下

代码
.bilibili {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    margin: 3% auto;
    text-align: center;
}

.bilibili iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

引入自定义的bilibili.css, 在config.toml中加入如下参数值

customCSS = ['bilibili.css']

使用方式, {{<>}} 符号可以替换为{{%%}}

{{< bilibili BV1CP4y1H7SB >}}
Or
{{< bilibili id=BV1CP4y1H7SB >}}

参考

hugo的shortcodes功能详情参考

detials标签的使用参考

--完--