简单美丽的时间线

之前看到过一个很酷的时间线页面,项目具体在这里,然后自己试了一下,确实挺不错的。

下面是自己做的一个小展示,先看图片吧:

时间线

玩的过程中,因为该死的G–F–W,让我花费了不少时间精力。在storyjs-embed.js中引用了google上的一些资源,导致一直加载不上去,如下:

jquery: "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
js: "//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"

后来改为国内的来源,然后本地jekyll server试了以下就可以了,如下:

jquery: "http//cdn.bootcss.com/jquery/2.1.1/jquery.min.js",
js: "http//cdn.bootcss.com/webfont/1.3.0/webfont.min.js"

但是上传到github后,发现加载不到jquery.min.js/webfont.min.js,如图:

错误信息

看来只好把jquery和webfont放在github上了,修改如下:

jquery: embed_path + "js/timeline/jquery.min.js",
js: embed_path + "js/timeline/webfont.js"

结果webfont还是会引用google的字体,所以就去掉webfont.js,设置时间线时不指定字体,这样就完全可以在墙内浏览了。

jquery: embed_path + "js/timeline/jquery.min.js",

参考:

如何在https页面异步请求http地址
JavaScript Source Map 详解
Bootstrap中文网开放CDN服务