点点输出随机文章并带缩略图的方法

2012.09.25 分享 11470 人浏览 3 条留言

好吧,纠结了很久,在昨晚请教了N多人才把点点的二代引擎给学习了一遍,现在本站已全是二代的代码了,暗爽啊!(貌似一代运行会更快些...)

上次发了一个点点随机文章的输出方法这篇文章,解决了点点随机文章的输出,但是不能输出缩略图,自己摸索了几天之后,终于把带缩略图的方法也给弄出来啦!!

下面分享一下

1.js部分,放在document之前

<script type="server/javascript">
if(dian.request.action == 'randomart.html'){
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)
}

var _m
if (post.video) {
_m = post.cover
}
else if (post.text) {
_m = post.thumbnail ? post.thumbnail.square_100.src : "http://x.papaapp.com/farm1/2893f5/138f421f/cobmw.png"
}
else if (post.audio) {
_m = post.covers.square_100
}
else if (post.link) {
_m = "http://x.papaapp.com/farm1/2893f5/138f421f/cobmw.png"
}
else if (post.photo) {
_m = post.photos[0].square_100.src
}

if(i>=10) return;
write('<li><a href="'+ post.url +'"><img src="'+ _m +'"/>'+ _x +'</a></li>');
i++
})
return;
}
</script>

2.div部分(放在你需要使用的地方,邪恶的用下cobmw...)

<div id="cobmw"></div>

3.ajax载入部分(这个放在body内,想快速加载的话就放头部,觉得影响速度的话就放在底部,随意)

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

搞定收工咯!!!

自己写的第一份东西呀,虽然都是东拼西凑的,但是还真花了小白我不少时间...

再次感谢点点模板开发者群里提供帮助的各位好友...

 

不能做出像Relex发布的那种可以自定义的内容,但是稍微懂点的都能对以上代码进行自定义修改,下面简单说下如何修改成为自己想要的格式的方法。

1.缩略图的大小

js部分的22行 25行 31行,里面的"square_100"为宽高均为100px的方形图片,大家可以更具需要输出,可选的值为“square_100”“square_250”“250”“500” “800” “1280”,具体参考官方文档

2.输出格式可在35行中修改

3.输出文章的数目在js的第34行修改,默认为10

4.如无图则使用默认图片,在js部分的22和28行修改

其他貌似没什么了,不知道有神马bug,欢迎测试...

文章地址:https://huilang.me/random-img/

“点点输出随机文章并带缩略图的方法” 有 3 条评论

  1. 胡锦涛说道:

    怎么让随机文章横着显示啊!
    我怎么调试都是竖的。 :mrgreen: :idea: :cry: :razz: :shock: :twisted:

  2. 胡锦涛说道:

    我搞定了。

回复本文

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

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