魔改butterfly主题:hexo

美化危险，小心美化

本页面提供的美化均来自互联网，如有任何版权纠纷，联系博主修改删除

如有修改不懂的地方可以联系博主

页脚养鱼

暂时无法适配pjax，所以关闭pjax效果更佳

所用的js和css均用jsdelivr加速

在butterfly.yml中，在bottom下加入

- <script src="https://cdn.jsdelivr.net/gh/xiaoheiyo/repot@latest/hexo/js/fishes.js"></script>

在head下，加入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/xiaoheiyo/repot@latest/hexo/css/fish.css"> #因为加入养鱼js会导致宽度问题，所以加入css进行修改

代码如下

/* 鱼塘固定宽度 */
canvas:not(#ribbon-canvas), #web_bg {
margin-bottom: -0.5rem;
display: block;
width: 100%;
height: 160px
}

可以修改一下页脚阴影度，根据自己感觉适当修改 这里用的是0.1

background-color: alpha($dark-black, .1)

所用仓库：repot

效果图：

底栏加上运行时间

在主题\layout\includes下 在footer.pug中加上如下代码

#running-time
script.
  setInterval(()=>{let create_time=Math.round(new Date(Date.UTC(2020,09,07,21,0,0)).getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);

注意对齐格式，#与if对齐

更换鼠标样式

在主题\source\css\index.style 下

加上如下代码

/**普通指针样式**/
body 
  cursor url('https://cdn.jsdelivr.net/gh/xiaoheiyo/repot@latest/cur/01_normal_select.cur'),default
/**链接指针样式**/
a 
  &:hover 
    cursor url('https://cdn.jsdelivr.net/gh/xiaoheiyo/repot@latest/cur/15_link_select.cur'),pointer

可以自己换自己的链接，这里提供的图标很大

手机状态下隐藏侧边栏多余显示

在\source\css\ _third-party下

normalize.min.css加入如下脚本

/*移动端优化：去除归档、标签、最新文章、公告、、只保留网站统计*/
@media screen and (max-width: 800px) {
    #aside_content
    div:not(:last-child) {
        display: none;
        font-size: 13px;
    }
}