feat(shortcode): add mapbox shortcode (#190)
* feat(shortcode): add mapbox shortcode * docs: split shortcodes into built-in shortcodes and extended shortcodes * docs(shortcodes): add docs for mapbox shortcode * docs(shortcodes): fix an error in shortcodes docs
This commit is contained in:
Dillon
GitHub
@@ -58,11 +58,13 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
|
||||
* :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* :(fab fa-font-awesome): Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
|
||||
* :(far fa-sticky-note): Extended markdown syntax for **ruby annotation**
|
||||
* :(fas fa-percentage): Extended markdown syntax for **fraction**
|
||||
* :(fas fa-square-root-alt): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
|
||||
* :(fas fa-project-diagram): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
|
||||
* :(fas fa-chart-pie): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
|
||||
* :(fas fa-map-marked-alt): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* :(fas fa-music): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* :(fas fa-tv): **Bilibili player** shortcode
|
||||
* :(fas fa-video): **Bilibili player** shortcode
|
||||
* :(far fa-bell): Kinds of **admonitions** shortcode
|
||||
* :(fas fa-align-left): **Custom style** shortcode
|
||||
* :(fas fa-i-cursor): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
|
||||
@@ -87,6 +89,7 @@ Thanks to the authors of following resources included in the theme:
|
||||
* [$ \KaTeX $](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
|
||||
@@ -63,11 +63,13 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
|
||||
* :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* :(fab fa-font-awesome): Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
|
||||
* :(far fa-sticky-note): Extended markdown syntax for **ruby annotation**
|
||||
* :(fas fa-percentage): Extended markdown syntax for **fraction**
|
||||
* :(fas fa-square-root-alt): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
|
||||
* :(fas fa-project-diagram): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
|
||||
* :(fas fa-chart-pie): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
|
||||
* :(fas fa-map-marked-alt): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* :(fas fa-music): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* :(fas fa-tv): **Bilibili player** shortcode
|
||||
* :(fas fa-video): **Bilibili player** shortcode
|
||||
* :(far fa-bell): Kinds of **admonitions** shortcode
|
||||
* :(fas fa-align-left): **Custom style** shortcode
|
||||
* :(fas fa-i-cursor): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
|
||||
@@ -92,6 +94,7 @@ Thanks to the authors of following resources included in the theme:
|
||||
* [$ \KaTeX $](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
|
||||
@@ -17,7 +17,7 @@ lightgallery: true
|
||||
|
||||
它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。
|
||||
|
||||
|
||||
|
||||
|
||||
### 特性
|
||||
|
||||
@@ -33,7 +33,7 @@ lightgallery: true
|
||||
#### 外观和布局
|
||||
|
||||
* [:(fas fa-desktop):]/[:(fas fa-mobile):] **响应式**布局
|
||||
* [:(fas fa-sun):]/[:(fas fa-moon):] **[白天]/[夜晚]** 主题模式
|
||||
* [:(fas fa-sun):]/[:(fas fa-moon):] **[浅色]/[深色]** 主题模式
|
||||
* :(fas fa-layer-group): 全局一致的**设计语言**
|
||||
* :(fas fa-ellipsis-h): 支持**分页**
|
||||
* :(far fa-list-alt): 易用和自动展开的**文章目录**
|
||||
@@ -58,11 +58,13 @@ lightgallery: true
|
||||
* :(far fa-images): 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
|
||||
* :(fab fa-font-awesome): 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
|
||||
* :(far fa-sticky-note): 支持**上标注释**的扩展 Markdown 语法
|
||||
* :(fas fa-percentage): 支持**分数**的扩展 Markdown 语法
|
||||
* :(fas fa-square-root-alt): 支持基于 [$ \KaTeX $](https://katex.org/) 的**数学公式**
|
||||
* :(fas fa-project-diagram): 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
|
||||
* :(fas fa-chart-pie): 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
|
||||
* :(fas fa-map-marked-alt): 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
|
||||
* :(fas fa-music): 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
|
||||
* :(fas fa-tv): 支持 **Bilibili 视频** shortcode
|
||||
* :(fas fa-video): 支持 **Bilibili 视频** shortcode
|
||||
* :(far fa-bell): 支持多种**注释**的 shortcode
|
||||
* :(fas fa-align-left): 支持**自定义样式**的 shortcode
|
||||
* :(fas fa-i-cursor): 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
|
||||
@@ -87,6 +89,7 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
|
||||
* [$ \KaTeX $](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -769,5 +777,5 @@ With a reference later in the document defining the URL location:
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-shortcodes/#image), which provides more features.
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes/#image), which provides more features.
|
||||
{{< /admonition >}}
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -774,5 +782,5 @@ With a reference later in the document defining the URL location:
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-shortcodes/#image), which provides more features.
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes/#image), which provides more features.
|
||||
{{< /admonition >}}
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -776,5 +784,5 @@ Content for chapter one.
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**LoveIt** 主题提供了一个包含更多功能的 [图片的 shortcode](../theme-documentation-shortcodes/#image).
|
||||
**LoveIt** 主题提供了一个包含更多功能的 [图片的 shortcode](../theme-documentation-extended-shortcodes/#image).
|
||||
{{< /admonition >}}
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -67,14 +75,14 @@ You can download the [latest release :(far fa-file-archive): .zip file](https://
|
||||
Alternatively, clone this repository to the `themes` directory:
|
||||
|
||||
```bash
|
||||
git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
Or, create an empty git repository and make this repository a submodule of your site directory:
|
||||
|
||||
```bash
|
||||
git init
|
||||
git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
### 2.3 Basic Configuration {#basic-configuration}
|
||||
@@ -320,6 +328,22 @@ Note that some of these parameters are explained in details in other sections of
|
||||
copyTex = true
|
||||
# KaTeX extension mhchem
|
||||
mhchem = true
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
|
||||
[params.mapbox]
|
||||
# access token of Mapbox GL JS
|
||||
accessToken = ""
|
||||
# style for the light theme
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
# style for the dark theme
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
|
||||
navigation = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
|
||||
geolocate = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
|
||||
scale = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
|
||||
fullscreen = true
|
||||
# Social Share Links in post page
|
||||
[params.share]
|
||||
enable = true
|
||||
@@ -459,6 +483,9 @@ Note that some of these parameters are explained in details in other sections of
|
||||
# {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
|
||||
echartsJS = ''
|
||||
echartsMacaronsJS = ''
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
|
||||
mapboxGLCSS = ''
|
||||
mapboxGLJS = ''
|
||||
# {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
|
||||
gitalkCSS = ''
|
||||
gitalkJS = ''
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -72,14 +80,14 @@ You can download the [latest release :(far fa-file-archive): .zip file](https://
|
||||
Alternatively, clone this repository to the `themes` directory:
|
||||
|
||||
```bash
|
||||
git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
Or, create an empty git repository and make this repository a submodule of your site directory:
|
||||
|
||||
```bash
|
||||
git init
|
||||
git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
### 2.3 Basic Configuration {#basic-configuration}
|
||||
@@ -325,6 +333,22 @@ Note that some of these parameters are explained in details in other sections of
|
||||
copyTex = true
|
||||
# KaTeX extension mhchem
|
||||
mhchem = true
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
|
||||
[params.mapbox]
|
||||
# access token of Mapbox GL JS
|
||||
accessToken = ""
|
||||
# style for the light theme
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
# style for the dark theme
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
|
||||
navigation = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
|
||||
geolocate = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
|
||||
scale = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
|
||||
fullscreen = true
|
||||
# Social Share Links in post page
|
||||
[params.share]
|
||||
enable = true
|
||||
@@ -464,6 +488,9 @@ Note that some of these parameters are explained in details in other sections of
|
||||
# {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
|
||||
echartsJS = ''
|
||||
echartsMacaronsJS = ''
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
|
||||
mapboxGLCSS = ''
|
||||
mapboxGLJS = ''
|
||||
# {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
|
||||
gitalkCSS = ''
|
||||
gitalkJS = ''
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -67,14 +75,14 @@ cd my_website
|
||||
另外, 也可以直接把这个主题克隆到 `themes` 目录:
|
||||
|
||||
```bash
|
||||
git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
或者, 初始化你的项目目录为 git 仓库, 并且把主题仓库作为你的网站目录的子模块:
|
||||
|
||||
```bash
|
||||
git init
|
||||
git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
### 2.3 基础配置 {#basic-configuration}
|
||||
@@ -322,6 +330,22 @@ hugo
|
||||
copyTex = true
|
||||
# KaTeX 插件 mhchem
|
||||
mhchem = true
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} 配置
|
||||
[params.mapbox]
|
||||
# Mapbox GL JS 的 access token
|
||||
accessToken = ""
|
||||
# 浅色主题的地图样式
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
# 深色主题的地图样式
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
|
||||
navigation = true
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
|
||||
geolocate = true
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
|
||||
scale = true
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
|
||||
fullscreen = true
|
||||
# 文章页面的分享信息设置
|
||||
[params.share]
|
||||
enable = true
|
||||
@@ -461,6 +485,9 @@ hugo
|
||||
# {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
|
||||
echartsJS = ''
|
||||
echartsMacaronsJS = ''
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
|
||||
mapboxGLCSS = ''
|
||||
mapboxGLJS = ''
|
||||
# {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
|
||||
gitalkCSS = ''
|
||||
gitalkJS = ''
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
---
|
||||
weight: 3
|
||||
title: "Theme Documentation - Built-in Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:41+08:00
|
||||
lastmod: 2020-03-04T16:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean."
|
||||
license: ""
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
|
||||
featuredImagePreview: ""
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
enable: true
|
||||
comment: true
|
||||
---
|
||||
|
||||
**Hugo** provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## `figure` {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## `gist`
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## `highlight`
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## `instagram`
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## `param`
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## `ref` and `relref` {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
## `tweet`
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## `vimeo`
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## `youtube`
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
@@ -0,0 +1,205 @@
|
||||
---
|
||||
weight: 3
|
||||
title: "Thème Documentation - Built-in Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre."
|
||||
license: ""
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
|
||||
featuredImagePreview: ""
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
enable: true
|
||||
comment: true
|
||||
---
|
||||
|
||||
**Hugo** fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< admonition warning >}}
|
||||
Sorry, this article has not been completely translated into **French**.
|
||||
Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
|
||||
{{< /admonition >}}
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## `figure` {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## `gist`
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## `highlight`
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## `instagram`
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## `param`
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## `ref` and `relref` {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
## `tweet`
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## `vimeo`
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## `youtube`
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
@@ -0,0 +1,201 @@
|
||||
---
|
||||
weight: 3
|
||||
title: "主题文档 - 内置 Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁."
|
||||
license: ""
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
|
||||
featuredImagePreview: ""
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
enable: true
|
||||
comment: true
|
||||
---
|
||||
|
||||
**Hugo** 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.
|
||||
|
||||
但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.
|
||||
|
||||
为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.
|
||||
|
||||
Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
|
||||
提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
|
||||
|
||||
## `figure` {#figure}
|
||||
|
||||
[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
一个 `figure` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## `gist`
|
||||
|
||||
[`gist` 的文档](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
一个 `gist` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## `highlight`
|
||||
|
||||
[`highlight` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
一个 `highlight` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## `instagram`
|
||||
|
||||
[`instagram` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
一个 `instagram` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## `param`
|
||||
|
||||
[`param` 的文档](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
一个 `param` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## `ref` 和 `relref` {#ref-and-relref}
|
||||
|
||||
[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
## `tweet`
|
||||
|
||||
[`tweet` 的文档](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
一个 `tweet` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## `vimeo`
|
||||
|
||||
[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
一个 `vimeo` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## `youtube`
|
||||
|
||||
[`youtube` 的文档](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
一个 `youtube` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -39,7 +47,7 @@ A few suggestions to help you get a good looking site quickly:
|
||||
* Keep static pages in the `content` directory, for example: `content/about.md`
|
||||
* Keep media like images in the `static` directory, for example: `static/images/screenshot.png`
|
||||
|
||||
## 2 Front Matter
|
||||
## 2 Front Matter {#front-matter}
|
||||
|
||||
**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
|
||||
|
||||
@@ -67,6 +75,14 @@ featuredImagePreview: ""
|
||||
toc: false
|
||||
autoCollapseToc: true
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -92,6 +108,7 @@ comment: true
|
||||
* **toc**: if `true`, the content will show the table of the contents.
|
||||
* **autoCollapseToc**: if `true`, the table of the contents will be automatically collapsed.
|
||||
* **math**: if `true`, the mathematical formula in the content will be automatically rendered.
|
||||
* **mapbox**: {{< version 0.2.0 >}} the same as `params.mapbox` in the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
* **lightgallery**: if `true`, images in the content will be shown as the gallery.
|
||||
* **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file.
|
||||
* **share**: the same as `params.share` in the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -44,7 +52,7 @@ A few suggestions to help you get a good looking site quickly:
|
||||
* Keep static pages in the `content` directory, for example: `content/about.md`
|
||||
* Keep media like images in the `static` directory, for example: `static/images/screenshot.png`
|
||||
|
||||
## 2 Front Matter
|
||||
## 2 Front Matter {#front-matter}
|
||||
|
||||
**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
|
||||
|
||||
@@ -72,6 +80,14 @@ featuredImagePreview: ""
|
||||
toc: false
|
||||
autoCollapseToc: true
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -97,6 +113,7 @@ comment: true
|
||||
* **toc**: if `true`, the content will show the table of the contents.
|
||||
* **autoCollapseToc**: if `true`, the table of the contents will be automatically collapsed.
|
||||
* **math**: if `true`, the mathematical formula in the content will be automatically rendered.
|
||||
* **mapbox**: {{< version 0.2.0 >}} the same as `params.mapbox` in the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
* **lightgallery**: if `true`, images in the content will be shown as the gallery.
|
||||
* **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file.
|
||||
* **share**: the same as `params.share` in the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
@@ -20,6 +20,14 @@ featuredImagePreview: ""
|
||||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -39,7 +47,7 @@ comment: true
|
||||
* 保持简单的静态页面存放在 `content` 目录, 例如: `content/about.md`
|
||||
* 保持图片之类的媒体资源存放在 `static` 目录, 例如: `static/images/screenshot.png`
|
||||
|
||||
## 2 前置参数
|
||||
## 2 前置参数 {#front-matter}
|
||||
|
||||
**Hugo** 允许你在文章内容前面添加 `yaml`, `toml` 或者 `json` 格式的前置参数.
|
||||
|
||||
@@ -67,6 +75,14 @@ featuredImagePreview: ""
|
||||
toc: false
|
||||
autoCollapseToc: true
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -92,6 +108,7 @@ comment: true
|
||||
* **toc**: 如果设为 `true`, 这篇文章会显示右侧目录.
|
||||
* **autoCollapseToc**: 如果设为 `true`, 文章目录会自动折叠.
|
||||
* **math**: 如果设为 `true`, 将自动渲染文章中的数学公式.
|
||||
* **mapbox**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.mapbox` 对象相同.
|
||||
* **lightgallery**: 如果设为 `true`, 文章中的图片将可以按照画廊形式呈现.
|
||||
* **linkToMarkdown**: 如果设为 `true`, 内容的页脚将显示指向原始 Markdown 文件的链接.
|
||||
* **share**: 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.share` 对象相同.
|
||||
@@ -248,14 +265,14 @@ $$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
**LoveIt** 主题支持一种 **分数** Markdown 扩展语法:
|
||||
|
||||
```markdown
|
||||
[白天]{?/}[夜晚]
|
||||
[浅色]{?/}[深色]
|
||||
|
||||
[99]{?/}[100]
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
[白天]/[夜晚]
|
||||
[浅色]/[深色]
|
||||
|
||||
[90]/[100]
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
weight: 3
|
||||
title: "Theme Documentation - Shortcodes"
|
||||
weight: 4
|
||||
title: "Theme Documentation - Extended Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:41+08:00
|
||||
lastmod: 2020-03-04T16:29:41+08:00
|
||||
date: 2020-03-03T16:29:41+08:00
|
||||
lastmod: 2020-03-03T16:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
@@ -14,12 +14,20 @@ tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: ""
|
||||
featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -31,173 +39,7 @@ comment: true
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
## Hugo’s Built-in Shortcodes
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
### `figure` {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### `gist`
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
### `highlight`
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
### `instagram`
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
### `param`
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
### `ref` and `relref` {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
### `tweet`
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
### `vimeo`
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
### `youtube`
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
||||
## LoveIt Shortcodes
|
||||
|
||||
**LoveIt** provides multiple shortcodes on top of existing ones.
|
||||
|
||||
### `style`
|
||||
## `style`
|
||||
|
||||
`style` is a shortcode to insert custom style in your post.
|
||||
|
||||
@@ -210,18 +52,18 @@ And the **second** one is the HTML tag around the content you want to change sty
|
||||
Example `style` input:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align: right" */>}}
|
||||
{{</* style "text-align: right;" */>}}
|
||||
This is a right-aligned paragraph.
|
||||
{{</* /style */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< style "text-align: right" >}}
|
||||
{{< style "text-align: right;" >}}
|
||||
This is a right-aligned paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
### `link`
|
||||
## `link`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
@@ -235,7 +77,7 @@ The `link` shortcode has the following named parameters:
|
||||
|
||||
* **content** *[optional]* (**second** positional parameter)
|
||||
|
||||
Content of the link, default is the value of **href** parameter.
|
||||
Content of the link, default value is the value of **href** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
@@ -285,11 +127,11 @@ The rendered output looks like this (hover over the link, there should be a tool
|
||||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
### `image`
|
||||
## `image`
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
`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.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
|
||||
The `image` shortcode has the following named parameters:
|
||||
|
||||
@@ -299,7 +141,7 @@ The `image` shortcode has the following named parameters:
|
||||
|
||||
* **alt** *[optional]* (**second** positional parameter)
|
||||
|
||||
Alternate text for the image if the image cannot be displayed, default is the value of **src** 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.*
|
||||
|
||||
@@ -319,11 +161,11 @@ The `image` shortcode has the following named parameters:
|
||||
|
||||
* **src_s** *[optional]*
|
||||
|
||||
URL of the image thumbnail, used for lightgallery, default is the value of **src** parameter.
|
||||
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 is the value of **src** parameter.
|
||||
URL of the HD image, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
@@ -335,7 +177,7 @@ The `image` shortcode has the following named parameters:
|
||||
|
||||
* **linked** *[optional]*
|
||||
|
||||
Whether the image needs to be hyperlinked, default is `true`.
|
||||
Whether the image needs to be hyperlinked, default value is `true`.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
@@ -348,14 +190,14 @@ The `image` shortcode has the following named parameters:
|
||||
Example `image` input:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
### `admonition`
|
||||
## `admonition`
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
@@ -413,15 +255,15 @@ The `admonition` shortcode has the following named parameters:
|
||||
|
||||
* **type** *[optional]* (**first** positional parameter)
|
||||
|
||||
Type of the `admonition` banner, default is `note`.
|
||||
Type of the `admonition` banner, default value is `note`.
|
||||
|
||||
* **title** *[optional]* (**second** positional parameter)
|
||||
|
||||
Title of the `admonition` banner, default is the value of **type** parameter.
|
||||
Title of the `admonition` banner, default value is the value of **type** parameter.
|
||||
|
||||
* **details** *[optional]* (**third** positional parameter)
|
||||
|
||||
Whether the content will be expandable/collapsible, default is `false`.
|
||||
Whether the content will be expandable/collapsible, default value is `false`.
|
||||
|
||||
Example `admonition` input:
|
||||
|
||||
@@ -441,13 +283,13 @@ The rendered output looks like this:
|
||||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
### `mermaid`
|
||||
## `mermaid`
|
||||
|
||||
[mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
|
||||
|
||||
Just insert your mermaid code in the `mermaid` shortcode and that’s it.
|
||||
|
||||
#### Flowchart {#flowchart}
|
||||
### Flowchart {#flowchart}
|
||||
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
@@ -471,7 +313,7 @@ graph LR;
|
||||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Sequence Diagram {#sequence-diagram}
|
||||
### Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
@@ -507,7 +349,7 @@ sequenceDiagram
|
||||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### GANTT {#gantt}
|
||||
### GANTT {#gantt}
|
||||
|
||||
Example **GANTT** `mermaid` input:
|
||||
|
||||
@@ -551,7 +393,7 @@ gantt
|
||||
Add to mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Class Diagram {#class-diagram}
|
||||
### Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
@@ -593,7 +435,7 @@ classDiagram
|
||||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### State Diagram {#state-diagram}
|
||||
### State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
@@ -621,7 +463,7 @@ stateDiagram
|
||||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Git Graph {#git-graph}
|
||||
### Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
@@ -667,7 +509,7 @@ end
|
||||
merge newbranch
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Pie {#pie}
|
||||
### Pie {#pie}
|
||||
|
||||
Example **pie** `mermaid` input:
|
||||
|
||||
@@ -689,7 +531,7 @@ pie
|
||||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
### `echarts`
|
||||
## `echarts`
|
||||
|
||||
[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
|
||||
|
||||
@@ -1067,13 +909,87 @@ The rendered output looks like this:
|
||||
}
|
||||
{{< /echarts >}}
|
||||
|
||||
### `music`
|
||||
## `mapbox`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
|
||||
|
||||
The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
|
||||
|
||||
* **lng** *[required]* (**first** positional parameter)
|
||||
|
||||
Longitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **lat** *[required]* (**second** positional parameter)
|
||||
|
||||
Latitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **zoom** *[optional]* (**third** positional parameter)
|
||||
|
||||
The initial zoom level of the map, default value is `10`.
|
||||
|
||||
* **marked** *[optional]* (**fourth** positional parameter)
|
||||
|
||||
Whether to add a marker at the inital centerpoint of the map, default value is `true`.
|
||||
|
||||
* **light-style** *[optional]* (**fifth** positional parameter)
|
||||
|
||||
Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **dark-style** *[optional]* (**sixth** positional parameter)
|
||||
|
||||
Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **navigation** *[optional]*
|
||||
|
||||
Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **geolocate** *[optional]*
|
||||
|
||||
Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **scale** *[optional]*
|
||||
|
||||
Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **fullscreen** *[optional]*
|
||||
|
||||
Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **width** *[optional]*
|
||||
|
||||
Width of the map, default value is `100%`.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
Height of the map, default value is `20rem`.
|
||||
|
||||
Example `mapbox` input:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox 121.485 31.233 12 */>}}
|
||||
Or
|
||||
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
|
||||
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
Or
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
|
||||
## `music`
|
||||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
|
||||
|
||||
There are three ways to use it the `music` shortcode.
|
||||
|
||||
#### Custom Music URL {#custom-music-url}
|
||||
### Custom Music URL {#custom-music-url}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
@@ -1103,7 +1019,7 @@ The rendered output looks like this:
|
||||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
|
||||
#### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
@@ -1124,7 +1040,7 @@ The rendered output looks like this:
|
||||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
#### Custom Server, Type and ID {#custom-server}
|
||||
### Custom Server, Type and ID {#custom-server}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
@@ -1156,33 +1072,33 @@ The rendered output looks like this:
|
||||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
#### Other Parameters
|
||||
### Other Parameters {#other-parameters}
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
* **theme** *[optional]*
|
||||
|
||||
Main color of the music player, default is `#a9a9b3`.
|
||||
{{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
|
||||
|
||||
* **fixed** *[optional]*
|
||||
|
||||
Whether to enable fixed mode, default is `false`.
|
||||
Whether to enable fixed mode, default value is `false`.
|
||||
|
||||
* **mini** *[optional]*
|
||||
|
||||
Whether to enable mini mode, default is `false`.
|
||||
Whether to enable mini mode, default value is `false`.
|
||||
|
||||
* **autoplay** *[optional]*
|
||||
|
||||
Whether to autoplay music, default is `false`.
|
||||
Whether to autoplay music, default value is `false`.
|
||||
|
||||
* **volume** *[optional]*
|
||||
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default is `0.7`.
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`.
|
||||
|
||||
* **mutex** *[optional]*
|
||||
|
||||
Whether to pause other players when this player starts playing, default is `true`.
|
||||
Whether to pause other players when this player starts playing, default value is `true`.
|
||||
|
||||
The `music` shortcode has the following named parameters only applying to the type of music list:
|
||||
|
||||
@@ -1190,23 +1106,23 @@ The `music` shortcode has the following named parameters only applying to the ty
|
||||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
Loop mode of the music list, default is `none`.
|
||||
Loop mode of the music list, default value is `none`.
|
||||
|
||||
* **order** *[optional]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
Play order of the music list, default is `list`.
|
||||
Play order of the music list, default value is `list`.
|
||||
|
||||
* **list-folded** *[optional]*
|
||||
|
||||
Whether the music list should be folded at first, default is `false`.
|
||||
Whether the music list should be folded at first, default value is `false`.
|
||||
|
||||
* **list-max-height** *[optional]*
|
||||
|
||||
Max height of the music list, default is `340px`.
|
||||
Max height of the music list, default value is `340px`.
|
||||
|
||||
### `bilibili`
|
||||
## `bilibili`
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
||||
@@ -1247,13 +1163,13 @@ The rendered output looks like this:
|
||||
|
||||
{{< bilibili av=36570401 p=3 >}}
|
||||
|
||||
### `typeit`
|
||||
## `typeit`
|
||||
|
||||
The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/).
|
||||
|
||||
Just insert your content in the `typeit` shortcode and that’s it.
|
||||
|
||||
#### Simple Content {#simple-content}
|
||||
### Simple Content {#simple-content}
|
||||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
@@ -1287,7 +1203,7 @@ The rendered output looks like this:
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
#### Code Content {#code-content}
|
||||
### Code Content {#code-content}
|
||||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
@@ -1313,7 +1229,7 @@ public class HelloWorld {
|
||||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
#### Group Content {#group-content}
|
||||
### Group Content {#group-content}
|
||||
|
||||
All typing animations start at the same time by default.
|
||||
But sometimes you may want to start a set of `typeit` contents in order.
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
weight: 3
|
||||
title: "Thème Documentation - Shortcodes"
|
||||
weight: 4
|
||||
title: "Thème Documentation - Extended Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
date: 2020-03-03T16:29:59+08:00
|
||||
lastmod: 2020-03-03T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
@@ -14,12 +14,20 @@ tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: ""
|
||||
featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -36,173 +44,7 @@ Sorry, this article has not been completely translated into **French**.
|
||||
Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
|
||||
{{< /admonition >}}
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
## Hugo’s Built-in Shortcodes
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
### `figure` {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### `gist`
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
### `highlight`
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
### `instagram`
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
### `param`
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
### `ref` and `relref` {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
### `tweet`
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
### `vimeo`
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
### `youtube`
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
||||
## LoveIt Shortcodes
|
||||
|
||||
**LoveIt** provides multiple shortcodes on top of existing ones.
|
||||
|
||||
### `style`
|
||||
## `style`
|
||||
|
||||
`style` is a shortcode to insert custom style in your post.
|
||||
|
||||
@@ -215,18 +57,18 @@ And the **second** one is the HTML tag around the content you want to change sty
|
||||
Example `style` input:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align: right" */>}}
|
||||
{{</* style "text-align: right;" */>}}
|
||||
This is a right-aligned paragraph.
|
||||
{{</* /style */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< style "text-align: right" >}}
|
||||
{{< style "text-align: right;" >}}
|
||||
This is a right-aligned paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
### `link`
|
||||
## `link`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
@@ -240,7 +82,7 @@ The `link` shortcode has the following named parameters:
|
||||
|
||||
* **content** *[optional]* (**second** positional parameter)
|
||||
|
||||
Content of the link, default is the value of **href** parameter.
|
||||
Content of the link, default value is the value of **href** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
@@ -290,11 +132,11 @@ The rendered output looks like this (hover over the link, there should be a tool
|
||||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
### `image`
|
||||
## `image`
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
`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.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
|
||||
The `image` shortcode has the following named parameters:
|
||||
|
||||
@@ -304,7 +146,7 @@ The `image` shortcode has the following named parameters:
|
||||
|
||||
* **alt** *[optional]* (**second** positional parameter)
|
||||
|
||||
Alternate text for the image if the image cannot be displayed, default is the value of **src** 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.*
|
||||
|
||||
@@ -324,11 +166,11 @@ The `image` shortcode has the following named parameters:
|
||||
|
||||
* **src_s** *[optional]*
|
||||
|
||||
URL of the image thumbnail, used for lightgallery, default is the value of **src** parameter.
|
||||
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 is the value of **src** parameter.
|
||||
URL of the HD image, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
@@ -340,7 +182,7 @@ The `image` shortcode has the following named parameters:
|
||||
|
||||
* **linked** *[optional]*
|
||||
|
||||
Whether the image needs to be hyperlinked, default is `true`.
|
||||
Whether the image needs to be hyperlinked, default value is `true`.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
@@ -353,14 +195,14 @@ The `image` shortcode has the following named parameters:
|
||||
Example `image` input:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
### `admonition`
|
||||
## `admonition`
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
@@ -418,15 +260,15 @@ The `admonition` shortcode has the following named parameters:
|
||||
|
||||
* **type** *[optional]* (**first** positional parameter)
|
||||
|
||||
Type of the `admonition` banner, default is `note`.
|
||||
Type of the `admonition` banner, default value is `note`.
|
||||
|
||||
* **title** *[optional]* (**second** positional parameter)
|
||||
|
||||
Title of the `admonition` banner, default is the value of **type** parameter.
|
||||
Title of the `admonition` banner, default value is the value of **type** parameter.
|
||||
|
||||
* **details** *[optional]* (**third** positional parameter)
|
||||
|
||||
Whether the content will be expandable/collapsible, default is `false`.
|
||||
Whether the content will be expandable/collapsible, default value is `false`.
|
||||
|
||||
Example `admonition` input:
|
||||
|
||||
@@ -446,13 +288,13 @@ The rendered output looks like this:
|
||||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
### `mermaid`
|
||||
## `mermaid`
|
||||
|
||||
[mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
|
||||
|
||||
Just insert your mermaid code in the `mermaid` shortcode and that’s it.
|
||||
|
||||
#### Flowchart {#flowchart}
|
||||
### Flowchart {#flowchart}
|
||||
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
@@ -476,7 +318,7 @@ graph LR;
|
||||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Sequence Diagram {#sequence-diagram}
|
||||
### Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
@@ -512,7 +354,7 @@ sequenceDiagram
|
||||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### GANTT {#gantt}
|
||||
### GANTT {#gantt}
|
||||
|
||||
Example **GANTT** `mermaid` input:
|
||||
|
||||
@@ -556,7 +398,7 @@ gantt
|
||||
Add to mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Class Diagram {#class-diagram}
|
||||
### Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
@@ -598,7 +440,7 @@ classDiagram
|
||||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### State Diagram {#state-diagram}
|
||||
### State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
@@ -626,7 +468,7 @@ stateDiagram
|
||||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Git Graph {#git-graph}
|
||||
### Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
@@ -672,7 +514,7 @@ end
|
||||
merge newbranch
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Pie {#pie}
|
||||
### Pie {#pie}
|
||||
|
||||
Example **pie** `mermaid` input:
|
||||
|
||||
@@ -694,7 +536,7 @@ pie
|
||||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
### `echarts`
|
||||
## `echarts`
|
||||
|
||||
[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
|
||||
|
||||
@@ -1072,13 +914,87 @@ The rendered output looks like this:
|
||||
}
|
||||
{{< /echarts >}}
|
||||
|
||||
### `music`
|
||||
## `mapbox`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
|
||||
|
||||
The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
|
||||
|
||||
* **lng** *[required]* (**first** positional parameter)
|
||||
|
||||
Longitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **lat** *[required]* (**second** positional parameter)
|
||||
|
||||
Latitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **zoom** *[optional]* (**third** positional parameter)
|
||||
|
||||
The initial zoom level of the map, default value is `10`.
|
||||
|
||||
* **marked** *[optional]* (**fourth** positional parameter)
|
||||
|
||||
Whether to add a marker at the inital centerpoint of the map, default value is `true`.
|
||||
|
||||
* **light-style** *[optional]* (**fifth** positional parameter)
|
||||
|
||||
Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **dark-style** *[optional]* (**sixth** positional parameter)
|
||||
|
||||
Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **navigation** *[optional]*
|
||||
|
||||
Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **geolocate** *[optional]*
|
||||
|
||||
Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **scale** *[optional]*
|
||||
|
||||
Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **fullscreen** *[optional]*
|
||||
|
||||
Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **width** *[optional]*
|
||||
|
||||
Width of the map, default value is `100%`.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
Height of the map, default value is `20rem`.
|
||||
|
||||
Example `mapbox` input:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox 121.485 31.233 12 */>}}
|
||||
Or
|
||||
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
|
||||
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
Or
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
|
||||
## `music`
|
||||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
|
||||
|
||||
There are three ways to use it the `music` shortcode.
|
||||
|
||||
#### Custom Music URL {#custom-music-url}
|
||||
### Custom Music URL {#custom-music-url}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
@@ -1108,7 +1024,7 @@ The rendered output looks like this:
|
||||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
|
||||
#### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
@@ -1129,7 +1045,7 @@ The rendered output looks like this:
|
||||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
#### Custom Server, Type and ID {#custom-server}
|
||||
### Custom Server, Type and ID {#custom-server}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
@@ -1161,33 +1077,33 @@ The rendered output looks like this:
|
||||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
#### Other Parameters
|
||||
### Other Parameters {#other-parameters}
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
* **theme** *[optional]*
|
||||
|
||||
Main color of the music player, default is `#a9a9b3`.
|
||||
{{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
|
||||
|
||||
* **fixed** *[optional]*
|
||||
|
||||
Whether to enable fixed mode, default is `false`.
|
||||
Whether to enable fixed mode, default value is `false`.
|
||||
|
||||
* **mini** *[optional]*
|
||||
|
||||
Whether to enable mini mode, default is `false`.
|
||||
Whether to enable mini mode, default value is `false`.
|
||||
|
||||
* **autoplay** *[optional]*
|
||||
|
||||
Whether to autoplay music, default is `false`.
|
||||
Whether to autoplay music, default value is `false`.
|
||||
|
||||
* **volume** *[optional]*
|
||||
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default is `0.7`.
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`.
|
||||
|
||||
* **mutex** *[optional]*
|
||||
|
||||
Whether to pause other players when this player starts playing, default is `true`.
|
||||
Whether to pause other players when this player starts playing, default value is `true`.
|
||||
|
||||
The `music` shortcode has the following named parameters only applying to the type of music list:
|
||||
|
||||
@@ -1195,23 +1111,23 @@ The `music` shortcode has the following named parameters only applying to the ty
|
||||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
Loop mode of the music list, default is `none`.
|
||||
Loop mode of the music list, default value is `none`.
|
||||
|
||||
* **order** *[optional]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
Play order of the music list, default is `list`.
|
||||
Play order of the music list, default value is `list`.
|
||||
|
||||
* **list-folded** *[optional]*
|
||||
|
||||
Whether the music list should be folded at first, default is `false`.
|
||||
Whether the music list should be folded at first, default value is `false`.
|
||||
|
||||
* **list-max-height** *[optional]*
|
||||
|
||||
Max height of the music list, default is `340px`.
|
||||
Max height of the music list, default value is `340px`.
|
||||
|
||||
### `bilibili`
|
||||
## `bilibili`
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
||||
@@ -1252,13 +1168,13 @@ The rendered output looks like this:
|
||||
|
||||
{{< bilibili av=36570401 p=3 >}}
|
||||
|
||||
### `typeit`
|
||||
## `typeit`
|
||||
|
||||
The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/).
|
||||
|
||||
Just insert your content in the `typeit` shortcode and that’s it.
|
||||
|
||||
#### Simple Content {#simple-content}
|
||||
### Simple Content {#simple-content}
|
||||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
@@ -1292,7 +1208,7 @@ The rendered output looks like this:
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
#### Code Content {#code-content}
|
||||
### Code Content {#code-content}
|
||||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
@@ -1318,7 +1234,7 @@ public class HelloWorld {
|
||||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
#### Group Content {#group-content}
|
||||
### Group Content {#group-content}
|
||||
|
||||
All typing animations start at the same time by default.
|
||||
But sometimes you may want to start a set of `typeit` contents in order.
|
||||
@@ -1,25 +1,33 @@
|
||||
---
|
||||
weight: 3
|
||||
title: "主题文档 - Shortcodes"
|
||||
weight: 4
|
||||
title: "主题文档 - 扩展 Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
date: 2020-03-03T16:29:59+08:00
|
||||
lastmod: 2020-03-03T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode."
|
||||
description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."
|
||||
license: ""
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: ""
|
||||
featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
@@ -27,178 +35,11 @@ share:
|
||||
comment: true
|
||||
---
|
||||
|
||||
**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode.
|
||||
**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.
|
||||
|
||||
但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.
|
||||
|
||||
为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.
|
||||
|
||||
## Hugo 内置 shortcodes {#hugo}
|
||||
|
||||
Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
|
||||
提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
|
||||
|
||||
### `figure` {#figure}
|
||||
|
||||
[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
一个 `figure` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### `gist`
|
||||
|
||||
[`gist` 的文档](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
一个 `gist` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
### `highlight`
|
||||
|
||||
[`highlight` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
一个 `highlight` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
### `instagram`
|
||||
|
||||
[`instagram` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
一个 `instagram` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
### `param`
|
||||
|
||||
[`param` 的文档](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
一个 `param` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
### `ref` 和 `relref` {#ref-and-relref}
|
||||
|
||||
[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
### `tweet`
|
||||
|
||||
[`tweet` 的文档](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
一个 `tweet` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
### `vimeo`
|
||||
|
||||
[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
一个 `vimeo` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
### `youtube`
|
||||
|
||||
[`youtube` 的文档](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
一个 `youtube` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
||||
## LoveIt shortcodes {#loveit}
|
||||
|
||||
**LoveIt** 在现有内置的 shortcodes 的基础上提供了多个 shortcodes.
|
||||
|
||||
### `style`
|
||||
## `style`
|
||||
|
||||
`style` shortcode 用来在你的文章中插入自定义样式.
|
||||
|
||||
@@ -211,18 +52,18 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
||||
一个 `style` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align: right" */>}}
|
||||
{{</* style "text-align: right;" */>}}
|
||||
This is a right-aligned paragraph.
|
||||
{{</* /style */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< style "text-align: right" >}}
|
||||
{{< style "text-align: right;" >}}
|
||||
This is a right-aligned paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
### `link`
|
||||
## `link`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
@@ -287,11 +128,11 @@ This is a right-aligned paragraph.
|
||||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
### `image`
|
||||
## `image`
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
`image` shortcode 是 [`figure` shortcode](#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
|
||||
`image` shortcode 是 [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
|
||||
|
||||
`image` shortcode 有以下命名参数:
|
||||
|
||||
@@ -350,14 +191,14 @@ This is a right-aligned paragraph.
|
||||
一个 `image` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
### `admonition`
|
||||
## `admonition`
|
||||
|
||||
`admonition` shortcode 支持 **12** 种 帮助你在页面中插入提示的横幅.
|
||||
|
||||
@@ -443,13 +284,13 @@ This is a right-aligned paragraph.
|
||||
一个 **技巧** 横幅
|
||||
{{< /admonition >}}
|
||||
|
||||
### `mermaid`
|
||||
## `mermaid`
|
||||
|
||||
[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法.
|
||||
|
||||
只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
|
||||
|
||||
#### 流程图 {#flowchart}
|
||||
### 流程图 {#flowchart}
|
||||
|
||||
一个 **流程图** `mermaid` 示例:
|
||||
|
||||
@@ -473,7 +314,7 @@ graph LR;
|
||||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 时序图 {#sequence-diagram}
|
||||
### 时序图 {#sequence-diagram}
|
||||
|
||||
一个 **时序图** `mermaid` 示例:
|
||||
|
||||
@@ -509,7 +350,7 @@ sequenceDiagram
|
||||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 甘特图 {#gantt}
|
||||
### 甘特图 {#gantt}
|
||||
|
||||
一个 **甘特图** `mermaid` 示例:
|
||||
|
||||
@@ -553,7 +394,7 @@ gantt
|
||||
Add to mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 类图 {#class-diagram}
|
||||
### 类图 {#class-diagram}
|
||||
|
||||
一个 **类图** `mermaid` 示例:
|
||||
|
||||
@@ -595,7 +436,7 @@ classDiagram
|
||||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 状态图 {#state-diagram}
|
||||
### 状态图 {#state-diagram}
|
||||
|
||||
一个 **状态图** `mermaid` 示例:
|
||||
|
||||
@@ -623,7 +464,7 @@ stateDiagram
|
||||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Git 图 {#git-graph}
|
||||
### Git 图 {#git-graph}
|
||||
|
||||
一个 **Git 图** `mermaid` 示例:
|
||||
|
||||
@@ -669,7 +510,7 @@ end
|
||||
merge newbranch
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 饼图 {#pie}
|
||||
### 饼图 {#pie}
|
||||
|
||||
一个 **饼图** `mermaid` 示例:
|
||||
|
||||
@@ -691,7 +532,7 @@ pie
|
||||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
### `echarts`
|
||||
## `echarts`
|
||||
|
||||
[ECharts](https://echarts.apache.org/) 是一个帮助你生成交互式数据可视化的库.
|
||||
|
||||
@@ -1069,36 +910,87 @@ data = [
|
||||
}
|
||||
{{< /echarts >}}
|
||||
|
||||
### `music`
|
||||
## `mapbox`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 是一个 JavaScript 库，它使用 WebGL, 以 [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) 和 [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/) 为来源, 将它们渲染成互动式地图.
|
||||
|
||||
`mapbox` shortcode 有以下命名参数来使用 Mapbox GL JS:
|
||||
|
||||
* **lng** *[必需]* (**第一个**位置参数)
|
||||
|
||||
地图初始中心点的经度, 以度为单位.
|
||||
|
||||
* **lat** *[必需]* (**第二个**位置参数)
|
||||
|
||||
地图初始中心点的纬度, 以度为单位.
|
||||
|
||||
* **zoom** *[可选]* (**第三个**位置参数)
|
||||
|
||||
地图的初始缩放级别, 默认值是 `10`.
|
||||
|
||||
* **marked** *[可选]* (**第四个**位置参数)
|
||||
|
||||
是否在地图的初始中心点添加图钉, 默认值是 `true`.
|
||||
|
||||
* **light-style** *[可选]* (**第五个**位置参数)
|
||||
|
||||
浅色主题的地图样式, 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **dark-style** *[可选]* (**第六个**位置参数)
|
||||
|
||||
深色主题的地图样式, 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **navigation** *[可选]*
|
||||
|
||||
是否添加 [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **geolocate** *[可选]*
|
||||
|
||||
是否添加 [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **scale** *[可选]*
|
||||
|
||||
是否添加 [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **fullscreen** *[可选]*
|
||||
|
||||
是否添加 [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **width** *[可选]*
|
||||
|
||||
地图的宽度, 默认值是 `100%`.
|
||||
|
||||
* **height** *[可选]*
|
||||
|
||||
地图的高度, 默认值是 `20rem`.
|
||||
|
||||
一个 `mapbox` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox 121.485 31.233 12 */>}}
|
||||
或者
|
||||
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
|
||||
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
或者
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
|
||||
## `music`
|
||||
|
||||
`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器.
|
||||
|
||||
有三种方式使用 `music` shortcode.
|
||||
|
||||
`music` shortcode 可以使用以下命名参数:
|
||||
|
||||
|参数 |默认值 |描述|
|
||||
|:---------------|:------------:|:----------|
|
||||
|url |**必须** |音乐的 URL|
|
||||
|name |可选 |音乐名称|
|
||||
|artist |可选 |音乐的创作者|
|
||||
|cover |封面 |音乐封面的 URL|
|
||||
|server |**必须** |音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`|
|
||||
|type |**必须** |`song`, `playlist`, `album`, `search`, `artist`|
|
||||
|id |**必须** |song id / playlist id / album id / 搜索关键字|
|
||||
|auto |可选 |音乐链接, 支持平台: `netease`, `tencent`, `xiami`|
|
||||
|fixed |`false` |启用固定模式|
|
||||
|mini |`false` |启用迷你模式|
|
||||
|autoplay |`false` |自动播放|
|
||||
|theme |`#a9a9b3` |主题色|
|
||||
|loop |`all` |循环模式, 值: 'all', 'one', 'none'|
|
||||
|order |`list` |播放顺序, 值: 'list', 'random'|
|
||||
|volume |`0.7` |默认音量, 请注意, 播放器会记住用户设置, 用户自己设置音量后默认音量将不起作用|
|
||||
|mutex |`true` |防止同时有多个播放器, 在此播放器开始播放时暂停其他播放器|
|
||||
|list-folded |`false` |列表默认是否折叠|
|
||||
|list-max-height |`340px` |列表最大高度|
|
||||
|
||||
#### 自定义音乐 URL {#custom-music-url}
|
||||
### 自定义音乐 URL {#custom-music-url}
|
||||
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐 URL:
|
||||
|
||||
@@ -1128,7 +1020,7 @@ data = [
|
||||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
|
||||
#### 音乐平台 URL 的自动识别 {#automatic-identification}
|
||||
### 音乐平台 URL 的自动识别 {#automatic-identification}
|
||||
|
||||
`music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:
|
||||
|
||||
@@ -1148,7 +1040,7 @@ data = [
|
||||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
#### 自定义音乐平台, 类型和 ID {#custom-server}
|
||||
### 自定义音乐平台, 类型和 ID {#custom-server}
|
||||
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐平台:
|
||||
|
||||
@@ -1180,13 +1072,13 @@ data = [
|
||||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
#### 其它参数
|
||||
### 其它参数 {#other-parameters}
|
||||
|
||||
`music` shortcode 有一些可以应用于以上三种方式的其它命名参数:
|
||||
|
||||
* **theme** *[可选]*
|
||||
|
||||
音乐播放器的主题色, 默认值是 `#a9a9b3`.
|
||||
{{< version 0.2.0 changed >}} 音乐播放器的主题色, 默认值是 `#448aff`.
|
||||
|
||||
* **fixed** *[可选]*
|
||||
|
||||
@@ -1230,7 +1122,7 @@ data = [
|
||||
|
||||
音乐列表的最大高度, 默认值是 `340px`.
|
||||
|
||||
### `bilibili`
|
||||
## `bilibili`
|
||||
|
||||
`bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.
|
||||
|
||||
@@ -1270,13 +1162,13 @@ https://www.bilibili.com/video/av36570401?p=3
|
||||
|
||||
{{< bilibili av=36570401 p=3 >}}
|
||||
|
||||
### `typeit`
|
||||
## `typeit`
|
||||
|
||||
`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 提供了打字动画.
|
||||
|
||||
只需将你需要打字动画的内容插入 `typeit` shortcode 中即可.
|
||||
|
||||
#### 简单内容 {#simple-content}
|
||||
### 简单内容 {#simple-content}
|
||||
|
||||
允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等...
|
||||
|
||||
@@ -1310,7 +1202,7 @@ https://www.bilibili.com/video/av36570401?p=3
|
||||
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
|
||||
{{< /typeit >}}
|
||||
|
||||
#### 代码内容 {#code-content}
|
||||
### 代码内容 {#code-content}
|
||||
|
||||
代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮.
|
||||
|
||||
@@ -1336,7 +1228,7 @@ public class HelloWorld {
|
||||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
#### 分组内容 {#code-content}
|
||||
### 分组内容 {#code-content}
|
||||
|
||||
默认情况下, 所有打字动画都是同时开始的.
|
||||
但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画.
|
||||
Reference in New Issue
Block a user