点点随机文章的输出方法

2012.09.21 分享 4149 人浏览 留言

通过点点开发者文档中的开发者分享模块中的最新/最热/随机文章模块,学习到了如何如何通过自定义视图加载最新和最热门的文章了,但是,Relex分享的这部分模块中的随机文章模块并不是很理想,只能随机输出一篇随机文章,完全达不到我们的要求。

然而在I福旦博客中看到了他使用了这个随机文章,然后,就请教了他,很慷慨的把这个方法高告诉了我,下面我就分享一下。

方法一:(此方法下如果文章类型为音乐等无标题的文章输出标题会错误,请用第二种方法,或者自己改下代码)

在hdoctype声明、<html>前加载以下部分信息

<script type="server/javascript">
if (dian.request.action === 'randomBar.html') {
var p = dian.data.posts.slice(0);
p.sort(function(a, b) {
return Math.random() < 0.5 ? 0 : 1;
});
for (var i = 0; i < dian.options["文章数.随机推荐"].value && i < p.length; i++) {
write('<li><a href="' + p[i].url + '">' + p[i].title + '</a></li>');
}
return;
}
</script>

其中有一个点点自定义选项,那就加载在<head>下面

{#text:文章数.随机推荐|value:"10"}

这样就可以在后台设置随机文章数的输出数量了。

然后是js调用部分了

<script type="text/javascript">
$(document).ready(function(){
$("#random").load("{$global.url}/do/randomBar.html?_posts[limit]=200");
});
</script>

把以上js放在你的body内就行了。

注:以上的[limit]=200为在200篇文章中输出最新文章,数值大小可根据自己博文数量调动,可以设大于博文数量(之前泄漏了,我的错...)

最后就是div的调用啦,把<div id="random"></div>,放在你需要加载随机文章的地方即可以实现随机文章的输出。

加一张效果图

---------------------------------------分割线--------------------------------------

方法二:(加了判断文章类型而输出标题)

昨天看到NMTuan君也共享了他的点点模板,看到他也使用了随机文章,顺便把他的调用也写上来吧。

同样在hdoctype声明、<html>前加载以下部分信息

<script type="server/javascript">
if(dian.request.action == 'randomart'){
dian.data.posts.sort(function(a, b) {
return Math.random() > 0.5 ? 0 : 1;
});
var i=0;
dian.data.posts.forEach(function(post){
var _x
if(post.song){
_x = post.song+' - '+post.artist
} else if(post.title){
_x = post.title
} else {
_x = dian.tools.truncate(dian.tools.nohtml(post.description),10)
}
if(i>=10) return;
write('<li><a href="'+ post.url +'">'+ _x +'</a></li>');
i++
})
return;
}
</script>

js部分信息,在body内加入

<script type="text/javascript">
$('#random').load('/do/randomart?_posts[limit]=50 li');
</script>

最后同样是div调用,把<div id="random"></div>,放在你需要加载随机文章的地方即可以实现随机文章的输出。

两种方式,喜欢哪种就用哪种吧,在这里多谢i福旦 NMTuan的无偿分享。

PS:由于不懂二代模板引擎,写不出如何输出带缩略图的随机文章输出,求解答...

已做出带缩略图的随机文章列表 见点点输出随机文章并带缩略图的方法

顺便给个之前分享的点点最新文章输出的方法链接地址:http://huilang.me/dd-newpost/

文章地址:http://huilang.me/dd-random/

回复本文

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif