主题: 分享 介绍分享 过路(guo.lu)的新界面 ( 更新至 3.1.0 ) 查看单个帖子
LoeiFy
LoeiFy 的头像
Lorem ipsum
级别:9 | 在线时长:509小时 | 升级还需:41小时级别:9 | 在线时长:509小时 | 升级还需:41小时级别:9 | 在线时长:509小时 | 升级还需:41小时级别:9 | 在线时长:509小时 | 升级还需:41小时
注册日期: 2010-04
来自: n/a
帖子: 214
致谢: 405
更新到 3.1.0

1. 添加一个about页面,用于用户反馈及网站的一些介绍

2. 文章缩略图变大, 270px ---> 300px ,本来后台生成的缩略图是300px, 之前把图片都压缩成270px, 现在恢复成300px

3. 调整瀑布流masonry的执行,之前是要在页面图片加载好了才执行,所以会出现文章错乱然后摆正确的现象,现在后台提供图片高度,开始时候就摆好瀑布流,然后再加载图片完成。

4. 网站在加载过程顶部都有加载圈圈提醒,包括图片的加载,借助 imagesLoaded 这个插件实现

5. 优化了css图片,没有使用图表字体,因为懒了。不过css图片并不多,影响不是很大

6. 图片类型文章提供一个gallery方式查看图片,之前是点击一张图片看一张大图,没有下一张的按钮。现在可以快速看所有图片了

7. 去除comment.php 直接把多说的html代码写在内容页,再把其中个函数名改为 twobisthis , 然后多说再也没有捣乱了。

8. gallery类型文章是有几张图片渐隐渐显展示的,之前只是支持Firefox 还有 chrome 之类的高级浏览器,现在重新调整了函数,支持ie9了 ,貌似ie8 也可以

9. ajax 加载过长时间提醒( 5s ), 网站下一页还有快速预览都是ajax实现,偶尔会出现加载时间过久,然后用户又不明白什么问题。现在改进了,加载时间超过5秒会出现一个窗口提示,并且点击可以直接跳转页面

10. 剩下的就是一些细微的调整了




其实好早前就准备更新一个新模板的,只是很多时候没有那么多时间,我承认我玩游戏多了。


guo.lu 原来的主题有几个缺陷:

1.加载慢,因为图片都比较大,masonry 瀑布流是在图片加载完才启动,所以加载新文章的时候很慢,有时候等半天没反映;

2.后台生成图片太多,为了显示多种图片样式,主题会在后台生成另外4种以上规格图片,就是说上传一张图片,后台有6到7张图,这样下去服务器压力很大

3.对手持设备支持很不好,原因是图片太大,反正在手机上显示很不好

4.很卡,使用了过多的shadow(阴影),结果就是浏览器反映慢,手持设备卡得更严重

5.没有标准的文章显示形式,我承认这个是很2的行为,只做了一种文章样式,连最普通的文章显示方式也没有



新的主题:

1.加载快了好多,只是首篇文章使用一张由timthumb.php 生成的554x554大小的图片,其余的都是300x ... 的小图,下载加载瞬间快了好多

2.后台只是生成2张图片,一张原图,还有一张是300x....的小图 ,这样正常很多的了

3.很好的兼容手持设备,一开始就以百分比来定位元素,所以很好支持各种分辨率,连ie也很好支持

4.没有使用任何阴影,完全是扁平的风格,所以相对来说不卡了

5.新主题有3种文章格式 standard image gallery 每种形式有着不同的文章表现形式,方便各种文章的发布



下面是一些截图








新主题还有一些其他的:

1.快速预览,使用了ajax + html5 history api 用户可以快速预览文章,并且很方便的回到首页,但是跟普通的ajax不同,浏览器地址栏也是跟着变化的,也就是说浏览器后退前进的按钮是有效的,如果是普通的ajax,按后退键是会返回到空白页面,但是得益于history api,快速预览文章后,按后退键是返回首页 。

2.可以更换的头部背景图片,哪天看到好图就可以换上去了

3.取消了搜索框,这个没什么作用的元素

4.加入文章查看次数,喜欢功能同样保留


兼容性:

测试了ipad iphone 还有一大堆android设备 window phone 8 chrome firefox 比较新版都没问题 , ie 8及以上没什么大问题,但是当然会舍弃些功能, ie8 以下的,sorry


已知问题及下次准备更新的内容:

1.多说评论框的加载有点问题,基本上是确定是多说那边问题,下次更新就直接砍掉comment.php,直接在页面上添加评论位置,以免多说插件又在捣乱

2.全站图标都用图标字体,减少图片量,并且图片字体对Retina屏支持也完美,就不用使用background-size了

3.一些些文字位置调整


下面是之前弄的的神器

上传的图像
文件类型: jpg Guo.jpg (939.9 KB, 329 次查看)
文件类型: png breezi_placeit.png (1.51 MB, 331 次查看)
文件类型: png breezi_placeit1.png (1.23 MB, 327 次查看)
文件类型: jpg Untitled.jpg (266.5 KB, 330 次查看)
此帖于 2013-07-14 11:18:41 被 LoeiFy 编辑. 原因: 更新
回复时引用此帖
以下 4 位极客对 LoeiFy 此帖表示感谢:
AlvinKu (2013-07-17), jerry10725 (2013-05-23), sieben (2013-05-31), 贩卖优雅 (2013-05-23)