Material X

GitHub release GitHub release GitHub release

一个简约卡片式的Hexo博客主题

Material X 是我基于Material Flow(已停止维护)改编的一个Hexo主题,相对作者原主题主要有以下方面改动:

图片预览

图片有点大,如果看不到图片请刷新一下网页~
图片有点大,如果看不到图片请刷新一下网页~
图片有点大,如果看不到图片请刷新一下网页~
图片有点大,如果看不到图片请刷新一下网页~
图片有点大,如果看不到图片请刷新一下网页~

示例博客

我自己的博客:https://xaoxuu.com/blog(代表最新的、默认的效果)。

典型案例

更多使用MaterialX主题的博客

博客 链接
MicDZ’s blog https://www.micdz.cn
Heiyiren http://blog.heiyiren.top
MainGuo https://blog.mainguo.top
Mark’s blog https://mark-thinkpad.gitee.io/blog/
gltjk https://blog.gltjk.com
BFDZ https://www.bfdz.ink
Amblizer’s Mainframe https://amblizer.xyz
Digcore https://www.digcore.cn/
Sparky_14145’s blog https://sparky-14145.github.io/
假装偶遇 http://jzoy.com/
Shan San https://shansan.top/
Lemono https://blog.lemono.ink/
一个贾程序员 https://mofiter.com/
Loser007 http://www.loser007.com/
Tony Ren’s blog https://tonyrenhk.github.io/
芝秋的博客 https://iyzqiu.com/blog/

如果你使用了 Material X 主题,欢迎在下方留言告诉大家,我会抽时间归纳到这里~
如果需要交换友链,可以给我发邮件[email protected]

下载安装

提供两种安装方式:脚本和手动,脚本不仅可以安装主题,还可以方便你发布博客,详见@hexo.sh

A. 使用脚本全自动安装(目前仅支持macOS)

首先打开终端,cd 到你博客的路径,如果你想省事,复制下面这行脚本到终端中执行,全程自动化操作。

1
curl -O 'https://raw.githubusercontent.com/xaoxuu/hexo.sh/master/hexo.sh' -# && chmod 777 hexo.sh && . hexo.sh -i i x

如果你选择了脚本安装,现在可以直接往下看配置项啦~

B. 手动安装

如果你想手动安装,打开终端,cd 到你博客的路径,下载主题到 themes/ 文件夹:

1
git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x

然后安装依赖包:

1
npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts

站点配置

网站图标

源文件 相关字段
./_config.yml shortcut_iconfavicon

示例

1
2
shortcut_icon: "https://xaoxuu.com/assets/img/favicon.ico"
favicon: "https://xaoxuu.com/assets/img/favicon.ico"

主题配置

导航栏

源文件 相关字段
./_config.yml nav_menu

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 导航栏
nav_menu:
- name: 主页
icon: fas fa-home
url: https://xaoxuu.com/
- name: 项目
icon: fas fa-flask
url: https://xaoxuu.com/projects/
- name: 博客
icon: fas fa-rss
url: /
- name: 归档
icon: fas fa-archive
url: archives/
- name: 关于
icon: fas fa-user
url: https://xaoxuu.com/about/

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

侧边栏

源文件 相关字段
./_config.yml linkssocial
themes/material-x/_config.yml widgets

右边的小窗口,可以根据需要显示。

