Hexo使用Butterfly主题

前段时间逛博客的时候，发现了Butterfly主题，感觉十分惊艳，瞬间觉得Sakura这种可可爱爱的不适合我了😂（还是很好用的，感谢hojun~），下面记录了Butterfly相比于Sakura一些好用的功能以及自己魔改的一些地方。断断续续折腾了快一个礼拜总算是差不多了。

1. 优点

1.1 界面

整个界面很简洁，也很酷炫😁

1.2 卡片栏

卡片栏可设置在左边或右边，看个人喜好啦。

1.3 标签页

我能说我就是懒得写标签栏才迁移主题的嘛😶

1.4 大图查看

文章中图片支持放大查看，并能显示整篇文章图片的缩略图（我之前使用的Sakura是没有的🤣）

主题的一般设置可以查阅官方文档——Butterfly安装文档

2. 魔改

一些颜色啥的修改基本都可以在浏览器中用F12检查对应的css样式来修改主题文件。主要是之前没接触过pug和styl😐，折腾时间比较久，还有弄清楚主题的结构也很重要。

2.1 实现文章封面图片

这个功能是主题本来自带的，但是它使用的front-matter关键字是cover(front-matter就是文章前用—-包围的字段)，而我之前写的文章封面图的关键字是photos。做法应该是把文章的cover全部改为photos，我也不知道哪根筋抽了，去把主题模板中用到cover的都改为photos😵，虽然现在少修改了一些，以后就别想轻易升级了😭。

主要是主页和时间轴页面的文章图片显示，找到这两个pug文件，路径为themes\butterfly\layout\includes\mixins，将对应的cover替换为photos，注意下面的图片链接处也需要换。

类似地，卡片栏处的最近文章、文章页面的上一篇下一篇文章需要显示文章封面图的地方均需要做相应地修改😵

不要随便修改，控制台会报莫名其妙的错误！

2.2 实现代码全屏

之前使用的Sakura主题中，点击代码栏，会实现代码全屏，十分喜欢这个功能，换主题之后就想把它搬过来。（前端差的我在Sakura主题模板里面翻了半天😥）

找到highlight.styl，添加如下代码（标签均不要有缩进，styl中使用缩进表示html中标签层级，这里需要标签在最高级）

@keyframes elastic
  0%
    transform:scale(0)
  55%
    transform:scale(1)
  70%
    transform:scale(.98)
  100%
    transform:scale(1)

.code-block-fullscreen
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  min-width:100%;
  z-index:9999999;
  margin:0;
  animation:elastic 1s

@keyframes定义动画~

然后找到main.js，找到code对应的代码（大概300多行），在其中添加下面代码

// 代码全屏
$(document).on('click', '.highlight-tools', function (e) {
if (e.target !== this) return
$(this).parents('figure.highlight').toggleClass('code-block-fullscreen')
})

这就🆗啦~

2.3 添加Aplayer

这里我想在每个页面都显示Aplayer，所以需要自己添加。

找到layout.pug，因为Hexo主题中，所有页面都是继承layout.pug这个文件的，所以把Aplayer的代码放到这里就好了。

在layout.pug文件末尾添加include ./head/aplayer.pug

再进入head目录，修改aplayer.pug文件

link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css))
script(src=url_for(theme.CDN.aplayer_js))
script(src=url_for(theme.CDN.meting_js))
link(rel='stylesheet' href='https://cdn.jsdelivr.net/gh/shenshilei1022/cdn@1.9/css/aplayer/aplayer.css')

meting-js(
    id='85430430'
    server='netease'
    type='playlist'
    fixed='true'
    autoplay='false'
    loop='all'
    order='random'
    preload='auto'
    volume='0.7'
    mutex='true'
)

注意这里我修改了一些Aplayer的css样式，这些样式需要最后再加载进来才能生效，否则生效的是官方样式。（从Sakura那边扒出来的嘿嘿）

Aplayer.css

.aplayer .aplayer-lrc {
    height: 35px;
}
.aplayer .aplayer-lrc p{
    font-size: 16px;
    font-weight: 700;
    line-height: 18px !important;
}
.aplayer .aplayer-lrc p.aplayer-lrc-current{
    color: #FF1493;
}
.aplayer.aplayer-narrow .aplayer-body{
    left: -66px !important;
}
.aplayer.aplayer-fixed .aplayer-lrc {
    display: none;
}
.aplayer .aplayer-lrc.aplayer-lrc-hide {
    display:none !important;
}
.aplayer.aplayer-fixed .lrc-show {
    display: block;
    background: rgba(255, 255, 255, 0.8);
}
.aplayer.aplayer-fixed .aplayer-body {
    position: fixed;
    bottom: 58px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 99;
    background: #fff;
    padding-right: 18px;
    transition: all 0.3s ease;
    max-width: 400px; 
}
.aplayer.aplayer-withlist .aplayer-list {
    display: none; 
}

