Вопрос:
Я попытался добавить CodePen (из codepen.io) на свою веб-страницу, но он не отображается так, как я этого хочу. Он показывает только текст: “См. Pen… on CodePen”. Добавленная фотография показывает окно вставки в CodePen.
Как я могу правильно вставить Pen, так что он полностью отображается на моей веб-странице? Извините, если это действительно глупый вопрос, я все еще полный noob в HTML.
Лучший ответ:
Чтобы использовать это локально, замените
<script async src=»//assets.codepen.io/assets/embed/ei.js»></script>
С
<script async src=»http://assets.codepen.io/assets/embed/ei.js»></script>
Зачем?
Как вы можете видеть, скрипт по умолчанию src начинается с //assets…
Они удалили протокол в URL-адресе, чтобы он автоматически соответствовал вашему. Это обычная практика, поскольку сайты https не позволяют загружать скрипты с http адресами http.
Итак, если ваш сайт использует http, скрипт будет загружен http. Если ваш сайт использует https, он будет загружен с помощью https.
Но если ваш сайт не находится на сервере и открывается протоколом file:///, он просто не найдет этот ресурс на вашем компьютере, поэтому вам нужно указать используемый протокол.
Ответ №1
Я не вижу проблемы, вам просто нужно скопировать код, который дает вам Codepen:
<p>Codepen embed:</p> <p data-height=»265″ data-theme-id=»0″ data-slug-hash=»vGNKNj» data-default-tab=»css,result» data-user=»blonfu» data-embed-version=»2″ class=»codepen»>See the Pen <a href=»http://codepen.io/blonfu/pen/vGNKNj/»>Modificar color de texto según fondo (stylus)</a> by blonfu (<a href=»http://codepen.io/blonfu»>@blonfu</a>) on <a href=»http://codepen.io»>CodePen</a>.</p> <script async src=»//assets.codepen.io/assets/embed/ei.js»></script>Ответ №2
Мне интересно, может быть, ваша страница еще не в сети. Я недавно ввел codepen на свою собственную веб-страницу, и я заметил, что не мог видеть его на своем компьютере локально, но когда я загрузил свой html на свой сервер, он был там.
Ответ №3
Вы можете вставлять Pens на другие веб-сайты с помощью нашего кода для копирования и вставки Embed. Чтобы получить код, нажмите кнопку “Вставить” в нижнем колонтитуле редактора на любой ручке. Или выберите “Вставить перо” в меню экспорта.
Это откроет Embed Builder.
Embed Builder поможет вам настроить встраивание. Ты можешь:
Выберите тему для встраивания: у нас есть две встроенные темы: Свет и Темный. Каждый CodePen также получает настраиваемую личную тему по умолчанию. Члены PRO получают неограниченные темы встраивания.
Выберите, какие вкладки будут отображаться: встроенный строитель начнет свою работу с вкладкой результатов и одной из выбранных вами кодовых вкладок. Вы можете выбрать другую вкладку кода, полностью отключить вкладки кода, чтобы максимизировать результат, или скрыть результат и увеличить вкладку кода.
Сделайте предварительный просмотр “Click-to-Load”: поставьте галочку рядом с надписью “use click-to-load”, чтобы включить версию предварительного просмотра для встроенного Pen. Предварительный просмотр включает показ статического изображения вашего Pen с кнопкой “Run Pen”. Когда ваши посетители нажмут на кнопку, ручка загрузится.
Сделайте встраиваемое редактируемое: члены PRO могут сделать свои вложения редактируемыми, так же как редактор CodePen. Вы можете узнать больше о том, как редактируемые вставки работают в нашей документации PRO Embeds.
Установите высоту вставки: перетащите панель внизу вставки, чтобы изменить ее высоту. Код Copy & Paste обновится с новой высотой.
После того, как вы закончите настройку кода для встраивания, скопируйте код из окна “Копировать и вставить код” ниже вставки предварительного просмотра. Вставьте код на свой сайт, и появится ваша вставка.
Вот пример того, как выглядит код встраивания. Это HTML:
<p data-height=»268″ data-theme-id=»0″ data-slug-hash=»ClnAe» data-user=»afkatja» data-default-tab=»result» class=’codepen’>See the Pen <a href=’http://codepen.io/chriscoyier/pen/ClnAe’>ClnAe</a> by Katja Hollar (<a href=’http://codepen.io/afkatja’>@afkatja</a>) on <a href=’http://codepen.io’>CodePen</a></p>
