码疯窝

我一天得工作差不只10多个小时,然后才艰挤点时间出来弄一章,昨天有熬夜到很晚,发现一天弄一章出来还真是有些困难呢,不是因为不知道接下来要做什么了。而是有太多太多要做的了,时间总是不够。

一、首页分页
今天把自己的几篇文章从EverNote给转移到博客上面去了,先自己看一下成果得瑟一下,同时也发现了个问题,算来安装了WP Thumbnails之后呢,首页的摘要就全变了,WP Thumbnails管得可真多啊。
去后台看了看插件的选项,很快找到了对应的选项,这里就不多说了。
POST完几篇文章之后,首页分页了,每页显示5篇文章。分页可不我喜欢的类型,个人比较喜欢瀑布流的文章显示方式,因为本人很懒,甚至懒到不想去点下一页,想看更多直接拉下来不就可以了么?
于是去数据库找到存文章的表 wp_posts,把一个测试的文章狂copy N多份。然后运行SQL加以区分。
update wp_posts set post_title = concat(id, ' - ', post_title) where id >= 51
OK,文章准备好了,接下来开始动工吧。原理很简单,就是当滚轴拉到最下来时用ajax去取下一页的文章然后插入到页面。唯一的问题是如何知道当前页是哪一页呢?
看了看index.php页面生成分页html的代码。
function kriesi_pagination($query_string){  
     global $posts_per_page, $paged;  
     $my_query = new WP_Query($query_string ."&posts_per_page=-1");  
     $total_posts = $my_query->post_count;  
     if(empty($paged))$paged = 1;  
     $prev = $paged - 1;  
     $next = $paged + 1;  
     $range = 2; // only edit this if you want to show more page-links  
     $showitems = ($range * 2)+1;  
      
     $pages = ceil($total_posts/$posts_per_page);  
     if(1 != $pages){  
          echo "\n";  
     }  
}  
我var_dump一下就得到 $pages 和 $paged 正好是我要的两个变量。
于是,我在index页面加入了这样一部分代码。
post_count;
     $pages = ceil($total_posts/$posts_per_page);
?>
至于posts_per_page=-1是啥意思,我自己也不太懂,从上面的那个函数就知道posts_per_page是page size。等于-1难道是取默认size?以后发掘。
加入了这样一段后,也就是说每次ajax我都可以得取当前是取了第几页的文章,总页数是多少。
ok,所有疑点解开了就开始动工吧。
先个加个loading的div,去借鉴了一下人人网的样式做了一下。
呵呵。接下来就是js部分。
直接贴上写好了,调试好了的代码吧,代码比较简单的。有部分注释。

(function ($) {
     // CONST
     var NEAR_BOTTOM = 100,
          CONTENT_HOLDER = '.content',
          ARTICLE_HOLDER = '.excerpt',
          MSG_HTML = '',
          MSG_NO_MORE = '

已加载完了所有文章!

'; var $content, $msg, $article, $tmp, _paging, u, _pageIndex = 1, _pageTotal = 0, _trigger = true, _p; function _initPaging() { var _paging = $article.attr('paging').split('-'); _pageIndex = _paging[0] * 1; _pageTotal = _paging[1] * 1; } function _loadMoreArticles () { if (_pageIndex === _pageTotal) { $msg.html(MSG_NO_MORE); $msg.fadeIn(function () { setTimeout(function () { $msg.fadeOut(); }, 1500); }); return false; } $msg.fadeIn(); // This may changed later, Because if we render the static html page, then the url should be changed. u = BLOG.Utility.replaceRequest({paged: _pageIndex + 1}); $.ajax({ url: u, success: function (data) { $tmp = $(data).find('.excerpt'); $article.attr('paging', $tmp.attr('paging')); $article.append($tmp.find('li')); $msg.fadeOut(); _initPaging(); } }); return true; } $(function () { $msg = $(MSG_HTML); $content = $(CONTENT_HOLDER).append($msg); $article = $(ARTICLE_HOLDER); _initPaging(); $(window).scroll(function() { _p = $(document).height() - $(window).scrollTop() - $(window).height(); // If do not use the trigger paramter, when it is in the bottom and scroll up a little bit, it will also trigger the ajax event. if (_p <= NEAR_BOTTOM) { if (_trigger && $msg.css('display') === 'none') { _trigger = false; _loadMoreArticles(); } } else _trigger = true; }); }); })(jQuery);
取url那一部分我是用的另外一部分代码,因为那部分代码在做完静态化后还是要修改的。所以先不考虑那么多。Utility的代码我也可以贴上。个人比较喜欢把经常用到的一些函数给他放在一个命名空间里面。可能是以前C#的习惯。
(function () {

     var BLOG = window.BLOG || {},

     _Utility = {
         getRequest: function(v) {
             var url = v || location.href;
             var theRequest = {},
                 pound = '',
                 params = '',
                 str = '',
                 paramArr = [];
             if (url.indexOf("?") != -1) {
                 str = url.substr(url.indexOf("?") + 1);
                 if (str.indexOf('#') > -1) {
                     pound = str.substr(str.indexOf('#'));
                     params = str.substr(0, str.indexOf('#'));
                 } else {
                     params = str;
                 }
                 paramArr = params.split("&");
                 for (var i = 0; i < paramArr.length; i++) {
                     theRequest[paramArr[i].split("=")[0]] = unescape(paramArr[i].split("=")[1]);
                 }
                 if (pound.length > 0) {
                     theRequest['#'] = pound;
                 }
             }
             return theRequest;
         },
         replaceRequest: function(params, url) {
             url = url || location.href;
             var paramStr = '';
             var tmp = _Utility.getRequest(url);
             if (typeof(params) === 'object') {
                 for (var key in params)
                     tmp[key] = params[key];
                 for (var key2 in tmp) {
                     if (key2 != '#')
                         paramStr += '&' + key2 + '=' + encodeURIComponent(tmp[key2]);
                 }
                 paramStr = paramStr.substr(1);
                 url = url.replace(/\?.*/i, '') + '?' + paramStr + ((tmp['#']) ? ('#' + tmp['#']) : '');
             }
             return url;
         }
     };

     // Export
     BLOG.Utility = _Utility;
     window.BLOG = BLOG;
})();
直接上效果图,看一看成果。
做完这些顿时感觉爽太多了。从此以后跟分页说bye bye咯。唯一的缺陷就是ajax是取的整个页面,无形中浪费了太多的资源,主要原因还是因为本人不了解wp的机制。还是那句话。以后再改。
另外,摘要是ajax获取的,而且摘要里面是包含了缩略图的。那么我们以前写的缩略图的js就自然没能给新加进来的图片绑定JS事件。
把第三章代码中的click事件改成live事件就可以解决这个问题咯。
二、返回顶部
现在页面可以变得无限长咯,所以需要加入一个返回顶部的功能,继续借鉴了一个人人网,修改了刚才的JS代码,并且把CSS分离出来了。
CSS:
/* excerpt_loading */
#excerpt_loading {
    display:none;background-color:#F0F5F8;border:1px solid #CEE1EE;font-size:14px;margin-bottom:10px;padding:10px;text-align:center;margin-top:20px;
}
#excerpt_loading .end {
    color: red;
}

