Typecho 首页向下滚动无限加载文章
由于 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 对象，可以直接用了。
广告声明：文内含有的对外跳转链接（包括不限于超链接、二维码、口令等形式），用于传递更多信息，节省甄选时间，结果仅供参考，Typecho.Wiki所有文章均包含本声明。
用了大佬这个教程，好像没成功。。。theme_images_url对应的img图片是做什么的呀。还有就是index首页if(is_ajax()):判断不知道怎么做的。
关于首页无限加载文章的方法你可以参考这款主题的代码：Typecho 瀑布流无限加载自适应主题 Practice01
谢谢，你这个主题功能强的可怕。我学习下。
想简单一点的话可以参考这个主题：Typecho 首页无限加载博客主题 Newcity，我觉得这个可能没有那么难上手
我自己一直不太喜欢无限加载的主题，所以对这块就好就没有去研究了