Hexo-Butterfly 博客

安装

安装git和nodejs

apt update
apt install -y nodejs git

查看环境安装是否成功：node -v 出现版本号，npm -v 出现版本号，git -version 出现版本号

设置npm的镜像源：查看npm的配置

#查看npm的配置
npm config list
#默认源
npm config set registry https://registry.npmjs.org
#临时改变镜像源
npm --registry=https://registry.npm.taobao.org
#永久设置为淘宝镜像源
npm config set registry https://registry.npm.taobao.org
#另一种方式，编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

安装hexo静态博客框架

# hexo框架的安装
npm install -g hexo-cli
# 等上一个命令完成后，在输入下面的命令
# 初始化文件夹
hexo init <新建文件夹的名称>
cd <新建文件夹的名称>
# 安装博客所需要的依赖文件  
npm install

安装Butterfly主题

进入到初始化文件夹Hexo 根目录里

# 拉取Butterfly主题文件，到主题目录
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装渲染插件

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

应用主题

修改 Hexo 根目录下的 _config.yml，把主题改为butterfly

# 找到theme并修改为
theme: butterfly

Butterfly主题配置文件

为了方便以后主题升级

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ,而不是 hexo 的 _config.yml)

注意： 不要把主题目录的 _config.yml 删掉
注意： 以后只需要在 _config.butterfly.yml进行配置就行。
如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。

Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

页面，文章 配置

页面配置

---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---
写法 解释
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的配置)

文章页配置

---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
---
写法 解释
title 【必需】文章标题
date 【必需】文章创建日期
updated 【可选】文章更新日期
tags 【可选】文章标签
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部图片
cover 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments 【可选】显示文章评论模块(默认 true)
toc 【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number 【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple 【可选】显示 toc 简洁模式
copyright 【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author 【可选】文章版权模块的文章作者
copyright_author_href 【可选】文章版权模块的文章作者链接
copyright_url 【可选】文章版权模块的文章连结链接
copyright_info 【可选】文章版权模块的版权声明文字
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside 【可选】显示侧边栏 (默认 true)

创建页面

标签页

前往你的 Hexo 博客的根目录

输入hexo new page tags

会生成source/tags/index.md文件

修改index.md文件：

添加 type: "tags"

---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
---

其他配置添加可查看页面配置

分类页

前往你的 Hexo 博客的根目录

输入hexo new page categories

会生成source/categories/index.md文件

修改index.md文件：

添加 type: "categories"

---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---

其他配置添加可查看页面配置

友情链接

创建

前往你的 Hexo 博客的根目录

输入hexo new page link

会生成source/link/index.md文件

修改index.md文件：

添加 type: "link"

---
title: 友情链接
date: 2018-06-07 22:17:49
type: "link"
---

添加

在Hexo博客目录中的source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件link.yml

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的博客框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

文章页

前往你的 Hexo 博客的根目录

输入hexo new post <文章文件名>

你会找到source/_posts/<文章文件名>.md这个文件

编辑<文章文件名>.md文件：

可以开始添加文章配置及编写文章了

安装本地搜索功能

安装hexo-generator-search

npm install hexo-generator-search --save

修改主题配置文件

local_search:
  enable: false
  preload: false
  CDN:
参数 解释
enable 是否开启本地搜索
preload 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
CDN 搜索文件的 CDN 地址（默认使用的本地链接）

设置页面提交到git

安装 hexo-deployer-git

npm install hexo-deployer-git --save

修改Hexo配置文件_config.yml

注意不是主题配置，是Hexo的程序配置

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git #类型
  repo:
      github: git@github.com:xxxx/xxxx.git #github地址
  branch: main #要提交到的github分支

注：内容来自于Butterfly官方butterfly.js.org搬运于此方便本人查看
更多教程可观看Butterfly官方butterfly.js.org