Cockpit cms: GitHub — agentejo/cockpit: Add content management functionality to any site

Содержание

Не удается найти учебные пособия, примеры или рекомендации по кабине — общие сведения

AJK
30 мая 2018 г., 10:10

Привет,

впервые пробую себя в кабине Я нашел через blog.derakkilgo.com/2017/01/30/i-love-cockpit-cms/ ссылку на предположительно существующее руководство на getcockpit.com/docs# !tutorials/simple_blog

К сожалению, этой страницы больше не существует. Я думаю, это дало бы мне столь необходимую информацию о том, как подойти к кабине.

Будучи системным администратором, а не веб-разработчиком, поэтому с ограниченным опытом работы с CMS и отсутствием опыта работы с безголовыми CMS, в частности, для кабины, я не смог найти никаких руководств, рекомендаций или даже примеров на getcockpit или в сети.

Мой вопрос:
Доступен ли упомянутый выше учебник или любой другой пример или передовой опыт?

Большое спасибо с моей стороны, если вы знаете какой-либо источник информации для новичка в кабине.

С уважением,
Энди

3 лайков

Розкалнс
28 сентября 2018 г., 12:40

Не могу не согласиться. Примеров много не хватает, но, прочитав другую документацию по cms или поэкспериментировав с ней, становится немного понятнее, как ее использовать.

Например, документация Strapi просто великолепна и очень удобочитаема.

Они также предоставляют очень простую демонстрацию, которая также может открыть глаза.

И самое замечательное, что они сделали, это создали специальный репозиторий, чтобы другие могли загружать свои примеры и делиться с ними.

Лучшее, что мне удалось найти в контексте CockpitCMS, это это видео и его репозиторий от @pauloamgomes

pauloamgomes
28 сентября 2018 г. , 13:54

Вы правы, @Rozkalns, но, как вы понимаете, кабина — это в основном работа одного человека (@artur), я твердо верю, что нужно, чтобы люди, которые ее используют, начали вносить свой вклад, и документация кажется хорошей отправной точкой. Ваше предложение (демо) также очень интересно, это может быть просто репозиторий (без внешнего интерфейса и докера), предоставляющий кабину с типичным сценарием веб-сайта (предопределенные коллекции, компоненты макета и т. д.) и информацию обо всех остальных конечных точках.

4 лайков

раффаэль
2 октября 2018 г., 11:40

Доступен, но используемые функции устарели. Это было для старой ветки наследия.
https://github. com/COCOPi/cockpit-docs/blob/master/tutorials/simple_blog.md

Когда я впервые начал использовать кабину, мне пришлось

прочитать код
изменить функции из учебника
прочитать README Лайма

, прежде чем я получил какой-либо полезный вывод с помощью простого интерфейса PHP.

Подробное руководство по CMS Cockpit с приложением Nuxt.js [живая демонстрация]

Спешите? Перейдите к шагам руководства или репозиторию GitHub и живой демонстрации.

Три года назад мы попали в кроличью нору.

Мы приземлились на странном рубеже веб-разработки.

Разговоры о «статических» и «бессерверных» сайтах, выделенных API и расцветающих чудесах внешнего интерфейса были обычным явлением. JavaScript был везде. Разработчики были рады снова создавать сайты. Мы вошли во вселенную JAMstack.

В блоге мы уже обсуждали бесчисленное количество безголовых CMS для хранения контента и JS-фреймворков для его рендеринга.

Сегодня мы продолжаем изучать: 1) Cockpit CMS , CMS с первым API, рекомендованную другом, и 2) Nuxt.js , офигенный фреймворк Vue.js (с тех пор мы хотели использовать его мы влюбились в Vue).

Мы рассмотрим:

Как настроить установку CMS Cockpit и подключить ее с помощью Snipcart.
Как использовать статическую генерацию Nuxt.js для рендеринга внешнего интерфейса нашего приложения.

