更新记录

2021-09-17 介入外挂标签

教程篇幅过长,对读者阅读不是很友好,所以在形式上进行了整改,希望效果能比之前好。
有什么建议,也可以提出来,谢谢!

  1. 更新v3.7.1适配方案,剔除访客地图。
  2. 注意一点的是,butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache} 改为 { cache:true }

前言

本博客基于Hexo框架搭建,用到 hexo-theme-butterfly 主题(本人博客Butterfly已更新至v3.7.1),hexo-theme-butterfly是基于Molunerfinnhexo-theme-melody的基础上进行开发的。🦋 Butterfly 已经更新到 3.7.5 ,请先参考这系列文档 Butterfly教程 进行基本配置 。如果这篇文章帮到了你,请在留言板写下您的评语吧,感谢您的大力支持!

本篇内容以及本站博客搭建都是参考了许多大佬的教程,如有遗漏文章注明出处,请大佬在底部评论留言,一旦收到消息,我会立即更新文章出处,给您带来不便还请谅解。

搭建部分

安装Hexo

此处略去Git和Node安装教程,如需教程 ,请参考 Hexo+Github博客搭建完全教程

在目标路径打开CMD窗口,输入npm install -g hexo-cli安装Hexo环境。

npm install -g hexo-cli

安装完后输入hexo -v验证是否安装成功。

初始化 hexo 项目 ,即初始化我们的网站项目 ,输入 hexo init 初始化文件夹。

hexo init Demo(你的文件夹名字自取)

然后进入Demo ,接着输入npm i安装相关依赖。

cd Demo  //进入这个Demo文件夹
npm i

新建完成后,文件夹Demo目录下有:

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题**
  • _config.yml: 博客的配置文件**

这样本地的网站配置就弄好啦,输入hexo generate生成静态网页,然后输入hexo s -p 8000(指定端口)打开本地服务器,然后浏览器打开 http://localhost:8000/。

安装主题

在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

升级方法:在主题目录下,运行git pull

在你的博客根目录里

git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly

升级方法:在主题目录下,运行git pull

此方法只支持Hexo 5.0.0以上版本

在你的博客根目录里

npm i hexo-theme-butterfly

升级方法:在博客根目录下,运行 npm update hexo-theme-butterfly

应用主题

修改站点配置文件_config.yml,把主题改为butterfly

theme: butterfly

安装插件

如果你没有 pug 以及 stylus 的渲染器,请下载安装:

npm install hexo-renderer-pug hexo-renderer-stylus --save

升级建议

为了减少升级主题后带来的不便,请使用以下方法(建议,可以不做)。

此方法只支持 Hexo 5.0.0 以上版本,建议使用。
如果已经在 source/_data/ 创建了 butterfly.yml,请记得删除掉。

把主题文件夹中的 _config.yml 复制到 Hexo 根目录里,同时重新命名为 _config.butterfly.yml

以后只需要在 _config.butterfly.yml进行配置就行。

Hexo会自动合併主题中的_config.yml_config.butterfly.yml里的配置,如果存在同名配置,会使用_config.butterfly.yml的配置,其优先度较高。

从 3.3.0 开始,这种方法不再支持

为了减少升级主题后带来的不便, Butterfly 使用了 data files 特性。
推荐把主题默认的配置文件_config.yml 复製到 Hexo 根目录下的source/_data/ 目录下,然后将文件名改为 butterfly.yml(如果source/_data/ 的目录不存在就创建一个)。

注意,如果你创建了 butterfly.yml, 它将会替换主题默认配置文件_config.yml里的配置项 (不是合併而是替换,3.1.0开始将会是合併) 採用butterfly.yml的目的是,因为升级主题的时候,有可能会覆盖到配置文件,以至于每次更新的时候都需要重新配置文件。如果使用butterfly.yml,就算主题目录下的_config.yml被覆盖,主题只会去butterfly.yml读取配置。 由于主题在添加功能或者修復Bugs的情况下,可能会涉及到配置文件的修改。这时候,如果升级主题,需要把新增加的配置添加到butterfly.yml去,不然很大机会会出现报错。( 3.1.0 之后,应该不会出现这种情况)

搭建过程(踩在巨人的肩膀上)

