Butterfly更新部署

随作者更新以后，在该博客进行了一些同步更新

配置butterfly文件

将theme/Butterfly下的config.yml复制到sourse/_data下的butterfly.yml文件里，c此后就可以直接配置butterfly可以了，它会替代( 注：不是替换，通俗讲配置butterfly就有用就可以了)

代码

增加友情链接

创建友情链接

在 Hexo 博客的根目录
输入 hexo new page link
你会找到source/link/index.md这个文件

修改文件：

---
title: 友情链接
date: 2019-11-19 08:29:29
type: "link"
---

友情链接添加

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

class:
  class_name: 友情链接
  link_list:
    1:
      name: xxx
      link: https://blog.xxx.com
      avatar: https://profile.csdnimg.cn/8/3/C/1_qq_38496329
      descr: xxxxxxx
    2:
      name: xxxxxx
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: xxxxxxx  

class2:
   class_name: 链接无效
   link_list:
     1:
       name: 梦xxx
       link: https://blog.xxx.com
       avatar: https://xxxx/avatar.png
       descr: xxxx
     2:
       name: xx
       link: https://www.axxxx.cn/
       avatar: https://x
       descr: xx

友情链接界面设置

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

Flink:
  headline: 友情链接
  info_headline: 我的Blog资料
  name: Blog 名字： XJC&BLOG
  address: Blog 地址： https://xjc5772.github.io/
  avatar: Blog 头像： https://profile.csdnimg.cn/8/3/C/1_qq_38496329
  info: Blog 简介： 多学一点，没什么不好的
  comment: 如果需要交换友链,请留言

代码复制功能

主题支持代码复制功能

配置butterfly.yml

highlight_copy: true

代码框展开/关闭

配置butterfly.yml

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击标记处可展开代码

highlight_shrink: true #代码框不展开，需点击 '>' 打开

代码框关闭

highlight_shrink: true

代码框展开

highlight_shrink: false

代码换行

在默认情况下，hexo-highlight在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

配置butterfly.yml

code_word_wrap: true

然后找到你站点的 Hexo 配置文件_config.yml，将line_number改成false

highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

设置code_word_wrap之前(没有那么长的图，借用作者的):

代码换行前

设置code_word_wrap之后(同上):blonde_woman:

代码换行后

社交图标

Butterfly支持 font-awesome v4和 font-awesome v5. 如需开启font-awesome v5,需要在butterfly.yml上开启

此处我用的font-awesome v5

配置butterfly.yml

CDN_USE:
  css:
    - /css/index.css
    - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
    - https://use.fontawesome.com/releases/v5.8.1/css/all.css #fontawesomeV5_css

无论V4还是V5,书写格式都是一样的图标名：url

social:
  fa fa-github: https://github.com/jerryc127
  fa fa-rss: /atom.xml

主页文章节选(自动节选和文章页description)

此处额外谈一点，重新认识了一篇文章的那么多属性，下面我将逐一认识

layout: hexo
title: Hexo文章的发布
date: 2019-10-28 20:37:17
categories: Hexo
tags:
- Hexo
- 异常处理
keywords: 'Hexo,异常处理'
description: 对Hexo博客搭建的一些简单记录，已经对一些坑进行填埋
abbrlink: 46be9372
cover: https://source.unsplash.com/collection/collectionid/1600x900
top_img: https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture

文章标题：title

title: Hexo文章的发布

创建时间：date

date: 2019-10-28 20:37:17

创建分类：categories

categories: Hexo

创建标签：tags

tags:

- Hexo

- 异常处理

创建描述：description

因为主题UI的关系，主页文章节选只支持自动节选和文章页description。优先选择自动节选。

在butterfly.yml里可以开启auto_excerpt的选项，你的文章将会在自动截取部分显示在主页。（默认显示150个字）。

auto_excerpt:
  enable: true
  length: 150

如果没有开启自动节选，则会显示文章页front-matter里面设置的description。

我是将自动节选给关闭了的，就会显示我的description里的内容

创建封面图：cover

默认文章封面

配置butterfly.yml

default_cover: https://xxx.png #默认图片地址

如果不配置cover,可以设置显示默认的cover

自定义文章封面

配置文章.md

cover: https://images.unsplash.com/photo-1572557347335-f6e9500ede25?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=1600

配置page主页图

配置butterfly.yml

default_top_img: https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture

此处使用了随机图片，作为首页图，每次进入将会不一样

当顶部图留空，true和false
主页会显示纯颜色的顶部图

其他page的顶部图没有设置时，也会显示纯颜色的顶部

配置顶部图

配置文章顶部图

配置文章.md

top_img: https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture

配置archive顶部图

配置butterfly.yml

archive_img: https://i.loli.net/2019/11/19/XlPxSY2O9NUDvjf.jpg

配置tag顶部图

配置butterfly.yml

tag_img: https://i.loli.net/2019/11/19/XlPxSY2O9NUDvjf.jpg

配置category顶部图

配置butterfly.yml

category_img: https://i.loli.net/2019/11/19/XlPxSY2O9NUDvjf.jpg

配置文章相关信息

post_meta:
  date_type: both # or created or updated 文章日期是创建日或者更新日或都显示
  categories: true # or false 是否显示分类
  tags: true # or false 是否显示标签