Результат? Полноценное приложение JAMstack: автономное управление контентом, внешний интерфейс, созданный на основе JS, и покупка через API электронной коммерции. В конце мы также добавим живую демонстрацию и репозиторий кода!

Но сначала несколько важных определений.

Ищете альтернативные инструменты для создания безголового стека? Посетите наше руководство для разработчиков по безголовой электронной коммерции!

Что такое Cockpit CMS?

Данные нашего контента будут храниться в кабине:

Cockpit — это CMS с открытым исходным кодом, управляемая API, которая позволяет вам реализовать свой сайт без компромиссов.

Разработчик Артур Хайнце создал систему, предназначенную для создания простых динамических веб-сайтов без использования WordPress, Drupal и им подобных.

Его подход, ориентированный на API (также известный как «безголовый»), позволяет управлять контентом, который отделен от рендеринга контента. Вы можете узнать больше об этом в этом учебнике по безголовым CMS.

Cockpit работает на PHP и по своей сути является CMS, ориентированной на разработчиков.

Вот некоторые из его прохладных функций:

Самостоятельный
Fast & Lightweight : пробегает на легком двигателе базы данных, не нуждается в полном SQL Server
8889. Гибко. на вашем сайте так, как вы хотите

Расширяемый : разработчики могут легко создавать свои собственные модули

Современный и простой пользовательский интерфейс

Встроенные инструменты : уценка, активы, миниатюры и т. д.

Что такое Nuxt.js?

Nuxt.js защитит наш интерфейс для этого.

В последнее время у нас была возможность много поиграть с Vue.js, и мы, естественно, были заинтригованы средой приложений Vue, которой является Nuxt.

Вкратце, Nuxt позволяет создавать универсальные приложения Vue.js, в которых ваш JavaScript может выполняться как на клиенте, так и на сервере.

Его основной задачей является рендеринг пользовательского интерфейса при абстрагировании от распределения клиент/сервер.

Вдохновленный Next.js React, Nuxt — это решение для создания приложений SSR (Server Side Rendered) Vue. Он также довольно хорош для создания статических сайтов благодаря своей команде generate .

А вот как на самом деле работает это маленькое чудо:

Процесс рендеринга Nuxt.js [источник]

Недавно мы видели подробные примеры и руководства по Nuxt.js (здесь и здесь). В этом мы увидим, как может работать реальная интеграция Nuxt. js с API-first CMS.

Учебник Cockpit CMS с Nuxt.js и Snipcart

Предварительные условия

Перед созданием нашего замечательного демо-магазина косплей (да, это верно), вам понадобятся:

Если вы размещаете Cockpit локально

PHP> = 5,4

PDO с поддержкой SQLite (или MongoDB)

расширение GD.0005

Аккаунт Snipcart (навсегда бесплатно в тестовом режиме)

1. Установка Cockpit CMS

Перейдите на страницу загрузки CMS. Здесь мы будем использовать «официальную версию», чтобы избежать нестабильных функций.

Я установлю Cockpit на свой экземпляр. Затем к нему можно будет получить доступ с помощью cockpit.local и общедоступного веб-сайта с помощью snipcart-shop.local .

После завершения установки перейдите по адресу cockpit.local/install , чтобы закончить.

Если вы собираетесь запустить эту установку в реальном времени, вам следует изменить свое имя пользователя и пароль .

2. Создание продуктов для продажи с помощью Snipcart

Сначала мы создадим продукты в нашей CMS.

Начать новую коллекцию под названием Продукт . Коллекция — это способ хранения всего содержимого структуры данных. Это своего рода хлеб с маслом Cockpit CMS; в этом разделе выполняется много операций.

В эту коллекцию добавляем следующие поля:

Поле текст с именем Имя .

Поле текст с именем Описание .

Поле носитель с именем Изображение .

Поле текст имя Цена .

