标签/Tag为[pjax]的文章

因为大屏幕的普及和数年没有更新界面，这次决定重新设计一个比较现代的风格。
Movable Type 的小众化导致想要的风格并不多，虽然，官方设计了比较人性化的换风格模式。但是禁不起风格稀少。。。。

本人对配色、审美啥的并不擅长，找了一圈，决定参考 屈光宇(JerryQu) 的网站风格进行移植,再次鸣谢 QuQu 。

修改风格其主要体现在以下：

1. 布局由上下变成左右。
2. 对于1024以下分辨率彻底移除 sidebar。
3. 对于 sidebar，仅在主页、归档页、Tag页面显示，其他页面均为2栏。

其实，目的主要是适配1024以上大屏。 MT的框架还是不错的，换主题仅简单换了 css 和局部细小修改。。

8月快过去了。时间真的是。。。。
顺便记下这几天对网站的一些小小的折腾吧。

1. 多说评论显示逻辑调整：

还是要从多说说起： 路杨已经基本上实现了把所有的多说评论同步到了本地。 默认同步到多说评论处于未发布状态，防止和多说JS载入的评论形成重复评论。 定时把本地数据库的多说评论转成发布状态，以防止多说服务器抽风导致评论不显示。

但是问题来了： 怎么让同步并本地发布的同一条评论只显示一次呢？ 原来的实现办法是在 多说JS 中识别这条评论是否已经本地发布，如果发布则 hook 多说JS 的 templates.post 函数，让它不生成这条评论。
核心代码如下：

codevar DSinMTids = [];
function check_ds_in_mts() {
DSinMTids = [];
$("#comments-content div.ds-post-self").each(function()
{
if ( ( $(this).attr("data-source") == 'duoshuo' ))
{
DSinMTids.push($(this).attr("data-post-id"));
}
});
}
check_ds_in_mts();
var _D_post=DUOSHUO.templates.post;
DUOSHUO.templates.post=function (e,t){
var rs=_D_post(e,t);
if ( $.inArray(e.post.post_id, DSinMTids) != -1 return '';
/* sth others*/
return rs;
}

先说ajax无刷新技术吧
因为 Godaddy 空间中资源和国内访问速度的原因，能节省一点资源就节省一点资源吧。虽然对于传统的 ajax 来说，更新版的 pjax 可以同时写入浏览器历史（ pushState ）和动态更换 url 显示，但是对于我来说，貌似还有一下不足：

1. 浏览器缓存（内存）不会释放,会让老爷机的朋友感觉到机器卡。
2. 不利于SEO（当然比 ajax 已经很好了）。 pjax 再先进也只更新某个容器，对于 head 内的一些 meta 是不会处理的，强迫症的伤不起啊。
3. 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");
}
});
}