Hexo主题Butterfly的改造

本篇文章是基于Butterfly主题的插件和各种魔化配置，不涉及基础的主题选项调整。

Valine评论

官方https://butterfly.js.org/posts/ceeb73f/#%E8%A9%95%E8%AB%96
Hexo的评论系统有很多，常见的有以下几个

valine
多说
网易云跟帖
畅言
来必力（LiveRe）
Disqus
Hypercomments

首先多说和网易云已经倒下了，其次畅言需要备案，Disqus，Hypercomments和LiveRe都是国外的，加载速度贼慢，甚至有被墙的可能，最后决定使用 Valine

注册Leancloud

LeanCloud官网 (https://www.leancloud.cn/)

获得appid 和 appkey

注册完，实名认证后创建一个应用，名字可以随便起，然后进入应用->设置->应用key
获取appid 和 appkey

添加域名

Leancloud -> 设置 -> 安全中心 -> Web 安全域名把你的域名加进去

本地Hexo配置

拿到你的appid和appkey之后，打开主题配置文件搜索 valine，填入appid 和 appkey

# valine
# https://valine.js.org
valine:
  appId: # leancloud application app id
  appKey: # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder: 记得留下你的昵称和邮箱,可以快速收到回復 # valine comment input placeholder (like: Please leave your footprints)
  guest_info: nick,mail,link # valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: /img/comment_bg.png # valine background
  emojiCDN: # emoji CDN
  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)
  option:

为Valine评论系统增加邮件提醒功能

我希望Valine可以做到在有小伙伴留言的时候，可以直接邮件提醒我，所以接下来就介绍下为Valine评论系统增加邮件提醒功能的配置过程。
Leancode的应用中，云引擎 -> Web -> 设置
详情了解CSDN博客(https://xuqwblog.blog.csdn.net/article/details/107248047)

问题

如果Butterfly主题版本高，还需要另外配置主题文件:
在主题配置文件中，打开Valine

# Comments System
# --------------------------------------
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use:
   - Valine
  # - Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

字数统计

根目录执行：
npm install hexo-wordcount --save
修改主题配置文件：

wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true

Gallery图库

新建page

博客根目录下
hexo new page gallery

修改

主题配置文件，增加图库一栏

menu:
 首页: / || fas fa-home
 时间轴: /archives/ || fas fa-archive
 标签: /tags/ || fas fa-tags
 分类: /categories/ || fas fa-folder-open
 清单||fas fa-list:
   - 音乐 || /music/ || fas fa-music
   - 电影 || /movies/ || fas fa-video
   - 图库 || /gallery/ || fas fa-heart
 友链: /link/ || fas fa-link
 关于: /about/ || fas fa-heart

打开\source\gallery\index.md，添加

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

name：图库名字
description：图库描述
link：连接到对应相册的地址

img-url：图库封面的地址
例子：

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

修改相册

gallery文件夹下新建相应名字，并在新建的文件夹下新建index.md,
如下表写入示例代码，部署即完成。

{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}