进阶设定

选择一种风格

在主题的配置文件中:

1
2
# style: material    # 导航栏和标题栏背景是主题色
style: pure # 导航栏和标题栏背景与文本区域同色

自定样式

注意

主题默认支持并开启了CDN服务,如果你需要对样式进行DIY,请在主题配置文件的最上方info中删掉style的CDN链接。例如:

1
2
3
4
5
6
7
8
9
10
11
############################### 基本信息 ###############################
info:
name: Material X
docs: https://xaoxuu.com/wiki/material-x/
cdn: # 把对应的那一行注释掉就使用本地的文件
css:
# style: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/css/style.css
js:
app: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/js/app.js
search: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/js/search.js
volantis: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/js/volantis.min.js

自定义字体

可以使用本地字体和任意CDN字体。CDN字体的使用方法:

themes/material-x/source/less/_fonts.less 文件中:

1
2
3
4
5
6
7
@font-face{
font-family: 'Varela Round';
src: url(https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/VarelaRound/VarelaRound-Regular.ttf);
font-weight: normal;
font-style: normal;
}
@fontfamily_base: 'Varela Round', ...

选择字体源


目前主题默认使用的字体源@xaoxuu/cdn-fonts是我专门为存放字体建的一个仓库,由jsdelivr提供CDN服务,目前已经收录20余种精选字体。如果你想添加某个喜爱的字体,可以提交到这里:https://github.com/xaoxuu/cdn-fonts/

调整字号

themes/material-x/source/less/_fonts.less 文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// base
@fontsize_base: 16px;
@fontsize_small: @fontsize_base * 0.875;
@lineheight_base: 1.7;
// title
@fontsize_h1: @fontsize_base * 1.5;
@fontsize_h2: @fontsize_base * 1.4;
@fontsize_h3: @fontsize_base * 1.2;
@fontsize_h4: @fontsize_base * 1.1;
@fontsize_h5: @fontsize_base * 1;
@fontsize_h6: @fontsize_small;
// article
@fontsize_article_title: @fontsize_h1 * 1.2;
@fontsize_article_title_phone: @fontsize_h2;

调整布局

themes/material-x/source/less/_layout.less 文件中:

文字对其方向

1
2
3
@text_align_h1: left;
@text_align_h2: left;
@text_align_h3: left;

间距、尺寸等

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
// start: 间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@gap: 16px;
// end: 间距 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


// start: 布局尺寸 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@on_phone: 580px;
@on_pad: 768px;
@on_laptop: 1024px; // 1024 + 285
@on_desktop: 1350px;
// container
@width_container: 1080px;
@on_modal_threshold: 680px;
// 侧边栏宽度
@width_sidebar: 285px;
@width_sidebar_m: 240px;
// 搜索框的宽度,建议和侧边栏宽度保持一致
@width_searchbar: @width_sidebar;
@width_searchbar_m: @width_sidebar_m;
// 搜索框的高度,建议不要超出导航栏的高度
@height_searchbar: 40px;
@searchbar_height_cover: 44px;
// 一个cell的高度
@height_cell: 36px;
// end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


// start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 导航栏高度
@height_navbar: 64px;
@fontsize_logo: @fontsize_base * 1.2;
@fontsize_header_switcher: 1.3em;
@fontsize_header: 1em;
// 定位条和页面加载的进度条的高度
@loading_height: 2px;
// end: 导航栏 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


// start: 圆角 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@border_radius: 12px; // 圆角半径,可以根据心情随时调整风格
@border_radius_line: 4px; // 线的宽度和滚动条的宽度
@border_radius_code_block: 4px; // 引用、代码块的圆角

@border_radius_searchbar: 8px; // 搜索框的圆角半径,可以根据心情随时调整风格
// end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

调整配色

themes/material-x/source/less/_color.less 文件中:

一个简单的例子

1
2
3
4
5
6
7
8
// 网页背景颜色
@theme_background: #EFEFEF;
// @theme_background: #454545; // 暗色主题
// 主题色
@theme_main: #1BC3FB;
// 卡片背景颜色
@theme_cardbg: white;
// @theme_cardbg: #555; // 暗色主题

如果你想更自由地定制颜色,可以修改这里的几项

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
// 背景色 ----------------
// 导航栏背景,默认和主题色保持一致
@color_bg_navbar: @theme_main;
// 代码的背景色
@color_bg_code: fade(@theme_main, 10%);
// 代码块的背景色
@color_bg_code_block: #F6F7F8;
// 引用的颜色
@color_bg_quote: @theme_main;
// 选中部分文字的背景颜色
@color_bg_selection: fade(@color_md_blue, 20%);

// 文字颜色 ----------------
// 标题文字颜色(h1/h2)
@color_text_header: @theme_main;
// 标题文字颜色(h3)
@color_text_h3: darken(@color_text_main, 20%);
// 链接颜色
@color_text_link: @color_md_deep_orange;
// 链接高亮颜色
@color_text_highlight: @theme_main;
// 在主题色中显示的文本(一般为白或深灰)
@color_text_in_header: white;
// 正文文字颜色
@color_text_main: @dark;
// @color_text_main: white; // 暗色主题

使用CDN

对于大部分将博客deploy到GitHub的用户来说,直接加载本地资源速度比较慢,可以使用jsdelivr为开源项目提供的CDN服务。

主题默认支持并开启了CDN服务,如果你需要对样式进行DIY,请关闭style文件的CDN。

