主题配置

如无特殊说明,本页面的配置信息写在主题的config.yml文件中

页面默认布局

这里的“布局”是指放置什么模块、顺序如何,具体的宽高等细节请在less中自定义。页面配置的Front-matter中也可以配置一部分布局。

在主题的配置文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
layout:
# 文章列表(主页、自定义的列表)布局
posts:
# 列表中每一篇文章的meta信息
meta: [title, author, date, categories, top]
# 列表类页面的侧边栏
sidebar: [author, list, grid, category, tagcloud]
# 文章页面布局
article:
# 文章页面主体元素,你也可以在页面的Front-matter中设置
body: [article, comments]
# 默认的meta信息,文章中没有配置则按照这里的配置来显示,设置为false则不显示
# 其中,title只在header中有效,music和thumbnail无需在这里设置,文章中有则显示
# 如果tags放置在meta.header中,那么在post列表中不显示(因为卡片下方已经有了)
header: [title, author, date, categories, counter, top]
footer: [updated, tags, share]
# 文章页面的侧边栏
sidebar: [author, toc, grid, category, tagcloud, list, related_posts]
# 其他的页面布局暂时等于文章列表

设置封面

在主题的配置文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# page的封面
cover:
scheme: search # 后期将会提供多种封面方案
# height: half # full(默认值): 首页封面占据整个第一屏幕,其他页面占半个屏幕高度, half: 所有页面都封面都只占半个屏幕高度
title: "xaoxuu"
# logo: assets/logo.png # logo和title只显示一个,若同时设置,则只显示logo
# search_placeholder: '搜索'
# 主页封面菜单
features:
- name: 博文
icon: fas fa-rss
url: /
- name: 项目
icon: fas fa-code-branch
url: projects/
- name: 归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
- name: 关于
icon: fas fa-info-circle
url: about/
rel: nofollow

设置导航栏

在主题的配置文件中:

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
30
31
32
33
34
35
36
37
38
39
40
41
# 桌面端导航栏菜单
menu_desktop:
- name: Cocoa Dev
icon: fab fa-apple
url: blog/categories/dev/cocoa/
- name: Dev
icon: fas fa-laptop-code
url: blog/categories/dev/
- name: Life
icon: fas fa-coffee
url: blog/categories/life/
rel: nofollow

# 移动端导航菜单(从右上角的按钮点击展开)
menu_mobile:
- name: 近期文章
icon: fas fa-clock
url: /
- name: 文章归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
- name: 开源项目
icon: fas fa-code-branch
url: projects/
- name: 歌单分享
icon: fas fa-compact-disc
url: music/
rel: nofollow
- name: 我的友链
icon: fas fa-link
url: friends/
rel: nofollow
- name: 主题文档
icon: fas fa-book
url: https://xaoxuu.com/wiki/material-x/
rel: nofollow
- name: 关于小站
icon: fas fa-info-circle
url: about/
rel: nofollow

其中 icon 是 fontawesome 图标名,你要显示什么图标,去 fontawesome.com 找免费版的就可以了。

设置侧边栏

字段:widgets

侧边栏小部件显示什么、显示多少个、顺序如何完全由博主给定的顺序决定。
自定显示的方法详见【主题配置 -> 页面默认布局】以及【页面配置 -> 显示侧边栏】

通用字段

如无特殊说明,所有的小部件都至少支持下面这些通用字段:

字段含义是否必须值类型默认值
widget表示这个小部件是什么类型详见【widget枚举值】plain
enable是否启用Booltrue
icon左上角的图标String‘’
title标题String‘’
more右上角的按钮详见【more】-

字段:widget 代表小部件的类型,取值有以下几种:

取值含义
author博主信息小部件
category文章分类小部件
tagcloud标签云小部件
toc文章目录小部件
music音乐小部件
plain纯文本小部件
list列表小部件

字段:more 小部件右上角的按钮

字段含义是否必须
icon按钮图标
url按钮的链接
animate按钮hover时的动画
targeta标签的target属性
rela标签的rel属性

字段:animate 取值有以下几种:

取值含义
rotate90顺时针旋转90度

博主信息小部件

博主信息小部件不支持上述的通用字段中的icontitlemore,以下只显示博主信息小部件特有字段:

字段含义是否必须值类型默认值
avatar头像String‘’
title标题String‘’
body正文String‘’
social社交信息Boolfalse
jinrishici今日诗词Bool,Stringfalse

在侧边栏author小部件中找到或者新增jinrishici字段。

