快速操作
背景动画基于canvas
,添加到博客上也比较简单,在\themes\next\layout\_layout.swig
的</body>
上面添加
1 | {% if theme.canvas_nest %} |
在\themes\next\_config.yml
中添加以下字段开启此功能:
1 | # background settings |
优化
以上两步做完之后页面能看到效果,但是会有一些兼容问题,特别是在手机上,下面操作后会排除兼容问题。
添加完了,发现博客背景是白色,会遮住动画,只留下两边一点点的位置看到动画效果,这时候可以去设置一下背景颜色,在\themes\next\source\css\_schemes\Pisces\_layout.styl
中,把.content-wrap中的background
修改为none。
这时候如果用手机打开,也能看到动画效果,但是带来的体验不好,显得页面比较乱,这是可以把.content-wrap的+mobile()
中的background
修改为white,这样手机端的体验就好很多,却又不影响电脑端的炫酷动画。
附上我的.content-wrap
配置:
1 | .content-wrap { |
修改一些样式
never_yu‘Blog中的文章添加许多样式,看了一下github上的源码,在 themes\next\source\css\_custom\custom.styl
中,添加如下css:
1 | //修改文章内链接文本样式 |