带有背景音乐的博客有一个缺点，就是在切换页面的时候会导致音乐中断，造成很不好的用户体验。将博客页面的载入 AJAX 化就可以解决这个问题。
什么是 AJAX？
这里的 AJAX 并不是荷甲球队 Ajax 哦，AJAX全称为“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），使用 Ajax 的最大优点，就是能在不更新整个页面的前提下维护数据。这使得 Web 应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。
幸运的是 Blogger 可以非常方便插入 JavaScript 代码，首先进入模板编辑，备份原模板；
在 <head></head> 之间加入如下代码
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'/>
接着加入：
<script>
// AJAX link
$(".ajax-link").live("click",function(){
var url = $(this).attr('href');
var pagerUrl = url +" #blog-pager";
url += " .blog-posts";
$(".blog-posts").load(url);
$("#blog-pager").load(pagerUrl);
document.getElementById('header';).scrollIntoView(true);
return false;
});
</script>
标记代码的意思是点击链接后跳转到页面的 header div 处，可以自己按需调整。
好了，之后我们就可以在需要AJAX化的链接的 <a> tag 中加入
class="ajax-link"
就可以了。
比如说，我们在翻页处设置 AJAX 链接。在模板编辑页的“扩展窗口小部件模板”打上勾，搜索 <b:if cond=’data:newerPageUrl’>，可以看到如下代码
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='ajax-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
红色部分是后来加上的代码。同理，搜索 <b:if cond=’data:olderPageUrl’>，如法炮制即可。
同样的办法，可以给内文标签、标签云、页面列表都弄成 AJAX 。注意，不推荐将文章链接也 AJAX 化，因为评论功能会出问题。如果您有合适的解决办法，不妨告诉我。
此外，如果将页面列表加以改造，进入某篇文章后点击页面列表，会出现停留在当前文章框架内的Bug（标题栏为文章标题），我设置了一个判断：如果当前页面是文章页面，就不执行 AJAX 链接，代码如下：
<b:widget id='PageList1' locked='false' title='页面' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a class='ajax-link' expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<b:if cond='data:blog.pageType == "item"'> //item 表示文章
<li><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a class='ajax-link' expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
这样基本就实现啦，本文的大部分代码和思路来自 NightSpirit的博客，我还请教了关于载入文章后如何自动跳转的问题，在此向他表示感谢。
Lan，1990年生人