先说ajax无刷新技术吧
因为 Godaddy 空间中资源和国内访问速度的原因,能节省一点资源就节省一点资源吧。虽然对于传统的 ajax 来说,更新版的 pjax 可以同时写入浏览器历史( pushState
)和动态更换 url 显示,但是对于我来说,貌似还有一下不足:
- 浏览器缓存(内存)不会释放,会让老爷机的朋友感觉到机器卡。
- 不利于SEO(当然比 ajax 已经很好了)。 pjax 再先进也只更新某个容器,对于 head 内的一些 meta 是不会处理的,强迫症的伤不起啊。
- url 虽然写进了浏览器历史(
pushState
),但是在 FireFox 下用 Backspace 返回时候。很多时间只是浏览器的url变了,但是内容还需要再次刷新。
好处也就不说了。减小重复资源的http请求。
言归正传,简单说说本站是怎么启用这个吧:
直接用了 defunkt/jquery-pjax 这位大神的成熟方案。对本站的链接(a
)做了处理。 代码如下:
code$.getScript("http://Path/to//js/jquery.pjax.js", function() { $(function() { easun_pjax(); }); });
其中 easun_pjax();
为核心函数。 简单如下:
codefunction easun_pjax()
{
$(document).pjax('a[target!=_blank]', '#content', {fragment:'#content', timeout:6000});
$(document).on('pjax:send', function() {
$('#content').fadeTo(700,0.0);
});
$(document).on('pjax:complete', function() { $('#content').fadeTo(700,1); });
}
这样基本完成, 如果一些需要在替换#content
(<div id="content">...<div>
)的内容需要 js 实现的。请在pjax:complete
中(上面有示例)中重新运行一次。
成功后实例可以参见本站的各博文之间的切换。
再说多说的一些小技巧吧
用多说一段时间了。乱七八糟的改了一起。多说的自定义其实还很强的,只是官方似乎不是很重视这些小技巧? (官方现在都长草了)
- 彻底自定义CSS。
不是官方说的在某些位置加入CSS,而是彻底把多说的CSS 放在自己的网站。 其实很简单。就是定义duoshuoQuery.theme= 'none'
即可。
再说的清楚点就是这样定义duoshuoQuery
:var duoshuoQuery = { short_name: "YOURKEY", theme:'none'};
这样,多说就不会加载任何 CSS ,变成了一张白纸,自己享受重头定义本地 CSS 的乐趣吧。
让评论加载不在颤抖。
大家也许都注意到,有时间加载多说的评论会先从没有任何 CSS 样式再切换到有CSS样式。
原来以为是 CSS 没有及时加载进来。 后来一看官方的 CSS 才知道。 CSS 根本没有定义.ds-thread
(class="ds-thread"
)而只定义了#ds-thread
(id="ds-thread"
)。
而多说的机制是找到.ds-thread
并以其做为容器加载评论文章,最后再给这个容器加上id(#ds-thread
)。
奇怪的逻辑~~ 为什么不直接以 ID 操作呢? 多说自己的不自信?
知道原因了,让评论加载不颤抖也就很简单,把加载评论的<div class="ds-thread" ...>
提前改成<div class="ds-thread" id="ds-thread" ...>
就可以了。 或者,你也可以按照彻底定义CSS的办法重新对.ds-thread
做 CSS定义。pjax 动态加载 评论。
其实也就是上面的问题的延伸。 在pjax:complete
中加载即可。 代码为if ($('.ds-thread').length > 0) { if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread'); else $.getScript("//static.duoshuo.com/embed.js"); }
完整代码如下:
code$(document).on('pjax:complete', function() { $('#content').fadeTo(700,1);
if ( $('.ds-thread').length > 0 ) {
if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread');
else $.getScript("//static.duoshuo.com/embed.js");
}
});
}
真的很酷
站务日志总结。 :)
对于使用 Google Analytics 的用户, pjax 会导致 Google 分析缺失。
解决办法同上(对 `pjax:complete` 处理)
代码如下:
`if( window._gaq ) {
_gaq.push(['_trackPageview', window.location.href]);
} `
我的多说不能同步到本地了,找了好几天也没找到问题出在哪,蛋疼啊
这个,技术文,我不懂,只看看。
同步在本地貌似只有 WP 有这个功能? 可以咨询下多说的客服QQ
欢迎来访
学习下了
欢迎来访 :D
好像很吊的样子!