(English version follows Chinese Part)
由于之前几个版本的主页对移动端和小屏设备都不太友好,所以我决定给主页改改版。这回采用的是Bootstrap框架,Bootstrap除了开发对我这样的入门级人士比较简便易学,浏览器兼容性和移动设备兼容性也是优点。
The old version index pages were not friendly to mobile devices and small screen devices. So I decide to update the index page just after the 1st anniversary of my website. It is base on Bootstrap, a frame that is easy to learn for code rookie like me. And the point is, Bootstrap is suit for PC and most mobile devices.
我使用的是Pingendo工具,一个可视化的网页创建工具,官网是http://pingendo.com/
My tool is Pingendo, a visualized webpage builder. Official web site :http://pingendo.com/
简单设计一下(本来我的主页也不复杂,就是一般的导航页而已),就由Pingendo自动导出html和css了。
My index page is not gaudy. It took little time to rebuild it in Pingendo, then export the html and css files automatically.
本地打开没问题,上传到服务器以后用Chrome打开也没问题。效果如图1。
Loading the local files was a success. And it was still OK when I visit the page by Chrome after uploading to the server. Just like Fig.1.
图.1(Fig.1)
可是,当我用火狐浏览器打开以后,Boom!如图2。
However, when I use the Firefox, Boom! Check Fig.2.
图.2(Fig.2)
我就不明白了,用Chrome和IE都可以载入,偏偏火狐不行?!一开始我以为是火狐对Bootstrap兼容性问题,又怀疑是服务器问题……我就让一位朋友用他的火狐打开试试,结果没问题?!因为他是信息行业业内人士,他告诉我他用的是开发者版火狐,而且控制台显示有bug,就让我自己看看bug是什么,然而我发现普通版火狐并没有类似功能,就装了个firebug组件。一刷新……报错出现!如图3。
I did not get it, only Firefox report error when Chrome and IE can load the page?! I considered that the problems of compatibility between Firefox and Bootstrap. And maybe it was a server’s error ? I asked one of my friends who works in information enterprise to visit the page with his Firefox. Not thing wrong! Then he told me about his Firefox Developer Edition and teach me to find the bug with firebug. The bugs were listed in firebug as fig.3!
图.3(Fig.3)
竟然是‘\’和‘/’写反了!进源码一看,问题出在这:
Seriously? A simple code writing mistake between ‘/’ and ‘\’ ? ! Check the source code :
[html]
<link href="css\default.css" rel="stylesheet" type="text/css">
……
<img src="img\profile.png" class="center-block img-responsive">
[/html]
这两段代码就不是我自己写的啊!是Pingendo自动生成的啊!这个锅我不背……
These code were written by myself ! They are original code exported by Pingendo automatically!
所以出Bug的根本原因就是:css和img文件路径错误,火狐在访问这两个文件失败,导致只能显示html信息。
So the problem is that: wrong path of .css and img file, which result in the failure of page resource loading.
Debug以后就完全没问题了。
It all right after debug.
不过有个地方值得注意,就是bug还存在的时候Chrome和IE(IE11)还有火狐开发者版是可以正常打开的,说明它们都自带自动纠正一类的功能。
Notabily, Chrome and IE can load the page successfully alone with the bug, it proves the function of automatic code correction.
其实,除了这一点小小的bug,Pingendo工具还是很好用的,尤其是可视化的编辑界面对只需要简单页面编辑的站长非常友好。
Despite the little bug I met, Pingendo is an excellent tool for rookie developer , especially the visualized interface is so friendly to junior developer.
最后,祝贺一下主页4.0版本正式上线!
Cheers for the launching of index 4.0!


