Butterfly主题使用汇总

这里把我使用Butterfly主题所添加的代码、插件和特有的语法做个总结，防止自己忘记了。。。🐱‍🐉

1. 标签外挂(Tag Plugins语法)

{% note default %}
default 提示标签块
{% endnote %}

{% note primary %}
primary 提示标签块
{% endnote %}

{% note success %}
success 提示标签块
{% endnote %}

{% note info %}
info 提示标签块
{% endnote %}

{% note warning %}
warning 提示标签块
{% endnote %}

{% note danger %}
danger 提示标签块
{% endnote %}

效果如下

default 提示标签块

primary 提示标签块

success 提示标签块

info 提示标签块

warning 提示标签块

danger 提示标签块

2. 插件使用

文章加密插件hexo-blog-encrypt
安装指令 cnpm install hexo-blog-encrypt —save

豆瓣插件hexo-douban
安装指令 cnpm install hexo-douban —save

追番页面插件hexo-bilibili-bangumi
安装指令 cnpm install hexo-bilibili-bangumi —save

文章加密插件hexo-blog-encrypt
安装指令 cnpm install hexo-blog-encrypt —save

部署博客插件hexo-deployer-git
安装指令 cnpm install hexo-deployer-git —save

短链接插件hexo-abbrlink
安装指令 cnpm install hexo-abbrlink —save
注意：使用时可能会报错，原因是需要auto_category插件，我的处理方法是在插件中找到报错的代码，注释掉需要auto_category的部分(不想装插件了🤣)
安装好之后修改博客根目录下的_config.yml文件

permalink: post/:abbrlink/

abbrlink:
alg: crc16  # 算法：crc16(default) and crc32
rep: hex    # 进制：dec(default) and hex
# 使用crc16已经能生成65535篇文章了，对于个人博客感觉已经够用了
# 使用hex是因为我觉得带字母好看一点

文章置顶插件hexo-generator-indexed
安装指令 cnpm install hexo-generator-indexed —save
安装后，需要置顶的文章的Front-matter中添加sticky: 1，数字越大表示优先级越高。

3. 外部资源引用

Aplayer and MetingJS
aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
meting_js: https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js
自己修改的样式aplayer_css: https://cdn.jsdelivr.net/gh/shenshilei1022/cdn@2.0/css/aplayer/aplayer.css

代码全屏

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

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

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

思源宋体 https://fonts.googleapis.com/css?family=Noto+Serif+SC

iconfont图标 https://at.alicdn.com/t/font_1899713_4kvz7z0r3ee.css

添加鼠标自定义样式

1
2
3

body
  // 自定义鼠标样式
  cursor: url(https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/cursor.ico),default

感谢Justlovesmile大佬提供的文件🤗

友链样式

flink.pug

#page
.flink#article-container
  if site.data.link
    each i in site.data.link
      if i.class_name
        h2!= i.class_name
      if i.class_desc
        .flink-desc!=i.class_desc
      .flink-list
        each item in i.link_list
          .flink-list-item(style= item.color ? `--primary-color:${item.color};border-width:${item.width};border-style:${item.style};animation: ${item.custom} ${item.time} infinite alternate; background:${item.background}` : 'border-width:0px;border-style:solid;animation: link_custom 0s infinite alternate;background:0')
            a(href=url_for(item.link)  title=item.name target="_blank")
              if theme.lazyload.enable
                img(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
              else
                img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
              .flink-item-name= item.name 
              .flink-item-desc= item.descr
  != page.content
if page.comments !== false
  include includes/comments/index.pug

link/index.md

---
title: 友情链接
date: 2020-06-24 11:43:01
type: "link"
top_img: https://gitee.com/shenshilei1022/hugo_image_resource/raw/master/imgs/249.jpg
---
添加友链格式：

- name: ShenShilei
- link: https://shenshilei1022.gitee.io/
- avatar: https://cdn.jsdelivr.net/gh/shenshilei1022/cdn@1.6/img/custom/avatar.png
- descr: 纵使黑夜吞噬了一切，太阳还可以重新回来。

{% raw %}
<style>
.flink#article-container .flink-list > .flink-list-item:before {
    background-color: #b7efcd !important;
}

.flink#article-container .flink-list > .flink-list-item:hover {
    color: #797979 !important;
}

/* .flink#article-container .flink-list > .flink-list-item {
    animation: breath 2s infinite alternate;
} */

