我正在使用此脚本在我的博客上显示相关帖子,因为它允许CSS自定义,而不像您可以覆盖其CSS的外部小部件:
$(document).ready(function() {
var maxSearched = 500;
var minimum = 5;
var maximum = 5;
var imageSize = 100;
var roundImages = false;
var relatedTitle = true;
var labelInTitle = false;
var relatedTitleText = "Related Posts";
var defaultImage = "";
var campaignTracking = false;
var campaignSource = "";
var campaignMedium = "";
var campaignName = "";
var insertBefore = $('.comments');
var labels = [];
var label;
var alternateLabel;
var minposts = minimum - 1;
var postlabels = $(".post-labels a");
if (postlabels.length === 1) {
label = postlabels.text().trim()
} else if (postlabels.length > 1) {
$(postlabels).each(function() {
labels.push($(this).text().trim())
});
label = labels[Math.floor(labels.length * Math.random())];
var labelLocation = labels.indexOf(label);
if (labelLocation === labels.length - 1) {
alternateLabel = labels[labelLocation - 1]
} else {
alternateLabel = labels[labelLocation + 1]
}
}
if (label !== undefined) {
var title = $(".entry-title").text().trim();
var labelCount = 0;
var alternateLabelCount = 0;
var matches = [];
var url = $('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");
$.ajax({
url: url,
data: {
"max-results": maxSearched,
alt: "json-in-script"
},
dataType: "jsonp",
success: function(e) {
$.each(e.feed.entry, function(t, n) {
if (e.feed.entry[t].category !== undefined) {
var r = [];
for (var i = 0; i < e.feed.entry[t].category.length; i++) {
r.push(e.feed.entry[t].category[i].term)
}
if ($.inArray(label, r) !== -1) {
labelCount++
}
if ($.inArray(alternateLabel, r) !== -1) {
alternateLabelCount++
}
}
});
if (labelCount <= minposts && alternateLabelCount >= minposts) {
label = alternateLabel
}
$.each(e.feed.entry, function(t, n) {
if (e.feed.entry[t].category !== undefined) {
var r = [];
for (var i = 0; i < e.feed.entry[t].category.length; i++) {
r.push(e.feed.entry[t].category[i].term)
}
if ($.inArray(label, r) !== -1) {
var s = e.feed.entry[t].title.$t.trim();
if (s !== title) {
var o;
for (var u = 0; u < e.feed.entry[t].link.length; u++) {
if (e.feed.entry[t].link[u].rel === "alternate") {
o = e.feed.entry[t].link[u].href
}
}
var a;
if (e.feed.entry[t].media$thumbnail !== undefined) {
a = e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s" + imageSize + "-c")
} else {
a = defaultImage
}
if (matches.length < maxSearched && campaignTracking === false) {
matches.push('<li><a href="' + o + '"><img src="' + a + '" alt="' + s + '" nopin="nopin"><div class="pp-home-title"><div class="pp-center"><div class="pp-center2"><div id="related-title">' + s + "</div></div></div></div></a></li>")
} else if (matches.length < maxSearched && campaignTracking === true) {
matches.push('<li><a href="' + o + "?utm_source=" + campaignSource + "&utm_medium=" + campaignMedium + "&utm_campaign=" + campaignName + '"><img src="' + a + '" alt="' + s + '" nopin="nopin"><div class="pp-home-title"><div class="pp-center"><div class="pp-center2"><div id="related-title">' + s + "</div></div></div></div></a></li>")
}
}
}
}
});
if (matches.length >= minimum) {
if (relatedTitle === true && labelInTitle === true) {
insertBefore.before('<div><div class="related-posts"><h5>' + relatedTitleText + ' <span class="related-term">' + label + "</span></h5><ul></ul></div></div>")
} else if (relatedTitle === true && labelInTitle === false) {
insertBefore.before('<div class="related-posts"><h5>' + relatedTitleText + "</h5><ul></ul></div>")
} else {
insertBefore.before('<div class="related-posts"><ul></ul></div>')
}
matches.sort(function() {
return .5 - Math.random()
});
for (var t = 0; t < maximum; t++) {
$(".related-posts ul").append(matches[t])
}
}
insertBefore.css("clear", "both");
$(".related-posts ul li").css("max-width", imageSize);
$(".related-posts ul li img").css("max-width:100%");
if (roundImages === true) {
$(".related-posts ul li img").css("border-radius", "50%")
}
}
})
}
});
目前脚本显示帖子上的第一张图片,如果可以显示第二张图片,我非常喜欢它。关于JSON提要,我不是很了解,但我尝试包含以下内容,但没有一个有效:
e.feed.entry[t].media$thumbnail[1].url.split(/s72-c/).join("s" + imageSize + "-c")
e.feed.entry[t].media$group.media$thumbnail[0].url.split(/s72-c/).join("s" + imageSize + "-c")
if (e.feed.entry[t].media$group.media$thumbnail !== undefined) {
var thumb = t['media$thumbnail'][0]['url'];
是否可以选择使用JSON显示哪个缩略图?如果它是如何做的我用上面的脚本来做?
提前致谢。