因为默认的主题不好看所以你可以在github上搜索 hexo-theme 来得到更多主题，这里以 Matery 主题为例
简单漂亮，文章内容美观易读
Material Design 设计
响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
首页轮播文章及每天动态切换 Banner 图片
瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的
图片代替）
时间轴式的归档页
词云的标签页和雷达图的分类页
丰富的关于我页面（包括关于我、文章统计图、我的项目、我的
技能、相册等）
可自定义的数据的友情链接页面
支持文章置顶和文章打赏
支持 MathJax
TOC 目录
可设置复制文章内容时追加版权信息
可设置阅读文章时做密码验证
Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用
Gitalk）
集成了不蒜子统计、谷歌分析（Google Analytics）和文章字
数统计等功能
支持在首页的音乐播放和视频播放功能
支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
支持 DaoVoice、Tidio 在线聊天功能
开始安装主题
通过访问网站进入主题仓库
克隆该仓库到blog目录下的 themes/hexo-theme-matery 文件夹(hexo-theme-matery 会自动新建)到你的博客目录右键打开Git bash输入
git clone https://github.com/blinkfox/hexo-theme-matery themes/hexo-theme-matery然后进入 hexo 的配置文件（ _config.yml）找到
#Extensions 并更改下面的主题设置 theme: hexo-theme-matery （记得加空格）另外注意，配置文件中的标点符号不要出现中文格式的标点符号，不然运行会出错。其他主题安装也可使用本方法。语言选择：如果为中文用
则在language:后添加值zh-CN，如果不修改，默认为英语；
网址修改：url:的值为你的网址名，如https://xxxx.github.io或者https://xxxx.gitee.io，如果有域名，则修改为你的域名即可。至于有关域名的修改解析，后面我会说到。
站点配置文件有个per_page属性，建议修改为6的倍数，这样网站在适应设备时，有较好的显示效果。
保存退出后，清理缓存
hexo clean 再次生成
hexo generate/g 启动站点
hexo server/s部署到远端
hexo deploy/d完成主题安装
主题优化
到博客目录右键打开新的Git bash。或者在旧的Git bash输入
clear清理一下终端。
新建标签 tags 页面
tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "tags"编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：
---
title: tags
date: 2020-09-30 13:30:00
type: "tags"
layout: "tags"
---新建分类 categories 页面
categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "categories"同上编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：
---
title: categories
date: 2020-09-30 13:30:00
type: "categories"
layout: "categories"
---新建关于我 about 页面
hexo new page "about"编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：
---
title: about
date: 2020-09-30 13:30:00
type: "about"
layout: "about"
---新建留言板 contact 页面 (可选)
contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "contact"编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：
---
title: contact
date: 2020-09-30 13:30:00
type: "contact"
layout: "contact"
---注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。（后面我也会写怎么添加评论系统）
新建友情链接 friends 页面 (可选)
friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下:
hexo new page "friends"编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：
---
title: friends
date: 2020-09-30 13:30:00
type: "friends"
layout: "friends"
---同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：
[{
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
"name": "码酱",
"introduction": "我不是大佬，只是在追寻大佬的脚步",
"url": "http://luokangyuan.com/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
"name": "闪烁之狐",
"introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
"url": "http://blinkfox.com/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "平凡的脚步也可以走出伟大的行程",
"url": "https://me.csdn.net/jlh912008548",
"title": "前去学习"
}]菜单导航配置
配置基本菜单导航的名称、路径url和图标icon
菜单导航名称可以是中文也可以是英文(如：Index或主页)
图标icon 可以在Font Awesome 中查找
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book当然啦，这些图标呢一开始都是默认的，你可以不用修改。
二级菜单配置方法
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作。
在children下创建二级菜单的 名称name,路径url和图标icon。
注意每个二级菜单模块前要加 -
注意缩进格式
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle-o
Friends:
url: /friends
icon: fas fa-address-book
Medias:
icon: fas fa-list
children:
- name: Musics
url: /musics
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image添加emoji表情支持（可选的）
本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：
npm install hexo-filter-github-emojis --save在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了。
代码高亮
由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下:
npm i -S hexo-prism-plugin然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:当你添加代码块时一定要加上语言的名字不然此功能会无效！
搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：
npm install hexo-generator-search --save在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
search:
path: search.xml
field: post
format: html
limit: 10000中文链接转拼音（可选的）
如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下：
npm i hexo-permalink-pinyin --save在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
permalink_pinyin:
enable: true
separator: '-' # default: '-'注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。
文章字数统计插件（可选的）
如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。
安装命令如下：
npm i --save hexo-wordcount然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可：
wordCount:
enable: false # 将这个值设置为 true 即可.
postWordCount: true
min2read: true
totalCount: true添加 RSS 订阅支持（可选的）
本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：
npm install hexo-generator-feed --save在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。
添加在线聊天功能（可选的）
添加 DaoVoice 在线聊天功能
前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件即可在设置调整位置。
添加 Tidio 在线聊天功能
前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。
修改页脚
页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。
修改社交链接
在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：
<% if (theme.socialLink.github) { %>
<a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
<i class="fab fa-github"></i>
</a>
<% } %>其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：
Facebook: fab fa-facebook
Twitter: fab fa-twitter
Google-plus: fab fa-google-plus
Linkedin: fab fa-linkedin
Tumblr: fab fa-tumblr
Medium: fab fa-medium
Slack: fab fa-slack
Sina Weibo: fab fa-weibo
Wechat: fab fa-weixin
QQ: fab fa-qq
Zhihu: fab fa-zhihu
修改打赏的二维码图片
在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片(名称和格式不要改变)。
配置音乐播放器（可选的）
要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可：
# 是否在首页显示音乐
music:
enable: true
title: #非吸底模式有效
enable: true
show: 听听音乐
server: netease #require music platform: netease, tencent, kugou, xiami, baidu
type: playlist #require song, playlist, album, search, artist
id: 503838841 #require song id / playlist id / album id / search keyword
fixed: false # 开启吸底模式
autoplay: false # 是否自动播放
theme: '#42b983'
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
listFolded: true # 列表默认折叠server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），
baidu（百度音乐）。
type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）
id获取示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏链接问号id后的数字即为playlist ID。
文章 Front-matter 介绍
Front-matter 选项中的所有内容均为非必填的。但仍然建议至少填写 title 和 date 的值。
注意:
如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活配置。
您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
以下为文章的 Front-matter 示例。
最简示例
---
title: 蝴蝶主题介绍
date: 2020-09-30 13:30:00
---最全示例
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---自定义修改
在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：
菜单
我的梦想
首页的音乐播放器和视频播放器配置
是否显示推荐文章名称和按钮配置
favicon 和 Logo
个人信息
TOC 目录
文章打赏信息
复制文章内容时追加版权信息
MathJax
文章字数统计、阅读时长
点击页面的’爱心’效果
我的项目
我的技能
我的相册
Gitalk、Gitment、Valine 和 disqus 评论配置
不蒜子统计和谷歌分析（Google Analytics）
默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：
修改主题颜色
在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：
/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
/* 动态切换背景颜色. */
}
@keyframes rainbow {
/* 动态切换背景颜色. */
}如果你不知道自己颜色的数值的话，这里是一个在线配色的工具。
修改 banner 图和文章特色图
你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的代码中：
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。
如果想改为每小时或者每分钟切换banner图的话，需要将
getDay()改为getHours()或者getMinutes()即可。
去掉banner的颜色动画
有的朋友可能不喜欢banner的颜色遮罩，特别是在banner图片的颜色和动画颜色一样时，表现不出图片的美观。去掉后放一张高清小姐姐大图，博客访问量一下迅速爆炸！听我的准没错，那如何去掉这个烦人的彩色动画呢？跟着我：在theme主题目录下，找到matery.css文件,ctrl+F快捷键查找.bg-cover:after，注释掉即可:
/* .bg-cover:after {
-webkit-animation: rainbow 60s infinite;
animation: rainbow 60s infinite;
} */修改目录样式
在themes\Matery\layout_partial\post-detail-toc.ejs，在这里修改:
.toc-widget {
width: 345px;
padding-left: 20px;
background-color: rgb(255, 255, 255,0.7);
border-radius: 10px;
box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important;
}修改网站相关信息
网站信息的修改
#这是根目录下的配置文件信息
title: 过客~铭む #这是网站标题
subtitle: Mx #这是网站副标题subtitler
# 下面两个description,keywords，需要填上，如果想让搜索引擎收录，这个做SEO优化必不可忽视的两个属性
description: 一个分享快乐和知识的地方！ #网站描述
keywords: [HTML, CSS, JavaScript, JQuery, React, Vue.js等] #网站的关键词
author: YangAir #作者，文章版权所显示的
language: zh-CN #网站语言，不填写，默认为英文
timezone: #时区，可以不填写 # 这是主题配置文件的相关信息
# 配置网站favicon和网站LOGO
# 此处我用的本地文件，也可以使用图床或者CDN
favicon: /medias/favicon.png
logo: /medias/logo.png
# 网站副标题，打字效果
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle:
enable: true
loop: true # 是否循环
showCursor: true # 是否显示光标
startDelay: 300 # 开始延迟
typeSpeed: 100 # 打字速度
backSpeed: 50 # 删除速度
sub1: 志之所向，金石为开，谁能御之？
sub2: 花开不是为了花落，而是为了开的更加灿烂。
sub3: 没有伞的孩子必须努力奔跑！
sub4: 欲望以提升热忱，毅力以磨平高山。
sub5: 如果放弃太早，你永远都不知道自己会错过什么。
sub6: 没有礁石，就没有美丽的浪花；没有挫折，就没有壮丽的人生。注意：
网站打字效果副标题默认有两个，即sub1和sub2，如果想写多个，则需要修改两处地方，首先修改配置文件，如上面所示，在sub1和sub2后面继续添加即可，然后在去主题目录下的layout文件夹下的_partial文件夹，修改bg-cover-content.ejs文件，大约在12行左右，如下面所示：
<div class="description center-align">
<% if (theme.subtitle.enable) { %>
<span id="subtitle"></span>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script>
var typed = new Typed("#subtitle", {
strings: ['<%= theme.subtitle.sub1 %>',
'<%= theme.subtitle.sub2 %>',
'<%= theme.subtitle.sub3 %>',
'<%= theme.subtitle.sub4 %>',
'<%= theme.subtitle.sub5 %>',
'<%= theme.subtitle.sub6 %>'],
startDelay: <%= theme.subtitle.startDelay %>,
typeSpeed: <%= theme.subtitle.typeSpeed %>,
loop: <%= theme.subtitle.loop %>,
backSpeed: <%= theme.subtitle.backSpeed %>,
showCursor: <%= theme.subtitle.showCursor %>
});
</script>
<% } else { %>
<%= config.description %>
<% } %>
</div>社交链接的修改
默认的配置信息为：
# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
github: https://github.com/blinkfox
email: 1181062873@qq.com
facebook: # https://www.facebook.com/xxx
twitter: # https://twitter.com/xxx
QQ: 1181062873
weibo: # https://weibo.com/xxx
zhihu: # https://www.zhihu.com/xxx
rss: true # true、false如果想添加简书，CSDN，掘金，博客园等等，需要在主题配置文件添加相关配置，按照默认的复制修改即可。
最后注意: 修改源代码或者配置文件时仔细检查下有没有少打空格以及标点符号是不是英文的。
