Начните работать с Craft CMS

Craft CMS создана талантливыми людьми из Pixel & Tonic. Он активно поддерживается и поддерживается в соответствии с изменениями в современном мире веб-разработки и набирает популярность среди CMS — с впечатляющим списком клиентов, таких как Netflix. У него также есть очень активный сервер Discord, который вырос до более чем 5000 участников всего за год существования.

Зачем использовать Крафт CMS?

Craft CMS была нашей любимой CMS уже около четырех лет; мы создали клиентские веб-сайты и даже собственный бизнес на Craft. Как компания, мы постоянно проверяем рынок CMS и всегда возвращаемся к Craft. Итак, давайте рассмотрим причины, по которым мы выбрали Craft CMS среди других на рынке:

• Знакомство с интерфейсом, что делает его довольно простым для всех, кто перешел с WordPress.
• Активное сообщество разработчиков.
• Гибкие поля, дающие вам контроль над структурой вашего контента.
• Никаких блокировок и ежемесячных платежей. Просто единоразовая плата, если вы переходите на Pro/eCommerce.
• Расширяемость с растущим магазином плагинов Craft.

Итак, закончив введение, я собираюсь показать вам, как начать работу с полностью настроенной локальной средой Craft CMS примерно за пятнадцать минут. После того, как мы выполнили следующие шаги, у вас должна быть отличная основа для начала вашего следующего веб-проекта, и, надеюсь, вы будете готовы навсегда отказаться от WordPress.

Установка нашей среды разработки

Craft CMS поставляется с очень удобным инструментом для настройки локальной среды. Этот инструмент называется Craft Nitro и упрощает настройку среды Craft CMS. Это новинка для Craft сцены, но очень помогает.

Настройка многопроходного режима

Для Craft Nitro требуется что-то под названием Multipass, которое создает виртуальную машину Ubuntu в вашей системе. (Не волнуйтесь, вам не нужно будет настраивать или когда-либо открывать Ubuntu.)

• Загрузите последнюю версию установщика Multipass для вашей операционной системы с официального сайта.
• После загрузки запустите установщик. Когда это будет завершено, вы должны быть готовы перейти к следующему шагу.
  

Настройка Craft Nitro

Установка Craft Nitro проста и включает в себя один сценарий командной строки для установки на macOS и Linux, но для Windows все немного по-другому. Ниже я расскажу, как настроить его для обоих типов операционных систем. Хорошей новостью является то, что после настройки все будет готово, и вы сможете легко создавать новые установки Craft, не повторяя это снова.

Установка на macOS и Linux

Откройте терминал и вставьте следующую строку скрипта. После вставки следуйте подсказкам параметров в командной строке, чтобы создать виртуальную машину с предустановками, которые есть в Craft Nitro. Это должно быть прекрасно, но если вы хотите тонкой настройки, сделайте это. Просто имейте в виду, что Craft имеет минимальные требования для бесперебойной работы.

