Сайт кухонной студии с нуля
Тринадцать глав о первом сайте: ставим Eile, пишем шаблоны, заводим каталог кухонь с ценами и заявку на замер, а в конце выкладываем сайт в интернет с HTTPS.
Опыт программирования не нужен. Каждый пример кода можно скопировать целиком, а под ним разобрано, что делает каждая строка. Все примеры проверяет тест: он проходит главы по порядку на настоящей Eile.
Главы
- 1 2 минуты чтения
Что мы сделаем и что понадобится
За тринадцать глав мы соберём сайт кухонной студии «Фасад»: с каталогом кухонь и ценами, готовыми проектами, заявкой на замер и адресом в интернете. Опыт программирования не нужен: каждый шаг показан и объяснён.
- 2 4 минуты чтения
Установка и первый запуск
Поставим Eile одной командой, запустим пустой сайт и войдём в менеджер. Займёт минут десять.
- 3 4 минуты чтения
Страницы и дерево сайта
Сайт на Eile растёт как дерево: у каждой страницы есть место, адрес и номер. Создадим страницы студии и опубликуем их.
- 4 4 минуты чтения
Первый шаблон
Шаблон решает, как выглядит страница. Разберём шаблон Minimal строчка за строчкой и напишем свой: с шапкой, заголовком и спокойными цветами студии.
- 5 4 минуты чтения
Компоненты: шапка, меню и подвал
Шапку и подвал удобно держать отдельными кусочками и подключать в любой шаблон. Такие кусочки называются компонентами. Сделаем три: меню, шапку и подвал.
- 6 2 минуты чтения
Рамка: один макет на все шаблоны
Скоро шаблонов станет несколько. Чтобы не повторять в каждом шапку, подвал и стили, соберём их в рамку, а шаблоны будут класть внутрь только своё.
- 7 4 минуты чтения
Поля: цена, планировка и фото кухни
У кухни есть цена за метр, планировка и фотография. В текст их писать неудобно: цену не отсортируешь и не поменяешь в одном месте. Для таких данных у страниц есть поля.
- 8 7 минут чтения
Списки: каталог, проекты и главная
«Каталог» сам соберёт карточки кухонь с ценами, «Проекты» покажут работы по пять на странице, а главная станет витриной с кухнями и свежими проектами.
- 9 3 минуты чтения
Свои настройки: адрес и телефон в одном месте
Телефон студии нужен в подвале, на странице контактов и рядом с формой замера. Заведём его один раз в настройках, а шаблоны и тексты будут брать его оттуда.
- 10 3 минуты чтения
Форма: заявка на замер
Посетитель оставляет имя, телефон, адрес и удобную дату, а заявка приходит в менеджер и в Telegram. Соберём форму без строчки кода и поставим её на страницу контактов.
- 11 5 минут чтения
Живые части: «шоурум открыт» и калькулятор кухни
Страницы Eile готовятся один раз и отдаются из памяти мгновенно. Но кое-что должно меняться: открыт ли шоурум прямо сейчас, сколько будет стоить кухня длиной 3,4 метра. Для этого есть некэшируемые регионы и острова.
- 12 5 минут чтения
Сайт в интернете: сервер, домен и HTTPS
Пока сайт живёт на вашем компьютере. Перенесём его на сервер, привяжем домен и включим HTTPS. Понадобятся сервер на Linux и домен, остальное Eile сделает сам.
- 13 2 минуты чтения
Что дальше
Сайт студии работает. Вот что ещё умеет Eile и куда смотреть, когда захочется большего.