1

{{< figure src="images/example.png" title="Mercury (figure)" >}}

1

{{< gist spf13 7896402 >}}

1

{{< gist spf13 7896402 "img.html" >}}

1
2
3
4
5
6
7
8
9

# html 为代码语言类型
{{< highlight html >}}
<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        <h4 id="desc">{{ .Desc }}</h4>
    </div>
</section>
{{< /highlight >}}

1
2
3
4
5
6

<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        <h4 id="desc">{{ .Desc }}</h4>
    </div>
</section>

1

Hugo 内置扩展以及 LoveIt 外置扩展使用示例

1
2

[Certbot]({{< ref "posts/certbot_nginx.md" >}}) 
[申请]({{< relref "posts/certbot_nginx.md#申请" >}})

1
2

{{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}
{{< tweet 917359331535966209 >}}

1

{{< vimeo 146022717 >}}

1

{{< youtube w7Ft2ymGmfc >}}

1
2
3

{{< style "text-align:right; strong{color:#00b1ff;}" >}}
This is a **right-aligned** paragraph.
{{< /style >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

无content，显示链接
{{< link "https://assemble.io" >}}
{{< link href="https://assemble.io" >}}

带content，显示content
{{< link "https://assemble.io" Assemble >}}
{{< link href="https://assemble.io" content=Assemble >}}

鼠标聚焦显示title
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
{{< link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" >}}

1

{{< image src="/images/example.png" caption="Mercury (`image`)" src_s="/images/example-small.jpg" src_l="/images/example-large.jpg" >}}

1
2
3
4

{{< admonition type=tip title="标题" open=false >}}
{{< /admonition >}}
{{< admonition tip "标题" false >}}
{{< /admonition >}}

1
2
3
4
5
6
7

{{< mermaid >}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /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

{{< echarts >}}
{
  "title": {
    "text": "折线统计图",
    "top": "2%",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
    "top": "10%"
  },
  "grid": {
    "left": "5%",
    "right": "5%",
    "bottom": "5%",
    "top": "20%",
    "containLabel": true
  },
  "toolbox": {
    "feature": {
      "saveAsImage": {
        "title": "保存为图片"
      }
    }
  },
  "xAxis": {
    "type": "category",
    "boundaryGap": false,
    "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "name": "邮件营销",
      "type": "line",
      "stack": "总量",
      "data": [120, 132, 101, 134, 90, 230, 210]
    },
    {
      "name": "联盟广告",
      "type": "line",
      "stack": "总量",
      "data": [220, 182, 191, 234, 290, 330, 310]
    },
    {
      "name": "视频广告",
      "type": "line",
      "stack": "总量",
      "data": [150, 232, 201, 154, 190, 330, 410]
    },
    {
      "name": "直接访问",
      "type": "line",
      "stack": "总量",
      "data": [320, 332, 301, 334, 390, 330, 320]
    },
    {
      "name": "搜索引擎",
      "type": "line",
      "stack": "总量",
      "data": [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
}
{{< /echarts >}}

1

{{< mapbox lng=121.485 lat=31.233 zoom=12 >}}

1

{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}

1
2

{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
{{< music "https://music.163.com/#/playlist?id=60198" >}}

1
2

{{< music server="netease" type="song" id="1868553" >}}
{{< music netease song 1868553 >}}

1
2

{{< bilibili BV1Sx411T7QQ >}}
{{< bilibili id=BV1Sx411T7QQ >}}

1
2

{{< bilibili BV1TJ411C7An 3 >}}
{{< bilibili id=BV1TJ411C7An p=3 >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

简单示例
{{< typeit >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
{{< /typeit >}}
带标签
{{< typeit tag=h4 >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
{{< /typeit >}}
代码块
{{< typeit code=java >}}
public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}
分组
{{< typeit group=paragraph >}}
**首先**, 这个段落开始
{{< /typeit >}}

{{< typeit group=paragraph >}}
**然后**, 这个段落开始
{{< /typeit >}}

1
2
3

{{< script >}}
console.log('Hello LoveIt!');
{{< /script >}}

1
2
3
4
5
6
7
8
9

行内公式: {{< raw >}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}

公式块:

{{< raw >}}
\[ a=b+c \\ d+e=f \]
{{< /raw >}}

原始的带有 Markdown 语法的内容: {{< raw >}}**Hello**{{< /raw >}}

1
2
3

{{< person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" >}}

{{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}