butterfly主题修改

butterflt主题

前置

开始我的主题是matery的，经过不断修改又来到了butterfly这个主题。这里省略 node 和 hexo 的安装，直接在初始化博客开始。相关操作请查看之前的博客搭建。

由于目前主题已更新，此文件中部分配置可能失效。请参考作者博客或文档进行。

安裝

在你的博客根目录下：

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的 dev 分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

建议选择最新的分支，因为更新一些新的东西优化了还是挺好的

启动主题

修改站点配置文件_config.yml，把主题改为 Butterfly（这里的name要与你的主题下的分支一样）

theme: Butterfly

如果你没有 pug 以及 stylus 的渲染器，请下载安装： npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus

平滑升级

为了主题的平滑升级，Butterfly 使用了 data files 特性。

推荐把主题默认的配置文件_config.yml 复製到 Hexo 工作目录下的 source/_data/butterfly.yml，如果 source/_data的目录不存在那就创建一个。

注意，如果你创建了 butterfly.yml, 它将会替换主题默认配置文件_config.yml 里的配置项 (不是合併而是替换), 之后你就只需要通过git pull 的方式就可以平滑地升级 theme-butterfly 了。

主题页面

• Page Front-matter

---
title:
date:
type: （tags,link,categories这三个页面需要配置）
comments: (是否需要显示评论，默认true)
description:
top_img: (设置顶部图)
mathjax:
katex:
---

• Page Front-matter

---
title:
date:
type: （tags,link,categories这三个页面需要配置）
comments: (是否需要显示评论，默认true)
description:
top_img: (设置顶部图)
mathjax:
katex:
---

标签页

1. 前往你的 Hexo 博客的根目录

2. 输入 hexo new page tags

3. 你会找到 source/tags/index.md 这个文件

4. 修改这个文件：

---
title: 标签
date: 2020-02-02 10:00:00
type: "tags"
---

分类页

1. 前往你的 Hexo 博客的根目录

2. 输入 hexo new page categories

3. 你会找到 source/categories/index.md 这个文件

4. 修改这个文件：

---
title: 分类
date: 2020-02-02 10:00:00
type: "categories"
---

友情链接

1. 前往你的 Hexo 博客的根目录

2. 输入 hexo new page link

3. 你会找到 source/link/index.md这个文件

4. 修改这个文件：

---
title: 友情链接
date: 2020-02-02 10:00:00
type: "link"
---

5. 添加友链
   在 Hexo 博客目录中的 source/_data，创建一个文件 link.yml

class:
  class_name: 友情链接
  link_list:
    1:
      name: 初辰の博客
      link: https://chuchendjs.github.io/
      avatar: https://img-blog.csdnimg.cn/20200429004412881.jpg
      descr: 一个还在努力中的程序袁
    2:
      name: test
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: test  


class2:
   class_name: 链接无效
   link_list:
     1:
       name: test
       link: https://blog.xxx.com
       avatar: https://img.antmoe.com/avatar.png
       descr: test
     2:
       name: test
       link: https://www.axxxx.cn/
       avatar: https://img.antmoe.com/avatar.png
       descr: test

6. 友情链接界面设置
   需要添加友情链接，可以在 Butterfly.yml 配置
   可在友情链接上写上自己的个人资料，方便其他人添加。

Flink:
  headline: 友情链接
  info_headline: 我的Blog资料
  name: Blog 名字： 
  address: Blog 地址： https://www.antmoe.com/
  avatar: Blog 头像： https://img.antmoe.com/avatar.jpg
  info: Blog 简介： 一个收藏回忆与分享技术的地方！
  comment: 如果需要交换友链,请留言

音乐界面

音乐界面使用插件 hexo-tag-aplayer 使用方法请参考文档

注意：hexo-douban会主动生成页面，所以不需要自己创建。对应的网页的top_img可以butterfly.yml修改。

音乐界面参考 https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

电影

电影界面参考 https://github.com/mythsman/hexo-douban

主題配置

语言

修改站点配置文件 _config.yml

默认语言是 en

主题支持三种语言

• default(en)
• zh-CN (简体中文)
• zh-TW (繁体中文)

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的_config.yml

title: 初辰の博客
subtitle: '初辰の博客'
description: '一个收藏回忆与分享技术的地方！'
keywords: 关键词
author: 作者
language: zh-CN
timezone: '时区'
email: 邮箱

导航菜单

menu:
  首页: / || fa fa-home
  时间轴: /archives/ || fa fa-archive
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-folder-open
  媒体||fas fa-list: