Javascript 在页面上列出blogger帖子，并使用css进行图像和样式化

下面的代码用于列出标签名称中的博客帖子 但是它只列出了文章的标题，我想知道是否有可能一起显示文章图像，并使用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=[]；
函数sendQuery12（）
{
var scpt=document.createElement（“脚本”）；
scpt.src=“/feeds/posts/summary/-/Series？alt=json&callback=processPostList13&start index=“+startIndex+”&max results=“+maxResults；
文件.正文.附件（scpt）；
}
函数printArrayResults（根）
{ 
//按比例分类
allResults.sort（函数（a，b）{
var a_string=a.children[0].textContent；
var b_string=b.children[0].textContent；
if（a_字符串b_字符串）返回1；
返回0；
})
var elmt=document.getElementById（“postList13”）；
对于（索引=0；索引0）
{
对于（变量i=0；i0&&title&&title.length>0）
{
var liE=document.createElement（“li”）；
var a1E=document.createElement（“a”）；
var postImage=document.createElement（“img”）；
a1E.href=url；
a1E.textContent=标题；
a1E.className+=“aclass”；
postImage.src=imageThumb；
positmage.className+=“imclass”；
谎言。附属品（后期图像）；
谎言。附肢儿童（a1E）；
//艾尔姆特·阿佩奇尔德（谎言）；
所有结果。推（躺）；
}
打破
}
}
}
如果（feed.entry.length>=maxResults）
{
startIndex+=maxResults；
sendQuery12（）；
}否则{
printArrayResults（）；
}
}
}
sendQuery12（）；

---

1-从APi检索帖子图像

在这些行之后：

var entry = feed.entry[i];
var title = entry.title.$t;
var date  = entry.published.$t;

您可以使用：

var imageThumb = entry.media$thumbnail.url;

它将检索文章的第一个图像缩略图。您应该对其进行验证，因为没有图像的文章将返回

媒体$缩略图的
未定义的
，并将导致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>



var startIndex=1；
var maxResults=150；
var-allResults=[]；
函数sendQuery12（）
{
var scpt=document.createElement（“脚本”）；
scpt.src=“/feeds/posts/summary/-/NAME？alt=json&callback=processPostList12&start index=“+startIndex+”&max results=“+maxResults；
文件.正文.附件（scpt）；
}
函数printArrayResults（根）
{ 
//按比例分类
allResults.sort（函数（a，b）{
var a_string=a.children[0].textContent；
var b_string=b.children[0].textContent；
if（a_字符串b_字符串）返回1；
返回0；
})
var elmt=document.getElementById（“postList12”）；
对于（索引=0；索引0）
{
对于（变量i=0；i0&&title&&title.length>0）
{
var liE=document.createElement（“li”）；
var a1E=document.createElement（“a”）；
var postImage=document.createElement（“img”）；
a1E.href=url；
a1E.textContent=标题；
postImage.src=imageThumb；
谎言。附肢儿童（a1E）；
谎言。附属品（后期图像）；
//艾尔姆特·阿佩奇尔德（谎言）；
所有结果。推（躺）；
}
打破
}
}
}
如果（feed.entry.length>=maxResults）
{
startIndex+=maxResults；
sendQuery12（）；
}否则{
printArrayResults（）；
}
}
}
sendQuery12（）；
我搞糊涂了，你能给我发一份财务报告吗
<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>