配置悬赏

配置butterfly.yml

reward:
  enable: true
  QR_code:
    - itemlist:
        img: /img/wechat.jpg
        text: 微信
    - itemlist:
        img: /img/alipay.jpg
        text: 支付宝

配置头像

配置butterfly.yml

avatar: https://i.loli.net/2019/11/19/y9F2N5EaYASTzvR.jpg

配置相关文章

相关文章推荐的原理是根据文章tags的比重来推荐

配置butterfly.yml

related_post:
  enable: true
  limit: 3 # 显示推荐文章数目

配置运行时间

配置butterfly.yml

runtimeshow:
  enable: true
  start_date: 10/21/2019 00:00:00
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

配置评论(Valine)

配置butterfly.yml

此处先到Valine登录后创建应用，获取appID与appkey，参考官方文档，将其复制到appId与appKey处，修改enable为true

valine:
  enable: true # if you want use valine,please set this value is true
  appId: zeWPXXXXXXXXXXXXXXXXXXXXXXXoHsz # leancloud application app id
  appKey: EpwGoXXXXXXXXXXXXXXXXNWRpW2V # leancloud application app key
  notify: false # valine mail notify (true/false) 
  verify: false # valine verify code (true/false)
  pageSize: 7 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-cn # i18n: zh-cn/en
  placeholder: Please leave your footprints # 预输入
  guest_info: nick,mail,link #valine comment header info
  bg: /img/comment_bg.png # valine background

官方文档中还有头像配置与邮箱提醒等配置，这里不做更多的详解，可以自己到Valine官网去查看

配置搜索

配置本地搜索

首先需要安装 hexo-generator-search. 根据它的文档去做相应配置。注意格式只支持 xml

安装hexo-generator-search

$ npm install hexo-generator-search --save

配置butterfly.yml

local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

UI特效页面配置

配置butterfly.yml

配置主题色

颜色值必须被双引号包裹，就像”#000”而不是#000。否则将会在构建的时候报错！

theme_color:
  enable: true
  main: "#9370DB"
  paginator: "#7A7FF1"
  button_hover: "#FF7242"
  text_selection: "#69c46d"
  link_color: "#858585"
  hr_color: "#A4D8FA"
  read-mode-bg_color: '#FAF9DE'

配置背景

# 图片格式 background: url(http://xxxxxx.com/xxx.jpg)
# 顔色 background: '#49B202'
# 留空 显示白色
background: #此处可以是背景色，也可以是图片路径

# footer是否显示图片背景(与top_img一致)
footer_bg: true

配置打字效果

# 打字效果
activate_power_mode:
  enable: true

配置背景彩带

静态彩带

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #设置是否每次点击都更换彩带
  mobile: false # false 手机端不显示 true 手机端显示

动态彩带

canvas_ribbon_piao:
  enable: true
  mobile: false # false 手机端不显示 true 手机端显示

配置背景nest

canvas-nest

canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: true # false 手机端不显示 true 手机端显示

配置点击效果

爆炸泡泡

fireworks:
  enable: true

爱心

# 点击出现爱心
click_heart:
  enable: true

富强民主

# 点击出现文字，文字可自行修改
ClickShowText:
  enable: false
  text: 
    - 富强
    - 民主
    - 文明
    - 和谐
    - 自由
    - 平等
    - 公正
    - 法治
    - 爱国
    - 敬业
    - 诚信
    - 友善
  fontSize: 15px

网站副标题

# 主页subtitle
# 打字效果
subtitle: 
  enable: true
  # source调用第三方服务
  # source: false 关闭调用 
  # source: 1  调用金山词霸的每日一句（简体）
  # source: 2  调用一言网的一句话（简体） #https://hitokoto.cn/
  # source: 3  调用一句网（简体） http://yijuzhan.com/
  # source: 4  调用今日诗词（简体） https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # (如果有英文逗号' , '，请使用转义字符 &#44;)
  sub:
    - 共眠一舸听秋雨&#44;小簟轻衾各自寒
    - Sleep together and listen to the autumn rain

配置字数统计

安装配置

$ npm install hexo-wordcount --save

配置butterfly.yml

wordcount:
  enable: true

配置 Snackbar 弹窗

# Snackbar 彈窗
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode時彈窗背景
  bg_dark: '#2d3035' #dark mode時彈窗背景

Butterfly更新部署

配置butterfly文件

代码

增加友情链接

代码复制功能

代码框展开/关闭

代码框关闭

代码框展开

代码换行

代码换行前

代码换行后

社交图标

主页文章节选(自动节选和文章页description)

文章标题：title

创建时间：date

创建分类：categories

创建标签：tags

创建描述：description

创建封面图：cover

默认文章封面

自定义文章封面

配置page主页图

配置顶部图

配置文章顶部图

配置archive顶部图

配置tag顶部图

配置category顶部图

配置文章相关信息

配置悬赏

配置头像

配置相关文章

配置运行时间

配置评论(Valine)

配置搜索

配置本地搜索

UI特效页面配置

配置主题色

配置背景

配置footer

配置打字效果

配置背景彩带

静态彩带

动态彩带

配置背景nest

配置点击效果

爆炸泡泡

爱心

富强民主

网站副标题

配置字数统计

配置 Snackbar 弹窗