当然也欢迎直接引用我CDN里面的哈~

有一点不足就是Butterfly没有加入pjax，听歌的时候跳转界面会停止播放。等我再看看Sakura中pjax的代码，试试能不能把pjax加到Butterfly中👊（我太菜了…😭）

2.4 文章加密问题

跟之前使用加密插件的操作相同——Hexo博客添加私密文章

使用的时候遇到一个问题，输入正确密码打开文章后，文章图片会加载异常，看了hexo-blog-encrypt官方文档之后，了解到需要使用回调函数。

这里图片不加载，估计就是懒加载的js出了问题，那么就在加密文章的最后添加如下代码

{% raw %}
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js" async=""></script>
{% endraw %}

问题解决~

2.5 使用Iconfont图标

下面一排社交图标都是Iconfont的图标。

因为Fontawesome没有很多国内的图标，就想着使用Iconfont的图标。

进入Iconfont，将选好的图标添加到购物车中，最后添加到一个项目中。

徐泽Font class， 点击查看在线链接，复制链接（注意这个链接前面要加http:），在additional-js.pug中添加

link(rel='stylesheet', href='http://at.alicdn.com/t/font_1899713_4kvz7z0r3ee.css')

害，我这里偷懒就直接放在引入js的模板中了，其实加到head、header效果是一样的，我这里不太标准😑

之后在主题的_config.yml中使用对应的图标名就可以添加对应的图标啦~

2.6 关于页

我直接把cungudafa的代码拉过来啦，谢谢大佬！

---
title: 关于
date: 2020-6-23 22:14:36
keywords: 关于
description: 
comments: false
photos: https://gitee.com/shenshilei1022/hugo_image_resource/raw/master/imgs/235.jpg

---
{% raw %}
<!-- https://www.bootcdn.cn/botui/ -->
<link href="https://cdn.bootcss.com/botui/0.3.9/botui-theme-default.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/botui/0.3.9/botui.min.css" rel="stylesheet">

<!-- 因为vue和botui更新导至bug,现将对话移至js下的botui中配置 -->
<div class="entry-content">
  <div class="moe-mashiro" style="text-align:center; font-size: 50px; margin-bottom: 20px;">[ShenShilei's Blog]</div>
  <div id="hello-mashiro" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgb(36, 200, 255); border-radius: 10px;">
    <center>
    <p>
    </p>
    <h4>
    与&nbsp;<ruby>
    ShenShilei&nbsp;<rp>
    </ruby>
    对话中...</h4>
    <p>
    </p>
    </center>
    <bot-ui></botui>
  </div>
</div>
<script src="/js/third-party/botui.js"></script>
<script>
  bot_ui_ini()
</script>
{% endraw %}

js文件是之前Sakura主题中的。

2.7 豆瓣电影、追番清单

在博客根目录下打开bash，输入命令

cnpm install hexo-douban --save
cnpm install hexo-bilibili-bangumi --save

安装好插件后按照官方文档一步步设置就可以了。

• hexo-douban
• hexo-bilibili-bangumi

要修改这两个页面的样式，可以在node_modules找到对应的插件，修改目录下的css

还要注意一个问题，追番页面的封面图Butterfly是没有添加的，可以添加几句代码自定义封面

主题下的_config.yml

bangumi:
  # 追番页面封面图
  img: https://gitee.com/shenshilei1022/hugo_image_resource/raw/master/imgs/223.jpg

找到header/index.pug，添加代码

if theme.bangumi
  if is_current('/bangumis/', [strict])
    - var photos = theme.bangumi.img

就可以自定义封面图咯😋

3. 总结

找到并修改成一个适合自己的主题还是很累的，估计很长一段时间都懒得折腾主题了😭，最后感谢提供帮助的大佬文章👍~

4. 参考

• Butterfly
• Sakura
• Butterfly安装文档
• Aplayer
• MetingJS
• hexo-blog-encrypt官方文档
• Iconfont使用
• hexo（butterfly）蝴蝶主题+个性美化
• hexo-douban
• hexo-bilibili-bangumi