o使用 Liquid 在 Jekyll 中嵌入 Instagram(无自定义插件)
oEmbed Instagram in Jekyll using Liquid (no custom plugins)
我正在尝试将 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。
请指点?
- 将参数添加到 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
的修改版本
我接受了 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/
我正在尝试将 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。
请指点?
- 将参数添加到 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
的修改版本我接受了 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/