Это дальнейшее руководство по ознакомлению с Craft CMS . Если вы не знакомы с Craft, я рекомендую вам сначала прочитать первую часть. Затем вернитесь сюда и следуйте нашим инструкциям по установке и началу работы.
Что такое Craft CMS?
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’s On The Rocks
Во-первых, давайте установим демонстрационный сайт 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 для создания базы данных:
Нажмите на базу данных ontherocks в PHPMyAdmin. Затем нажмите « Импорт» и выберите файл в ~/Sites/ontherocks/SQL/ontherocks.sql
:
Затем отредактируйте файл конфигурации базы данных с учетными данными для вашей локальной базы данных 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 . При загрузке вы увидите что-то вроде этого: обезьяны … и глазные яблоки!
Затем вам будет предложено обновить базу данных:
Вы можете войти в систему со следующими учетными данными: Имя пользователя: admin, Пароль: пароль.
Панель инструментов Craft
Вот панель инструментов — немного похожа на WordPress, а?
Вот домашняя страница «На скалах»:
Изучение демонстрационного сайта Happy Lager
Приятные ребята из Pixel & Tonic дали мне предварительный релиз своего нового бесплатного демонстрационного сайта, который, надеюсь, станет доступен к тому времени, когда вы прочтете это, — клонируйте его здесь . Новый сайт называется Happy Lager:
Шаги установки точно такие же, как мы описали выше для «На скалах». Git-репозиторий должен находиться здесь:
1
|
git clone https://github.com/pixelandtonic/happylager.git
|
Happy Lager использует более глубокие возможности макета Craft. Вот пара скриншотов со страницы About:
Ниже сгиба:
Вот страница услуг:
Craft’s Entries Page
Вот страница «Записи» на панели инструментов со всем содержимым от Happy Lager:
Посмотрите на типы записей на левой панели навигации: одиночные, каналы и структуры. Craft предлагает более сложные, расширяемые типы данных, чем WordPress.
Одиночные страницы — это единственные страницы, которые имеют уникальный дизайн, такой как домашняя страница вашего сайта. Каналы предназначены для записей, упорядоченных по дате, таких как блог или раздел новостей. Структуры для контента предоставляются в предопределенном порядке.
Редактор Craft
Вот страница редактирования. Обратите внимание на широту возможных полей, которые также можно настраивать, например, заголовок, рекомендуемое изображение, краткое описание, заголовок, подзаголовок, текст статьи.
Под сгибом обратите внимание на то, что тип цитаты по запросу предлагает различные макеты в сюжете, как и изображение, которое следует (но я не могу включить все это в скриншот):
Эта возможность — то, что Craft называет « Матрица» , и она позволяет более мощную композицию и макет истории. Каждый блок может иметь настраиваемые поля и настраиваемую позицию, и его можно перетаскивать на место в потоке. Вот короткое видео, показывающее Матрицу :
Вот предварительный просмотр — просто красиво. Это напоминает мне предварительный просмотр Ghost’s Markdown, о котором я писал в Keeping Up with Ghost 0.5 (Tuts +) . Читатели могут помнить, что я ненавижу Markdown, поэтому я очень ценю предварительный просмотр Craft:
Вот еще немного о Live Preview :
Craft предлагает легкий доступ к прошлым изменениям:
Медиа библиотека Крафт
Активы изображений организованы по группам и доступны на странице Активы :
Если вы когда-нибудь ждали, пока WordPress загрузит вашу медиа-страницу, вы по достоинству оцените скорость Craft.
Создание домашней страницы Happy Lager
Вот более внимательный взгляд на содержимое частей домашней страницы Happy Lager — в частности, именно так оно и выглядит при редактировании содержимого:
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-запросы по понятным путям непосредственно в определенные разделы:
Вот страница «Что на связи» с http://happylager.dev/index.php/work :
Вот посмотрите на страницу «Услуги — как это делается» по адресу http://happylager.dev/index.php/services . Это структура, элементы которой имеют предопределенный порядок.
Каждое из полей изображения управляется записью под службами. Вы можете изменить их порядок появления с помощью перетаскивания:
Вот пример шаблона 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 с нуля
Чтобы установить 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.
Отредактируйте файл конфигурации базы данных 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 настолько ориентирован на конечных пользователей, что включает в себя контактную форму поддержки на домашней странице панели управления.
Вы можете найти настройки сайта на панели навигации в правом верхнем углу. Это напоминает мне iOS:
Вот как выглядит ваш Craft-сайт по умолчанию, когда вы начинаете:
Да, в Craft нет сообщества тем WordPress. По большей части, вы должны написать свою собственную тему. Для новичка WordPress все еще имеет преимущество.
С другой стороны, вы уже можете заметить, насколько быстро работает Craft по сравнению с WordPress.
Куда пойти отсюда?
Конечно, вы можете приступить к созданию примера контента своего сайта, но вам нужно будет узнать о темах и плагинах Craft. Вот несколько ресурсов, которые помогут вам:
- Обзор шаблона Craft
- Введение Craft в плагины
- Каталог плагинов Straight Up Craft (сторонний сайт)
- Справочник консультантов Straight Up Craft
- Следите за @CraftCMS в Твиттере
Я рекомендую вам установить Craft и изучить его возможности. Я взволнован мощью, контролем и масштабируемостью, которые Craft предоставляет в качестве альтернативы WordPress. Я также поклонник Yii, и это здорово, что инструмент CMS построен на моей любимой платформе.
Если вы хотите увидеть продолжение серии публикаций с Craft, пожалуйста, оставьте примечание в комментариях. Я также ценю ваши вопросы и комментарии и вообще отвечаю. Вы можете связаться со мной в Twitter @reifman или написать мне напрямую.
Я также хочу поблагодарить Брэндона Келли , владельца Pixel & Tonic , создателей Craft. Брэндон очень помог мне ответить на мои вопросы и дал мне предварительный просмотр их нового демонстрационного сайта, доступ к которому вы сможете получить прямо сейчас.