hexo-butterfly美化 (持续更新)
樱花飘落背景
cd theme/Butterfly/source/js
wget https://yremp.live/wp-content/uploads/resource/js/sakura.js把下载好的Js文件放在theme/Butterfly/source/js文件夹下
/Butterfly/layout/includes文件夹下找到head.pug文件，在最后引入
if theme.sakura.enable
script(src="/js/sakura.js")在主题的主配置文件加入Butterfly/_config.yml
# 页面樱花飘落动效
sakura:
enable: true浏览器标题恶搞
在theme/Butterfly/source/js文件夹下添加crash_cheat.js文件
填入以下内容记得要修改你喜欢的标题
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/joke.ico");
document.title = '看不见我🙈~看不见我🙈~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = ' ( ๑•̀ㅂ•́) ✧被发现了～';
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});在Butterfly/layout/includes/layout.pug中添加以下代码来引入
script(type='text/javascript', src='/js/crash_cheat.js')注意
因更新最新主题版本出现以下报错
JQuery - $ is not defined解决方式
引入以下js
https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js
示例
在inject: -> bottom:
- <script src="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script>解决我了遇到的问题！
添加标签云
使用命令进行安装插件
cnpm install hexo-tag-cloud --save打开Butterfly/layout/includes/widget/card_tags.pug文件，用下面内容将其替换掉，最好把之前的文件备份一下,防止后悔
if site.tags.length
.card-widget.card-tags
.card-content
.item-headline
i.fa.fa-tags(aria-hidden="true")
span= _p('aside.card_tags')
script(type="text/javascript" charset="utf-8" src="/js/tagcloud.js")
script(type="text/javascript" charset="utf-8" src="/js/tagcanvas.js")
#myCanvasContainer.widget.tagcloud(align='center')
canvas#resCanvas(width='200', height='200', style='width=100%')
!= tagcloud()
!= tagcloud({min_font: 16, max_font: 24, amount: 50, color: true, start_color: '#999', end_color: '#99a9bf'})添加个性化板娘
由stevenjoezhang 魔改项目 最简单引用方式在
Butterfly/_config.yml中inject添加
inject:
head:
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
bottom:
- <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>添加访客地图
前往 clustrmaps 网站注册一个帐号
找到 Free Tools 下面的 Website Widget, 点击 Get Map Widget
输入你的博客网址，点击 Next
根据你自己的喜好选择样式 Map widget 或 Globe 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:theme.fragment_cache})
注意格式
编辑 butterfly/_config.yml 文件，在 card_webinfo 下面添加一行 card_map: true
编辑 themes/Butterfly/languages/zh-CN.yml 文件 (请根据你的网站语言选择)，找到 aside 下对应格式添加 card_map: 访客地图 (后面的文本可自定义)
如果不想显示，直接把 butterfly/_config.yml 文件的 card_map: true 改为 card_map: false 即可
页脚跳动的♥
编辑博客根目录themes/Butterfly/layout/includes/footer.pug文件，将
.copyright!= `©${theme.footer.owner.since} - ${nowYear} By ${config.author}`改为
.copyright!= `©${theme.footer.owner.since} - ${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`将
.copyright!= `©${nowYear} By ${config.author}`改为
.copyright!= `©${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`编辑butterfly.yml文件
在inject->head下面添加如下内容：
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">Butterfly加载动画修改
添加配置文件
在目录themes/butterfly/layout/includes/loading下添加loaded.ejs文件，代码如下
<% if (theme.preloader.enable) { %>
<div id='loader'>
<% if(theme.preloader.layout == 'gear' ) {%>
<div class="outer_box">
<div class='loader_overlay'></div>
<div class='loader_cogs'>
<div class='loader_cogs__top'>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_hole'></div>
</div>
<div class='loader_cogs__left'>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_hole'></div>
</div>
<div class='loader_cogs__bottom'>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_hole'></div>
</div>
<p style="text-align:center"> loading...</p>
</div>
</div>
<% } else if(theme.preloader.layout == 'spinner-box') { %>
<div class="loading-left-bg"></div>
<div class="loading-right-bg"></div>
<div class="spinner-box">
<div class="configure-border-1">
<div class="configure-core"></div>
</div>
<div class="configure-border-2">
<div class="configure-core"></div>
</div>
<div class="loading-word">加载中...</div>
</div>
<% } %>
</div>
<script>
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loader').classList.add("loading");
}
window.addEventListener('load',endLoading);
</script>
<% } %>引入样式文件
spinner-boxbutterfly
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >gear风格样式文件
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >将上面两行代码加到主题目录_config _yml下的inject中
引入到页面
找到 themes/butterfly/layout/includes/下的文件layout.pug,将代码
if theme.preloader
!=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})替换为
if theme.preloader
!=partial('includes/loading/loaded.ejs', {}, {cache:theme.fragment_cache})开启加载
主题目录_config _yml中的
preloader: true替换为
preloader:
enable: true
layout: gear # gear, spinner-box 两种样式腾讯云开发者
