如何将最新的博客帖子嵌入index.html？

As the title says, is it possible to embed the latest post of my blogger to the main index.html of the website?

正如标题所说，是否有可能将我博客的最新帖子嵌入到网站的主要index.html中？

The website main page is https://my-domain.com/index.html and the blog https://blog.my-domain.com. I want to embed the latest blog post to specific place on my website's main page. i.e. main page automatically updates when I post on my blogger.

网站主页为https://my-domain.com/index.html和博客https://blog.my-domain.com。我想将最新的博客帖子嵌入到我网站主页上的特定位置。即当我在我的博主上发帖时，主页面会自动更新。

Is this possible?

这可能吗？

2 个解决方案

#1

You can use jsonp of your blog, create div like this for place of latest post <div id="latest-post"></div>

您可以使用博客的jsonp，为此创建div以获取最新帖子的位置

<script src='http://your-blog.com/feeds/posts/default?alt=json-in-script&callback=latestPost' async='async'></script>
<script>
  function latestPost(json) {
    var entry = json.feed.entry;
    for(var i = 0; i < entry.length; i++) {
      var link, title = entry[i].title.$t;
      for(var j = 0; j < entry[i].link.length; j++) {
        if(entry[i].link[j].rel === "alternate") {
          link = entry[i].link[j].href;
        }
        document.getElementById("latest-post").innerHTML += "<a href='" + link + "'>" + title + "</a>";
      }
    }
  }
</script>

#2

You could use iframes - this would simply embed the page contents in another page. For example:

您可以使用iframe - 这只是将页面内容嵌入到另一个页面中。例如：

<iframe src="http://google.com" width="800" height="800" title="Embed google.com"></iframe>

However, iframes present big security risks (for example, cross-site scripting) - avoidable but a better approach would be something like Fajar recommends (i.e grab the content from the Blogger API, decode the JSON and set your content to the values downloaded).

但是，iframe存在很大的安全风险（例如，跨站点脚本） - 可以避免，但更好的方法就像Fajar推荐的那样（即从Blogger API获取内容，解码JSON并将内容设置为下载的值）。

In future, when you ask questions on Stack Overflow, include the code that you've already tried to get you to the solution. If you don't know how to do something, research the subject and use jsfiddle or similar to prototype things.

将来，当您在Stack Overflow上提出问题时，请包含您已尝试过的代码，以帮助您解决问题。如果您不知道如何做某事，请研究该主题并使用jsfiddle或类似的原型。

#1