У цьому посібнику ми створюємо сайт для вигаданого кафе під назвою Coffee Cafe. У цьому уроці ми додаємо на сайт CMS (content management system, система управління контентом) через CloudCannon. CloudCannon є системою керування контентом для Jekyll і статичних сайтів. Це дозволяє вашій команді або клієнтам оновлювати вміст сайту та зберегти переваги статичного сайту.
Ми опублікуємо сайт Coffee Cafe, визначимо редаговані області та зробимо їх доступними для нерозробників.
Налаштування
Почніть з реєстрації безкоштовного облікового запису на CloudCannon.
На першому екрані ви бачите адмінку, де створюєте та отримуєте доступ до сайтів на CloudCannon . Створіть сайт та назвіть його Coffee Cafe.
Для додавання файлів завантажте сайт, який ми створили на попередньому уроці, шляхом перетягування вихідних файлів у браузер. CloudCannon також підтримує синхронізацію файлів з GitHub, Bitbucket та Dropbox.
Для налаштування сайту на Jekyll, а також щоб повідомити CloudCannon використовувати для нашого сайту Jekyll , нам потрібний файл конфігурації. Створіть порожній файл з меню у верхньому правому куті та назвіть його _config.yml.
При зміні файлу CloudCannon перебудовує сайт і відразу ж розміщує його за адресою *.cloudvent.net. Клацніть на посилання вгорі, щоб переглянути реальний сайт Coffee Cafe.
Редагування вмісту
Не-розробники оновлюють вміст у CloudCannon через редаговані області, задані розробниками. Редаговані області є елементами HTML з класом editable. Щоб додати їх, відкрийте редактор коду, натиснувши index.html.
Додайте клас editable до елементів HTML, які будуть оновлювати нерозробники. Цей приклад робить весь <div> редагованим:
HTML
<div class="column third editable"> <div class="center-text"><img src="//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b5 alt="search" width="100" data-cms-original-src="/images/search.svg" /></div> <h3>Improve</h3> <p>Our customers до 20% higher on their targeted keywords</p> </div>
Цей приклад обмежує редагування деякими елементами всередині <div>:
HTML
<div class="column third"> <div class="center-text"><img src="//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b5 alt="search" width="100" data-cms-original-src="/images/search.svg" /></div> <h3 class="editable">Improve</h3> <p class="editable">Our customers rank up to 20% higher on their targeted keywords</p> </div>
Збережіть зміни та відкрийте візуальний редактор у верхньому правому куті, щоб побачити редаговані області в дії. У візуальному редакторі вміст може бути оновлений всередині жовтої рамки.
Спільне використання
Спільне використання сайту з іншими співробітниками дозволяє колективно працювати над вмістом. Перейдіть до розділу
, введіть адресу електронної пошти колеги, встановіть рівень дозволів Non-Developer та натисніть кнопку Add Share.CloudCannon надсилає електронною поштою запрошення для редагування сайту.
Після цього не-розробники входять до системи, відкривають сайт Coffee Cafe у візуальному редакторі та оновлюють редаговані області.
Вони можуть оновити заголовок сторінки та інші метадані в панелі налаштувань за допомогою кнопки налаштувань у правому верхньому куті. Документація CloudCannon містить докладні параметри для керування вступом.
Ведення блогу
Для ведення блогу перейдіть до
у лівій бічній панелі.Щоб створити нову чернетку статті, використовуйте меню
у верхньому правому куті. Нові чернетки та існуючі статті блогу відкриваються в простому в освоєнні редактора. Тут же знаходяться налаштування для збереження змін та публікації чернеток.Статус
Підказки, статус та історія змін, внесених на сайт, доступні на сторінці Status.
Робочі процеси
Робота локально хороша для розробників, оскільки ви можете використовувати існуючі інструменти. Збережіть цей процес шляхом синхронізації вашого сайту з GitHub або Bitbucket на CloudCannon і зробіть git push для публікації змін. CloudCannon бачить зміни, перебудовує сайт та публікує його у реальному часі. Коли нерозробники оновлюють вміст у CloudCannon, зміни публікуються відразу ж і фіксуються в сховищі.
У вас може бути кілька середовищ (наприклад, розробка та публікація) з гілками Git. Налаштуйте гілки Git для кожного середовища та створіть сайт CloudCannon для кожної гілки. Потім зміни зливаються в готовий сайт, все всередині CloudCannon. " rel="nofollow">CloudCannon. Вигадані співробітники оновлюють вміст без будь-якого коду. Розробники працюють локально на своїх улюблених редактора коду і відправляють зміни на Git.