我的Butterfly主题美化

效果预览
查看步骤

编辑博客根目录 /themes/Butterfly/layout/includes/footer.pug 文件,

将以下内容

©${theme.footer.owner.since} - ${nowYear} By ${config.author}

改为

&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

将以下内容

&copy;${nowYear} By ${config.author} 

改为

&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

将以下内容添加到 <head></head>标签内:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

具体放置位置,可以参考下图:

添加豆瓣插件

npm install hexo-douban --save

在根目录下的 _config.yml(⚠️注意事项项目配置文件,不是_config.butterfly.yml) :

douban:
user: ethan_tzy
builtin: false
book:
title: '腹有诗书气自华'
quote: 'One who is filled with knowledge always behaves with elegance.'
movie:
title: '梦想与现实的碰撞'
quote: 'The collision between dream and reality.'
game:
title: '诅咒中闪烁泪光,倾诉霜之哀伤。'
quote: 'Tears flicker in the curse and pour out the sorrow of frost.'
timeout: 10000
  • user: 你的豆瓣ID。打开豆瓣,登入账户,然后在右上角点击 ”个人主页“,这时候地址栏的URL大概是这样:https://www.douban.com/people/xxxxxx/ ,其中的”xxxxxx”就是你的个人ID了。
  • builtin: 是否将生成页面的功能嵌入 hexo s 和 hexo g 中,默认是 false ,另一可选项为 true 。
  • title: 该页面的标题。
  • quote: 写在页面开头的一段话,支持html语法。
  • timeout: 爬取数据的超时时间,默认是 10000ms,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
  • 如果只想显示某一个页面(比如movie),那就把其他的配置项注释掉即可。

_config.butterfly.yml 文件中配置以下内容,如下:

# 如果你有使用hexo-douban,可配置這個
douban:
meta: true
movies_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg
books_img: https://cdn.jsdelivr.net/npm/blog-gallery@1.0.0/1/20200206161657.webp
# games_img:

找到博客跟路径,在此路径下打开CMD命令窗口,输入如下命令 hexo douban

hexo douban

等待命令执行完毕,出现下图所示内容即为成功。

如下图:

添加访客地图

效果预览
查看步骤

前往 clustrmaps 网站注册一个帐号。

找到 Free Tools下面的 Website Widget, 点击 Get Map Widget

输入你的博客网址,点击Next

根据你自己的喜好选择样式Map widgetGlobe Widget(本人使用后者)

找到如下代码,记住 src (** 的部分):

<script type="text/javascript" id="clstr_globe" src="**********************">

themes\Butterfly\layout\includes\widget文件夹新建card_map.pug文件,文件内容如下:

.card-widget.card-map
.card-content
.item-headline
i.fa.fa-globe-asia(aria-hidden="true")
span= _p('aside.card_map')
script#clstr_globe(type="text/javascript" defer="defer" src="此处填入你自己的代码")

编辑 themes\Butterfly\layout\includes\widget\index.pug 文件,在你想要显示的位置插入以下代码:

if theme.aside.card_map
!=partial('includes/widget/card_map', {}, {cache:true})

具体放置位置,可以参考下图(⚠️切记:如果主题版本大于3.6,请务必将{cache:theme.fragment_cache} 改为 { cache:true }):

编辑_config.butterfly.yml 文件,在card_webinfo 下面添加一行card_map: true

编辑themes\Butterfly\languages\zh-CN.yml文件 (请根据你的网站语言选择),找到card_announcement: 公告 , 在下面添加一行card_map: 访客地图 (后面的文本可自定义),繁体字方法一样,修改themes\Butterfly\languages\zh-TW.yml文件就行。

如果不想显示,直接把 _config.butterfly.yml文件的card_map: true 改为 card_map: false 即可。

添加Pixiv日榜

