Hexo+Butterfly博客搭建记录（1）

★头部设置Front-matter

页面配置（Page）

参数	功能
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的配置)

文章页配置（Post）

参数	功能
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)
sticky	【可选】文章置顶显示，数值越大，排序越高。最小为1，负数则为置底。

*以上参数按需使用即可。

*摘自：Butterfly 安装文档(二) 主题页面

个人信息

QQ

1	http://wpa.qq.com/msgrd?v=3&uin=#####&site=qq&menu=yes

将链接中的“#####”改为自己的 QQ 号，用户点击链接将跳转到添加好友的界面，若已经是好友则进入聊天对话框。

（手机端测试无效。）

邮件

1	mailto:#####

将链接中的“#####”改为自己的邮箱地址，用户点击链接将跳转到 email 应用，手机端可自行选择发送邮件的应用， Windows 端唤起默认应用， Mac 端未测试。

图标库

阿里巴巴矢量图标库

首先将需要的图标加购购物车，然后添加至项目（如果没有，则新建一个），在 “资源管理” - “我的项目” 里选择 Font_class 类型，复制 CDN 代码（如果没有，则生成一个）待用。

在 Hexo 根目录下，在主题配置 _config.butterfly.yml 文件中的 inject 部分引入

inject:
  head:
    - <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3854537_gjtqti1yoi4.css">
    - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    # - xxxxxxxxxx
  bottom:
  	# - xxxxxxxxxx

需要注意的是，一旦你的项目发生了变化（新增、删减或修改某个图标），那么就需要重新生成 CDN 代码，并在你的主题配置中更新。

FontAwesome

这是 Butterfly 自带的图标库，测试发现两个小问题，一是有些特效仅对此图标库有效，换成其他图标库的图标就无效，比如图片旋转；二是有些图标应用后无显示，比如 fa-photo 等。图标详情可以看这篇博客：https://9iphp.com/fa-icons

同样的，该图标库的引用方法：

inject:
  head:
    - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    # - xxxxxxxxxx
  bottom:
  	# - xxxxxxxxxx