@keyframes link_custom{from{box-shadow:0 0 5px var(--primary-color,grey),inset 0 0 5px var(--primary-color,grey),0 1px 0 var(--primary-color,grey)}to{box-shadow:0 0 20px var(--primary-color,grey),inset 0 0 10px var(--primary-color,grey),0 1px 0 var(--primary-color,grey)}}@keyframes link_custom1{0%{box-shadow:0 0 4px #ca00ff}25%{box-shadow:0 0 16px #00b5e5}50%{box-shadow:0 0 4px #00f}75%{box-shadow:0 0 16px #b1da21}100%{box-shadow:0 0 4px red}}@keyframes flash{from{border-color:transparent}to{border-color:var(--primary-color,grey)}}@keyframes auto_rotate_left{from{transform:rotate(0)}to{transform:rotate(-360deg)}}@keyframes auto_rotate_right{from{transform:rotate(0)}to{transform:rotate(360deg)}}.flink#article-container .post-cards .md-links>.md-links-item a:hover{color: #797979 !important}.flink .post-cards .md-links>.md-links-item a{color:var(--primary-color,#49b1f5);text-decoration:none}.flink .post-cards .md-links>.md-links-item:hover{box-shadow:0 2px 20px var(--primary-color,#49b1f5);animation-play-state:paused}.flink#article-container .post-cards .md-links>.md-links-item:before{background:var(--primary-color,#49b1f5)}.flink .post-cards .md-links>.md-links-item{border:0 solid var(--primary-color,#49b1f5)}.flink#article-container .post-cards .md-links>.md-links-item:hover img{-webkit-transform:rotate(var(--primary-rotate));-moz-transform:rotate(var(--primary-rotate));-o-transform:rotate(var(--primary-rotate));-ms-transform:rotate(var(--primary-rotate));transform:rotate(var(--primary-rotate))}.flink#article-container .post-cards .md-links>.md-links-item a .lauto{animation:auto_rotate_left var(--autotime) linear infinite}.flink#article-container .post-cards .md-links>.md-links-item a .rauto{animation:auto_rotate_right var(--autotime) linear infinite}.flink#article-container .post-cards .md-links>.md-links-item .customcolor{color:var(--namecolor,#1f2d3d)}.flink#article-container .post-cards .md-links>.md-links-item .customcolor:hover{color:#797979}

</style>
{% endraw %}

感谢超逸大佬的教程

4. 更新Butterfly

有一阵子没动博客了😂，重新把博客升级一下

4.1 _config.butterfly.yml

在博客根目录下创建_config.butterfly.yml文件，将主题下_config.yml文件内容复制过来。这样修改主题配置的过程在新建的这个文件中进行就🆗了，方便之后的升级与更新。

4.2 mathjax

之前用的是katex，发现mathjax功能更多，于是转投mathjax的怀抱了🤪。

主题配置文件中mathjax设置为true

然后在博客目录下卸载和安装对应的插件

1 2	cnpm uninstall hexo-renderer-marked --save cnpm install hexo-renderer-kramed --save

最后再去博客配置文件中添加以下内容即可

kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

当文章需要使用数学公式时，在front-matter中添加mathjax: true开启mathjax就可以了。

4.3 valine

自定义表情设置，需要在引入表情仓库后，在博客根目录下的source文件夹中，新建_data文件夹，并新建valine.json文件，文件内容为表情名: 相对仓库的路径

例如：

1	{"happy": "emoji/happy.png"}

4.4 字体

引入上文的字体资源后，在_config.butterfly.yml中进行配置即可

font:
  global-font-size:
  code-font-size:
  font-family: 'Noto Serif SC'
  code-font-family: font-f

这里引入资源可以使用inject

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC">

4.5 豆瓣

改用hexo-butterfly-douban插件，可以方便的设置top_img，其中meta属性设置为true可以让图片在Safari中也可以显示。

在博客根目录下的_config.yml文件中添加如下设置：

douban:
  user: mythsman
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
  timeout: 10000

4.5 BiliBili

还是之前的hexo-bilibili-bangumi插件，只不过目前Butterfly3.3.0版本为追番页面添加top_img没有说明，在这里记录一下。

安装好插件后，同样地在博客根目录下的_config.yml文件中添加如下设置

bangumi:
  enable: true # 是否启用
  path: # 番剧页面路径，默认bangumis/index.html
  vmid: # 哔哩哔哩番剧页面的 vmid(uid)
  title: # 该页面的标题
  quote: # 写在页面开头的一段话，支持 html 语法，可留空。
  show: 2 # 0: 想看, 1: 在看, 2: 看过
  loading: # 图片加载完成前的 loading 图片
  metaColor: '#737070' # meta 部分(简介上方)字体颜色
  color: # 简介字体颜色
  webp: false # 番剧封面使用webp格式(此格式在safari浏览器下不显示，但是图片大小可以缩小 100 倍左右), 默认true
  progress: # 获取番剧数据时是否显示进度条，默认true
  top_img:  # 封面图

这里填了top_img的链接之后，需要去博客根目录下的node_modules文件夹下找到hexo-bilibili-bangumi模块，找到其目录下lib的bangumi-generator.js文件，在对应的return处添加top_img即可

return _context.abrupt("return", {
  path: config.bangumi.path || 'bangumis/index.html',
  data: {
    title: config.bangumi.title,
    content: contents,
    top_img: config.bangumi.top_img
  },
  layout: ['page', 'post']
});

4.6 全局吸底Aplayer

不需要用我之前改主题文件的方法啦，又麻烦且不方便更新😥。

安装hexo-tag-aplayer

1	cnpm install hexo-tag-aplayer --save

在博客根目录下的_config.yml文件中添加设置

1
2
3

aplayer:
  meting: true
  asset_inject: false # 防止重复加载资源

然后打开_config.butterfly.yml，作如下设置

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

inject:
  head:
    - '<style type="text/css">.aplayer.aplayer-narrow .aplayer-body{left: -66px !important;transition: left 1s;} .aplayer.aplayer-narrow .aplayer-body:hover{left: 0 !important;}</style>'
  bottom:
    - <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div>

重新启动，就能看到一个吸底且十分隐蔽的Aplayer啦😜

4.7 Pjax

切换页面时不会刷新页面，使得音乐可以不间断播放，当然要用一手了。

打开_config.butterfly.yml，作如下设置

pjax:
  enable: true
  exclude:
    - /artitalk/

对于一些第三方插件，有些並不支持Pjax 。
你可以把网页加入到 exclude 里，这个网页会被 Pjax 排除在外。
点击该网页会重新加载该网站。