My First Hugo

槲落收录于类别杂项

2021-07-23 2023-03-14 约 1539 字预计阅读 4 分钟次阅读条评论

第一篇Hugo搭建的网站上的博客, 包含用Hugo的原因和对Hugo上Markdown的测试

用Hugo的原因

理由一: 速度

使用过hexo, 但是该框架搭建于node.js之上, 所以拉各种包体验很差, 编译静态页面体验不佳
理由二: 更新

hexo感觉更新很慢, 拉node的module还报些security involuntary与deprecated, 让强迫症无语

各种Markdown特性测试

1 目录

2 公式

2.1 行内公式

这是一个行内公式$E=mc^2$

2.2 行间公式

2.2.1 质能公式

$$ E=mc^2 $$

2.2.2 麦克斯韦方程组

$$ \begin{align*} \nabla\cdot\vec{E} &= \frac{\rho}{\epsilon_0} \newline \nabla\cdot\vec{B} &= 0 \newline \nabla\times\vec{E} &= -\frac{\partial B}{\partial t} \newline \nabla\times\vec{B} &= \mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t} \right) \end{align*} $$

3 代码块

1
2


for i in range(0, 10):
    print(i)

4 图片

5 嵌入Html

5.1 嵌入shortcodes

5.1.1 Bilibili

下面是一个测试视频iframe

配了半天, 不懂css真让人头大

在layouts/shortcodes下新建bilibili.html

 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


<style>
    .bilibili {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        overflow: hidden;
    }
    .bilibili iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        left: 0;
        top: 0;
    }
    /* @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      #bilibili {
        width: 100%;
        height: 250px;
      }
    } */
</style>

<div class="bilibili">
    {{ $videoID := index .Params 0 }}
    {{ $pageNum := index .Params 1 | default 1}}
    
    {{ if (findRE "^[bB][vV][0-9a-zA-Z]+$" $videoID) }}
    <iframe id="biliplayer" src="//player.bilibili.com/player.html?bvid={{ $videoID }}&page={{ $pageNum }}" 
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" 
        loading="lazy" > </iframe>
    {{ else }}
    <iframe id="biliplayer" src="//player.bilibili.com/player.html?aid={{ $videoID }}&page={{ $pageNum }}"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" 
        loading="lazy" > </iframe>
    {{ end }}
</div>

5.1.2 youtube

下面是一个测试视频iframe

5.1.3 raw

test

5.1.4 admonition

This is a note

一个笔记横幅, echo
中文测试

info

biu biu biu.
br br br

tip

biu biu biu. biu biu biu. biu biu biu. biu biu biu. biu biu biu. biu biu biu. biu biu biu. biu biu biu. biu biu biu. biu biu biu.

success

biu biu biu.

question

biu biu biu.

warning

biu biu biu.

failure

biu biu biu.

danger

biu biu biu.

bug

biu biu biu.

example

biu biu biu.

quote

biu biu biu.

I'm title!

biu biu biu.

note

biu biu biu.

示例

Without title.

1

insert into people (name, email) values ('relia', 'reliacrt@outlook.com');

5.1.5 default

https://i.loli.net/2021/07/23/NXPrMgiZoKm7tvJ.jpg — img

5.1.6 center

5.1.7 right

5.1.8 left

5.1.9 music

6 注释

这里使用了注释¹

A footnote on “label”²

The footnote for definition³

A footnote with link⁴

7 表格

	年龄	职业
小明	10	Student
小红	11	Student
小绿	12	Student

1
2
3
4
5


| _Colors_      | Fruits          | Vegetable         |
| ------------- |:---------------:| -----------------:|
| Red           | *Apple*         | [Pepper](#Tables) |
| ~~Orange~~    | Oranges         | **Carrot**        |
| Green         | ~~***Pears***~~ | Spinach           |

Colors	Fruits	Vegetable
Red	Apple	Pepper
~~Orange~~	Oranges	Carrot
Green	~~Pears~~	Spinach

Class or Enum	Day	Hours	Minutes	Zone Offset	Zone ID	toString Output	Where Discussed
`Instant`						`2013-08-20T15:16:26.355Z`	Instant Class
`LocalDate`						`2013-08-20`	Date Classes
`LocalDateTime`						`2013-08-20T08:16:26.937`	Date and Time Classes
`ZonedDateTime`						`2013-08-21T00:16:26.941+09:00[Asia/Tokyo]`	Time Zone and Offset Classes
`LocalTime`						`08:16:26.943`	Date and Time Classes
`MonthDay`						`--08-20`	Date Classes
`Year`						`2013`	Date Classes
`YearMonth`						`2013-08`	Date Classes
`Month`						`AUGUST`	DayOfWeek and Month Enums
`OffsetDateTime`						`2013-08-20T08:16:26.954-07:00`	Time Zone and Offset Classes
`OffsetTime`						`08:16:26.957-07:00`	Time Zone and Offset Classes
`Duration`	**	**	**			`PT20H` (20 hours)	Period and Duration
`Period`				***	***	`P10D` (10 days)	Period and Duration

8 引用

这是引用的文本内容

9 加粗

粗体文字, 看见了吗

10 斜体

斜体文字, 看见了吗

11 删除线

~~删除线~~

12 超链接

百度

13 列表

13.1 有序

第一手
第二条
第三次

13.2 无序

这里
那里

13.3 任务

混合
check in
check out

14 水平分割线

15 暂时不支持高亮

==高亮文字==

16 支持mermaid

17 页内跳转

公式行间公式

18 People emoji

👍👎👽👼💢😠😧😲👶💙😊💥🙇:bowtie:👦👰💔👤👥👏😰💥😖😕👷‍♂️👮‍♂️👫💑💏😢😿💘💃👯‍♀️💨😞😥💫😵💧👂❗😑👀👊👨‍👩‍👦😨:feelsgood:🐾:finnadie:🔥✊😳😦🖕👧:goberserk::godmode:💚❕❔😬😁😀💂‍♂️💇‍♀️✋💩🙉❤️😍😻💓💗:hurtrealbad:😯👿💁‍♀️😇👺👹😂😹💋😗😽😚😘😙😆👄💌👨👲👳‍♂️😷💆‍♀️🤘💪🎵💅:neckbeard:😐🙅‍♀️😶👃🎶👌🙆‍♀️👴👵👐😮😔😣🙍‍♀️👱‍♂️🙎‍♀️👇👈👉☝️👆💩😾🙏👸👊💜❓😡:rage1::rage2::rage3::rage4:✋🙌🙋‍♀️☺️😌💞🏃‍♂️🏃😆😱🙀🙈💩💀😴😪😄😸😃😺😈😏😼😭✨💖🙊💬⭐🌟😛😝😜😎:suspect:😓💦😅💭👎👍😫👅😤:trollface:💕👬👭😒✌️🚶‍♂️👋😩😉👩😟💛😋💤

19 斜体粗体支持

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


^^insert^^

^^*insert italic*^^  *^^insert italic 2^^*

^^_insert italic_^^  _^^insert italic 2^^_

^^**insert bold**^^  **^^insert bold 2^^**

^^__insert bold__^^  __^^insert bold 2^^__

^^***insert italic bold***^^  ***^^insert italic bold 2^^***

^^___insert italic bold___^^  ___^^insert italic bold 2^^___

**^^*insert italic bold*^^**  *^^**insert italic bold 2**^^*

__^^_insert italic bold_^^__  _^^__insert italic bold 2__^^_

**^^_insert italic bold_^^**  _^^**insert italic bold 2**^^_

__^^*insert italic bold*^^__  *^^__insert italic bold 2__^^*

^^insert^^

^^insert italic^^ ^^insert italic 2^^

^^insert bold^^ ^^insert bold 2^^

^^insert italic bold^^ ^^insert italic bold 2^^

^^insert italic bold^^ ^^insert italic bold 2^^

这是注释的内容 ↩︎
A footnote on “label” ↩︎
The footnote for definition ↩︎
Markdown Cheatsheet ↩︎