switch back to LoveIt, other theme is deprectated
This commit is contained in:
parent
260b6803e7
commit
51fb029ca2
4260 changed files with 49552 additions and 87082 deletions
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
|
|
@ -0,0 +1,424 @@
|
|||
---
|
||||
weight: 4
|
||||
title: "Theme Documentation - Extended Shortcodes"
|
||||
date: 2020-03-03T16:29:41+08:00
|
||||
lastmod: 2020-06-12T10:10:13+03:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo."
|
||||
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** theme provides multiple shortcodes on top of built-in ones in Hugo.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 1 style
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
{{< admonition >}}
|
||||
Hugo **extended** version is necessary for `style` shortcode.
|
||||
{{< /admonition >}}
|
||||
|
||||
`style` is a shortcode to insert custom style in your post.
|
||||
|
||||
The `style` shortcode has two positional parameters.
|
||||
|
||||
The **first** one is the custom style content,
|
||||
which supports nesting syntax in [:(fab fa-sass fa-fw): SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
|
||||
and `&` referring to this parent HTML element.
|
||||
|
||||
And the **second** one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is `div`.
|
||||
|
||||
Example `style` input:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
|
||||
This is a **right-aligned** paragraph.
|
||||
{{</* /style */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< style "text-align:right; strong{color:#00b1ff;}" >}}
|
||||
This is a **right-aligned** paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
## 2 link
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax#links). `link` shortcode can provide some other features and can be used in code blocks.
|
||||
|
||||
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
|
||||
|
||||
The `link` shortcode has the following named parameters:
|
||||
|
||||
* **href** *[required]* (**first** positional parameter)
|
||||
|
||||
Destination of the link.
|
||||
|
||||
* **content** *[optional]* (**second** positional parameter)
|
||||
|
||||
Content of the link, default value is the value of **href** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **title** *[optional]* (**third** positional parameter)
|
||||
|
||||
`title` attribute of the HTML `a` tag, which will be shown when hovering on the link.
|
||||
|
||||
* **class** *[optional]*
|
||||
|
||||
`class` attribute of the HTML `a` tag.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
Additional `rel` attributes of the HTML `a` tag.
|
||||
|
||||
Example `link` input:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://assemble.io" */>}}
|
||||
Or
|
||||
{{</* link href="https://assemble.io" */>}}
|
||||
|
||||
{{</* link "mailto:contact@revolunet.com" */>}}
|
||||
Or
|
||||
{{</* link href="mailto:contact@revolunet.com" */>}}
|
||||
|
||||
{{</* link "https://assemble.io" Assemble */>}}
|
||||
Or
|
||||
{{</* link href="https://assemble.io" content=Assemble */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
* {{< link "https://assemble.io" >}}
|
||||
* {{< link "mailto:contact@revolunet.com" >}}
|
||||
* {{< link "https://assemble.io" Assemble >}}
|
||||
|
||||
Example `link` input with a title:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
|
||||
Or
|
||||
{{</* link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this (hover over the link, there should be a tooltip):
|
||||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
## 3 image {#image}
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightGallery](https://github.com/sachinchoolur/lightgallery).
|
||||
|
||||
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
|
||||
|
||||
The `image` shortcode has the following named parameters:
|
||||
|
||||
* **src** *[required]* (**first** positional parameter)
|
||||
|
||||
URL of the image to be displayed.
|
||||
|
||||
* **alt** *[optional]* (**second** positional parameter)
|
||||
|
||||
Alternate text for the image if the image cannot be displayed, default value is the value of **src** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **caption** *[optional]* (**third** positional parameter)
|
||||
|
||||
Image caption.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **title** *[optional]*
|
||||
|
||||
Image title that will be shown when hovering on the image.
|
||||
|
||||
* **class** *[optional]*
|
||||
|
||||
`class` attribute of the HTML `figure` tag.
|
||||
|
||||
* **src_s** *[optional]*
|
||||
|
||||
URL of the image thumbnail, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **src_l** *[optional]*
|
||||
|
||||
URL of the HD image, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
`height` attribute of the image.
|
||||
|
||||
* **width** *[optional]*
|
||||
|
||||
`width` attribute of the image.
|
||||
|
||||
* **linked** *[optional]*
|
||||
|
||||
Whether the image needs to be hyperlinked, default value is `true`.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`.
|
||||
|
||||
Example `image` input:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
|
||||
|
||||
## 4 admonition
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
*Markdown or HTML format in the content is supported.*
|
||||
|
||||
{{< admonition >}}
|
||||
A **note** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition abstract >}}
|
||||
An **abstract** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition info >}}
|
||||
A **info** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition tip >}}
|
||||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition success >}}
|
||||
A **success** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition question >}}
|
||||
A **question** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition warning >}}
|
||||
A **warning** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition failure >}}
|
||||
A **failure** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition danger >}}
|
||||
A **danger** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition bug >}}
|
||||
A **bug** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition example >}}
|
||||
An **example** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition quote >}}
|
||||
A **quote** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
The `admonition` shortcode has the following named parameters:
|
||||
|
||||
* **type** *[optional]* (**first** positional parameter)
|
||||
|
||||
Type of the `admonition` banner, default value is `note`.
|
||||
|
||||
* **title** *[optional]* (**second** positional parameter)
|
||||
|
||||
Title of the `admonition` banner, default value is the value of **type** parameter.
|
||||
|
||||
* **open** *[optional]* (**third** positional parameter) {{< version 0.2.0 changed >}}
|
||||
|
||||
Whether the content will be expandable by default, default value is `true`.
|
||||
|
||||
Example `admonition` input:
|
||||
|
||||
```markdown
|
||||
{{</* admonition type=tip title="This is a tip" open=false */>}}
|
||||
A **tip** banner
|
||||
{{</* /admonition */>}}
|
||||
Or
|
||||
{{</* admonition tip "This is a tip" false */>}}
|
||||
A **tip** banner
|
||||
{{</* /admonition */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< admonition tip "This is a tip" false >}}
|
||||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
## 5 mermaid
|
||||
|
||||
The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - mermaid Shortcode](../theme-documentation-mermaid-shortcode).
|
||||
|
||||
## 6 echarts
|
||||
|
||||
The `echarts` shortcode supports data visualization in Hugo with [ECharts](https://echarts.apache.org/) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - echarts Shortcode](../theme-documentation-echarts-shortcode).
|
||||
|
||||
## 7 mapbox
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - mapbox Shortcode](../theme-documentation-mapbox-shortcode).
|
||||
|
||||
## 8 music
|
||||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - music Shortcode](../theme-documentation-music-shortcode).
|
||||
|
||||
## 9 bilibili
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - bilibili Shortcode](../theme-documentation-bilibili-shortcode).
|
||||
|
||||
## 10 typeit
|
||||
|
||||
The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - typeit Shortcode](../theme-documentation-typeit-shortcode).
|
||||
|
||||
## 11 script
|
||||
|
||||
{{< version 0.2.8 >}}
|
||||
|
||||
`script` is a shortcode to insert custom **:(fab fa-js fa-fw): Javascript** in your post.
|
||||
|
||||
{{< admonition >}}
|
||||
The script content can be guaranteed to be executed in order after all third-party libraries are loaded. So you are free to use third-party libraries.
|
||||
{{< /admonition >}}
|
||||
|
||||
Example `script` input:
|
||||
|
||||
```markdown
|
||||
{{</* script */>}}
|
||||
console.log('Hello LoveIt!');
|
||||
{{</* /script */>}}
|
||||
```
|
||||
|
||||
You can see the output in the console of the developer tool.
|
||||
|
||||
{{< script >}}
|
||||
console.log('Hello LoveIt!');
|
||||
{{< /script >}}
|
||||
|
||||
## 12 raw
|
||||
|
||||
{{< version 0.2.11 >}}
|
||||
|
||||
`raw` is a shortcode to insert raw **:(fab fa-html5 fa-fw): HTML** content in your post.
|
||||
This is useful when you want to include some Markdown content to **avoid being rendered or escaped** by Hugo.
|
||||
|
||||
Example `raw` input:
|
||||
|
||||
```markdown
|
||||
Inline Formula: {{</* raw */>}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{</* /raw */>}}
|
||||
|
||||
Block Formula:
|
||||
|
||||
{{</* raw */>}}
|
||||
\[ a=b+c \\ d+e=f \]
|
||||
{{</* /raw */>}}
|
||||
|
||||
Raw content using Markdown syntax: {{</* raw */>}}**Hello**{{</* /raw */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
Inline Formula: {{< raw >}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}
|
||||
|
||||
Block Formula:
|
||||
|
||||
{{< raw>}}
|
||||
\[ a=b+c \\ d+e=f \]
|
||||
{{< /raw >}}
|
||||
|
||||
{{< script >}}
|
||||
console.log('Hello LoveIt!');
|
||||
{{< /script >}}
|
||||
|
||||
This renders as {{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}.
|
||||
Raw content using Markdown syntax: {{< raw >}}**Hello**{{< /raw >}}
|
||||
|
||||
## 13 person
|
||||
|
||||
`person` is a shortcode to insert a link to a personal webpage marked up as [h-card](http://microformats.org/wiki/h-card).
|
||||
|
||||
The `person` shortcode has the following named parameters:
|
||||
|
||||
* **url** *[required]* (**first** positional parameter)
|
||||
|
||||
URL of the personal page.
|
||||
|
||||
* **name** *[required]* (**second** positional parameter)
|
||||
|
||||
Name of the person.
|
||||
|
||||
* **text** *[optional]* (**third** positional parameter)
|
||||
|
||||
Text to display as hover tooltip of the link.
|
||||
|
||||
* **picture** *[optional]* (**fourth** positional parameter)
|
||||
|
||||
A picture to use as person's avatar.
|
||||
|
||||
* **nick** *[optional]*
|
||||
|
||||
Nickame of the person.
|
||||
|
||||
Example `person` input:
|
||||
|
||||
```markdown
|
||||
{{</* person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" */>}}
|
||||
```
|
||||
|
||||
This renders as {{< person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" >}}.
|
||||
|
||||
Without an explicitly given picture, a generic icon is used. This input:
|
||||
|
||||
```markdown
|
||||
{{</* person "https://dillonzq.com/" Dillon "author of the LoveIt theme" */>}}
|
||||
```
|
||||
|
||||
This renders as {{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}.
|
||||
|
|
@ -0,0 +1,419 @@
|
|||
---
|
||||
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" >}}.
|
||||
Loading…
Add table
Add a link
Reference in a new issue