随笔写下一些东西,作为 SiteLog 和备忘。
都是一些评论、显示界面的调整,一个意图:用户体验。 说的不好听的就是"路杨的强迫症又犯了",反正是折腾无极限。。
这两个月, 整个 Blog 的 js 估计被我修改过不下10次,有些是纯粹为了闭包,有些是为了美观和清晰流程。。。
简单记下曾经的修改吧。
先说前端:
- ajax提交优化。 所有流程彻底闭包为一个函数,和 json 显示本地评论互动,增加了提交成功后如果通过审查的话,动态加载新评论及动画,并同时重置评论提交表单。
多说评论界面优化。 绑定了原来系统的显示/隐藏评论、 显示/隐藏评论框的函数,让原来界面的操作同时操作两个系统的界面。 在 SOTHINK 的提示下,虽然依然设置多说评论框为默认,但是登录本地系统(包括QQ等本地系统支持的社交帐号)的朋友则显示"本地评论系统评论框"。 代码片段为:
code
var check_mt_user = function(u) { if(typeof duoshuoQuery.is_ds_hide =='undefined') { if (!u) u = w.mtGetUser(); if (u && u.is_authenticated) { duoshuoQuery.is_ds_hide=true;} else duoshuoQuery.is_ds_hide=false; } };
本地json评论界面优化。 彻底完成本地评论js的闭包。进一步和多说评论界面糅合, 增加了
刷新
和重载
两个操作界面,前者从本地文本静态json cache中重新获取本地评论,后者读取MySQL
库实时获取本地评论。- 延迟加载图片重写。 也完成了一次
JS
闭包。 美化了延迟加载图片时候占位的动画,因为目前本站仅在评论者头像上使用延迟加载图片技术,也许大家并不能彻底体验到界面的加载过程(因为加载的太快了)。。。
上面的所有修改,均可以查看本站现有 JS 来获得代码。 本站的 JS 并无加密 :P
再说后台:
彻底解决了QQ头像、Gravatar 头像显示问题。 并缓存Gravatar 头像到本地。 不同原来的做法。这次写 插件,直接 hook 了
MT::Author::userpic_url
。 比较极端的做法。 代码如下:code
our($old); { no warnings 'redefine'; no strict 'refs'; require MT::Author; If ($old = MT::Author->can('userpic_url')) { *MT::Author::userpic_url = sub{ my ($author) = @_; if ( ($author->auth_type =~ m/^QQ/ ) && $author->hint && ($author->hint=~ m!^https?://!) ) { return $author->hint. '#QQ' ;} my ($oldurl) = $old->(@_); return $oldurl if ($oldurl); my $email = $author->email; return &_hdlr_gravatar_url_mail($email); }; } }
更换了后台插入图片后的显示,适应
HTML5
。 这个没有写插件,直接Hacklib/MT/Asset/Image.pm
中的can_html
。 更加的简单粗暴。 代码片段如下:code
$text = sprintf( '<figure class="post-image"><img title="%s" src="%s" %s %s /></figure>', MT::Util::encode_html( $asset->label ), MT::Util::encode_html( $asset->url ), undef,undef, );
要查看详细的修改文件,可以移步到我的 GitHub。
其他:
话说,多说 服务器维护了。 貌似以为会好一点,结果似乎结果一样? 另外,多说评论加载不出来时候,下面的加载动画一直显示的时候, 这个时候刷新就OK了,觉很奇怪, 查看了一下 log。 结果,100% 的在出现这个状态的时候,浏览器报错:
17:24:55.691 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://easun.duoshuo.com/api/threads/listPosts.json?thread_key=301&author_key=1&url=http%3A%2F%2Feasun.org%2Fblog%2Farchives%2Fgodaddy_cpanel_perl_dbdmysql.html&title=Godaddy%20cPanel%20%E4%B8%BB%E6%9C%BA%E5%92%8C%20Perl%E6%A8%A1%E5%9D%97%20DBD%3Amysql&require=site%2Cvisitor%2Cnonce%2Clang%2Cunread%2Clog%2CextraCss&site_ims=1442293934&lang_ims=1442293934&referer=http%3A%2F%2Feasun.org%2Fblog%2F&v=15.4.27. (Reason: CORS header 'Access-Control-Allow-Origin' missing).1
干啥子嘛~~
明显的服务器响应问题。。。
判断跨域的服务端脚本的得到没有执行。。
其实listPosts.json
返回数据了,可惜被浏览器拒绝了。 难怪不显示。。。。。。
话说,抛开 服务器 判断跨域的服务端脚本的问题。 listPosts.json
难道一定要用 JSON
模式? 又不是 POST
, GET
而已,换成 JSONP
模式不就万事大吉了,而且也能节省服务器的判断跨域,输出 Access-Control-Allow-Origin
header。。。。。。
另外,服务器维护了, 貌似脚本的版本还是 2015-04-27
。。。。
修改了评论框上面用户信息的显示。 模仿了一下 WP 的一些模板。 让没有登录但是保存 cookie 的朋友也显示欢迎界面而隐藏名字/Email input 栏目(可以通过修改信息重新打开)
真真的是折腾无极限。
是的。折腾无极限。
PS: 多说坛子兄的头像貌似还是大写的 T ? Gravatar 貌似已经改了?
好了,为了应付圆的图标,我刚才更新了一下。
这个新头像,很漂亮。 我发现你博客默认显示是一个四方的几何图案了。
今天暂时下线 多说 评论。