为什么要动态加载文章?

1. 快速向访客展示页面文章很容是包含大量文字和多媒体资源 (如: 图片, 视频, 音乐), 加载这些内容需要占用很多的时间. 如果你的页面上存在大量文章, 当访客发现页面久久没有加载完成就感到不耐烦. 这是动态加载文章的主要目的.

2. 让文章列表化使页面上的文章成为一个列表, 减少页面的空间占用, 访客可以方便的移动到页面下方, 提高旧文章被点击的几率. 并且你可以在页面上放置更多的文章而不用担心页面过长.

为什么不动态加载文章?

1. 对搜索引擎不友好搜索引擎优化的目的是将有价值的东西尽量多的向搜索爬虫展示, 包括最新的文章内容. 只有标题的文章让爬虫只知道这个文章而不知其文章侧重, 使用 JavaScript 输出的文章内容未必可以被抓取和分析. 这些对 SEO 来说都是不好的.后来发现, 如果你的网站有固定的文章类型, 没有毕业在文章列表页显示太多文章内容, 表示影响不大.

2. 增加了请求次数虽然将文章折叠起来, 我们一般还是会想办法向访客显示前面的几篇文章. 这样对用户是友好的, 但是要增加请求的次数和数据库访问的次数.后来我有选择地显示部分文章内容, 而且不是通过异步加载的方式, 也就是说, 这个问题是可以通过简单的修改解决掉的.

3. 一些插件失效因为需要自定义方法抓取文章, 如果不添加特殊处理, 很可能令部分 WordPress 插件失效.可以通过特殊处理解决掉, 以后文章中会提及.

动态加载文章的设计思路

1. 找到页面上所有文章为每个文章添加一个展开/折叠按钮

2. 向文章添加展开/折叠按钮点击按钮, 如果文章内容没有加载, 加载并展开文章内容.点击按钮, 如果文章内容已经加载, 则展开/折叠文章内容.

3. 加载文章内容将文章的 id 发往后台, 在数据库中找到相应的文章内容并进行格式化, 返回响应显示在页面上.

JavaScript 处理代码分析

1. 找到页面上所有文章

/ 在文档加载完毕的时候遍历所有匹配文章的元素jQuery(document).ready(function(){ jQuery("div.post").each(function() { // 如果元素相应位置是文章 ID var id = jQuery(this).attr("id"); if(/^post-[0-9]+$/.test(id)) {  // 则为每个文章添加一个展开/折叠按钮  ... } });});

toggle.toggle(function() { // 展开 // 如果文章内容为空, 加载文章内容 if(jQuery("#" + id + " .content").text() == "") { ... } // 显示文章内容, 并切换按钮样式 jQuery("#" + id + " .content").slideDown(); jQuery(this).removeClass("collapse").addClass("expand");},function() { // 折叠 // 隐藏文章内容, 并切换按钮样式 jQuery("#" + id + " .content").slideUp(); jQuery(this).removeClass("expand").addClass("collapse");// 将按钮追加到文章标题前方}).prependTo(jQuery("#" + id + " h2"));

3. 加载文章内容

// 取得文章 IDvar postId = id.slice(5);// 使用 AJAX 获取并处理文章内容jQuery.ajax({ type:     "GET" ,url:     "?action=load_post&id=" + postId ,cache:    false ,dataType:  "html" ,contentType: "application/json; charset=utf-8" // 取得返回内容之前显示加载信息 ,beforeSend: function(data){loadPostContent(id, "<p class="ajax-loader">Loading...</p>");} // 获取文章内容成功, 更新文章内容 ,success:   function(data){loadPostContent(id, data);} // 获取文章内容失败, 显示出错提示 ,error:    function(data){loadPostContent(id, "<p>Oops, failed to load data.</p>");}});

后台处理处理思路

从前台传到后台的参数有两个, 一个是 action ID, 用于确定使用的接口, 另一个是文章的 ID, 用于获取文章对应的内容.

下面我们来分析一下wp-includes/post-template.php 的 get_the_content 方法.

function get_the_content($more_link_text = null, $stripteaser = 0) { global $id, $post, $more, $page, $pages, $multipage, $preview;  // 设定 "查看全文" 的链接文案 if ( null === $more_link_text ) $more_link_text = __( "(more...)" );  // 返回内容 $output = "";  // More 标签是否存在的标记位 $hasTeaser = false;  // 如果文章要求输入密码, 并且在 Cookie 中找不到处理过的信息, 则返回要求输入密码的查看表单 if ( post_password_required($post) ) { $output = get_the_password_form(); return $output; }  // 请求的文章片段对应的页面大于最大页数 (即文章片段不存在), 则返回最大页码的文章片段 if ( $page > count($pages) ) $page = count($pages);  // 文章内容是最后分页中的文章片段 $content = $pages[$page-1]; // 如果文中有 More 标签, 要求切断文章并输出 "查看全文" 链接, 则重定义文章内容, 标记 More 标签存在 if ( preg_match("/<!--more(.*?)?-->/", $content, $matches) ) { $content = explode($matches[0], $content, 2); if ( !empty($matches[1]) && !empty($more_link_text) )  $more_link_text = strip_tags(wp_kses_no_null(trim($matches[1])));  $hasTeaser = true; } else { $content = array($content); }  // 如果进行了文章切断处理, 且不存在分页要求,  if ( (false !== strpos($post->post_content, "<!-- noteaser -->") && ((!$multipage) || ($page==1))) ) $stripteaser = 1;  // 获取文章内容的第一部分; 如果在独立文章存在 Read more 和切断处理, 则文章内容为空 $teaser = $content[0]; if ( ($more) && ($stripteaser) && ($hasTeaser) ) $teaser = ""; $output .= $teaser;  // 如果文章分为多个片段, 在独立文章中拼接上第二部分, 摘要内容中显示 "阅读全文" 链接 if ( count($content) > 1 ) { if ( $more ) {  $output .= "<span id="more-" . $id . ""></span>" . $content[1]; } else {  if ( ! empty($more_link_text) )  $output .= apply_filters( "the_content_more_link", " <a href="" . get_permalink() . "#more-$id" class="more-link">$more_link_text</a>", $more_link_text );  $output = force_balance_tags($output); }  }  if ( $preview ) // preview fix for javascript bug with foreign languages $output = preg_replace_callback("/\%u([0-9A-F]{4})/", create_function("$match", "return "&#" . base_convert($match[1], 16, 10) . ";";"), $output);  // 返回文章内容 return $preview;}

处理方法

如果我们暂时不考虑输入密码, 分页等功能; 另外, 因为 More 和切断功能不应该在展开文章内容中存在, 响应处理可以变得很简单. 我们要做的事就这么几个:1. 做出 action 对应的接口2. 获取指定文章的内容3. 格式化文章内容4. 返回文章内容

多说无用, 直接上代码, 加注释:

function load_post() { // 如果 action ID 是 load_post, 并且传入的必须参数存在, 则执行响应方法 if($_GET["action"] == "load_post" && $_GET["id"] != "") { $id = $_GET["id"]; $output = "";  // 获取文章对象 global $wpdb, $post; $post = $wpdb->get_row($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE ID = %d LIMIT 1", $id));  // 如果指定 ID 的文章存在, 则对他进行格式化 if($post) {  $content = $post->post_content;  $output = balanceTags($content);  $output = wpautop($output); }  // 打印文章内容并中断后面的处理 echo $output; die(); }}// 将接口加到 init 中add_action("init", "load_post");