美化危险,小心美化

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

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

页脚养鱼

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

所用的js和css均用jsdelivr加速

在butterfly.yml中,在bottom下加入

1
2
3
4
5
6
7
- <script src="https://cdn.jsdelivr.net/gh/xiaoheiyo/repot@latest/hexo/js/fishes.js"></script>
- ```

在head下,加入

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

代码如下

1
2
3
4
5
6
7
/* 鱼塘固定宽度 */
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中加上如下代码

1
2
3
#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 下

加上如下代码

1
2
3
4
5
6
7
/**普通指针样式**/
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加入如下脚本

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