Please enable Javascript to view the contents

Hugo的「简码」

 ·  ☕ 7 分钟

何为shortcode?

如果要说hugo框架在内容上的特点,那就不得不提起shortcode了,shortcode意为「简码」,即表示用简短的格式代码来实现丰富内容的使用。

简码示例

以下记录包含Hugo-Zzo主题自带的以及主题以外的Hugo简码示例

盒子包裹的文本

1
2
3
{{< boxmd >}}
<i>安杰拉·乔治乌</i>,是<mark style="color:darkred;background-color:pink">罗马尼亚著名女高音歌剧歌唱家</mark>,也是法籍男高音罗伯托·阿蓝尼亚的前妻。<strong>乔治乌以擅长演绎威尔第和普契尼的作品而著名于世。</strong>而她演绎写实主义歌剧和法语歌剧也广受好评。另外乔治乌也致力推广故乡罗马尼亚的音乐,偶有录制罗马尼亚的民歌和东正教的宗教音乐作品。
{{< /boxmd >}}

这里是受盒子包裹的一段文本:

安杰拉·乔治乌,是罗马尼亚著名女高音歌剧歌唱家,也是法籍男高音罗伯托·阿蓝尼亚的前妻。乔治乌以擅长演绎威尔第和普契尼的作品而著名于世。而她演绎写实主义歌剧和法语歌剧也广受好评。另外乔治乌也致力推广故乡罗马尼亚的音乐,偶有录制罗马尼亚的民歌和东正教的宗教音乐作品。

多语言代码块

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{{< codes c go python >}}
  {{< code >}}
  ```c
  int main(){
      printf("Hello World~");
      return 0;
  }
  ```{{< /code >}}
  {{< code >}}
  ```go
  func main(){
    fmt.Printf("Hello World~")
    return
  }
  ```{{< /code >}}
  {{< code >}}
  ```python
  def main():
      print("Hello World~")
      return
  ```{{< /code >}}
  {{< /codes >}}

效果如下↓

1
2
3
4
int main(){
    printf("Hello World~");
    return 0;
}
1
2
3
4
func main(){
  fmt.Printf("Hello World~")
  return
}
1
2
3
def main():
    print("Hello World~")
    return

下拉扩展

1
{{< expand "Expand me" >}}Some Markdown Contents{{< /expand >}}

效果如下↓

Some Markdown Contents

带标题的图片

