hexo博客matery主题的个性化配置

伊丶二

已于 2024-08-15 16:47:31 修改

阅读量6.8k

点赞数 16

CC 4.0 BY-SA版权

文章标签： hexo

于 2021-01-31 22:33:33 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41376237/article/details/113475727

hexo 专栏收录该内容

1 篇文章

订阅专栏

一、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: 优快云
  icon: fas fa-copyright
  url: https://blog.youkuaiyun.com/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
---