Начало работы с Craft CMS

8 января 2018

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

Что такое Craft CMS?

Pixel & Tonic's Craft CMS - это альтернатива WordPress для разработчиков, ориентированных на развитие, которые хотят более глубокого контроля и повышения производительности своих инструментов управления контентом. Это также потенциальный вариант для консультантов и разработчиков для расширения клиентских предложений.

Craft не является строителем сайта - вам нужно создать свой HTML, CSS и JavaScript вручную, используя шаблоны Twig. Это не будет пугающим для тех, кто используется для создания тем WordPress. Для других, к сожалению, в настоящее время нет официальной темы или рынка плагинов (хотя я бы не удивился, если появится в будущем). Но Craft построен с исключительной масштабируемостью и предлагает собственные функции для сложных отношений управления контентом.

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

Craft написан на PHP на мощной платформе Yii 1.x. Если вы не слышали об Yii, вы можете прочитать мое введение в Yii Framework в Tuts +. Вам не нужно знать PHP или Yii, чтобы использовать Craft. Это похоже на инструменты CMS, созданные на Django, написанные на Python.

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

Вы можете просмотреть демонстрацию сайтов, на которых работает Craft.

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

Установка демонстрационного сайта Craft's The The Rocks

Во-первых, давайте установим демонстрационный сайт Craft's On The Rocks с образцом темы и контента. Этот сайт также открывает все функции премиум-класса для тестирования.

Я использую Mac OS X с MAMP. Мои локальные сайты работают в каталоге ~ Sites. Позвольте вам клонировать демонстрационный сайт Craft из Github:

git clone https://github.com/pixelandtonic/ontherocks.git

Затем давайте установим права на файлы для внутренних каталогов Craft:

cd ontherocks
chmod 777 craft/storage/
chmod 774 craft/config

Затем давайте обновим последнюю сборку Craft. В феврале 2015 года я использовал версию 2.3.2627. Тем не менее, вы можете найти самую последнюю на странице «Обновления» на веб-сайте Craft.

curl -L http://download.buildwithcraft.com/craft/2.3/2.3.2627/Craft-2.3.2627.zip -o /tmp/Craft.zip
unzip /tmp/Craft.zip -d BaseCraft
cp -R BaseCraft/craft/app craft/app
rm -R BaseCraft && rm /tmp/Craft.zip

Затем я использовал PHPMyAdmin для создания базы данных:

Нажмите на базу данных ontherocks в PHPMyAdmin. Затем нажмите «Импорт» и выберите файл в ~ Сайтах ontherocks SQL ontherocks.sql:

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

ano ~/Sites/ontherocks/craft/config/db.php
<br>/**
 * Database Configuratio
 *
 * All of your system's database configuration settings go in here.
 * You can see a list of the default settings in craft/app/config/defaults/db.php
 */
return array(
        'server'      => 'localhost',
        'user'        => 'rocks_user',
        'password'    => 'yourpassword',
        'database'    => 'ontherocks',
        'tablePrefix' => 'craft',
);

Создайте новый виртуальный хост с именем хоста «ontherocks.dev», который указывает на общую папку.

Отредактируйте файл hosts hosts, чтобы разрешить totherocks.dev до 127.0.0.1, если необходимо:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
127.0.0.1       ontherocks.dev

Панель инструментов Craft находится по адресу http: ontherocks.dev admin. Когда вы загрузите, вы увидите что-то вроде этого: обезьяны... и глазные яблоки!

Затем вам будет предложено обновить базу данных:

Вы можете войти в систему со следующими учетными данными: Имя пользователя: admin, Пароль: пароль.

The Craft Dashboard

Вот панель инструментов - выглядит немного как WordPress, да?

Здесь находится домашняя страница On the Rocks:

Изучение демонстрационного сайта Happy Lager

Хорошие люди в Pixel & Tonic дали мне предварительный выпуск своего нового бесплатного демонстрационного сайта, который, надеюсь, будет быть доступным к тому моменту, когда вы это читаете, - клонируйте его здесь. Новый сайт называется Happy Lager:

