前言

上一章我们把HEXO部署到码云，做了简单的配置，我们现在来配置主题，butterfly基于melody主题的基础上开发的主题，UI比较好，使用的人也不少，出了问题比较好求助，我就采用butterfly主题
大宇的博客

安装应用主题

• 安装
  在博客根目录下打开Git bash

npm i hexo-theme-butterfly

• 应用
  在博客框架根目录_config.yml里修改默认主题

theme: butterfly

• 插件
  如果没有 pug 以及 stylus 的渲染器，需要安装

npm install hexo-renderer-pug hexo-renderer-stylus --save

• 方便插件升级
  我们需要把主题目录下的_config.yml复制到根目录下改名为_config.butterfly.yml

如果出现配置失效的问题，就把_config.butterfly.yml删掉再做一遍
需要HEXO5.0.0以上的版本

配置主题

• 设置导航栏

#hexo new page 
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart
  清单||fas fa-list:
     - 音乐 || /music/ || fas fa-music
     - 电影 || /movies/ || fas fa-video
     - 照片 || /Gallery/ || fas fa-images

可以用编辑器的搜索功能来定位，如VScode左侧工具栏的第二个

• 配置banner主图
  这个就比较简单了，应该可以直接看懂

# Image (圖片設置)
# --------------------------------------

# Favicon（網站圖標）
favicon: /img/favicon.png

# Avatar (頭像)
avatar:
  img: /img/avatar.png
  effect: false

# the banner image of home page
……

• 配置分页
  如创建分类页，在博客根目录下执行hexo new page categories
  会创建source\categories\index.my文件，修改它

---
title:【必需】页面标题
date:【必需】页面创建日期
type: 【必需】标籤、分类和友情链接三个页面需要配置
updated:【可选】页面更新日期
description:【可选】页面描述
keywords: 【可选】页面关键字
comments: 【可选】显示页面评论模块 (默认 true)
top_img: 【可选】页面顶部图片
mathjax: 【可选】显示 mathjax (当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: 【可选】显示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside: 【可选】显示侧边栏 (默认 true)
aplayer: 【可选】在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐 配置
highlight_shrink: 【可选】配置代码框是否展开 (true/false)(默认为设置中 highlight_shrink 的配置)
---

如果是关于页，内容可以直接用MD语法写在该文件其下
友情链接的添加需要在完成该操作的基础上，新建source/_data/link.yml文件，添加如下内容

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: JerryC
      link: https://jerryc.me/
      avatar: https://jerryc.me/image/avatar.png
      descr: 今日事,今日毕
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架
    - name: 大宇
      link: https://confucianmen.gitee.io/blog/
      avatar: https://s1.ax1x.com/2020/08/11/aX3EsP.gif
      descr: 热爱分享 热爱学习   

• 设置主页名句
  如果设置多条名句，在没开特效的情况下，只显示第一条

subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: false
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 ,
  # 如果有英文雙引號' " ',請使用轉義字元 "
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub: 
    - 天行健 君子以自强不息 | 地势乾 君子以厚德载物

• 配置社交图标
  在阿里巴巴矢量图标库里面，把需要的图标添加购物车，在新建项目，在购物车中将图标添加到项目中
  在主题配置文件中修改：

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
   - <link rel="stylesheet" href="{矢量图库项目地址代码}"> #引入阿里巴巴矢量图库

将图标项目添加到页头后

social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email
  iconfont gitee: https://gitee.com/××× ||Gitee

• 统计分析
  我这里用百度统计

# Analysis
# --------------------------------------

# Baidu Analytics
baidu_analytics: {百度统计的号码}