1
{{< img src="/images/sum/angela-gheorghiu.jpg" title="Angela·Gheorghiu caption="Angela Gheorghiu, born 7 September 1965, is a Romanian soprano." alt="image alt" width="300px" position="center" >}}
image load failed
Angela·Gheorghiu
Angela Gheorghiu, born 7 September 1965, is a Romanian soprano.

提醒栏

1
2
3
{{< notice success >}} #可选标签类型有:success, info, warning, error
**这里**是提醒内容
{{< /notice >}}
这里是提醒内容
这里是提醒内容
这里是提醒内容
这里是提醒内容

警告栏

1
2
3
{{< alert theme="success" dir="ltr" >}}
**这里** 有一条警告 #可选标签类型有:success, info, warning, danger
{{< /alert >}}

多标签卡片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{{< tabs Linux Windows MacOS >}}
  {{< tab >}}

  ### Linux section

  ```javascript
  console.log('Hello World~');
  \```


  {{< /tab >}}
  {{< tab >}}

  ### Windows section

  Hello world!
  {{< /tab >}}
  {{< tab >}}

  ### MacOS section

  Great!
  {{< /tab >}}
{{< /tabs >}}

Linux section

1
console.log('Hello World!');

Windows section

1
console.log('Hello World:-)');

MacOS section

1
console.log('Hello World:-D');

引用缩略图

1
{{< featuredImage >}}

跳转用按钮

1
{{< button href="#" >}}锚点{{< /button >}}
锚点

模拟Terminal窗口

x
+
jacklanda@Arwen: ~ (zsh)
  • $ ls -l ~
  • total 44
  • drwx------+  8 jacklanda  jacklanda  272 Mar 21 14:30 Desktop
  • drwx------+ 11 jacklanda  jacklanda  374 Mar 21 16:47 Documents
  • drwx------+ 10 jacklanda  jacklanda  340 Mar 22 13:36 Downloads
  • drwx------+  8 jacklanda  jacklanda  272 Feb 14 04:54 Movies
  • drwx------+  5 jacklanda  jacklanda  170 Oct 19 17:07 Music
  • drwx------+  9 jacklanda  jacklanda  306 Feb  3 10:26 Pictures
  • $ _

内嵌pdf

暂缺 … …

简码的转义

如果需要直接输出原本的简码源码呢,应该如何转义?其实转义只需要添加注释即可,比如:
{{</* alert */>}}{{< alert >}}的转义。

转义用到的注释为「/* */」,即在左尖括号右边加个「/*」,在右尖括号左边加个「*/」,这样就可以实现原简码的展示啦。

外部库

这里的外部库与上面所说的简码不同,是zzo作者集成的外部js插件,通过这些对应着js插件的特定语法,我们可以方便地绘制出内容丰富的图表

图表示例

以下示例均来源于Zzo官方文档

带描点的曲线图
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
​```chart
{
    "type": "bar",
    "data":
       {
        "labels": ["One", "Two", "Three", "Four", "Five", "Six"],
        "datasets": [{
            "label": "# of Votes",
            "data": [12, 19, 3, 5, 3, 8]
        }]
    }
}
\```

​```chart
    {
    "type": "line",
        "data": {
            "labels": ["One", "Two", "Three", "Four", "Five", "Six"],
            "datasets": [
            {
                "label": "# of Votes",
                "data": [12, 19, 3, 5, 2, 3],
                "backgroundColor":"transparent",
                "borderColor":"orange"
            },
            {
                "label": "Some other set",
                "data": [15, 8, 13, 5, 5, 9],
                "backgroundColor":"transparent",
                "borderColor":"#44ccff"
            }
            ]
        }
    }
\```
{
    "type": "bar",
    "data":
       {
        "labels": ["One", "Two", "Three", "Four", "Five", "Six"],
        "datasets": [{
            "label": "# of Votes",
            "data": [12, 19, 3, 5, 3, 8]
        }]
    }
}
    {
    "type": "line",
        "data": {
            "labels": ["One", "Two", "Three", "Four", "Five", "Six"],
            "datasets": [
            {
                "label": "# of Votes",
                "data": [12, 19, 3, 5, 2, 3],
                "backgroundColor":"transparent",
                "borderColor":"orange"
            },
            {
                "label": "Some other set",
                "data": [15, 8, 13, 5, 5, 9],
                "backgroundColor":"transparent",
                "borderColor":"#44ccff"
            }
            ]
        }
    }
流程图
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
​```flowchart
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
/```
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
通过Katex支持Tex

The following

$$ \int_{a}^{b} x^2 dx $$

Is an integral

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

Enable Katex in the config file by setting the katex param to true. This will import the necessary Katex CSS/JS.

See the online reference of supported TeX functions.

Note: For inline math to render correctly, your content file extension must be .mmark. See the official mmark site.

1
Inline math: $ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887$

Inline math: $ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $

1
2
3
Block math:

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

Block math:

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

1
2
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

When $a \ne 0$, there are two solutions to (ax^2 + bx + c = 0) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

基于mermaid绘制的图
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
​```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
/```

​```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!
/```

​```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
/```

​```mermaid
gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
/```

​```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
/```

​```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
/```

​```mermaid
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
/```
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
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!
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
时间序列图
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

​```msc
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
\```

​```msc
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
\```
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
我也不知道叫啥的图
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

​```viz-dot
  digraph G {

	subgraph cluster_0 {
		style=filled;
		color=lightgrey;
		node [style=filled,color=white];
		a0 -> a1 -> a2 -> a3;
		label = "process #1";
	}

	subgraph cluster_1 {
		node [style=filled];
		b0 -> b1 -> b2 -> b3;
		label = "process #2";
		color=blue
	}
	start -> a0;
	start -> b0;
	a1 -> b3;
	b2 -> a3;
	a3 -> a0;
	a3 -> end;
	b3 -> end;

	start [shape=Mdiamond];
	end [shape=Msquare];
}

/```
  digraph G {

	subgraph cluster_0 {
		style=filled;
		color=lightgrey;
		node [style=filled,color=white];
		a0 -> a1 -> a2 -> a3;
		label = "process #1";
	}

	subgraph cluster_1 {
		node [style=filled];
		b0 -> b1 -> b2 -> b3;
		label = "process #2";
		color=blue
	}
	start -> a0;
	start -> b0;
	a1 -> b3;
	b2 -> a3;
	a3 -> a0;
	a3 -> end;
	b3 -> end;

	start [shape=Mdiamond];
	end [shape=Msquare];
}

波形图
1
2
3
4
5
6
7
8
9
​```wave
{
  "signal": [ {"name": "CLK", "wave": "p.....|..."},
            {"name":"DAT", "wave":"x.345x|=.x", "data":["A","B","C","D"]},
            {"name": "REQ", "wave": "0.1..0|1.0"},
            {},
            {"name": "ACK", "wave": "1.....|01."}
]}
\```
{
  "signal": [ {"name": "CLK", "wave": "p.....|..."},
            {"name":"DAT", "wave":"x.345x|=.x", "data":["A","B","C","D"]},
            {"name": "REQ", "wave": "0.1..0|1.0"},
            {},
            {"name": "ACK", "wave": "1.....|01."}
]}