Запустите следующую строку в Терминале:

 bash <(curl -sLS https://installer.getnitro.sh)

Установка на Windows 10 Pro

Установка в Windows довольно сложна, но установка и запуск не должны занимать слишком много времени. Просто убедитесь, что у вас включен Hyper-V. К сожалению, Hyper-V нельзя установить в версии Windows Home Edition.

1. Убедитесь, что Hyper-V включен (подробнее здесь);
2. Скачать nitro_windows_x86_64.zip из последней версии;
3. Создайте папку Nitro в своей home папке, если она еще не существует (например, C:\Users\<username>\Nitro );
4. Извлеките zip-файл и скопируйте nitro.exe в папку Nitro, которую вы только что создали в своей домашней папке;
5. Если это ваша первая установка, запустите ее из командной строки, чтобы добавить Nitro к вашему глобальному пути:
   

    setx path "%PATH%;%USERPROFILE%\Nitro"

6. Запустите терминал Windows ( cmd.exe ) с правами администратора и запустите в нем Nitro.

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

Установка Крафт CMS

На данный момент мы установили Craft Nitro и создали нашу виртуальную машину, и теперь мы готовы установить Craft CMS. В следующих инструкциях мы собираемся загрузить Craft и «смонтировать» наши файлы, что позволит нам разрабатывать в нашей текущей системе и увидеть изменения, отраженные в нашей виртуальной машине Ubuntu. Мы также собираемся настроить нашу исходную базу данных и получить локальный домен, который мы сможем использовать, например, myfancyproject.test. Давайте идти:

Создание нового проекта

1. Создайте новую папку, в которой вы хотите разработать/установить Craft;
2. Загрузите Craft CMS из последней версии (через Composer или Zip);
3. Разархивируйте/переместите содержимое в папку, которую мы только что создали;
4. Открытый терминал/командная строка;
5. Заходим в нашу созданную папку. $ cd /path/to/project ;
6. Запустить nitro add ;
7. Следуйте подсказкам командной строки на экране. (Предварительные настройки обычно хороши, но вы можете изменять их по своему усмотрению.)

Совет . Если вы видите проблемы «Не читается» в macOS, то Multipass должен иметь полный доступ к диску. Для этого убедитесь, что multipassd отмечен в Системных настройках → Безопасность и конфиденциальность → Конфиденциальность → Полный доступ к диску.

Подключение к нашей базе данных

Теперь у нас должен быть тестовый домен и смонтированы файлы нашего проекта — я знаю, пока это довольно просто, и это самая трудная часть. Для подключения к нашей базе данных нам необходимо добавить данные базы данных для нашего вновь созданного сайта в файл .env нашего проекта.

1. Откройте файл .env нашего проекта (находится в корневой папке);
2. Измените данные базы данных на следующие:
   

    DB_USER="nitro" DB_PASSWORD="nitro" # 'nitro' is the default database DB_DATABASE="nitro"

Совет : Если вы хотите открыть базу данных в выбранной вами программе SQL, все, что вам нужно сделать, это запустить nitro info в командной строке, и вы увидите IP-адрес своей базы данных под «IPV4». Используйте указанное выше имя пользователя и пароль (вместе с портом, который вы выбрали во время установки) для подключения.

Установить Крафт CMS

Мы настроили нашу виртуальную машину, установили тестовый домен и подготовили нашу базу данных к работе. Теперь пришло время установить Craft CMS и перейти в раздел администратора — отсюда все должно пройти гладко. Итак, давайте приступим к делу.

1. Перейдите к тестовому домену, который вы установили во время установки, а затем /admin (например testdomainyouset.test/admin );
2. Вы должны увидеть экран установки Craft CMS ( Ура! );
3. Следуйте инструкциям установщика на экране;
4. После завершения вы должны быть перенаправлены в новую панель администратора.

Совет . Если вы не устанавливали Craft через Composer, вам может быть предложено ввести ключ безопасности. Чтобы сгенерировать криптографически безопасный ключ, используйте менеджер паролей, например 1Password/LastPass. (Ограничения по длине нет, поэтому он может быть настолько сложным, насколько вы хотите). Откройте наш файл .env еще раз, найдите следующую строку SECURITY_KEY="" , вставьте сгенерированный ключ в кавычки и сохраните.

Теперь у вас должна быть полностью настроенная локальная среда разработки для Craft CMS, которая послужит отличной отправной точкой для всего, что вы пытаетесь разработать, будь то перенос вашего кошачьего блога из WordPress или создание магазина электронной коммерции. Просто не забудьте выключить сервер после завершения, используя nitro stop в командной строке.

Вот несколько полезных команд для Craft's Nitro, которые помогут вам во время разработки:

• nitro start (запускает сервер разработки)
• nitro stop (останавливает сервер разработки)
• nitro context (показывает информацию об установленных средах)
• nitro info (информация о текущей среде, версии PHP и т.д.)

Настройка нашего кошачьего блога

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

Контентные модели звучат пугающе, но в Craft все наоборот; есть простая в использовании система графического интерфейса — здесь нет необходимости в сложном коде! Для нашего кошачьего блога нам нужно создать раздел под названием «Кошки», в котором нужно имя кошки, фото и небольшое описание, а затем одну страницу «Домашняя страница».

Как создать разделы и страницы Как создать пост с котом

Как создавать разделы и страницы

Мы собираемся создать наш раздел «Кошки» и нашу домашнюю страницу, которая будет классифицирована как «одиночная» на языке Craft. Разделы — это именно то, на что они похожи — разделы вашего веб-сайта, а страницы также говорят сами за себя, это отдельные страницы вашего веб-сайта, такие как юридические документы и наша домашняя страница.

Создание раздела «Наши кошки»

1. Зайдите в «Настройки» в меню слева;
2. Нажмите «Разделы»;
3. Нажмите «Новый раздел»;
4. В поле «Имя» поставить Cats ;
5. Тип сечения Channel
   ( Каналы используются для потоков похожего контента, как у наших кошек. )
6. В «Entry URI Format» мы собираемся убедиться, что это /cats/{slug} ;
7. Внутри «Шаблона» мы поместим cat ;
8. Сохранять.

Выше мы сказали Craft, что мы хотели бы, чтобы любой пост в разделе «Кошки» имел URL-адрес в следующем формате: ourtestdomain.test/cats/fluffy , а шаблон, который мы хотели бы использовать, cats.twig .

Создание нашей домашней страницы

1. В разделе «Разделы» нажмите «Новый раздел»;
2. В поле «Название» укажите « Homepage »;
3. Тип секции Single ;
4. Установите флажок «Главная страница»;
5. Внутри «Шаблона» мы поместим index ;
6. Сохранять.

Создание полей

Ремесло приходит без предубеждений относительно того, что вы хотите построить; это дает вам совершенно чистый лист. Мы создаем именно то, что мы хотим, чтобы структура нашего поста была путем создания наших собственных «Полей». Создадим нашему коту «Поля» по имени, описанию и фото.

1. Перейдите в раздел администратора вашего сайта, посетив yourchosendomain.test/admin ;
2. Перейдите в «Настройки» в меню слева;
3. Нажмите «Поля»;
4. В правом верхнем углу нажмите «Новое поле».

Настройка имени кошки

Нам понадобится имя для наших кошек, поэтому давайте создадим поле name .

• В названии укажите «Кошачье имя»;
• Выберите «Обычный текст» в поле «Тип»;
• Теперь Сохранить.
  

Настройка описания кота

Нашим кошкам тоже нужно описание, но давайте ограничим количество символов, которые наши авторы могут ввести для каждой кошки.

• Нажмите «Новое поле» еще раз;
• В названии указать «Описание кота»;
• Снова выберите тип поля «Обычный текст»;
• Создайте ограничение, добавив «2000» в поле «Ограничение поля»;
• Щелкните Сохранить.

Настройка фото кошки

Мы собираемся добавить фотографии в каждый из наших постов о кошках, и у каждой кошки может быть несколько фотографий — не проблема. Но перед созданием поля нам нужно указать Craft, где мы хотим, чтобы фотографии хранились на нашем сервере. (У Craft также есть возможность загрузки в решения для облачного хранения.)

• Перейдите в «Настройки» в меню слева;
• Нажмите «Активы»;
• Нажмите «Новый том»;
• В названии поставить «Фото кота»;
• Включите «Активы в этом томе имеют общедоступные URL-адреса»;
• В «Базовый URL» поместите @web/uploads/ ;
• В «Путь к файловой системе» @webroot/uploads/ ;
• Сохранять.

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

Сопоставление поля с разделами

Теперь, когда наши поля и разделы настроены и работают, нам нужно объединить их вместе, назначив поля, которые мы хотели бы иметь в наших разделах. Это так же просто, как перетаскивание в Craft.

• Перейдите в настройки;
• Нажмите «Разделы»;
• Теперь нажмите «Редактировать тип раздела»;
• Теперь щелкните наш раздел «Кошки»;
• Выберите вкладку «Поля» в правом меню;
• Перетащите поля «Кошки», которые мы ранее создали, на панель содержимого;
• После перетаскивания сохраните раздел «Кошки».

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

Как создать пост с котом

Теперь пришло время создать пост с пушистым котом. Перейдите в «Записи» в левом меню администратора.

• Нажмите «Новая запись»;
• В выпадающем списке выберите «Кошки»;
• Создайте свой пост! ( Чем пушистее, тем лучше. )

Список наших статей о кошках

Теперь, когда у нас есть модель контента, мы можем приступить к созданию базового интерфейса для нашего кошачьего блога. Крафт написан на языке Twig/Liquid. Если вы когда-либо занимались разработкой Shopify, это должно быть вам знакомо; если нет, то подобрать довольно легко. Но сначала нам нужно открыть нашу папку установки Craft в нашем любимом редакторе кода (куда вы распаковали установку Craft).

1. Откройте Craft Install в редакторе кода;
2. Создайте новый файл в шаблонах с именем index.twig
   ( Возможно, Craft установил индекс по умолчанию. Вместо этого откройте его и сотрите его. )
3. Добавьте следующий код:

 <!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml" lang="en-US"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> {# Create an entry query with the 'section' and 'limit' parameters #} {% set myEntryQuery = craft.entries() .section('cats') .limit(10) %} {# Fetch the entries #} {% set entries = myEntryQuery.all() %} {# Display the entries #} <div class="container"> <div class="row"> {% for entry in entries %} <div class="col"> <article class="card"> {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} <div class="card-body"> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> <h2>{{ entry.catsName }}</h2> <p>{{ entry.catsDescription }}</p> <a class="btn btn-primary" href="{{ entry.url }}">View {{ entry.catsName }}</a> </div> </article> </div> {% endfor %} </div> </div> </body> </html>

В приведенном выше коде мы сообщаем Craft о нашем разделе «Кошки» и устанавливаем ограничение на сообщения до 10. Затем мы получаем записи из этого раздела и продолжаем перебирать каждую из кошек в записях выборки в следующем коде. . Изображения в Craft немного отличаются: они хранятся в виде массива, поэтому мы делаем еще один цикл в нашем коде, чтобы получить изображения кошек.

Давайте проверим

Откройте URL-адрес тестовой разработки, который мы создали во время установки. (Убедитесь, что ваш нитро-сервер запущен с помощью nitro start ). Теперь мы должны увидеть созданные нами сообщения, отображаемые на нашей индексной странице. Если щелкнуть, чтобы увидеть больше информации, мы получим ошибку 404, поэтому давайте исправим ее дальше!

Совет : мы включили Bootstrap, чтобы он выглядел немного красивее, но не стесняйтесь включать любой фреймворк, который вам нравится.

Страница сообщения о коте

Мы собираемся сделать то же самое, что и со страницей index. Давайте создадим шаблон cat , создав новый файл в папке Templates с именем cat.twig . Поскольку мы уже находимся в контексте Entry , нам не нужно повторно запрашивать его.

 <html> <body> {% block content %} {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} {{ entry.title }} {{ entry.catsName }} {{ entry.catsDescription }} {% endblock %} </body> </html>

Сохраните это и обновите наш веб-сайт разработки тестов. Теперь мы должны быть в состоянии перейти на страницу входа наших кошек! Вуаля!

Безголовый

Если вы хотите использовать Craft более технически и использовать его в качестве системы управления контентом для загрузки в ваше веб-приложение, вы можете сделать это с помощью пакета Craft CMS Pro, который добавляет учетные записи пользователей и GraphQL в вашу конфигурацию. Pro-версия Craft бесплатна для пробной версии и тестирования, что означает, что вы можете тщательно протестировать ее перед фиксацией. Теперь мы рассмотрим, как настроить базовый API GraphQL с помощью встроенного в Craft редактора GraphQL.

Начать профессиональную пробную версию

После того, как вы установили Craft CMS, перейдите в «Магазин плагинов» и найдите «Обновить» в параметрах меню слева. Нажмите «Пробная версия» в разделе «Pro» и запустите процесс обновления.

Базовая установка

После того, как вы запустили пробную версию Pro Craft CMS, вы должны заметить новый пункт меню на боковой панели администратора: GraphQL. Прежде чем мы перейдем непосредственно к делу, нам нужны модели контента, которые могут формировать выходные данные. Когда вы создадите свои модели контента, Craft CMS автоматически создаст вам GraphQL API из коробки. Также нет необходимости определять схемы!

Создайте конечную точку API Cat

Мы отсортировали наш контент; теперь мы хотим создать конечную точку, чтобы мы могли получать весь наш контент с милыми кошками. Давайте сделаем это сейчас:

1. Откройте файл route.php вашего проекта Craft CMS в вашей среде IDE.
2. Добавление следующего правила сделает вашу конечную точку API доступной по адресу https://yourprojecturl.test/api :
   

    return [ 'api' => 'graphql/api', // ... ];

3. Сохранить и закрыть.
4. Протестируйте, пропинговав конечную точку:
   

    curl -H "Content-Type: application/graphql" -d '{ping}' https://yourprojecturl.test/api

5. В ответ вы должны получить «понг».

Включите свой контент

Мы настроили нашу конечную точку для получения запросов. Пришло время включить/отключить определенные части нашего сайта, которые мы хотели бы сделать доступными через наш API. Например, вы можете отключить определенные записи, содержащие конфиденциальную информацию. Крафт делает этот процесс чрезвычайно простым; это случай галочки/снятия галочки. (Вы также можете усложнить схему, написав свои собственные схемы.) Сейчас мы создадим общедоступную общедоступную схему. Вы можете создавать частные схемы, для которых требуется секретный ключ, но это выходит за рамки данного руководства.

1. Перейдите в раздел GraphQL через боковую панель панели администратора;
2. Нажмите «Общая схема»;
3. Активируйте раздел «Кошки».
   ( Это сделает наш контент доступным через вашу конечную точку. )
4. Сохранять.
   

Тестирование нашей конечной точки

Теперь, когда мы выбрали данные, которые хотим сделать доступными через нашу конечную точку, пришло время протестировать их. В раскрывающемся списке GraphQL на левой панели администратора вы увидите элемент под названием «GraphiQL». GraphiQL позволяет нам исследовать наш API и запрашивать его на нашей панели инструментов.

1. Откройте GraphiQL;
2. Измените «Полную схему» на «Общую схему»;
3. Напишите следующий запрос GraphQL на левой панели:
   

    query ($section: [String], $orderBy: String) { entries(section: $section, orderBy: $orderBy) { title slug id } }

4. Нажмите кнопку «Играть».

Совет : если вы не на 100 % используете запросы GraphQL, это не проблема; Craft поставляется с удобным руководством, которое поможет вам.

Подведение итогов

Мы сделали довольно легкое погружение в мир Craft CMS. Подытожим наши достижения в следующем руководстве:

• Настроить локальную среду разработки с помощью Multipass;
• Создал и настроил новую установку Craft;
• Добавлен тестовый домен, в котором мы можем получить доступ к нашей установке;
• Создал милый кошачий блог;
• Пропал без головы;
• Создал конечную точку API для доступа к нашим котам.
  

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