Как интегрировать codepen в Notion

CodePen (ссылка на codepen. io) — это сервис, который позволяет веб-разработчикам быстро писать код в браузере и отображать его в реальном времени. Codepen достигает этого с помощью ручек, пользовательских песочниц, которые позволяют разработчику работать над своим кодом в контролируемой среде, не нуждаясь в веб-серверах и приложениях на своем компьютере. Front-end разработка — это, говоря простым языком, отображаемая часть веб-сайта, состоящая в основном из HTML, CSS и JavaScript (обычно называемая клиентом). Внутренняя разработка связана со всеми службами, которые создают функциональность самого веб-сайта (обычно называемого сервером). CodePen обычно используется как часть front-end веб-разработки и позволяет разработчику быстро написать свой код в «песочнице» (т.е. непроизводственной, безопасной) среде.

1. Вход в codepen
2. В панели управления Codepen откройте ручку, которую вы хотите интегрировать.
3. Скопируйте URL-адрес вашей ручки
4. Откройте страницу концепции
5. Введите «/» и выберите опцию «Codepen» Embed Option
6. Вставьте URL-адрес в текстовое поле «Встроенный URL-адрес
7. Измените размер по мере необходимости **.

Прежде чем мы начнем, хотите узнать больше советов по созданию концепции? Ознакомьтесь с нашей статьей, содержащей 14 ключевых советов по ссылке ниже:

Если вы хотите узнать еще больше о концепции или других приложениях, SkillShare — отличный ресурс, который стоит посетить. На Skillshare есть учебники по Concept, Evernote, Todoist, Things 3, Trello и многим другим. Более того, есть отличный курс Франческо д’Алессио по концепции, который вы можете посмотреть по ссылке ниже:

Если вы хотите научиться кодировать или хотите отточить свои навыки для получения технической работы, TreeHouse для вас. На Treehouse собрано более 1 000 видеоматериалов по темам, связанным с веб-дизайном, кодированием, бизнесом и многим другим. Кроме того, они предлагают TechDegrees — структурированные онлайн-программы, которые подготовят вас к карьере в технологической отрасли. Для получения дополнительной информации о Treehouse перейдите по ссылке ниже:

Начало работы

Войдите в систему codepen (ссылка на codepen. io). Вы должны увидеть панель управления Codepen, которая появится в окне вашего браузера. Панель управления Codepen

Откройте перо, которое вы хотите интегрировать

Как только перед вами появится панель управления Codepen, откройте ручку, которую вы хотите интегрировать.

Наша ручка

Скопируйте URL-адрес в вашу ручку

После того как вы открыли ручку, вам нужно скопировать URL-адрес ручки из вашего браузера. Скопируйте URL-адрес вашей ручки

Перейдите к концепции и открытой странице концепции

Откройте концепцию и перейдите на страницу, где вы хотите вставить ручку codepen.

Введите клавишу / для отображения контекстного меню

Выберите «Кодовое перо» из списка опций

Щелкните внутри страницы, где вы хотите разместить перо CodePen. Введите / клавишу, чтобы отобразить список опций элемента. Прокрутите вниз, пока не найдете опцию CodePen (она находится в разделе Embed of Options). Также вы можете набрать /key и запустить исключение codepen, пока это не будет единственной появившейся опцией. Выберите опцию CodePen.

Вставить в URL-адрес в поле вставки текста

Вставьте URL-копию вашего пера codepen.

Теперь на экране должно появиться всплывающее диалоговое окно. Оно будет состоять из текстового поля и кнопки с надписью Встроенная ссылка. Вставьте URL-адрес пера, в которое вы хотите встроить концепцию, в текстовое поле. Нажмите кнопку Встроенная ссылка.

Изменение размера поля

После нажатия кнопки Embed Link вы должны увидеть ручку на странице концепции. Наша внедренная ручка должна быть расширена.

Однако может показаться, что это только часть пера. Если это так, то вам нужно будет переделать его. В концепции встроенное перо создано в виде коробки с возможностью повторного присоединения с помощью регулировочных анкеров по углам коробки, а также в центре каждой стороны коробки. Наша встроенная ручка на нашей странице

Изменить размер коробки так же просто, как щелкнуть на одном из этих регулировочных якорей и перетащить его, пока размер не будет соответствовать вашим потребностям. Ваше перо готово к использованию.

Изменения, внесенные во встроенное перо, сохраняются в перо на сайте Codepen?

По моему опыту, ответ положительный. Если я вношу изменения в свое перо во встроенной версии пера, они будут отражены в онлайн-версии до тех пор, пока я вхожу в систему Codepen.

См. страницу ресурсов

По ссылке ниже вы найдете страницу наших ресурсов, на которой представлены продукты и услуги, которые мы используем каждый день, чтобы сделать что-то нужное или облегчить жизнь:

Резюме

CodePen — это хороший сервис front-end программирования для front-end веб-разработчиков, который можно использовать для создания прототипов кода в изолированной среде. Возможность быстро писать и тестировать фрагменты кода в безопасной, контролируемой среде, такой как CodePen, позволяет разработчикам сосредоточиться на кодировании без необходимости настраивать кучу серверов, чтобы получить какой-то код.

Концепция предусматривает возможность интеграции функциональности ручки CodePen. Это позволяет веб-разработчику писать и тестировать код, не покидая концепт.