主题原生支持丰 富 多 彩 的标签。
文本和段落 Span & P 请将您的 Volantis 升级至 2.5 版本以上使用。
样式参数位置可以写颜色、大小和对齐方向,多个样式参数用空格隔开。
字体
颜色
red, yellow, green, cyan, blue, gray
大小
small, h4, h3, h2, h1, large, huge, ultra
对齐方向
彩色文字
example.md: 在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
超大文字
example.md: 文档「开始」页面中的标题部分就是超大文字。 {% p center logo large, Volantis %} {% p center small, A Wonderful Theme for Hexo %}
彩色文字
在一段话中方便插入各种颜色的标签,包括:红色 、黄色 、绿色 、青色 、蓝色 、灰色 。
超大文字
文档「开始」页面中的标题部分就是超大文字。
Volantis
A Wonderful Theme for Hexo
Note & NoteBlock NoteBlock 是 Blockquote 的增强版,在左边显示图标,并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。请将您的 Volantis 升级至 2.3 版本以上使用。
Note
NoteBlock
{% noteblock 样式参数 %} 文本段落 {% endnoteblock %}
样式参数位置可以写图标和颜色,多个样式参数用空格隔开。
图标
彩色的 quote, info, warning, done/success, error/danger
灰色的,也可以指定颜色 radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo
颜色
指定颜色 clear, light, gray, red, yellow, green, cyan, blue
Note
example.md: {% note, 为简单的一句话提供的简便写法。 %} {% note success, 支持同样丰富的参数。 %}
NoteBlock
example.md: 可以在区块中放置一些复杂的结构,支持嵌套。 {% noteblock quote %} {% p subtitle, 小标题 %} Windows 10不是為所有人設計,而是為每個人設計 {% p subtitle, 嵌套测试 %} {% noteblock %} 请坐和放宽,我正在帮你搞定一切... {% endnoteblock %} {% p subtitle, Folding 测试 %} {% folding 点击查看更多 %} {% note warning, 不要说我们没有警告过你 %} {% noteblock bug red %} 我们都有不顺利的时候 {% endnoteblock %} {% endfolding %} {% endnoteblock %}
Note
NoteBlock
可以在区块中放置一些复杂的结构,支持嵌套。
小标题
Windows 10不是為所有人設計,而是為每個人設計
嵌套测试
Folding 测试
点击查看更多 Checkbox & Radio 请将您的 Volantis 升级至 2.6 版本以上使用。
{% checkbox 样式参数(可选), 文本(支持简单md) %}
颜色
red, yellow, green, cyan, blue
样式
选中状态
Checkbox
example.md: {% checkbox 纯文本测试 %} {% checkbox checked, 支持简单的 [markdown ](https://guides.github.com/features/mastering-markdown/ ) 语法 %} {% checkbox red, 支持自定义颜色 %} {% checkbox green checked, 绿色 + 默认选中 %} {% checkbox yellow checked, 黄色 + 默认选中 %} {% checkbox cyan checked, 青色 + 默认选中 %} {% checkbox blue checked, 蓝色 + 默认选中 %} {% checkbox plus green checked, 增加 %} {% checkbox minus yellow checked, 减少 %} {% checkbox times red checked, 叉 %}
Radio
example.md: {% radio 纯文本测试 %} {% radio checked, 支持简单的 [markdown ](https://guides.github.com/features/mastering-markdown/ ) 语法 %} {% radio red, 支持自定义颜色 %} {% radio green, 绿色 %} {% radio yellow, 黄色 %} {% radio cyan, 青色 %} {% radio blue, 蓝色 %}
按钮和菜单 基础按钮 请将您的 Volantis 升级至 2.4 版本以上使用。
{% btn 样式参数(可选), 标题, 链接, 图标(可选) %}
样式参数
图标
第1个或者第2个参数包含 fa-
的那个被识别为图标。
example.md: 不设置任何参数的 {% btn 按钮, / %} 适合融入段落中。 regular 按钮适合独立于段落之外: {% btn regular, 示例博客, https://xaoxuu.com, fas fa-play-circle %} large 按钮更具有强调作用,建议搭配 center 使用: {% btn center large, 开始使用, https://volantis.js.org/v3/getting-started/, fas fa-download %}
不设置任何参数的 按钮 适合融入段落中。
regular 按钮适合独立于段落之外:
示例博客
large 按钮更具有强调作用,建议搭配 center 使用:
开始使用
富文本按钮 请将您的 Volantis 升级至 2.3 版本以上使用。
{% btns 样式参数 %} {% cell 标题, 链接, 图片或者图标 %} {% cell 标题, 链接, 图片或者图标 %} {% endbtns %}
样式参数位置可以写图片样式、布局方式,多个样式参数用空格隔开。
圆角样式
默认为方形
布局方式
默认为自动宽度,适合视野内只有一两个的情况。
参数 含义 wide 宽一点的按钮 fill 填充布局,自动铺满至少一行,多了会换行。 center 居中,按钮之间是固定间距。 around 居中分散 grid2 等宽最多2列,屏幕变窄会适当减少列数。 grid3 等宽最多3列,屏幕变窄会适当减少列数。 grid4 等宽最多4列,屏幕变窄会适当减少列数。 grid5 等宽最多5列,屏幕变窄会适当减少列数。
增加文字样式
可以在容器内增加 <b>标题</b>
和 <p>描述文字</p>
如果需要显示类似「团队成员」之类的一组含有头像的链接:
example.md: {% btns circle grid5 %} {% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% endbtns %}
或者含有图标的按钮:
example.md: {% btns rounded grid5 %} {% cell 下载源码, /, fas fa-download %} {% cell 查看文档, /, fas fa-book-open %} {% endbtns %}
圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
example.md: {% btns circle center grid5 %} <a href ='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1' > <i class ='fab fa-apple' > </i > <b > 心率管家</b > {% p red, 专业版 %} <img src ='https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png' > </a > <a href ='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1' > <i class ='fab fa-apple' > </i > <b > 心率管家</b > {% p green, 免费版 %} <img src ='https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png' > </a > {% endbtns %}
如果需要显示类似「团队成员」之类的一组含有头像的链接:
或者含有图标的按钮:
圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
请将您的 Volantis 升级至 2.4 版本以上使用。
容器 Tab 此插件移植自 NexT #tabs 。请将您的 Volantis 升级至 2.1 版本以上使用。
{% tabs tab-id %} <!-- tab tab-name --> ![](https://i.loli.net/2020/03/18/f5PQlWisvm9zbgK.jpg ) <!-- endtab --> <!-- tab tab-name --> 这里面写内容,支持的语法格式有限,请尽量<u > 不要</u > 写太过复杂的东西。 <!-- endtab --> {% endtabs %}
tab-id
必填,如果一个页面有多个 tabs 时,tab-id 不能重复。
tab-name
标签文本。
Folding 请将您的 Volantis 升级至 2.3 版本以上使用。
{% folding 参数(可选), 标题 %} ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ) {% endfolding %}
参数位置可以填写颜色和状态,多个参数用空格隔开。
颜色
blue, cyan, green, yellow, red
状态
状态填写 open
代表默认打开。
{% folding 查看图片测试 %} ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg) {% endfolding %} {% folding cyan open, 查看默认打开的折叠框 %} 这是一个默认打开的折叠框。 {% endfolding %} {% folding green, 查看代码测试 %} {% endfolding %} {% folding yellow, 查看列表测试 %} - haha - hehe {% endfolding %} {% folding red, 查看嵌套测试 %} {% folding blue, 查看嵌套测试2 %} {% folding 查看嵌套测试3 %} hahaha <span><img src='https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span> {% endfolding %} {% endfolding %} {% endfolding %}
查看图片测试 查看默认打开的折叠框 查看代码测试 {% folding green, 查看代码测试 %} 查看代码测试 {% endfolding %}
查看列表测试 查看嵌套测试 查看嵌套测试2 查看嵌套测试3 hahaha
多媒体 包括图片、音频、视频。
Image Image 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。请将您的 Volantis 升级至 2.6 版本以上使用。
{% image 链接, width=宽度(可选), alt=描述(可选) %}
图片宽度
阿拉伯数字 + px
example: 图片描述
纯文本,不能包含引号。
example.md: 添加描述: {% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, alt=每天下课回宿舍的路,承载了太多记忆。 %} 指定宽度: {% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px %} 指定宽度并添加描述: {% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px, alt=每天下课回宿舍的路,承载了太多记忆。 %}
Fancybox Fancybox 标签是一种针对一组图片应用场景的标签。请将您的 Volantis 升级至 2.2 版本以上使用。
{% fancybox 参数, 列数 %} ![图片描述 ](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg ) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg ) {% endfancybox %}
对齐方向
缩放
列数
逗号后面直接写列数,支持 2 ~ 8 列。设定列列数之后就是「多行多图」布局,此时图片默认左对齐。为了避免图片大小不一,建议搭配 stretch
来时图片放大填充。
一行一个图片
example.md: {% fancybox %} ![图片描述 ](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ) {% endfancybox %}
一行多个图片(不换行)
example.md: {% fancybox %} ![图片描述 ](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg ) ![图片描述 ](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg ) ![图片描述 ](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg ) {% endfancybox %}
多行多个图片(每行2~8个图片)
example.md: {% fancybox stretch, 4 %} ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg ) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg ) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg ) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg ) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg ) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg ) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg ) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg ) {% endfancybox %}
图片描述 一行多个图片(不换行)
多行多个图片(每行2~8个图片)
Audio 请将您的 Volantis 升级至 2.4 版本以上使用。
example.md: {% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}
Your browser does not support the audio tag. Video 请将您的 Volantis 升级至 2.3 版本以上使用。
单个视频
example.md: 多个视频
example.md: {% videos 对齐方向, 列数 %} {% video 视频链接 %} {% video 视频链接 %} {% video 视频链接 %} {% endvideos %}
对齐方向
列数
逗号后面直接写列数,支持 1 ~ 4 列。
100%宽度
example.md: {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
50%宽度
example.md: {% videos, 2 %} {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_ 0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_ 0341.mov %}{% endvideos %}
25%宽度
example.md: {% videos, 4 %} {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_ 0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_ 0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_ 0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_ 0341.mov %}{% endvideos %}
100%宽度
Your browser does not support the video tag.
50%宽度
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
25%宽度
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
APlayer 主题对 APlayer 插件的样式进行了兼容。安装插件:
npm i -S hexo-tag-aplayer
公式 MathJax公式 默认是不渲染的,如果文章内有公式,需要在 front-matter 中设置开启。
example.md: --- title: 渲染公式(MathJax) date: 2020-02-23 mathjax: true # false: 不渲染, true: 渲染, internal: 只在文章内部渲染,文章列表中不渲染 --- $$t+1=2$$ $$ \mbox{积累因子}=\begin{cases} 1+ni & \mbox{单利}\\\\ (1+i)^n & \mbox{复利} \end{cases} $$ $$ \begin{equation} \sum_{i=0}^n F_ i \cdot \phi (H, p_i) - \sum_ {i=1}^n a_i \cdot ( \tilde{x_ i}, \tilde{y_i}) + b_ i \cdot ( \tilde{x_i}^2 , \tilde{y_ i}^2 ) \end{equation} $$ $$ \begin{equation} \beta^*(D) = \mathop{argmin} \limits_{\beta} \lambda {||\beta||}^2 + \sum_{i=1}^n max(0, 1 - y_i f_{\beta}(x_i)) \end{equation} $$
示例效果 $$t+1=2$$
$$ \mbox{积累因子}=\begin{cases} 1+ni & \mbox{单利}\\ (1+i)^n & \mbox{复利} \end{cases} $$
$$ \begin{equation} \sum_{i=0}^n F_i \cdot \phi (H, p_i) - \sum_{i=1}^n a_i \cdot ( \tilde{x_i}, \tilde{y_i}) + b_i \cdot ( \tilde{x_i}^2 , \tilde{y_i}^2 ) \end{equation} $$ $$ \begin{equation} \beta^*(D) = \mathop{argmin} \limits_{\beta} \lambda {||\beta||}^2 + \sum_{i=1}^n max(0, 1 - y_i f_{\beta}(x_i)) \end{equation} $$
Hexo 标签 引用块 引用书上的句子
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
代码块 {% codeblock [title] [lang:language] [url] [link text] [additional options] %} code snippet {% endcodeblock %}
指定语言 [rectangle setX: 10 y: 10 width: 20 height: 20 ];
example.md: {% codeblock lang:objc %} [rectangle setX: 10 y: 10 width: 20 height: 20]; {% endcodeblock %}
附加说明 Array.map array.map(callback[, thisArg])
example.md: {% codeblock Array.map %} array.map(callback[, thisArg]) {% endcodeblock %}
行标、高亮 1 2 3 4 5 6 7 8 n=eval (input ()) if n==0 : print ("Hello World" ) elif n>0 : print ("He\nll\no \nWo\nrl\nd" ) else : for c in "Hello World" : print (c)
example.md: {% codeblock lang:python line_number:true mark:3,5,8 %} n=eval(input()) if n==0: print("Hello World") elif n>0: print("He\nll\no \nWo\nrl\nd") else: for c in "Hello World": print(c) {% endcodeblock %}
Pull Quote 在文章中插入 Pull quote
example.md: {% pullquote [class] %} content {% endpullquote %}
jsFiddle 在文章中嵌入 jsFiddle
example.md: {% jsfiddle shorttag [tabs] [skin] [width] [height] %}
Gist 在文章中嵌入 Gist,注意 :在国内无法加载。
example.md: {% gist gist_id [filename] %}
iframe 在文章中插入 iframe
example.md: {% iframe url [width] [height] %}
Image 在文章中插入指定大小的图片。
example.md: {% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}
Link 在文章中插入链接,并自动给外部链接添加 target="_blank"
属性。
example.md: {% link text url [external] [title] %}
Include Code 插入 source/downloads/code
文件夹内的代码文件。source/downloads/code
不是固定的,取决于你在配置文件中 code_dir
的配置。
example.md: {% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
示例 嵌入 test.js
文件全文
{% include_code lang:javascript test.js %}
只嵌入第 3 行
{% include_code lang:javascript from:3 to:3 test.js %}
嵌入第 5 行至第 8 行
{% include_code lang:javascript from:5 to:8 test.js %}
嵌入第 5 行至文件结束
{% include_code lang:javascript from:5 test.js %}
嵌入第 1 行至第 8 行
{% include_code lang:javascript to:8 test.js %}
引用文章 引用其他文章的链接。
{% post_path filename %} {% post_ link filename [title] [escape] %}
示例 引用这篇文章:主题更名为「Volantis」
example.md: 引用这篇文章:{% post_link news/2020-02-22 %}
文章摘要和截断 在文章中使用 <!-- more -->
,那么 <!-- more -->
之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。