标题

# H1（在当前主题中无法放入文章目录中，也无横线分割）

注意在当前主题中即使在H1下增加======也不能增加横线

## H2（在当前主题中只有它出现在文章目录中，其下有横线）
### H3（其下有横线）
#### H4
##### H5
###### H6

H1（在当前主题中无法放入文章目录中，也无横线分割）

注意在当前主题中即使在H1下增加======也不能增加横线

H2（在当前主题中只有它出现在文章目录中，其下有横线）

H3（其下有横线）

H4

H5

H6

强调

一对\*号构成斜体字，*这是斜体*
一对\_号也构成斜体字，_这是斜体线abcdef_
一对\*\*或\_\_号构成黑体字，**这是黑体字ABCDEF**，__这也是黑体字GHIJKL__，（在这个主题里使用QQ浏览器非IE内核黑体貌似显示不出来）
可以组合使用\*\_，__这是黑体加*斜体*__，（貌似一定要用这个顺序）
一对\~\~号构成删除线字，~~这是删除线AbCdEf~~

一对*号构成斜体字，这是斜体

一对_号也构成斜体字，这是斜体线abcdef

一对**或__号构成黑体字，这是黑体字ABCDEF，这也是黑体字GHIJKL，（在这个主题里使用QQ浏览器非IE内核黑体貌似显示不出来）

可以组合使用*_，这是黑体加斜体，（貌似一定要用这个顺序）

一对~~号构成删除线字，这是删除线AbCdEf

列表

无序列表

无序列表先导符号可以是*、+或-

* 一个项目
  * 项目缩进1
    + 项目缩进2
      * 项目缩进3
+ 又一个项目
    * 又一个项目缩进1
- 又又一个项目

• 一个项目
  • 项目缩进1
    • 项目缩进2
      • 项目缩进3

• 又一个项目
  • 又一个项目缩进1

• 又又一个项目

有序列表

1. 项目1
1. 项目2（这里序号仍然是2，先导数字是多少并不影响*有序列表*的序号，注意貌似在有序列表里只能用\*来强调）
2. 项目3
  1. 此处是缩进的有序列表吗？可惜不是
     用5个先导空格，加之上下的空行可以在列表项目中间增加一个和*项目对齐*的段落。
2. 项目4

有序列表的中断是靠什么？是这样的一个新段落中断了之前的有序列表。

3. 项目5（有序列表的起始序号是由第一个项目的编号决定的，这里是从3开始）
1. 项目6

1. 项目1

2. 项目2（这里序号仍然是2，先导数字是多少并不影响有序列表的序号，注意貌似在有序列表里只能用*来强调）

3. 项目3

4. 此处是缩进的有序列表吗？可惜不是

   用5个先导空格，加之上下的空行可以在列表项目中间增加一个和项目对齐的段落。

5. 项目4

有序列表的中断是靠什么？是这样的一个新段落中断了之前的有序列表。

3. 项目5（有序列表的起始序号是由第一个项目的编号决定的，这里是从3开始）
4. 项目6

代码块和语法高亮

内嵌的`代码`是用`反单引号围起来高亮`的，同时由先导的4个空格定义一个代码块。

内嵌的代码是用反单引号围起来高亮的，同时由先导的4个空格定义一个代码块。

另外在代码块外可以通过3个反单引号`来指定需要的特定语言语法高亮：

(这里是代码块，开头有4个空格)
下面内容放在代码块之外的话有语法高亮
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
 
```python
s = "Python syntax highlighting"
print s
```

1
2

var s = "JavaScript syntax highlighting";
alert(s);

1
2

s = "Python syntax highlighting"
print s

也可以在代码块外使用highlight短代码实现代码语法高亮：

{\{< highlight html>}}
<section id="main">
  <div>
   <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
        {{ .Render "summary"}}
    {{ end }}
  </div>
</section>
{\{< /highlight >}}

1
2
3
4
5
6
7
8

<section id="main">
  <div>
   <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
        {{ .Render "summary"}}
    {{ end }}
  </div>
</section>

引用

> 由\>先导的是*引用内容*，仍是\*才能起到**强调**作用。

由>先导的是引用内容，貌似仍是*才能起到强调作用。

水平线

3个或更多的\-，中间没有空行的话相当于H2
---

3个或更多的\-，中间有空行的话是一个居中的横线，PC上不到边

---

3个或更多的\*或3个或更多的\_，也是一个居中的横线，PC上不到边
***
___

3个或更多的-，中间没有空行的话相当于H2

3个或更多的-，中间有空行的话是一个居中的横线，PC上不到边

3个或更多的*或3个或更多的_，也是一个居中的横线，PC上不到边

段间隔

两个空行会形成一个新段落。

表格

冒号:用于列对齐

| 表格          | 是           | 很酷的|
| ------------- |:------------:| -----:|
| 列3是         | 右对齐       | $1600 |
| 列2是         | 中央对齐     |   $12 |
| 斑马条纹      | 是整齐的     |    $1 |

至少3个短横线\-用来分开表格头单元，
竖线(|)是可选的，你不需要将原始表格弄得很整齐。你也可是使用内嵌标记。

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

冒号:用于列对齐

至少3个短横线-用来分开表格头单元， 竖线(|)是可选的，你不需要将原始表格弄得很整齐。你也可是使用内嵌标记。

Emoij代码

需要在config.toml中增加enableEmoji = true, 可以在这里 查找Emoij代码。

• 😄 \:smile\:
• 😆 \:laughing\:

Hugo-notice短代码

用于显示好看的notices，有4种类型: warning, info, note and tip.

{\{< notice warning >}}
This is a warning notice. Be warned!
{\{< /notice >}}

or

{\{< notice info >}}
This is a info.
{\{< /notice >}}

or

{\{< notice note >}}
This is a note.
{\{< /notice >}}

or

{\{< notice tip >}}
This is a very good tip.
{\{< /notice >}}

内嵌显示pdf短代码

未知以下代码为何不能工作？

{\{< embed-pdf url="/static/pdf/2021-07/chisel-book-chinese.pdf" >}}

超链接

图像

1

![未加修饰显示图片](/post/img_example.jpg)

使用Hugo内建figure简码

虽然在rootDir/static以及rootDir/public/static下都放了img_example_2.jpg， 但用hugo server仍然无法在本机预览（应该能在非预览模式看到）， 实际上hugo直接在static下寻找文件并将其复制到到了public下。

另外图片的缩放似不起作用！

1
2
3
4

{\{< figure src="/static/img_example_2.jpg" height="100" width="100">}} ## 无法预览
{\{< figure src="/img_example_2.jpg" height="100%" width="100%">}}      ## 可以预览
{\{< figure src="/img_example_2.jpg" height="50%" width="50%">}}        ## 可以预览
<img src="/img_example_2.jpg" height="25%" width="25%" />               ## raw html被忽略了

raw HTML会被缺省忽略，可以使用下面内嵌HTML方法实现。

内嵌HTML

由于从Hugo 0.60版本开始， 默认的Markdown渲染器已更改为goldmark， 它缺省并不允许原始的HTML标记， 有几种做法，可以参考知乎文章《hugo支持内联html块》， 从这篇文章里的链接中 （见这里） 我找到了我个人认为最佳的做法，在layouts/shortcodes/下 新建一个非常简单的raw-html.html文件，其内容只有一行

1

{{ .Inner }}

定义好这个shortcode后，如果实现一个左对齐的图像代码如下

1
2
3
4
5
6

{\{< raw-html >}}
<img src="/img_example_2.jpg"
     alt="img_example_2_by_raw-html"
     style="margin-left:0%;width:20%"
/>
{\{< / raw-html >}}

由于使用了样式， 直接对参数如height或width赋值的方式都不起作用 （align的方式可以起作用但排版会变得怪异）， 只能使用style的方式超越css中的设置， 通过使用margin-left或margin-right的方式实现左对齐或右对齐。