Typecho实现首页循环加载的一种思路
SegmentFault上讨论的一个话题，关于如何实现index页面的无限加载。
做到index页面的无限加载，基本上考虑的是Ajax了，具体实现上则有两个思路：
- 自己制作个简单的插件，支持ajax加载文章列表。
- 在皮肤文件index.php中，做个特殊处理，使用ajax实现内页翻页
第一个方式比较简单，这里不展开说明。这里简单讨论下第二种思路。
假如皮肤文件index.php中的代码如下：
<html>
<head>
<!--- 省略head代码 --->
</head>
<body>
<div id="post_list_containner">
<?php while($this->next():)?>
<section class="article_section">
<h2><?php $this->title() ?></h2>
<div><?php $this->excerpt(200);?></div>
</section>
<?php endwhile?>
</div>
</body>
</html>
注意：本文所有代码仅作演示，用于说明实现思路，并没有实际调试过。
首先，增加js代码，当页面滚动到最后，或者点击按钮“加载更多”时，ajax方式加载新文章列表。
<html>
<head>
<!--- 省略head代码 --->
</head>
<body>
<div id="post_list_containner">
<?php while($this->next():)?>
<section class="article_section">
<h2><?php $this->title() ?></h2>
<div><?php $this->excerpt(200);?></div>
</section>
<?php endwhile?>
</div>
<div id="load_more">
<button class="load_more_button" onclick ="load_more_post()">加载更多</button>
</div>
</body>
<script>
var current_page = 1;
function load_more_post(){
current_page ++;
var load_post_url = window.location.href + "/page/" + current_page + "/?load_type=ajax";
$.get(load_post_url,function(html){
$('#post_list_container').append($(html));
})
}
</script>
</html>
代码说明：点击“加载更多”按钮时，调用
load_more_post函数，并加载下一页的文章内容。注意加载的url中加了一个load_type=ajax参数，用于标示该请求是ajax方式加载。
然后，继续修改index.php皮肤文件，增加如下代码：
<?php if(isset($_GET['load_type']) and $_GET['load_type'] == 'ajax'): ?>
<?php while($this->next():)?>
<section class="article_section">
<h2><?php $this->title() ?></h2>
<div><?php $this->excerpt(200);?></div>
</section>
<?php endwhile?>
<?php return; //完成ajax方式返回，退出此页面?>
<?php endif ?>
汇总index.php代码如下：
<?php //这一段，ajax方式加载文章列表 ?>
<?php if(isset($_GET['load_type']) and $_GET['load_type'] == 'ajax'): ?>
<?php while($this->next():)?>
<section class="article_section">
<h2><?php $this->title() ?></h2>
<div><?php $this->excerpt(200);?></div>
</section>
<?php endwhile?>
<?php return; //完成ajax方式返回，退出此页面?>
<?php endif ?>
<?php //这一段开始，正常的首页输出 ?>
<html>
<head>
<!--- 省略head代码 --->
</head>
<body>
<div id="post_list_containner">
<?php while($this->next():)?>
<section class="article_section">
<h2><?php $this->title() ?></h2>
<div><?php $this->excerpt(200);?></div>
</section>
<?php endwhile?>
</div>
<div id="load_more">
<button class="load_more_button" onclick ="load_more_post()">加载更多</button>
</div>
</body>
<script>
var current_page = 1;
function load_more_post(){
current_page ++;
var load_post_url = window.location.href + "/page/" + current_page + "/";
$.get(load_post_url,function(html){
$('#post_list_container').append($(html));
})
}
</script>
</html>
版权声明:未经书面授权禁止转载、摘编、复制或建立镜像。对既成事实本站将保留所有的权利。
评论已关闭