姓名：shadow个人博客传送门

CSS/JS的使用

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

CSS/JS的引用

打开主题配置文件（butterfly.yml）定位inject属性其中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> ; ; ;<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>' logoCDN阿里云图片链接腾讯云图片链接又拍云图片链接七牛云图片链接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插件自定义博客看板娘