示例

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
# 右边的小窗口,不想显示哪一项的把enable设置为false即可
widgets:
# 博主信息区,是否显示个人头像、格言、社交信息等
author:
enable: true
avatar: true # 是否显示头像,如果是,需要在主目录的config中写avatar的URL
title: false # 是否显示博客名、头衔等等。如果是,需要在主目录的config中写title
motto: false # 是否显示格言座右铭等等。如果是,需要在主目录的config中写motto
social: true # 是否显示社交信息(内容同页脚的社交信息)如果是,需要在主目录的config中写social,支持icon和URL
# 公告,内容写在主目录的config中
announcement:
enable: true
icon: fas fa-bullhorn
title: "公告"
# 显示文章分类
categories:
enable: true
icon: fas fa-folder-open
title: "分类"
# 显示文章标签
tagcloud:
enable: true
icon: fas fa-tags
title: "标签"
# 显示音乐播放器
music:
enable: true
icon: fas fa-headphones-alt
title: "最近在听"
link: 'https://music.163.com/#/user/home?id=63035382'
color: '#3DC550' # 主题色
volume: 0.5 # 默认音量大小(0~1之间)
mode: circulation # random (随机) single (单曲) circulation (列表循环) order (列表)
autoplay: false # false(手动播放) true(自动播放)
server: netease # netease(网易云音乐)tencent(QQ音乐) xiami(虾米) kugou(酷狗)
type: playlist # song (单曲) album (专辑) playlist (歌单) search (搜索)
id: 746319661 # 歌曲/专辑/歌单 ID
# 显示友链,友链的内容写在主目录的config中
links:
enable: true
icon: fas fa-handshake
title: "友链"
mailto: "[email protected]" # 右边显示➕ ,点击给这个地址发送邮件添加友链
# 显示目录(在文章中设置toc:false可以隐藏单篇文章的目录)
toc:
enable: true
icon: fas fa-list
title: "目录"

其中,公告的内容需要写在./_config.yml中,写法如下:

1
2
# 公告的写法示例,这只是个例子哦,需要显示公告的时候写在主目录的config中,不需要的时候注释掉就可以,如果你十分喜欢这个主题,可以把这个公告copy到你那里😄
announcement: '本站使用 <b><a href="https://xaoxuu.com/wiki/material-x/">Material X</a></b> 作为主题,喜欢这个主题的朋友可以阅读文档进行安装哦。'

社交信息需要在./_config.yml中提供具体信息,写法如下:

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

友链也需要在./_config.yml中提供具体信息,写法如下:

1
2
3
4
links:
- name: xaoxuu's blog
avatar: https://img.vim-cn.com/ae/e5c96b80420c77773c920f999647ddb08f2c58.png
url: https://xaoxuu.com/blog/

有些网友的avatar可能非常大,有些网友可能更换了avatar路径,这些因素都会导致直接引用avatar源文件的体验不好,因此建议自行压缩图片到合适的尺寸上传到vim-cn图床,我这里写了脚本,使用很方便:vim-cn.sh

如果别人的友链那里有压缩过的avatar,你可以通过审查元素,找到那个压缩过的图片的url,直接使用。

值得注意的是:不同层级的同名分类不是同一个分类,不会自动合并。例如文章A的分类是“分类1,分类2”,文章B的分类是“分类2”,那么会有两个名为“分类2”的分类,一个路径是分类1/分类2,一个路径是分类2。介意这一点的建议以标签为主,或者如果你有办法让它们合并起来,欢迎 fork 贡献代码,感激不尽!

评论系统

源文件 相关字段 功能
./_config.yml disqus_shortname或者valine或者livere_uid 全局是否支持评论系统
某篇文章.md comments 某篇文章下方是否显示评论

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

Disqus

官网: https://disqus.com/

示例

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

Valine

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

示例

1
2
3
4
5
6
7
8
9
10
11
12
# valine
valine:
enable: true # 如果你想用Valine评论系统,请设置enable为true
app_id: # 必填
app_key: # 必填
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: 10 # comment list page size
verify: false # valine verify code (true/false)
notify: false # valine mail notify (true/false)
lang: zh-cn

注意:如果你想测试这个评论系统可以直接在本页底部留言评论,请不要在我的博客中测试。

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">
...

页脚

源文件 相关字段 功能
./_config.yml social 社交信息具体内容

示例

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

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

文章配置

文章的配置(Front Matter)写在文章的md文件开头,只对当前文章有效。

是否生成目录

源文件 字段 默认值 功能
某篇文章.md toc true 某篇文章是否显示目录

如果主题配置中的toc为false,则这里的设置无效。

