Hexo博客Butterfly主题美化

	姓名：shadow
	个人博客传送门

CSS/JS的使用

在主题文件夹的source目录下，有css和js两个文件夹，分别在里面创建一个css文件和js文件，把修改的代码贴进去保存

CSS/JS的引用

1. 打开主题配置文件（butterfly.yml）
2. 定位inject属性
3. 其中head用于引入css，bottom用于引入js

示例

inject:
  head:
  - <link rel="stylesheet" href="/css/shadow.css">
  - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/plugins.min.css">
  bottom:
    - <script src="/js/shadow.js"></script>
    - <script src="https://myhkw.cn/player/js/player.js" id="myhk" key="159611061656" m="1"></script>

引入css和js有两种方式，分别是相对路径引入和外链引入。相对路径就是把文件放在主题文件夹的source目录的css文件夹和js文件夹下，外链就是使用文件的外链地址。

头像背景

效果图：


CSS代码：

/* 彩带 */
.card-info-avatar:hover {
  background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/H3342af90d24b4d62b9bbfec9688ccc25M.gif);
}

/* 花 */
/* .card-info-avatar:hover {
  background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/20200530181856.gif);
} */

公告板图片

效果图：


在butterfly.yml中搜索card_announcement，使用img标签引用图片

页脚美化

效果图：

跳动的心

JS代码：

$(document).ready(function(e){
    $('.copyright').html('©2020 <i class="fa-fw fas fa-heart card-announcement-animation cc_pointer"></i> shadow');
})

更多图标和动画效果可以查看FontAwesome5的官网和文档

网站运行时间

JS代码：

$(document).ready(function(e){
        $('.framework-info').html('本站已运行<SPAN id=span_dt_dt style="color: #fff;"></SPAN>');
    })

function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("5/2/2020 0:0:0");
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=Math.floor(e_hrsold);
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=Math.floor((e_hrsold-hrsold)*60);
    seconds=Math.floor((e_minsold-minsold)*60);
    span_dt_dt.innerHTML=' <font style=color:#2d85f0>'+daysold+'</font> 天 <font style=color:#f4433c>'+hrsold+'</font> 时 <font style=color:#ffbc32>'+minsold+'</font> 分 <font style=color:#0aa858>'+seconds+'</font> 秒';
    }
    show_date_time();

把代码中的new Date()修改成自己网站搭建的时间（月/日/年 时:分:秒）

服务支持logo

在butterfly.yml中搜索custom_text，把代码贴进去（不同版本可以有所不同，但都是footer属性中修改）

'<a href="https://console.upyun.com/" target="_blank" alt="又拍云" rel="nofollow"><img src="https://s1.ax1x.com/2020/07/27/aPoebR.png" alt="又拍云" style="height: 1.7em; max-height: 1.8em;padding-bottom: 0px;"></a>&nbsp;&nbsp;&nbsp;<a href="https://imgchr.com/" target="_blank" alt="路过图床" rel="nofollow"><img src="https://s1.ax1x.com/2020/07/27/aPWF3j.png" alt="路过图床" style="height: 1.7em; max-height: 1.8em;padding-bottom: 0px;"></a>'

logo	CDN
阿里云	图片链接
腾讯云	图片链接
又拍云	图片链接
七牛云	图片链接
imgchr	图片链接
Google	图片链接
JSDELIVR	图片链接

引入阿里iconfont图标

效果图：

这个已经有大佬出了完整教程，传送门

标签外挂

标签外挂源于Volantis主题，扩展的标签分别为 Checkbox & Radio、富文本按钮、Folding、fancybox、span。文件下载地址：https://tzk.lanzous.com/b06m0pbmh
将下载后的文件添加到主题目录下的scripts的tags文件夹中

接下来引入 css 即可：https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/plugins.min.css
标签外挂的具体语法参考Volantis标签文档

相关文章：

Butterfly主题Valine评论美化

使用Hexo的helper-live2d插件自定义博客看板娘