. Шаги установки точно такие же, как описано выше для On the Rocks. Репозиторий Git должен находиться здесь:

git clone https://github.com/pixelandtonic/happylager.git

Happy Lager использует более глубокие возможности компоновки Craft. Вот пара скриншотов со страницы О:

Ниже складки:

Вот страница «Услуги»:

Страница «Записи»

Вот записи страницы на панели управления со всем содержимым из Happy Lager:

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

Синглы - это одна страница с уникальным дизайном, например домашняя страница вашего сайта. Каналы предназначены для записей, организованных по дате, таких как блог или новостные разделы. Структуры предназначены для контента, предоставляемого в предопределенном порядке.

Редактор Craft

Здесь находится страница редактирования. Обратите внимание на ширину возможных полей, которые снова настраиваются, например. Название, Лучшее изображение, Краткое описание, Заголовок, Подзаголовок, Тело статьи.

Обратите внимание ниже, как тип цитаты тяги предлагает различные макеты в потоке истории, как и последующее изображение (но я не мог включить его в скриншот):

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

Вот живой просмотр - просто красивый. Это напоминает мне предварительный просмотр Ghost's Markdown, о котором я писал в «Keep Up with Ghost 0.5 (Tuts +)». Читатели могут помнить, что я ненавижу Markdown, поэтому я очень ценю предварительный просмотр Craft:

Вот немного больше о Live Preview:

Craft предлагает легкий доступ к прошлым версиям:

The Craft Media Библиотека

Объекты изображения организованы группой и доступны на странице «Активы»:

Если вы когда-либо ждали, что WordPress загрузит вашу медиа-страницу, вы оцените, насколько быстро Craft.

Построение домашней страницы Happy Lager

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

Craft использует Шаблоны Twig для переноса элементов структурированного контента на веб-страницы:

