前两天动手把之前博客从Jekyll移植到Hugo上，原因是Hugo又快又方便

Copy from 《Hugo 主题 Nuo 文章样式预览》 ， 有部分修改。

这篇文章集中说明主题所支持的 Markdown 语法和 Hugo Shortcodes 插件，你也可以在这里预览到他们的样子。如果你不喜欢某些样式，可以去修改 less/ 文件夹进行调整。

0.双语功能

使用方法：Front matter 中加入multilingual = true

1
2
3
4
5
6

<div class="zh post-container">
{{< file "content/post/test/test.zh" >}}
</div>
<div class="en post-container">
{{< file "content/post/test/test.en" >}}
</div>

效果见多语言测试

1.标题

H1

H2

H3

H4

H5
H6

2.段落

使用单引号 * 或者单下划线 _ 标记 斜体强调 或者 斜体强调

使用两个引号 ** 或者两个下划线 __ 标记 加粗强调 或者 加粗强调

引号和下划线可叠加使用 → 只是加粗 斜体并加粗

使用两个波浪线 ~~ 标记 已删除文字

插入文字暂无 Markdown 标记，直接使用 HTML 标签 <ins> 标记 插入文字

行内代码使用反引号标记 → print("hello world")

上标 X2 / 下标 X2

按键 Ctrl

外链 chekun’s blog

页面内段落 图片

注意：你可以通过 {#section-id} 方式自定义段落锚点

参考资料 [1][2]

3.列表

以下的无序、有序和任务列表均支持二级嵌套，不建议使用二级以上嵌套。

3.1 无序列表

  • 无序列表
    • 嵌套的无序列表
    • 嵌套的无序列表
  • 无序列表
    1. 嵌套的有序列表
    2. 嵌套的有序列表
  • 无序列表

3.2 有序列表

  1. 有序列表
    1. 嵌套的有序列表
    2. 嵌套的有序列表
  2. 有序列表
    • 嵌套的无序列表
    • 嵌套的无序列表
  3. 有序列表

3.3 定义列表

CSS:
层叠样式表

3.4 任务列表

4.引用

野火烧不尽，春风吹又生.

5.代码

代码语法高亮演示。

1
2
3

function helloWorld () {
  alert("Hello, World!")
}

1
2
3
4
5

public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World!");
  }
}
1
2
3
4
5

package hello

fun main(args: Array<String>) {
  println("Hello World!")
}
1
2
3
4
5
6
7

#include <stdio.h>

/* Hello */
int main(void){
  printf("Hello, World!");
  return 0;
}
1
2
3
4
5
6
7
8

// 'Hello World!' program

#include <iostream>

int main(){
  std::cout << "Hello World!" << std::endl;
  return 0;
}

1
2
3
4
5
6

using System;
class HelloWorld{
  public static void Main(){
    System.Console.WriteLine("Hello, World!");
  }
}

1
2
3
4
5

<html>
<body>
  Hello, World!
</body>
</html>
1
2
3
4
5
6
7

package main
import fmt "fmt"

func main()
{
   fmt.Printf("Hello, World!\n");
}
1
2
3

object HelloWorld with Application {
  Console.println("Hello, World!");
}
1
2
3

<?php
  echo 'Hello, World!';
?>

1

print("Hello, World!")

6.分割线

中间能写字的分割线，如果你修改了分割线中字的内容，请配合修改 CSS 样式。

7.图片

不带标题的图片，如下图👇

1

{{% figure src="/favicon.ico" %}}

带标题的图片，如下图👇

1

{{% figure class="center lazyload" src="/favicon.ico" alt="favicon" title="favicon" %}}
favicon

favicon

8.表格

使用 Markdown 画的表格，如下表👇

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

9.数学公式

主题使用了 MathJax 开源库来实现对数学公式的支持，使用 $$ 标记。

$$ evidence_{i}=\sum_{j}W_{ij}x_{j}+b_{i} $$

Marry has a little matrix $ ( \begin{smallmatrix} a&b \\ c&d \end{smallmatrix} ) $

10.流程图

Mermaid is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.

Just insert your mermaid code in the mermaid shortcode and that’s it.

Flowchart example

1
2
3
4
5
6
7

{{<mermaid align="left">}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

效果为：

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

Sequence example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{{<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 >}}

效果为：

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
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!

GANTT Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{{<mermaid>}}
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d
{{< /mermaid >}}

效果：

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d

11. 音乐

主题文章中可以轻松插入 各大网站的指定音乐，由Aplayer提供支持，你可以根据需要将音乐设置为自动播放，在主题目录 layouts/shortcodes 文件夹下的 music.html 对该标签进行定义。

1

{{% music "28196554" %}}

1

{{% music id="804530027" server="netease" type="playlist" %}}

12. 附件

来自 Hugo-theme-Learn

  1. If your page is a markdown file, attachements must be place in a folder named like your page and ending with .files.

    • content
      • _index.md
      • page.files
      • attachment.pdf
      • page.md

  2. If your page is a folder, attachements must be place in a nested ‘files’ folder.

    • content
      • _index.md
      • page
      • index.md
      • files
        • attachment.pdf

参数设置：

ParameterDefaultDescription
title“附件”List’s title
style””Choose between “orange”, “grey”, “blue” and “green” for nice style
pattern”.*”A regular expressions, used to filter the attachments by file name.

The pattern parameter value must be regular expressions.

例子： 列出所有以pdf和mp4结尾的文件:

1

{{< attachments title="相关附件" pattern=".*(png|mp4)" >}}

效果：

  • 附件测试.mp4
  • 附件测试.png

    • 13. 展开详细

    自定义标题展开：

    1

    {{% expand "好看吗?" %}}Yes !{{%  /expand %}}

    好看吗?

    Yes !

    默认为：

    Click to expand Yes !

    14. notice 等

    Disclaimers to help you structure your page

    禁掉了颜色，如果要使用，请把相关文件复制到layout下并进行修改

    1
2
3

    {{%  notice 自定义提示标题 %}}
这是一个自定义提示。
{{%  /notice %}}

    效果：

    自定义提示标题

    这是一个自定义提示。

    默认设置为：

    A notice disclaimer

    15.优酷视频

    1

    {{< youku XMjkxMzU2ODE4OA >}}

    效果：

    官方提供的ShortCode

    部分可能由于不明原因无法实现

    • gist

      1

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

    • 引用与交叉引用

      1
2

      [About Me]({{< ref "/about.md" >}})
[测试]({{< relref "multilingual.md#测试" >}})

    • speakerdeck

      1

      {{< speakerdeck 4e8126e72d853c0060001f97 >}}

    • tweet

      1

      {{< tweet 877500564405444608 >}}

    • vimeo

      1

      {{< vimeo 146022717 >}}

    • Youtube

      1
2
3

      {{< youtube id="Xii_Ijfcwf4" autoplay="true" >}}
或
{{% youtube "Xii_Ijfcwf4" %}}

    参考资料

    1. Markdown Cheatsheet
    2. Markdown 语法手册