文章目录
一、matery主题的下载与安装
matery 主题下载点击此处 传送门
安装略过，教程很多
二、基本配置
1.根目录下的 _config.yml
1.1. title
title: Wyy's Blog
subtitle: ''
description: ''
keywords:
author: Wyy ##博客作者署名
language: zh-CN ##博客所使用语言，默认`en`
timezone: 'Asia/Shanghai' ##时区设置
title所对应的地方，补充：subtitle所对应的就是博客正中间的subtitle，没有赋值时默认显示subtitle
1.2. deploy与theme
theme: matery ##此处更改为主题的名字，要与themes文件夹下的主题名一致
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: ##和git仓库绑定有解释
type: git
repo: git@github.com:319226862/319226862.github.io.git
branch: master
2.themes目录下的_config.yml
2.1. menu，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
Contact:
url: /contact
icon: fas fa-comments
Friends:
url: /friends
icon: fas fa-address-book
初始效果如上图，当不需要导航栏有这么多标签时，可以选择注释掉不需要的部分。例如：
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
# Contact:
# url: /contact
# icon: fas fa-comments
# Friends:
# url: /friends
# icon: fas fa-address-book
此时页面上方只显示剩下未被注释的部分
关于每个标签前面的图标，通过icon来设置
menu:
Index:
url: /
icon: fas fa-home
修改
icon的后半部分，例如，改为
menu:
Index:
url: /
icon: fas fa-list-ul
效果如下，具体图标代码点击此处 传送门
二级菜单写法如下
menu:
Index:
url: /
icon: fas fa-home
children:
- name: Musics
url: /musics
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
2.2. dream【可选】
dream:
enable: true
showTitle: true
title: Dream
text: Calm down and be yourself
2.3. music
music:
enable: true
title: #非吸底模式有效
enable: true
show: listen
autoHide: true
server: tencent
type: playlist
id: 4628814494
fixed: true # 开启吸底模式
autoplay: false # 是否自动播放
theme: '#42b983'
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
listFolded: true # 列表默认折叠
hideLrc: true # 隐藏歌词
enable：是否支持在首页使用音乐
autoHide：是否自适应隐藏，不用时自动贴边
server：可选netease（网易云），tencent（QQ 音乐），kugou（酷狗），xiami（虾米），baidu（百度）
type：选择playlist（歌单）
id：以我自己使用QQ音乐为例，打开电脑版QQ音乐，点击我的歌单，选择歌单，在最上方网址中会有一串ID号，复制过来即可
2.4. indexbtn
indexbtn:
enable: true
name: CSDN
icon: fas fa-copyright
url: https://blog.csdn.net/qq_41376237
2.5. sociallink
socialLink:
github: https://github.com/319226862/wyy
email: 319226862@qq.com
facebook: # https://www.facebook.com/xxx
twitter: # https://twitter.com/xxx
qq: 319226862
weibo: # https://weibo.com/xxx
zhihu: # https://www.zhihu.com/xxx
rss: # true、false
作用如图，其中，不写代表不启用，想添加csdn等其他账号同理
2.6. 打赏功能
reward:
enable: true
title: 你的赏识是我前进的动力
wechat: /medias/reward/wechat.png
alipay: /medias/reward/alipay.jpg
开通功能后，在每篇文章末尾可以通过支付宝或者微信打赏，其中图片保存在
/Users/apple/Documents/blog/themes/matery/source/medias/reward目录下，或者自己选择其他目录保存
2.7. 字数统计等
postInfo:
date: true # 发布日期
update: true # 更新日期
wordCount: true # 文章字数统计
totalCount: true # 站点总文章字数
min2read: true # 文章阅读时长
readCount: true # 文章阅读次数
若要开启文章字数统计，需要安装
hexo-wordcount插件，安装命令:
npm i --save hexo-wordcount
如果使用npm命令不加载或者加载慢，可以使用
cnpm i --save hexo-wordcount
开启后效果：
2.8. featureimages
featureImages:
- /medias/featureimages/1.jpg
- /medias/featureimages/2.jpg
- /medias/featureimages/3.jpg
- /medias/featureimages/4.jpg
- /medias/featureimages/5.jpg
- /medias/featureimages/6.jpg
- /medias/featureimages/7.jpg
- /medias/featureimages/8.jpg
- /medias/featureimages/9.jpg
- /medias/featureimages/10.jpg
featureImages设置的是无文章特色图片时需要显示的文章特色图片，即，发博客是不特定设置博客图片，则从中随机选取一张作为封面
2.9. 几何线条背景canvas_nest
canvas_nest:
enable: true
color: 0,0,255 # 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
pointColor: 0,0,255 # 交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
opacity: 0.7 # 线条透明度（0~1）, 默认: 0.5
zIndex: -1 # 背景的 z-index 属性，css 属性用于控制所在层的位置, 默认: -1.
count: 99 # 线条的总数量, 默认: 99
很多博客都有的几何线条背景
color：线条颜色
pointColor：交点颜色
opacity：线条透明度（0~1）
zIndex：css 属性用于控制所在层的位置,
count：线条的总数量
2.10. 分享链接share
sharejs:
enable: true
sites: twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin
调整
sites的顺序即可调整页面的分享图标顺序
2.11. 副标题subtitle
subtitle:
enable: true
loop: true # 是否循环
showCursor: true # 是否显示光标
startDelay: 300 # 开始延迟
typeSpeed: 100 # 打字速度
backSpeed: 50 # 删除速度
sub:
- Calm down and be yourself
- Just Do 'IT'
3. 修改导航栏颜色
打开
themes/matery/source/css/matery.css文件，找到bg-color这个属性，即为导航栏和底部的颜色
.bg-color {
background-image: linear-gradient(to right, #8cbfb8 0%, #128c6f 100%);
}
如上所示，使用的是渐变色，如果不知道要换什么颜色，嫌每次都需要修改再部署比较麻烦，建议在需要换颜色的地方右键->检查，查看这个属性，在控制台对颜色做出相应的更改，满意后再去代码中修改保存。
同理，如果还有其他要修改的位置，相应方法找到元素名称，去css文件中找到并修改
4. “关于”页面（about）
4.1. 新建about页面
hexo new page "about"
完成后找到/source/about/index.md 文件，在文件里面添加
---
title: about
date: 2021-01-30 12:28:30
type: "about"
layout: "about"
---
4.2. 个人信息
profile:
avatar: /medias/fatcat.jpg
career: 搬砖人
introduction: 赚钱养猫养狗!
avatar：头像设置
career：职业
introduction：个人介绍
对应效果图如下：
4.3. 配置"我的项目"信息
myProjects:
enable: true
data:
hexo-theme-matery:
icon: fas fa-file-alt
iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
url: http://github.com/blinkfox/hexo-theme-matery
desc: This is a Hexo blog theme with 'Material Design' and responsive design.
Fenix:
icon: fas fa-database
iconBackground: 'linear-gradient(to bottom right, #F06292 0%, #EF5350 100%)'
url: https://github.com/blinkfox/fenix
desc: 这是 Spring Data JPA 复杂或动态 SQL 查询的扩展库。
typora-vue-theme:
icon: fas fa-file-alt
iconBackground: 'linear-gradient(to bottom right, #29B6F6 0%, #1E88E5 100%)'
url: https://github.com/blinkfox/typora-vue-theme
desc: This is a typora theme inspired by Vue document style.
具体自己修改，不想显示，设置enable值为false
### 4.4. 配置"我的技能"信息
mySkills:
enable: true
data:
html:
background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'
percent: 90%
css:
background: 'linear-gradient(to right, #9900FF 0%, #CC66FF 100%)'
percent: 80%
javascript:
background: 'linear-gradient(to right, #2196F3 0%, #42A5F5 100%)'
percent: 50%
c/java:
background: 'linear-gradient(to right, #00BCD4 0%, #80DEEA 100%)'
percent: 50%
echart/ps:
background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
percent: 60%
vue:
background: 'linear-gradient(to right, #FFEB3B 0%, #FFF176 100%)'
percent: 30%
4.5. 配置"我的相册"信息
myGallery:
enable: true
data:
- /medias/photo/0.jpg
- /medias/photo/1.jpg
- /medias/photo/2.jpg
- /medias/photo/3.jpg
- /medias/photo/4.jpg
- /medias/photo/5.jpg
5. 新建标签/分类/留言板页面
hexo new page "tags" ##新建其他更换为contact/friends
完成后找到/source/about/index.md 文件，在文件里面添加
---
title: about
date: 2021-01-30 12:28:30
type: "about" ##同理，记得更改名称
layout: "about" ##同上
---
6. 开发评论功能gittalk
6.1. 注册OAuth Application
6.2. 配置 _config.yml 文件
gitalk:
enable: true
owner: 319226862 ##GitHub用户名
repo: wyy ##仓库名
oauth:
clientId: 887ec913a7e17cc91992 ##上一步的两个值
clientSecret: ebf1e44552e290707b6d2a9def3825d60f6bdfa6
admin: 319226862 ##用户名
7. 写博客
在
_post文件夹下，新建&&.md文件
基本配置如下：
title：文章标题
top：是否把文章置顶
img：是否给文章定义特色图片，如果不设置，默认从featureimages里面抽取
summary：是否给文章加上摘要，不设置，默认截取文章开头一部分
categories：给文章分类
tags：给文章加标签，可加多个
剩下博客书写同csdn一样，可以直接复制过去
---
title: hexo的个性化配置
date:
author: wyy
img:
top: true
cover: true
coverImg:
password:
toc: false
mathjax: false
summary: hexo的matery主题的个性化配置
categories: hexo
tags:
- hexo
---
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
