毕少侠也在江湖

Fixit-常用示例

记录一些常用的语法,方便书写Hogo博客

警告
本文最后更新于 2023-06-26,文中内容可能已过时。

1 主题文档

LoveIt 主题源码 https://github.com/dillonzq/LoveIt
LoveIt 主题文档 https://hugoloveit.com/zh-cn/categories/documentation/
FixIt 主题源码 https://github.com/hugo-fixit/FixIt
FixIt 主题文档 https://fixit.lruihao.cn/zh-cn/categories/documentation/

2 Shortcode语法

Shortcode语法

2.1 link添加链接

参数说明

link添加链接,link示例代码

1
{{< link "https://github.com/hugo-fixit/FixIt" "FixIt 主题源码" "" true >}}

link效果

FixIt 主题源码 https://github.com/hugo-fixit/FixIt

技巧
link添加下载链接

 下载图片 /logo.png
 下载图片

1
2
3
{{< link href="/logo.png" content=" 下载图片" download="网站logo" card=true >}}
或者
{{< link href="/logo.png" content=" 下载图片" download="下载后的名称" card=false >}}

2.2 music添加音乐

music添加音乐,music示例代码

1
{{< music url="/music/Take-Me-To-Your-Heart.mp3"  name="Take-Me-To-Your-Heart" artist="Michael Learns To Rock" cover="/logo.png" volume="0.2" autoplay=true loop=all >}}
music效果
添加音乐部分效果后,页面导航就有问题了

2.3 admonition语法

使用admonition,会使得博客页面更加好看。
admonition shortcode 支持 12 种 帮助你在页面中插入提示的横幅.

支持 Markdown 或者 HTML 格式.

注意
一个 注意 横幅
摘要
一个 摘要 横幅
信息
一个 信息 横幅
技巧
一个 技巧 横幅
成功
一个 成功 横幅
问题
一个 问题 横幅
警告
一个 警告 横幅
失败
一个 失败 横幅
危险
一个 危险 横幅
Bug
一个 Bug 横幅
示例
一个 示例 横幅
引用
一个 引用 横幅
 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
{{< admonition >}}
一个 **注意** 横幅
{{< /admonition >}}

{{< admonition abstract >}}
一个 **摘要** 横幅
{{< /admonition >}}

{{< admonition info >}}
一个 **信息** 横幅
{{< /admonition >}}

{{< admonition tip >}}
一个 **技巧** 横幅
{{< /admonition >}}

{{< admonition success >}}
一个 **成功** 横幅
{{< /admonition >}}

{{< admonition question >}}
一个 **问题** 横幅
{{< /admonition >}}

{{< admonition warning >}}
一个 **警告** 横幅
{{< /admonition >}}

{{< admonition failure >}}
一个 **失败** 横幅
{{< /admonition >}}

{{< admonition danger >}}
一个 **危险** 横幅
{{< /admonition >}}

{{< admonition bug >}}
一个 **Bug** 横幅
{{< /admonition >}}

{{< admonition example >}}
一个 **示例** 横幅
{{< /admonition >}}

{{< admonition quote >}}
一个 **引用** 横幅
{{< /admonition >}}

admonition shortcode 有以下命名参数:

  • type [可选] (第一个位置参数)

    admonition 横幅的类型, 默认值是 note.

  • title [可选] (第二个位置参数)

    admonition 横幅的标题, 默认值是 type 参数的值.

  • open [可选] (第三个位置参数) FixIt 0.2.0 | 更改

    横幅内容是否默认展开, 默认值是 true.

一个 admonition 示例:

1
2
3
4
5
6
7
{{< admonition type=tip title="This is a tip" open=false >}}
一个 **技巧** 横幅
{{< /admonition >}}
或者
{{< admonition tip "This is a tip" false >}}
一个 **技巧** 横幅
{{< /admonition >}}

呈现的输出效果如下:

This is a tip
一个 技巧 横幅

2.4 typeit打字动画

TypeIt

示例效果

示例代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{< typeit >}}
<center>
<font face="楷体" size=4.6 color=#009966 >
莫笑少年江湖梦,谁不少年梦江湖。曾经年少立志三千里,如今踌躇百步无寸功。

懵懂半生,庸碌尘世中,转眼高堂皆白发,儿女蹒跚学堂中。碎银几两催人老。

心仍少,皱纹却上眉目中,浮生醉酒回梦里。青春人依旧,只叹时光太匆匆!
</font>
</center>
{{< /typeit >}}

2.5 figure插入图片

示例效果

Gavin Wells 欢迎你的留言

示例代码

1
{{< figure src="/images/posts/featured-image-preview.jpg" title="Gavin Wells 欢迎你的留言" >}}

markdown语法添加
markdown语法添加

2.6 功能描述

示例效果

示例代码

3 markdown语法

Markdown 官方教程访问:https://markdown.com.cn/

可快速学习查看markdown语法。

4 目录4

呈现的输出效果如下:

相关内容

Buy me a coffee
geekswg 支付宝支付宝
geekswg 微信微信
0%