下面的代码用于在标签名称中列出博客帖子
但是它只列出了帖子的标题,我想知道是否可以将帖子图像一起显示,并使用 css 进行样式化,我该怎么做?
在 /feeds/posts/summary/-/NAME?alt=json&callback=processPostList12&start-index="
中,您可以更改标签名称,并且只会显示与标签名称关联的帖子。
我更改了创建类的代码并将图像的位置更改为行的开头,但现在它不再按字母顺序排列,我尝试了所有我知道的方法但无法修复它。
图片是否也可以指向帖子?就像标题一样
这是我更改的部分:
a1E.href = url;
a1E.textContent = title;
a1E.className += "aclass";
postImage.src = imageThumb;
postImage.className += "imclass";
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary/-/Series?alt=json&callback=processPostList13&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList13");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList13(root)
{
var elmt = document.getElementById("postList13");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url ;
} else {
var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
}
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
var postImage = document.createElement("img");
a1E.href = url;
a1E.textContent = title;
a1E.className += "aclass";
postImage.src = imageThumb;
postImage.className += "imclass";
liE.appendChild(postImage);
liE.appendChild(a1E);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
<div class="postlist1" id="postList13">
</div>
最佳答案
1- 从 API 检索帖子图片
在这些行之后:
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
你可以使用:
var imageThumb = entry.media$thumbnail.url;
它将检索帖子的第一个图像缩略图。你应该验证它,因为没有图像的帖子将为 media$thumbnail
返回 undefined
并会导致 javascript 错误。所以:
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url;
} else {
var imageThumb = 'alternative_image_path' ;
}
2- 附加帖子图片:
...
var postImage= document.createElement("img");
postImage.src = imageThumb;
liE.appendChild(postImage);
...
最终代码应该是这样的:
<div>
<ul id="postList12"></ul>
</div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary/-/NAME?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url ;
} else {
var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
}
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
var postImage = document.createElement("img");
a1E.href = url;
a1E.textContent = title;
postImage.src = imageThumb;
liE.appendChild(a1E);
liE.appendChild(postImage);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
</script>
关于javascript - 在页面上列出博主帖子,带有图像并使用 CSS 进行风格化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50934910/