Отложено загружаемые встроенные блоки с предварительным заполнением

0 ∞

Встроенные блоки с предварительным заполнением CodePen - идеальный способ дополнить документацию интерактивными примерами. С их помощью можно сохранить весь необходимый код в своем репозитории или публикации в блоге, чтобы иметь возможность обновлять демонстрационные версии и отслеживать изменения. Для начала можно настроить все в реальном Pen, а затем скопировать встраивание из Embed Builder или использовать синтаксис для создания своего собственного решения!

Превращение примеров кода в интерактивную демонстрацию - это действительно круто, но вы можете не захотеть, чтобы это происходило сразу. Давайте рассмотрим способ, позволяющий превратить блоки кода в CodePen Embed при нажатии!

Ниже приведен образец, скопированный непосредственно из Embed Builder.

<div class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="codepen" data-slug-hash="fd63b769e68be117bc6dbc2d259d002c" data-prefill='{"tags":[],"scripts":[],"stylesheets":[]}'>
  <pre data-lang="html">&lt;h1>Hello from HTML&lt;/h1></pre>
  <pre data-lang="css">html {
  background: black;
  color: white;
  text-align: center;
}

h1::after {
  content: " / CSS!";
}
</pre>
  <pre data-lang="js">document.querySelector("h1").innerHTML += " / JavaScript";
</pre></div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Создаем блоки раскрывающегося текста на HTML, CSS и JavaScript

Добавление клика для запуска

Скрипт CodePen Embed (ei.js) автоматически превращает элементы с классом codepen во встраивания при загрузке страницы. Если мы уберем этот класс, то сможем применить следующий трюк, чтобы создать кнопку Click to Run:

<div data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="codepen" data-slug-hash="fd63b769e68be117bc6dbc2d259d002c" data-prefill='{"tags":[],"scripts":[],"stylesheets":[]}'>
  ...
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<script>
// Перебираем через цикл все элементы с атрибутом `data-prefill`
Array.from(document.querySelectorAll('[data-prefill]'), ( el ) => {
  // Создаем кнопку Click to Run
  const button = document.createElement("button");
  button.innerHTML = "Click to Run";
  button.setAttribute("class", "prefill-click-to-run");
  el.appendChild(button);

  // При клике элемент превращается во встроенный блок!
  button.addEventListener("click", () => {
    el.classList.add("codepen"); // Add the codepen class back.
    window.__CPEmbed(); // Trigger the CodePen embed script to run again.
  });
});
</script>

Добавьте несколько стилей, и вы сможете получить несколько хороших блоков кода, которые при нажатии превращаются во встроенные блоки:

Подсветка синтаксиса, отложенная загрузка и многое другое!

Можно еще больше улучшить настройку с помощью подсветки синтаксиса через Prism.js, скрытия блоков кода и отложенной загрузки скрипта CodePen Embed, чтобы ваши веб-страницы были как можно более легкими!

Сочетание всех этих методов формирует легкий и эффективный способ создания по запросу встроенных блоков с предварительным заполнением!