How to get the blogger posts feed and to incorporate it to an HTML5 page?

后端未结

关注

 1  1581

I\'m trying to get the data from the blogger and to put it on a HTML page. The code HTML code is the following:


                      
              相关标签:


      
      
        
          1条回答        

        
                         				            
            
           
            
                              
                
              
              
                
                  北荒        
                
              
                            
                2021-01-27 11:03
              
            
            
                                                                       
At first, you need to allow full feed in order to get the third party image and post content

Go to Settings > Others > Site feed > Allow Blog Feed and select Full then Save Settings

Then try this: (require full feed)



<!DOCTYPE html>
<html>
<head>
<style>
#demo {
	display: flex;
	flex-wrap: wrap;
}
.feed-post {
	padding: 10px;
	width: 30%;
    word-break: break-word;
}
.feed-post a {
	text-decoration: none;
}
.feed-post img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}
</style>
</head>
<body>

<div id="demo"></div>

<script>
function getPosts(json) {
    var list = [];
    var data = json.feed.entry;
    for (var i = 0; i < data.length; i++) {
        
        var title = "<h3>" + data[i].title.$t + "</h3>";
        var link = data[i].link.pop().href;
        var summary = "<p>" + data[i].content.$t.replace(/<\/?[^>]+(>|$)/g, "").substr(0, 120) + "</p>";
        if (data[i].media$thumbnail) {
        	var img = "<img src='" + data[i].media$thumbnail.url + "'>";
        } else {
        	var doc = new DOMParser().parseFromString(data[i].content.$t, "text/html");
        	var imgtag = doc.querySelector('img');
        	if (imgtag) {
        		var img = "<img src='" + imgtag.src + "'>";
        	} else {
        		var img = "";
        	}
        	
        }

        list.push("<div class='feed-post'><a href='"+ link + "'>" + img + title + "</a>" + summary + "</div>");
    }
    document.getElementById('demo').innerHTML = list.join('');

}
</script>

<script src="https://www.blogger.com/feeds/614640065733671379/posts/default?alt=json&max-results=3&callback=getPosts"></script>

</body>
</html>



                                                                        
                                                        
            
            
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
                                                            
            
                      
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...
                        
                    
                
          
          	          
                             
        
        
          
            
            
              
              
            
    


                                 
              
            
                          
    

        
         
                验证码
                
                  
                
                
                   看不清?
                
              
                                  
                    
   
                 
             
              提交回复