hexo博客matery主题的个性化配置
文章目录
- 一、matery主题的下载与安装
- 二、基本配置
- 1.根目录下的 `_config.yml`
- 1.1. title
- 1.2. deploy与theme
- 2.themes目录下的`_config.yml`
- 2.1. menu，icon，二级菜单
- 2.2. dream【可选】
- 2.3. music
- 2.4. indexbtn
- 2.5. sociallink
- 2.6. 打赏功能
- 2.7. 字数统计等
- 2.8. featureimages
- 2.9. 几何线条背景canvas_nest
- 2.10. 分享链接share
- 2.11. 副标题subtitle
- 3. 修改导航栏颜色
- 4. “关于”页面（about）
- 4.1. 新建about页面
- 4.2. 个人信息
- 4.3. 配置"我的项目"信息
- 4.5. 配置"我的相册"信息
- 5. 新建标签/分类/留言板页面
- 6. 开发评论功能gittalk
- 6.1. 注册OAuth Application
- 6.2. 配置 _config.yml 文件
- 7. 写博客
一、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: gitrepo: git@github.com:319226862/319226862.github.io.git branch: master
2.themes目录下的_config.yml
2.1. menu，icon，二级菜单
menu:Index:url: /icon: fas fa-homeTags:url: /tagsicon: fas fa-tagsCategories:url: /categoriesicon: fas fa-bookmarkArchives:url: /archivesicon: fas fa-archiveAbout:url: /abouticon: fas fa-user-circleContact:url: /contacticon: fas fa-commentsFriends:url: /friendsicon: fas fa-address-book
初始效果如上图，当不需要导航栏有这么多标签时，可以选择注释掉不需要的部分。例如：
menu:Index:url: /icon: fas fa-homeTags:url: /tagsicon: 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-homechildren:- name: Musicsurl: /musicsicon: fas fa-music- name: Moviesurl: /moviesicon: fas fa-film
2.2. dream【可选】
dream:enable: trueshowTitle: truetitle: Dreamtext: Calm down and be yourself
2.3. music
music:enable: truetitle: #非吸底模式有效enable: trueshow: listenautoHide: 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: truename: CSDNicon: fas fa-copyrighturl: https://blog.csdn.net/qq_41376237
2.5. sociallink
socialLink:github: https://github.com/319226862/wyyemail: 319226862@qq.comfacebook: # https://www.facebook.com/xxxtwitter: # https://twitter.com/xxxqq: 319226862weibo: # https://weibo.com/xxxzhihu: # https://www.zhihu.com/xxxrss: # true、false
作用如图，其中，不写代表不启用，想添加csdn等其他账号同理
2.6. 打赏功能
reward:enable: truetitle: 你的赏识是我前进的动力wechat: /medias/reward/wechat.pngalipay: /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: truecolor: 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.5zIndex: -1 # 背景的 z-index 属性，css 属性用于控制所在层的位置, 默认: -1.count: 99 # 线条的总数量, 默认: 99
很多博客都有的几何线条背景
color：线条颜色
pointColor：交点颜色
opacity：线条透明度（0~1）
zIndex：css 属性用于控制所在层的位置,
count：线条的总数量
2.10. 分享链接share
sharejs:enable: truesites: twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin
调整
sites的顺序即可调整页面的分享图标顺序
2.11. 副标题subtitle
subtitle:enable: trueloop: 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.jpgcareer: 搬砖人introduction: 赚钱养猫养狗!
avatar：头像设置
career：职业
introduction：个人介绍
对应效果图如下：
4.3. 配置"我的项目"信息
myProjects:enable: truedata:hexo-theme-matery:icon: fas fa-file-alticonBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'url: http://github.com/blinkfox/hexo-theme-materydesc: This is a Hexo blog theme with 'Material Design' and responsive design.Fenix:icon: fas fa-databaseiconBackground: 'linear-gradient(to bottom right, #F06292 0%, #EF5350 100%)'url: https://github.com/blinkfox/fenixdesc: 这是 Spring Data JPA 复杂或动态 SQL 查询的扩展库。typora-vue-theme:icon: fas fa-file-alticonBackground: 'linear-gradient(to bottom right, #29B6F6 0%, #1E88E5 100%)'url: https://github.com/blinkfox/typora-vue-themedesc: This is a typora theme inspired by Vue document style.
具体自己修改，不想显示，设置enable值为false
### 4.4. 配置"我的技能"信息
mySkills:enable: truedata: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: truedata:- /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: trueowner: 319226862 ##GitHub用户名repo: wyy ##仓库名oauth:clientId: 887ec913a7e17cc91992 ##上一步的两个值clientSecret: ebf1e44552e290707b6d2a9def3825d60f6bdfa6admin: 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
---hexo博客matery主题的个性化配置相关推荐
- hexo博客matery主题个性化配置
hexo博客个性化配置 参考博客 CDN加速:在页脚底部添加又拍云图片logo 博客文章开头format格式 修改hexo new post格式的方法 hexo s手机端查看 修改博客标题在手机端的字 ...
- hexo博客yilia主题_缺失模块_解决方案
hexo博客yilia主题,左侧栏目有一个全部文章的按钮,刚开始开始报错缺失模块,如下图: 我解决了这个问题着实不容易饶了弯路,但是跟着提示步骤,其实很简单,走起: 1.查看node版本 win键+R ...
- hexo 博客next主题集成gitment或者gitalk评论系统
原文链接hexo 博客next主题集成gitment或者gitalk评论系统 前言 之前使用多说,多说挂了,用网易跟帖代替,网易跟帖又没了.前段时间用来必力,感觉还行,但总归不踏实.后面发现有gitm ...
- hexo博客next主题添加对数学公式的支持
hexo博客默认为markdown格式,但是新搭建的hexo博客不支持公式渲染,下面介绍hexo博客next主题下添加对数学公式支持的方法. 环境说明: hexo版本:5.4.1 next版本: 最新 ...
- hexo博客yilia-plus主题更换Beaudar评论插件
文章目录 hexo博客yilia-plus主题更换Beaudar评论插件 一.安装Beaudar app. 二.添加到主题中 1.直接拉取仓库到本地. 2. 自己进行配置 三. 一些问题 hexo博客 ...
- hexo博客 Maupassant主题 添加萌妹纸、萌宠
给hexo博客养一个 萌妹子或者萌宠,也是偶然之间发现可以添加可爱的妹纸或者是萌宠,发现挺好玩的,而且作者提供了很多模型供你选择,没事的时候还可以逗一逗 ? 文章目录 本博文的简述or解决问题? 获取 ...
- Github pages + Hexo 博客 yilia 主题使用畅言评论系统
文章首发地址:http://www.54tianzhisheng.cn/2017/04/13/Hexo-yilia-changyan/ , 转载请注明出处. 前言 Hexo的Yilia主题由于原来使用 ...
- 为Hexo博客next主题添加友链
为Hexo博客next主题添加友链 20230427153826|left
- hexo博客yilia主题 如何自定义个人博客的背景图片
hexo博客yilia主题 博客背景的设置 个人博客系列文章目录 hexo博客yilia主题 所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...
最新文章
- ECCV2020最佳论文 | 全面解析光流计算模型RAFT
- 2020年10个诱人的技术里程碑
- 个人工作总结09（第二阶段）
- 【Tomcat】Tomcat 系统架构与设计模式，第 1 部分: 工作原理
- cuda profiler使用
- 如何知道osg模型每个节点的名称
- 无处不在的xss攻击
- matlab中bitget函数用法_MATLAB基础函数命令
- 记一次微信H5全屏播放视频的总结
- 03.搭建Spark集群(CentOS7+Spark2.1.1+Hadoop2.8.0)
- Pytorch 多GPU数据并行(DataParallel)
- 服务器主板型号详解,服务器电脑主板科普：各种接口介绍，如何选？
- 【历史上的今天】3 月 31 日：世界备份日；皮克斯创始人出生；《黑客帝国》上映
- linux u盘 修复工具,如何在Linux终端中修复U盘驱动器问题
- 如何让p标签里面的内容首行缩进
- android 指纹存储密码,Android指纹登录/指纹支付简述
- 我的爬虫入门作（一）
- 不懂分布式，枉称大数据
- 26岁想转行做程序员是否可行?
- 如何选购太阳镜（分类、镜片颜色、注意事项）