Javascript 如何获取博客帖子提要并将其合并到HTML5页面？

我试图从博主那里获取数据，并将其放在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>

---

非常感谢

首先，为了获得第三方图像和帖子内容，您需要允许完整提要

转到设置其他站点提要允许博客提要并选择完整，然后保存设置

然后尝试以下方法：（需要完全进给）

#演示{
显示器：flex；
柔性包装：包装；
}
1.饲料站{
填充：10px；
宽度：30%；
断字：断字；
}
1.馈送站a{
文字装饰：无；
}
.馈送站img{
宽度：100%；
高度：200px；
对象匹配：覆盖；
}
函数getPosts（json）{
var列表=[]；
var data=json.feed.entry；
对于（变量i=0；i|$）/g“”）.substr（0120）+“
”；
if（数据[i].media$缩略图）{
var img=“”；
}否则{
var doc=new DOMParser（）.parseFromString（数据[i].content.$t，“text/html”）；
var imgtag=doc.querySelector（'img'）；
if（imgtag）{
var img=“”；
}否则{
var img=“”；
}
}
list.push（“+summary+”）；
}
document.getElementById（'demo'）.innerHTML=list.join（''）；
}

请允许我在回答中解释的完整提要！我收到消息“指定的源未启用”，请立即尝试更新我的答案。我使用了

querySelectorAll

instaead of

querySelector

：）此外，您还可以通过更改

substr（0，120）

中的字符号来控制摘要长度。如何获取文章的日期和作者？

<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