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

Question

我有這個問題，我想將 html 注入 markdown 文件（博客文章），但它有點長，所以我想要有參數的插件，因為它會改變，我可以添加它多次。 當搜索注入 html 時，我只發現您可以將 html 直接插入 markdown 文件中，但我想決定有一個標簽可以為我做這件事，而不是重復代碼以更容易更新代碼嵌入代碼。

這是我要添加的代碼，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 （可能還有標題和全名），創建此類插件的最簡單方法是什么以及如何在我的 markdown 文件中使用？

Answer 1

您不需要插件來執行此操作。

您可以使用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>

像這樣，您可以從您的頁面調用任意數量的筆。