效果预览
查看步骤
  1. themes\Butterfly\layout\includes\widget文件夹新建 card_pixiv.pug文件,文件内容如下:

    .card-widget.card-pixiv
    .card-content
    .item-headline
    i.fa.fa-image(aria-hidden="true")
    span= _p('aside.card_pixiv')
    iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:99%;height:380px;margin:0;")

    https://cloud.mokeyjay.com/pixiv 使用的是 超能小紫 提供的服务,也可以自行搭建,搭建方式请看这里

  2. 编辑themes\Butterfly\layout\includes\widget\index.pug 文件,在你想要显示的位置插入以下代码:

    if theme.aside.card_pixiv
    !=partial('includes/widget/card_pixiv', {}, {cache:true})

    具体放置位置,参考下图(⚠️切记:如果主题版本大于3.6,请务必将{cache:theme.fragment_cache} 改为 { cache:true }):

  3. 编辑 _config.butterfly.yml 文件,在 card_webinfo 下面添加一行 card_pixiv: true,可以通过搜索关键词 aside,找到对应位置添加即可。不想显示,直接把文件中的 card_pixiv: true 改为 card_pixiv: false 即可。

  4. 编辑 themes\Butterfly\languages\zh-CN.yml文件 (请根据你的网站语言选择),找到 card_announcement: 公告 , 在下面添加一行 card_pixiv: Pixiv日榜Top50(后面的文本可自定义)

添加哔哩哔哩番剧页面插件

效果预览
查看步骤
  1. 安装依赖

    npm install hexo-bilibili-bangumi --save
  2. 更新依赖库

    npm install hexo-bilibili-bangumi --update --save
  3. 注入哔哩哔哩番剧
    在根目录下的配置文件_config.yml(⚠️注意:不是_config.butterfly.yml):

    bangumi:
    enable: true
    vmid: 321638084
    title: '生命不息,追番不止。'
    quote: 'Where there is life, there is life.'
    show: 1
    loading: '/img/bangumi-loading.gif'

    配置说明:

    • enable: 是否启用
    • vmid: 哔哩哔哩番剧页面的 vmid(uid), 如何获取?
    • title: 该页面的标题
    • quote: 写在页面开头的一段话,支持 html 语法
    • show: 初始显示页面:0: 想看 , 1: 在看 , 2: 看过,默认为 1
    • loading: 图片加载完成前的 loading 图片
  4. 执行docs命令
    找到博客根路径,在此路径下打开CMD命令窗口,输入如下命令 hexo new page bangumis

    hexo new page bangumis

    找到 source/bangumis/index.md 这个文件
    修改这个文件,添加 type: "bangumis"

    ---
    title: bangumis
    date: 2020-12-14 14:43:39
    type: "bangumis"
    ---

    防止请求次数过多插件不再自动获取番剧数据,所以请根据自己的需要在 hexo generate 或 hexo deploy 之前使用hexo bangumi -u 命令更新番剧数据!
    删除数据命令: hexo bangumi -d

  5. 获取 uid
    登录哔哩哔哩后前往 https://space.bilibili.com/xxx,网址最后的一串数字就是 uid。

  6. 添加卡通人物(看板娘)
    找到博客跟路径,在此路径下打开CMD命令窗口,输入如下命令 npm install --save hexo-helper-live2d

    npm install --save hexo-helper-live2d

    输入以下命令,下载相应的模型, 替换成你想要的模型名称即可,更多模型选择请点击此处,各个模型的预览请访问原作者

    npm install --save live2d-widget-model-shizuku

    在根目录下的配置文件_config.yml(⚠️注意:不是_config.butterfly.yml),添加如下代码:

    live2d:
    enable: true
    scriptFrom: local # 默认
    tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
    debug: false # 调试, 是否在控制台输出日志
    model:
    use: live2d-widget-model-shizuku #模型选择
    display:
    position: right #模型位置
    width: 150 #模型宽度
    height: 300 #模型高度
    hOffset: 20
    vOffset: -20
    mobile:
    show: false #是否在手机端显示
  7. 重新编译运行,即可看到效果。

添加全局吸底APlayer

参考链接:Butterfly添加全局吸底Aplayer教程

此步骤适用于安装了hexo-tag-aplayer插件的人

效果预览
查看步骤
  1. 安装依赖命令(在博客根目录打开CMD窗口使用下面的指令安装就行)

    npm i hexo-tag-aplayer --save
  2. 关闭 asset_inject
    由于需要全局都插入aplayer和meting资源,为了防止插入重复的资源,需要把asset_inject设为false
    在Hexo的配置文件中(_config.yml)

    aplayer:
    meting: true
    asset_inject: false
  3. 开启主题的aplayerInject
    在主题的配置文件中(_config.butterfly.yml),enable设为trueper_page设为true

    # Inject the css and script (aplayer/meting)
    aplayerInject:
    enable: true
    per_page: true
  4. 插入Aplayer html
    为了适配hexo-tag-aplayer,主题内置的Meting js 仍为1.2版本,并非最新的2.x版本。
    Aplayer html 例子(示例中没有显示歌词):

    <div class="aplayer no-destroy" data-id="720305850" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="true" muted></div>

    参数解释如下表

    optiondefaultdescription
    data-idrequiresong id / playlist id / album id / search keyword
    data-serverrequiremusic platform: netease, tencent, kugou, xiami, baidu
    data-typerequiresong, playlist, album, search, artist
    data-fixedfalseenable fixed mode
    data-minifalseenable mini mode
    data-autoplayfalseaudio autoplay
    data-theme#2980b9main color
    data-loopallplayer loop play, values: ‘all’, ‘one’, ‘none’
    data-orderlistplayer play order, values: ‘list’, ‘random’
    data-preloadautovalues: ‘none’, ‘metadata’, ‘auto’
    data-volume0.7default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
    data-mutextrueprevent to play multiple player at the same time, pause other players when this player start play
    data-lrctype0lyric type
    data-listfoldedfalseindicate whether list should folded at first
    data-listmaxheight340pxlist max height
    data-storagenamemetingjslocalStorage key that store player setting

    require代表着这些参数是必须要使用的,其它的参数则可以根据自己需要配置。
    配置全局吸底,data-fixeddata-mini也必须配置,配置为true
    如果使用Pjax,则在class里需添加no-destroy,这样防止切换页面时Aplayer被销毁

    把`aplayer代码`插入到主题配置文件(_config.butterfly.yml)的`inject.bottom`中
    inject:
    head:
    bottom:
    - <div class="aplayer no-destroy" data-id="720305850" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="true" muted></div>
    运行Hexo就可以看到网页左下角出现了Aplayer最后,如果你想切换页面时,音乐不会中断。请把主题配置文件的`pjax`设为`true`
  5. UI 调整

    • 向上调整
      #toggle-sidebar {
      bottom: 80px
      }
      在主题配置文件(_config.butterfly.yml)中,添加到inject
      inject:
      head:
      - '<style type="text/css">#toggle-sidebar {bottom: 80px}</style>'
    • 向右调整
      #toggle-sidebar {
      left: 100px
      }
      在主题配置文件(_config.butterfly.yml)中,添加到inject
      inject:
      head:
      - '<style type="text/css">#toggle-sidebar {left:100px}</style>'

添加贡献日历

效果图:

我的版本可能比较旧,贡献日历已经更新迭代了,所以直接参此教程:Gitcalendar

图库

图库页面只是普通的页面,你只需要hexo n page xxxxx 创建你的页面就行。

然后使用标签外挂 galleryGroup,具体用法请查看对应的内容。

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://7.dusays.com/2021/03/06/38a2c5cd8b44e.jpg %}
{% 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>

子页面

子页面也是普通的页面,你只需要hexo n page xxxxx 创建你的页面就行。

然后使用标签外挂 gallery,具体用法请查看对应的内容。

{% 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 %}

如果你想要使用 /photo/ohmygirl 这样的链接显示你的图片内容

你可以把创建好的 ohmygirl整个文件夹移到 photo文件夹里去

主页冒泡特效

node_modules/hexo-theme-butterfly/source/js 目录下创建一个 chocolate.js 文件(名称可自定义,我是用node装的依赖,所以直接在主题依赖中改了)

具体位置,请看下图所示:

直接复制导入如下代码:

/*
* @Author: tzy1997
* @Date: 2020-12-15 20:55:25
* @LastEditors: tzy1997
* @LastEditTime: 2021-01-12 19:02:25
*/

// 友情链接页面 头像找不到时 替换图片
if (location.href.indexOf("link") !== -1) {
var imgObj = document.getElementsByTagName("img");
for (i = 0; i < imgObj.length; i++) {  
imgObj[i].onerror = function() { this.src = "https://cdn.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/theme_f/friend_404.gif" }
}
}

$(function() {

// 气泡
function bubble() {
$('#page-header').circleMagic({
radius: 10,
density: .2,
color: 'rgba(255,255,255,.4)',
clearOffset: 0.99
});
}! function(p) {
p.fn.circleMagic = function(t) {
var o, a, n, r, e = !0,
i = [],
d = p.extend({ color: "rgba(255,0,0,.5)", radius: 10, density: .3, clearOffset: .2 }, t),
l = this[0];

function c() { e = !(document.body.scrollTop > a) }

function s() { o = l.clientWidth, a = l.clientHeight, l.height = a + "px", n.width = o, n.height = a }

function h() {
if (e)
for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
requestAnimationFrame(h)
}

function f() {
var t = this;

function e() { t.pos.x = Math.random() * o, t.pos.y = a + 100 * Math.random(), t.alpha = .1 + Math.random() * d.clearOffset, t.scale = .1 + .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color = "rgba(" + Math.floor(255 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.random().toPrecision(2) + ")" : t.color = d.color }
t.pos = {}, e(), this.draw = function() { t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath() }
}! function() {
o = l.offsetWidth, a = l.offsetHeight,
function() {
var t = document.createElement("canvas");
t.id = "canvas", t.style.top = 0, t.style.zIndex = 0, t.style.position = "absolute", l.appendChild(t), t.parentElement.style.overflow = "hidden"
}(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
for (var t = 0; t < o * d.density; t++) {
var e = new f;
i.push(e)
}
h()
}(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
}
}(jQuery);

// 调用气泡方法
bubble();
})

最后,在主题 _config.butterfly.yml 文件中,引入 js 文件。

鼠标样式

将以下代码复制到你所创建的 css 文件即可。

body {
cursor: url(https://cdn.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/theme_f/curcor1.png), auto;
}

.hide-block>.hide-button.open,
.hide-inline>.hide-button.open {
display: block
}

a,
button,
img {
cursor: url(https://cdn.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/theme_f/curcor2.png), auto
}

鼠标 * 字跟随样式

效果如下:

node_modules/hexo-theme-butterfly/source/js 目录下创建一个 cursor.js 文件(名称可自定义)

/*!
* Fairy Dust Cursor.js
* - 90's cursors collection
* -- https://github.com/tholman/90s-cursor-effects
* -- http://codepen.io/tholman/full/jWmZxZ/
*/

//鼠标点击雪花特效
(function fairyDustCursor() {

var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = { x: width / 2, y: width / 2 };
var particles = [];

function init() {
bindEvents();
loop();
}

// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove);

window.addEventListener('resize', onWindowResize);
}

function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}

function onTouchMove(e) {
if (e.touches.length > 0) {
for (var i = 0; i < e.touches.length; i++) {
addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
}
}
}

function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;

addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
}

function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle);
}

function updateParticles() {

// Updated
for (var i = 0; i < particles.length; i++) {
particles[i].update();
}

// Remove dead particles
for (var i = particles.length - 1; i >= 0; i--) {
if (particles[i].lifeSpan < 0) {
particles[i].die();
particles.splice(i, 1);
}
}

}

function loop() {
requestAnimationFrame(loop);
updateParticles();
}

/**
* Particles
*/

function Particle() {

this.character = "*";
this.lifeSpan = 120; //ms
this.initialStyles = {
"position": "fixed",
"top": "0", //必须加
"display": "block",
"pointerEvents": "none",
"z-index": "10000000",
"fontSize": "20px",
"will-change": "transform"
};

// Init, and set properties
this.init = function(x, y, color) {

this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};

this.position = { x: x - 10, y: y - 20 };
this.initialStyles.color = color;

this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();

document.body.appendChild(this.element);
};

this.update = function() {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;

this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
}

this.die = function() {
this.element.parentNode.removeChild(this.element);
}

}

/**
* Utils
*/

// Applies css `properties` to an element.
function applyProperties(target, properties) {
for (var key in properties) {
target.style[key] = properties[key];
}
}

init();
})();

然后,在主题 _config.butterfly.yml 文件中,引入 js 文件。

滚动条

将以下代码复制到你所创建的 css 文件即可。

::-webkit-scrollbar {
width: 8px;
height: 8px
}

::-webkit-scrollbar-track {
border-radius: 2em;
/* background-color: rgba(73, 177, 245, .2); */
}

::-webkit-scrollbar-thumb {
background-color: rgb(255 255 255 / .3);
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
border-radius: 2em
}

::-webkit-scrollbar-corner {
background-color: transparent
}

手机侧边栏默认不展开

效果如下:

只需要将下边的代码复制到新建的 js 文件中。

/* 手机侧边栏默认不展开 */
var mobile_sidebar_menus = document.getElementById("sidebar-menus");
if (mobile_sidebar_menus) {
var menus_item_child = mobile_sidebar_menus.getElementsByClassName(
"menus_item_child"
);
var menus_expand = mobile_sidebar_menus.getElementsByClassName("expand");
for (var i = 0; i < menus_item_child.length; i++) {
menus_item_child[i].style.display = "none";
}
}

Valine评论邮件回复提醒

参考教程

Hexo 优化 — Valine 扩展之邮件通知
Valine 添加验证码、博主标签及评论微信、QQ 通知

我的表情数据包

这里放上我的valine表情数据,展示如下图:

下载请点击下面按钮:

改写 menhera 表情样式

去除了dark模式下评论者头像的border和padding(我是默认dark,如果不喜欢,则将css中的第一段去掉)。

因为 valine的默认宽度是 25px , 对于 menhera-chan表情根本无法看清,所以将它pc端评论后的表情加载设置成300px,设屏宽小于768px的,让它继承继承父元素的100%宽 - 30px ,30px是为了与右侧有一段细微间隔,下图可以看到手机端的时候,表情和盒子最右侧是有一定距离的。

对于浏览选择menhera-chan表情时,宽度太小,看不清图片,所以这里调整为设备宽的21%-22%。QQ和B站表情保持不变,只对menhera-chan变轻做出改善。

将以下代码复制到你所创建的 css 文件即可。

/* valine 评论 */

/* 去除了dark模式下头像border和padding */
[data-theme='dark'] .v[data-class=v] .vcards .vcard .vimg {
padding: 0;
border: none;
}

[data-theme='dark'] #post .v[data-class=v] .vcontent img {
display: inline-block;
}

.v[data-class=v] .emoji,
.v[data-class=v] .vemoji {
vertical-align: text-bottom;
}

.v[data-class=v] .vwrap .vemojis {
max-height: 260px !important;
}

.v[data-class=v] .vwrap .vemojis i[title|=menhera] {
width: 22% !important;
margin: 5px 10px;
}

.v[data-class=v] .vwrap .vemojis img[alt|=menhera] {
max-width: 100% !important;
}

.v[data-class=v] .vcontent .emoji[alt|=menhera],
.v[data-class=v] .vcontent .vemoji[alt|=menhera] {
max-width: 300px !important;
/* vertical-align: middle; */
margin: 8px 1px;
display: block !important;
}

@media screen and (max-width: 1200px) {
.v[data-class=v] .vwrap .vemojis i[title|=menhera] {
margin: 5px 8px;
}
}

@media screen and (max-width: 768px) {
.v[data-class=v] .vcontent .emoji[alt|=menhera],
.v[data-class=v] .vcontent .vemoji[alt|=menhera] {
max-width: calc(100% - 30px) !important;
}
}

@media screen and (max-width: 576px) {
.v[data-class=v] .vwrap .vemojis {
max-height: 200px !important;
}
.v[data-class=v] .vwrap .vemojis i[title|=menhera] {
margin: 5px 5px;
}
}

@media screen and (max-width: 400px) {
.v[data-class=v] .vwrap .vemojis i[title|=menhera] {
width: 21% !important;
}
}

效果如下:

添加[博主,小伙伴,访客]标签

  1. 打开themes\butterfly\layout\includes\third-party\comments\valine.pug,按指示添加如下字段。

        function initValine () {
    const valine = new Valine(Object.assign({
    el: '#vcomment',
    appId: '#{theme.valine.appId}',
    appKey: '#{theme.valine.appKey}',
    placeholder: '#{theme.valine.placeholder}',
    avatar: '#{theme.valine.avatar}',
    meta: '#{theme.valine.guest_info }'.split(','),
    pageSize: '#{theme.valine.pageSize}',
    lang: '#{theme.valine.lang}',
    recordIP: #{theme.valine.recordIP},
    serverURLs: '#{theme.valine.serverURLs}',
    emojiCDN: '#{theme.valine.emojiCDN}',
    emojiMaps: !{emojiMaps},
    enableQQ: #{theme.valine.enableQQ},
    path: window.location.pathname,
    requiredFields: [!{theme.valine.requiredFields ? JSON.stringify(theme.valine.requiredFields).split(',') : ''}],
    + master: '#{theme.valine.master}'.split(','),
    + friends: '#{theme.valine.friends}'.split(','),
    + tagMeta: '#{theme.valine.tagMeta || "博主,小伙伴,访客"}'.split(',')
    + metaPlaceholder: !{JSON.stringify(theme.valine.metaPlaceholder || {})}
    visitor: #{theme.valine.visitor}
    }, !{JSON.stringify(theme.valine.option)}))
    }

    如图所示:

  2. 打开_config.butterfly.yml,

    • valine配置项添加 md5加密的博主邮箱,小伙伴邮箱

          # 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: # valine background
      emojiCDN: # emoji CDN
      enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
      requiredFields: nick,mail # required fields (nick/mail)
      + master: # md5加密后的博主邮箱
      + - d4e7????????????44a14e9a94 #可添加多个
      + friends: # md5加密后的小伙伴邮箱
      + - 5c?????????????e268ad3819c #可添加多个
      + - 7c?????????????e2????3919c
      + tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'
      + metaPlaceholder:
      + nick: 昵称/QQ号(必填)
      + mail: 邮箱(必填)
      + link: 网址(https://)

      如图所示:

    • _config.butterfly.yml的CDN配置项添加如下内容。将Valine.min.js替换成魔改版本。

          CDN:
      # comments
      gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
      gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
      - valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
      + valine: https://cdn.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/valine_f/valine.min.js

首页分类磁铁

  1. 修改 themes\Butterfly\layout\index.pug
      extends includes/layout.pug
    block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    + if theme.categoryBar.enable
    + .recent-post-item(style='height:auto;width:100%;padding:0px;')
    + #categoryBar!= list_categories(site.categories,{class: 'categoryBar',depth: 1})
    +postUI
    include includes/pagination.pug
  2. 新建 \themes\butterfly\source\css\_layout\categoryBar.styl
    if hexo-config('categoryBar.enable')
    #categoryBar
    width 100%!important
    ul
    &.categoryBar-list
    margin 5px 5px 0 5px!important
    padding 0!important

    li
    &.categoryBar-list-item
    font-weight bold
    display inline-block
    height 180px!important
    margin 5px .5% 0 .5%!important
    background-image linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(16, 16, 16, 0) 100%)
    border-radius 10px
    padding 25px 0 25px 25px!important
    box-shadow rgba(50, 50, 50, 0.3) 50px 50px 50px 50px inset
    overflow hidden
    background-size 100%!important
    background-position center!important
    &:hover
    background-size 110%!important
    box-shadow inset 500px 50px 50px 50px rgba(50,50,50, 0.6)
    span
    &.categoryBar-list-count
    &::after
    transition all .5s
    transform translate(-100%, 0)
    a
    &.categoryBar-list-link
    color white!important
    font-size 20px!important
    &::before
    content '|'!important
    color white!important
    font-size 20px!important
    &:after
    content ''
    position relative
    width 0
    bottom 0
    display block
    height 3px
    border-radius 3px
    background-color white
    &:hover
    &:after
    width 90%
    left 1%
    transition all 0.5s

    span
    &.categoryBar-list-count
    display block!important
    color white!important
    font-size 20px!important
    &::before
    content '\f02d'!important
    padding-right 15px!important
    @extend .fontawesomeIcon
    &::after
    padding 5px
    display block!important
    color white!important
    font-size 20px!important
    position relative
    right -100%
    covers = hexo-config('categoryBar.cover')
    for cover,i in covers
    li.categoryBar-list-item:nth-child({i+1})
    background unquote(cover)
    descrs = hexo-config('categoryBar.descr')
    for descr,i in descrs
    li.categoryBar-list-item:nth-child({i+1})>span::after
    content descr!important
    if hexo-config('categoryBar.column') == 'odd'
    li
    &.categoryBar-list-item
    width 32.3%!important
    else if hexo-config('categoryBar.column') == 'even'
    li
    &.categoryBar-list-item
    width 24%!important
    @media screen and (max-width: 650px)
    li
    &.categoryBar-list-item
    width 48%!important
    height 150px!important
    margin 5px 1% 0 1%!important

    $caterow = hexo-config('categoryBar.row')?hexo-config('categoryBar.row'):2
    .categoryBar-list
    max-height 190px * $caterow
    overflow auto
    &::-webkit-scrollbar
    width 0!important
    @media screen and (max-width: 650px)
    .categoryBar-list
    max-height 160px * $caterow
  3. _config.butterfly.yml 添加配置项
    categoryBar:
    enable: true
    column: odd # 显示列数,odd:3列 | even:4列
    row: 2 #显示行数,默认两行,超过行数切换为滚动显示
    descr:
    - Good things to share
    - Back end talk
    - personal diary
    - Front end serialization
    - Butterfly theme
    - Other items
    cover:
    - url('https://cdn.jsdelivr.net/npm/akilar-candyassets/image/cover1.webp')
    - '#abcdef' # HEX格式色值需要用''包裹,不然会被识别成注释
    - rgba(45,67,89,0.7)
    - linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(200,16 , 16, 0) 100%)
    - url('https://cdn.jsdelivr.net/npm/akilar-candyassets/image/cover5.webp')
    - url('https://cdn.jsdelivr.net/npm/akilar-candyassets/image/cover6.webp')
  4. 效果如下:

侧边栏电子时钟

  1. 安装依赖
    npm install hexo-butterfly-clock --save 
  2. _config.yml中配置插件
    # electric_clock
    electric_clock:
    enable: true # 开关
    priority: 5 #过滤器优先权
    enable_page: all # 应用页面
    exclude:
    # - /posts/
    # - /about/
    layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
    loading: https://cdn.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/theme_f/loading.gif #加载动画自定义
  3. 效果如下:

更换字体

添加下面这段css即可。

@font-face {
font-family: 'tzy';
/* 字体名自定义即可 */
src: url('https://cdn.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/font/ZhuZiAWan.woff2');
/* 字体文件路径 */
font-display: swap;
}

body,
.gitcalendar {
font-family: tzy !important;
}

局部css优化


.categoryBar-list {
max-height: 400px;
}

.clock-row {
overflow: hidden;
text-overflow: ellipsis;
}

/*3s为加载动画的时间,1为加载动画的次数,ease-in-out为动画效果*/

#page-header,
#web_bg {
-webkit-animation: imgblur 2s 1 ease-in-out;
animation: imgblur 2s 1 ease-in-out;
}

@keyframes imgblur {
0% {
filter: blur(5px);
}
100% {
filter: blur(0px);
}
}

/*适配使用-webkit内核的浏览器 */

@-webkit-keyframes imgblur {
0% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
.table-wrap img {
margin: .6rem auto .1rem !important;
}

/* 标签外挂 网站卡片 start */

.site-card-group img {
margin: 0 auto .1rem !important;
}

.site-card-group .info a img {
margin-right: 10px !important;
}

[data-theme='dark'] .site-card-group .site-card .info .title {
color: #f0f0f0 !important;
}

[data-theme='dark'] .site-card-group .site-card .info .desc {
color: rgba(255, 255, 255, .7) !important;
}

.site-card-group .info .desc {
margin-top: 4px !important;
}
/* 代码块颜色 */

figure.highlight pre .addition {
color: #00bf03 !important;
}

灯笼特效

外挂标签

添加github徽标

常用指令

hexo clean 
hexo douban //安装豆瓣插件后再使用此指令
hexo bangumi -u //安装bilibili插件后再使用此指令
hexo new post article1 // 创建新文章
hexo generate
gulp
hexo s -p 8000
hexo deploy

遇到问题

如果在搭建博客中遇到什么问题 ,请在 评论区 留言 ,我会在第一时间内帮助您解决问题 。