在主题的配置文件中:

1
2
3
4
5
6
7
8
9
10
info:
name: Material X
docs: https://xaoxuu.com/wiki/material-x/
cdn: # 把对应的那一行注释掉就使用本地的文件
css:
style: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/css/style.css
js:
app: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/js/app.js
search: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/js/search.js
volantis: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/js/volantis.min.js

如果你把对应的文件上传到自己的CDN服务器,可以把对应的链接改为自己的CDN链接。

第三方服务

Fancybox图片预览

将需要放大预览的图片用<fancybox></fancybox>包含起来。
例如这个图是不能点开的:

而这个图是可以点开的:



源码:

1
2
3
4
5
6
例如这个图是不能点开的:
![](https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png)
而这个图是可以点开的:
<fancybox>
![](https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png)
</fancybox>

一行显示多图

将多个图片同时放在一对<fancybox></fancybox>中即可:

1
2
3
4
5
6
7
<fancybox>
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/349a2633dbfb842ea62ff9d810ca9b4a8dbb33.png)
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/9ae699a4d7c8a7fa5a3007fc37e0b61b5b55bd.png)
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/d3f01cd009b11025b453c697173855649d01a0.png)
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/7a9f2a9360f6c8a4da9e00f5e1e8500ddbb223.png)
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/fffd5955330a5d55c55401539da4bac77d5438.png)
</fancybox>

APlayer播放器

字段含义是否必须值类型默认值
color音乐控件的主题色HEX颜色值字符串-
volume默认音量0~1之间的浮点数0.7
mode播放模式枚举,详见【mode】circulation
server服务器枚举,详见【server】-
type表明id值是单曲、专辑还是歌单枚举,详见【type】-
id列表idString‘’

mode:

取值含义
random随机
single单曲
order列表顺序
circulation列表循环

server:

取值含义
netease网易云
tencentQQ音乐
xiami虾米
kugou酷狗

type:

取值含义
song单曲
album专辑
playlist播放列表

值从哪里获取请自行探索,有疑问可以去APlayer官网留言,我只保证主题能够使用这项服务,不附带第三方服务的使用教程。

评论系统

提供3种可选,如果你使用其他的评论系统,请自己修改主题。

Disqus

官网: https://disqus.com/

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

1
2
# disqus评论
disqus_shortname: #你的disqus的shortname#

Gitalk

官网: https://github.com/gitalk/gitalk

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

1
2
3
4
5
6
gitalk: 要使用哪个请复制到根目录配置文件!
clientID: 你的clientID
clientSecret: 你的clientSecret
repo: 你的repo名
owner: 你的GitHub名
admin: [] 至少填写你的GitHub名

clientID和clientSecret的获取方法可自行搜索教程,这里仅简单描述一下步骤:

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息:
    Application name 随便填,我的是:xaoxuu.com
    Homepage URLAuthorization callback URL 都写你的网址,我的是:https://xaoxuu.com

可以通过设置gitalk.id实现多个页面共用一个评论框。

在文章的Front-matter中:

1
2
3
4
---
gitalk:
id: /wiki/material-x/
---

Valine

官网: https://valine.js.org

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

1
2
3
leancloud:
app_id: 你的appId
app_key: 你的appKey

在主题的配置文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
valine:
enable: true # 如果你想用Valine评论系统,请设置enable为true
volantis: true # 是否启用volantis版本(禁止匿名,增加若干贴吧、QQ表情)
# 还需要在根目录配置文件中添加下面这三行内容
# leancloud:
# app_id: 你的appId
# app_key: 你的appKey
guest_info: nick,mail,link #valine comment header info
placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
avatar: mp # gravatar style https://valine.js.org/avatar
pageSize: 20 # comment list page size
verify: false # valine verify code (true/false)
notify: false # valine mail notify (true/false)
lang: zh-cn
highlight: false

其中,placeholder支持在Front-matter中设置。

在文章的Front-matter中:

1
2
3
4
---
valine:
placeholder: 你觉得xxx怎么样呢?
---

也可以通过设置valine.path实现多个页面共用一个评论框。

在文章的Front-matter中:

1
2
3
4
---
valine:
path: /wiki/material-x/
---

Livere

官网: http://www.laibili.com.cn/

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

1
2
# 来必力评论
livere_uid: #你的livere的uid

在这里查看你的uid:https://livere.com/insight/myCode,在【代码管理 -> 一般网站】中找到如下这段代码,其中 data-uid 中的内容就是你的 livere_uid

1
2
3
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="你的livere的uid">
...

相关文章

安装和配置相关文章插件

  1. 安装插件
1
npm i S hexo-related-popular-posts
  1. 在需要显示的位置添加widget

例如侧边栏:

1
2
sidebar:
- widget: related_posts

插件的自定义配置方法:https://github.com/tea3/hexo-related-popular-posts

分析与统计

默认支持不蒜子的访问统计,可以添加百度统计和Google Analytics。

百度统计

源文件相关字段功能
./_config.ymlbaidu_analytics_key百度统计的key

Google Analytics

源文件相关字段功能
./_config.ymlgoogle_analytics_keyGoogle Analytics的key

CNZZ统计

请参考ZYMIN网友的这篇教程:《hexo+ejs+material x 添加CNZZ统计代码》

字数统计和阅读时长、网站运行时间

请参考TRHX网友的这篇教程:《Hexo 博客主题个性化》




评论