记忆碎片-网络技术分享

好吧，纠结了很久，在昨晚请教了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

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