扩展 Shortcodes

LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 Shortcode.

style

style shortcode 用来在你的文章中插入自定义样式.

style shortcode 有两个位置参数.

第一个参数是自定义样式的内容. 它支持  SASS 中的嵌套语法, 并且 & 指代这个父元素.

第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 div.

一个 style 示例:

1
2
3

{{< style "text-align:right; strong{color:#00b1ff;}" >}}
This is a **right-aligned** paragraph.
{{< /style >}}

呈现的输出效果如下:

link

link shortcode 有以下命名参数:

• href [必需]（第一个位置参数）

  链接的目标。

• content [可选]（第二个位置参数）

  链接的内容，默认值是 href 参数的值。

  支持 Markdown 或者 HTML 格式。

• title [可选]（第三个位置参数）

  HTML a 标签 的 title 属性，当悬停在链接上会显示的提示。

• card [可选]（第四个位置参数

  是否显示为卡片式链接，默认值 false。

• card-icon [可选] (第五个位置参数)

  卡片式链接的图标，支持图片链接和 Font Awesome 图标。设置为 true，自动从链接获取缩略图。

• download [可选]

  HTML a 标签 的 download 属性。

• class [可选]

  HTML a 标签 的 class 属性。

• rel [可选]

  HTML a 标签 的 rel 补充属性。

• external-icon [可选]

  是否自动显示外链图标。

• noreferrer [可选]

  rel 属性是否添加 noreferrer, 默认：true。

一个 link 示例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{< link "https://xialuohun.top" >}}
或者
{{< link href="https://xialuohun.top >}}

{{< link "https://xialuohun.top" >}}
或者
{{< link href="https://xialuohun.top" >}}

{{< link "https://xialuohun.top" xialuohun >}}
或者
{{< link href="https://xialuohun.top" content=xialuohun >}}

呈现的输出效果如下:

• https://xialuohun.top
• https://xialuohun.top
• XiaLuoHun

一个带有标题的 link 示例:

1
2
3

{{< link "https://xialuohun.top" "" "XiaLuoHun" >}}
或者
{{< link href="https://xialuohun.top" content="" title="XiaLuoHun" >}}

呈现的输出效果如下 (将鼠标悬停在链接上，会有一行提示):

一个卡片式 link 示例：

1

{{< link "https://xialuohun.top" "XiaLuoHun" "" true "/images/Luo.png" >}}

呈现的输出效果如下：

XiaLuoHun https://xialuohun.top

admonition

admonition shortcode 支持 12 种 帮助你在页面中插入提示的横幅.

支持 Markdown 或者 HTML 格式.

admonition shortcode 有以下命名参数:

• type [必需] (第一个位置参数)

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

  1 2	//参数如下 note abstract info tip success question warning failure danger bug example quote

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

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

• open [可选] (第三个位置参数)

  横幅内容是否默认展开, 默认值是 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 >}}

呈现的输出效果如下:

typeit

typeit shortcode 基于 TypeIt 提供了打字动画.

只需将你需要打字动画的内容插入 typeit shortcode 中即可.

简单内容

允许使用 Markdown 格式的简单内容, 并且 不包含 富文本的块内容, 例如图像等等…

一个 typeit 示例:

1
2
3

{{< typeit >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
{{< /typeit >}}

呈现的输出效果如下:

另外, 你也可以自定义 HTML 标签.

一个带有 h4 标签的 typeit 示例:

1
2
3

{{< typeit tag=h4 >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
{{< /typeit >}}

呈现的输出效果如下:

代码内容

代码内容也是允许的, 并且通过使用参数 code 指定语言类型可以实习语法高亮.

一个带有 code 参数的 typeit 示例:

1
2
3
4
5
6
7

{{< typeit code=java >}}
public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}

呈现的输出效果如下:

分组内容

默认情况下, 所有打字动画都是同时开始的. 但是有时你可能需要按顺序开始一组 typeit 内容的打字动画.

一组具有相同 group 参数值的 typeit 内容将按顺序开始打字动画.

一个带有 group 参数的 typeit 示例:

1
2
3
4
5
6
7

{{< typeit group=paragraph >}}
**首先**, 这个段落开始
{{< /typeit >}}

{{< typeit group=paragraph >}}
**然后**, 这个段落开始
{{< /typeit >}}

呈现的输出效果如下:

script

script shortcode 用来在你的文章中插入  Javascript 脚本.

一个 script 示例:

1
2
3

{{< script >}}
console.log('Hello XiaLuoHun!');
{{< /script >}}

你可以在开发者工具的控制台中看到输出.

自定义属性

前提是你设置了 goldmark.parser.attribute.block 为 true。

Hugo 支持向 Markdown 块添加属性（例如 CSS 类），例如 表格、列表、段落等。

语法:

1
2

some Markdown content
{#id .class1 .class2 key1="value1" key2="value2"}

在大多数情况下，将属性列表放置在标记元素下方。对于标题和围栏代码块，将属性列表放在右侧。

例子:

带有 CSS 类的分割线：

1
2

---
{.awesome-hr}

呈现的输出如下所示:

带有 CSS 类的块引用：

1
2
3

> foo\
> bar
{#test-id .text-danger}

呈现的输出如下所示：

foo
bar

目前有一些限制：对于表格，你目前只能将其应用于完整表格，而对于列表，仅适用于 ul/ol 节点，例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

* 水果
  * 苹果
  * 橙子
  * 香蕉
  {.text-success}
* 乳制品
  * 牛奶
  * 奶酪
  {.text-warning}
{.text-primary}

呈现的输出如下所示：

• 水果
  • 苹果
  • 橙子
  • 香蕉
• 乳制品
  • 牛奶
  • 奶酪

给代码块添加 title 属性，例如：

1
2
3

```js {title="Luo.js"}
console.log('hello XiaLuoHun!');
```

呈现的输出效果如下：

1

console.log('hello XiaLuoHun!');

警示

警示也被称为callouts或admonitions,是用于强调关键信息的引用块。以下是所有五种类型的示例：

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

> [!NOTE]
> 突出显示用户应考虑的信息，即使只是浏览也应考虑。

> [!TIP]
> 可选信息，可帮助用户取得更大的成功。

> [!IMPORTANT]
> 用户成功所需的关键信息。

> [!WARNING]
> 由于存在潜在风险，需要用户立即关注的关键内容。

> [!CAUTION]
> 操作的潜在负面后果。

它们的显示方式如下：

标记文本

Hugo支持一种标记文本 Markdown扩展语法：

1

==个人博客== https://xialuohun.top/

呈现的输出效果如下：

个人博客 https://xialuohun.top/

扩展的标记文本语法支持6种类型的标记文本。

1
2
3
4
5
6

==Primary==[primary]
==Secondary==[secondary]
==Success==[success]
==Info==[info]
==Warning==[warning]
==Danger==[danger]

呈现的输出效果如下：

Primary Secondary Success Info Warning Danger

除非你自定义标记文本，否则任何不支持的类型都会默认为default类型。

1

==这是一个带有粉色的自定义类型。==[pink]

在你的项目目录assets/css/_custom.scss中添加以下 CSS 来自定义标记文本：

1
2
3

.mark-pink {
  --fi-mark-background-color: pink;
}

呈现的输出效果如下：

这是一个带有粉色的自定义类型。

输出的 HTML 看起来像这样：

1

<mark class="mark-pink">这是一个带有粉色的自定义类型。</mark>