由于 Typecho 相比 WordPress，所提供的接口较少，有时候为了达到某种功能只能自己通过调用数据库数据实现，今天给大家讲的是 Typecho 首页文章列表无限加载的实现，有时候我们会遇到访问一些网站他的文章列表随着我们的向下滚动自动加载，其实就是检测到滚动到底部重新向服务器发送请求，获取新的数据添加到当前数据列表底部。Typecho 上的实现也是类似这种，具体操作步骤请阅读下文：
首先在主题目录下的 functions.php 中加入一段判断 ajax 请求的方法：
function is_ajax()
{
if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
if ('xmlhttprequest' == strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])) {
return true;
}
}
return false;
}
然后在首页模板 index.php 中加入判断，if(is_ajax()): 则不输出 header footer 等信息。
最后一步，在模板公共 js 文件中加入以下代码：
var page = 1;
var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$('#blog_load_more').click(function(event) {
$(this).hide();
$('#spinner').show();
$.ajax({
type: 'get',
url: SITE.default_url + '/page/' + parseInt(page + 1),
success: function(data, textStatus, XMLHttpRequest) {
page++;
$('.w-blog-list').append(data);
$('#spinner').hide();
$('#blog_load_more').show();
},
error: function(MLHttpRequest, textStatus, errorThrown) {
$('#spinner').hide();
$.jGrowl('Network Error');
}
});
});
其中 #blog_load_more 为需要绑定的加载更多按钮，#spinner 为加载过程中的动画，.w-blog-list 为首页文章列表容器。由于 Typecho 并没有 Ajax 钩子函数，所以需要在 functions.php 中加入以下代码：
function site_data()
{
$array = array(
'site_url' => Helper::options()->siteUrl,
'default_url' => Helper::options()->siteUrl . 'index.php',
'theme_images_url' => Helper::options()->themeUrl . '/assets/images/',
);
echo json_encode($array);
}
之后在 footer.php 中引入该数据：
<script type="text/javascript">
var SITE = <?php site_data()?>;
</script>
此处的 SITE 就是一个 JSON 对象，可以直接用了。