前两天动手把之前博客从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
4
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
9
// '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
4
<?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.

例子: 列出所有以pdfmp4结尾的文件:

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

效果:

13. 展开详细

自定义标题展开:

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

默认为:

展开详细 ...

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" >}}
  • instagram

    1
    2
    3
    
    {{< instagram BWNjjyYFxVx >}}
    或
    {{< instagram BWNjjyYFxVx hidecaption >}}
  • 引用与交叉引用

    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="w7Ft2ymGmfc" autoplay="true" >}}
    或
    {{% youtube "w7Ft2ymGmfc" %}}

参考资料

  1. Markdown Cheatsheet
  2. Markdown 语法手册