写作格式模板

主题支持 的标签。

文本属性

format
<p 属性参数>文本内容</p>

彩色文字

在一段话中方便插入各种颜色的标签,包括: 红色 黄色 绿色 青色 蓝色 灰色

在一段话中方便插入各种颜色的标签,包括:<red>红色</red>、<yellow>黄色</yellow>、<green>绿色</green>、<cyan>青色</cyan>、<blue>蓝色</blue>、<gray>灰色</gray>。

超大文字

示例效果

Volantis

A Wonderful Theme for Hexo

<p center large>Volantis</p>
<p center small>A Wonderful Theme for Hexo</p>

目前支持的尺寸有: smalllargehuge ,布局有: leftcenterright

插入简单按钮

目前共支持3种尺寸的按钮。

示例效果

第1种 按钮 适合融入段落中。

第2种按钮适合独立于段落之外:

示例博客

第3种按钮更具有强调作用,建议搭配 center 使用:

开始使用

第1种 <btn>[按钮](/)</btn> 适合融入段落中。

第2种按钮适合独立于段落之外:

<btn regular>[<i class='fas fa-play-circle'></i> 示例博客](https://xaoxuu.com)</btn>

第3种按钮更具有强调作用,建议搭配 center 使用:

<btn center large>[<i class='fas fa-download'></i> 开始使用](/)</btn>

插入高级按钮

如果需要显示类似「团队成员」之类的一组含有头像的链接:

或者含有图标的按钮: 下载 文档
{% raw %}
<btns circle grid5>
<a href='https://gyl-coder.top'><img src='https://cdn.jsdelivr.net/gh/gyl-coder/blogImgs/images/touxiang.jpg'>xaoxuu</a>
<a href='https://gyl-coder.top'><img src='https://cdn.jsdelivr.net/gh/gyl-coder/blogImgs/images/touxiang.jpg'>xaoxuu</a>
<a href='https://gyl-coder.top'><img src='https://cdn.jsdelivr.net/gh/gyl-coder/blogImgs/images/touxiang.jpg'>xaoxuu</a>
<a href='https://gyl-coder.top'><img src='https://cdn.jsdelivr.net/gh/gyl-coder/blogImgs/images/touxiang.jpg'>xaoxuu</a>
</btns>
或者含有图标的按钮:
<btns rounded grid5>
<a href='https://gyl-coder.top/hexo-theme-volantis/'><i class='fas fa-download'></i>下载源码</a>
<a href='https://volantis.js.org/'><i class='fas fa-book-open'></i>查看文档</a>
</btns>
{% endraw %}
Tips:
{% raw %} 和 {% endraw %} 之间的内容是不解析的,只能写HTML标签。

自定样式

<btns 样式>
很多按钮
</btns>

图片样式

rounded
circle

布局方式

wide
fill
center
around
grid3
grid4
grid5

增加文字样式

可以在 <btns></btns> 容器内增加 <p>标题</p><p>描述文字</p>

图文并茂的例子

圆形图标 + 标题 + 描述 + 图片 + 网格4列 + 居中

心率管家

专业版

心率管家

免费版

上例写法如下
{% raw %}
<btns circle center grid4>
<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>专业版</p>
  <img src='https://cdn.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>免费版</p>
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
</btns>
{% endraw %}

图片放大

  1. 在主题配置文件中开启插件。
plugins:
  fancybox:
    css: '//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css'
    js: '//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js'
  1. 将需要放大预览的图片用 <fancybox></fancybox> 包含起来。
例如这个图是不能点开的:
![](https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png)
而这个图是可以点开的:
<fancybox>
<img src='https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png'>
</fancybox>
示例效果

例如这个图是不能点开的:

而这个图是可以点开的:

注意 」这样写是无效的:
<fancybox>
![](https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png)
</fancybox>

如需一行显示多图,将多个图片同时放在一对 <fancybox></fancybox> 中即可:

<fancybox>
<img src='https://i.loli.net/2019/08/20/sgultOmRLXrwfA3.png'> 
<img src='https://i.loli.net/2019/08/20/a2mCq871PwfbZEG.png'> 
<img src='https://i.loli.net/2019/08/20/Zdz2cTphOlu3XKf.png'> 
<img src='https://i.loli.net/2019/08/20/87UdSGaMuevV1iF.png'> 
<img src='https://i.loli.net/2019/08/20/HEusSLBgG3XC1nN.png'>
</fancybox>

Tab切换

这部分功能借鉴自 NexT 主题,但外观风格上有所不同。

{% tabs tabname %}

<!-- tab Tab1 -->

这里面写内容,支持的语法格式有限,请尽量<u>不要</u>写太过复杂的东西。

<!-- endtab -->

<!-- tab Tab2 -->

这里面写内容,支持的语法格式有限,请尽量<u>不要</u>写太过复杂的东西。

<!-- endtab -->

{% endtabs %}

这里面写内容,支持的语法格式有限,请尽量 不要 写太过复杂的东西。

这里面写内容,支持的语法格式有限,请尽量 不要 写太过复杂的东西。

表格滚动

一般来说,表格默认会横向铺满,格子内文字过多会自动换行。但是当列数比较多时,每一列都很窄,推荐使用支持滚动的表格样式,用一对 <overflow></overflow> 把表格包起来。

<overflow>

md表格内容

</overflow>
示例
类别 排序方法 平均时间复杂度 最优时间复杂度 最差时间复杂度 空间复杂度 稳定性 复杂性
插入排序 直接插入 O(n 2 ) O(n) O(n 2 ) O(1) 稳定 简单
插入排序 希尔排序 O(n 1.3 ) O(n) O(n 2 ) O(1) 不稳定 复杂
选择排序 直接选择 O(n 2 ) O(n 2 ) O(n 2 ) O(1) 不稳定 简单
选择排序 堆排序 O(nlog 2 n) O(nlog 2 n) O(nlog 2 n) O(1) 不稳定 复杂
交换排序 冒泡排序 O(n 2 ) O(n) O(n 2 ) O(1) 稳定 简单
交换排序 快速排序 O(nlog 2 n) O(nlog 2 n) O(n 2 ) O(nlog 2 n)~O(n) 不稳定 复杂
归并排序 O(nlog 2 n) O(nlog 2 n) O(nlog 2 n) O(n) 稳定 复杂
基数排序 O(d(r+n)) O(d(r+n)) O(d(r+n)) O(rd+n) 稳定 复杂
blog/source/_posts/example.md:
<overflow>

| 类别     | 排序方法 | 平均时间复杂度       | 最优时间复杂度       | 最差时间复杂度       | 空间复杂度                  | 稳定性 | 复杂性 |
| :-------- | :-------- | :-------------------- | :-------------------- | :-------------------- | :--------------------------- | :------ | :------ |
| 插入排序 | 直接插入 | O(n<sup>2</sup>)     | O(n)                 | O(n<sup>2</sup>)     | O(1)                        | 稳定   | 简单   |
| 插入排序 | 希尔排序 | O(n<sup>1.3</sup>)   | O(n)                 | O(n<sup>2</sup>)     | O(1)                        | 不稳定 | 复杂   |
| 选择排序 | 直接选择 | O(n<sup>2</sup>)     | O(n<sup>2</sup>)     | O(n<sup>2</sup>)     | O(1)                        | 不稳定 | 简单   |
| 选择排序 | 堆排序   | O(nlog<sub>2</sub>n) | O(nlog<sub>2</sub>n) | O(nlog<sub>2</sub>n) | O(1)                        | 不稳定 | 复杂   |
| 交换排序 | 冒泡排序 | O(n<sup>2</sup>)     | O(n)                 | O(n<sup>2</sup>)     | O(1)                        | 稳定   | 简单   |
| 交换排序 | 快速排序 | O(nlog<sub>2</sub>n) | O(nlog<sub>2</sub>n) | O(n<sup>2</sup>)     | O(nlog<sub>2</sub>n)~O(n) | 不稳定 | 复杂   |
|          | 归并排序 | O(nlog<sub>2</sub>n) | O(nlog<sub>2</sub>n) | O(nlog<sub>2</sub>n) | O(n)                        | 稳定   | 复杂   |
|          | 基数排序 | O(d(r+n))            | O(d(r+n))            | O(d(r+n))            | O(rd+n)                     | 稳定   | 复杂   |

</overflow>

折叠区域

One More Thing :point_down:

懒加载占位图如果喜欢请拿去: 图片地址

blog/source/_posts/example.md:
{% raw %}
<details>
<summary>
One More Thing :point_down:
</summary>
{% endraw %}

懒加载占位图如果喜欢请拿去:<btn>[图片地址](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/placeholder/d570170f4f12e1ee829ca0e85a7dffeb77343a.svg)</btn>

{% raw %}</details>{% endraw %}

渲染公式(MathJax)

默认是不渲染的,如果文章内有公式,需要在 front-matter 中设置开启。

blog/source/_posts/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}

