最近遇到一些GitHub的文档站点访问有问题,根本问题不是网站不能访问,而是访问网站的时候页面显示不出来,查看网络连接后发现,主要原因是这些网站一般都是用了Google的CDN来访问公共的js或css数据,Google CDN在国内访问不了。
以AngularJS的angular-ui-bootstrap网站为例:http://angular-ui.github.io/bootstrap/,此网站打开就有问题,内容会显示为空白。
一般这种网站都是使用了静态的页面,并且在GitHub上有源文件,因此我们可以把源文件下载下来,自己启动。
注意:很多开源项目都是一样的逻辑,直接打开示例demo的网站显示是有问题的,基本都是使用了Google CDN的js和css引起。
GitHub页面源文件
很多开源项目会把文档放到工程的gh-pages
分支版本下面,如:
angular-ui-bootstrap的文档源码:https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files
可以使用GitHub的clone或者下载,下载比较简单,建议用下载:
修改GitHub页面
下载文件到本地,解压文件夹。
可以看到目录结构,我们主要是修改html文件就可以了。
修改index.html文件
主要修改javascript
文件路径,用国内的cdn
地址来代替,我目前使用的是https://www.bootcdn.cn/
,对应的CDN地址是:https://cdn.bootcss.com
:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.1/angular-animate.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.1/angular-touch.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.1/angular-sanitize.js"></script>
然后可以直接打开index.html浏览即可。
注意:源文件中的<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
脚本路径是没有协议名称的,因此我们用什么协议打开页面,它们也就使用什么协议,我们用本地用文件打开的时候会有问题,因此要把它改成https:
开头
国内可用CDN地址
国内可用的比较常用的CDN地址参考:
https://www.bootcdn.cn/(推荐)
https://cdnjs.com/
https://cdn.baomitu.com/
https://www.staticfile.org/