【精选】hexo博客matery主题的个性化配置 |
您所在的位置：网站首页 › hexo设置封面图 › 【精选】hexo博客matery主题的个性化配置 |
【精选】hexo博客matery主题的个性化配置
|
文章目录
一、matery主题的下载与安装二、基本配置1.根目录下的 `_config.yml`1.1. title1.2. deploy与theme
2.themes目录下的`_config.yml`2.1. menu，icon，二级菜单2.2. dream【可选】2.3. music2.4. indexbtn2.5. sociallink2.6. 打赏功能2.7. 字数统计等2.8. featureimages2.9. 几何线条背景canvas_nest2.10. 分享链接share2.11. 副标题subtitle
3. 修改导航栏颜色4. “关于”页面（about）4.1. 新建about页面4.2. 个人信息4.3. 配置"我的项目"信息4.5. 配置"我的相册"信息
5. 新建标签/分类/留言板页面6. 开发评论功能gittalk6.1. 注册OAuth Application6.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
初始效果如上图，当不需要导航栏有这么多标签时，可以选择注释掉不需要的部分。例如： 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
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
作用如图，其中，不写代表不启用，想添加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 开启后效果：
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'
打开 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： 个人介绍 对应效果图如下：
具体自己修改，不想显示，设置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%
完成后找到/source/about/index.md 文件，在文件里面添加 --- title: about date: 2021-01-30 12:28:30 type: "about" ##同理，记得更改名称 layout: "about" ##同上 --- 6. 开发评论功能gittalk 6.1. 注册OAuth Application传送门 在_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 --- |
【本文地址】