diagrams.Goat

在 程式碼區塊掛載鈎子 中，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>

在瀏覽器中呈現為：

A 1 2 3 B

如需自訂渲染，請覆蓋 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：

```goat {class="foo" caption="圖表 1：範例"}
.---.     .-.       .-.       .-.     .---.
| A +--->| 1 |<--->| 2 |<--->| 3 |<---+ B |
'---'     '-'       '+'       '+'     '---'


將渲染為：

```html
<figure id="diagram-1">
  <svg class="foo" width="272" height="57" xmlns="http://www.w3.org/2000/svg" version="1.1">
    ...
  </svg>
  <figcaption>圖表 1：範例</figcaption>
</figure>

您可透過 CSS 來設定 SVG 的樣式：

svg.foo {
  font-family: "Segoe UI","Noto Sans",Helvetica,Arial,sans-serif
}
Draft Description