Статьи

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

Конечный продукт
Что вы будете создавать

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

Craft CMS от Pixel & Tonic — это альтернатива 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 «На скалах» с примером темы и контентом. Этот сайт также открывает все дополнительные функции для тестирования.

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

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

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

1
2
3
cd ontherocks
chmod 777 craft/storage/
chmod 774 craft/config

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

1
2
3
4
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 для создания базы данных:

Создать базу данных MySQL ontherocks

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

Импортируйте базу данных SQL ontherocks с помощью PHPMyAdmin

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

1
nano ~/Sites/ontherocks/craft/config/db.php
01
02
03
04
05
06
07
08
09
10
11
12
13
14
/**
 * Database Configuration
 *
 * 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», которое указывает на общую папку / папку.

Отредактируйте файл / etc / hosts для разрешения ontherocks.dev для 127.0.0.1, если необходимо:

1
2
3
4
5
6
7
8
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.
##
127.0.0.1 localhost
127.0.0.1 ontherocks.dev

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

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

Обновите базу данных для Craft CMS

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

Craft Административный вход

Вот панель инструментов — немного похожа на WordPress, а?

Административная панель управления Craft Look Familiar

Вот домашняя страница «На скалах»:

Демо-сайт Craft на скалах

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

Демо-сайт Craft Happy Lager

Шаги установки точно такие же, как мы описали выше для «На скалах». Git-репозиторий должен находиться здесь:

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

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

Демо-сайт Craft О странице вверх

Ниже сгиба:

Демо-сайт Craft О странице Bottom

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

Пример Craft Demo Site Services

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

Craft Dashboard Записи - как сообщения в WordPress

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

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

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

Craft Dashboard Редактировать запись

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

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

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

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

Режим предварительного просмотра Craft Editing

Вот еще немного о Live Preview :

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

Craft Editing - готовый доступ к прошлым ревизиям

Активы изображений организованы по группам и доступны на странице Активы :

Craft Asset Management

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

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

Содержание домашней страницы в системе редактирования Craft

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
{#
    # 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-запросы по понятным путям непосредственно в определенные разделы:

Craft Dashboard Создание маршрутов для удобного отображения URL

Вот страница «Что на связи» с http://happylager.dev/index.php/work :

Демонстрационный сайт Craft Whats On Tap
Здесь вы можете увидеть, как вышеперечисленные элементы редактируются как отдельные записи в рабочем канале, упорядоченные по дате.

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

Демонстрационный сайт Craft How It Made

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{% 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 и что в этом участвует:

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
{#
 # Services entry template
 # ——————-
 #
 # This template gets loaded whenever a Work entry’s URL is
 # requested.
 # 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, посетите веб-сайт и загрузите кодовую базу. Я использую Mac OS X с MAMP для локальной разработки и тестирования.

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

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

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

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

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

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

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

Создать базу данных для CraftCMS в PHPMyAdmin

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

1
nano ./craft/config/db.php

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
 * Database Configuration
 *
 * 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.
        ‘server’ => ‘localhost’,
 
        // The database username to connect with.
        ‘user’ => ‘root’,
 
        // The database password to connect with.
        ‘password’ => ‘your-password’,
 
        // The name of the database to select.
        ‘database’ => ‘craft’,
 
        // The prefix to use when naming tables.
        ‘tablePrefix’ => ‘craft’,
 
);

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

1
2
3
chmod 744 ./craft/app
chmod 744 ./craft/config
chmod 744 ./craft/storage/

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

Craft CMS Установка Домашняя страница

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

Craft Зарегистрируйте свой аккаунт администратора

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

Craft Настройка общих настроек сайта

Вот и все:

Ручная установка завершена

Вот ваша панель еще раз:

Craft Your New Site Dashboard

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

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

Панель настроек Craft

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

Создание сайта по умолчанию без реального шаблона

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

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

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

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

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

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