如何获取博主帖子提要并将其合并到 HTML5 页面？答案

【问题标题】：How to get the blogger posts feed and to incorporate it to an HTML5 page?如何获取博主帖子提要并将其合并到 HTML5 页面？
【发布时间】：2019-12-10 21:57:03
【问题描述】：

我正在尝试从博主那里获取数据并将其放在 HTML 页面上。代码HTML代码如下：

<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>

生成页面的以下部分：

我想将此代码中的数据替换为博主内容...所以我正在获取博主的链接。

我必须获取帖子的图片缩略图、帖子的名称、帖子的链接和帖子的描述，以便放在这个 html 代码上。

从博主那里获取数据的代码如下：

<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>

但它只提供帖子的链接，如下所示：

teste3
teste 2
Teste

非常感谢

【问题讨论】：

标签： javascript html blogger

【解决方案1】：

首先，您需要允许完整提要才能获取第三方图片和发布内容

转到设置 > 其他 > 站点供稿 > 允许博客供稿并选择完整然后保存设置

然后试试这个：（需要完整的提要）

<!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>

【讨论】：

请允许我的回答中解释的完整提要！
我收到此消息“angelribeirocomp.blogspot.com/feeds/posts/full 指定的提要未启用”
现在试试我更新了我的答案。我用querySelectorAll 代替querySelector :)
另外，您可以通过更改substr(0, 120)中的字符数来控制摘要长度
如何获取帖子的日期和作者？