如何获取博客文章提要并将其合并到HTML5页面中? [英] How to get the blogger posts feed and to incorporate it to an HTML5 page?
本文介绍了如何获取博客文章提要并将其合并到HTML5页面中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试从博客中获取数据并将其放在HTML页面上. 代码HTML代码如下:
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:
<section class="colorlib-blog" data-section="blog">
<div class="colorlib-narrow-content">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 animate-box" data-animate-effect="fadeInLeft">
<span class="heading-meta">Read</span>
<h2 class="colorlib-heading">Recent Blog</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
<div class="blog-entry">
<a href="blog.html" class="blog-img"><img src="images/blog-1.jpg" class="img-responsive" alt="HTML5 Bootstrap Template by colorlib.com"></a>
<div class="desc">
<span><small>April 14, 2018 </small> | <small> Web Design </small> | <small> <i class="icon-bubble3"></i> 4</small></span>
<h3><a href="blog.html">Renovating National Gallery</a></h3>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 animate-box" data-animate-effect="fadeInRight">
<div class="blog-entry">
<a href="blog.html" class="blog-img"><img src="images/blog-2.jpg" class="img-responsive" alt="HTML5 Bootstrap Template by colorlib.com"></a>
<div class="desc">
<span><small>April 14, 2018 </small> | <small> Web Design </small> | <small> <i class="icon-bubble3"></i> 4</small></span>
<h3><a href="blog.html">Wordpress for a Beginner</a></h3>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
<div class="blog-entry">
<a href="blog.html" class="blog-img"><img src="images/blog-3.jpg" class="img-responsive" alt="HTML5 Bootstrap Template by colorlib.com"></a>
<div class="desc">
<span><small>April 14, 2018 </small> | <small> Inspiration </small> | <small> <i class="icon-bubble3"></i> 4</small></span>
<h3><a href="blog.html">Make website from scratch</a></h3>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 animate-box">
<p><a href="#" class="btn btn-primary btn-lg btn-load-more">Load more <i class="icon-reload"></i></a></p>
</div>
</div>
</div>
</section>
会生成页面的以下部分:
which generates the folloing part of the page:
我想用博客内容替换这段代码中的数据……所以我得到了博客的链接.
I want to replace this data from this code with a blogger content ... so I'm getting the link for the blogger.
我必须获取帖子的图像缩略图，帖子的名称，帖子的链接以及要放在此html代码上的帖子的描述.
I have to get the images thumbnail of the post the name of the post the link of the posts and a description of the post to put on this html code.
从博客获取数据的代码如下:
The code to get the data from the blogger is the folloing:
<html>
<div id="demo"></div>
<script>
function getPosts(json) {
var list = [];
var data = json.feed.entry;
for (var i = 0; i < data.length; i++) {
var img = data[i].media$thumbnail ? "<img src'" + data[i].media$thumbnail.$t + "'>" : "";
list.push("<div><a href='"+ data[i].link.pop().href + "'>" + img + data[i].title.$t + "</a></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>
</html>
但是它仅给出了帖子的链接，如下所示:
But it gives just the links of the posts as this:
teste3
teste 2
Teste
非常感谢
推荐答案
首先，您需要允许完整的feed才能获取第三方图片并发布内容
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
然后尝试以下操作:(需要完整的Feed)
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>
这篇关于如何获取博客文章提要并将其合并到HTML5页面中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
