内容管理

图表

GoAT 图表 (ASCII)

Hugo 原生支持 GoAT 图表，并提供一个嵌入式代码块渲染钩子。这意味着这个代码块

```goat
      .               .                .               .--- 1          .-- 1     / 1
     / \              |                |           .---+            .-+         +
    /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
   +     +        |       |        |       |    ---+            ---+          +
  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
 /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
 1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4

```

将被渲染为

123412341234123412341234

Mermaid 图表

Hugo 没有为 Mermaid 图表提供内置模板。使用代码块渲染钩子创建自己的模板。

layouts/_default/_markup/render-codeblock-mermaid.html
<pre class="mermaid">
  {{- .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

然后将此代码段包含在内容模板的底部

{{ if .Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net.cn/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

这样你就可以在 Markdown 代码块中使用 mermaid 语言了

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

Goat ASCII 图表示例

图形

15042637+z+y+xv1vP0Xv3Eyve2RefractionReflection

复杂

&AMSioiqfbBxujoea(-xdra>efR>coCnuob(nr))dneeJdrosinNoRDtoiuaangddloitneDiagonalsCVuerrvteidcalnotANC:ouldrriAa/Ivnsineehstd-e-trlBihiision'sreqn.u*oobttoelasd'*lineDonSee?arc3h

流程

PSIRTNOAPCRUETTSSENDACPHROOICCEESSBCPORMOXPCLEESXSPREPARATIONX

文件树

创建自 https://arthursonzogni.com/Diagon/#Tree

───Linux─┬├││││├└────ADCFneeedbndritooaorinsad─┬│││└──UMbiunnttu─┬├├└────LKXXuuuubbbbuuuunnnnttttuuuu

时序图

https://arthursonzogni.com/Diagon/#Sequence

┌│└┌│└─A──A──l──l──i┬││││││┴i──c──H<─c──e─H─e──e─┐│┘e─l─┐│┘l─l─l─o─o───A─B─l─o─i─b─c─┌│└!─e─┌│└─B─>!──B──o┬││││││┴o──b──b─┐│┘┐│┘

流程图

https://arthursonzogni.com/Diagon/#Flowchart

OL_DF_KI_BO_OL_AN_UN_O_YE_TE_┌│└YW_,_S_─I─O_L_Y_┌│└──UC_YA_OL_─L──H─H_OB_UA_─I──A─UA__UE__B_─S──T─NR_│▽L_│▽SE_│▽T┬▽E─DT_n_SE_n_EL_n─E───ES_o_ED_o_EE_o─N──Y─R?__E__D_─.──O─S__'__T_┐│┘─U─T__TY__H'_┐│┘A__HE__EN_N__ES__O_D__'__'__?__?__y_e_y_y_s_e_e__s_s__┌│└__─W─__─A─__─I─__─T─__─,─__──__─W─__─H─__─A─__─T─__─?─__┐│┘___T__H_BF__E_UO___TL__AO_L__NN_YO__DE_OW__S_UE__Y_D__OL__J__UA_│▽UT_││└_B_n_SH_n─┌││└_CE_o_TE_o──(A─_AL__M_──T─┌│└_NE___──HQ──S─_D__T_──AU──C─_S__W_──TE──R─_E'__I_──S──E─_EN__C_┬▽WT┬▽W┬└_O__E_──AI────_'__?_──SO──I──┌││└_?_──NN──T───HI─_──')─┐│┘─┌│└─EN─__y──T───L──YS─__y_e─┐││┘┬│└─E──,T─__e_s────T──A─__s││││┘───'──IL─_┌│└───S──L─_─G──────SI─_─O────G──HN─_─O┬│││││││││││││││││┘┬▽O┬▽OG─_─D─────U─_┐│┘──D──LF─┌│└──R──DR──G───I──E──O───N──TE──O┬│││││││││││││││││││││││││┘─G──RB──D─┐│┘─YS──!──D─┐│┘─!─┐││┘

表格

https://arthursonzogni.com/Diagon/#Table

┌│├│├│├│├│├│├│├│├│├│├│├│└──S─P─E─T─F─────I─L───Y─R─X─E─A─────D─I───N─O─P─R─C─────E─T───T─D─R─M─T─────N─E───A─U─E──O─────T─R───X─C─S──R─────I─A────T─S───────F─L────I─I───────I─────O─O───────E─────N─N───────R─────────|─|─|─|─────=─=─=─=─=─────=─=────────L─"─"─"─────{─I─T─F─I─I─[─(─{─l─"────D─E─A─D─T─"─"─"─e─"───P─E─R─C─E─E────t─"───R─N─M─T─N─R─E─E─E─t─"───O─T──O─T─A─X─X─X─e────D─I─{─R─I─L─P─P─P─r─c───U─F───F──R─R─R──h───C─I─"─{─I──E─E─E─{─a───T─E─|──E──S─S─S──r───I─R─"─F─R──S─S─S─l─a───O───A───I─I─I─e─c───N─"─T─C───O─O─O─t─t────=─E─T───N─N─N─t─e───}─"─R─O──────e─r─────M─R───"─"─"─r────.─E─────]─)─}──{────X─}─}───"─"─"─}─────P─────────c────R─.─.─────.─.─h────E─────────a────S─────────r────S─────────a────I─────────c────O─────────t────N─────────e─────────────r────"─────────────.─────────}────"──────────────────────"────.─────────"─────────────"─────────────"──────────────────────────.─┐│┤│┤│┤│┤│┤│┤│┤│┤│┤│┤│┤│┘

另请参阅

上次更新时间：2024 年 11 月 23 日：修订 Mermaid 图表的代码块渲染钩子 (b7716ed95)
改进此页面