美化危险,小心美化

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

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

页脚养鱼

暂时无法适配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;
    }
}

Q.E.D.