Когда вы совершаете покупки по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Вот как это работает.
Эта статья впервые появилась в выпуск 214 журнала .net — самого продаваемого в мире журнала для веб-дизайнеров и разработчиков.
Нам, как веб-работникам, необходимо иметь портфолио, в котором будут представлены дизайны и проекты разработки наших веб-сайтов. Одной из лучших CMS для обработки такого типа контента является ExpressionEngine 2. Его гибкие контейнеры данных («каналы») и настраиваемые поля ввода позволяют использовать его для работы практически на любом веб-сайте, управляемом данными.
Установите ExpressionEngine
Чтобы следовать этому руководству, вам понадобится лицензионная копия ExpressionEngine 2. Если у вас еще нет копии, вы можете приобрести ее на сайте Веб-сайт ExpressionEngine.
EllisLab (компания, создавшая ExpressionEngine) раньше предлагала бесплатную версию, но с ExpressionEngine 2 это уже не так. Доступно несколько различных лицензий, в том числе недорогая «Лицензия фрилансера», которая позволяет вам создать веб-сайт (например, портфолио) для вашего бизнеса.
Установить ExpressionEngine очень просто с помощью мастера установки, который поставляется вместе с приложением. В качестве руководства по установке ExpressionEngine я создал бесплатное 16-минутное видео подробное описание всего, что вам нужно знать о том, как установить ExpressionEngine.
Если вы новичок в ExpressionEngine и хотите быстро освоиться, я также собрал восьмисерийная серия обучающих видеороликов, которые помогут вам создать веб-сайт ExpressionEngine на основе начало заканчиваться. Узнайте больше на mijingo.com.
Что мы построим
Наш пример сайта для этого урока — Appleseed Design Studios, которым управляет вымышленный дизайнер Джонни Эпплсид. Сайт очень простой. Существует два разных представления: домашняя страница и представление проекта. Домашняя страница представляет собой обзор недавних работ: большой недавний проект вверху и несколько второстепенных проектов ниже.
Все перечисленные проекты ведут на собственную страницу просмотра проектов. Страница просмотра проекта содержит большой снимок экрана веб-сайта и полное описание проекта, его задач и целей. С правой стороны всех страниц находится небольшая навигация, ведущая на некоторые второстепенные страницы и отзывы клиентов.
Контентные каналы
Первым шагом в создании каждого сайта ExpressionEngine является создание каналов для хранения нашего контента. На нашем веб-сайте изначально будет два канала (мы всегда сможем добавить больше позже по мере улучшения сайта): проекты и отзывы.
На панели управления ExpressionEngine выберите Админ кнопка в самом верху, наведите курсор Администрация канала а затем выбери Управление каналами. Если у вас установлена новая версия ExpressionEngine 2, вы не должны увидеть ни одного канала в списке. Нажмите на серый Создать новый канал кнопка вверху справа. Мы хотим, чтобы наши Полное название канала быть Проекты и Название канала установить как проекты. Имя в нижнем регистре, которое мы будем использовать в наших шаблонах при отображении записей проекта с помощью Записи канала пара тегов.
Нажмите Представлять на рассмотрение для создания канала. Нам нужно создать еще один канал для отзывов, которые перечислены на боковой панели сайта. Процесс тот же, что и раньше; назвать полное название канала Отзывы и название канала отзывы.
После этого у вас должно появиться два канала в списке. Управление каналами страница. Последнее, что нужно сделать: под Управление каналами, выбирать Настройки канала для каждого канала. Открой Настройки публикации на канале раздел и переключить Автоматически превращать URL-адреса и адреса электронной почты в ссылки? к Нет. Этот параметр не позволяет ExpressionEngine пытаться создавать гиперссылки с URL-адресами в наших настраиваемых полях. Теперь мы готовы создать настраиваемые поля, которые будем использовать для наполнения наших каналов контентом.
Публикация форм
Формы публикации в ExpressionEngine состоят из настраиваемых полей. Эти поля мы используем для ввода контента для каждой записи нашего канала. Настраиваемые поля объединяются в группы, и каналу назначается группа настраиваемых полей.
Выберите Админ кнопку еще раз, наведите курсор Администрация канала а затем выбери Настраиваемые поля. Прежде чем мы сможем создавать какие-либо настраиваемые поля, нам нужно сначала создать группу настраиваемых полей. Нажмите серую кнопку в правом верхнем углу, чтобы создать новую группу полей. Первая группа полей, которую мы хотим создать, предназначена для Проекты канал. Мне нравится сохранять имена каналов и групп полей одинаковыми, чтобы можно было легко узнать, какой канал принадлежит к какой группе полей. Назовите группу полей Проекты и нажмите Представлять на рассмотрение чтобы создать его.
Давайте еще раз взглянем на дизайн сайта, чтобы определить, какие данные нам нужно ввести для проекта. Глядя на просмотр.html шаблон, мы видим, что нам нужен заголовок, большое изображение, некоторый текст описания, объясняющий, что это был за проект и наша работа над ним, и, наконец, URL-адрес действующего веб-сайта, чтобы мы могли связать его с Посетите сайт текст. На нашей домашней странице нам также необходимо отображать более короткий текст описания, поэтому для этого нам понадобится поле. Всего полей пять, но нам нужно создать только четыре, поскольку для каждой записи канала в ExpressionEngine требуется заголовок, поэтому мы получаем это поле автоматически.
Загрузить пункт назначения
Первое поле, которое мы хотим создать, предназначено для большого изображения скриншота. Однако прежде чем мы сможем создать настраиваемое поле, нам необходимо создать место назначения для загрузки — место, куда загружаются изображения — для снимков экрана. Нажать на Содержание кнопку в верхней части панели управления и выберите Файловый менеджер. Справа, под Файловые инструменты, выбирать Создать новое место назначения для загрузки. Заполните форму, указав описательное имя и действительный путь к серверу (вы можете использовать /images/uploads каталог, который уже существует) и URL. Каталог, в котором вы хотите сохранить изображения, уже должен существовать, поэтому обязательно сначала создайте его на своем сервере.
Мы хотим установить еще несколько настроек, включая разрешение только изображений и настройку Максимальная высота изображения до 400 и Максимальная ширина изображения до 600. С этим набором нажмите Представлять на рассмотрение чтобы создать новое место назначения для загрузки файлов. Теперь мы можем вернуться к созданию настраиваемых полей.
Нажмите Добавить/изменить настраиваемые поля чтобы получить доступ к Область проектов группа. Нажмите на Создайте новое настраиваемое поле в правом верхнем углу, и вы должны увидеть форму. Для каждого поля есть несколько настроек. Мы пройдемся по этому пункту вместе, а остальные вы сделаете самостоятельно.
Пользовательские поля в ExpressionEngine могут относиться к полям разных типов. Существуют общие типы полей, такие как поля ввода и текстовые области, но вы даже можете иметь поле отношений или поле файла для загрузки файлов или изображений. Фактически, для изображения нашего проекта мы хотим использовать Файл тип поля. Выберите его из списка.
Метка поля — это метка формы, которая отображается рядом с полем в публиковать форма. Мы хотим, чтобы это имя было максимально понятным. Давайте использовать метку Изображение проекта. Имя поля — это то, как мы будем ссылаться на это поле в наших шаблонах; это должно быть одно слово, но может содержать подчеркивание или тире. Я предпочитаю размещать свои поля в пространстве имен, используя префикс с именем канала. Это облегчает запоминание того, какие поля каким каналам принадлежат. Вход проект_изображение для имени поля.
Для инструкций к полю кратко опишите, что следует ввести в это поле. В каждом проекте должно быть изображение, поэтому мы хотим настроить поле по мере необходимости. Мы можем оставить Порядок отображения полей установлено значение 1, поэтому поле будет отображаться первым, после заголовок поле.
Есть еще одна настройка внизу под Параметры настраиваемого поля область. При использовании Файл поле, у нас есть некоторый контроль над типом файла, который разрешено загружать. Две настройки Любой и Изображение. Мы хотим ограничить это поле только изображениями, поэтому выберем Изображение. Нажимать Представлять на рассмотрение чтобы сохранить поле. Нам все еще нужно создать поле описания проекта и поле моментального снимка проекта (для использования в Предыдущая работа область главной страницы) и поле URL-адреса веб-сайта. Вот некоторые предложения.
- Описание ПроектаТип поля: TextareaField Метка: Project DescriptionField Имя: project_descriptionRequired: YesTextarea Строков: 12
- Снимок проектаТип поля: TextareaField Метка: Project SnapshotField Имя: project_snapshotRequired: YesTextarea Строки: 3
- URL-адрес веб-сайта проектаТип поля: Метка поля ввода: Project URLField Имя: project_urlRequired: NoDefault Форматирование текста: Нет
Чтобы использовать группу настраиваемых полей, ее необходимо назначить каналу. Перейти к Админ кнопка, наведите курсор Администрация канала и выбери каналы. Сразу после Проекты канал, нажмите на Редактировать групповые назначения. Для Группа полей вариант, выбирай Проекты а затем нажмите Обновлять чтобы выполнить задание. Теперь, если вы выберете Содержание кнопка, наведите курсор Публиковать и выбери Проекты вы должны увидеть форму публикации для нашего Проекты канал. Самостоятельно создайте группу настраиваемых полей и настраиваемые поля для Отзывы канал. Мы будем использовать Заголовок Поле, которое ExpressionEngine автоматически создает для хранения имени человека, дающего отзыв. Нам все еще нужно поле для хранения фактического отзыва и одно для хранения URL-адреса человека, который дал этот отзыв.
Вот несколько предложений для других полей:
- СвидетельствоТип поля: TextareaField Метка: Testimonial Имя CopyField: testimonial_copyRequired: YesTextarea Rows: 6Formatting: None
- URL-адрес отзываТип поля: Входная метка FieldField: Testimonial URLField Name: testimonial_urlRequired: YesDefault Форматирование текста: Нет
Используя Публиковать Форма, продолжайте и добавьте четыре проекты записи и несколько отзывов на ваш сайт. Эти записи понадобятся нам в следующем разделе, когда мы начнем работать над нашими шаблонами.
Шаблоны
Прежде чем мы сможем начать воплощать в жизнь наш сайт, нам нужно сначала создать шаблоны. Нажать на Дизайн кнопку вверху, а затем выберите Менеджер шаблонов под Шаблоны.
Прежде чем мы сможем создавать шаблоны, нам нужно сначала создать группу шаблонов для их размещения. Когда это возможно, я предпочитаю организовывать группы шаблонов по каналам. Первая группа шаблонов, которая нам нужна, предназначена для проекты. Нажать на Новая группа Кнопка для создания новой группы шаблонов. В соответствии с нашим соглашением об именах мы назовем эту группу шаблонов Проекты. Оставьте остальную часть формы как есть и нажмите кнопку Представлять на рассмотрение чтобы создать группу. Вы должны увидеть выбранную группу и шаблон под названием индекс. ExpressionEngine автоматически создает шаблон индекса для каждой группы шаблонов. Даже если мы не будем его использовать, чего не будем делать в этом уроке, шаблон обязателен и не может быть удален.
Мы также хотим создать группу шаблонов под названием Сайт. При создании этой группы мы хотим обязательно отметить опцию, чтобы сделать шаблон индекса домашней страницей сайта. Теперь у вас должно быть две группы шаблонов: Проекты и Сайт. Нам нужно создать один шаблон внутри Проекты называется вид. Этот шаблон будет использоваться ExpressionEngine для отображения отдельных страниц проекта. Шаблон индекса в Сайт группа будет нашей домашней страницей.
После завершения настройки мы готовы воплотить наш сайт в жизнь. Для начала вам потребуются статические шаблоны (index.html и просмотр.html) для этой статьи. Также убедитесь, что вы загрузили CSS каталог, содержащий CSS сайта, на ваш сервер.
Начнем с домашней страницы. Скопируйте содержимое файла index.html в шаблон индекса в группе сайтов. Загрузите домашнюю страницу сайта в свой веб-браузер, и вы должны увидеть статический шаблон. Начнем с большого проекта вверху страницы. Найдите div с идентификатором Рекомендуемый сайт. Представленный сайт — это лишь последняя запись в нашем Проект канал. Мы хотим обернуть Записи канала пара тегов вокруг всего внутри этого div. Наш код будет выглядеть так:
{exp: channel: entries channel="projects" limit="1" dynamic="no"}{title}
{project_description}{/exp: channel: entries}Далее мы хотим осветить Предыдущая работа площадь, на которой расположены три предыдущих проекта. Нам нужно убедиться, что мы не включаем проект, который находится вверху страницы. Для этого мы будем использовать компенсировать параметр, который позволяет нам пропустить заданное количество записей перед отображением тех, которые мы хотим.
Посмотрите на статический HTML: вы заметите, что последний элемент списка имеет класс последний. Это необходимо для того, чтобы макет из трех столбцов отображался правильно. Мы используем только один экземпляр разметки элемента списка в нашем шаблоне, поскольку EE циклически обрабатывает и распечатывает его для каждой записи. Чтобы добавить класс к последнему элементу списка, нам нужно условие для проверки количества текущей записи и общего количества результатов. Мы сравним их, и если они совпадут, мы знаем, что это последний результат. Наш код должен выглядеть так:
Previous Work
{exp: channel: entrieschannel="projects" limit="3" offset="1"dynamic="no"}-
{project_teaser}
{/exp: channel: entries}
Прежде чем мы перейдем к проекту вид шаблон, давайте сначала осветим отзывы на боковой панели. Отзывы размечены как простой неупорядоченный список, поэтому нам нужно обернуть один элемент списка в наш Записи канала отметьте пару тегов и вставьте последние три отзыва. Мы должны использовать динамический="нет" параметр, поэтому ExpressionEngine будет отображать записи независимо от URL-адреса.
{exp: channel: entries channel="testimonials" limit="3" dynamic="no"}- “{testimonial_copy}” —
{title}
{/exp: channel: entries}
Сделав это, мы теперь можем обратить внимание на вид проекта шаблон, который находится в нашем шаблон проекта группа. Откройте статический шаблон просмотр.html и скопируйте содержимое в шаблон представления в ExpressionEngine.
Нам нужно всего лишь добавить один фрагмент кода в шаблон представления, чтобы он отображал запись портфолио, на которую мы щелкнули на главной странице. ExpressionEngine будет отображать запись на основе URL-адреса, поэтому мы можем использовать этот шаблон для каждой записи в нашем Проект канал. Код основного раздела нашей страницы (внутри сайт-портфолио div) будет выглядеть так:
{exp: channel: entries channel="projects" limit="1"}{title}
{project_description}{/exp: channel: entries}Если вы нажмете на проект на главной странице сайта, должна загрузиться страница просмотра этого проекта.
У нас готов базовый сайт-портфолио, но есть еще некоторые доработки, которые вы можете внести самостоятельно. Три страницы навигации по сайту с правой стороны еще предстоит создать. Я предлагаю вам использовать Страницы модуль в ExpressionEngine для создания этих страниц.
Вы также можете разбить свои шаблоны на части, которые можно использовать повторно. Боковая панель, разметка внутри тега head и нижний колонтитул повторно используются на каждой странице сайта. Создайте шаблон для встраивания (выражениеengine.com/user_guide/templates/embedding_templates.html) для каждой части шаблона, поэтому вам придется редактировать эту разметку только один раз.
Примеры сайтов-портфолио
Чтобы вдохновить вас и продемонстрировать, что можно сделать с помощью ExpressionEngine, давайте рассмотрим несколько примеров сайтов-портфолио, созданных на ExpressionEngine 2.
Во-первых, это Сайт Филипа Зэнгла для своего внештатного бизнеса (www.philipzaengle.com). Он использует похожую область «Недавние работы» на главной странице, чтобы выделить свои последние проекты. Наведите указатель мыши на каждое изображение, чтобы получить дополнительную информацию о проекте, и нажмите «Просмотреть проект», чтобы перейти на страницу просмотра проекта. Справа, на странице просмотра проекта, Филипп подробно описывает технологию и задачи, связанные с созданием сайта.
Еще один отличный пример сайта-портфолио, работающего на ExpressionEngine 2: Стукстудия, бельгийская студия веб-дизайна и разработки, которой управляет Эрвин Хайзер. Перейдите в раздел «Работы» на его веб-сайте, и вы увидите портфолио его работ в виде тематических исследований. Каждый кейс состоит из краткого описания выполняемой работы и серии снимков экрана.
Дополнительные примеры сайтов-портфолио (и других веб-сайтов), созданных с помощью ExpressionEngine, посетите официальный демонстрационный сайт. Шоу-ЭЭ. У вас есть чем поделиться? Отправьте это на Show-EE.
