Как встроить HTML с помощью плагина в Jekyll? - PullRequest
Новая
       4

Как встроить HTML с помощью плагина в Jekyll?

0 голосов
/ 05 октября 2019

У меня есть эта проблема, я хочу добавить html в файл уценки (запись в блоге), но он немного длинен, поэтому я хочу иметь плагин с параметрами, потому что он будет меняться, и я могу добавить его несколько раз. При поиске по внедрению html я обнаружил, что вы можете вставить html непосредственно в файлы уценки, но я хочу иметь один тег, который будет делать это для меня, чтобы не дублировать код, также будет легче обновить, если Codepen решит изменитьКод для встраивания.

Это код, который я хочу добавить. Демонстрация встраивания Codepen с кнопкой: 

<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 (возможно, также заголовок иполное имя), какой самый простой способ создать такой плагин и как использовать в моем файле уценки?

1 Ответ

1 голос
/ 05 октября 2019

Вам не нужен плагин для этого.

Вы можете использовать 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>

Как и выМожно вызывать любое количество ручек со своей страницы.

...