其实之前很想做一个整页滚动的随笔页面了,但是最近发现了一个3D滚动的页面,感觉更加好看,所以就用它了。
上面动图里的页面并不是原创,源码是soulwire发布的FoldScroll demo在这里:FoldScroll。
虽然好久好久没更新了,但...动图不是很清晰,我魔改后的版本在这里:Log 。
先到{% label default@GitHub%}下载源码,保存其中的index.html、js文件夹、css文件夹,我的博客是基于hexo的所以将上述文件文件保存在博客根目录\source\“你自己新建”。(在调试的时候放在任何文件夹都可以)
博客根目录\source\“你自己新建”
我直接把我的源码贴上来把,这样解释起来比较简单:
{% label info@第4行:%}页面名称,就是标签傻上显示的。
{% label info@第9行:%}标签页图标,你可以设置成你自己想要的。
{% label info@第12行:%}你的Google Analytics脚本,用来记录访问量的。
{% label info@第44行:%}自动播放音乐的脚本,你可以直接copy我的然后中间的链接换成你想要的音乐。
我只修改了以上这些,因为这个页面的效果我已经很满意了,以后要是有新的想法再改。
文件在css/style.css,由于开发者并没有要求任何的许可,而且左上角的info并不是很好看,所以我将其全部删掉了。
{% label default@quotes article%}是正文的大小,{% label default@quotes article em%}是灰色小字的大小,{% label default@quotes article em:before%}下面定义的是灰色小字之前的符号,你想用什么都行。下面是我正在使用的:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { font-family: Nsimsun, Consolas, monospace; background: #f2f2f2; padding: 0; margin: 0; } .quotes { position: absolute; bottom: 0px; width: 100%; left: 0; top: 0px; } .quotes article { border-bottom: 2px dashed #ddd; text-align: justify; line-height: 1.5; background: #fff; max-width: 900px; font-size: 24px; font-weight:bold; padding: 60px 30px; margin: 0 auto; width: 100%; color: #333; } .quotes article em { font-style: Microsoft YaHei; font-size: 16px; color: #666; } .quotes article em:before { content: '-'; margin: 0 10px; }
文件夹内的foldscroll.min.js和foldscroll.js是动画效果,都不需要动(我也修改不来,当然要是有大神会的话可以自己操刀)。quotes.js包含了也页面内的所有文字,你可以将自己喜欢的文字添加进去,但一定要按照里面本来的格式修改,要不然会出问题的。
以上步骤完成后你可以在本地点开index.html就可以查看你修改后的效果了。接下来是部署到hexo。
我使用的是next主题所以配置文件在博客根目录\themes\next\_config.yml,需要配置menu选项,一行内从左至右分别是{% label success@名称%}、{% label success@链接%}、{% label success@分隔符%}、{% label success@icon%}。我增加了一个“日志”项。
博客根目录\themes\next\_config.yml
menu: home: / || home tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive 日志: /log || calendar #新增加的 #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat #about: /about/ || user
因为hexo是在部署的时候将md文件渲染成html文件的,但我这个页面已经设置好了,再渲染一遍的会乱码的,所以需要将这整个文件夹排除掉。
配置文件在博客根目录\_config.yml,找到skip_render: 在后面添加要排除的文件夹,切记冒号后有一个空格(别问我怎么知道的🙃。例:
博客根目录\_config.yml
skip_render: 'log/**'
设置完了就可push 到服务器啦,但是还是有一些小问题,比如音乐有的时候不会自动播放,我也不太清楚是因为什么原因。
页面的背景音乐是Only One-Kanye West里的一段音频采样,如果想要下载可以点击下面的黑色的框框,日志网页里的链接我使用了腾讯云的COS以加速访问,但是设置了反盗链,所以无法下载。
参考资料
配置 PHPMailer 让其使用SMTP方式发送邮件。
自己动手写点代码,解决一个非常规的问题。
简单使用VNC的基础教程
jQuery ajax 的一点使用方法介绍
本文阐述了 BBR 的作用以及一键开启 BBR 的操作方法
目录
热门标签
页面
更多语言
站点信息