mirror of
https://github.com/idanoo/m2.nz
synced 2025-07-01 21:02:15 +00:00
Update Theme
This commit is contained in:
parent
a212477863
commit
d47be661bd
GPG key ID:
387387CDBC02F132
212 changed files with 13069 additions and 8406 deletions
|
|
@ -7,7 +7,7 @@ draft: false
|
|||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "This article shows the basic Markdown syntax and format."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ draft: false
|
|||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "这篇文章展示了基本的 Markdown 语法和格式."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ draft: false
|
|||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Guide to emoji usage in Hugo and LoveIt."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ draft: false
|
|||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo 和 LoveIt 中的 Emoji 的用法指南."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ draft: false
|
|||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Discover what the Hugo - LoveIt theme is all about and the core-concepts behind it."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
|
@ -77,17 +77,28 @@ The following is a basic configuration for the LoveIt theme:
|
|||
|
||||
```toml
|
||||
baseURL = "http://example.org/"
|
||||
# [en, zh-cn, fr, ...] determines default content language
|
||||
defaultContentLanguage = "en"
|
||||
# language code
|
||||
languageCode = "en"
|
||||
title = "My New Hugo Site"
|
||||
|
||||
# Change the default theme to be use when building the site with Hugo
|
||||
theme = "LoveIt"
|
||||
|
||||
# website title
|
||||
title = "My New Hugo Site"
|
||||
|
||||
# language code ["en", "zh-CN", "fr", "pl", ...]
|
||||
languageCode = "en"
|
||||
# language name ["English", "简体中文", "Français", "Polski", ...]
|
||||
languageName = "English"
|
||||
|
||||
# Author config
|
||||
[author]
|
||||
name = "xxxx"
|
||||
email = ""
|
||||
link = ""
|
||||
|
||||
# Menu config
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
# you can add extra information before the name (HTML format is supported), such as icons
|
||||
pre = ""
|
||||
|
|
@ -97,23 +108,22 @@ theme = "LoveIt"
|
|||
url = "/posts/"
|
||||
# title will be shown when you hover on this menu link
|
||||
title = ""
|
||||
weight = 1
|
||||
[[menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Tags"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
weight = 2
|
||||
[[menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Categories"
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
weight = 3
|
||||
|
||||
# Markup related configuration in Hugo
|
||||
[markup]
|
||||
|
|
@ -190,13 +200,81 @@ In addition to [Hugo global configuration](https://gohugo.io/overview/configurat
|
|||
Please open the code block below to view the complete sample configuration :(far fa-hand-point-down fa-fw)::
|
||||
|
||||
```toml
|
||||
baseURL = "http://example.org/"
|
||||
|
||||
# Change the default theme to be use when building the site with Hugo
|
||||
theme = "LoveIt"
|
||||
|
||||
# website title
|
||||
title = "My New Hugo Site"
|
||||
|
||||
# language code ["en", "zh-CN", "fr", "pl", ...]
|
||||
languageCode = "en"
|
||||
# language name ["English", "简体中文", "Français", "Polski", ...]
|
||||
languageName = "English"
|
||||
# whether to include Chinese/Japanese/Korean
|
||||
hasCJKLanguage = false
|
||||
|
||||
# default amount of posts in each pages
|
||||
paginate = 12
|
||||
# google analytics code [UA-XXXXXXXX-X]
|
||||
googleAnalytics = ""
|
||||
# copyright description used only for seo schema
|
||||
copyright = ""
|
||||
|
||||
# whether to use robots.txt
|
||||
enableRobotsTXT = true
|
||||
# whether to use git commit log
|
||||
enableGitInfo = true
|
||||
# whether to use emoji code
|
||||
enableEmoji = true
|
||||
|
||||
# ignore some build errors
|
||||
ignoreErrors = ["error-remote-getjson", "error-missing-instagram-accesstoken"]
|
||||
|
||||
# Author config
|
||||
[author]
|
||||
name = "xxxx"
|
||||
email = ""
|
||||
link = ""
|
||||
|
||||
# Menu config
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
# you can add extra information before the name (HTML format is supported), such as icons
|
||||
pre = ""
|
||||
# you can add extra information after the name (HTML format is supported), such as icons
|
||||
post = ""
|
||||
name = "Posts"
|
||||
url = "/posts/"
|
||||
# title will be shown when you hover on this menu link
|
||||
title = ""
|
||||
[[menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Tags"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
[[menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Categories"
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
|
||||
[params]
|
||||
# site default theme ("light", "dark", "auto")
|
||||
# site default theme ["auto", "light", "dark"]
|
||||
defaultTheme = "auto"
|
||||
# public git repo url only then enableGitInfo is true
|
||||
gitRepo = ""
|
||||
# {{< version 0.1.1 >}} which hash function used for SRI, when empty, no SRI is used
|
||||
# ("sha256", "sha384", "sha512", "md5")
|
||||
# ["sha256", "sha384", "sha512", "md5"]
|
||||
fingerprint = ""
|
||||
# {{< version 0.2.0 >}} date format
|
||||
dateFormat = "2006-01-02"
|
||||
|
|
@ -209,9 +287,9 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
|
||||
# Header config
|
||||
[params.header]
|
||||
# desktop header mode ("fixed", "normal", "auto")
|
||||
# desktop header mode ["fixed", "normal", "auto"]
|
||||
desktopMode = "fixed"
|
||||
# mobile header mode ("fixed", "normal", "auto")
|
||||
# mobile header mode ["fixed", "normal", "auto"]
|
||||
mobileMode = "auto"
|
||||
# {{< version 0.2.0 >}} Header title config
|
||||
[params.header.title]
|
||||
|
|
@ -280,7 +358,7 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
# {{< version 0.2.0 >}} Search config
|
||||
[params.search]
|
||||
enable = true
|
||||
# type of search engine ("lunr", "algolia")
|
||||
# type of search engine ["lunr", "algolia"]
|
||||
type = "lunr"
|
||||
# max index length of the chunked content
|
||||
contentLength = 4000
|
||||
|
|
@ -312,7 +390,7 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
avatarURL = "/images/avatar.png"
|
||||
# {{< version 0.2.7 changed >}} title shown in home page (HTML format is supported)
|
||||
title = ""
|
||||
# subtitle shown in home page
|
||||
# subtitle shown in home page (HTML format is supported)
|
||||
subtitle = "This is My New Hugo Site"
|
||||
# whether to use typeit animation for subtitle
|
||||
typeit = true
|
||||
|
|
@ -393,6 +471,17 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
XMPP = ""
|
||||
Matrix = ""
|
||||
Bilibili = ""
|
||||
Discord = ""
|
||||
DiscordInvite = ""
|
||||
Lichess = ""
|
||||
ORCID = ""
|
||||
Pleroma = ""
|
||||
Kaggle = ""
|
||||
MediaWiki= ""
|
||||
Plume = ""
|
||||
HackTheBox = ""
|
||||
RootMe= ""
|
||||
Phone = ""
|
||||
Email = "xxxx@xxxx.com"
|
||||
RSS = true # {{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -427,10 +516,10 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
# {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} mathematical formulas
|
||||
[params.page.math]
|
||||
enable = true
|
||||
# default inline delimiter is $ ... $ and \( ... \)
|
||||
# {{< version 0.2.11 changed >}} default inline delimiter is $ ... $ and \( ... \)
|
||||
inlineLeftDelimiter = ""
|
||||
inlineRightDelimiter = ""
|
||||
# default block delimiter is $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} and some other functions
|
||||
# {{< version 0.2.11 changed >}} default block delimiter is $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} and some other functions
|
||||
blockLeftDelimiter = ""
|
||||
blockRightDelimiter = ""
|
||||
# KaTeX extension copy_tex
|
||||
|
|
@ -442,15 +531,15 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
# whether to show the copy button of the code block
|
||||
copy = true
|
||||
# the maximum number of lines of displayed code by default
|
||||
maxShownLines = 10
|
||||
maxShownLines = 50
|
||||
# {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
|
||||
[params.page.mapbox]
|
||||
# access token of Mapbox GL JS
|
||||
accessToken = ""
|
||||
# style for the light theme
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true"
|
||||
# style for the dark theme
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true"
|
||||
# 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 >}}
|
||||
|
|
@ -465,10 +554,10 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
Twitter = true
|
||||
Facebook = true
|
||||
Linkedin = false
|
||||
Whatsapp = true
|
||||
Whatsapp = false
|
||||
Pinterest = false
|
||||
Tumblr = false
|
||||
HackerNews = false
|
||||
HackerNews = true
|
||||
Reddit = false
|
||||
VK = false
|
||||
Buffer = false
|
||||
|
|
@ -476,16 +565,12 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
Line = true
|
||||
Instapaper = false
|
||||
Pocket = false
|
||||
Digg = false
|
||||
Stumbleupon = false
|
||||
Flipboard = false
|
||||
Weibo = true
|
||||
Renren = false
|
||||
Myspace = true
|
||||
Blogger = true
|
||||
Blogger = false
|
||||
Baidu = false
|
||||
Odnoklassniki = false
|
||||
Evernote = true
|
||||
Evernote = false
|
||||
Skype = false
|
||||
Trello = false
|
||||
Mix = false
|
||||
|
|
@ -515,6 +600,7 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
avatar = "mp"
|
||||
meta= ""
|
||||
pageSize = 10
|
||||
# automatically adapt the current theme i18n configuration when empty
|
||||
lang = ""
|
||||
visitor = true
|
||||
recordIP = true
|
||||
|
|
@ -522,10 +608,10 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
enableQQ = false
|
||||
serverURLs = ""
|
||||
# {{< version 0.2.6 >}} emoji data file name, default is "google.yml"
|
||||
# ("apple.yml", "google.yml", "facebook.yml", "twitter.yml")
|
||||
# located in "themes/LoveIt/assets/data/emoji/" directory
|
||||
# ["apple.yml", "google.yml", "facebook.yml", "twitter.yml"]
|
||||
# located in "themes/LoveIt/assets/lib/valine/emoji/" directory
|
||||
# you can store your own data files in the same path under your project:
|
||||
# "assets/data/emoji/"
|
||||
# "assets/lib/valine/emoji/"
|
||||
emoji = ""
|
||||
# {{< link "https://developers.facebook.com/docs/plugins/comments" "Facebook comment" >}} config
|
||||
[params.page.comment.facebook]
|
||||
|
|
@ -533,6 +619,7 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
width = "100%"
|
||||
numPosts = 10
|
||||
appId = ""
|
||||
# automatically adapt the current theme i18n configuration when empty
|
||||
languageCode = ""
|
||||
# {{< version 0.2.0 >}} {{< link "https://comments.app/" "Telegram comments" >}} config
|
||||
[params.page.comment.telegram]
|
||||
|
|
@ -547,7 +634,7 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
# {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} comment config
|
||||
[params.page.comment.commento]
|
||||
enable = false
|
||||
# {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} comment config
|
||||
# {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "utterances" >}} comment config
|
||||
[params.page.comment.utterances]
|
||||
enable = false
|
||||
# owner/repo
|
||||
|
|
@ -556,6 +643,23 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
label = ""
|
||||
lightTheme = "github-light"
|
||||
darkTheme = "github-dark"
|
||||
# giscus comment config (https://giscus.app/)
|
||||
[params.page.comment.giscus]
|
||||
# You can refer to the official documentation of giscus to use the following configuration.
|
||||
enable = false
|
||||
repo = ""
|
||||
repoId = ""
|
||||
category = "Announcements"
|
||||
categoryId = ""
|
||||
# automatically adapt the current theme i18n configuration when empty
|
||||
lang = ""
|
||||
mapping = "pathname"
|
||||
reactionsEnabled = "1"
|
||||
emitMetadata = "0"
|
||||
inputPosition = "bottom"
|
||||
lazyLoading = false
|
||||
lightTheme = "light"
|
||||
darkTheme = "dark"
|
||||
# {{< version 0.2.7 >}} Third-party library config
|
||||
[params.page.library]
|
||||
[params.page.library.css]
|
||||
|
|
@ -616,6 +720,12 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
id = ""
|
||||
# server url for your tracker if you're self hosting
|
||||
server = ""
|
||||
# Plausible Analytics
|
||||
[params.analytics.plausible]
|
||||
dataDomain = ""
|
||||
# Yandex Metrica
|
||||
[params.analytics.yandexMetrica]
|
||||
id = ""
|
||||
|
||||
# {{< version 0.2.7 >}} Cookie consent config
|
||||
[params.cookieconsent]
|
||||
|
|
@ -629,7 +739,7 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
# {{< version 0.2.7 changed >}} CDN config for third-party library files
|
||||
[params.cdn]
|
||||
# CDN data file name, disabled by default
|
||||
# ("jsdelivr.yml")
|
||||
# ["jsdelivr.yml"]
|
||||
# located in "themes/LoveIt/assets/data/cdn/" directory
|
||||
# you can store your own data files in the same path under your project:
|
||||
# "assets/data/cdn/"
|
||||
|
|
@ -671,12 +781,6 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
startLevel = 2
|
||||
endLevel = 6
|
||||
|
||||
# Author config
|
||||
[author]
|
||||
name = "xxxx"
|
||||
email = ""
|
||||
link = ""
|
||||
|
||||
# Sitemap config
|
||||
[sitemap]
|
||||
changefreq = "weekly"
|
||||
|
|
@ -738,7 +842,7 @@ You could enable these features with `hugo serve -e production`.
|
|||
```toml
|
||||
[params.cdn]
|
||||
# CDN data file name, disabled by default
|
||||
# ("jsdelivr.yml")
|
||||
# ["jsdelivr.yml"]
|
||||
data = ""
|
||||
````
|
||||
|
||||
|
|
@ -843,6 +947,14 @@ In `assets/css/_custom.scss`, you can add some css style code to customize the s
|
|||
| Russian | `ru` | `ru` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| Romanian | `ro` | `ro` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| Vietnamese | `vi` | `vi` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| Arabic | `ar` | `ar` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| Catalan | `ca` | `ca` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
| Thai | `th` | `th` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| Telugu | `te` | `te` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
| Indonesian | `id` | `id` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
| Turkish | `tr` | `tr` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| Korean | `ko` | `ko` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
| Hindi | `hi` | `hi` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
|
||||
### 4.2 Basic Configuration
|
||||
|
||||
|
|
@ -851,7 +963,7 @@ After learning [how Hugo handle multilingual websites](https://gohugo.io/content
|
|||
For example with English, Chinese and French website:
|
||||
|
||||
```toml
|
||||
# [en, zh-cn, fr, pl, ...] determines default content language
|
||||
# determines default content language ["en", "zh-cn", "fr", "pl", ...]
|
||||
defaultContentLanguage = "en"
|
||||
|
||||
[languages]
|
||||
|
|
@ -861,62 +973,60 @@ defaultContentLanguage = "en"
|
|||
languageCode = "en"
|
||||
languageName = "English"
|
||||
[[languages.en.menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Posts"
|
||||
url = "/posts/"
|
||||
title = ""
|
||||
weight = 1
|
||||
[[languages.en.menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Tags"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
weight = 2
|
||||
[[languages.en.menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Categories"
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
weight = 3
|
||||
|
||||
[languages.zh-cn]
|
||||
weight = 2
|
||||
title = "我的全新 Hugo 网站"
|
||||
# language code, CN only here
|
||||
languageCode = "zh-CN"
|
||||
languageName = "简体中文"
|
||||
# whether to include Chinese/Japanese/Korean
|
||||
hasCJKLanguage = true
|
||||
[[languages.zh-cn.menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "文章"
|
||||
url = "/posts/"
|
||||
title = ""
|
||||
weight = 1
|
||||
[[languages.zh-cn.menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "标签"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
weight = 2
|
||||
[[languages.zh-cn.menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "分类"
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
weight = 3
|
||||
|
||||
[languages.fr]
|
||||
weight = 3
|
||||
|
|
@ -924,29 +1034,29 @@ defaultContentLanguage = "en"
|
|||
languageCode = "fr"
|
||||
languageName = "Français"
|
||||
[[languages.fr.menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Postes"
|
||||
url = "/posts/"
|
||||
title = ""
|
||||
weight = 1
|
||||
[[languages.fr.menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Balises"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
weight = 2
|
||||
[[languages.fr.menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
name = "Catégories"
|
||||
pre = ""
|
||||
post = ""
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
weight = 3
|
||||
```
|
||||
|
||||
Then, for each new page, append the language code to the file name.
|
||||
|
|
@ -997,7 +1107,7 @@ Here is the search configuration in your [site configuration](#site-configuratio
|
|||
```toml
|
||||
[params.search]
|
||||
enable = true
|
||||
# type of search engine ("lunr", "algolia")
|
||||
# type of search engine ["lunr", "algolia"]
|
||||
type = "lunr"
|
||||
# max index length of the chunked content
|
||||
contentLength = 4000
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ draft: false
|
|||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "探索 Hugo - LoveIt 主题的全部内容和背后的核心概念."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
|
@ -77,24 +77,30 @@ git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
|||
|
||||
```toml
|
||||
baseURL = "http://example.org/"
|
||||
# [en, zh-cn, fr, ...] 设置默认的语言
|
||||
defaultContentLanguage = "zh-cn"
|
||||
# 网站语言, 仅在这里 CN 大写
|
||||
languageCode = "zh-CN"
|
||||
# 是否包括中日韩文字
|
||||
hasCJKLanguage = true
|
||||
# 网站标题
|
||||
title = "我的全新 Hugo 网站"
|
||||
|
||||
# 更改使用 Hugo 构建网站时使用的默认主题
|
||||
theme = "LoveIt"
|
||||
|
||||
[params]
|
||||
# LoveIt 主题版本
|
||||
version = "0.2.X"
|
||||
# 网站标题
|
||||
title = "我的全新 Hugo 网站"
|
||||
|
||||
# 网站语言, 仅在这里 CN 大写 ["en", "zh-CN", "fr", "pl", ...]
|
||||
languageCode = "zh-CN"
|
||||
# 语言名称 ["English", "简体中文", "Français", "Polski", ...]
|
||||
languageName = "简体中文"
|
||||
# 是否包括中日韩文字
|
||||
hasCJKLanguage = true
|
||||
|
||||
# 作者配置
|
||||
[author]
|
||||
name = "xxxx"
|
||||
email = ""
|
||||
link = ""
|
||||
|
||||
# 菜单配置
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
# 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
|
||||
pre = ""
|
||||
|
|
@ -104,23 +110,22 @@ theme = "LoveIt"
|
|||
url = "/posts/"
|
||||
# 当你将鼠标悬停在此菜单链接上时, 将显示的标题
|
||||
title = ""
|
||||
weight = 1
|
||||
[[menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "标签"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
weight = 2
|
||||
[[menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "分类"
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
weight = 3
|
||||
|
||||
# Hugo 解析文档的配置
|
||||
[markup]
|
||||
|
|
@ -197,13 +202,81 @@ hugo
|
|||
请打开下面的代码块查看完整的示例配置 :(far fa-hand-point-down fa-fw)::
|
||||
|
||||
```toml
|
||||
baseURL = "http://example.org/"
|
||||
|
||||
# 更改使用 Hugo 构建网站时使用的默认主题
|
||||
theme = "LoveIt"
|
||||
|
||||
# 网站标题
|
||||
title = "我的全新 Hugo 网站"
|
||||
|
||||
# 网站语言, 仅在这里 CN 大写 ["en", "zh-CN", "fr", "pl", ...]
|
||||
languageCode = "zh-CN"
|
||||
# 语言名称 ["English", "简体中文", "Français", "Polski", ...]
|
||||
languageName = "简体中文"
|
||||
# 是否包括中日韩文字
|
||||
hasCJKLanguage = true
|
||||
|
||||
# 默认每页列表显示的文章数目
|
||||
paginate = 12
|
||||
# 谷歌分析代号 [UA-XXXXXXXX-X]
|
||||
googleAnalytics = ""
|
||||
# 版权描述，仅仅用于 SEO
|
||||
copyright = ""
|
||||
|
||||
# 是否使用 robots.txt
|
||||
enableRobotsTXT = true
|
||||
# 是否使用 git 信息
|
||||
enableGitInfo = true
|
||||
# 是否使用 emoji 代码
|
||||
enableEmoji = true
|
||||
|
||||
# 忽略一些构建错误
|
||||
ignoreErrors = ["error-remote-getjson", "error-missing-instagram-accesstoken"]
|
||||
|
||||
# 作者配置
|
||||
[author]
|
||||
name = "xxxx"
|
||||
email = ""
|
||||
link = ""
|
||||
|
||||
# 菜单配置
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
# 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
|
||||
pre = ""
|
||||
# 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
|
||||
post = ""
|
||||
name = "文章"
|
||||
url = "/posts/"
|
||||
# 当你将鼠标悬停在此菜单链接上时, 将显示的标题
|
||||
title = ""
|
||||
[[menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "标签"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
[[menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "分类"
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
|
||||
[params]
|
||||
# 网站默认主题样式 ("light", "dark", "auto")
|
||||
# 网站默认主题样式 ["auto", "light", "dark"]
|
||||
defaultTheme = "auto"
|
||||
# 公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效
|
||||
gitRepo = ""
|
||||
# {{< version 0.1.1 >}} 哪种哈希函数用来 SRI, 为空时表示不使用 SRI
|
||||
# ("sha256", "sha384", "sha512", "md5")
|
||||
# ["sha256", "sha384", "sha512", "md5"]
|
||||
fingerprint = ""
|
||||
# {{< version 0.2.0 >}} 日期格式
|
||||
dateFormat = "2006-01-02"
|
||||
|
|
@ -216,9 +289,9 @@ hugo
|
|||
|
||||
# 页面头部导航栏配置
|
||||
[params.header]
|
||||
# 桌面端导航栏模式 ("fixed", "normal", "auto")
|
||||
# 桌面端导航栏模式 ["fixed", "normal", "auto"]
|
||||
desktopMode = "fixed"
|
||||
# 移动端导航栏模式 ("fixed", "normal", "auto")
|
||||
# 移动端导航栏模式 ["fixed", "normal", "auto"]
|
||||
mobileMode = "auto"
|
||||
# {{< version 0.2.0 >}} 页面头部导航栏标题配置
|
||||
[params.header.title]
|
||||
|
|
@ -287,7 +360,7 @@ hugo
|
|||
# {{< version 0.2.0 >}} 搜索配置
|
||||
[params.search]
|
||||
enable = true
|
||||
# 搜索引擎的类型 ("lunr", "algolia")
|
||||
# 搜索引擎的类型 ["lunr", "algolia"]
|
||||
type = "lunr"
|
||||
# 文章内容最长索引长度
|
||||
contentLength = 4000
|
||||
|
|
@ -319,7 +392,7 @@ hugo
|
|||
avatarURL = "/images/avatar.png"
|
||||
# {{< version 0.2.7 changed >}} 主页显示的网站标题 (支持 HTML 格式)
|
||||
title = ""
|
||||
# 主页显示的网站副标题
|
||||
# 主页显示的网站副标题 (允许 HTML 格式)
|
||||
subtitle = "这是我的全新 Hugo 网站"
|
||||
# 是否为副标题显示打字机动画
|
||||
typeit = true
|
||||
|
|
@ -400,6 +473,17 @@ hugo
|
|||
XMPP = ""
|
||||
Matrix = ""
|
||||
Bilibili = ""
|
||||
Discord = ""
|
||||
DiscordInvite = ""
|
||||
Lichess = ""
|
||||
ORCID = ""
|
||||
Pleroma = ""
|
||||
Kaggle = ""
|
||||
MediaWiki= ""
|
||||
Plume = ""
|
||||
HackTheBox = ""
|
||||
RootMe= ""
|
||||
Phone = ""
|
||||
Email = "xxxx@xxxx.com"
|
||||
RSS = true # {{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -436,14 +520,14 @@ hugo
|
|||
# 是否显示代码块的复制按钮
|
||||
copy = true
|
||||
# 默认展开显示的代码行数
|
||||
maxShownLines = 10
|
||||
maxShownLines = 50
|
||||
# {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} 数学公式
|
||||
[params.page.math]
|
||||
enable = true
|
||||
# 默认行内定界符是 $ ... $ 和 \( ... \)
|
||||
# {{< version 0.2.11 changed >}} 默认行内定界符是 $ ... $ 和 \( ... \)
|
||||
inlineLeftDelimiter = ""
|
||||
inlineRightDelimiter = ""
|
||||
# 默认块定界符是 $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} 和一些其它的函数
|
||||
# {{< version 0.2.11 changed >}} 默认块定界符是 $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} 和一些其它的函数
|
||||
blockLeftDelimiter = ""
|
||||
blockRightDelimiter = ""
|
||||
# KaTeX 插件 copy_tex
|
||||
|
|
@ -455,9 +539,9 @@ hugo
|
|||
# Mapbox GL JS 的 access token
|
||||
accessToken = ""
|
||||
# 浅色主题的地图样式
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true"
|
||||
# 深色主题的地图样式
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true"
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}}
|
||||
navigation = true
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}}
|
||||
|
|
@ -472,10 +556,10 @@ hugo
|
|||
Twitter = true
|
||||
Facebook = true
|
||||
Linkedin = false
|
||||
Whatsapp = true
|
||||
Whatsapp = false
|
||||
Pinterest = false
|
||||
Tumblr = false
|
||||
HackerNews = false
|
||||
HackerNews = true
|
||||
Reddit = false
|
||||
VK = false
|
||||
Buffer = false
|
||||
|
|
@ -483,16 +567,12 @@ hugo
|
|||
Line = true
|
||||
Instapaper = false
|
||||
Pocket = false
|
||||
Digg = false
|
||||
Stumbleupon = false
|
||||
Flipboard = false
|
||||
Weibo = true
|
||||
Renren = false
|
||||
Myspace = true
|
||||
Blogger = true
|
||||
Blogger = false
|
||||
Baidu = false
|
||||
Odnoklassniki = false
|
||||
Evernote = true
|
||||
Evernote = false
|
||||
Skype = false
|
||||
Trello = false
|
||||
Mix = false
|
||||
|
|
@ -522,6 +602,7 @@ hugo
|
|||
avatar = "mp"
|
||||
meta= ""
|
||||
pageSize = 10
|
||||
# 为空时自动适配当前主题 i18n 配置
|
||||
lang = ""
|
||||
visitor = true
|
||||
recordIP = true
|
||||
|
|
@ -529,10 +610,10 @@ hugo
|
|||
enableQQ = false
|
||||
serverURLs = ""
|
||||
# {{< version 0.2.6 >}} emoji 数据文件名称, 默认是 "google.yml"
|
||||
# ("apple.yml", "google.yml", "facebook.yml", "twitter.yml")
|
||||
# 位于 "themes/LoveIt/assets/data/emoji/" 目录
|
||||
# ["apple.yml", "google.yml", "facebook.yml", "twitter.yml"]
|
||||
# 位于 "themes/LoveIt/assets/lib/valine/emoji/" 目录
|
||||
# 可以在你的项目下相同路径存放你自己的数据文件:
|
||||
# "assets/data/emoji/"
|
||||
# "assets/lib/valine/emoji/"
|
||||
emoji = ""
|
||||
# {{< link "https://developers.facebook.com/docs/plugins/comments" "Facebook 评论系统" >}}设置
|
||||
[params.page.comment.facebook]
|
||||
|
|
@ -540,6 +621,7 @@ hugo
|
|||
width = "100%"
|
||||
numPosts = 10
|
||||
appId = ""
|
||||
# 为空时自动适配当前主题 i18n 配置
|
||||
languageCode = "zh_CN"
|
||||
# {{< version 0.2.0 >}} {{< link "https://comments.app/" "Telegram Comments" >}} 评论系统设置
|
||||
[params.page.comment.telegram]
|
||||
|
|
@ -554,7 +636,7 @@ hugo
|
|||
# {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} 评论系统设置
|
||||
[params.page.comment.commento]
|
||||
enable = false
|
||||
# {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} 评论系统设置
|
||||
# {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "utterances" >}} 评论系统设置
|
||||
[params.page.comment.utterances]
|
||||
enable = false
|
||||
# owner/repo
|
||||
|
|
@ -563,6 +645,23 @@ hugo
|
|||
label = ""
|
||||
lightTheme = "github-light"
|
||||
darkTheme = "github-dark"
|
||||
# giscus comment 评论系统设置 (https://giscus.app/zh-CN)
|
||||
[params.page.comment.giscus]
|
||||
# 你可以参考官方文档来使用下列配置
|
||||
enable = false
|
||||
repo = ""
|
||||
repoId = ""
|
||||
category = "Announcements"
|
||||
categoryId = ""
|
||||
# 为空时自动适配当前主题 i18n 配置
|
||||
lang = ""
|
||||
mapping = "pathname"
|
||||
reactionsEnabled = "1"
|
||||
emitMetadata = "0"
|
||||
inputPosition = "bottom"
|
||||
lazyLoading = false
|
||||
lightTheme = "light"
|
||||
darkTheme = "dark"
|
||||
# {{< version 0.2.7 >}} 第三方库配置
|
||||
[params.page.library]
|
||||
[params.page.library.css]
|
||||
|
|
@ -623,6 +722,12 @@ hugo
|
|||
id = ""
|
||||
# 自行托管追踪器时的主机路径
|
||||
server = ""
|
||||
# Plausible Analytics
|
||||
[params.analytics.plausible]
|
||||
dataDomain = ""
|
||||
# Yandex Metrica
|
||||
[params.analytics.yandexMetrica]
|
||||
id = ""
|
||||
|
||||
# {{< version 0.2.7 >}} Cookie 许可配置
|
||||
[params.cookieconsent]
|
||||
|
|
@ -636,7 +741,7 @@ hugo
|
|||
# {{< version 0.2.7 changed >}} 第三方库文件的 CDN 设置
|
||||
[params.cdn]
|
||||
# CDN 数据文件名称, 默认不启用
|
||||
# ("jsdelivr.yml")
|
||||
# ["jsdelivr.yml"]
|
||||
# 位于 "themes/LoveIt/assets/data/cdn/" 目录
|
||||
# 可以在你的项目下相同路径存放你自己的数据文件:
|
||||
# "assets/data/cdn/"
|
||||
|
|
@ -678,12 +783,6 @@ hugo
|
|||
startLevel = 2
|
||||
endLevel = 6
|
||||
|
||||
# 作者配置
|
||||
[author]
|
||||
name = "xxxx"
|
||||
email = ""
|
||||
link = ""
|
||||
|
||||
# 网站地图配置
|
||||
[sitemap]
|
||||
changefreq = "weekly"
|
||||
|
|
@ -746,7 +845,7 @@ hugo
|
|||
```toml
|
||||
[params.cdn]
|
||||
# CDN 数据文件名称, 默认不启用
|
||||
# ("jsdelivr.yml")
|
||||
# ["jsdelivr.yml"]
|
||||
data = ""
|
||||
````
|
||||
|
||||
|
|
@ -850,6 +949,14 @@ $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospac
|
|||
| 俄语 | `ru` | `ru` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| 罗马尼亚语 | `ro` | `ro` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| 越南语 | `vi` | `vi` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| 阿拉伯语 | `ar` | `ar` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| 加泰罗尼亚语 | `ca` | `ca` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
| 泰语 | `th` | `th` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| 泰卢固语 | `te` | `te` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
| 印尼语 | `id` | `id` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
| 土耳其语 | `tr` | `tr` | :(far fa-square fa-fw): | :(far fa-check-square fa-fw): |
|
||||
| 韩语 | `ko` | `ko` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
| 印地语 | `hi` | `hi` | :(far fa-square fa-fw): | :(far fa-square fa-fw): |
|
||||
|
||||
### 4.2 基本配置
|
||||
|
||||
|
|
@ -858,7 +965,7 @@ $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospac
|
|||
例如, 一个支持英语, 中文和法语的网站配置:
|
||||
|
||||
```toml
|
||||
# [en, zh-cn, fr, pl, ...] 设置默认的语言
|
||||
# 设置默认的语言 ["en", "zh-cn", "fr", "pl", ...]
|
||||
defaultContentLanguage = "zh-cn"
|
||||
|
||||
[languages]
|
||||
|
|
@ -868,62 +975,60 @@ defaultContentLanguage = "zh-cn"
|
|||
languageCode = "en"
|
||||
languageName = "English"
|
||||
[[languages.en.menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Posts"
|
||||
url = "/posts/"
|
||||
title = ""
|
||||
weight = 1
|
||||
[[languages.en.menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Tags"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
weight = 2
|
||||
[[languages.en.menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Categories"
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
weight = 3
|
||||
|
||||
[languages.zh-cn]
|
||||
weight = 2
|
||||
title = "我的全新 Hugo 网站"
|
||||
# 网站语言, 仅在这里 CN 大写
|
||||
languageCode = "zh-CN"
|
||||
languageName = "简体中文"
|
||||
# 是否包括中日韩文字
|
||||
hasCJKLanguage = true
|
||||
[[languages.zh-cn.menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "文章"
|
||||
url = "/posts/"
|
||||
title = ""
|
||||
weight = 1
|
||||
[[languages.zh-cn.menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "标签"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
weight = 2
|
||||
[[languages.zh-cn.menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "分类"
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
weight = 3
|
||||
|
||||
[languages.fr]
|
||||
weight = 3
|
||||
|
|
@ -931,29 +1036,29 @@ defaultContentLanguage = "zh-cn"
|
|||
languageCode = "fr"
|
||||
languageName = "Français"
|
||||
[[languages.fr.menu.main]]
|
||||
weight = 1
|
||||
identifier = "posts"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Postes"
|
||||
url = "/posts/"
|
||||
title = ""
|
||||
weight = 1
|
||||
[[languages.fr.menu.main]]
|
||||
weight = 2
|
||||
identifier = "tags"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Balises"
|
||||
url = "/tags/"
|
||||
title = ""
|
||||
weight = 2
|
||||
[[languages.fr.menu.main]]
|
||||
weight = 3
|
||||
identifier = "categories"
|
||||
pre = ""
|
||||
post = ""
|
||||
name = "Catégories"
|
||||
url = "/categories/"
|
||||
title = ""
|
||||
weight = 3
|
||||
```
|
||||
|
||||
然后, 对于每个新页面, 将语言代码附加到文件名中.
|
||||
|
|
@ -1005,7 +1110,7 @@ defaultContentLanguage = "zh-cn"
|
|||
```toml
|
||||
[params.search]
|
||||
enable = true
|
||||
# 搜索引擎的类型 ("lunr", "algolia")
|
||||
# 搜索引擎的类型 ["lunr", "algolia"]
|
||||
type = "lunr"
|
||||
# 文章内容最长索引长度
|
||||
contentLength = 4000
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
|
|
@ -0,0 +1,65 @@
|
|||
---
|
||||
weight: 9
|
||||
title: "Theme Documentation - bilibili Shortcode"
|
||||
date: 2020-03-03T11:29:41+08:00
|
||||
lastmod: 2020-03-03T12:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The bilibili shortcode embeds a responsive video player for bilibili videos."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
|
||||
toc:
|
||||
enable: false
|
||||
---
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
||||
<!--more-->
|
||||
|
||||
When the video only has one part, only the BV `id` of the video is required, e.g.:
|
||||
|
||||
```code
|
||||
https://www.bilibili.com/video/BV1Sx411T7QQ
|
||||
```
|
||||
|
||||
Example `bilibili` input:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili BV1Sx411T7QQ */>}}
|
||||
Or
|
||||
{{</* bilibili id=BV1Sx411T7QQ */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< bilibili id=BV1Sx411T7QQ >}}
|
||||
|
||||
When the video has multiple parts, in addition to the BV `id` of the video,
|
||||
`p` is also required, whose default value is `1`, e.g.:
|
||||
|
||||
```code
|
||||
https://www.bilibili.com/video/BV1TJ411C7An?p=3
|
||||
```
|
||||
|
||||
Example `bilibili` input with `p`:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili BV1TJ411C7An 3 */>}}
|
||||
Or
|
||||
{{</* bilibili id=BV1TJ411C7An p=3 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< bilibili id=BV1TJ411C7An p=3 >}}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
weight: 9
|
||||
title: "主题文档 - bilibili Shortcode"
|
||||
date: 2020-03-03T11:29:41+08:00
|
||||
lastmod: 2020-03-03T12:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "bilibili shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
|
||||
toc:
|
||||
enable: false
|
||||
---
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
`bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.
|
||||
|
||||
<!--more-->
|
||||
|
||||
如果视频只有一个部分, 则仅需要视频的 BV `id`, 例如:
|
||||
|
||||
```code
|
||||
https://www.bilibili.com/video/BV1Sx411T7QQ
|
||||
```
|
||||
|
||||
一个 `bilibili` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili BV1Sx411T7QQ */>}}
|
||||
或者
|
||||
{{</* bilibili id=BV1Sx411T7QQ */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< bilibili id=BV1Sx411T7QQ >}}
|
||||
|
||||
如果视频包含多个部分, 则除了视频的 BV `id` 之外, 还需要 `p`, 默认值为 `1`, 例如:
|
||||
|
||||
```code
|
||||
https://www.bilibili.com/video/BV1TJ411C7An?p=3
|
||||
```
|
||||
|
||||
一个带有 `p` 参数的 `bilibili` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili BV1TJ411C7An 3 */>}}
|
||||
或者
|
||||
{{</* bilibili id=BV1TJ411C7An p=3 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< bilibili id=BV1TJ411C7An p=3 >}}
|
||||
|
|
@ -7,7 +7,7 @@ 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."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ draft: false
|
|||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ draft: false
|
|||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Find out how to create and organize your content quickly and intuitively in LoveIt theme."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
|
@ -83,6 +83,7 @@ images: []
|
|||
|
||||
tags: []
|
||||
categories: []
|
||||
|
||||
featuredImage: ""
|
||||
featuredImagePreview: ""
|
||||
|
||||
|
|
@ -101,12 +102,11 @@ toc:
|
|||
auto: true
|
||||
code:
|
||||
copy: true
|
||||
# ...
|
||||
maxShownLines: 50
|
||||
math:
|
||||
enable: true
|
||||
enable: false
|
||||
# ...
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
# ...
|
||||
share:
|
||||
enable: true
|
||||
|
|
@ -144,6 +144,7 @@ seo:
|
|||
|
||||
* **tags**: the tags for the content.
|
||||
* **categories**: the categories for the content.
|
||||
|
||||
* **featuredImage**: the featured image for the content.
|
||||
* **featuredImagePreview**: the featured image for the content preview in the home page.
|
||||
|
||||
|
|
@ -244,6 +245,8 @@ This part is shown in the [emoji support page](../emoji-support/).
|
|||
|
||||
### Mathematical Formula
|
||||
|
||||
{{< version 0.2.11 changed >}}
|
||||
|
||||
**LoveIt** theme supports mathematical formulas based on [$\KaTeX$](https://katex.org/).
|
||||
|
||||
Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration)
|
||||
|
|
@ -269,7 +272,7 @@ therefore, additional escape character expressions are required for these places
|
|||
* `\]` -> `\\]`
|
||||
* `\\` -> `\\\\`
|
||||
|
||||
**LoveIt** theme supports `raw` shortcode to avoid these escape characters,
|
||||
**LoveIt** theme supports [`raw` shortcode](../theme-documentation-extended-shortcodes#12-raw) to avoid these escape characters,
|
||||
which helps you write raw mathematical formula content.
|
||||
|
||||
Example `raw` input:
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ draft: false
|
|||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "了解如何在 LoveIt 主题中快速, 直观地创建和组织内容."
|
||||
images: ["featured-image.png"]
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
|
@ -82,6 +82,7 @@ images: []
|
|||
|
||||
tags: []
|
||||
categories: []
|
||||
|
||||
featuredImage: ""
|
||||
featuredImagePreview: ""
|
||||
|
||||
|
|
@ -100,12 +101,11 @@ toc:
|
|||
auto: true
|
||||
code:
|
||||
copy: true
|
||||
# ...
|
||||
maxShownLines: 50
|
||||
math:
|
||||
enable: true
|
||||
enable: false
|
||||
# ...
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
# ...
|
||||
share:
|
||||
enable: true
|
||||
|
|
@ -143,6 +143,7 @@ seo:
|
|||
|
||||
* **tags**: 文章的标签.
|
||||
* **categories**: 文章所属的类别.
|
||||
|
||||
* **featuredImage**: 文章的特色图片.
|
||||
* **featuredImagePreview**: 用在主页预览的文章特色图片.
|
||||
|
||||
|
|
@ -243,6 +244,8 @@ resources:
|
|||
|
||||
### 数学公式
|
||||
|
||||
{{< version 0.2.11 changed >}}
|
||||
|
||||
**LoveIt** 基于 [$\KaTeX$](https://katex.org/) 提供数学公式的支持.
|
||||
|
||||
在你的 [网站配置](../theme-documentation-basics#site-configuration) 中的 `[params.math]` 下面设置属性 `enable = true`,
|
||||
|
|
@ -267,7 +270,7 @@ resources:
|
|||
* `\]` -> `\\]`
|
||||
* `\\` -> `\\\\`
|
||||
|
||||
**LoveIt** 主题支持 `raw` shortcode 以避免这些转义字符,
|
||||
**LoveIt** 主题支持 [`raw` shortcode](../theme-documentation-extended-shortcodes#12-raw) 以避免这些转义字符,
|
||||
它可以帮助您编写原始数学公式内容.
|
||||
|
||||
一个 `raw` 示例:
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
|
|
@ -0,0 +1,414 @@
|
|||
---
|
||||
weight: 6
|
||||
title: "Theme Documentation - echarts Shortcode"
|
||||
date: 2020-03-03T14:29:41+08:00
|
||||
lastmod: 2020-03-03T14:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The echarts shortcode supports data visualization in Hugo with ECharts library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
|
||||
toc:
|
||||
enable: false
|
||||
code:
|
||||
maxShownLines: 70
|
||||
---
|
||||
|
||||
The `echarts` shortcode supports data visualization in Hugo with [ECharts](https://echarts.apache.org/) library.
|
||||
|
||||
<!--more-->
|
||||
|
||||
**ECharts** is a library helping you to generate interactive data visualization.
|
||||
|
||||
The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts.
|
||||
|
||||
Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it.
|
||||
|
||||
Example `echarts` input in `JSON` format:
|
||||
|
||||
```json
|
||||
{{</* echarts */>}}
|
||||
{
|
||||
"title": {
|
||||
"text": "Summary Line Chart",
|
||||
"top": "2%",
|
||||
"left": "center"
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"legend": {
|
||||
"data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
|
||||
"top": "10%"
|
||||
},
|
||||
"grid": {
|
||||
"left": "5%",
|
||||
"right": "5%",
|
||||
"bottom": "5%",
|
||||
"top": "20%",
|
||||
"containLabel": true
|
||||
},
|
||||
"toolbox": {
|
||||
"feature": {
|
||||
"saveAsImage": {
|
||||
"title": "Save as Image"
|
||||
}
|
||||
}
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"boundaryGap": false,
|
||||
"data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "Email Marketing",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
"name": "Affiliate Advertising",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
"name": "Video Advertising",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
"name": "Direct View",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
"name": "Search Engine",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
{{</* /echarts */>}}
|
||||
```
|
||||
|
||||
The same in `YAML` format:
|
||||
|
||||
```yaml
|
||||
{{</* echarts */>}}
|
||||
title:
|
||||
text: Summary Line Chart
|
||||
top: 2%
|
||||
left: center
|
||||
tooltip:
|
||||
trigger: axis
|
||||
legend:
|
||||
data:
|
||||
- Email Marketing
|
||||
- Affiliate Advertising
|
||||
- Video Advertising
|
||||
- Direct View
|
||||
- Search Engine
|
||||
top: 10%
|
||||
grid:
|
||||
left: 5%
|
||||
right: 5%
|
||||
bottom: 5%
|
||||
top: 20%
|
||||
containLabel: true
|
||||
toolbox:
|
||||
feature:
|
||||
saveAsImage:
|
||||
title: Save as Image
|
||||
xAxis:
|
||||
type: category
|
||||
boundaryGap: false
|
||||
data:
|
||||
- Monday
|
||||
- Tuesday
|
||||
- Wednesday
|
||||
- Thursday
|
||||
- Friday
|
||||
- Saturday
|
||||
- Sunday
|
||||
yAxis:
|
||||
type: value
|
||||
series:
|
||||
- name: Email Marketing
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 120
|
||||
- 132
|
||||
- 101
|
||||
- 134
|
||||
- 90
|
||||
- 230
|
||||
- 210
|
||||
- name: Affiliate Advertising
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 220
|
||||
- 182
|
||||
- 191
|
||||
- 234
|
||||
- 290
|
||||
- 330
|
||||
- 310
|
||||
- name: Video Advertising
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 150
|
||||
- 232
|
||||
- 201
|
||||
- 154
|
||||
- 190
|
||||
- 330
|
||||
- 410
|
||||
- name: Direct View
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 320
|
||||
- 332
|
||||
- 301
|
||||
- 334
|
||||
- 390
|
||||
- 330
|
||||
- 320
|
||||
- name: Search Engine
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 820
|
||||
- 932
|
||||
- 901
|
||||
- 934
|
||||
- 1290
|
||||
- 1330
|
||||
- 1320
|
||||
{{</* /echarts */>}}
|
||||
```
|
||||
|
||||
The same in `TOML` format:
|
||||
|
||||
```toml
|
||||
{{</* echarts */>}}
|
||||
[title]
|
||||
text = "Summary Line Chart"
|
||||
top = "2%"
|
||||
left = "center"
|
||||
|
||||
[tooltip]
|
||||
trigger = "axis"
|
||||
|
||||
[legend]
|
||||
data = [
|
||||
"Email Marketing",
|
||||
"Affiliate Advertising",
|
||||
"Video Advertising",
|
||||
"Direct View",
|
||||
"Search Engine"
|
||||
]
|
||||
top = "10%"
|
||||
|
||||
[grid]
|
||||
left = "5%"
|
||||
right = "5%"
|
||||
bottom = "5%"
|
||||
top = "20%"
|
||||
containLabel = true
|
||||
|
||||
[toolbox]
|
||||
[toolbox.feature]
|
||||
[toolbox.feature.saveAsImage]
|
||||
title = "Save as Image"
|
||||
|
||||
[xAxis]
|
||||
type = "category"
|
||||
boundaryGap = false
|
||||
data = [
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
"Sunday"
|
||||
]
|
||||
|
||||
[yAxis]
|
||||
type = "value"
|
||||
|
||||
[[series]]
|
||||
name = "Email Marketing"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
120.0,
|
||||
132.0,
|
||||
101.0,
|
||||
134.0,
|
||||
90.0,
|
||||
230.0,
|
||||
210.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Affiliate Advertising"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
220.0,
|
||||
182.0,
|
||||
191.0,
|
||||
234.0,
|
||||
290.0,
|
||||
330.0,
|
||||
310.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Video Advertising"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
150.0,
|
||||
232.0,
|
||||
201.0,
|
||||
154.0,
|
||||
190.0,
|
||||
330.0,
|
||||
410.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Direct View"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
320.0,
|
||||
332.0,
|
||||
301.0,
|
||||
334.0,
|
||||
390.0,
|
||||
330.0,
|
||||
320.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Search Engine"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
820.0,
|
||||
932.0,
|
||||
901.0,
|
||||
934.0,
|
||||
1290.0,
|
||||
1330.0,
|
||||
1320.0
|
||||
]
|
||||
{{</* /echarts */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< echarts >}}
|
||||
{
|
||||
"title": {
|
||||
"text": "Summary Line Chart",
|
||||
"top": "2%",
|
||||
"left": "center"
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"legend": {
|
||||
"data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
|
||||
"top": "10%"
|
||||
},
|
||||
"grid": {
|
||||
"left": "5%",
|
||||
"right": "5%",
|
||||
"bottom": "5%",
|
||||
"top": "20%",
|
||||
"containLabel": true
|
||||
},
|
||||
"toolbox": {
|
||||
"feature": {
|
||||
"saveAsImage": {
|
||||
"title": "Save as Image"
|
||||
}
|
||||
}
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"boundaryGap": false,
|
||||
"data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "Email Marketing",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
"name": "Affiliate Advertising",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
"name": "Video Advertising",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
"name": "Direct View",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
"name": "Search Engine",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
{{< /echarts >}}
|
||||
|
||||
The `echarts` shortcode has also the following named parameters:
|
||||
|
||||
* **width** *[optional]* (**first** positional parameter)
|
||||
|
||||
{{< version 0.2.0 >}} Width of the data visualization, default value is `100%`.
|
||||
|
||||
* **height** *[optional]* (**second** positional parameter)
|
||||
|
||||
{{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
|
||||
|
|
@ -0,0 +1,414 @@
|
|||
---
|
||||
weight: 6
|
||||
title: "主题文档 - echarts Shortcode"
|
||||
date: 2020-03-03T14:29:59+08:00
|
||||
lastmod: 2020-03-03T14:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "echarts shortcode 使用 ECharts 库提供数据可视化的功能."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
|
||||
toc:
|
||||
enable: false
|
||||
code:
|
||||
maxShownLines: 70
|
||||
---
|
||||
|
||||
`echarts` shortcode 使用 [ECharts](https://echarts.apache.org/) 库提供数据可视化的功能.
|
||||
|
||||
<!--more-->
|
||||
|
||||
**ECharts** 是一个帮助你生成交互式数据可视化的库.
|
||||
|
||||
ECharts 提供了常规的 [折线图](https://echarts.apache.org/zh/option.html#series-line), [柱状图](https://echarts.apache.org/zh/option.html#series-line), [散点图](https://echarts.apache.org/zh/option.html#series-scatter), [饼图](https://echarts.apache.org/zh/option.html#series-pie), [K线图](https://echarts.apache.org/zh/option.html#series-candlestick), 用于统计的 [盒形图](https://echarts.apache.org/zh/option.html#series-boxplot), 用于地理数据可视化的 [地图](https://echarts.apache.org/zh/option.html#series-map), [热力图](https://echarts.apache.org/zh/option.html#series-heatmap), [线图](https://echarts.apache.org/zh/option.html#series-lines), 用于关系数据可视化的 [关系图](https://echarts.apache.org/zh/option.html#series-graph), [treemap](https://echarts.apache.org/zh/option.html#series-treemap), [旭日图](https://echarts.apache.org/zh/option.html#series-sunburst), 多维数据可视化的 [平行坐标](https://echarts.apache.org/zh/option.html#series-parallel), 还有用于 BI 的 [漏斗图](https://echarts.apache.org/zh/option.html#series-funnel), [仪表盘](https://echarts.apache.org/zh/option.html#series-gauge), 并且支持图与图之间的混搭.
|
||||
|
||||
只需在 `echarts` shortcode 中以 `JSON`/`YAML`/`TOML`格式插入 ECharts 选项即可.
|
||||
|
||||
一个 `JSON` 格式的 `echarts` 示例:
|
||||
|
||||
```json
|
||||
{{</* echarts */>}}
|
||||
{
|
||||
"title": {
|
||||
"text": "折线统计图",
|
||||
"top": "2%",
|
||||
"left": "center"
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"legend": {
|
||||
"data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
|
||||
"top": "10%"
|
||||
},
|
||||
"grid": {
|
||||
"left": "5%",
|
||||
"right": "5%",
|
||||
"bottom": "5%",
|
||||
"top": "20%",
|
||||
"containLabel": true
|
||||
},
|
||||
"toolbox": {
|
||||
"feature": {
|
||||
"saveAsImage": {
|
||||
"title": "保存为图片"
|
||||
}
|
||||
}
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"boundaryGap": false,
|
||||
"data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "邮件营销",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
"name": "联盟广告",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
"name": "视频广告",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
"name": "直接访问",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
"name": "搜索引擎",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
{{</* /echarts */>}}
|
||||
```
|
||||
|
||||
一个 `YAML` 格式的 `echarts` 示例:
|
||||
|
||||
```yaml
|
||||
{{</* echarts */>}}
|
||||
title:
|
||||
text: 折线统计图
|
||||
top: 2%
|
||||
left: center
|
||||
tooltip:
|
||||
trigger: axis
|
||||
legend:
|
||||
data:
|
||||
- 邮件营销
|
||||
- 联盟广告
|
||||
- 视频广告
|
||||
- 直接访问
|
||||
- 搜索引擎
|
||||
top: 10%
|
||||
grid:
|
||||
left: 5%
|
||||
right: 5%
|
||||
bottom: 5%
|
||||
top: 20%
|
||||
containLabel: true
|
||||
toolbox:
|
||||
feature:
|
||||
saveAsImage:
|
||||
title: 保存为图片
|
||||
xAxis:
|
||||
type: category
|
||||
boundaryGap: false
|
||||
data:
|
||||
- 周一
|
||||
- 周二
|
||||
- 周三
|
||||
- 周四
|
||||
- 周五
|
||||
- 周六
|
||||
- 周日
|
||||
yAxis:
|
||||
type: value
|
||||
series:
|
||||
- name: 邮件营销
|
||||
type: line
|
||||
stack: 总量
|
||||
data:
|
||||
- 120
|
||||
- 132
|
||||
- 101
|
||||
- 134
|
||||
- 90
|
||||
- 230
|
||||
- 210
|
||||
- name: 联盟广告
|
||||
type: line
|
||||
stack: 总量
|
||||
data:
|
||||
- 220
|
||||
- 182
|
||||
- 191
|
||||
- 234
|
||||
- 290
|
||||
- 330
|
||||
- 310
|
||||
- name: 视频广告
|
||||
type: line
|
||||
stack: 总量
|
||||
data:
|
||||
- 150
|
||||
- 232
|
||||
- 201
|
||||
- 154
|
||||
- 190
|
||||
- 330
|
||||
- 410
|
||||
- name: 直接访问
|
||||
type: line
|
||||
stack: 总量
|
||||
data:
|
||||
- 320
|
||||
- 332
|
||||
- 301
|
||||
- 334
|
||||
- 390
|
||||
- 330
|
||||
- 320
|
||||
- name: 搜索引擎
|
||||
type: line
|
||||
stack: 总量
|
||||
data:
|
||||
- 820
|
||||
- 932
|
||||
- 901
|
||||
- 934
|
||||
- 1290
|
||||
- 1330
|
||||
- 1320
|
||||
{{</* /echarts */>}}
|
||||
```
|
||||
|
||||
一个 `TOML` 格式的 `echarts` 示例:
|
||||
|
||||
```toml
|
||||
{{</* echarts */>}}
|
||||
[title]
|
||||
text = "折线统计图"
|
||||
top = "2%"
|
||||
left = "center"
|
||||
|
||||
[tooltip]
|
||||
trigger = "axis"
|
||||
|
||||
[legend]
|
||||
data = [
|
||||
"邮件营销",
|
||||
"联盟广告",
|
||||
"视频广告",
|
||||
"直接访问",
|
||||
"搜索引擎"
|
||||
]
|
||||
top = "10%"
|
||||
|
||||
[grid]
|
||||
left = "5%"
|
||||
right = "5%"
|
||||
bottom = "5%"
|
||||
top = "20%"
|
||||
containLabel = true
|
||||
|
||||
[toolbox]
|
||||
[toolbox.feature]
|
||||
[toolbox.feature.saveAsImage]
|
||||
title = "保存为图片"
|
||||
|
||||
[xAxis]
|
||||
type = "category"
|
||||
boundaryGap = false
|
||||
data = [
|
||||
"周一",
|
||||
"周二",
|
||||
"周三",
|
||||
"周四",
|
||||
"周五",
|
||||
"周六",
|
||||
"周日"
|
||||
]
|
||||
|
||||
[yAxis]
|
||||
type = "value"
|
||||
|
||||
[[series]]
|
||||
name = "邮件营销"
|
||||
type = "line"
|
||||
stack = "总量"
|
||||
data = [
|
||||
120.0,
|
||||
132.0,
|
||||
101.0,
|
||||
134.0,
|
||||
90.0,
|
||||
230.0,
|
||||
210.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "联盟广告"
|
||||
type = "line"
|
||||
stack = "总量"
|
||||
data = [
|
||||
220.0,
|
||||
182.0,
|
||||
191.0,
|
||||
234.0,
|
||||
290.0,
|
||||
330.0,
|
||||
310.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "视频广告"
|
||||
type = "line"
|
||||
stack = "总量"
|
||||
data = [
|
||||
150.0,
|
||||
232.0,
|
||||
201.0,
|
||||
154.0,
|
||||
190.0,
|
||||
330.0,
|
||||
410.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "直接访问"
|
||||
type = "line"
|
||||
stack = "总量"
|
||||
data = [
|
||||
320.0,
|
||||
332.0,
|
||||
301.0,
|
||||
334.0,
|
||||
390.0,
|
||||
330.0,
|
||||
320.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "搜索引擎"
|
||||
type = "line"
|
||||
stack = "总量"
|
||||
data = [
|
||||
820.0,
|
||||
932.0,
|
||||
901.0,
|
||||
934.0,
|
||||
1290.0,
|
||||
1330.0,
|
||||
1320.0
|
||||
]
|
||||
{{</* /echarts */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< echarts >}}
|
||||
{
|
||||
"title": {
|
||||
"text": "折线统计图",
|
||||
"top": "2%",
|
||||
"left": "center"
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"legend": {
|
||||
"data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
|
||||
"top": "10%"
|
||||
},
|
||||
"grid": {
|
||||
"left": "5%",
|
||||
"right": "5%",
|
||||
"bottom": "5%",
|
||||
"top": "20%",
|
||||
"containLabel": true
|
||||
},
|
||||
"toolbox": {
|
||||
"feature": {
|
||||
"saveAsImage": {
|
||||
"title": "保存为图片"
|
||||
}
|
||||
}
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"boundaryGap": false,
|
||||
"data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "邮件营销",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
"name": "联盟广告",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
"name": "视频广告",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
"name": "直接访问",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
"name": "搜索引擎",
|
||||
"type": "line",
|
||||
"stack": "总量",
|
||||
"data": [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
{{< /echarts >}}
|
||||
|
||||
`echarts` shortcode 还有以下命名参数:
|
||||
|
||||
* **width** *[可选]* (**第一个**位置参数)
|
||||
|
||||
{{< version 0.2.0 >}} 数据可视化的宽度, 默认值是 `100%`.
|
||||
|
||||
* **height** *[可选]* (**第二个**位置参数)
|
||||
|
||||
{{< version 0.2.0 >}} 数据可视化的高度, 默认值是 `30rem`.
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
|
|
@ -0,0 +1,104 @@
|
|||
---
|
||||
weight: 7
|
||||
title: "Theme Documentation - mapbox Shortcode"
|
||||
date: 2020-03-03T13:29:41+08:00
|
||||
lastmod: 2020-03-03T13:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
|
||||
toc:
|
||||
enable: false
|
||||
---
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
|
||||
|
||||
<!--more-->
|
||||
|
||||
**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 simple `mapbox` input:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox 121.485 31.233 12 */>}}
|
||||
Or
|
||||
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
Example `mapbox` input with the custom style:
|
||||
|
||||
```markdown
|
||||
{{</* 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 -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
---
|
||||
weight: 7
|
||||
title: "主题文档 - mapbox Shortcode"
|
||||
date: 2020-03-03T13:29:59+08:00
|
||||
lastmod: 2020-03-03T13:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "mapbox shortcode 使用 Mapbox GL JS 库提供互动式地图的功能."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
|
||||
toc:
|
||||
enable: false
|
||||
mapbox:
|
||||
lightStyle: mapbox://styles/mapbox/light-zh-v1?optimize=true
|
||||
darkStyle: mapbox://styles/mapbox/dark-zh-v1?optimize=true
|
||||
---
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
`mapbox` shortcode 使用 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 库提供互动式地图的功能.
|
||||
|
||||
<!--more-->
|
||||
|
||||
**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 121.485 31.233 12 >}}
|
||||
|
||||
一个带有自定义样式的 `mapbox` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" */>}}
|
||||
或者
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1?optimize=true" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
|
|
@ -0,0 +1,361 @@
|
|||
---
|
||||
weight: 5
|
||||
title: "Theme Documentation - mermaid Shortcode"
|
||||
date: 2020-03-03T15:29:41+08:00
|
||||
lastmod: 2020-03-03T15:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The mermaid shortcode supports diagrams in Hugo with Mermaid library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
---
|
||||
|
||||
{{< version 0.2.11 changed >}}
|
||||
|
||||
The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
|
||||
|
||||
<!--more-->
|
||||
|
||||
**Mermaid** 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}
|
||||
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail...
|
||||
John-->Alice: Great!
|
||||
John->Bob: How about you?
|
||||
Bob-->John: Jolly good!
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail...
|
||||
John-->Alice: Great!
|
||||
John->Bob: How about you?
|
||||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Gantt {#gantt}
|
||||
|
||||
Example **Gantt** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
|
||||
## State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Entity Relationship Diagram {#entity-relationship-diagram}
|
||||
|
||||
Example **entity-relationship diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
{{< /mermaid >}}
|
||||
|
||||
## User Journey {#user-journey}
|
||||
|
||||
Example **user journey** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Pie Chart {#pie-chart}
|
||||
|
||||
Example **pie chart** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
pie
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
pie
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Requirement Diagram {#requirement-diagram}
|
||||
|
||||
Example **requirement diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
{{< /mermaid >}}
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
---
|
||||
weight: 5
|
||||
title: "主题文档 - mermaid Shortcode"
|
||||
date: 2020-03-03T15:29:59+08:00
|
||||
lastmod: 2020-03-03T15:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "mermaid shortcode 使用 Mermaid 库提供绘制图表和流程图的功能."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
---
|
||||
|
||||
{{< version 0.2.11 changed >}}
|
||||
|
||||
`mermaid` shortcode 使用 [Mermaid](https://mermaidjs.github.io/) 库提供绘制图表和流程图的功能.
|
||||
|
||||
<!--more-->
|
||||
|
||||
[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中绘制图表和流程图的库, 类似 Markdown 的语法.
|
||||
|
||||
只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
|
||||
|
||||
## 流程图 {#flowchart}
|
||||
|
||||
一个 **流程图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
## 时序图 {#sequence-diagram}
|
||||
|
||||
一个 **时序图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail...
|
||||
John-->Alice: Great!
|
||||
John->Bob: How about you?
|
||||
Bob-->John: Jolly good!
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail...
|
||||
John-->Alice: Great!
|
||||
John->Bob: How about you?
|
||||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
## 甘特图 {#gantt}
|
||||
|
||||
一个 **甘特图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
{{< /mermaid >}}
|
||||
|
||||
## 类图 {#class-diagram}
|
||||
|
||||
一个 **类图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
|
||||
## 状态图 {#state-diagram}
|
||||
|
||||
一个 **状态图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Git 图 {#git-graph}
|
||||
|
||||
一个 **Git 图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
{{< /mermaid >}}
|
||||
|
||||
## 实体关系图 {#entity-relationship-diagram}
|
||||
|
||||
一个 **实体关系图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
{{< /mermaid >}}
|
||||
|
||||
## 用户体验旅程图 {#user-journey}
|
||||
|
||||
一个 **用户体验旅程图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
{{< /mermaid >}}
|
||||
|
||||
## 饼图 {#pie}
|
||||
|
||||
一个 **饼图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
pie
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
pie
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
## 依赖图 {#requirement-diagram}
|
||||
|
||||
一个 **依赖图** `mermaid` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mermaid >}}
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
{{< /mermaid >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
|
|
@ -0,0 +1,160 @@
|
|||
---
|
||||
weight: 8
|
||||
title: "Theme Documentation - music Shortcode"
|
||||
date: 2020-03-03T12:29:41+08:00
|
||||
lastmod: 2020-03-03T12:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The music shortcode embeds a responsive music player based on APlayer and MetingJS library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
---
|
||||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
|
||||
|
||||
<!--more-->
|
||||
|
||||
There are three ways to use it the `music` shortcode.
|
||||
|
||||
## 1 Custom Music URL {#custom-music-url}
|
||||
|
||||
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
* **server** *[required]*
|
||||
|
||||
URL of the custom music.
|
||||
|
||||
* **name** *[optional]*
|
||||
|
||||
Name of the custom music.
|
||||
|
||||
* **artist** *[optional]*
|
||||
|
||||
Artist of the custom music.
|
||||
|
||||
* **cover** *[required]*
|
||||
|
||||
URL of the custom music cover.
|
||||
|
||||
Example `music` input by custom music URL:
|
||||
|
||||
```markdown
|
||||
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
|
||||
|
||||
## 2 Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
* **auto** *[required]* (**first** positional parameter)
|
||||
|
||||
URL of the music platform URL for automatic identification,
|
||||
which supports `netease`, `tencent` and `xiami` music platform.
|
||||
|
||||
Example `music` input by music platform URL automatic identification:
|
||||
|
||||
```markdown
|
||||
{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
|
||||
Or
|
||||
{{</* music "https://music.163.com/#/playlist?id=60198" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
## 3 Custom Server, Type and ID {#custom-server}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
* **server** *[required]* (**first** positional parameter)
|
||||
|
||||
[`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
|
||||
|
||||
Music platform.
|
||||
|
||||
* **type** *[required]* (**second** positional parameter)
|
||||
|
||||
[`song`, `playlist`, `album`, `search`, `artist`]
|
||||
|
||||
Type of the music.
|
||||
|
||||
* **id** *[required]* (**third** positional parameter)
|
||||
|
||||
Song ID, or playlist ID, or album ID, or search keyword, or artist ID.
|
||||
|
||||
Example `music` input by custom music platform:
|
||||
|
||||
```markdown
|
||||
{{</* music server="netease" type="song" id="1868553" */>}}
|
||||
Or
|
||||
{{</* music netease song 1868553 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
## 4 Other Parameters {#other-parameters}
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
* **theme** *[optional]*
|
||||
|
||||
{{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
|
||||
|
||||
* **fixed** *[optional]*
|
||||
|
||||
Whether to enable fixed mode, default value is `false`.
|
||||
|
||||
* **mini** *[optional]*
|
||||
|
||||
Whether to enable mini mode, default value is `false`.
|
||||
|
||||
* **autoplay** *[optional]*
|
||||
|
||||
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 value is `0.7`.
|
||||
|
||||
* **mutex** *[optional]*
|
||||
|
||||
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:
|
||||
|
||||
* **loop** *[optional]*
|
||||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
Loop mode of the music list, default value is `none`.
|
||||
|
||||
* **order** *[optional]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
Play order of the music list, default value is `list`.
|
||||
|
||||
* **list-folded** *[optional]*
|
||||
|
||||
Whether the music list should be folded at first, default value is `false`.
|
||||
|
||||
* **list-max-height** *[optional]*
|
||||
|
||||
Max height of the music list, default value is `340px`.
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
---
|
||||
weight: 8
|
||||
title: "主题文档 - music Shortcode"
|
||||
date: 2020-03-03T12:29:59+08:00
|
||||
lastmod: 2020-03-03T12:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "music shortcode 基于 APlayer 和 MetingJS 库提供了一个内嵌的响应式音乐播放器."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
---
|
||||
|
||||
`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 库提供了一个内嵌的响应式音乐播放器.
|
||||
|
||||
<!--more-->
|
||||
|
||||
有三种方式使用 `music` shortcode.
|
||||
|
||||
## 1 自定义音乐 URL {#custom-music-url}
|
||||
|
||||
{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
|
||||
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐 URL:
|
||||
|
||||
* **server** *[必需]*
|
||||
|
||||
音乐的链接.
|
||||
|
||||
* **type** *[可选]*
|
||||
|
||||
音乐的名称.
|
||||
|
||||
* **artist** *[可选]*
|
||||
|
||||
音乐的创作者.
|
||||
|
||||
* **cover** *[可选]*
|
||||
|
||||
音乐的封面链接.
|
||||
|
||||
一个使用自定义音乐 URL 的 `music` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
|
||||
|
||||
## 2 音乐平台 URL 的自动识别 {#automatic-identification}
|
||||
|
||||
`music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:
|
||||
|
||||
* **auto** *[必需]]* (**第一个**位置参数)
|
||||
|
||||
用来自动识别的音乐平台 URL, 支持 `netease`, `tencent` 和 `xiami` 平台.
|
||||
|
||||
一个使用音乐平台 URL 的自动识别的 `music` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
|
||||
或者
|
||||
{{</* music "https://music.163.com/#/playlist?id=60198" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
## 3 自定义音乐平台, 类型和 ID {#custom-server}
|
||||
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐平台:
|
||||
|
||||
* **server** *[必需]* (**第一个**位置参数)
|
||||
|
||||
[`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
|
||||
|
||||
音乐平台.
|
||||
|
||||
* **type** *[必需]* (**第二个**位置参数)
|
||||
|
||||
[`song`, `playlist`, `album`, `search`, `artist`]
|
||||
|
||||
音乐类型.
|
||||
|
||||
* **id** *[必需]* (**第三个**位置参数)
|
||||
|
||||
歌曲 ID, 或者播放列表 ID, 或者专辑 ID, 或者搜索关键词, 或者创作者 ID.
|
||||
|
||||
一个使用自定义音乐平台的 `music` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* music server="netease" type="song" id="1868553" */>}}
|
||||
或者
|
||||
{{</* music netease song 1868553 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
## 4 其它参数 {#other-parameters}
|
||||
|
||||
`music` shortcode 有一些可以应用于以上三种方式的其它命名参数:
|
||||
|
||||
* **theme** *[可选]*
|
||||
|
||||
{{< version 0.2.0 changed >}} 音乐播放器的主题色, 默认值是 `#448aff`.
|
||||
|
||||
* **fixed** *[可选]*
|
||||
|
||||
是否开启固定模式, 默认值是 `false`.
|
||||
|
||||
* **mini** *[可选]*
|
||||
|
||||
是否开启迷你模式, 默认值是 `false`.
|
||||
|
||||
* **autoplay** *[可选]*
|
||||
|
||||
是否自动播放音乐, 默认值是 `false`.
|
||||
|
||||
* **volume** *[可选]*
|
||||
|
||||
第一次打开播放器时的默认音量, 会被保存在浏览器缓存中, 默认值是 `0.7`.
|
||||
|
||||
* **mutex** *[可选]*
|
||||
|
||||
是否自动暂停其它播放器, 默认值是 `true`.
|
||||
|
||||
`music` shortcode 还有一些只适用于音乐列表方式的其它命名参数:
|
||||
|
||||
* **loop** *[可选]*
|
||||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
音乐列表的循环模式, 默认值是 `none`.
|
||||
|
||||
* **order** *[可选]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
音乐列表的播放顺序, 默认值是 `list`.
|
||||
|
||||
* **list-folded** *[可选]*
|
||||
|
||||
初次打开的时候音乐列表是否折叠, 默认值是 `false`.
|
||||
|
||||
* **list-max-height** *[可选]*
|
||||
|
||||
音乐列表的最大高度, 默认值是 `340px`.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
|
|
@ -0,0 +1,114 @@
|
|||
---
|
||||
weight: 10
|
||||
title: "Theme Documentation - typeit Shortcode"
|
||||
date: 2020-03-03T10:29:41+08:00
|
||||
lastmod: 2020-03-03T10:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The typeit shortcode provides typing animation based on TypeIt library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
---
|
||||
|
||||
The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/) library.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Just insert your content in the `typeit` shortcode and that’s it.
|
||||
|
||||
## 1 Simple Content {#simple-content}
|
||||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
Example `typeit` input:
|
||||
|
||||
```markdown
|
||||
{{</* typeit */>}}
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< typeit >}}
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
Alternatively, you can use custom **HTML tags**.
|
||||
|
||||
Example `typeit` input with `h4` tag:
|
||||
|
||||
```markdown
|
||||
{{</* typeit tag=h4 */>}}
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< typeit tag=h4 >}}
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
## 2 Code Content {#code-content}
|
||||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
Example `typeit` input with `code`:
|
||||
|
||||
```markdown
|
||||
{{</* typeit code=java */>}}
|
||||
public class HelloWorld {
|
||||
public static void main(String []args) {
|
||||
System.out.println("Hello World");
|
||||
}
|
||||
}
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< typeit code=java >}}
|
||||
public class HelloWorld {
|
||||
public static void main(String []args) {
|
||||
System.out.println("Hello World");
|
||||
}
|
||||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
## 3 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.
|
||||
|
||||
A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence.
|
||||
|
||||
Example `typeit` input with `group`:
|
||||
|
||||
```markdown
|
||||
{{</* typeit group=paragraph */>}}
|
||||
**First** this paragraph begins
|
||||
{{</* /typeit */>}}
|
||||
|
||||
{{</* typeit group=paragraph */>}}
|
||||
**Then** this paragraph begins
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< typeit group=paragraph >}}
|
||||
**First** this paragraph begins
|
||||
{{< /typeit >}}
|
||||
|
||||
{{< typeit group=paragraph >}}
|
||||
**Then** this paragraph begins
|
||||
{{< /typeit >}}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
---
|
||||
weight: 10
|
||||
title: "主题文档 - typeit Shortcode"
|
||||
date: 2020-03-03T10:29:59+08:00
|
||||
lastmod: 2020-03-03T10:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "typeit shortcode 基于 TypeIt 库提供了打字动画."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
---
|
||||
|
||||
`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 库提供了打字动画.
|
||||
|
||||
<!--more-->
|
||||
|
||||
只需将你需要打字动画的内容插入 `typeit` shortcode 中即可.
|
||||
|
||||
## 1 简单内容 {#simple-content}
|
||||
|
||||
允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等...
|
||||
|
||||
一个 `typeit` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* typeit */>}}
|
||||
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< typeit >}}
|
||||
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
|
||||
{{< /typeit >}}
|
||||
|
||||
另外, 你也可以自定义 **HTML 标签**.
|
||||
|
||||
一个带有 `h4` 标签的 `typeit` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* typeit tag=h4 */>}}
|
||||
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< typeit tag=h4 >}}
|
||||
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
|
||||
{{< /typeit >}}
|
||||
|
||||
## 2 代码内容 {#code-content}
|
||||
|
||||
代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮.
|
||||
|
||||
一个带有 `code` 参数的 `typeit` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* typeit code=java */>}}
|
||||
public class HelloWorld {
|
||||
public static void main(String []args) {
|
||||
System.out.println("Hello World");
|
||||
}
|
||||
}
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< typeit code=java >}}
|
||||
public class HelloWorld {
|
||||
public static void main(String []args) {
|
||||
System.out.println("Hello World");
|
||||
}
|
||||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
## 3 分组内容 {#code-content}
|
||||
|
||||
默认情况下, 所有打字动画都是同时开始的.
|
||||
但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画.
|
||||
|
||||
一组具有相同 `group` 参数值的 `typeit` 内容将按顺序开始打字动画.
|
||||
|
||||
一个带有 `group` 参数的 `typeit` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* typeit group=paragraph */>}}
|
||||
**首先**, 这个段落开始
|
||||
{{</* /typeit */>}}
|
||||
|
||||
{{</* typeit group=paragraph */>}}
|
||||
**然后**, 这个段落开始
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< typeit group=paragraph >}}
|
||||
**首先**, 这个段落开始
|
||||
{{< /typeit >}}
|
||||
|
||||
{{< typeit group=paragraph >}}
|
||||
**然后**, 这个段落开始
|
||||
{{< /typeit >}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue