Hexo+Butterfly主题美化
更新记录
- 请将文章中涉及到 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。之后抽空会更新从零搭建Hexo的教程，敬请期待。
- 更新valine表情包数据(不想更新的话，请将valine.json中的 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。
教程篇幅过长，对读者阅读不是很友好，所以在形式上进行了整改，希望效果能比之前好。
有什么建议，也可以提出来，谢谢！
- 更新v3.7.1适配方案。
- 注意一点的是，butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将
{cache:theme.fragment_cache}改为{ cache:true }。
前言
本博客基于Hexo框架搭建，用到 hexo-theme-butterfly 主题（本人博客Butterfly已更新至v3.7.1），hexo-theme-butterfly是基于Molunerfinn的hexo-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文件夹 |
新建完成后，文件夹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 之后，应该不会出现这种情况）
搭建过程(踩在巨人的肩膀上)
这些博主的教程可以用心看一遍，我参考了他们很多东西，希望也能帮助到你。
| 作者 | 地址 |
|---|---|
| Jerry | Butterfly基础教程 |
| 洪卫 | Hexo+Github博客搭建完全教程 |
| sitio | 基于 Hexo GitHub 从零开始搭建个人博客 |
| 过客~励心 | Hexo+github搭建博客(超级详细版，精细入微) |
| 杨超逸 | Hexo+Github 博客butterfly 和 matery 主题 搭建完全教程【整理】 |
| 小康 | Hexo 博客之 butterfly 主题优雅魔改系列 |
| Akilar | Hexo博客访问优化日记 |
| Akilar | 基于Butterfly主题的美化日记 |
| Akilar | 平滑升级魔改后的Hexo主题 |
Hexo+Github 博客butterfly 和 matery 主题 搭建完全教程【整理】
Butterfly主题美化
页面底部 footer 跳动的心
效果预览
查看步骤
编辑博客根目录 /node_modules/hexo-theme-butterfly/layout/includes/footer.pug 文件，
将以下内容
©${theme.footer.owner.since} - ${nowYear} By ${config.author} |
改为
©${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author} |
将以下内容
©${nowYear} By ${config.author} |
改为
©${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: 你的豆瓣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，可配置這個 |
找到博客跟路径，在此路径下打开CMD命令窗口，输入如下命令 hexo douban
hexo douban |
等待命令执行完毕，出现下图所示内容即为成功。
请注意，我的butterfly主题版本不是最新的，导航菜单栏格式请按照最新的格式写。
如下图：
添加访客地图
效果预览
查看步骤
前往 clustrmaps 网站注册一个帐号。
找到 Free Tools下面的 Website Widget, 点击 Get Map Widget
输入你的博客网址，点击Next
根据你自己的喜好选择样式Map widget 或 Globe 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 |
编辑 node_modules/hexo-theme-butterfly/layout/includes/widget/index.pug 文件，在你想要显示的位置插入以下代码：
if theme.aside.card_map |
具体放置位置，可以参考下图（⚠️切记：如果主题版本大于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日榜
效果预览
查看步骤
在
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 使用的是 超能小紫 提供的服务，也可以自行搭建，搭建方式请看这里。
编辑
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 }）：编辑
_config.butterfly.yml文件，在card_webinfo下面添加一行card_pixiv: true，可以通过搜索关键词aside，找到对应位置添加即可。不想显示，直接把文件中的card_pixiv: true改为card_pixiv: false即可。编辑
node_modules/hexo-theme-butterfly/languages/zh-CN.yml文件 (请根据你的网站语言选择)，找到 card_announcement: 公告 , 在下面添加一行 card_pixiv: Pixiv日榜Top50(后面的文本可自定义)
添加哔哩哔哩番剧页面插件
效果预览
查看步骤
安装依赖
npm install hexo-bilibili-bangumi --save
更新依赖库
npm install hexo-bilibili-bangumi --update --save
注入哔哩哔哩番剧
在根目录下的配置文件_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 图片
执行docs命令
找到博客根路径，在此路径下打开CMD命令窗口，输入如下命令hexo new page bangumishexo 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获取 uid
登录哔哩哔哩后前往 https://space.bilibili.com/xxx，网址最后的一串数字就是 uid。添加卡通人物（看板娘）
找到博客跟路径，在此路径下打开CMD命令窗口，输入如下命令npm install --save hexo-helper-live2dnpm 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 #是否在手机端显示重新编译运行，即可看到效果。
添加全局吸底APlayer
此步骤适用于安装了hexo-tag-aplayer插件的人
效果预览
查看步骤
安装依赖命令（在博客根目录打开CMD窗口使用下面的指令安装就行）
npm i hexo-tag-aplayer --save
关闭 asset_inject
由于需要全局都插入aplayer和meting资源，为了防止插入重复的资源，需要把asset_inject设为false
在Hexo的配置文件中(_config.yml)aplayer:
meting: true
asset_inject: false开启主题的aplayerInject
在主题的配置文件中（_config.butterfly.yml），enable设为true和per_page设为true# Inject the css and script (aplayer/meting)
aplayerInject:
enable: true
per_page: true插入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>
参数解释如下表
option default description data-id require song id / playlist id / album id / search keyword data-server require music platform: netease, tencent, kugou, xiami, baidu data-type require song, playlist, album, search, artist data-fixed false enable fixed mode data-mini false enable mini mode data-autoplay false audio autoplay data-theme #2980b9 main color data-loop all player loop play, values: ‘all’, ‘one’, ‘none’ data-order list player play order, values: ‘list’, ‘random’ data-preload auto values: ‘none’, ‘metadata’, ‘auto’ data-volume 0.7 default volume, notice that player will remember user setting, default volume will not work after user set volume themselves data-mutex true prevent to play multiple player at the same time, pause other players when this player start play data-lrctype 0 lyric type data-listfolded false indicate whether list should folded at first data-listmaxheight 340px list max height data-storagename metingjs localStorage key that store player setting 把`aplayer代码`插入到主题配置文件（_config.butterfly.yml）的`inject.bottom`中require代表着这些参数是必须要使用的，其它的参数则可以根据自己需要配置。
配置全局吸底，data-fixed和data-mini也必须配置，配置为true
如果使用Pjax，则在class里需添加no-destroy，这样防止切换页面时Aplayer被销毁运行Hexo就可以看到网页左下角出现了Aplayer最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的`pjax`设为`true`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>UI 调整
- 向上调整
#toggle-sidebar {
bottom: 80px
}在主题配置文件（_config.butterfly.yml）中，添加到injectinject:
head:
- '<style type="text/css">#toggle-sidebar {bottom: 80px}</style>' - 向右调整
#toggle-sidebar {
left: 100px
}在主题配置文件（_config.butterfly.yml）中，添加到injectinject:
head:
- '<style type="text/css">#toggle-sidebar {left:100px}</style>'
- 向上调整
添加贡献日历
效果预览
查看步骤
我的版本可能比较旧，贡献日历已经更新迭代了，所以直接参此教程：Gitcalendar
主页冒泡特效
效果预览
查看步骤
在 node_modules/hexo-theme-butterfly/source/js 目录下创建一个 chocolate.js 文件（名称可自定义，我是用node装的依赖，所以直接在主题依赖中改了）
具体位置，请看下图所示：
直接复制导入如下代码：
/* |
最后，在主题 _config.butterfly.yml 文件中，引入 js 文件。
鼠标样式
效果预览
查看步骤
将以下代码复制到你所创建的 css 文件即可。
body { |
鼠标 * 字跟随样式
效果预览
查看步骤
在 node_modules/hexo-theme-butterfly/source/js 目录下创建一个 cursor.js 文件（名称可自定义）
/*! |
然后，在主题 _config.butterfly.yml 文件中，引入 js 文件。
滚动条
查看步骤
将以下代码复制到你所创建的 css 文件即可。
::-webkit-scrollbar { |
手机侧边栏默认不展开
效果预览
查看步骤
只需要将下边的代码复制到新建的 js 文件中。
/* 手机侧边栏默认不展开 */ |
图库
图库页面只是普通的页面，你只需要hexo n page xxxxx 创建你的页面就行。
然后使用标签外挂 galleryGroup，具体用法请查看对应的内容。
<div class="gallery-group-main"> |
子页面
子页面也是普通的页面，你只需要hexo n page xxxxx 创建你的页面就行。
然后使用标签外挂 gallery，具体用法请查看对应的内容。
{% gallery %} |
如果你想要使用 /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 评论 */ |
效果如下：
添加[博主,小伙伴,访客]标签
打开
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)}))
}如图所示：
打开
_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 该接口会正常返回评论数据。
首页分类磁铁
效果预览
查看步骤
- 修改
node_modules/hexo-theme-butterfly/layout/index.pugextends 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 - 新建
node_modules/hexo-theme-butterfly/source/css/_layout/categoryBar.stylif 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 - 在
_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')
侧边栏电子时钟
效果预览
查看步骤
- 安装依赖
npm install hexo-butterfly-clock --save
- 在
_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 { |
局部css优化
查看代码
|
禁止右键及F12等事件
效果预览
查看步骤
在 主题配置 的 inject 的 head 里 引入 这个 css。
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/css/function.min.css">
复制 下面这段 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
部分页面插入视频
查看步骤
- 下载文件。
将node_modules/hexo-theme-butterfly/source/css/_layout/head.styl替换成新下载的head.styl, 将node_modules/hexo-theme-butterfly/layout/includes/header/index.pug替换成新下载的index.pug。 - 在自定义 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 ;
}
} - 在想插入视频的页面，一定要有某个属性 ，可自行配置 ，如果用 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'第 51 - 56 行 加入- var isHomeClass = is_home() ? 'full_page' : (page.type == 'comment' || page.type == 'link' ) ? 'not-home-page has-video bg-cover' : 'not-home-page'
if page.type == 'comment'
video#index-video(autoplay='' loop='' muted='')
source(src='你的视频地址')
if page.type == 'link'
video#index-video(autoplay='' loop='' muted='')
source(src='你的视频地址') - 如果已经用了 主页冒泡特效 ， 请将下面这段代码替换之前的
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();
}) - 重新编译运行，即可看到效果。
灯笼特效
外挂标签
添加github徽标
常用指令
hexo clean |
遇到问题
如果在搭建博客中遇到什么问题 ，请在 评论区 留言 ，我会在第一时间内帮助您解决问题 。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 唐志远の博客！
![wechat]()
wechat![alipay]()
alipay
相关推荐
评论
公告
如果阅读过程中遇到了问题，请及时评论或者留言，看到了会在第一时间给出回复。若未收到回复，可以加博主vx，方便日后咨询，加以技术讨论。