示例

1
2
3
---
toc: false
---

是否显示评论

源文件 字段 默认值 功能
某篇文章.md comments true 某篇文章下方是否显示评论

如果主题配置中没有提供任何一种评论系统,则这里的设置无效。

示例

1
2
3
---
comments: false
---

文章内音乐控件

源文件 字段 功能
某篇文章.md music 某篇文章标题旁边显示音乐播放器

示例

1
2
3
4
5
6
7
8
9
10
11
12
---
layout: post
date: 2016-05-22
title: 十万蝼蚁不如一个巨人
categories: Life
tags:
- 随笔
music:
server: netease # netease(网易云音乐)tencent(QQ音乐) xiami(虾米) kugou(酷狗)
type: song # song (单曲) album (专辑) playlist (歌单) search (搜索)
id: 26664345 # 歌曲/专辑/歌单 ID
---

实际效果见这篇文章:《十万蝼蚁不如一个巨人》

是否开启渲染MathJax

源文件 字段 默认值 功能
某篇文章.md mathjax false 某篇文章下方是否开启渲染MathJax

如果某一篇文章含有MathJax数学公式,可以在这篇文章中设置为true

示例

1
2
3
---
mathjax: true
---

自定样式

风格

源文件 字段
themes/material-x/_config.yml style

默认提供了两种风格,一种是导航栏和标题栏背景是主题色,另一种是导航栏和标题栏背景与下方文本区域同色。

示例

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

字体

源文件 字段 功能
themes/material-x/_config.yml google_fonts 安装哪些字体
themes/material-x/source/less/_defines.less @fontfamily_base@fontfamily_code@fontfamily_logo font-family设置

默认的字体

1
2
3
4
5
6
7
// 大部分文字字体
@fontfamily_base: 'Ubuntu', "Source Sans Pro", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Menlo, Monaco, Source Han Sans CN Regular, WenQuanYi Micro Hei, "Microsoft YaHei", Arial, sans-serif;
// 代码字体
// mac自带Menlo字体,windows用户需要在config中添加以下字段来加载在线字体:google_fonts: 'Ubuntu|Ubuntu+Mono'
@fontfamily_code: Menlo, 'Ubuntu Mono', Monaco, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, 'Ubuntu', monospace;
// LOGO字体
@fontfamily_logo: @fontfamily_base;

自定义字体

  1. 在这里选好你需要的字体:https://fonts.google.com
  2. themes/material-x/_config.yml文件中添加google_fonts

    示例

    1
    2
    # 字体
    google_fonts: 'Ubuntu|Ubuntu+Mono'
  1. themes/material-x/source/less/_defines.less中修改@fontfamily_base@fontfamily_code@fontfamily_logo

字号

示例

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;

布局尺寸

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@on_modal_threshold:  680px;
@on_phone: 820px;
@on_laptop: 990px;
@on_desktop: 1200px;
// container
@width_container: 1200px;
// post
@width_post_max: 980px;
// 侧边栏宽度
@width_sidebar: 285px;
// 搜索框的宽度,建议和侧边栏宽度保持一致
@width_searchbar: @width_sidebar;
// 一个cell的高度
@height_cell: 36px;

导航栏

示例

1
2
3
4
5
// 导航栏高度
@height_navbar: 54px;
@fontsize_logo: 1.3em;
@fontsize_header_switcher: 1.3em;
@fontsize_header: 1em;

间距

目前很多地方的间距都是依据@gap这个值。

示例

1
@gap: 20px;

圆角

示例

1
2
3
4
// 0px: 极端,2px:硬朗,4px:常规,8px:圆润,16px:温柔
@border_radius: 8px; // 圆角半径,可以根据心情随时调整风格
@border_radius_left_line: 4px; // 左边的竖线的宽度
@border_radius_code_block: 4px; // 代码块的圆角及其滚动条的宽度

配色