$$

如果公式仍无法正确渲染可以阅读 @MicDZ 的这篇文章: 《在material-x上使用KaTeX》

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];
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

附加说明

Array.map
array.map(callback[, thisArg])
blog/source/_posts/example.md:
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

行标、高亮

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)
{% 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

{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

在文章中嵌入 Gist 注意 :在国内无法加载。

{% gist gist_id [filename] %}

iframe

在文章中插入 iframe

{% iframe url [width] [height] %}

Image

在文章中插入指定大小的图片。

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

Link

在文章中插入链接,并自动给外部链接添加 target="_blank" 属性。

{% link text url [external] [title] %}

Include Code

插入 source/downloads/code 文件夹内的代码文件。 source/downloads/code 不是固定的,取决于你在配置文件中 code_dir 的配置。

{% 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] %}
示例

引用这篇文章:

引用这篇文章:{% post_link 2020-02-22 %}

文章摘要和截断

在文章中使用 <!-- more --> ,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。

更多请见Hexo官方文档: #标签插件

布局模板

取值 含义
page 独立页面
post 文章页面
category 分类页面
tag 标签页面
links 友链页面
list 列表页面

::: warning

post 页面几乎与 page 页面相同,但是,post 页面更适用于文章,网页向下滚动时导航栏会上翻显出文章标题。

:::

front-matter

front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量。

查看全部取值
字段 含义 值类型 默认值
layout 布局模版 String -
title 标题 String -
seotitle 网页标题 String page.title
date 创建时间 Date 文件创建时间
updated 更新日期 Date 文件修改时间
permalink 覆盖文章网址 String -
music 内部音乐控件 [Object] -
robots robots String -
keywords 页面关键词 String -
description 页面描述、摘要 String -
cover 是否显示封面 Bool true
meta 文章或页面的meta信息 Bool, Array theme.layout.*.meta
sidebar 页面侧边栏 Bool, Array theme.layout.*.sidebar
body 页面主体元素 Array theme.layout.on_page.body
mathjax 是否渲染公式 Bool, String false
thumbnail 缩略图 String false
icons 图标 Array []

没有 seotitle 时,以 title 作为网页标题。

layout:post 时特有的字段:

字段 含义 值类型 默认值
author 文章作者 [Object] config.author
categories 分类 String, Array -
tags 标签 String, Array -
toc 是否生成目录 Bool true
top 是否置顶 Bool false

author

字段 含义 值类型 默认值
name 作者名 String config.author
avatar 头像 String config.avatar
url 链接 String config.url

music

字段 是否必须 值类型
server netease, tencent, kugou, xiami, baidu
type song, playlist, album, search, artist
id song id / playlist id / album id / search keyword

更多请见 Hexo 官方文档: #front-matter

独立页面

除了归档页面是自动生成的,其它独立页面都需要手动创建md文件。

归档页面

归档页面是自动生成的,并且初始化的时候已经生成,路径如下:

# Directory
archive_dir: archives

关于页面

---
layout: page
title: 关于
meta:
  header: []
  footer: []
sidebar: []
valine:
  placeholder: 有什么想对我说的呢?
---

下面写关于自己的内容

分类页面

---
layout: category
index: true
title: 所有分类
---

标签页面

---
layout: tag
index: true
title: 所有标签
---

列表页面

---
layout: list
group: mylist
index: true
---

结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。

上述中的 mylist 只是示例,你可以用任何名字作为一个列表。

友链页面

---
layout: links     # 必须
title: 我的朋友们   # 可选,这是友链页的标题
links:
  - group: 分组1
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
  - group: 分组2
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
---

这里写友链上方的内容。

<!-- more -->

这里可以写友链页面下方的文字备注,例如自己的友链规范、示例等。

姓名、头像、链接是必填项,其它选填。

404页面

---
layout: page
title: 404 Not Found
body: [article, comments]
meta:
  header: []
  footer: []
sidebar: []
valine:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---

<center>
<p huge>404</p>

<b>很抱歉,您访问的页面不存在</b>

可能是输入地址有误或该地址已被删除

</center>

页面元素排列

默认是文章+评论:

front-matter
---
body: [article, comments]
---

如果你想把相关文章卡片显示在评论前,可以这样写:

front-matter
---
body: [article, related_posts, comments]
---

如果想全局修改,在主题配置文件中的 layout.on_page.body 中设置。

文章属性

文章置顶

在 front-matter 中设置以下值:

front-matter
top: true

如果想自定义置顶标签的文字,可以直接设置为字符串,例如:

front-matter
top: 近期更新

文章分类

多个分类有两种关系,一种是层级(等同于文件夹),一种是并列(等同于标签)。

多级分类:

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more --> ,前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

::: warning

注意: <!-- more --> 前后一定要有空行,不然可能导致显示错位。

:::

设置文章作者

由于支持多作者共同维护一个博客,所以可以设置单独一篇文章的作者:

front-matter
---
author:
  name: 作者
  avatar: https://img.vim-cn.com/a1/d53c11fb5d4fd69529bc805d385fe818feb3f6.png
  url: https://baidu.com
---

显示迷你音乐播放器

标题右边显示迷你音乐播放器,支持的字段有: servertypeid

front-matter
---
music:
  server: netease   # netease, tencent, kugou, xiami, baidu
  type: song        # song, playlist, album, search, artist
  id: 16846091      # song id / playlist id / album id / search keyword
---

实际效果见: https://volantis.js.org/contributors/

APlayer配置: https://github.com/metowolf/MetingJS

显示 meta 标签

文章顶部和底部的日期、分类、更新日期、标签、分享等属于 meta 标签。

顶部的为 header ,底部的为 footer ,取值见主题配置文件中的 meta 库。

front-matter
---
# 默认的meta信息,文章中没有配置则按照这里的配置来显示,设置为false则不显示
# 其中,title只在header中有效,music和thumbnail无需在这里设置,文章中有则显示
# 如果tags放置在meta.header中,那么在post列表中不显示(因为卡片下方已经有了)
meta:
  header: [title, author, date, category, counter, top]
  footer: [updated, tags, share]
---

像404、关于页面就可以完全隐藏:

front-matter
---
meta:
  header: []
  footer: []
---

标题右边显示缩略图

front-matter
---
thumbnail: https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png
---

缩略图仅在文章列表和文章页面显示,不会在归档页面显示。

标题右边显示图标

front-matter
---
icons: [fas fa-fire red, fas fa-star green]
---

图标仅在归档页面中显示,可以用来标注热门文章。

可以通过 red / blue / green / yellow / orange / theme / accent 来设置图标的颜色

theme 为主题色: @theme_main

accent 为链接高亮颜色: @color_text_highlight

meta 区域显示外链按钮

例如当前文档页面的设置:

front-matter
---
meta:
  footer: [btns]
btns:
  repo: https://gyl-coder.top/hexo-theme-volantis
  bug: https://gyl-coder.top/hexo-theme-volantis/issues/new?assignees=&labels=BUG&template=bug-report.md
  doubt: https://gyl-coder.top/hexo-theme-volantis/issues/new?labels=疑问&template=question-report.md
  idea: https://gyl-coder.top/hexo-theme-volantis/issues/new?assignees=&labels=建议&template=feature-request.md
---

按钮的颜色、图标、标题在主题配置文件中设置。

是否要显示封面

如果某个页面需要封面,可以这样写:

front-matter
---
cover: true
---

引入外部文章

利用 permalink ,搭配自定义的文章作者信息,你可以在文章列表中显示外部文章或者网址,例如:

front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author:
  name: xaoxuu
  avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
permalink: https://xaoxuu.com/blog/2017-07-05-hexo-blog/
---

![](https://img.vim-cn.com/d9/a9af7dc49fc0af8ca3e6dd2450a2f7095a87db.png)

显示侧边栏

通过自由设置边栏卡片来删减对应页面的冗余信息,提高有价值的信息在页面中的权重。

如果某个页面不需要侧边栏,可以这样写:

front-matter
---
sidebar: []
---

某个页面想指定显示某几个侧边栏,就这样写:

front-matter
---
sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件
---

关闭评论

可以

front-matter
---
comments: false
---

也可以

front-matter
---
body: [article]
---

只显示留言板

如果你想创建一个只有留言板的页面

front-matter
---
body: [comments]
---
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章