o使用 Liquid 在 Jekyll 中嵌入 Instagram（无自定义插件）

Question

我正在尝试将 Instagram posts 嵌入到我的 Jekyll 网站上的 posts 中。我正在使用 oEmbed 方法。 Instagram 文档中的 URL 给出了一个 JSON，其中包含 HTML 的键值对，这是我想要提取的内容。

这是我正在尝试做的事情：

在 post 前文 (instagram: fA9uwTtkSN)
调用接受短代码并进行 oEmbed 调用的 include，以到达 JSON (https://api.instagram.com/oembed?url=http://instagr.am/p/{{ page.instagram }}/)
提取 HTML 键的值，并将其放入 post.

我正在尝试编写一个 include 来实现它，而不使用 Ruby plugin。

请指点？

Answer 1

将参数添加到 post 前文 instagram: BbR55zEnaQL

调用include里面的post内容：

{% include insta.html id=page.instagram %}

在 _includes/insta.html 创建包含文件：

  <script>
   function httpGet(theUrl)
   {
       if (window.XMLHttpRequest)
           {// code for IE7+, Firefox, Chrome, Opera, Safari
               xmlhttp=new XMLHttpRequest();
           }
       else
           {// code for IE6, IE5
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
       xmlhttp.onreadystatechange=function()
       {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
               {
                   createDiv(xmlhttp.responseText);
               }
       }
       xmlhttp.open("GET", theUrl, false);
       xmlhttp.send();    
   }

   function createDiv(responsetext)
   {
       var _body = document.getElementsByTagName('body')[0];
       var _div = document.createElement('div');
       _div.innerHTML = JSON.parse(responsetext)["html"];
       _body.appendChild(_div);
   }

   httpGet("https://api.instagram.com/oembed?url=http://instagr.am/p/{{ include.id }}/");
  </script>

这将包括 instagram 在 body 底部返回的 HTML 块引用。

注释

Javascript代码是Return HTML content as a string, given URL. Javascript Function

的修改版本

Answer 2

我接受了 Marcanuy 的回答并将 insta.html 替换为 Instagram 自己的嵌入代码。我将他们的 SVG 徽标提取到一个单独的文件中，并将 embed.js 位移动到我要嵌入的页面，这样它就不会被多次调用。

此外，由于我的要求是在一个页面上包含多个 post，因此我没有将 post ID 放在前面，而是将其放在 include 块本身中。

{% include insta.html id="BbR55zEnaQL" %}

这里详细说一下

http://khoparzi.com/2019-02-06-embedding-instagram-on-jekyll/

o使用 Liquid 在 Jekyll 中嵌入 Instagram（无自定义插件）

oEmbed Instagram in Jekyll using Liquid (no custom plugins)

json

jekyll

instagram-api

liquid

oembed

注释