为了方便个性化配色,这里的字段有点多,不要着急,左边的key是主题文件中需要用到的,右边的value,你可以使用宏定义(例如@theme_base_main: #EFEFEF;),也可以直接写具体的颜色值。

背景颜色

key value的作用
@theme_bg_main 网页背景色
@theme_bg_navbar 导航栏背景色
@theme_bg_card 卡片的背景色
@theme_bg_code 代码的背景色
@theme_bg_code_block 代码块的背景色
@theme_bg_quote 引用的背景色,以及分类、归档的高亮时的颜色

文字颜色

key value的作用
@theme_text_header 标题文字颜色(h1/h2)
@theme_text_link 链接颜色
@theme_text_highlight 链接高亮颜色
@theme_text_in_header 在主题色中显示的文本(一般为白或灰黑)
@theme_text_main 正文文字颜色

示例

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
// 如果你只想简单地换个风格,可以只改这里的几项:
// 主题色
@theme_base_main: #EFEFEF;
@theme_base_tint: @color_mac_maximize;
@theme_base_bg: #efefef;
@theme_base_card_bg: white;

// 背景色 ----------------
// 网页背景
@theme_bg_main: @theme_base_main;
// 导航栏背景
@theme_bg_navbar: white;
// 卡片背景
@theme_bg_card: white;
// 卡片标题栏背景
@theme_bg_card_header: @theme_bg_navbar;
// 代码的背景色
@theme_bg_code: fade(@color_mac_minimize, 10%);
// 代码块的背景色
@theme_bg_code_block: fade(@color_mac_minimize, 10%);
// 引用的颜色以及分类、归档的 hover 时颜色
@theme_bg_quote: @theme_base_tint;
// 文字颜色 ----------------
// 标题文字颜色(h1/h2)
@theme_text_header: @theme_base_tint;
// 链接颜色
@theme_text_link: @color_ax_blue;
// 链接高亮颜色
@theme_text_highlight: @theme_base_tint;
// 在主题色中显示的文本(一般为白或深灰)
@theme_text_in_header: @theme_base_tint;
// 正文文字颜色
@theme_text_main: @dark;

这里右边多次出现的@theme_base_main@theme_base_tint就是宏定义,主题文件中并没有用到。

阴影

示例

1
2
3
4
// 卡片正常状态的阴影
@boxshadow_card_normal: @boxshadow_base_1, @boxshadow_base_2;
// 卡片漂浮起来时的阴影
@boxshadow_card_raised: @boxshadow_base_2, @boxshadow_base_4, @boxshadow_base_8, @boxshadow_base_16;

第三方插件

推荐文章

安装和配置推荐文章插件

源文件 相关字段 功能
themes/material-x/_config.yml recommended_posts 全局是否支持推荐文章

如果你不想显示推荐文章,可以卸载 hexo-recommended-posts 这个依赖包。

示例

1
2
3
4
5
6
7
8
9
10
# 推荐文章
recommended_posts:
autoDisplay: false # 自动在文章底部显示推荐文章,如果你使用Material-X主题,这里要设置为false。
server: https://api.truelaurel.com # 后端推荐服务器地址
timeoutInMillis: 10000 # 服务时长,超过此时长,则使用离线推荐模式
excludePattern: []
titleHtml: <h4>推荐文章</h4> #自定义标题
internalLinks: 3 # 内部文章数量
externalLinks: 2 # 外部文章数量
fixedNumber: false

注意:autoDisplay: false 这一项不要修改,因为自动显示效果不佳,我已经在主题里给它设置显示位置了。

是否显示推荐文章

源文件 字段 默认值 功能
某篇文章.md recommended_posts true 某篇文章下方是否显示推荐文章

如果主题配置中没有提供recommended_posts,则这里的设置无效。

示例

1
2
3
---
recommended_posts: false
---

访问统计

默认支持不蒜子的访问统计,可以添加百度统计、以leancloud为后端的阅读统计。

百度统计

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

以leancloud为后端的阅读统计

源文件 相关字段 功能
./_config.yml leancloud_analytics.app_idleancloud_analytics.app_key leancloud统计的id和key

示例

1
2
3
4
5
6
# 百度统计key
baidu_analytics_key: xxxxxxxx
# leancloud统计
leancloud_analytics:
app_id: xxxxxxxxxxxxxxxx-xxxxx
app_key: xxxxxxxxxxxxxxx

故障排查

如果你发现 无法使用 或者效果与示例有较大区别,可以使用hexo官方提供的用于单元测试的博客应用本主题查看样式是否正常,对比_config.yml文件排查问题。

下载单元测试:

Hexo官方的单元测试博客: https://github.com/hexojs/hexo-theme-unit-test.git。如果你的系统是macOS,则可以使用hexo.sh脚本一键完成测试。

为什么顶部导航栏是空的

导航栏要写在./_config.yml中,而不是直接修改主题的themes/material-x/_config.yml文件,详见:#导航栏

更新了主题之后FontAwesome图标变成方块

由于最初使用的版本是4.7.0,从2018年11月7号更新后使用5.5.0版本,其命名方式发生了变化:

版本 命名示例
4.7.0 <i class="fa fa-github"></i>
5.5.0 <i class="fab fa-github"></i>

由于5.x版本之前前缀始终是:fa,所以主题中写好了前缀,_config.yml中只需要写fa-github即可,但是从5.x版本起,前缀有多种,所以需要写全名,即:fab fa-github这样才能正常显示。

所以,你需要去FontAwesome官网搜索图标,复制图标的class字段中的全名,来替换之前的名字。 如下图所示:

不提供Hexo教程

关于hexo如何搭建的问题,网上有很多教程,仅仅是查阅官方文档和demo都足够了,所以这方面的问题请不要问我,我超凶的。

Q1. 关于摘要

有很多网友问我怎么实现摘要、为什么我的博客列表是全部展开的……这类问题看下面这个例子就知道怎么写了:

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: post
date: 2017-07-05
title: 如何搭建基于Hexo的独立博客
categories: Cocoa Dev
tags:
- blog
- Hexo
---

这是预览

<!--more-->

这是正文

详情请看我这篇文章:《如何搭建基于 Hexo 的独立博客》,如果这篇文章依然没有解决博客技术方面的问题可以在文章下方留言,我抽时间补充教程。

Q2. 关于markdown的写法

例如不知道怎么显示图片,怎么画表格等等,你可以去这里看《Markdown 语法介绍》,讲的极其详细。

Q3. 关于SEO

SEO跟主题之间没有什么耦合,所以主题没有捆绑SEO插件,你需要的话可以自己安装,我安装了以下SEO优化插件:

主题文档

主题源码

小提示

使用主题的时候,尽量fork主题到自己的GitHub,然后进行修改并使用。这样做的好处是:当主题进行重要更新的时候可以根据需要拉取合并代码,使自己DIY的主题能够通过更新获取BUG修复或者新特性。

许可协议

本主题采用MIT开源许可协议 打不开或者看不懂的看百度词条:MIT开源许可协议

划重点:
被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
被授权人可根据程式的需要修改授权条款为适当的内容。
在软件和软件的所有副本中都必须包含版权声明和许可声明。

我个人比较佛系,你只要不违反MIT协议内容做什么我都无所谓,只是,如果你解决了我这里解决不了的问题,最好还是去GitHub贡献一下代码,不能只索取而不付出。

鸣谢

贡献者

感谢各位网友提供的反馈、建议与大力支持,有了大家的帮助,主题就会做的越来越好~

还要感谢那些在评论中提供了帮助的匿名网友~

这里的列表和示例博客列表都是按时间顺序的哦。

收录者

感谢以下网站的收录与分享,让本主题能够被更多人发现,主题就会做的越来越好~

近期活动和计划




评论

文明评论,请勿灌水。为了便于区分和接收回复提醒,请您在留言时填写一下昵称邮箱。 不定期清理没有昵称和灌水的评论。