Теперь нам нужно сгенерировать ключ API для использования сервисов Cockpit. Для этого перейдите в «Настройки» (меню-гамбургер, верхний левый угол), затем «Основные» > «API» > «Создать токен API».

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

КАПИТАН АМЕРИКА - ЩИТ капитан_Америка_Щит. png 99,99 В натуральную величину, точная копия печально известного щита Капитана Америки. Изготовлен из настоящей стали. Этот предмет сделает вас самым патриотичным косплеером в городе.

ЧУДО-ЖЕНЩИНА - ПОВЯЗКА НА ГОЛОВУ WW-Повязка на голову.jpg 49,99 У нас есть вещи и для девушек! Повязка на голову Чудо-женщины из версии 2017 года. Блестящий, удобный и КРУТОЙ.

ДЭДПУЛ - ПОЛНЫЙ КОМПЛЕКТ Дэдпул-полный комплект.jpg 2490,99 100% кожа, все элементы в комплекте. Для настоящих косплееров этот комплект точно сделает вас королем Comic-con. или любой другой ботаник фестиваль там.

Для этой демонстрации мы установили Cockpit на бесплатный сайт Azure. Его было очень легко настроить: мы отправили наш код на GitHub и включили автоматическое развертывание Git в Azure.

3. Использование и понимание Nuxt.js

Для самого магазина, ориентированного на клиента, мы углубимся в Nuxt.

Во-первых, я должен сказать, что мне понравилось работать с Nuxt. Это очень просто, у них аккуратная документация, и, как вы уже знаете, сейчас у нас медовый месяц с Vue.js.

Первое, что нужно сделать, это установить Nuxt и создать шаблон для нашего проекта. Нам нужно установить vue-cli . Если у вас его нет, запустите: npm install vue-cli -g .

Затем мы создадим проект с помощью начального шаблона Nuxt:

vue init nuxt/starter cd <имя-проекта> npm install

Вот и все для установки. Вы можете запустить сервер разработки, используя:

npm run dev

Ключевые концепции Nuxt.js

Давайте немного поговорим о том, как работает Nuxt. Первое, что нужно понять, это страниц . Страница в Nuxt — это что-то вроде маршрута . Это компонент Vue, который будет автоматически добавлен в маршруты приложений. Например, в файлах по умолчанию у вас есть этот компонент: pages/index.vue . Этот компонент будет отображаться, когда вы нажмете корневой URL-адрес вашего приложения по адресу http://localhost:3000 (если вы используете сервер разработки).

Если вы хотите создать страницу продуктов, вы можете добавить компонент с именем products.vue в папке страниц , и тогда вы получите рабочий URL: https://localhost:3000/products .

Nuxt автоматически позаботится о маршрутизации; вам не нужно регистрировать маршруты или что-то еще. Компонент будет смонтирован мгновенно, и вы даже сможете с его помощью отрендерить статически сгенерированный сайт. Мы сделаем это позже в учебнике.

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

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

Последнее, что мы рассмотрим, это файл nuxt.config.js . Это позволяет вам определить, какие библиотеки или CSS вы хотите включить глобально, и многое другое.

При необходимости вы также можете добавить свои собственные параметры конфигурации. Это то, что мы сделаем в первую очередь с настройками Cockpit. Мы будем использовать их при вызове Cockpit CMS API для получения данных о продуктах.

Настройка Nuxt.js

Откройте nuxt.config.js и добавьте:

env: { кабина: { apiUrl: 'https:///index.php/rest/api', apiToken: '', baseUrl: 'https://' } }

Мы заменим на наш собственный URL и на токен API, который мы сгенерировали в Cockpit.

Теперь у вас есть доступ к этим переменным среды на ваших страницах.

Создание нашего макета

Перед созданием первой страницы нам нужно внести некоторые изменения в макет. Помимо страниц и компонентов , в Nuxt также есть концепция макетов. Считайте это «главной» страницей. Эта страница должна содержать специальный тег: .

Мой выглядит так: