Typecho 完成首页轮回加载的一种思绪
在制造模板的时刻须要完成首页无穷加载的功用，也许就是在第一页点击加载更多然后将第一页和第二页连系显现。
这里简朴议论下思绪。
如果皮肤文件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><p>注重：本文一切代码仅作演示，用于申明完成思绪，并没有现实调试过。</p>起首，增添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><p>代码申明：点击“加载更多”按钮时，挪用load_more_post函数，并加载下一页的文章内容。注重加载的url中加了一个load_type=ajax参数，用于标示该请求是ajax体式格局加载。</p>然后，继承修正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>以上内容转载自：http://www.typechodev.com/index.php/archives/511/
评论列表