/* go to top */
#back_to_top {
    position: fixed;
    bottom: 35px;
    width: 50px;
    border-radius: 4px;
    display: block;
    height: 50px;
    right: 240px;
    margin-bottom: 15px;
    outline: 0 none;
    position: fixed;
    width: 50px;
    cursor: pointer;
    background-color: #666666;
    display: none;

}
#back_to_top p {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bolder;
    margin-top: 12px;
    -moz-user-select: none;
}
#back_to_top span {
    background: url("img/back-tip.png") no-repeat;
    width: 69px;
    height: 30px;
    margin-left: -10px;
    margin-top: -30px;
    display: none;
}
#back_to_top:hover span {
    display: block;
}
JS:

(function ($) {
     // CONST
     var NEAR_BOTTOM = 100,
          CONTENT_HOLDER = '.content',
          ARTICLE_HOLDER = '.excerpt',
          GOTOP_HTML = '

TOP

', MSG_HTML = '

更多文章加载中...

', MSG_NO_MORE = '

已加载完了所有文章!

'; var $content, $article, $tmp, $gotop = $(GOTOP_HTML), $msg = $(MSG_HTML), _paging, u, _pageIndex = 1, _pageTotal = 0, _trigger = true, _p, _top; function _initPaging() { var _paging = $article.attr('paging').split('-'); _pageIndex = _paging[0] * 1; _pageTotal = _paging[1] * 1; } function _loadMoreArticles () { if (_pageIndex === _pageTotal) { $msg.html(MSG_NO_MORE); $msg.fadeIn(function () { setTimeout(function () { $msg.fadeOut(); }, 1500); }); return false; } $msg.fadeIn(); // This may changed later, Because if we render the static html page, then the url should be changed. u = BLOG.Utility.replaceRequest({paged: _pageIndex + 1}); $.ajax({ url: u, success: function (data) { $tmp = $(data).find('.excerpt'); $article.attr('paging', $tmp.attr('paging')); $article.append($tmp.find('li')); $msg.fadeOut(); _initPaging(); } }); return true; } $(function () { $content = $(CONTENT_HOLDER).append($msg); $article = $(ARTICLE_HOLDER); $('body').append($gotop); $gotop.click(function () { $("body,html").animate({scrollTop: 0}, 800); }); _initPaging(); $(window).scroll(function() { _top = $(window).scrollTop(); if (_top > 0) $gotop.fadeIn(); else $gotop.fadeOut(); _p = $(document).height() - _top - $(window).height(); // If do not use the trigger paramter, when it is in the bottom and scroll up a little bit, it will also trigger the ajax event. if (_p <= NEAR_BOTTOM) { if (_trigger && $msg.css('display') === 'none') { _trigger = false; _loadMoreArticles(); } } else _trigger = true; }); }); })(jQuery);
效果图如下:
当鼠标移动到TOP的时候,会出现返回顶部。
到此差不多了,首页摘要的瀑布流搞定了。
继续查看有关 日志连载的文章

0个访客评论