420 lines
11 KiB
Markdown
420 lines
11 KiB
Markdown
|
---
|
||
|
|
weight: 4
|
||
|
|
title: "主题文档 - 扩展 Shortcodes"
|
||
|
|
date: 2020-03-03T16:29:59+08:00
|
||
|
|
lastmod: 2020-06-12T10:10:13+03:00
|
||
|
|
draft: false
|
||
|
|
author: "Dillon"
|
||
|
|
authorLink: "https://dillonzq.com"
|
||
|
|
description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."
|
||
|
|
images: []
|
||
|
|
resources:
|
||
|
|
- name: "featured-image"
|
||
|
|
src: "featured-image.jpg"
|
||
|
|
- name: "featured-image-preview"
|
||
|
|
src: "featured-image-preview.jpg"
|
||
|
|
|
||
|
|
tags: ["shortcodes"]
|
||
|
|
categories: ["documentation"]
|
||
|
|
|
||
|
|
lightgallery: true
|
||
|
|
|
||
|
|
math:
|
||
|
|
enable: true
|
||
|
|
---
|
||
|
|
|
||
|
|
**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.
|
||
|
|
|
||
|
|
<!--more-->
|
||
|
|
|
||
|
|
## 1 style
|
||
|
|
|
||
|
|
{{< version 0.2.0 changed >}}
|
||
|
|
|
||
|
|
{{< admonition >}}
|
||
|
|
Hugo **extended** 版本对于 `style` shortcode 是必需的.
|
||
|
|
{{< /admonition >}}
|
||
|
|
|
||
|
|
`style` shortcode 用来在你的文章中插入自定义样式.
|
||
|
|
|
||
|
|
`style` shortcode 有两个位置参数.
|
||
|
|
|
||
|
|
第一个参数是自定义样式的内容. 它支持 [:(fab fa-sass fa-fw): SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting) 中的嵌套语法,
|
||
|
|
并且 `&` 指代这个父元素.
|
||
|
|
|
||
|
|
第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 `div`.
|
||
|
|
|
||
|
|
一个 `style` 示例:
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
|
||
|
|
This is a **right-aligned** paragraph.
|
||
|
|
{{</* /style */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
呈现的输出效果如下:
|
||
|
|
|
||
|
|
{{< style "text-align:right; strong{color:#00b1ff;}" >}}
|
||
|
|
This is a **right-aligned** paragraph.
|
||
|
|
{{< /style >}}
|
||
|
|
|
||
|
|
## 2 link
|
||
|
|
|
||
|
|
{{< version 0.2.0 >}}
|
||
|
|
|
||
|
|
`link` shortcode 是 [Markdown 链接语法](../basic-markdown-syntax#links) 的替代.
|
||
|
|
`link` shortcode 可以提供一些其它的功能并且可以在代码块中使用.
|
||
|
|
|
||
|
|
{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
|
||
|
|
|
||
|
|
`link` shortcode 有以下命名参数:
|
||
|
|
|
||
|
|
* **href** *[必需]* (**第一个**位置参数)
|
||
|
|
|
||
|
|
链接的目标.
|
||
|
|
|
||
|
|
* **content** *[可选]* (**第二个**位置参数)
|
||
|
|
|
||
|
|
链接的内容, 默认值是 **href** 参数的值.
|
||
|
|
|
||
|
|
*支持 Markdown 或者 HTML 格式.*
|
||
|
|
|
||
|
|
* **title** *[可选]* (**第三个**位置参数)
|
||
|
|
|
||
|
|
HTML `a` 标签 的 `title` 属性, 当悬停在链接上会显示的提示.
|
||
|
|
|
||
|
|
* **rel** *[可选]*
|
||
|
|
|
||
|
|
HTML `a` 标签 的 `rel` 补充属性.
|
||
|
|
|
||
|
|
* **class** *[可选]*
|
||
|
|
|
||
|
|
HTML `a` 标签 的 `class` 属性.
|
||
|
|
|
||
|
|
一个 `link` 示例:
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
{{</* link "https://assemble.io" */>}}
|
||
|
|
或者
|
||
|
|
{{</* link href="https://assemble.io" */>}}
|
||
|
|
|
||
|
|
{{</* link "mailto:contact@revolunet.com" */>}}
|
||
|
|
或者
|
||
|
|
{{</* link href="mailto:contact@revolunet.com" */>}}
|
||
|
|
|
||
|
|
{{</* link "https://assemble.io" Assemble */>}}
|
||
|
|
或者
|
||
|
|
{{</* link href="https://assemble.io" content=Assemble */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
呈现的输出效果如下:
|
||
|
|
|
||
|
|
* {{< link "https://assemble.io" >}}
|
||
|
|
* {{< link "mailto:contact@revolunet.com" >}}
|
||
|
|
* {{< link "https://assemble.io" Assemble >}}
|
||
|
|
|
||
|
|
一个带有标题的 `link` 示例:
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
{{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
|
||
|
|
或者
|
||
|
|
{{</* link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
呈现的输出效果如下 (将鼠标悬停在链接上，会有一行提示):
|
||
|
|
|
||
|
|
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||
|
|
|
||
|
|
## 3 image {#image}
|
||
|
|
|
||
|
|
{{< version 0.2.0 changed >}}
|
||
|
|
|
||
|
|
`image` shortcode 是 [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightGallery](https://github.com/sachinchoolur/lightgallery) 两个依赖库.
|
||
|
|
|
||
|
|
{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
|
||
|
|
|
||
|
|
`image` shortcode 有以下命名参数:
|
||
|
|
|
||
|
|
* **src** *[必需]* (**第一个**位置参数)
|
||
|
|
|
||
|
|
图片的 URL.
|
||
|
|
|
||
|
|
* **alt** *[可选]* (**第二个**位置参数)
|
||
|
|
|
||
|
|
图片无法显示时的替代文本, 默认值是 **src** 参数的值.
|
||
|
|
|
||
|
|
*支持 Markdown 或者 HTML 格式.*
|
||
|
|
|
||
|
|
* **caption** *[可选]* (**第三个**位置参数)
|
||
|
|
|
||
|
|
图片标题.
|
||
|
|
|
||
|
|
*支持 Markdown 或者 HTML 格式.*
|
||
|
|
|
||
|
|
* **title** *[可选]*
|
||
|
|
|
||
|
|
当悬停在图片上会显示的提示.
|
||
|
|
|
||
|
|
* **class** *[可选]*
|
||
|
|
|
||
|
|
HTML `figure` 标签的 `class` 属性.
|
||
|
|
|
||
|
|
* **src_s** *[可选]*
|
||
|
|
|
||
|
|
图片缩略图的 URL, 用在画廊模式中, 默认值是 **src** 参数的值.
|
||
|
|
|
||
|
|
* **src_l** *[可选]*
|
||
|
|
|
||
|
|
高清图片的 URL, 用在画廊模式中, 默认值是 **src** 参数的值.
|
||
|
|
|
||
|
|
* **height** *[可选]*
|
||
|
|
|
||
|
|
图片的 `height` 属性.
|
||
|
|
|
||
|
|
* **width** *[可选]*
|
||
|
|
|
||
|
|
图片的 `width` 属性.
|
||
|
|
|
||
|
|
* **linked** *[可选]*
|
||
|
|
|
||
|
|
图片是否需要被链接, 默认值是 `true`.
|
||
|
|
|
||
|
|
* **rel** *[可选]*
|
||
|
|
|
||
|
|
HTML `a` 标签 的 `rel` 补充属性, 仅在 **linked** 属性设置成 `true` 时有效.
|
||
|
|
|
||
|
|
一个 `image` 示例:
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
呈现的输出效果如下:
|
||
|
|
|
||
|
|
{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
|
||
|
|
|
||
|
|
## 4 admonition
|
||
|
|
|
||
|
|
`admonition` shortcode 支持 **12** 种 帮助你在页面中插入提示的横幅.
|
||
|
|
|
||
|
|
*支持 Markdown 或者 HTML 格式.*
|
||
|
|
|
||
|
|
{{< 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** *[可选]* (**第三个**位置参数) {{< version 0.2.0 changed >}}
|
||
|
|
|
||
|
|
横幅内容是否默认展开, 默认值是 `true`.
|
||
|
|
|
||
|
|
一个 `admonition` 示例:
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
{{</* admonition type=tip title="This is a tip" open=false */>}}
|
||
|
|
一个 **技巧** 横幅
|
||
|
|
{{</* /admonition */>}}
|
||
|
|
或者
|
||
|
|
{{</* admonition tip "This is a tip" false */>}}
|
||
|
|
一个 **技巧** 横幅
|
||
|
|
{{</* /admonition */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
呈现的输出效果如下:
|
||
|
|
|
||
|
|
{{< admonition tip "This is a tip" false >}}
|
||
|
|
一个 **技巧** 横幅
|
||
|
|
{{< /admonition >}}
|
||
|
|
|
||
|
|
## 5 mermaid
|
||
|
|
|
||
|
|
`mermaid` shortcode 使用 [Mermaid](https://mermaidjs.github.io/) 库提供绘制图表和流程图的功能.
|
||
|
|
|
||
|
|
完整文档请查看页面 [主题文档 - mermaid Shortcode](../theme-documentation-mermaid-shortcode).
|
||
|
|
|
||
|
|
## 6 echarts
|
||
|
|
|
||
|
|
`echarts` shortcode 使用 [ECharts](https://echarts.apache.org/) 库提供数据可视化的功能.
|
||
|
|
|
||
|
|
完整文档请查看页面 [主题文档 - echarts Shortcode](../theme-documentation-echarts-shortcode).
|
||
|
|
|
||
|
|
## 7 mapbox
|
||
|
|
|
||
|
|
{{< version 0.2.0 >}}
|
||
|
|
|
||
|
|
`mapbox` shortcode 使用 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 库提供互动式地图的功能.
|
||
|
|
|
||
|
|
完整文档请查看页面 [主题文档 - mapbox Shortcode](../theme-documentation-mapbox-shortcode).
|
||
|
|
|
||
|
|
## 8 music
|
||
|
|
|
||
|
|
`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 库提供了一个内嵌的响应式音乐播放器.
|
||
|
|
|
||
|
|
完整文档请查看页面 [主题文档 - music Shortcode](../theme-documentation-music-shortcode).
|
||
|
|
|
||
|
|
## 9 bilibili
|
||
|
|
|
||
|
|
{{< version 0.2.0 changed >}}
|
||
|
|
|
||
|
|
`bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.
|
||
|
|
|
||
|
|
完整文档请查看页面 [主题文档 - bilibili Shortcode](../theme-documentation-bilibili-shortcode).
|
||
|
|
|
||
|
|
## 10 typeit
|
||
|
|
|
||
|
|
`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 库提供了打字动画.
|
||
|
|
|
||
|
|
完整文档请查看页面 [主题文档 - typeit Shortcode](../theme-documentation-typeit-shortcode).
|
||
|
|
|
||
|
|
## 11 script
|
||
|
|
|
||
|
|
{{< version 0.2.8 >}}
|
||
|
|
|
||
|
|
`script` shortcode 用来在你的文章中插入 **:(fab fa-js fa-fw): Javascript** 脚本.
|
||
|
|
|
||
|
|
{{< admonition >}}
|
||
|
|
脚本内容可以保证在所有的第三方库加载之后按顺序执行.
|
||
|
|
所以你可以自由地使用第三方库.
|
||
|
|
{{< /admonition >}}
|
||
|
|
|
||
|
|
一个 `script` 示例:
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
{{</* script */>}}
|
||
|
|
console.log('Hello LoveIt!');
|
||
|
|
{{</* /script */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
你可以在开发者工具的控制台中看到输出.
|
||
|
|
|
||
|
|
{{< script >}}
|
||
|
|
console.log('Hello LoveIt!');
|
||
|
|
{{< /script >}}
|
||
|
|
|
||
|
|
## 12 raw
|
||
|
|
|
||
|
|
{{< version 0.2.11 >}}
|
||
|
|
|
||
|
|
`raw` shortcode 用来在你的文章中插入原始 **:(fab fa-html5 fa-fw): HTML** 内容.
|
||
|
|
|
||
|
|
一个 `raw` 示例:
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
行内公式: {{</* raw */>}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{</* /raw */>}}
|
||
|
|
|
||
|
|
公式块:
|
||
|
|
|
||
|
|
{{</* raw */>}}
|
||
|
|
\[ a=b+c \\ d+e=f \]
|
||
|
|
{{</* /raw */>}}
|
||
|
|
|
||
|
|
原始的带有 Markdown 语法的内容: {{</* raw */>}}**Hello**{{</* /raw */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
呈现的输出效果如下:
|
||
|
|
|
||
|
|
行内公式: {{< raw >}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}
|
||
|
|
|
||
|
|
公式块:
|
||
|
|
|
||
|
|
{{< raw>}}
|
||
|
|
\[ a=b+c \\ d+e=f \]
|
||
|
|
{{< /raw >}}
|
||
|
|
|
||
|
|
原始的带有 Markdown 语法的内容: {{< raw >}}**Hello**{{< /raw >}}
|
||
|
|
|
||
|
|
## 13 person
|
||
|
|
|
||
|
|
`person` shortcode 用来在你的文章中以 [h-card](http://microformats.org/wiki/h-card) 的格式插入个人网站链接.
|
||
|
|
|
||
|
|
`person` shortcode 有以下命名参数:
|
||
|
|
|
||
|
|
* **url** *[必需]* (**第一个**位置参数)
|
||
|
|
|
||
|
|
URL of the personal page.
|
||
|
|
|
||
|
|
* **name** *[必需]* (**第二个**位置参数)
|
||
|
|
|
||
|
|
Name of the person.
|
||
|
|
|
||
|
|
* **text** *[可选]* (**第三个**位置参数)
|
||
|
|
|
||
|
|
Text to display as hover tooltip of the link.
|
||
|
|
|
||
|
|
* **picture** *[可选]* (**第四个**位置参数)
|
||
|
|
|
||
|
|
A picture to use as person's avatar.
|
||
|
|
|
||
|
|
* **nick** *[可选]*
|
||
|
|
|
||
|
|
Nickame of the person.
|
||
|
|
|
||
|
|
一个 `person` 示例:
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
{{</* person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
呈现的输出效果为 {{< person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" >}}.
|
||
|
|
|
||
|
|
一个使用通用图标的 `person` 示例:
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
{{</* person "https://dillonzq.com/" Dillon "author of the LoveIt theme" */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
呈现的输出效果为 {{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}.
|