时间戳

首页 > 解决方案 > 如何在 Jekyll 中使用插件嵌入 html？

ruby - 如何在 Jekyll 中使用插件嵌入 html？

问题描述

我有这个问题我想将html注入markdown文件（博客文章），但它有点长，所以我想要有参数的插件，因为它会改变，我可能会多次添加它。搜索inject html时，我只发现可以直接将html插入markdown文件，但我希望有一个标签可以为我做这件事，为了不重复代码，如果Codepen决定改变它也会更容易更新嵌入代码。

这是我要添加的代码，Codepen embed demo with button：

<div id="codepen">
  <button class="btn" onclick="document.body.classList.toggle('sticky')">Dock</button>
  <iframe height="265" scrolling="no" title="in browser sql terminal"
    src="//codepen.io/jcubic/embed/dVBaRm/?height=265&amp;theme-id=dark&amp;default-tab=result"
    frameborder="no" allowtransparency="true" allowfullscreen="true">
    See the Pen <a href='https://codepen.io/jcubic/pen/dVBaRm/'>in browser sql terminal</a> by Jakub T. Jankiewicz
    (<a href='https://codepen.io/jcubic'>@jcubic</a>) on <a href='https://codepen.io'>CodePen</a>.
  </iframe>
</div>

我想要参数username和id（可能还有标题和全名），创建此类插件的最简单方法是什么以及如何在我的降价文件中使用？

标签： rubyjekyll

解决方案

您不需要插件来执行此操作。

您可以使用Jekyll 包含。

example_page.html

---
layout: page
title: Codepen include example
codepen:
  author: jcubic
  name: Jakub T. Jankiewicz
  id: dVBaRm
  title: "in browser sql terminal"
---
{% include codepen.html %}

_includes/codepen.html

{% if page.codepen %}
{% assign c = page.codepen %}
<div id="codepen">
  <button class="btn" onclick="document.body.classList.toggle('sticky')">Dock</button>
  <iframe height="265" scrolling="no" title="{{ c.title }}"
    src="//codepen.io/{{ c.author }}/embed/{{ c.id }}/?height=265&amp;theme-id=dark&amp;default-tab=result"
    frameborder="no" allowtransparency="true" allowfullscreen="true">
    See the Pen <a href='https://codepen.io/{{ c.author }}/pen/{{ c.id }}/'>in browser sql terminal</a> by {{ c.name }}
    (<a href='https://codepen.io/{{ c.author }}'>@{{ c.author }}</a>) on <a href='https://codepen.io'>CodePen</a>.
  </iframe>
</div>
{% endif %}

您还可以使用参数化的包含。

{% include codepen_param.html
  author="jcubic"
  name="Jakub T. Jankiewicz"
  id="dVBaRm"
  title="in browser sql terminal"
  %}

_includes/codepen_param.html

{% assign pen = include %}
<div id="codepen">
  <button class="btn" onclick="document.body.classList.toggle('sticky')">Dock</button>
  <iframe height="265" scrolling="no" title="{{ pen.title }}"
    src="//codepen.io/{{ pen.author }}/embed/{{ pen.id }}/?height=265&amp;theme-id=dark&amp;default-tab=result"
    frameborder="no" allowtransparency="true" allowfullscreen="true">
    See the Pen <a href='https://codepen.io/{{ pen.author }}/pen/{{ pen.id }}/'>in browser sql terminal</a> by {{ pen.name }}
    (<a href='https://codepen.io/{{ pen.author }}'>@{{ pen.author }}</a>) on <a href='https://codepen.io'>CodePen</a>.
  </iframe>
</div>

像这样，您可以从您的页面调用任意数量的笔。

推荐阅读