注意:请将文章中涉及到 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。

更新记录

2022-05-22 valine获取评论失败

  1. 请将文章中涉及到 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。之后抽空会更新从零搭建Hexo的教程,敬请期待。
  2. 更新valine表情包数据(不想更新的话,请将valine.json中的 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。

2021-11-27 valine获取评论失败

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

此处略去GitNode安装教程,如需教程 ,请参考 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/。

安装主题

本人用的是 npm 方式安装的 hexo-theme-butterfly.

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

在你的博客根目录里

npm i hexo-theme-butterfly

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

在你的博客根目录里

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

应用主题

修改站点配置文件_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主题美化

效果预览
查看步骤

编辑博客根目录 /node_modules/hexo-theme-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://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

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

添加豆瓣插件

如果出现了豆瓣爬取数据失败问题,建议安装较低的 node版本(v12.18.0)

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://fastly.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg
books_img: https://fastly.jsdelivr.net/npm/blog-gallery@1.0.0/1/20200206161657.webp
# games_img:

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

hexo douban

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

请注意,我的butterfly主题版本不是最新的,导航菜单栏格式请按照最新的格式写。

如下图:

添加访客地图

效果预览
查看步骤

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

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

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

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

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

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

node_modules/hexo-theme-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="此处填入你自己的代码")

编辑 node_modules/hexo-theme-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

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

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

添加Pixiv日榜

效果预览
查看步骤
  1. node_modules/hexo-theme-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. 编辑node_modules/hexo-theme-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. 编辑 node_modules/hexo-theme-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

主页冒泡特效

效果预览
查看步骤

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://bu.dusays.com/2021/03/27/0106da541a922.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://bu.dusays.com/2022/05/17/6283c365d20dd.png), auto;
}

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

a,
button,
img {
cursor: url(https://bu.dusays.com/2022/05/17/6283c376afcfc.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";
}
}

图库

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

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

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://bu.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文件夹里去

Valine评论邮件回复提醒

参考教程

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

我的表情数据包

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

下载请点击下面按钮:

改写 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. 打开node_modules/hexo-theme-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://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/valine_f/valine.min.js

valine获取评论失败

如下图:

这里并没有加载和渲染 valine 评论数据 , 但在 LeanCloud 数据存储中 是存在评论数据的。

原因 :LeanCloud 国际版通用域名失效

打开控制台 发现 https://us.avoscloud.com/1.1/classes/Comment?xxxxx 已经请求失败(net::ERR_NAME_NOT_RESOLVED), 域名也无法ping通。

解决办法:

将 Valine 指定 自定义服务器URL。在主题配置里的 Valine 的 serverURLs 填入 https://xxxxxxxx.api.lncldglobal.com 。自定义服务器的URL需要到 LeanCloud后台 查看。打开后台之后进入 Settings - App Keys ,Request domain 里面的 xxxxxxxx.api.lncldglobal.com 就是你需要指定的服务器URL。xxxxxxxx 就是 AppID的前8位字符。

如下图:

经 postman 测试 ,https://xxxxxxxx.api.lncldglobal.com/1.1/classes/Comment?x=x&xx=xx 该接口会正常返回评论数据。

首页分类磁铁

效果预览
查看步骤
  1. 修改 node_modules/hexo-theme-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. 新建 node_modules/hexo-theme-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://fastly.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://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover5.webp')
    - url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover6.webp')

侧边栏电子时钟

效果预览
查看步骤
  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://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/theme_f/loading.gif #加载动画自定义

更换字体

查看步骤

添加下面这段css即可。

@font-face {
font-family: 'tzy';
/* 字体名自定义即可 */
src: url('https://fastly.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;
}

禁止右键及F12等事件

效果预览
查看步骤
  1. 在 主题配置 的 inject 的 head 里 引入 这个 css。

    <link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/css/function.min.css">
  2. 复制 下面这段 js , 执行 forbidden_control() 执行即可看到效果。

    function forbidden_control() {
    $.extend({
    message: function(a) {
    var b = {
    title: "",
    message: "操作成功",
    time: "3000",
    type: "success",
    showClose: !0,
    autoClose: !0,
    onClose: function() {}
    };
    "string" == typeof a && (b.message = a), "object" == typeof a && (b = $.extend({}, b, a));
    var c, d, e, f = b.showClose ? '<div class="c-message--close">×</div>' : "",
    g = "" !== b.title ? '<h2 class="c-message__title">' + b.title + "</h2>" : "",
    h = '<div class="c-message animated animated-lento slideInRight"><i class=" c-message--icon c-message--' + b.type + '"></i><div class="el-notification__group">' + g + '<div class="el-notification__content">' + b.message + "</div>" + f + "</div></div>",
    i = $("body"),
    j = $(h);
    d = function() {
    j.addClass("slideOutRight"), j.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
    e()
    })
    }, e = function() {
    j.remove(), b.onClose(b), clearTimeout(c)
    }, $(".c-message").remove(), i.append(j), j.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
    j.removeClass("messageFadeInDown")
    }), i.on("click", ".c-message--close", function(a) {
    d()
    }), b.autoClose && (c = setTimeout(function() {
    d()
    }, b.time))
    }
    }),
    document.onkeydown = function(e) {
    if (123 == e.keyCode || e.ctrlKey && e.shiftKey && (74 === e.keyCode || 73 === e.keyCode || 67 === e.keyCode) || (e.ctrlKey && 85 === e.keyCode)) return $.message({
    message: "采用本站js及css请注明来源,禁止商业使用!",
    title: "你真坏,不能打开控制台喔!",
    type: "error",
    autoHide: !1,
    time: "3000"
    }), event.keyCode = 0, event.returnValue = !1, !1
    }, document.oncontextmenu = function() {
    return $.message({
    message: "采用本站js及css请注明来源,禁止商业使用!",
    title: "不能右键/长按喔!",
    type: "error",
    autoHide: !1,
    time: "3000"
    }), !1
    },
    function() {
    function e() {
    var e = new Date;
    if (new Date - e > 10) {
    try {
    document.getElementsByTagName("html")[0].innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了,<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>'
    } catch (e) {}
    return document.body.innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了,<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>', !0
    }
    return !1
    }

    function t() {
    for (; e();) e()
    }
    e() ? t() : window.onblur = function() {
    setTimeout(function() {
    t()
    }, 500)
    }
    }(),
    function() {
    var e = /x/;
    e.toString = function() {
    try {
    document.getElementsByTagName("html")[0].innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了,<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>'
    } catch (e) {}
    return document.body.innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了,<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>', "禁止打开控制台!"
    }
    }(),
    function() {
    var e = document.createElement("div");
    Object.defineProperty(e, "id", {
    get: function() {
    try {
    document.getElementsByTagName("html")[0].innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了,<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>'
    } catch (e) {}
    document.body.innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了,<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>'
    }
    }), console.log(e)
    }()
    }

部分动效说明

查看步骤

请移步此博文 : 特效标签 wow.js

部分页面插入视频

效果预览

实际视频效果请移步: 留言板友链

查看步骤
  1. 下载文件。
    node_modules/hexo-theme-butterfly/source/css/_layout/head.styl替换成新下载的head.styl , 将 node_modules/hexo-theme-butterfly/layout/includes/header/index.pug 替换成新下载的index.pug
  2. 在自定义 css 中加入以下样式。也可以直接将这段换成style格式写进 head.styl
    #index-video {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 80vh;
    width: 100%;
    object-fit: cover;
    }
    @media only screen and (max-width: 768px) {
    #index-video {
    display: none;
    }
    }

    @media only screen and (min-width: 768px) {
    .bg-cover {
    background-image: none !important;
    }
    }
  3. 在想插入视频的页面,一定要有某个属性 ,可自行配置 ,如果用 type , 则 node_modules/hexo-theme-butterfly/layout/includes/header/index.pug 中 则根据对应的 type 类型去写逻辑即可。
    比如我的 /comment/index.md 配置如下:
    ---
    title: 留言板
    type: 'comment'
    ---
    所以在node_modules/hexo-theme-butterfly/layout/includes/header/index.pug中的第 23 行加入 page.type == 'comment'
    - var isHomeClass = is_home() ? 'full_page' : (page.type == 'comment' || page.type == 'link' ) ? 'not-home-page has-video bg-cover' : 'not-home-page'
    第 51 - 56 行 加入
    if page.type == 'comment' 
    video#index-video(autoplay='' loop='' muted='')
    source(src='你的视频地址')
    if page.type == 'link'
    video#index-video(autoplay='' loop='' muted='')
    source(src='你的视频地址')
  4. 如果已经用了 主页冒泡特效 , 请将下面这段代码替换之前的chocolate.js。 没有使用即可忽略这步。
    /*
    * @Author: tzy1997
    * @Date: 2020-12-15 20:55:25
    * @LastEditors: tzy1997
    * @LastEditTime: 2021-11-25 18:15:47
    */
    // TODO 获取窗口高度 11-19
    var b_h = $(window).height()
    var b_w = $(window).width()

    $(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() {
    // TODO 获取窗口高度 ethan_tzy
    var a_c = l.clientHeight
    if ($('#index-video').length > 0 && b_w > 768) {
    a = b_h * 0.8
    } else {
    a = a_c
    }
    // o = l.clientWidth, a = l.clientHeight, l.height = a + "px", n.width = o, n.height = a
    o = l.clientWidth, 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() {
    // TODO 气泡的高度 11-19
    var a_c = l.clientHeight
    if ($('#index-video').length > 0 && b_w > 768) {
    a = b_h * 0.8
    } else {
    a = a_c
    }
    o = l.offsetWidth,
    // 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();
    })
  5. 重新编译运行,即可看到效果。

灯笼特效

外挂标签

添加github徽标

常用指令

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

遇到问题

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