我一天得工作差不只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 "";
echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<<":"";
echo ($paged > 1 && $showitems < $pages)? "<":"";
for ($i=1; $i <= $pages; $i++){
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
echo ($paged == $i)? "".$i."":"".$i."";
}
}
echo ($paged < $pages && $showitems < $pages) ? ">" :"";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $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的时候，会出现返回顶部。
到此差不多了，首页摘要的瀑布流搞定了。
LeetCode 每日一题 — Trips and Users 
游客：pm2 能配合谷歌浏览器的这
0个访客评论