mirror of
https://github.com/dillonzq/LoveIt.git
synced 2025-04-27 06:06:20 +02:00
feat(shortcode): add mapbox shortcode (#190)
* feat(shortcode): add mapbox shortcode * docs: split shortcodes into built-in shortcodes and extended shortcodes * docs(shortcodes): add docs for mapbox shortcode * docs(shortcodes): fix an error in shortcodes docs
This commit is contained in:
Dillon
GitHub
parent
a9850f7df3
commit
aed8734d83
52 changed files with 1713 additions and 726 deletions
README.mdREADME.zh-cn.md
archetypes
assets
css
_core
_page
_partial/_single
js
lib
exampleSite
config.toml
content
about.en.mdabout.fr.mdabout.zh-cn.md
posts
basic-markdown-syntax.en.mdbasic-markdown-syntax.fr.mdbasic-markdown-syntax.zh-cn.mdemoji-support.en.mdemoji-support.fr.mdemoji-support.zh-cn.mdtheme-documentation-basics.en.mdtheme-documentation-basics.fr.mdtheme-documentation-basics.zh-cn.mdtheme-documentation-built-in-shortcodes.en.mdtheme-documentation-built-in-shortcodes.fr.mdtheme-documentation-built-in-shortcodes.zh-cn.mdtheme-documentation-content.en.mdtheme-documentation-content.fr.mdtheme-documentation-content.zh-cn.mdtheme-documentation-extended-shortcodes.en.mdtheme-documentation-extended-shortcodes.fr.mdtheme-documentation-extended-shortcodes.zh-cn.md
static/images
theme-documentation-built-in-shortcodes
theme-documentation-extended-shortcodes
layouts
resources/_gen/assets/scss/css
src/js
|
|
@ -34,9 +34,11 @@ Compared to the original LeaveIt theme and the KeepIt theme, the LoveIt theme ha
|
|||
* More **social links**, **share sites** and **comment system**
|
||||
* Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
|
||||
* Extended markdown syntax for **ruby annotation**
|
||||
* Extended markdown syntax for **fraction**
|
||||
* **Mathematical formula** supported by [KaTeX](https://katex.org/)
|
||||
* **Diagram syntax** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
|
||||
* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
|
||||
* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* Embedded **music player** supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* **Bilibili** player supported
|
||||
* Kinds of **admonitions** shortcode supported
|
||||
|
|
@ -91,9 +93,11 @@ I hope you will LoveIt ❤️!
|
|||
* **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
|
||||
* Extended markdown syntax for **ruby annotation**
|
||||
* Extended markdown syntax for **fraction**
|
||||
* **Mathematical formula** supported by [KaTeX](https://katex.org/)
|
||||
* **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
|
||||
* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
|
||||
* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* **Bilibili player** shortcode
|
||||
* Kinds of **admonitions** shortcode
|
||||
|
|
@ -131,6 +135,7 @@ Thanks to the authors of following resources included in the theme:
|
|||
* [KaTeX](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
|
|
|
|||
|
|
@ -27,15 +27,17 @@
|
|||
* 自定义**CSS 样式**
|
||||
* 焕然一新的**主页**，已经兼容最新版 Hugo
|
||||
* 大量的**样式细节调整**，包括颜色、字体大小、边距、代码预览样式
|
||||
* 可读性更强的**暗黑模式**
|
||||
* 可读性更强的**深色模式**
|
||||
* 一些美观的 **CSS 动画**
|
||||
* 易用和自动展开的**文章目录**
|
||||
* 支持更多的**社交链接**、**网站分享**和**评论系统**
|
||||
* 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
|
||||
* 支持**上标注释**的扩展 Markdown 语法
|
||||
* 支持**分数**的扩展 Markdown 语法
|
||||
* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
|
||||
* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表**生成功能
|
||||
* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化**生成功能
|
||||
* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** 地图显示功能
|
||||
* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌**音乐播放器**
|
||||
* 支持内嵌 **Bilibili** 视频
|
||||
* 支持多种**注释**的 shortcode
|
||||
|
|
@ -61,7 +63,7 @@
|
|||
### 外观和布局
|
||||
|
||||
* **响应式**布局
|
||||
* **夜晚/白天** 主题模式
|
||||
* **浅色/深色** 主题模式
|
||||
* 全局一致的**设计语言**
|
||||
* 支持**分页**
|
||||
* 易用和自动展开的**文章目录**
|
||||
|
|
@ -86,9 +88,11 @@
|
|||
* 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
|
||||
* 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
|
||||
* 支持**上标注释**的扩展 Markdown 语法
|
||||
* 支持**分数**的扩展 Markdown 语法
|
||||
* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
|
||||
* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
|
||||
* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
|
||||
* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
|
||||
* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
|
||||
* 支持 **Bilibili 视频** shortcode
|
||||
* 支持多种**注释**的 shortcode
|
||||
|
|
@ -126,6 +130,7 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
|
|||
* [KaTeX](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
|
|
|
|||
|
|
@ -19,6 +19,14 @@ featuredImagePreview: ""
|
|||
toc: false
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
background-color: $global-background-color;
|
||||
color: $global-font-color;
|
||||
overflow-wrap: break-word;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
.featured-image {
|
||||
padding-top: .6rem;
|
||||
margin: .5rem 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
|
|
@ -91,8 +91,14 @@
|
|||
.dark-theme & {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
& > .header-mark::before {
|
||||
> h2,
|
||||
> h3,
|
||||
> h4,
|
||||
> h5,
|
||||
> h6 {
|
||||
> .header-mark::before {
|
||||
content: "|";
|
||||
margin-right: .3125rem;
|
||||
color: $single-link-color;
|
||||
|
|
@ -103,12 +109,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
h2 > .header-mark::before {
|
||||
> h2 > .header-mark::before {
|
||||
content: "#";
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -136,6 +141,7 @@
|
|||
}
|
||||
|
||||
ul {
|
||||
margin: .5rem 0;
|
||||
padding-left: 2rem;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
|
@ -278,12 +284,18 @@
|
|||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: .25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import "../_partial/_single/code";
|
||||
@import "../_partial/_single/instagram";
|
||||
@import "../_partial/_single/admonition";
|
||||
@import "../_partial/_single/echarts";
|
||||
@import "../_partial/_single/mapbox";
|
||||
@import "../_partial/_single/music";
|
||||
@import "../_partial/_single/bilibili";
|
||||
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
|
|||
}
|
||||
|
||||
.highlight > .chroma {
|
||||
margin: 1rem 0;
|
||||
margin: .5rem 0;
|
||||
|
||||
code, pre {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.echarts {
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
margin: 3% auto;
|
||||
margin: .5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
4
assets/css/_partial/_single/_mapbox.scss
Normal file
4
assets/css/_partial/_single/_mapbox.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.mapbox {
|
||||
margin: .5rem 0;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
3
assets/css/_partial/_single/_music.scss
Normal file
3
assets/css/_partial/_single/_music.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
meting-js {
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
#toc-static {
|
||||
display: none;
|
||||
padding-top: .8rem;
|
||||
margin: .8rem 0;
|
||||
|
||||
details {
|
||||
summary {
|
||||
|
|
|
|||
2
assets/js/theme.min.js
vendored
2
assets/js/theme.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -11,6 +11,7 @@ mermaid@8.4.8 https://github.com/knsv/mermaid
|
|||
aplayer@1.10.1 https://github.com/MoePlayer/APlayer
|
||||
meting@2.0.1 https://github.com/metowolf/MetingJS
|
||||
echarts@4.6.0 https://echarts.apache.org/
|
||||
mapbox-gl@1.8.1 https://github.com/mapbox/mapbox-gl-js
|
||||
gitalk@1.6.2 https://github.com/gitalk/gitalk
|
||||
valine@1.3.10 https://valine.js.org/
|
||||
iconfont https://www.iconfont.cn/
|
||||
|
|
|
|||
260
assets/lib/mapbox-gl/mapbox-gl-language.js
Normal file
260
assets/lib/mapbox-gl/mapbox-gl-language.js
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
/**
|
||||
* Create a new [Mapbox GL JS plugin](https://www.mapbox.com/blog/build-mapbox-gl-js-plugins/) that
|
||||
* modifies the layers of the map style to use the 'text-field' that matches the browser language.
|
||||
* @constructor
|
||||
* @param {object} options - Options to configure the plugin.
|
||||
* @param {string[]} [options.supportedLanguages] - List of supported languages
|
||||
* @param {Function} [options.languageTransform] - Custom style transformation to apply
|
||||
* @param {RegExp} [options.languageField=/^\{name/] - RegExp to match if a text-field is a language field
|
||||
* @param {Function} [options.getLanguageField] - Given a language choose the field in the vector tiles
|
||||
* @param {string} [options.languageSource] - Name of the source that contains the different languages.
|
||||
* @param {string} [options.defaultLanguage] - Name of the default language to initialize style after loading.
|
||||
* @param {string[]} [options.excludedLayerIds] - Name of the layers that should be excluded from translation.
|
||||
*/
|
||||
function MapboxLanguage(options) {
|
||||
options = Object.assign({}, options);
|
||||
if (!(this instanceof MapboxLanguage)) {
|
||||
throw new Error('MapboxLanguage needs to be called with the new keyword');
|
||||
}
|
||||
|
||||
this.setLanguage = this.setLanguage.bind(this);
|
||||
this._initialStyleUpdate = this._initialStyleUpdate.bind(this);
|
||||
|
||||
this._defaultLanguage = options.defaultLanguage;
|
||||
this._isLanguageField = options.languageField || /^\{name/;
|
||||
this._getLanguageField = options.getLanguageField || function nameField(language) {
|
||||
return language === 'mul' ? '{name}' : '{name_' + language + '}';
|
||||
};
|
||||
this._languageSource = options.languageSource || null;
|
||||
this._languageTransform = options.languageTransform || function (style, language) {
|
||||
if (language === 'ar') {
|
||||
return noSpacing(style);
|
||||
} else {
|
||||
return standardSpacing(style);
|
||||
}
|
||||
};
|
||||
this._excludedLayerIds = options.excludedLayerIds || [];
|
||||
this.supportedLanguages = options.supportedLanguages || ['ar', 'en', 'es', 'fr', 'de', 'ja', 'ko', 'mul', 'pt', 'ru', 'zh'];
|
||||
}
|
||||
|
||||
function standardSpacing(style) {
|
||||
var changedLayers = style.layers.map(function (layer) {
|
||||
if (!(layer.layout || {})['text-field']) return layer;
|
||||
var spacing = 0;
|
||||
if (layer['source-layer'] === 'state_label') {
|
||||
spacing = 0.15;
|
||||
}
|
||||
if (layer['source-layer'] === 'marine_label') {
|
||||
if (/-lg/.test(layer.id)) {
|
||||
spacing = 0.25;
|
||||
}
|
||||
if (/-md/.test(layer.id)) {
|
||||
spacing = 0.15;
|
||||
}
|
||||
if (/-sm/.test(layer.id)) {
|
||||
spacing = 0.1;
|
||||
}
|
||||
}
|
||||
if (layer['source-layer'] === 'place_label') {
|
||||
if (/-suburb/.test(layer.id)) {
|
||||
spacing = 0.15;
|
||||
}
|
||||
if (/-neighbour/.test(layer.id)) {
|
||||
spacing = 0.1;
|
||||
}
|
||||
if (/-islet/.test(layer.id)) {
|
||||
spacing = 0.01;
|
||||
}
|
||||
}
|
||||
if (layer['source-layer'] === 'airport_label') {
|
||||
spacing = 0.01;
|
||||
}
|
||||
if (layer['source-layer'] === 'rail_station_label') {
|
||||
spacing = 0.01;
|
||||
}
|
||||
if (layer['source-layer'] === 'poi_label') {
|
||||
if (/-scalerank/.test(layer.id)) {
|
||||
spacing = 0.01;
|
||||
}
|
||||
}
|
||||
if (layer['source-layer'] === 'road_label') {
|
||||
if (/-label-/.test(layer.id)) {
|
||||
spacing = 0.01;
|
||||
}
|
||||
if (/-shields/.test(layer.id)) {
|
||||
spacing = 0.05;
|
||||
}
|
||||
}
|
||||
return Object.assign({}, layer, {
|
||||
layout: Object.assign({}, layer.layout, {
|
||||
'text-letter-spacing': spacing
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
return Object.assign({}, style, {
|
||||
layers: changedLayers
|
||||
});
|
||||
}
|
||||
|
||||
function noSpacing(style) {
|
||||
var changedLayers = style.layers.map(function (layer) {
|
||||
if (!(layer.layout || {})['text-field']) return layer;
|
||||
var spacing = 0;
|
||||
return Object.assign({}, layer, {
|
||||
layout: Object.assign({}, layer.layout, {
|
||||
'text-letter-spacing': spacing
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
return Object.assign({}, style, {
|
||||
layers: changedLayers
|
||||
});
|
||||
}
|
||||
|
||||
function isNameStringField(isLangField, property) {
|
||||
return typeof property === 'string' && isLangField.test(property);
|
||||
}
|
||||
|
||||
function isNameFunctionField(isLangField, property) {
|
||||
return property.stops && property.stops.filter(function (stop) {
|
||||
return isLangField.test(stop[1]);
|
||||
}).length > 0;
|
||||
}
|
||||
|
||||
function adaptPropertyLanguage(isLangField, property, languageFieldName) {
|
||||
if (isNameStringField(isLangField, property)) return languageFieldName;
|
||||
if (isNameFunctionField(isLangField, property)) {
|
||||
var newStops = property.stops.map(function (stop) {
|
||||
if (isLangField.test(stop[1])) {
|
||||
return [stop[0], languageFieldName];
|
||||
}
|
||||
return stop;
|
||||
});
|
||||
return Object.assign({}, property, {
|
||||
stops: newStops
|
||||
});
|
||||
}
|
||||
return property;
|
||||
}
|
||||
|
||||
function changeLayerTextProperty(isLangField, layer, languageFieldName, excludedLayerIds) {
|
||||
if (layer.layout && layer.layout['text-field'] && excludedLayerIds.indexOf(layer.id) === -1) {
|
||||
return Object.assign({}, layer, {
|
||||
layout: Object.assign({}, layer.layout, {
|
||||
'text-field': adaptPropertyLanguage(isLangField, layer.layout['text-field'], languageFieldName)
|
||||
})
|
||||
});
|
||||
}
|
||||
return layer;
|
||||
}
|
||||
|
||||
function findStreetsSource(style) {
|
||||
var sources = Object.keys(style.sources).filter(function (sourceName) {
|
||||
var source = style.sources[sourceName];
|
||||
return /mapbox-streets-v\d/.test(source.url);
|
||||
});
|
||||
return sources[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* Explicitly change the language for a style.
|
||||
* @param {object} style - Mapbox GL style to modify
|
||||
* @param {string} language - The language iso code
|
||||
* @returns {object} the modified style
|
||||
*/
|
||||
MapboxLanguage.prototype.setLanguage = function (style, language) {
|
||||
if (this.supportedLanguages.indexOf(language) < 0) throw new Error('Language ' + language + ' is not supported');
|
||||
var streetsSource = this._languageSource || findStreetsSource(style);
|
||||
if (!streetsSource) return style;
|
||||
|
||||
var field = this._getLanguageField(language);
|
||||
var isLangField = this._isLanguageField;
|
||||
var excludedLayerIds = this._excludedLayerIds;
|
||||
var changedLayers = style.layers.map(function (layer) {
|
||||
if (layer.source === streetsSource) return changeLayerTextProperty(isLangField, layer, field, excludedLayerIds);
|
||||
return layer;
|
||||
});
|
||||
|
||||
var languageStyle = Object.assign({}, style, {
|
||||
layers: changedLayers
|
||||
});
|
||||
|
||||
return this._languageTransform(languageStyle, language);
|
||||
};
|
||||
|
||||
MapboxLanguage.prototype._initialStyleUpdate = function () {
|
||||
var style = this._map.getStyle();
|
||||
var language = this._defaultLanguage || browserLanguage(this.supportedLanguages);
|
||||
|
||||
// We only update the style once
|
||||
this._map.off('styledata', this._initialStyleUpdate);
|
||||
this._map.setStyle(this.setLanguage(style, language));
|
||||
};
|
||||
|
||||
function browserLanguage(supportedLanguages) {
|
||||
var language = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
|
||||
var parts = language.split('-');
|
||||
var languageCode = language;
|
||||
if (parts.length > 1) {
|
||||
languageCode = parts[0];
|
||||
}
|
||||
if (supportedLanguages.indexOf(languageCode) > -1) {
|
||||
return languageCode;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
MapboxLanguage.prototype.onAdd = function (map) {
|
||||
this._map = map;
|
||||
this._map.on('styledata', this._initialStyleUpdate);
|
||||
this._container = document.createElement('div');
|
||||
return this._container;
|
||||
};
|
||||
|
||||
MapboxLanguage.prototype.onRemove = function () {
|
||||
this._map.off('styledata', this._initialStyleUpdate);
|
||||
this._map = undefined;
|
||||
};
|
||||
|
||||
function ie11Polyfill() {
|
||||
if (typeof Object.assign != 'function') {
|
||||
// Must be writable: true, enumerable: false, configurable: true
|
||||
Object.defineProperty(Object, 'assign', {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
value: function assign(target, varArgs) { // .length of function is 2
|
||||
// eslint-disable-next-line strict
|
||||
'use strict';
|
||||
if (target === null) { // TypeError if undefined or null
|
||||
throw new TypeError('Cannot convert undefined or null to object');
|
||||
}
|
||||
|
||||
var to = Object(target);
|
||||
|
||||
for (var index = 1; index < arguments.length; index++) {
|
||||
var nextSource = arguments[index];
|
||||
|
||||
if (nextSource !== null) { // Skip over if undefined or null
|
||||
for (var nextKey in nextSource) {
|
||||
// Avoid bugs when hasOwnProperty is shadowed
|
||||
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
|
||||
to[nextKey] = nextSource[nextKey];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return to;
|
||||
},
|
||||
writable: true,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||
module.exports = MapboxLanguage;
|
||||
} else {
|
||||
ie11Polyfill();
|
||||
window.MapboxLanguage = MapboxLanguage;
|
||||
}
|
||||
1
assets/lib/mapbox-gl/mapbox-gl.min.css
vendored
Normal file
1
assets/lib/mapbox-gl/mapbox-gl.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
40
assets/lib/mapbox-gl/mapbox-gl.min.js
vendored
Normal file
40
assets/lib/mapbox-gl/mapbox-gl.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -768,8 +768,8 @@ enableEmoji = true
|
|||
# whether to show link to Raw Markdown content of the post
|
||||
# 是否在文章页面显示原始 Markdown 文档链接
|
||||
linkToMarkdown = true
|
||||
# mathematical formulas (KaTeX https://katex.org/)
|
||||
# 数学公式 (KaTeX https://katex.org/)
|
||||
# KaTeX mathematical formulas config (KaTeX https://katex.org/)
|
||||
# KaTeX 数学公式配置 (KaTeX https://katex.org/)
|
||||
[params.math]
|
||||
enable = true
|
||||
# default block delimiter is $$ ... $$ and \\[ ... \\]
|
||||
|
|
@ -786,6 +786,30 @@ enableEmoji = true
|
|||
# KaTeX extension mhchem
|
||||
# KaTeX 插件 mhchem
|
||||
mhchem = true
|
||||
# Mapbox GL JS config (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js)
|
||||
# Mapbox GL JS 配置 (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js)
|
||||
[params.mapbox]
|
||||
# access token of Mapbox GL JS
|
||||
# Mapbox GL JS 的 access token
|
||||
accessToken = "pk.eyJ1IjoiZGlsbG9uenEiLCJhIjoiY2s2czd2M2x3MDA0NjNmcGxmcjVrZmc2cyJ9.aSjv2BNuZUfARvxRYjSVZQ"
|
||||
# style for the light theme
|
||||
# 浅色主题的地图样式
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9?optimize=true"
|
||||
# style for the dark theme
|
||||
# 深色主题的地图样式
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9?optimize=true"
|
||||
# whether to add NavigationControl (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol)
|
||||
# 是否添加 NavigationControl (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol)
|
||||
navigation = true
|
||||
# whether to add GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol)
|
||||
# 是否添加 GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol)
|
||||
geolocate = true
|
||||
# whether to add ScaleControl (https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol)
|
||||
# 是否添加 ScaleControl (https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol)
|
||||
scale = true
|
||||
# whether to add FullscreenControl (https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol)
|
||||
# 是否添加 FullscreenControl (https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol)
|
||||
fullscreen = true
|
||||
# site verification code for Google/Bing/Yandex/Pinterest/Baidu
|
||||
# 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
|
||||
[params.verification]
|
||||
|
|
@ -851,6 +875,9 @@ enableEmoji = true
|
|||
# echarts@4.6.0 https://echarts.apache.org/
|
||||
echartsJS = ''
|
||||
echartsMacaronsJS = ''
|
||||
# mapbox-gl@1.8.1 https://docs.mapbox.com/mapbox-gl-js
|
||||
mapboxGLCSS = ''
|
||||
mapboxGLJS = ''
|
||||
# gitalk@1.6.2 https://github.com/gitalk/gitalk
|
||||
gitalkCSS = ''
|
||||
gitalkJS = ''
|
||||
|
|
|
|||
|
|
@ -58,11 +58,13 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
|
|||
* :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* :(fab fa-font-awesome): Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
|
||||
* :(far fa-sticky-note): Extended markdown syntax for **ruby annotation**
|
||||
* :(fas fa-percentage): Extended markdown syntax for **fraction**
|
||||
* :(fas fa-square-root-alt): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
|
||||
* :(fas fa-project-diagram): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
|
||||
* :(fas fa-chart-pie): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
|
||||
* :(fas fa-map-marked-alt): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* :(fas fa-music): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* :(fas fa-tv): **Bilibili player** shortcode
|
||||
* :(fas fa-video): **Bilibili player** shortcode
|
||||
* :(far fa-bell): Kinds of **admonitions** shortcode
|
||||
* :(fas fa-align-left): **Custom style** shortcode
|
||||
* :(fas fa-i-cursor): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
|
||||
|
|
@ -87,6 +89,7 @@ Thanks to the authors of following resources included in the theme:
|
|||
* [$ \KaTeX $](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
|
|
|
|||
|
|
@ -63,11 +63,13 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
|
|||
* :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* :(fab fa-font-awesome): Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
|
||||
* :(far fa-sticky-note): Extended markdown syntax for **ruby annotation**
|
||||
* :(fas fa-percentage): Extended markdown syntax for **fraction**
|
||||
* :(fas fa-square-root-alt): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
|
||||
* :(fas fa-project-diagram): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
|
||||
* :(fas fa-chart-pie): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
|
||||
* :(fas fa-map-marked-alt): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* :(fas fa-music): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* :(fas fa-tv): **Bilibili player** shortcode
|
||||
* :(fas fa-video): **Bilibili player** shortcode
|
||||
* :(far fa-bell): Kinds of **admonitions** shortcode
|
||||
* :(fas fa-align-left): **Custom style** shortcode
|
||||
* :(fas fa-i-cursor): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
|
||||
|
|
@ -92,6 +94,7 @@ Thanks to the authors of following resources included in the theme:
|
|||
* [$ \KaTeX $](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ lightgallery: true
|
|||
|
||||
它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。
|
||||
|
||||
|
||||
|
||||
|
||||
### 特性
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ lightgallery: true
|
|||
#### 外观和布局
|
||||
|
||||
* [:(fas fa-desktop):]/[:(fas fa-mobile):] **响应式**布局
|
||||
* [:(fas fa-sun):]/[:(fas fa-moon):] **[白天]/[夜晚]** 主题模式
|
||||
* [:(fas fa-sun):]/[:(fas fa-moon):] **[浅色]/[深色]** 主题模式
|
||||
* :(fas fa-layer-group): 全局一致的**设计语言**
|
||||
* :(fas fa-ellipsis-h): 支持**分页**
|
||||
* :(far fa-list-alt): 易用和自动展开的**文章目录**
|
||||
|
|
@ -58,11 +58,13 @@ lightgallery: true
|
|||
* :(far fa-images): 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
|
||||
* :(fab fa-font-awesome): 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
|
||||
* :(far fa-sticky-note): 支持**上标注释**的扩展 Markdown 语法
|
||||
* :(fas fa-percentage): 支持**分数**的扩展 Markdown 语法
|
||||
* :(fas fa-square-root-alt): 支持基于 [$ \KaTeX $](https://katex.org/) 的**数学公式**
|
||||
* :(fas fa-project-diagram): 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
|
||||
* :(fas fa-chart-pie): 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
|
||||
* :(fas fa-map-marked-alt): 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
|
||||
* :(fas fa-music): 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
|
||||
* :(fas fa-tv): 支持 **Bilibili 视频** shortcode
|
||||
* :(fas fa-video): 支持 **Bilibili 视频** shortcode
|
||||
* :(far fa-bell): 支持多种**注释**的 shortcode
|
||||
* :(fas fa-align-left): 支持**自定义样式**的 shortcode
|
||||
* :(fas fa-i-cursor): 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
|
||||
|
|
@ -87,6 +89,7 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
|
|||
* [$ \KaTeX $](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -769,5 +777,5 @@ With a reference later in the document defining the URL location:
|
|||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-shortcodes/#image), which provides more features.
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes/#image), which provides more features.
|
||||
{{< /admonition >}}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -774,5 +782,5 @@ With a reference later in the document defining the URL location:
|
|||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-shortcodes/#image), which provides more features.
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes/#image), which provides more features.
|
||||
{{< /admonition >}}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -776,5 +784,5 @@ Content for chapter one.
|
|||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**LoveIt** 主题提供了一个包含更多功能的 [图片的 shortcode](../theme-documentation-shortcodes/#image).
|
||||
**LoveIt** 主题提供了一个包含更多功能的 [图片的 shortcode](../theme-documentation-extended-shortcodes/#image).
|
||||
{{< /admonition >}}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -67,14 +75,14 @@ You can download the [latest release :(far fa-file-archive): .zip file](https://
|
|||
Alternatively, clone this repository to the `themes` directory:
|
||||
|
||||
```bash
|
||||
git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
Or, create an empty git repository and make this repository a submodule of your site directory:
|
||||
|
||||
```bash
|
||||
git init
|
||||
git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
### 2.3 Basic Configuration {#basic-configuration}
|
||||
|
|
@ -320,6 +328,22 @@ Note that some of these parameters are explained in details in other sections of
|
|||
copyTex = true
|
||||
# KaTeX extension mhchem
|
||||
mhchem = true
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
|
||||
[params.mapbox]
|
||||
# access token of Mapbox GL JS
|
||||
accessToken = ""
|
||||
# style for the light theme
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
# style for the dark theme
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
|
||||
navigation = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
|
||||
geolocate = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
|
||||
scale = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
|
||||
fullscreen = true
|
||||
# Social Share Links in post page
|
||||
[params.share]
|
||||
enable = true
|
||||
|
|
@ -459,6 +483,9 @@ Note that some of these parameters are explained in details in other sections of
|
|||
# {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
|
||||
echartsJS = ''
|
||||
echartsMacaronsJS = ''
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
|
||||
mapboxGLCSS = ''
|
||||
mapboxGLJS = ''
|
||||
# {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
|
||||
gitalkCSS = ''
|
||||
gitalkJS = ''
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -72,14 +80,14 @@ You can download the [latest release :(far fa-file-archive): .zip file](https://
|
|||
Alternatively, clone this repository to the `themes` directory:
|
||||
|
||||
```bash
|
||||
git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
Or, create an empty git repository and make this repository a submodule of your site directory:
|
||||
|
||||
```bash
|
||||
git init
|
||||
git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
### 2.3 Basic Configuration {#basic-configuration}
|
||||
|
|
@ -325,6 +333,22 @@ Note that some of these parameters are explained in details in other sections of
|
|||
copyTex = true
|
||||
# KaTeX extension mhchem
|
||||
mhchem = true
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
|
||||
[params.mapbox]
|
||||
# access token of Mapbox GL JS
|
||||
accessToken = ""
|
||||
# style for the light theme
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
# style for the dark theme
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
|
||||
navigation = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
|
||||
geolocate = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
|
||||
scale = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
|
||||
fullscreen = true
|
||||
# Social Share Links in post page
|
||||
[params.share]
|
||||
enable = true
|
||||
|
|
@ -464,6 +488,9 @@ Note that some of these parameters are explained in details in other sections of
|
|||
# {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
|
||||
echartsJS = ''
|
||||
echartsMacaronsJS = ''
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
|
||||
mapboxGLCSS = ''
|
||||
mapboxGLJS = ''
|
||||
# {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
|
||||
gitalkCSS = ''
|
||||
gitalkJS = ''
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -67,14 +75,14 @@ cd my_website
|
|||
另外, 也可以直接把这个主题克隆到 `themes` 目录:
|
||||
|
||||
```bash
|
||||
git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
或者, 初始化你的项目目录为 git 仓库, 并且把主题仓库作为你的网站目录的子模块:
|
||||
|
||||
```bash
|
||||
git init
|
||||
git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||||
```
|
||||
|
||||
### 2.3 基础配置 {#basic-configuration}
|
||||
|
|
@ -322,6 +330,22 @@ hugo
|
|||
copyTex = true
|
||||
# KaTeX 插件 mhchem
|
||||
mhchem = true
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} 配置
|
||||
[params.mapbox]
|
||||
# Mapbox GL JS 的 access token
|
||||
accessToken = ""
|
||||
# 浅色主题的地图样式
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
# 深色主题的地图样式
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
|
||||
navigation = true
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
|
||||
geolocate = true
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
|
||||
scale = true
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
|
||||
fullscreen = true
|
||||
# 文章页面的分享信息设置
|
||||
[params.share]
|
||||
enable = true
|
||||
|
|
@ -461,6 +485,9 @@ hugo
|
|||
# {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
|
||||
echartsJS = ''
|
||||
echartsMacaronsJS = ''
|
||||
# {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
|
||||
mapboxGLCSS = ''
|
||||
mapboxGLJS = ''
|
||||
# {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
|
||||
gitalkCSS = ''
|
||||
gitalkJS = ''
|
||||
|
|
|
|||
|
|
@ -0,0 +1,200 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "Theme Documentation - Built-in Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:41+08:00
|
||||
lastmod: 2020-03-04T16:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean."
|
||||
license: ""
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
|
||||
featuredImagePreview: ""
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
enable: true
|
||||
comment: true
|
||||
---
|
||||
|
||||
**Hugo** provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## `figure` {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## `gist`
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## `highlight`
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## `instagram`
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## `param`
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## `ref` and `relref` {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
## `tweet`
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## `vimeo`
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## `youtube`
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "Thème Documentation - Built-in Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre."
|
||||
license: ""
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
|
||||
featuredImagePreview: ""
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
enable: true
|
||||
comment: true
|
||||
---
|
||||
|
||||
**Hugo** fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< admonition warning >}}
|
||||
Sorry, this article has not been completely translated into **French**.
|
||||
Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
|
||||
{{< /admonition >}}
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## `figure` {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## `gist`
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## `highlight`
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## `instagram`
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## `param`
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## `ref` and `relref` {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
## `tweet`
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## `vimeo`
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## `youtube`
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "主题文档 - 内置 Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁."
|
||||
license: ""
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
|
||||
featuredImagePreview: ""
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
enable: true
|
||||
comment: true
|
||||
---
|
||||
|
||||
**Hugo** 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.
|
||||
|
||||
但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.
|
||||
|
||||
为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.
|
||||
|
||||
Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
|
||||
提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
|
||||
|
||||
## `figure` {#figure}
|
||||
|
||||
[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
一个 `figure` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## `gist`
|
||||
|
||||
[`gist` 的文档](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
一个 `gist` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## `highlight`
|
||||
|
||||
[`highlight` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
一个 `highlight` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## `instagram`
|
||||
|
||||
[`instagram` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
一个 `instagram` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## `param`
|
||||
|
||||
[`param` 的文档](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
一个 `param` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## `ref` 和 `relref` {#ref-and-relref}
|
||||
|
||||
[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
## `tweet`
|
||||
|
||||
[`tweet` 的文档](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
一个 `tweet` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## `vimeo`
|
||||
|
||||
[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
一个 `vimeo` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## `youtube`
|
||||
|
||||
[`youtube` 的文档](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
一个 `youtube` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -39,7 +47,7 @@ A few suggestions to help you get a good looking site quickly:
|
|||
* Keep static pages in the `content` directory, for example: `content/about.md`
|
||||
* Keep media like images in the `static` directory, for example: `static/images/screenshot.png`
|
||||
|
||||
## 2 Front Matter
|
||||
## 2 Front Matter {#front-matter}
|
||||
|
||||
**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
|
||||
|
||||
|
|
@ -67,6 +75,14 @@ featuredImagePreview: ""
|
|||
toc: false
|
||||
autoCollapseToc: true
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -92,6 +108,7 @@ comment: true
|
|||
* **toc**: if `true`, the content will show the table of the contents.
|
||||
* **autoCollapseToc**: if `true`, the table of the contents will be automatically collapsed.
|
||||
* **math**: if `true`, the mathematical formula in the content will be automatically rendered.
|
||||
* **mapbox**: {{< version 0.2.0 >}} the same as `params.mapbox` in the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
* **lightgallery**: if `true`, images in the content will be shown as the gallery.
|
||||
* **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file.
|
||||
* **share**: the same as `params.share` in the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -44,7 +52,7 @@ A few suggestions to help you get a good looking site quickly:
|
|||
* Keep static pages in the `content` directory, for example: `content/about.md`
|
||||
* Keep media like images in the `static` directory, for example: `static/images/screenshot.png`
|
||||
|
||||
## 2 Front Matter
|
||||
## 2 Front Matter {#front-matter}
|
||||
|
||||
**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
|
||||
|
||||
|
|
@ -72,6 +80,14 @@ featuredImagePreview: ""
|
|||
toc: false
|
||||
autoCollapseToc: true
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -97,6 +113,7 @@ comment: true
|
|||
* **toc**: if `true`, the content will show the table of the contents.
|
||||
* **autoCollapseToc**: if `true`, the table of the contents will be automatically collapsed.
|
||||
* **math**: if `true`, the mathematical formula in the content will be automatically rendered.
|
||||
* **mapbox**: {{< version 0.2.0 >}} the same as `params.mapbox` in the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
* **lightgallery**: if `true`, images in the content will be shown as the gallery.
|
||||
* **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file.
|
||||
* **share**: the same as `params.share` in the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ featuredImagePreview: ""
|
|||
toc: true
|
||||
autoCollapseToc: false
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -39,7 +47,7 @@ comment: true
|
|||
* 保持简单的静态页面存放在 `content` 目录, 例如: `content/about.md`
|
||||
* 保持图片之类的媒体资源存放在 `static` 目录, 例如: `static/images/screenshot.png`
|
||||
|
||||
## 2 前置参数
|
||||
## 2 前置参数 {#front-matter}
|
||||
|
||||
**Hugo** 允许你在文章内容前面添加 `yaml`, `toml` 或者 `json` 格式的前置参数.
|
||||
|
||||
|
|
@ -67,6 +75,14 @@ featuredImagePreview: ""
|
|||
toc: false
|
||||
autoCollapseToc: true
|
||||
math: true
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -92,6 +108,7 @@ comment: true
|
|||
* **toc**: 如果设为 `true`, 这篇文章会显示右侧目录.
|
||||
* **autoCollapseToc**: 如果设为 `true`, 文章目录会自动折叠.
|
||||
* **math**: 如果设为 `true`, 将自动渲染文章中的数学公式.
|
||||
* **mapbox**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.mapbox` 对象相同.
|
||||
* **lightgallery**: 如果设为 `true`, 文章中的图片将可以按照画廊形式呈现.
|
||||
* **linkToMarkdown**: 如果设为 `true`, 内容的页脚将显示指向原始 Markdown 文件的链接.
|
||||
* **share**: 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.share` 对象相同.
|
||||
|
|
@ -248,14 +265,14 @@ $$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
|||
**LoveIt** 主题支持一种 **分数** Markdown 扩展语法:
|
||||
|
||||
```markdown
|
||||
[白天]{?/}[夜晚]
|
||||
[浅色]{?/}[深色]
|
||||
|
||||
[99]{?/}[100]
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
[白天]/[夜晚]
|
||||
[浅色]/[深色]
|
||||
|
||||
[90]/[100]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "Theme Documentation - Shortcodes"
|
||||
weight: 4
|
||||
title: "Theme Documentation - Extended Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:41+08:00
|
||||
lastmod: 2020-03-04T16:29:41+08:00
|
||||
date: 2020-03-03T16:29:41+08:00
|
||||
lastmod: 2020-03-03T16:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
|
|
@ -14,12 +14,20 @@ tags: ["shortcodes"]
|
|||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: ""
|
||||
featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -31,173 +39,7 @@ comment: true
|
|||
|
||||
<!--more-->
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
## Hugo’s Built-in Shortcodes
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
### `figure` {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### `gist`
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
### `highlight`
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
### `instagram`
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
### `param`
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
### `ref` and `relref` {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
### `tweet`
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
### `vimeo`
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
### `youtube`
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
||||
## LoveIt Shortcodes
|
||||
|
||||
**LoveIt** provides multiple shortcodes on top of existing ones.
|
||||
|
||||
### `style`
|
||||
## `style`
|
||||
|
||||
`style` is a shortcode to insert custom style in your post.
|
||||
|
||||
|
|
@ -210,18 +52,18 @@ And the **second** one is the HTML tag around the content you want to change sty
|
|||
Example `style` input:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align: right" */>}}
|
||||
{{</* style "text-align: right;" */>}}
|
||||
This is a right-aligned paragraph.
|
||||
{{</* /style */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< style "text-align: right" >}}
|
||||
{{< style "text-align: right;" >}}
|
||||
This is a right-aligned paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
### `link`
|
||||
## `link`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -235,7 +77,7 @@ The `link` shortcode has the following named parameters:
|
|||
|
||||
* **content** *[optional]* (**second** positional parameter)
|
||||
|
||||
Content of the link, default is the value of **href** parameter.
|
||||
Content of the link, default value is the value of **href** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
|
|
@ -285,11 +127,11 @@ The rendered output looks like this (hover over the link, there should be a tool
|
|||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
### `image`
|
||||
## `image`
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
|
||||
The `image` shortcode has the following named parameters:
|
||||
|
||||
|
|
@ -299,7 +141,7 @@ The `image` shortcode has the following named parameters:
|
|||
|
||||
* **alt** *[optional]* (**second** positional parameter)
|
||||
|
||||
Alternate text for the image if the image cannot be displayed, default is the value of **src** parameter.
|
||||
Alternate text for the image if the image cannot be displayed, default value is the value of **src** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
|
|
@ -319,11 +161,11 @@ The `image` shortcode has the following named parameters:
|
|||
|
||||
* **src_s** *[optional]*
|
||||
|
||||
URL of the image thumbnail, used for lightgallery, default is the value of **src** parameter.
|
||||
URL of the image thumbnail, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **src_l** *[optional]*
|
||||
|
||||
URL of the HD image, used for lightgallery, default is the value of **src** parameter.
|
||||
URL of the HD image, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
|
|
@ -335,7 +177,7 @@ The `image` shortcode has the following named parameters:
|
|||
|
||||
* **linked** *[optional]*
|
||||
|
||||
Whether the image needs to be hyperlinked, default is `true`.
|
||||
Whether the image needs to be hyperlinked, default value is `true`.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
|
|
@ -348,14 +190,14 @@ The `image` shortcode has the following named parameters:
|
|||
Example `image` input:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
### `admonition`
|
||||
## `admonition`
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
|
|
@ -413,15 +255,15 @@ The `admonition` shortcode has the following named parameters:
|
|||
|
||||
* **type** *[optional]* (**first** positional parameter)
|
||||
|
||||
Type of the `admonition` banner, default is `note`.
|
||||
Type of the `admonition` banner, default value is `note`.
|
||||
|
||||
* **title** *[optional]* (**second** positional parameter)
|
||||
|
||||
Title of the `admonition` banner, default is the value of **type** parameter.
|
||||
Title of the `admonition` banner, default value is the value of **type** parameter.
|
||||
|
||||
* **details** *[optional]* (**third** positional parameter)
|
||||
|
||||
Whether the content will be expandable/collapsible, default is `false`.
|
||||
Whether the content will be expandable/collapsible, default value is `false`.
|
||||
|
||||
Example `admonition` input:
|
||||
|
||||
|
|
@ -441,13 +283,13 @@ The rendered output looks like this:
|
|||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
### `mermaid`
|
||||
## `mermaid`
|
||||
|
||||
[mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
|
||||
|
||||
Just insert your mermaid code in the `mermaid` shortcode and that’s it.
|
||||
|
||||
#### Flowchart {#flowchart}
|
||||
### Flowchart {#flowchart}
|
||||
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
|
|
@ -471,7 +313,7 @@ graph LR;
|
|||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Sequence Diagram {#sequence-diagram}
|
||||
### Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -507,7 +349,7 @@ sequenceDiagram
|
|||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### GANTT {#gantt}
|
||||
### GANTT {#gantt}
|
||||
|
||||
Example **GANTT** `mermaid` input:
|
||||
|
||||
|
|
@ -551,7 +393,7 @@ gantt
|
|||
Add to mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Class Diagram {#class-diagram}
|
||||
### Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -593,7 +435,7 @@ classDiagram
|
|||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### State Diagram {#state-diagram}
|
||||
### State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -621,7 +463,7 @@ stateDiagram
|
|||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Git Graph {#git-graph}
|
||||
### Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
|
|
@ -667,7 +509,7 @@ end
|
|||
merge newbranch
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Pie {#pie}
|
||||
### Pie {#pie}
|
||||
|
||||
Example **pie** `mermaid` input:
|
||||
|
||||
|
|
@ -689,7 +531,7 @@ pie
|
|||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
### `echarts`
|
||||
## `echarts`
|
||||
|
||||
[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
|
||||
|
||||
|
|
@ -1067,13 +909,87 @@ The rendered output looks like this:
|
|||
}
|
||||
{{< /echarts >}}
|
||||
|
||||
### `music`
|
||||
## `mapbox`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
|
||||
|
||||
The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
|
||||
|
||||
* **lng** *[required]* (**first** positional parameter)
|
||||
|
||||
Longitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **lat** *[required]* (**second** positional parameter)
|
||||
|
||||
Latitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **zoom** *[optional]* (**third** positional parameter)
|
||||
|
||||
The initial zoom level of the map, default value is `10`.
|
||||
|
||||
* **marked** *[optional]* (**fourth** positional parameter)
|
||||
|
||||
Whether to add a marker at the inital centerpoint of the map, default value is `true`.
|
||||
|
||||
* **light-style** *[optional]* (**fifth** positional parameter)
|
||||
|
||||
Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **dark-style** *[optional]* (**sixth** positional parameter)
|
||||
|
||||
Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **navigation** *[optional]*
|
||||
|
||||
Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **geolocate** *[optional]*
|
||||
|
||||
Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **scale** *[optional]*
|
||||
|
||||
Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **fullscreen** *[optional]*
|
||||
|
||||
Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **width** *[optional]*
|
||||
|
||||
Width of the map, default value is `100%`.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
Height of the map, default value is `20rem`.
|
||||
|
||||
Example `mapbox` input:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox 121.485 31.233 12 */>}}
|
||||
Or
|
||||
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
|
||||
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
Or
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
|
||||
## `music`
|
||||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
|
||||
|
||||
There are three ways to use it the `music` shortcode.
|
||||
|
||||
#### Custom Music URL {#custom-music-url}
|
||||
### Custom Music URL {#custom-music-url}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
|
|
@ -1103,7 +1019,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
|
||||
#### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
|
|
@ -1124,7 +1040,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
#### Custom Server, Type and ID {#custom-server}
|
||||
### Custom Server, Type and ID {#custom-server}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
|
|
@ -1156,33 +1072,33 @@ The rendered output looks like this:
|
|||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
#### Other Parameters
|
||||
### Other Parameters {#other-parameters}
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
* **theme** *[optional]*
|
||||
|
||||
Main color of the music player, default is `#a9a9b3`.
|
||||
{{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
|
||||
|
||||
* **fixed** *[optional]*
|
||||
|
||||
Whether to enable fixed mode, default is `false`.
|
||||
Whether to enable fixed mode, default value is `false`.
|
||||
|
||||
* **mini** *[optional]*
|
||||
|
||||
Whether to enable mini mode, default is `false`.
|
||||
Whether to enable mini mode, default value is `false`.
|
||||
|
||||
* **autoplay** *[optional]*
|
||||
|
||||
Whether to autoplay music, default is `false`.
|
||||
Whether to autoplay music, default value is `false`.
|
||||
|
||||
* **volume** *[optional]*
|
||||
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default is `0.7`.
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`.
|
||||
|
||||
* **mutex** *[optional]*
|
||||
|
||||
Whether to pause other players when this player starts playing, default is `true`.
|
||||
Whether to pause other players when this player starts playing, default value is `true`.
|
||||
|
||||
The `music` shortcode has the following named parameters only applying to the type of music list:
|
||||
|
||||
|
|
@ -1190,23 +1106,23 @@ The `music` shortcode has the following named parameters only applying to the ty
|
|||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
Loop mode of the music list, default is `none`.
|
||||
Loop mode of the music list, default value is `none`.
|
||||
|
||||
* **order** *[optional]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
Play order of the music list, default is `list`.
|
||||
Play order of the music list, default value is `list`.
|
||||
|
||||
* **list-folded** *[optional]*
|
||||
|
||||
Whether the music list should be folded at first, default is `false`.
|
||||
Whether the music list should be folded at first, default value is `false`.
|
||||
|
||||
* **list-max-height** *[optional]*
|
||||
|
||||
Max height of the music list, default is `340px`.
|
||||
Max height of the music list, default value is `340px`.
|
||||
|
||||
### `bilibili`
|
||||
## `bilibili`
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
||||
|
|
@ -1247,13 +1163,13 @@ The rendered output looks like this:
|
|||
|
||||
{{< bilibili av=36570401 p=3 >}}
|
||||
|
||||
### `typeit`
|
||||
## `typeit`
|
||||
|
||||
The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/).
|
||||
|
||||
Just insert your content in the `typeit` shortcode and that’s it.
|
||||
|
||||
#### Simple Content {#simple-content}
|
||||
### Simple Content {#simple-content}
|
||||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
|
|
@ -1287,7 +1203,7 @@ The rendered output looks like this:
|
|||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
#### Code Content {#code-content}
|
||||
### Code Content {#code-content}
|
||||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
|
|
@ -1313,7 +1229,7 @@ public class HelloWorld {
|
|||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
#### Group Content {#group-content}
|
||||
### Group Content {#group-content}
|
||||
|
||||
All typing animations start at the same time by default.
|
||||
But sometimes you may want to start a set of `typeit` contents in order.
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "Thème Documentation - Shortcodes"
|
||||
weight: 4
|
||||
title: "Thème Documentation - Extended Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
date: 2020-03-03T16:29:59+08:00
|
||||
lastmod: 2020-03-03T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
|
|
@ -14,12 +14,20 @@ tags: ["shortcodes"]
|
|||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: ""
|
||||
featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -36,173 +44,7 @@ Sorry, this article has not been completely translated into **French**.
|
|||
Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
|
||||
{{< /admonition >}}
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
## Hugo’s Built-in Shortcodes
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
### `figure` {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### `gist`
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
### `highlight`
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
### `instagram`
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
### `param`
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
### `ref` and `relref` {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
### `tweet`
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
### `vimeo`
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
### `youtube`
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
||||
## LoveIt Shortcodes
|
||||
|
||||
**LoveIt** provides multiple shortcodes on top of existing ones.
|
||||
|
||||
### `style`
|
||||
## `style`
|
||||
|
||||
`style` is a shortcode to insert custom style in your post.
|
||||
|
||||
|
|
@ -215,18 +57,18 @@ And the **second** one is the HTML tag around the content you want to change sty
|
|||
Example `style` input:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align: right" */>}}
|
||||
{{</* style "text-align: right;" */>}}
|
||||
This is a right-aligned paragraph.
|
||||
{{</* /style */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< style "text-align: right" >}}
|
||||
{{< style "text-align: right;" >}}
|
||||
This is a right-aligned paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
### `link`
|
||||
## `link`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -240,7 +82,7 @@ The `link` shortcode has the following named parameters:
|
|||
|
||||
* **content** *[optional]* (**second** positional parameter)
|
||||
|
||||
Content of the link, default is the value of **href** parameter.
|
||||
Content of the link, default value is the value of **href** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
|
|
@ -290,11 +132,11 @@ The rendered output looks like this (hover over the link, there should be a tool
|
|||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
### `image`
|
||||
## `image`
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
|
||||
The `image` shortcode has the following named parameters:
|
||||
|
||||
|
|
@ -304,7 +146,7 @@ The `image` shortcode has the following named parameters:
|
|||
|
||||
* **alt** *[optional]* (**second** positional parameter)
|
||||
|
||||
Alternate text for the image if the image cannot be displayed, default is the value of **src** parameter.
|
||||
Alternate text for the image if the image cannot be displayed, default value is the value of **src** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
|
|
@ -324,11 +166,11 @@ The `image` shortcode has the following named parameters:
|
|||
|
||||
* **src_s** *[optional]*
|
||||
|
||||
URL of the image thumbnail, used for lightgallery, default is the value of **src** parameter.
|
||||
URL of the image thumbnail, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **src_l** *[optional]*
|
||||
|
||||
URL of the HD image, used for lightgallery, default is the value of **src** parameter.
|
||||
URL of the HD image, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
|
|
@ -340,7 +182,7 @@ The `image` shortcode has the following named parameters:
|
|||
|
||||
* **linked** *[optional]*
|
||||
|
||||
Whether the image needs to be hyperlinked, default is `true`.
|
||||
Whether the image needs to be hyperlinked, default value is `true`.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
|
|
@ -353,14 +195,14 @@ The `image` shortcode has the following named parameters:
|
|||
Example `image` input:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
### `admonition`
|
||||
## `admonition`
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
|
|
@ -418,15 +260,15 @@ The `admonition` shortcode has the following named parameters:
|
|||
|
||||
* **type** *[optional]* (**first** positional parameter)
|
||||
|
||||
Type of the `admonition` banner, default is `note`.
|
||||
Type of the `admonition` banner, default value is `note`.
|
||||
|
||||
* **title** *[optional]* (**second** positional parameter)
|
||||
|
||||
Title of the `admonition` banner, default is the value of **type** parameter.
|
||||
Title of the `admonition` banner, default value is the value of **type** parameter.
|
||||
|
||||
* **details** *[optional]* (**third** positional parameter)
|
||||
|
||||
Whether the content will be expandable/collapsible, default is `false`.
|
||||
Whether the content will be expandable/collapsible, default value is `false`.
|
||||
|
||||
Example `admonition` input:
|
||||
|
||||
|
|
@ -446,13 +288,13 @@ The rendered output looks like this:
|
|||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
### `mermaid`
|
||||
## `mermaid`
|
||||
|
||||
[mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
|
||||
|
||||
Just insert your mermaid code in the `mermaid` shortcode and that’s it.
|
||||
|
||||
#### Flowchart {#flowchart}
|
||||
### Flowchart {#flowchart}
|
||||
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
|
|
@ -476,7 +318,7 @@ graph LR;
|
|||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Sequence Diagram {#sequence-diagram}
|
||||
### Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -512,7 +354,7 @@ sequenceDiagram
|
|||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### GANTT {#gantt}
|
||||
### GANTT {#gantt}
|
||||
|
||||
Example **GANTT** `mermaid` input:
|
||||
|
||||
|
|
@ -556,7 +398,7 @@ gantt
|
|||
Add to mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Class Diagram {#class-diagram}
|
||||
### Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -598,7 +440,7 @@ classDiagram
|
|||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### State Diagram {#state-diagram}
|
||||
### State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -626,7 +468,7 @@ stateDiagram
|
|||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Git Graph {#git-graph}
|
||||
### Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
|
|
@ -672,7 +514,7 @@ end
|
|||
merge newbranch
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Pie {#pie}
|
||||
### Pie {#pie}
|
||||
|
||||
Example **pie** `mermaid` input:
|
||||
|
||||
|
|
@ -694,7 +536,7 @@ pie
|
|||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
### `echarts`
|
||||
## `echarts`
|
||||
|
||||
[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
|
||||
|
||||
|
|
@ -1072,13 +914,87 @@ The rendered output looks like this:
|
|||
}
|
||||
{{< /echarts >}}
|
||||
|
||||
### `music`
|
||||
## `mapbox`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
|
||||
|
||||
The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
|
||||
|
||||
* **lng** *[required]* (**first** positional parameter)
|
||||
|
||||
Longitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **lat** *[required]* (**second** positional parameter)
|
||||
|
||||
Latitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **zoom** *[optional]* (**third** positional parameter)
|
||||
|
||||
The initial zoom level of the map, default value is `10`.
|
||||
|
||||
* **marked** *[optional]* (**fourth** positional parameter)
|
||||
|
||||
Whether to add a marker at the inital centerpoint of the map, default value is `true`.
|
||||
|
||||
* **light-style** *[optional]* (**fifth** positional parameter)
|
||||
|
||||
Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **dark-style** *[optional]* (**sixth** positional parameter)
|
||||
|
||||
Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **navigation** *[optional]*
|
||||
|
||||
Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **geolocate** *[optional]*
|
||||
|
||||
Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **scale** *[optional]*
|
||||
|
||||
Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **fullscreen** *[optional]*
|
||||
|
||||
Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration).
|
||||
|
||||
* **width** *[optional]*
|
||||
|
||||
Width of the map, default value is `100%`.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
Height of the map, default value is `20rem`.
|
||||
|
||||
Example `mapbox` input:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox 121.485 31.233 12 */>}}
|
||||
Or
|
||||
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
|
||||
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
Or
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
|
||||
## `music`
|
||||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
|
||||
|
||||
There are three ways to use it the `music` shortcode.
|
||||
|
||||
#### Custom Music URL {#custom-music-url}
|
||||
### Custom Music URL {#custom-music-url}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
|
|
@ -1108,7 +1024,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
|
||||
#### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
|
|
@ -1129,7 +1045,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
#### Custom Server, Type and ID {#custom-server}
|
||||
### Custom Server, Type and ID {#custom-server}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
|
|
@ -1161,33 +1077,33 @@ The rendered output looks like this:
|
|||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
#### Other Parameters
|
||||
### Other Parameters {#other-parameters}
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
* **theme** *[optional]*
|
||||
|
||||
Main color of the music player, default is `#a9a9b3`.
|
||||
{{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
|
||||
|
||||
* **fixed** *[optional]*
|
||||
|
||||
Whether to enable fixed mode, default is `false`.
|
||||
Whether to enable fixed mode, default value is `false`.
|
||||
|
||||
* **mini** *[optional]*
|
||||
|
||||
Whether to enable mini mode, default is `false`.
|
||||
Whether to enable mini mode, default value is `false`.
|
||||
|
||||
* **autoplay** *[optional]*
|
||||
|
||||
Whether to autoplay music, default is `false`.
|
||||
Whether to autoplay music, default value is `false`.
|
||||
|
||||
* **volume** *[optional]*
|
||||
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default is `0.7`.
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`.
|
||||
|
||||
* **mutex** *[optional]*
|
||||
|
||||
Whether to pause other players when this player starts playing, default is `true`.
|
||||
Whether to pause other players when this player starts playing, default value is `true`.
|
||||
|
||||
The `music` shortcode has the following named parameters only applying to the type of music list:
|
||||
|
||||
|
|
@ -1195,23 +1111,23 @@ The `music` shortcode has the following named parameters only applying to the ty
|
|||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
Loop mode of the music list, default is `none`.
|
||||
Loop mode of the music list, default value is `none`.
|
||||
|
||||
* **order** *[optional]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
Play order of the music list, default is `list`.
|
||||
Play order of the music list, default value is `list`.
|
||||
|
||||
* **list-folded** *[optional]*
|
||||
|
||||
Whether the music list should be folded at first, default is `false`.
|
||||
Whether the music list should be folded at first, default value is `false`.
|
||||
|
||||
* **list-max-height** *[optional]*
|
||||
|
||||
Max height of the music list, default is `340px`.
|
||||
Max height of the music list, default value is `340px`.
|
||||
|
||||
### `bilibili`
|
||||
## `bilibili`
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
||||
|
|
@ -1252,13 +1168,13 @@ The rendered output looks like this:
|
|||
|
||||
{{< bilibili av=36570401 p=3 >}}
|
||||
|
||||
### `typeit`
|
||||
## `typeit`
|
||||
|
||||
The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/).
|
||||
|
||||
Just insert your content in the `typeit` shortcode and that’s it.
|
||||
|
||||
#### Simple Content {#simple-content}
|
||||
### Simple Content {#simple-content}
|
||||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
|
|
@ -1292,7 +1208,7 @@ The rendered output looks like this:
|
|||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
#### Code Content {#code-content}
|
||||
### Code Content {#code-content}
|
||||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
|
|
@ -1318,7 +1234,7 @@ public class HelloWorld {
|
|||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
#### Group Content {#group-content}
|
||||
### Group Content {#group-content}
|
||||
|
||||
All typing animations start at the same time by default.
|
||||
But sometimes you may want to start a set of `typeit` contents in order.
|
||||
|
|
@ -1,25 +1,33 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "主题文档 - Shortcodes"
|
||||
weight: 4
|
||||
title: "主题文档 - 扩展 Shortcodes"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
date: 2020-03-03T16:29:59+08:00
|
||||
lastmod: 2020-03-03T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode."
|
||||
description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."
|
||||
license: ""
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
hiddenFromHomePage: false
|
||||
|
||||
featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: ""
|
||||
featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
|
||||
featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
|
||||
|
||||
toc: true
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
lightStyle: ""
|
||||
darkStyle: ""
|
||||
navigation: true
|
||||
geolocate: true
|
||||
scale: true
|
||||
fullscreen: true
|
||||
lightgallery: true
|
||||
linkToMarkdown: true
|
||||
share:
|
||||
|
|
@ -27,178 +35,11 @@ share:
|
|||
comment: true
|
||||
---
|
||||
|
||||
**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode.
|
||||
**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.
|
||||
|
||||
但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.
|
||||
|
||||
为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.
|
||||
|
||||
## Hugo 内置 shortcodes {#hugo}
|
||||
|
||||
Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
|
||||
提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
|
||||
|
||||
### `figure` {#figure}
|
||||
|
||||
[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
一个 `figure` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### `gist`
|
||||
|
||||
[`gist` 的文档](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
一个 `gist` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
### `highlight`
|
||||
|
||||
[`highlight` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
一个 `highlight` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
### `instagram`
|
||||
|
||||
[`instagram` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
一个 `instagram` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
### `param`
|
||||
|
||||
[`param` 的文档](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
一个 `param` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
### `ref` 和 `relref` {#ref-and-relref}
|
||||
|
||||
[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
|
||||
|
||||
### `tweet`
|
||||
|
||||
[`tweet` 的文档](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
一个 `tweet` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
### `vimeo`
|
||||
|
||||
[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
一个 `vimeo` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
### `youtube`
|
||||
|
||||
[`youtube` 的文档](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
一个 `youtube` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
||||
## LoveIt shortcodes {#loveit}
|
||||
|
||||
**LoveIt** 在现有内置的 shortcodes 的基础上提供了多个 shortcodes.
|
||||
|
||||
### `style`
|
||||
## `style`
|
||||
|
||||
`style` shortcode 用来在你的文章中插入自定义样式.
|
||||
|
||||
|
|
@ -211,18 +52,18 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
|||
一个 `style` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align: right" */>}}
|
||||
{{</* style "text-align: right;" */>}}
|
||||
This is a right-aligned paragraph.
|
||||
{{</* /style */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< style "text-align: right" >}}
|
||||
{{< style "text-align: right;" >}}
|
||||
This is a right-aligned paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
### `link`
|
||||
## `link`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -287,11 +128,11 @@ This is a right-aligned paragraph.
|
|||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
### `image`
|
||||
## `image`
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
`image` shortcode 是 [`figure` shortcode](#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
|
||||
`image` shortcode 是 [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
|
||||
|
||||
`image` shortcode 有以下命名参数:
|
||||
|
||||
|
|
@ -350,14 +191,14 @@ This is a right-aligned paragraph.
|
|||
一个 `image` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
### `admonition`
|
||||
## `admonition`
|
||||
|
||||
`admonition` shortcode 支持 **12** 种 帮助你在页面中插入提示的横幅.
|
||||
|
||||
|
|
@ -443,13 +284,13 @@ This is a right-aligned paragraph.
|
|||
一个 **技巧** 横幅
|
||||
{{< /admonition >}}
|
||||
|
||||
### `mermaid`
|
||||
## `mermaid`
|
||||
|
||||
[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法.
|
||||
|
||||
只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
|
||||
|
||||
#### 流程图 {#flowchart}
|
||||
### 流程图 {#flowchart}
|
||||
|
||||
一个 **流程图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -473,7 +314,7 @@ graph LR;
|
|||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 时序图 {#sequence-diagram}
|
||||
### 时序图 {#sequence-diagram}
|
||||
|
||||
一个 **时序图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -509,7 +350,7 @@ sequenceDiagram
|
|||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 甘特图 {#gantt}
|
||||
### 甘特图 {#gantt}
|
||||
|
||||
一个 **甘特图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -553,7 +394,7 @@ gantt
|
|||
Add to mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 类图 {#class-diagram}
|
||||
### 类图 {#class-diagram}
|
||||
|
||||
一个 **类图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -595,7 +436,7 @@ classDiagram
|
|||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 状态图 {#state-diagram}
|
||||
### 状态图 {#state-diagram}
|
||||
|
||||
一个 **状态图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -623,7 +464,7 @@ stateDiagram
|
|||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### Git 图 {#git-graph}
|
||||
### Git 图 {#git-graph}
|
||||
|
||||
一个 **Git 图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -669,7 +510,7 @@ end
|
|||
merge newbranch
|
||||
{{< /mermaid >}}
|
||||
|
||||
#### 饼图 {#pie}
|
||||
### 饼图 {#pie}
|
||||
|
||||
一个 **饼图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -691,7 +532,7 @@ pie
|
|||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
### `echarts`
|
||||
## `echarts`
|
||||
|
||||
[ECharts](https://echarts.apache.org/) 是一个帮助你生成交互式数据可视化的库.
|
||||
|
||||
|
|
@ -1069,36 +910,87 @@ data = [
|
|||
}
|
||||
{{< /echarts >}}
|
||||
|
||||
### `music`
|
||||
## `mapbox`
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 是一个 JavaScript 库，它使用 WebGL, 以 [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) 和 [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/) 为来源, 将它们渲染成互动式地图.
|
||||
|
||||
`mapbox` shortcode 有以下命名参数来使用 Mapbox GL JS:
|
||||
|
||||
* **lng** *[必需]* (**第一个**位置参数)
|
||||
|
||||
地图初始中心点的经度, 以度为单位.
|
||||
|
||||
* **lat** *[必需]* (**第二个**位置参数)
|
||||
|
||||
地图初始中心点的纬度, 以度为单位.
|
||||
|
||||
* **zoom** *[可选]* (**第三个**位置参数)
|
||||
|
||||
地图的初始缩放级别, 默认值是 `10`.
|
||||
|
||||
* **marked** *[可选]* (**第四个**位置参数)
|
||||
|
||||
是否在地图的初始中心点添加图钉, 默认值是 `true`.
|
||||
|
||||
* **light-style** *[可选]* (**第五个**位置参数)
|
||||
|
||||
浅色主题的地图样式, 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **dark-style** *[可选]* (**第六个**位置参数)
|
||||
|
||||
深色主题的地图样式, 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **navigation** *[可选]*
|
||||
|
||||
是否添加 [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **geolocate** *[可选]*
|
||||
|
||||
是否添加 [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **scale** *[可选]*
|
||||
|
||||
是否添加 [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **fullscreen** *[可选]*
|
||||
|
||||
是否添加 [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), 默认值是[前置参数](../theme-documentation-content/#front-matter)或者[网站配置](../theme-documentation-basics/#site-configuration)中设置的值.
|
||||
|
||||
* **width** *[可选]*
|
||||
|
||||
地图的宽度, 默认值是 `100%`.
|
||||
|
||||
* **height** *[可选]*
|
||||
|
||||
地图的高度, 默认值是 `20rem`.
|
||||
|
||||
一个 `mapbox` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox 121.485 31.233 12 */>}}
|
||||
或者
|
||||
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
|
||||
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
或者
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
|
||||
## `music`
|
||||
|
||||
`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器.
|
||||
|
||||
有三种方式使用 `music` shortcode.
|
||||
|
||||
`music` shortcode 可以使用以下命名参数:
|
||||
|
||||
|参数 |默认值 |描述|
|
||||
|:---------------|:------------:|:----------|
|
||||
|url |**必须** |音乐的 URL|
|
||||
|name |可选 |音乐名称|
|
||||
|artist |可选 |音乐的创作者|
|
||||
|cover |封面 |音乐封面的 URL|
|
||||
|server |**必须** |音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`|
|
||||
|type |**必须** |`song`, `playlist`, `album`, `search`, `artist`|
|
||||
|id |**必须** |song id / playlist id / album id / 搜索关键字|
|
||||
|auto |可选 |音乐链接, 支持平台: `netease`, `tencent`, `xiami`|
|
||||
|fixed |`false` |启用固定模式|
|
||||
|mini |`false` |启用迷你模式|
|
||||
|autoplay |`false` |自动播放|
|
||||
|theme |`#a9a9b3` |主题色|
|
||||
|loop |`all` |循环模式, 值: 'all', 'one', 'none'|
|
||||
|order |`list` |播放顺序, 值: 'list', 'random'|
|
||||
|volume |`0.7` |默认音量, 请注意, 播放器会记住用户设置, 用户自己设置音量后默认音量将不起作用|
|
||||
|mutex |`true` |防止同时有多个播放器, 在此播放器开始播放时暂停其他播放器|
|
||||
|list-folded |`false` |列表默认是否折叠|
|
||||
|list-max-height |`340px` |列表最大高度|
|
||||
|
||||
#### 自定义音乐 URL {#custom-music-url}
|
||||
### 自定义音乐 URL {#custom-music-url}
|
||||
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐 URL:
|
||||
|
||||
|
|
@ -1128,7 +1020,7 @@ data = [
|
|||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
|
||||
#### 音乐平台 URL 的自动识别 {#automatic-identification}
|
||||
### 音乐平台 URL 的自动识别 {#automatic-identification}
|
||||
|
||||
`music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:
|
||||
|
||||
|
|
@ -1148,7 +1040,7 @@ data = [
|
|||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
#### 自定义音乐平台, 类型和 ID {#custom-server}
|
||||
### 自定义音乐平台, 类型和 ID {#custom-server}
|
||||
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐平台:
|
||||
|
||||
|
|
@ -1180,13 +1072,13 @@ data = [
|
|||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
#### 其它参数
|
||||
### 其它参数 {#other-parameters}
|
||||
|
||||
`music` shortcode 有一些可以应用于以上三种方式的其它命名参数:
|
||||
|
||||
* **theme** *[可选]*
|
||||
|
||||
音乐播放器的主题色, 默认值是 `#a9a9b3`.
|
||||
{{< version 0.2.0 changed >}} 音乐播放器的主题色, 默认值是 `#448aff`.
|
||||
|
||||
* **fixed** *[可选]*
|
||||
|
||||
|
|
@ -1230,7 +1122,7 @@ data = [
|
|||
|
||||
音乐列表的最大高度, 默认值是 `340px`.
|
||||
|
||||
### `bilibili`
|
||||
## `bilibili`
|
||||
|
||||
`bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.
|
||||
|
||||
|
|
@ -1270,13 +1162,13 @@ https://www.bilibili.com/video/av36570401?p=3
|
|||
|
||||
{{< bilibili av=36570401 p=3 >}}
|
||||
|
||||
### `typeit`
|
||||
## `typeit`
|
||||
|
||||
`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 提供了打字动画.
|
||||
|
||||
只需将你需要打字动画的内容插入 `typeit` shortcode 中即可.
|
||||
|
||||
#### 简单内容 {#simple-content}
|
||||
### 简单内容 {#simple-content}
|
||||
|
||||
允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等...
|
||||
|
||||
|
|
@ -1310,7 +1202,7 @@ https://www.bilibili.com/video/av36570401?p=3
|
|||
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
|
||||
{{< /typeit >}}
|
||||
|
||||
#### 代码内容 {#code-content}
|
||||
### 代码内容 {#code-content}
|
||||
|
||||
代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮.
|
||||
|
||||
|
|
@ -1336,7 +1228,7 @@ public class HelloWorld {
|
|||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
#### 分组内容 {#code-content}
|
||||
### 分组内容 {#code-content}
|
||||
|
||||
默认情况下, 所有打字动画都是同时开始的.
|
||||
但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画.
|
||||
Binary file not shown.
|
After 
(image error) Size: 15 KiB |
|
Before 
(image error) Size: 638 KiB After 
(image error) Size: 638 KiB
|
Binary file not shown.
|
After 
(image error) Size: 160 KiB |
|
Before 
(image error) Size: 64 KiB After 
(image error) Size: 64 KiB
|
|
Before 
(image error) Size: 1.6 MiB After 
(image error) Size: 1.6 MiB
|
|
Before 
(image error) Size: 107 KiB After 
(image error) Size: 107 KiB
|
Binary file not shown.
|
After 
(image error) Size: 638 KiB |
|
|
@ -150,20 +150,17 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- /* mermaid */ -}}
|
||||
{{- with $scratch.Get "mermaidArr" -}}
|
||||
{{- if $scratch.Get "mermaid" -}}
|
||||
{{- with $CDN.mermaidJS -}}
|
||||
{{- slice . | $scratch.Add "scriptCDN" -}}
|
||||
{{- else -}}
|
||||
{{- slice "lib/mermaid/mermaid.min.js" | $scratch.Add "scriptLocal" -}}
|
||||
{{- end -}}
|
||||
{{- slice "lib/mermaid/mermaid.scss" | $scratch.Add "linkLocal" -}}
|
||||
<script>
|
||||
window.mermaidArr = {{ jsonify . | safeJS }};
|
||||
</script>
|
||||
{{- end -}}
|
||||
|
||||
{{- /* ECharts */ -}}
|
||||
{{- with $scratch.Get "echartsArr" -}}
|
||||
{{- if $scratch.Get "echarts" -}}
|
||||
{{- with $CDN.echartsJS -}}
|
||||
{{- slice . | $scratch.Add "scriptCDN" -}}
|
||||
{{- else -}}
|
||||
|
|
@ -174,8 +171,26 @@
|
|||
{{- else -}}
|
||||
{{- slice "lib/echarts/macarons.js" | $scratch.Add "scriptLocal" -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- /* Mapbox GL */ -}}
|
||||
{{- if $scratch.Get "mapbox" -}}
|
||||
{{- with $CDN.mapboxGLCSS -}}
|
||||
{{- slice . | $scratch.Add "linkCDN" -}}
|
||||
{{- else -}}
|
||||
{{- slice "lib/mapbox-gl/mapbox-gl.min.css" | $scratch.Add "linkLocal" -}}
|
||||
{{- end -}}
|
||||
{{- with $CDN.mapboxGLJS -}}
|
||||
{{- slice . | $scratch.Add "scriptCDN" -}}
|
||||
{{- else -}}
|
||||
{{- slice "lib/mapbox-gl/mapbox-gl.min.js" | $scratch.Add "scriptLocal" -}}
|
||||
{{- end -}}
|
||||
{{- slice "lib/mapbox-gl/mapbox-gl-language.js" | $scratch.Add "scriptLocal" -}}
|
||||
<script>
|
||||
window.echartsArr = {{ jsonify . | safeJS }};
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
mapboxgl.accessToken = '{{ .Params.mapbox.accessToken | default .Site.Params.mapbox.accessToken }}';
|
||||
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js');
|
||||
});
|
||||
</script>
|
||||
{{- end -}}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
{{- $content := .Inner | transform.Unmarshal | jsonify -}}
|
||||
{{- $id := partial "function/id.html" (dict "content" $content "scratch" $scratch) -}}
|
||||
<div class="echarts" id="{{ $id }}"></div>
|
||||
{{- slice $id | $scratch.Add "echartsArr" -}}
|
||||
{{- $scratch.Set "echarts" true -}}
|
||||
|
|
|
|||
33
layouts/shortcodes/mapbox.html
Normal file
33
layouts/shortcodes/mapbox.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{{- $scratch := .Page.Scratch.Get "scratch" -}}
|
||||
|
||||
{{- $lng := cond .IsNamedParams (.Get "lng") (.Get 0) -}}
|
||||
{{- $lat := cond .IsNamedParams (.Get "lat") (.Get 1) -}}
|
||||
{{- $zoom := cond .IsNamedParams (.Get "zoom") (.Get 2) | default 10 -}}
|
||||
{{- $marked := cond .IsNamedParams (.Get "marked") (.Get 3) | ne false -}}
|
||||
{{- $lightStyle := .Page.Params.mapbox.lightStyle | default .Page.Site.Params.mapbox.lightStyle -}}
|
||||
{{- $darkStyle := .Page.Params.mapbox.darkStyle | default .Page.Site.Params.mapbox.darkStyle -}}
|
||||
{{- $navigation := ne .Page.Params.mapbox.navigation false | and (ne .Page.Site.Params.mapbox.navigation false) -}}
|
||||
{{- $geolocate := ne .Page.Params.mapbox.geolocate false | and (ne .Page.Site.Params.mapbox.geolocate false) -}}
|
||||
{{- $scale := ne .Page.Params.mapbox.scale false | and (ne .Page.Site.Params.mapbox.scale false) -}}
|
||||
{{- $fullscreen := ne .Page.Params.mapbox.fullscreen false | and (ne .Page.Site.Params.mapbox.fullscreen false) -}}
|
||||
{{- $width := "100%" -}}
|
||||
{{- $height := "20rem" -}}
|
||||
|
||||
{{- if .IsNamedParams -}}
|
||||
{{- $lightStyle = .Get "light-style" | default $lightStyle -}}
|
||||
{{- $darkStyle = .Get "dark-style" | default $darkStyle -}}
|
||||
{{- $navigation = .Get "navigation" | ne false | and $navigation -}}
|
||||
{{- $geolocate = .Get "geolocate" | ne false | and $geolocate -}}
|
||||
{{- $scale = .Get "scale" | ne false | and $scale -}}
|
||||
{{- $fullscreen = .Get "fullscreen" | ne false | and $fullscreen -}}
|
||||
{{- $width = .Get "width" | default $width -}}
|
||||
{{- $height = .Get "height" | default $height -}}
|
||||
{{- else -}}
|
||||
{{- $lightStyle = .Get 4 | default $lightStyle -}}
|
||||
{{- $darkStyle = .Get 5 | default $darkStyle -}}
|
||||
{{- end -}}
|
||||
{{- $darkStyle = $darkStyle | default $lightStyle -}}
|
||||
{{- $options := dict "lng" $lng "lat" $lat "zoom" $zoom "marked" $marked "light-style" $lightStyle "dark-style" $darkStyle "geolocate" $geolocate "navigation" $navigation "scale" $scale "fullscreen" $fullscreen -}}
|
||||
{{- $id := partial "function/id.html" (dict "content" $options "scratch" $scratch) -}}
|
||||
<div class="mapbox" id="{{ $id }}" style="width: {{ $width }}; height: {{ $height }};"></div>
|
||||
{{- $scratch.Set "mapbox" true -}}
|
||||
|
|
@ -2,4 +2,4 @@
|
|||
|
||||
{{- $id := partial "function/id.html" (dict "content" (trim .Inner "\n") "scratch" $scratch) -}}
|
||||
<div class="mermaid" id="{{ $id }}"></div>
|
||||
{{- slice $id | $scratch.Add "mermaidArr" -}}
|
||||
{{- $scratch.Set "mermaid" true -}}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
{{- $scratch := .Page.Scratch.Get "scratch" -}}
|
||||
|
||||
{{- $theme := "#448aff" -}}
|
||||
{{- if .IsNamedParams -}}
|
||||
{{- $theme = .Get "theme" | default $theme -}}
|
||||
{{- if .Get "url" -}}
|
||||
<meting-js url="{{ .Get `url` }}" name="{{ .Get `name` }}" artist="{{ .Get `artist` }}" cover="{{ .Get `cover` }}" theme="{{ .Get `theme` | default `#a9a9b3` }}"
|
||||
<meting-js url="{{ .Get `url` }}" name="{{ .Get `name` }}" artist="{{ .Get `artist` }}" cover="{{ .Get `cover` }}" theme="{{ $theme }}"
|
||||
{{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
|
||||
{{- with .Get "mini" }} mini="{{ . }}"{{ end -}}
|
||||
{{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
|
||||
|
|
@ -10,7 +12,7 @@
|
|||
{{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}}
|
||||
></meting-js>
|
||||
{{- else if .Get "auto" -}}
|
||||
<meting-js auto="{{ .Get `auto` }}" theme="{{ .Get `theme` | default `#a9a9b3` }}"
|
||||
<meting-js auto="{{ .Get `auto` }}" theme="{{ $theme }}"
|
||||
{{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
|
||||
{{- with .Get "mini" }} mini="{{ . }}"{{ end -}}
|
||||
{{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
|
||||
|
|
@ -22,7 +24,7 @@
|
|||
{{- with .Get "list-max-height" }} list-max-height="{{ . }}"{{ end -}}
|
||||
></meting-js>
|
||||
{{- else -}}
|
||||
<meting-js server="{{ .Get `server` }}" type="{{ .Get `type` }}" id="{{ .Get `id` }}" theme="{{ .Get `theme` | default `#a9a9b3` }}"
|
||||
<meting-js server="{{ .Get `server` }}" type="{{ .Get `type` }}" id="{{ .Get `id` }}" theme="{{ $theme }}"
|
||||
{{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
|
||||
{{- with .Get "mini" }} mini="{{ . }}"{{ end -}}
|
||||
{{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
|
||||
|
|
@ -35,8 +37,8 @@
|
|||
></meting-js>
|
||||
{{- end -}}
|
||||
{{- else if strings.HasSuffix (.Get 0) "http" -}}
|
||||
<meting-js auto="{{ .Get 0 }}" theme="#a9a9b3"></meting-js>
|
||||
<meting-js auto="{{ .Get 0 }}" theme="{{ $theme }}"></meting-js>
|
||||
{{- else -}}
|
||||
<meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="#a9a9b3"></meting-js>
|
||||
<meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="{{ $theme }}"></meting-js>
|
||||
{{- end -}}
|
||||
{{- $scratch.Set "music" true -}}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -29,6 +29,7 @@
|
|||
this.oldScrollTop = this.newScrollTop;
|
||||
this.scrollEventSet = new Set();
|
||||
this.resizeEventSet = new Set();
|
||||
this.switchThemeEventSet = new Set();
|
||||
}
|
||||
|
||||
initMenuMobile() {
|
||||
|
|
@ -55,7 +56,7 @@
|
|||
document.body.classList.toggle('dark-theme');
|
||||
window.isDark = !window.isDark;
|
||||
window.localStorage && window.localStorage.setItem('theme', window.isDark ? 'dark' : 'light');
|
||||
this.initEcharts();
|
||||
for (let event of this.switchThemeEventSet) event();
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -122,7 +123,7 @@
|
|||
toc.style.maxWidth = `${page.getBoundingClientRect().left - 20}px`;
|
||||
this._tocLinks = this._tocLinks || tocCore.getElementsByTagName('a');
|
||||
this._tocLis = this._tocLis || tocCore.getElementsByTagName('li');
|
||||
this._headerLinks = this._headerLinks || document.getElementsByClassName('headerLink') || [];
|
||||
this._headerLinks = this._headerLinks || document.getElementsByClassName('headerLink');
|
||||
const headerIsFixed = window.desktopHeaderMode !== 'normal';
|
||||
const headerHeight = document.getElementById('header-desktop').offsetHeight;
|
||||
const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
|
||||
|
|
@ -175,11 +176,11 @@
|
|||
}
|
||||
|
||||
initMermaid() {
|
||||
if (window.mermaidArr) {
|
||||
const elements = document.getElementsByClassName('mermaid');
|
||||
if (elements.length) {
|
||||
mermaid.initialize({startOnLoad: false, theme: 'null'});
|
||||
this.util.forEach(window.mermaidArr, (id) => {
|
||||
const element = document.getElementById(id);
|
||||
mermaid.mermaidAPI.render('svg-' + id, window.contentMap[id], (svgCode) => {
|
||||
this.util.forEach(elements, (element) => {
|
||||
mermaid.mermaidAPI.render('svg-' + element.id, window.contentMap[element.id], (svgCode) => {
|
||||
element.innerHTML = svgCode;
|
||||
}, element);
|
||||
});
|
||||
|
|
@ -187,24 +188,73 @@
|
|||
}
|
||||
|
||||
initEcharts() {
|
||||
if (window.echartsArr) {
|
||||
this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || (() => {
|
||||
this._echartsArr = this._echartsArr || [];
|
||||
for (let i = 0; i < this._echartsArr.length; i++) {
|
||||
this._echartsArr[i].dispose();
|
||||
}
|
||||
this._echartsArr = [];
|
||||
this.util.forEach(window.echartsArr, (id) => {
|
||||
const chart = echarts.init(document.getElementById(id), window.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
|
||||
chart.setOption(JSON.parse(window.contentMap[id]));
|
||||
this.util.forEach(document.getElementsByClassName('echarts'), (element) => {
|
||||
const chart = echarts.init(element, window.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
|
||||
chart.setOption(JSON.parse(window.contentMap[element.id]));
|
||||
this._echartsArr.push(chart);
|
||||
});
|
||||
this._echartsOnResize = this._echartsOnResize || (() => {
|
||||
for (let i = 0; i < this._echartsArr.length; i++) {
|
||||
this._echartsArr[i].resize();
|
||||
}
|
||||
});
|
||||
this.switchThemeEventSet.add(this._echartsOnSwitchTheme);
|
||||
this._echartsOnSwitchTheme();
|
||||
this._echartsOnResize = this._echartsOnResize || (() => {
|
||||
for (let i = 0; i < this._echartsArr.length; i++) {
|
||||
this._echartsArr[i].resize();
|
||||
}
|
||||
});
|
||||
this.resizeEventSet.add(this._echartsOnResize);
|
||||
}
|
||||
|
||||
initMapbox() {
|
||||
this._mapboxArr = this._mapboxArr || [];
|
||||
this.util.forEach(document.getElementsByClassName('mapbox'), (element) => {
|
||||
const options = window.contentMap[element.id];
|
||||
const mapbox = new mapboxgl.Map({
|
||||
container: element,
|
||||
center: [options['lng'], options['lat']],
|
||||
zoom: options['zoom'],
|
||||
minZoom: .2,
|
||||
style: window.isDark ? options['dark-style'] : options['light-style'],
|
||||
attributionControl: false,
|
||||
});
|
||||
this.resizeEventSet.add(this._echartsOnResize);
|
||||
}
|
||||
if (options['marked']) {
|
||||
new mapboxgl.Marker().setLngLat([options['lng'], options['lat']]).addTo(mapbox);
|
||||
}
|
||||
if (options['navigation']) {
|
||||
mapbox.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
|
||||
}
|
||||
if (options['geolocate']) {
|
||||
mapbox.addControl(new mapboxgl.GeolocateControl({
|
||||
positionOptions: {
|
||||
enableHighAccuracy: true,
|
||||
},
|
||||
showUserLocation: true,
|
||||
trackUserLocation: true,
|
||||
}), 'bottom-right');
|
||||
}
|
||||
if (options['scale']) {
|
||||
mapbox.addControl(new mapboxgl.ScaleControl());
|
||||
}
|
||||
if (options['fullscreen']) {
|
||||
mapbox.addControl(new mapboxgl.FullscreenControl());
|
||||
}
|
||||
mapbox.addControl(new MapboxLanguage());
|
||||
this._mapboxArr.push(mapbox);
|
||||
});
|
||||
this._mapboxOnSwitchTheme = this._mapboxOnSwitchTheme || (() => {
|
||||
this.util.forEach(this._mapboxArr, (mapbox) => {
|
||||
const element = mapbox.getContainer();
|
||||
const options = window.contentMap[element.id];
|
||||
mapbox.setStyle(window.isDark ? options['dark-style'] : options['light-style']);
|
||||
mapbox.addControl(new MapboxLanguage());
|
||||
});
|
||||
});
|
||||
this.switchThemeEventSet.add(this._mapboxOnSwitchTheme);
|
||||
}
|
||||
|
||||
initTypeit() {
|
||||
|
|
@ -248,7 +298,7 @@
|
|||
header.classList.add('animated');
|
||||
header.classList.add('faster');
|
||||
});
|
||||
const comments = document.getElementsByClassName('comment') || [];
|
||||
const comments = document.getElementsByClassName('comment');
|
||||
if (comments.length) {
|
||||
const button = document.getElementById('comment-button');
|
||||
button.href = `#${comments[0].id}`;
|
||||
|
|
@ -313,6 +363,7 @@
|
|||
this.initHeaderLink();
|
||||
this.initMermaid();
|
||||
this.initEcharts();
|
||||
this.initMapbox();
|
||||
this.initTypeit();
|
||||
this.initToc();
|
||||
this.initSmoothScroll();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue