diagrams.Goat
语法
diagrams.Goat INPUT
返回
diagrams.goatDiagram
在代码块渲染钩子中使用，diagram.Goat 函数将 ASCII 艺术转换为 SVG 图表，返回一个带有以下方法的GoAT图表对象
- Inner
- (
template.HTML) 返回不带svg元素的 SVG 子元素，允许您创建自己的包装器。 - Wrapped
- (
template.HTML) 返回包裹在svg元素中的 SVG 子元素。 - Width
- (
int) 返回渲染图表的宽度，以像素为单位。 - Height
- (
int) 返回渲染图表的高度，以像素为单位。
GoAT 图表
Hugo 原生支持 GoAT 图表，并带有嵌入式代码块渲染钩子。
此 Markdown
```goat
.---. .-. .-. .-. .---.
| A +--->| 1 |<--->| 2 |<--->| 3 |<---+ B |
'---' '-' '+' '+' '---'
```
渲染为
<div class="goat svg-container">
<svg xmlns="http://www.w3.org/2000/svg" font-family="Menlo,Lucida Console,monospace" viewBox="0 0 352 57">
...
</svg>
</div>
在您的浏览器中显示为
要自定义渲染，请覆盖 Hugo 的 嵌入式代码块渲染钩子以渲染 GoAT 图表。
代码块渲染钩子
举例来说，让我们创建一个代码块渲染钩子，将 GoAT 图表渲染为带有可选标题的 figure 元素。
layouts/_default/_markup/render-codeblock-goat.html
{{ $caption := or .Attributes.caption "" }}
{{ $class := or .Attributes.class "diagram" }}
{{ $id := or .Attributes.id (printf "diagram-%d" (add 1 .Ordinal)) }}
<figure id="{{ $id }}">
{{ with diagrams.Goat (trim .Inner "\n\r") }}
<svg class="{{ $class }}" width="{{ .Width }}" height="{{ .Height }}" xmlns="http://www.w3.org/2000/svg" version="1.1">
{{ .Inner }}
</svg>
{{ end }}
<figcaption>{{ $caption }}</figcaption>
</figure>此 Markdown
content/example.md
```goat {class="foo" caption="Diagram 1: Example"}
.---. .-. .-. .-. .---.
| A +--->| 1 |<--->| 2 |<--->| 3 |<---+ B |
'---' '-' '+' '+' '---'
```渲染为
<figure id="diagram-1">
<svg class="foo" width="272" height="57" xmlns="http://www.w3.org/2000/svg" version="1.1">
...
</svg>
<figcaption>Diagram 1: Example</figcaption>
</figure>
使用 CSS 根据需要设置 SVG 的样式
svg.foo {
font-family: "Segoe UI","Noto Sans",Helvetica,Arial,sans-serif
}