页面配置

如无特殊说明,本页面的配置信息写在页面Front-matter

布局模板

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

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量。【详见官方文档】

字段含义值类型默认值
layout布局模版String-
title标题String-
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
permalink覆盖文章网址String-
music内部音乐控件详见【music】-
keywords页面关键词String-
description页面描述、摘要String-
author作者Stringconfig.author
author_url作者链接Stringconfig.url
avatar作者头像Stringconfig.avatar
cover是否显示封面Booltrue
meta文章或页面的meta信息Bool, Arraytheme.meta
sidebar页面侧边栏Bool, Arraytheme.sidebar
body页面主体元素Arraytheme.body

layout=post时特有的字段:

字段含义值类型默认值
categories分类String, Array-
tag标签String, Array-
toc是否生成目录Booltrue
popular_posts显示相关文章Booltrue
mathjax是否渲染公式Bool, Stringfalse
top是否置顶Boolfalse
thumbnail缩略图Stringfalse
icons图标Array[]

小提示

icons字段设置的图标将会在归档页面文章标题后面显示,目的是标记出需要特别注意的文章,例如:

1
2
3
4
5
6
---
icons: [fas fa-fire accent]
---
可以通过 red/blue/green/yellow/orange/theme/accent 来设置图标的颜色
theme为主题色: @theme_main
accent为链接高亮颜色: @color_text_highlight

可以设置多个图标:

1
2
3
---
icons: [fas fa-star yellow, fas fa-fire accent]
---

layout=links时特有的字段:

字段含义值类型默认值
links友链详见【links】-

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

独立页面

关于页面

创建source/about/index.md,内容为:

1
2
3
4
5
6
7
8
---
layout: page
title: 关于
body: [article, grid, comments]
valine:
placeholder: 有什么想对我说的呢?
sidebar: false
---

分类页面

创建source/categories/index.md,内容为:

1
2
3
4
5
---
layout: category
index: true
title: 所有分类
---

标签页面

创建source/tags/index.md,内容为:

1
2
3
4
5
---
layout: tag
index: true
title: 所有标签
---

列表页面

创建source/mylist/index.md,内容为:

1
2
3
4
5
---
layout: list
type: mylist
index: true
---

结果就是筛选出所有文章中type: mylist的文章。

友链页面

创建source/friends/index.md,内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
---
layout: links # 必须
title: 我的朋友们 # 可选,这是友链页的标题
links:
- group: 技术大佬
icon: fas fa-user-tie
items:
- name: # 博客名
avatar: # 头像链接
url: # 博客链接
backgroundColor: '#3E74C9' # 卡片背景颜色
textColor: '#fff' # 卡片文字颜色
tags: # 标签
- 标签1
- 标签2
- group: 分组2
icon: fas fa-user-tie
items:
- name: # 博客名
avatar: # 头像链接
url: # 博客链接
backgroundColor: '#3E74C9' # 卡片背景颜色
textColor: '#fff' # 卡片文字颜色
tags: # 标签
- 标签1
- 标签2
---

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

404页面

创建source/404.md,内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
---
layout: page
title: 404 Not Found
body: [article, comments]
meta:
header: false
footer: false
sidebar: false
valine:
path: /404.html
placeholder: 请留言告诉我您要访问哪个页面找不到了
---

# <center>**404 Not Found**</center>

<br>

<center>**很抱歉,您访问的页面不存在**</center>
<center>可能是输入地址有误或该地址已被删除</center>

<br>
<br>

页面元素排列

默认是文章+评论:

1
2
3
---
body: [article, comments]
---

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

1
2
3
---
body: [article, related_posts, comments]
---

文章属性

文章置顶

在Front-matter中设置以下值:

1
top: true

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

1
top: 近期更新

文章分类

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

多级分类

1
categories: [分类A, 分类B]

或者

1
2
3
categories:
- 分类A
- 分类B

并列分类

1
2
3
categories:
- [分类A]
- [分类B]

多级+并列分类

1
2
3
categories:
- [分类A, 分类B]
- [分类C, 分类D]

文章BGM

标题右边显示迷你音乐播放器,支持的字段有:servertypeid,取值详见【进阶设定 -> 第三方服务 -> APlayer】。

示例

1
2
3
4
5
6
7
---
music:
enable: true # true(文章内和文章列表都显示) internal(只在文章内显示)
server: netease # netease(网易云音乐)tencent(QQ音乐) xiami(虾米) kugou(酷狗)
type: song # song (单曲) album (专辑) playlist (歌单) search (搜索)
id: 26664345 # 歌曲/专辑/歌单 ID
---

实际效果见:《文章专属BGM》

文章摘要

第一优先级是寻找正文中的<!--more-->,其前面的为摘要,可以显示在文章列表中,后面的是正文。如果没有,则寻找Front-matter中的description字段,以其为摘要。如果还没有,就没有摘要。

如果使用<!-- more -->来实现摘要,则<!-- more -->前后一定要有空行,不然可能导致显示错位。

1
2
3
4
5
这是摘要

<!-- more -->

这是正文

是否开启渲染MathJax

取值含义
false不渲染,默认值
true渲染
internal只在文章内部渲染,文章列表中不渲染
1
2
3
---
mathjax: true
---

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

显示meta标签

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

在Front-matter找到或者新增meta

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

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

1
2
3
4
5
---
meta:
header: false
footer: false
---

设置文章作者

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

1
2
3
4
5
6
---
author:
name: 作者
avatar: https://img.vim-cn.com/a1/d53c11fb5d4fd69529bc805d385fe818feb3f6.png
url: https://baidu.com
---

是否要显示封面

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

1
2
3
---
cover: false
---

引入外部文章

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
layout: post
date: 2017-07-05
title: [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
- Hexo
author:
name: xaoxuu
avatar: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/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)

<!--more-->

显示侧边栏

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

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

1
2
3
---
sidebar: []
---

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

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




评论