Information

It’s Important!

“There are only two hard things in Computer Science: cache invalidation and naming things.” – Phil Karlton

组件使用

除去 Markdown 自带的基本组件外，一些常用的组件可以通过 Hugo 的 Shortcodes 功能来实现，具体能够使用的 Shortcodes 和主题的实现还有关系。当前主题下，我们能使用的组件和样例如下：

按钮 Buttons

一个按钮组件，用于标记特别的链接。这个链接点击后会在新页面打开，而不是当前页面。

{{< button relref="/" >}}Get Home{{< /button >}}
{{< button href="https://www.google.com/" >}}Google{{< /button >}}

子页面梗概 Sections

会把下一级标题和 `

` 标记之前的部分作为梗概，点击标题会跳转到对应的内容。

{{< section >}}

如何插入图片

可以放在当前文档同一级目录下，也可以放在同一级目录的 images 目录下。相对路径的计算要考虑两种情况：

如果是从 _index.md 文件引用，可以直接写相对路径，例如：

![示意图](images/overview.png)

如果是从其他文件引用，需要考虑相对路径增加的层级，例如：

![示意图](../images/overview.png)

4. 如何插入音频

文件路径类似同图片，使用 HTML 语法插入即可，考虑到浏览器的兼容性推荐使用 mp3 格式：

<audio controls>
  <source src="audio.wav" type="audio/x-wav">
  Your browser does not support the audio tag.
</audio>

5. 如何插入视频

同样使用 HTML 语法插入即可，视频文件强烈建议放置在 CDN 上，节省流量费用，也避免文档站因为体积庞大而发布缓慢：

<video controls="controls" style="width: 100%;" autoplay="autoplay" loop="loop">
    <source src="https://cdn2.unrealengine.com/homepage-opener-5a55a50aaa4c.mp4" />
</video>

6. 如何插入动图

可以使用 ffmpeg 将视频转换为高质量 gif 图片，然后遵循图片插入方式即可。具体操作，参考此 Bash 脚本项目。

7. 如何插入表格

使用 Markdown 语法即可，如果有些合并单元格的特殊样式，可以使用 HTML 语法。

8. 如何插入代码内容

可以使用 Markdown 的语法，并获得一些扩展。

例如，此例子表示以 HTML 语法高亮展示代码并显示行号，初始行号从100开始，并把相对的第2行和4到6行标记：

```html{linenos=table,hl_lines=[2,"4-6"],linenostart=100}
<section id="main">
  <div>
   <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
        {{ .Render "summary"}}
    {{ end }}
  </div>
</section>
```

100
101
102
103
104
105
106
107
<section id="main">
  <div>
   <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
        {{ .Render "summary"}}
    {{ end }}
  </div>
</section>

除去在 Markdown 的语法上做扩展，使用 Hugo 自带的语法高亮组件 highlight 也可以获得此效果，具体参考官方文档。

9. 如何插入代码演示

在静态的代码按行展示之外，如果希望插入一段命令行的交互式演示，推荐使用 asciinema，具体操作参考工具的文档。

这是一个嵌入的例子：

<script id="asciicast-427100" src="https://asciinema.org/a/427100.js" async></script>