文章目录
一、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
---