取值含义
false不加载,不显示
true显示,当请求失败时显示config.title
String显示,当请求失败时显示String

在博客根目录的配置文件中:

1
2
3
4
5
6
# 侧边栏小部件
widgets:
- widget: author
avatar: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/avatar/avatar.png
jinrishici: 柳暗花明又一村
social: true

纯文本小部件

字段含义是否必须值类型默认值
widget表示这个小部件是什么类型必须是’plain’plain
body正文内容,支持markdown语法。markdown‘’

列表小部件

字段含义是否必须值类型默认值
widget表示这个小部件是什么类型必须是’list’plain
rows每一行元素详见【rows】-

rows:

字段含义是否必须值类型默认值
name名称String‘’
img方形图片否,不设置时是空白String‘’
avatar圆形图片否,不设置时是空白String‘’
icon图标否,不设置时是空白String‘’
url链接String‘’
desc描述文字String‘’
targeta标签的target属性String‘’
rela标签的rel属性String‘’

注意:一行的img、avatar和icon字段如果提供了多个,最多只会显示一个。

文章分类小部件

字段含义是否必须值类型默认值
widget表示这个小部件是什么类型必须是’category’plain

标签云小部件

字段含义是否必须值类型默认值
widget表示这个小部件是什么类型必须是’tagcloud’plain

音乐小部件

字段含义是否必须值类型默认值
widget表示这个小部件是什么类型必须是’music’plain

字段以及取值详见【第三方服务 -> APlayer】

TOC目录小部件

没有特有字段,并且不支持通用字段中的more,因为其右上角的按钮具有特殊作用。

示例

在主题的配置文件中:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
layout:
# 文章列表(主页、自定义的列表布局)布局
posts:
# 每一篇文章的meta信息
meta: [title, author, date, categories, top]
# 侧边栏
sidebar: [author, grid, category, tagcloud, list]
# 文章页面布局
article:
# 主体元素,你也可以在页面的Front-matter中设置
body: [article, comments]
# 默认的meta信息,文章中没有配置则按照这里的配置来显示,设置为false则不显示
# 其中,title只在header中有效,music和thumbnail无需在这里设置,文章中有则显示
# 如果tags放置在meta.header中,那么在post列表中不显示(因为卡片下方已经有了)
header: [title, author, date, categories, top]
footer: [updated, tags, share]
# 侧边栏(文章)
sidebar: [toc, related_posts]
# 其他的页面布局暂时等于文章列表


# 侧边栏小部件配置
sidebar:
- widget: author
avatar: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/avatar/avatar.png
social: true
- widget: toc
- widget: grid
icon: fas fa-map-signs
title: 站内导航
rows:
- name: 近期文章
icon: fas fa-clock
url: /
- name: 文章归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
- name: 项目Wiki
icon: fas fa-landmark
url: wiki/
# - name: 歌单分享
# icon: fas fa-compact-disc
# url: music/
# rel: nofollow
- name: 我的友链
icon: fas fa-link
url: friends/
rel: nofollow
- name: 主题文档
icon: fas fa-book
url: https://xaoxuu.com/wiki/material-x/
rel: nofollow
- name: 关于小站
icon: fas fa-info-circle
url: about/
rel: nofollow
- widget: category
more:
icon: fas fa-expand-arrows-alt
url: blog/categories/
rel: nofollow
- widget: tagcloud
icon: fas fa-tags
more:
icon: fas fa-expand-arrows-alt
url: blog/tags/
rel: nofollow

社交信息

在主题的配置文件中:

1
2
3
4
5
6
7
8
# 页脚社交信息
social:
- icon: fas fa-envelope
url: mailto:[email protected]
- icon: fab fa-github
url: https://github.com/xaoxuu
- icon: fas fa-music
url: https://music.163.com/#/user/home?id=63035382

这些社交按钮也会同时出现在侧边栏头像下方,可以在侧边栏的配置中设置不显示。

分享按钮

在主题的配置文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 分享按钮
# 当id为qrcode时需要安装插件 npm i -S hexo-helper-qrcode
share:
- id: qq
name: QQ好友
img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/qq.png
- id: qzone
name: QQ空间
img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/qzone.png
# - id: qrcode
# name: 微信
# img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/wechat.png
- id: weibo
name: 微博
img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/weibo.png
# - id: qrcode
# name: QRcode
# img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/qrcode.png

目前二维码分享在部分浏览器中无法使用。

设置页脚

在主题的配置文件中:

1
footer: '这是页脚文字,支持**markdown**语法。'



评论