{#
    # About template
    # -------------------
    #
    # Single about template
    #
    #
    #}
{% extends "_layouts/site" %}
{% block main %}
    <header class="alt">
        <div class="flex">
            <div class="g1-flex4 g2-flex6 g3-flex12">
                <h1 class="alpha center reverse">{{ title }}</h1>
            </div>
        </div>
    </header>
    <section class="info-hero alt">
        <div class="flex">
            <div class="g1-flex4 g2-flex6 g3-flex8 g3-offset2">
                {% if entry.infoHeroTopText %}
                <h1 class="delta reverse center subfont">{{ entry.infoHeroTopText }}</h1>
                {% endif %}
                {% if entry.infoHeroBottomText %}
                <p class="epsilon center reverse">{{ entry.infoHeroBottomText }}</p>
                {% endif %}
            </div>
        </div>
    </section>
    <section class="alt">
        <div class="flex">
            <div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
                {% if entry.firstSectionHeader %}
                <h1 class="beta center">{{ entry.firstSectionHeader }}</h1>
                {% endif %}
                {% if entry.firstSectionSubheader %}
                <p class="delta center subfont caps">{{ entry.firstSectionSubheader }}</p>
                {% endif %}
            </div>
        </div>

Типы разделов

Ремесленные сайты построены вокруг разделов, описанных выше: одиночные игры, каналы и структуры. Вот короткое видео, которое показывает типы разделов более подробно:

Вот разделы, связанные с демонстрационным сайтом Happy Lager, - обратите внимание, как каждый соответствует основной навигационной панели.

Страница «Главная страница и страница» - это синглы. Страница новостей и работы - это каналы. Страница «Услуги» - это структура.

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

Вот короткое видео, описывающее категории и теги:

Еще одна интересная особенность Предложения Craft - это возможность маршрутизировать URL-запросы дружественными путями непосредственно в определенные разделы:

Более внимательный взгляд на Happy Lager Pages

Вот страница What's On Tap из http: happylager.dev index.php work:

. Посмотрите на страницу «Услуги-как это сделать» в http: happylager.dev index.php. Это структура, элементы которой имеют предопределенный порядок.

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

Вот пример шаблона Twig для этой страницы:

{% extends "_layouts/site" %}
{% block main %}
    <header class="alt">
        <div class="flex">
            <div class="g1-flex4 g2-flex6 g3-flex12">
                <h1 class="alpha center reverse">{{ title }}</h1>
            </div>
        </div>
    </header>
    {% for entry in craft.entries.section('Services').find() %}
    <div class="flex">
        <div class="g1-flex4 g2-flex6 g3-flex12">
            <p class="delta alt">
                <a href="{{ entry.url }}">
                    {{ entry.title }}
                </a>
            </p>
        </div>
    </div>
    {% endfor %}
{% endblock %}

И вот шаблон для каждой записи. Это дает вам представление о том, как создавать шаблоны Twig для вашего сайта Craft и что нужно сделать:

{#
 # Services entry template
 # -------------------
 #
 # This template gets loaded whenever a Work entry’s URL is
 # requested. That’s because the Work section’s Template setting is
 # set to “services/_entry”, the path to this template.
 #}
{% extends "_layouts/site" %}
{% block main %}
  {% set currentUrl = craft.request.getUrl() %}
  {% set lastSegment = craft.request.getLastSegment() %}
  {% if lastSegment != 'services' %}
    <nav class="subnav">
      <div class="flex">
        <div class="g1-flex4 g2-flex6 g3-flex12">
          <ul>
            {% for entry in craft.entries.section('Services').type('servicesDetail').find() %}
            <li>
              <a href="{{ entry.url }}" class="{% if entry.url == currentUrl %}current{% endif %} subfont caps">
                {{ entry.title }}
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </nav>
  {% endif %}
  {% if lastSegment == 'services' %}
    <header class="alt2">
      <div class="flex">
        <div class="g1-flex4 g2-flex6 g3-flex12">
          <h1 class="alpha center reverse">{{ entry.title }}</h1>
        </div>
      </div>
    </header>
    <section class="alt">
      <div class="flex">
        <div class="g1-flex4 g2-flex6 g3-flex8 g3-offset2">
          {% if entry.indexHeading %}
            {{ entry.indexHeading }}
          {% endif %}
        </div>
      </div>
    </section>
    <section>
      <div class="flex">
        {% for entry in craft.entries.section('Services').type('servicesDetail').order('postDate desc').find() %}
          <div class="g1-flex4 g2-flex2 g3-flex4">
            <a href="{{ entry.url }}" class="services-entry-wrap">
              {% set image = entry.featuredImage.first() %}
              {% if image %}
                <img src="{{ image.getUrl('thumb') }}" alt="image.title"/>
              {% endif %}
              <h3 class="center">{{ entry.title }}</h3>
              {% if entry.shortDescription %}
                {{ entry.shortDescription }}
              {% endif %}
            </a>
          </div>
      {% endfor %}
    </div>
    {% else %}
      {% include "includes/articlebody" %}
    {% endif %}
  </section>
  {% if lastSegment != 'services' %}
  <section class="service-points">
    {% for block in entry.servicesBody %}
    <div class="flex">
      <div class="service-point">
        <div class="g1-flex4 g2-flex3 g3-flex4">
          <h4>{{ block.heading }}</h4>
          {{ block.text }}
        </div>
        <div class="g1-flex4 g2-flex3 g3-flex8">
          {% set photo = block.image.first() %}
          {% if photo %}
          <img class="" src="{{ photo.url }}" alt="{{ photo.title }}">
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </section>
  <section class="services-work-entry">
      {% set entries = craft.entries.section('Work').limit(1).offset(2) %}
      {% for entry in entries %}
      {% set asset = entry.featuredImage.last() %}{% if asset %}
      <div style="background-image: url('{{ asset.url }}')">
      {% endif %}
      <div class="flex">
        <div class="g1-flex4 g2-flex3 g3-flex6">
            <a href="{{ entry.url }}">
              {% set asset = entry.featuredImage.first() %}{% if asset %}
              <img src="{{ asset.url }}" alt="{{ asset.title }}" width="616" height="204">
              {% endif %}
            </a>
        </div>
        <div class="g1-flex4 g2-flex3 g3-flex6">
          <div class="summary-wrap">
            <h2 class="callout-border"><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
            <h3><a href="{{ entry.url }}">{{ entry.heading }}</a></h3>
            {% if entry.subheading %}
            <p>{{ entry.subheading }}</p>
            {% endif %}
            <p><a href="{{ entry.url }}" class="view-more hero-cta">View More</a></p>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </section>
  {% endif %}
{% endblock %}
{% block foot %}
  {{ parent() }}
  <script type="text/javascript" src="/assets/lib/shapes-polyfill.min.js"></script>
{% endblock %}

Редактирование записей

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

Каждый раздел может иметь несколько пользовательских типов записей. Например, в разделе новостей есть два разных типа записей: статьи и ссылки. Типы записей позволяют хранить различные типы контента в том же разделе.

Вот короткое видео на типах ввода:

Теперь, когда у вас есть представление о том, как работает строительство сайта в Craft, давайте установим новую версию с нуля.

Установка Craft From Scratch

Чтобы установить Craft, посетите веб-сайт и загрузите кодовую базу. Я использую Mac OS X с MAMP для моей локальной разработки и тестирования.

Craft предоставляет подробные инструкции по установке и ссылки на руководства для Mac, Laravel, Heroku и даже автоматическую установку с Composer.

Переименуйте файл htaccess:

cd ~/Sites/craftcms/public
mv htaccess .htaccess

Создайте символическую ссылку на общедоступный каталог Craft для MAMP:

ln -s ~/Sites/craftcms/public /Applications/MAMP/htdocs/craft

Если вы запускаете свою установку Craft локально из имен хостов «craft.dev» или «ontherocks.dev», у вас будет возможность переключаться между Craft Personal, Craft Client и Craft Pro бесплатно, навсегда.

Я создал базу данных через PHPMyAdmin.

Отредактируйте файл конфигурации базы данных Craft для своих учетных данных MySQL:

ano ./craft/config/db.php

Введите свои учетные данные в следующих полях:

/**
 * Database Configuratio
 *
 * All of your system's database configuration settings go in here.
 * You can see a list of the default settings in craft/app/etc/config/defaults/db.php
 */
return array(
        // The database server name or IP address. Usually this is 'localhost' or '127.0.0.1'.
        'server' => 'localhost',
        // The database username to coect with.
        'user' => 'root',
        // The database password to coect with.
        'password' => 'your-password',
        // The name of the database to select.
        'database' => 'craft',
        // The prefix to use when naming tables. This can be no more than 5 characters.
        'tablePrefix' => 'craft',
);

Настройте права на запись для этих каталогов приложений Craft:

chmod 744 ./craft/app
chmod 744 ./craft/config
chmod 744 ./craft/storage/

Посетите домашнюю страницу местного ремесла, и вы снова увидите обезьян!

Зарегистрируйте свою начальную учетную запись администратора:

Настройте свойства своего сайта:

И вот это:

Вот ваша панель управления снова:

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

Настройки сайта можно найти на панели навигации в правом верхнем углу. Это напоминает мне iOS:

Вот как выглядит ваш сайт по умолчанию Craft, когда вы начинаете:

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

С другой стороны, вы можете заметить, как быстро Craft работает по сравнению с WordPress.

Куда пойти отсюда?

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

Создание шаблона Карт Введение в плагины Стрих-вверх Craft (сторонний сайт) Каталог плагинов Straight Up Craft 's Справочник консультантов Follow @CraftCMS в Twitter

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

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

Я также хочу рассказать Брэндону Келли, владельцу Pixel & Tonic, создателям Craft. Брэндон был очень полезен в ответе на мои вопросы и дал мне предварительный просмотр своего нового демонстрационного сайта, к которому вы теперь сможете получить доступ.

Ссылки по теме

Карта сайта CMS Карт CMS видеоуроки Введение в Yii Framework (Tuts +) Тен Причины, по которым мы любим Craft Пиксель и тоник, создатели ремесла