Material X

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

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

Demo Blogs

本主题将持续更新和维护,你可以在这里查看主题最新的实际效果:👉https://blog.xaoxuu.com 👈

以及其他使用 Material X 主题的博客:

博客 链接
MicDZ’s blog https://www.micdz.cn
小吴博客 https://www.wushile.top
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/
wildgr4ss’s blog https://wildgrass.top
Sparky_14145’s blog https://sparky-14145.github.io/
假装偶遇 http://jzoy.com/

如果你使用了 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"

主题配置

themes/material-x/_config.yml 中的 所有 内容复制到博客主目录的 _config.yml 文件中,然后根据自己的需要填写和修改。这样做的好处是:更新主题的时候你修改过的配置就不会被覆盖了。

以下这些配置如果没有特殊说明,都指的是博客主目录的 _config.yml 文件。

导航栏

你可以找到类似这一段,把它改为你需要的:

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

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

导航条跟slug有关,主页是home,关于是about,归档是archives,别的页面我也不清楚该写什么值。由于能力有限,暂时不知道原作者的slug的工作原理,删掉之后导航栏上的指示器无法正确定位,如果有大神知道怎么做,欢迎 fork 贡献代码,感激不尽!

侧边栏

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 右边的小窗口,不想显示哪一项的注释掉对应的即可
widgets:
# 博主信息,显示个人头像、格言、社交信息等
author:
enable: true
avatar: https://xaoxuu.com/assets/img/avatar.jpg # 头像,如果config中已经设置avatar了,这里可以不用写
title: # 博客名、头衔等等,居中显示
motto: # 格言座右铭等等
social: true # 是否显示社交信息(内容同页脚的社交信息)
# 显示文章分类
categories: true
# 显示文章标签
tagcloud: true
# 显示网易云歌单
musicid: 746319661 # 歌单id
# 显示友链
links:
- name: xaoxuu
avatar: https://xaoxuu.com/assets/img/avatar.jpg
url: https://xaoxuu.com
# 显示目录(在文章中设置toc:false可以隐藏单篇文章的目录)
toc: true

博主(头像/头衔/格言/社交信息)

1
2
3
4
5
6
7
8
9
# 右边的小窗口,不想显示哪一项的注释掉对应的即可
widgets:
# 博主信息,显示个人头像、格言、社交信息等
author:
enable: true
avatar: https://xaoxuu.com/assets/img/avatar.jpg # 头像,如果config中已经设置avatar了,这里可以不用写
title: # 博客名、头衔等等,居中显示
motto: # 格言座右铭等等
social: true # 是否显示社交信息(内容同页脚的社交信息)

分类

1
2
3
4
5
# 右边的小窗口,不想显示哪一项的注释掉对应的即可
widgets:
...
# 显示文章分类
categories: true

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

标签

1
2
3
4
5
# 右边的小窗口,不想显示哪一项的注释掉对应的即可
widgets:
...
# 显示文章标签
tagcloud: true

网易云音乐歌单

1
2
3
4
5
# 右边的小窗口,不想显示哪一项的注释掉对应的即可
widgets:
...
# 显示网易云歌单
musicid: 746319661 # 歌单id

友链

1
2
3
4
5
6
7
8
# 右边的小窗口,不想显示哪一项的注释掉对应的即可
widgets:
...
# 显示友链
links:
- name: xaoxuu's blog
avatar: https://xaoxuu.com/assets/img/avatar.jpg
url: https://blog.xaoxuu.com

如果你的_config.yml中有写email,那么标题右边会显示“+”的按钮,点击给博主发交换友链的邮件。
例如:

1
email: [email protected]

生成目录(TOC)

默认值:true

1
2
3
4
5
# 右边的小窗口,不想显示哪一项的注释掉对应的即可
widgets:
...
# 显示目录(在文章中设置toc:false可以隐藏单篇文章的目录)
toc: true

推荐文章

如果你不想显示推荐文章,可以卸载 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 这一项不要修改,因为自动显示效果不佳,我已经在主题里给它设置显示位置了。

评论系统

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

Disqus

官网: http://disqus.com/

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

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

Valine

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

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

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

页脚

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

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

文章配置

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

是否生成目录

默认值:true
如果主题配置中的toc为false,则这里的设置无效。

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

是否显示推荐文章

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

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

是否显示评论

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

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

是否开启渲染MathJax

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

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

自定样式

找到 themes/material-x/source/less/_defines.less 这个文件。

由于这个文件在 themes/material-x 中,所以更新主题的时候先备份一下 _defines.less 这个文件,更新之后对比改动自行修改。

字体

默认的字体

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. 添加到_config.yml文件中
    在博客主目录的_config.yml文件中添加google_fonts,例如:

    1
    2
    # 字体
    google_fonts: 'Ubuntu|Ubuntu+Mono'
  3. 添加到_defines.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;

间距

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

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
// 背景色 ----------------
// 网页背景
@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;

故障排查

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

下载单元测试:

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

更新了主题之后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字段中的全名,来替换之前的名字。 如下图所示:

博客技术支持

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 语法介绍》,讲的比我说的更详细。

主题源码

近期活动

2018年11月16日更新的beta1版本相较之前有了较大改动,建议追求稳定的用户暂时不要更新。

计划从1.0正式版本开始提供更新日志。

鸣谢

贡献者

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

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

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

收录者

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




评论

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

有疑问请先看故障排查下载单元测试,无法解决再留言。