TYPO3 с нуля: Основы разработки и администрирования

Введение в экосистему TYPO3 и установка системы через Composer

Добро пожаловать в курс «TYPO3 с нуля». Мы начинаем погружение в одну из самых мощных, гибких и безопасных систем управления контентом (CMS) корпоративного уровня. Если вы когда-либо чувствовали ограничения простых конструкторов сайтов или сталкивались с проблемами безопасности в популярных массовых CMS, то TYPO3 станет для вас открытием.

В этой первой статье мы разберем, что представляет собой экосистема TYPO3, почему профессиональные разработчики выбирают установку через Composer и прошагаем весь путь от пустой папки до работающей системы.

Что такое TYPO3 и зачем его изучать?

TYPO3 — это CMS с открытым исходным кодом, написанная на языке PHP. Она существует на рынке более 20 лет и зарекомендовала себя как стандарт для сложных корпоративных порталов, сайтов университетов и государственных учреждений. В отличие от систем, ориентированных на блоги, TYPO3 изначально проектировалась с учетом иерархической структуры страниц и многоязычности.

Ключевые особенности экосистемы

Экосистема TYPO3 — это не просто программный код, это совокупность технологий, стандартов и сообщества.

Разделение на Frontend и Backend

В TYPO3 четко разделены административная часть (Backend), где работают редакторы и администраторы, и пользовательская часть (Frontend), которую видят посетители сайта. Это позволяет гибко настраивать права доступа и рабочие процессы.

Многосайтовость (Multi-site)

Одна установка TYPO3 («ядро») может обслуживать десятки разных сайтов с разными доменами, дизайном и контентом. Это колоссально экономит ресурсы на поддержку.

Расширяемость (Extensions)

Архитектура системы модульная. Существует «Ядро» (Core), которое обеспечивает базовый функционал, и «Расширения» (Extensions). Вы можете устанавливать готовые расширения из официального репозитория TER (TYPO3 Extension Repository) или писать свои собственные.

LTS и жизненный цикл

TYPO3 славится своей предсказуемостью. Версии с долгосрочной поддержкой (LTS — Long Term Support) выходят каждые 1.5–2 года и поддерживаются обновлениями безопасности в течение 3 лет (плюс возможность платной расширенной поддержки). Это критически важно для бизнеса, который не хочет переписывать сайт каждые полгода.

!Архитектура TYPO3: от сервера до интерфейса пользователя

Почему Composer — единственный правильный выбор?

Раньше CMS устанавливали, скачивая ZIP-архив, распаковывая его на сервер и загружая файлы по FTP. Забудьте этот метод. В современном мире PHP-разработки стандартом де-факто является Composer.

Composer — это менеджер зависимостей для PHP. Он позволяет:

* Автоматически скачивать нужные версии библиотек. * Следить за совместимостью пакетов. * Легко обновлять ядро системы и расширения одной командой. * Гарантировать, что на сервере разработки, тестирования и в продакшене стоит абсолютно одинаковый код (благодаря файлу composer.lock).

> Использование Composer для установки TYPO3 — это не просто рекомендация, это обязательное требование для профессиональной разработки и поддержки безопасности проекта.

Подготовка окружения

Перед установкой убедитесь, что ваш локальный компьютер или сервер соответствует минимальным требованиям. Для актуальных версий TYPO3 (v12 LTS и выше) вам понадобятся:

* PHP: Версия 8.1 или выше. * Веб-сервер: Apache (с модулем mod_rewrite) или Nginx. * База данных: MySQL 8.0+, MariaDB 10.3+ или PostgreSQL. * Composer: Версия 2.0 и выше.

Также убедитесь, что в PHP включены необходимые расширения: pdo, json, pcre, session, xml, filter, gd, mbstring, intl.

Пошаговая установка TYPO3

Давайте создадим наш первый проект. Мы будем использовать консоль (терминал).

Шаг 1: Создание проекта

Откройте терминал и перейдите в папку, где вы храните свои веб-проекты. Выполните следующую команду:

Разберем эту команду: * create-project: команда Composer для создания нового проекта из пакета. * typo3/cms-base-distribution: это официальный скелет приложения TYPO3. * :^12: указывает, что мы хотим установить последнюю стабильную версию ветки 12 (LTS). * my-typo3-site: имя папки, которая будет создана.

После запуска команды Composer начнет скачивать ядро TYPO3 и все необходимые зависимости. Это может занять несколько минут.

Шаг 2: Структура папок

После завершения установки зайдите в созданную папку:

Вы увидите структуру файлов, которая отличается от классических CMS. Давайте разберем её, так как понимание структуры критически важно.

| Папка/Файл | Описание | | :--- | :--- | | vendor/ | Здесь лежат все библиотеки, установленные Composer, включая само ядро TYPO3. Никогда не редактируйте файлы в этой папке вручную! | | public/ | Это единственная папка, которая должна быть доступна из интернета. В ней находится файл index.php (точка входа) и статические ресурсы (картинки, стили). | | var/ | Временные файлы: кэш, логи, сессии. Эту папку можно очищать, система пересоздаст нужное. | | config/ | Конфигурационные файлы системы. Здесь хранятся настройки подключения к базе данных и настройки сайтов. | | composer.json | Главный файл манифеста, где описаны все зависимости вашего проекта. |

!Структура директорий проекта TYPO3

Шаг 3: Настройка веб-сервера

Это самый важный момент в настройке безопасности. Ваш веб-сервер (Apache или Nginx) должен «смотреть» (иметь DocumentRoot) именно в папку public, а не в корень проекта.

Если вы используете локальный PHP встроенный сервер для тестов, команду нужно запускать так:

Флаг -t public указывает, что корневой директорией сайта является папка public. Это защищает ваши конфигурационные файлы и папку vendor от прямого доступа злоумышленников.

Шаг 4: Первый запуск и Install Tool

Теперь, когда файлы на месте, нам нужно настроить базу данных и создать администратора. TYPO3 имеет встроенный инструмент установки.

Откройте браузер и перейдите по адресу вашего сайта (например, http://localhost:8000).

Вы увидите сообщение об ошибке или пустую страницу. Это нормально, так как система еще не настроена.

Чтобы запустить установщик, TYPO3 требует подтверждения безопасности. Вам нужно создать специальный пустой файл в папке public.

Выполните в терминале:

(В Windows вы можете просто создать пустой текстовый файл с именем FIRST_INSTALL без расширения в папке public).

Обновите страницу в браузере. Теперь вы увидите зеленый экран приветствия TYPO3 Install Tool.

Шаг 5: Прохождение мастера установки

Мастер установки проведет вас через несколько этапов:

System Environment Check: Система проверит версию PHP, настройки памяти и наличие необходимых модулей. Если все пункты зеленые — нажимайте «Continue».

Database Connection: Введите данные доступа к вашей базе данных (хост, порт, логин, пароль). Выберите создание новой базы данных или использование существующей.

Create Administrative User: Придумайте логин и сложный пароль для супер-администратора. Также укажите название вашего сайта.

Finish: Установка завершена!

После завершения вы можете выбрать: перейти в Backend (админку) или во Frontend (на сайт).

Знакомство с интерфейсом Backend

Перейдите в Backend (обычно это адрес http://localhost:8000/typo3). Введите логин и пароль, которые вы создали на предыдущем шаге.

Вы попадете в святая святых TYPO3. Интерфейс разделен на три основные колонки:

Модули (слева): Здесь вы выбираете режим работы (Страницы, Файлы, Настройки, Расширения).

Дерево страниц (в центре): Иерархическая структура вашего сайта. Сейчас там пусто или есть одна корневая страница.

Рабочая область (справа): Здесь происходит редактирование контента выбранной страницы или настройки модуля.

Резюме

Поздравляем! Вы успешно развернули профессиональную CMS TYPO3, используя современные стандарты разработки.

Что мы узнали: * TYPO3 — это мощная система для сложных проектов с долгосрочной поддержкой (LTS). * Установка через Composer обеспечивает надежность, безопасность и удобство обновлений. * Структура папок TYPO3 разделяет публичные файлы (public) и системный код (vendor), что повышает безопасность. * Файл FIRST_INSTALL — это ключ к запуску мастера установки.

В следующей статье мы разберем структуру страниц и шаблонизацию, чтобы превратить пустую установку в полноценный веб-сайт. Готовьтесь, будет интересно!

Обзор интерфейса бэкенда: дерево страниц, модули и настройки сайта

В предыдущей статье мы успешно установили TYPO3 через Composer и впервые увидели экран входа в административную панель. Теперь настало время занять капитанский мостик. Бэкенд (Backend) TYPO3 — это ваше рабочее место, центр управления полетами, откуда вы будете контролировать структуру, контент, пользователей и настройки всей системы.

Многие новички, переходящие с WordPress или Joomla, поначалу теряются в интерфейсе TYPO3. Он кажется перегруженным или слишком «техническим». Но как только вы поймете логику трех колонок и концепцию дерева страниц, вы осознаете, насколько это мощный и упорядоченный инструмент. Давайте разберем его по винтикам.

Анатомия интерфейса: Правило трех колонок

После входа в систему перед вами открывается интерфейс, который глобально делится на верхнюю панель инструментов (Top Bar) и основную рабочую область, разделенную на три вертикальные колонки. Эта структура остается неизменной десятилетиями, потому что она доказала свою эффективность.

!Схема трехколоночного интерфейса TYPO3: Модули, Дерево страниц, Рабочая область.

1. Меню модулей (Левая колонка)

Это ваша панель инструментов. Здесь вы выбираете режим работы. Хотите редактировать текст на странице? Выбираете модуль Page (Страница). Нужно загрузить картинки? Модуль Filelist (Список файлов). Нужно настроить системный кэш? Модуль Maintenance (Обслуживание).

Меню разделено на смысловые блоки:

* Web (Веб): Все, что касается контента и структуры сайта. * Site Management (Управление сайтом): Настройки доменов, языков и глобальной конфигурации. * Filelist (Файлы): Доступ к медиа-файлам (аналог Проводника). * Admin Tools (Инструменты администратора): Установка расширений, обновление базы данных, настройки системы. * System (Система): Логи ошибок, отчеты о состоянии, права доступа.

2. Дерево страниц (Средняя колонка)

Это позвоночник вашего проекта. В отличие от многих CMS, где страницы лежат плоским списком, TYPO3 использует строгую иерархию. Это похоже на структуру папок на вашем компьютере.

* Если вы вложите одну страницу в другую, это автоматически отразится в URL-адресе (например, site.com/company/about). * Дерево страниц определяет наследование: настройки, заданные на родительской странице, автоматически применяются ко всем дочерним, если не переопределены.

3. Рабочая область (Правая колонка)

Здесь происходит вся магия. Содержимое этой области меняется в зависимости от того, какой Модуль вы выбрали в первой колонке и какую Страницу выбрали во второй.

Погружение в Дерево страниц (Page Tree)

Дерево страниц — это то, что делает TYPO3 уникальным. Давайте разберем его элементы подробнее, так как вы будете взаимодействовать с ним 90% времени.

Корневая страница (PID 0)

На самом верху дерева вы увидите иконку с логотипом TYPO3. Это так называемый Root Node или страница с PID 0 (Page ID 0).

> Важно: PID 0 — это технический корень системы. Вы не можете создавать контент или обычные страницы прямо здесь для отображения на сайте. PID 0 служит контейнером для глобальных настроек, пользователей бэкенда и записей, которые должны быть доступны всем сайтам в системе.

Типы страниц

В TYPO3 «страница» — это не всегда веб-страница, которую видит пользователь. Это может быть системная папка или ссылка. Вот основные типы, с которыми вы столкнетесь:

Standard Page (Стандартная страница): Обычная веб-страница с контентом. Имеет иконку листа бумаги.

Folder (Папка): Используется для хранения записей (новостей, категорий, пользователей фронтенда), но не имеет собственного URL и не отображается как страница сайта. Имеет иконку папки.

Link (Ссылка): Страница-перенаправление. Может вести на другую страницу внутри сайта или на внешний URL.

Separator (Разделитель): Используется только для визуального разделения пунктов в меню, не кликабелен.

!Виды иконок в дереве страниц: Стандартная, Папка, Корень сайта, Ссылка.

Контекстное меню

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

* Включить/Выключить страницу (Enable/Disable). * Копировать, вырезать и вставить ветку страниц. * Посмотреть историю изменений. * Быстро создать новую страницу внутри текущей.

Ключевые модули: Page vs List

Два модуля в разделе Web вызывают больше всего вопросов у новичков: Page (Страница) и List (Список). Понимание разницы между ними критически важно.

Модуль Page (Страница)

Это визуальный редактор структуры страницы. Когда вы выбираете этот модуль и кликаете на страницу в дереве, вы видите колонки контента (например, «Header», «Main Content», «Footer»), в которых расположены элементы: тексты, заголовки, изображения.

Используйте модуль Page, когда вам нужно: * Добавить текст или картинку на сайт. * Изменить порядок блоков на странице (перетаскиванием). * Посмотреть, как скомпонована страница.

Модуль List (Список)

Это «рентген» вашей страницы. Он показывает все записи базы данных, которые физически привязаны к выбранной странице, в виде табличного списка.

Используйте модуль List, когда вам нужно: * Увидеть записи, которые не являются контентом (например, новости, пользователи, настройки шаблона). * Выполнить массовые операции (удалить 10 элементов сразу). * Использовать буфер обмена (Clipboard) для перемещения элементов между страницами. * Получить доступ к низкоуровневым полям, скрытым в визуальном редакторе.

> Если вы создали папку (Folder) для хранения новостей, модуль Page покажет её пустой (так как у папки нет визуального представления). Чтобы увидеть и отредактировать новости внутри папки, вы обязаны переключиться в модуль List.

Настройка сайта (Site Configuration)

После установки TYPO3 у вас есть файлы и база данных, но система еще не знает, какой домен привязать к вашему дереву страниц. Для этого существует модуль Sites (Сайты) в разделе Site Management.

Это нововведение последних версий TYPO3 (начиная с v9), которое кардинально упростило управление мультисайтовостью и маршрутизацией (routing).

Создание конфигурации сайта

Перейдите в модуль Site Management -> Sites.

Вы увидите список корневых страниц. Рядом с вашей главной страницей нажмите кнопку Add a new Site Configuration.

В открывшемся окне вам нужно заполнить ключевые поля:

* Site Identifier: Уникальное название конфигурации (латиницей, без пробелов, например my-company-site). Это имя папки, которая будет создана в config/sites/. * Entry Point: Это URL вашего сайта. Для локальной разработки это может быть http://localhost:8000/. Важно указать протокол (http:// или https://) и завершающий слеш. * Root Page ID: ID страницы, которая будет главной (обычно подставляется автоматически).

Языки и поведение

В этом же модуле настраиваются языки. По умолчанию создан один язык — English. Вы можете добавить русский, немецкий и любые другие. Здесь же настраивается формат URL (ЧПУ) и обработка ошибок (404 страница).

После сохранения TYPO3 создаст файл config.yaml в папке проекта. Это означает, что настройки сайта хранятся в файле, а не в базе данных, что позволяет легко переносить их через Git вместе с кодом.

Пользовательские настройки

Прежде чем завершить обзор, заглянем в настройки вашего профиля. В верхней панели справа кликните на имя пользователя (обычно Admin) и выберите User Settings.

Здесь можно: * Password: Сменить пароль администратора. Language: Сменить язык интерфейса бэкенда. Если вы хотите видеть админку на русском, сначала нужно загрузить языковой пакет в модуле Maintenance -> Manage Language Packs*, а затем выбрать его здесь. * Startup Module: Выбрать, какой модуль открывается сразу после входа (полезно для редакторов, чтобы они сразу попадали в список новостей, а не на пустую страницу).

Резюме

Мы разобрались с пультом управления TYPO3. Теперь вы знаете, что:

Интерфейс строится на трех колонках: Модули, Дерево, Рабочая область.

Дерево страниц — это основа структуры и наследования настроек.

PID 0 — это системный корень, там не создают контент.

Модуль Page нужен для верстки контента, а List — для работы с данными и записями.

Без настройки Site Configuration система не будет знать, как обрабатывать запросы к вашему домену.

Теперь, когда мы умеем ориентироваться в системе, нам нужно научиться выводить информацию на экран. В следующей статье мы перейдем к одной из самых интересных и сложных тем TYPO3 — Основы TypoScript и создание первого шаблона.

Работа с контентом: создание страниц, типов содержимого и управление файлами

В предыдущих статьях мы установили TYPO3, настроили окружение и изучили интерфейс бэкенда. Теперь у нас есть работающая система, но она пуста. Пришло время вдохнуть в неё жизнь. В этой статье мы займемся тем, ради чего и создаются CMS — управлением контентом.

Мы разберем, как строить структуру сайта, наполнять страницы текстом и изображениями, а также узнаем, почему файловая система TYPO3 (FAL) считается одной из самых продвинутых на рынке.

Управление структурой страниц

Как мы уже выяснили, Дерево страниц (Page Tree) — это скелет вашего сайта. В отличие от систем, где меню строится отдельно от страниц, в TYPO3 иерархия страниц в бэкенде обычно напрямую отражает структуру навигации на сайте.

Создание новой страницы

Существует два основных способа создать новую страницу:

Контекстное меню: Нажмите правой кнопкой мыши на существующую страницу (или на корень сайта с логотипом TYPO3) и выберите пункт New (Создать). Затем перетащите иконку нужного типа страницы в дерево.

Drag & Drop: В верхней части дерева страниц есть иконка страницы с плюсом. Вы можете перетащить её прямо в дерево, в то место, где хотите создать новый раздел.

После создания страница по умолчанию будет выключена (Disabled). Это сделано специально, чтобы посетители сайта не видели пустой раздел, пока вы его редактируете. В дереве такая страница отмечена красным значком запрета. Чтобы опубликовать её, нужно нажать правой кнопкой мыши и выбрать Enable (Включить).

Свойства страницы

У каждой страницы есть набор глобальных настроек. Чтобы попасть в них, выберите страницу в дереве и нажмите иконку карандаша («Edit page properties»). Здесь есть несколько важных вкладок:

* General (Общие): Заголовок страницы, альтернативный заголовок для меню и ЧПУ-сегмент (часть URL-адреса). * Access (Доступ): Здесь можно скрыть страницу, установить дату автоматической публикации (Start) и снятия с публикации (Stop). * Metadata (Метаданные): Поля для SEO — описание (Description), ключевые слова и настройки для поисковых роботов. * Appearance (Внешний вид): В зависимости от настройки шаблона, здесь можно выбрать макет (например, «2 колонки» или «Лендинг»).

Концепция элементов контента (Content Elements)

В TYPO3 страница — это не просто одно большое текстовое поле, как в MS Word. Страница — это контейнер для Элементов контента (Content Elements или CE).

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

!Визуализация модульной структуры страницы в TYPO3, состоящей из отдельных элементов контента.

Мастер создания контента

Перейдите в модуль Page и выберите созданную вами страницу. В рабочей области вы увидите кнопку + Content. Нажав на неё, вы откроете «Мастер создания нового элемента контента» (New Content Element Wizard).

TYPO3 предлагает множество готовых типов элементов, сгруппированных по вкладкам:

Typical Page Content (Типичный контент):

* Header Only: Просто заголовок. * Text & Media: Самый универсальный элемент. Позволяет добавить текст, изображения, видео и настроить их взаимное расположение. * Bulleted List: Маркированный список. * Table: Таблица.

Menu (Меню): Автоматически генерируемые списки ссылок на подстраницы, разделы или карту сайта.

Special Elements (Специальные элементы): Вставка чистого HTML, файловые ссылки, разделители.

Form (Формы): Вставка контактных форм.

Plugins (Плагины): Если вы установили расширения (например, новости или интернет-магазин), их плагины будут здесь.

Работа с текстом и редактор RTE

Давайте создадим элемент типа Text & Media. Это «рабочая лошадка» любого контент-менеджера.

В открывшемся окне редактирования вы увидите вкладку General. Здесь находятся поле Header (Заголовок элемента) и поле Text.

Поле текста использует RTE (Rich Text Editor) — визуальный редактор. В современных версиях TYPO3 используется CKEditor. Он позволяет:

* Форматировать текст (жирный, курсив, списки). * Добавлять ссылки (на другие страницы, файлы или внешние сайты). * Использовать специальные стили, заранее настроенные разработчиком.

> Совет профессионала: Никогда не копируйте текст напрямую из MS Word в редактор сайта. Word тянет за собой огромное количество скрытого мусорного кода, который ломает верстку. Используйте кнопку «Вставить как текст» или предварительно очищайте форматирование через «Блокнот».

Управление файлами и FAL

Одна из самых сильных сторон TYPO3 — это работа с медиафайлами. В отличие от многих CMS, где картинка просто загружается в папку и забывается, TYPO3 использует систему FAL (File Abstraction Layer).

Что такое FAL?

FAL — это слой абстракции файлов. Когда вы загружаете файл в TYPO3, система не просто кладет его на диск. Она создает запись в базе данных (в таблице sys_file), которая хранит информацию о файле: его имя, размер, тип, метаданные (alt-текст, описание).

Когда вы вставляете картинку на страницу, вы создаете не прямую ссылку на файл, а ссылку на запись в базе данных (Reference).

Почему это круто?

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

Единые метаданные: Вы можете один раз прописать Alt-текст для фотографии в свойствах файла, и этот текст будет использоваться везде, где эта фотография размещена.

Повторное использование: Один и тот же файл можно использовать на десятках страниц, не загружая его заново.

Модуль Filelist (Список файлов)

Для управления файлами используется модуль Filelist в левой колонке. Это ваш файловый менеджер.

Перейдите в Filelist.

Вы увидите структуру папок. Обычно корневая папка называется fileadmin.

Здесь вы можете создавать папки (например, News, Team, Products), загружать файлы с компьютера, редактировать изображения (обрезка, поворот) и их метаданные.

!Интерфейс файлового менеджера TYPO3, демонстрирующий структуру папок и инструменты управления файлами.

Добавление изображения к тексту

Вернемся к нашему элементу Text & Media. Чтобы добавить картинку:

Перейдите на вкладку Media внутри элемента.

Нажмите кнопку Add media file.

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

После выбора файла вы можете настроить его отображение: добавить подпись, переопределить Alt-текст или настроить поведение при клике (например, открывать увеличенную версию в лайтбоксе).

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

Скрытые возможности и лайфхаки

Копирование и ссылки на контент

В TYPO3 вы можете не просто копировать элементы, но и создавать ссылки на них.

Если вы скопируете элемент и при вставке выберете Paste as Reference, то на новой странице появится копия, которая жестко связана с оригиналом. Если вы измените текст в оригинале, он изменится и в копии. Это идеально подходит для блоков типа «Контакты» или «О нас», которые повторяются на разных страницах.

Планирование публикаций

Любой элемент контента, как и страница целиком, имеет вкладку Access. Вы можете создать новогоднее поздравление в начале декабря и выставить дату публикации (Start) на 31 декабря, а дату скрытия (Stop) на 10 января. Система сама покажет и скроет контент в нужное время. При этом кэш сайта сбросится автоматически.

Резюме

Мы научились основам работы контент-менеджера в TYPO3:

Структура: Страницы создаются в дереве и могут быть разных типов.

Модульность: Контент состоит из независимых элементов (Content Elements).

FAL: Файловая система TYPO3 хранит ссылки на файлы, что позволяет безопасно перемещать и переименовывать их.

Гибкость: Элемент Text & Media позволяет комбинировать текст и медиафайлы в любых вариациях.

Теперь, когда мы умеем создавать контент, возникает вопрос: как управлять внешним видом этого контента глобально? Как сделать так, чтобы сайт выглядел именно так, как нарисовал дизайнер? В следующей статье мы погрузимся в мир TypoScript и шаблонизации — сердце магии TYPO3.

Основы интеграции верстки: создание Sitepackage, введение в TypoScript и Fluid

В предыдущих статьях мы научились устанавливать TYPO3, ориентироваться в бэкенде и создавать контент. Однако, если вы откроете свой сайт сейчас, вы, скорее всего, увидите либо ошибку, либо стандартную заглушку. У вашего сайта есть «скелет» (структура страниц) и «органы» (контент), но нет «кожи» — дизайна.

В этой статье мы переходим к самому важному этапу для разработчика: интеграции верстки. Мы разберем профессиональный подход к созданию тем оформления через Sitepackage, познакомимся с языком конфигурации TypoScript и мощным шаблонизатором Fluid.

Философия Sitepackage: Все свое ношу с собой

В мире WordPress или Joomla принято скачивать готовые «Темы» (Themes) и устанавливать их через админку. В TYPO3 подход более фундаментальный. Здесь дизайн, верстка, конфигурация и скрипты объединяются в специальное расширение, которое называется Sitepackage (Пакет сайта).

Почему именно расширение?

Портативность: Весь код вашего дизайна лежит в одной папке. Вы можете скопировать эту папку на другой проект, установить её, и дизайн перенесется целиком.

Версионирование: Так как это файлы, вы можете (и должны) хранить их в Git. Это позволяет команде разработчиков работать над дизайном одновременно.

Независимость от ядра: При обновлении ядра TYPO3 ваши файлы дизайна остаются нетронутыми, так как они отделены от системных файлов.

!Визуализация модульной структуры, показывающая независимость пакета сайта от ядра

Создание Sitepackage вручную

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

Шаг 1: Структура папок

В корне вашего проекта (там, где лежит composer.json) создайте папку packages. Внутри неё создайте папку my_sitepackage. Внутри пакета нам понадобится следующая структура:

Шаг 2: Файл ext_emconf.php

Этот файл сообщает TYPO3, что данная папка является расширением. Создайте файл packages/my_sitepackage/ext_emconf.php со следующим содержимым:

Шаг 3: Регистрация в Composer

Чтобы TYPO3 увидел наше расширение, нужно «подружить» его с Composer. Откройте корневой composer.json вашего проекта (не тот, что внутри пакета) и добавьте информацию о репозитории:

Теперь выполните команду в терминале:

Примечание: my-vendor/my-sitepackage — это имя, которое вы должны указать в composer.json внутри самого пакета.

После успешного выполнения команды зайдите в бэкенд, в модуль Admin Tools -> Extensions, и убедитесь, что ваше расширение активно.

TypoScript: Язык управления конфигурацией

Многие новички боятся TypoScript, считая его сложным языком программирования. Это заблуждение. TypoScript — это не язык программирования, это формат конфигурации, похожий на очень продвинутый JSON или YAML.

С помощью TypoScript мы говорим системе: «Возьми данные из базы, оберни их в этот HTML-шаблон и отдай пользователю».

Объектная структура

TypoScript работает с объектами. Главный объект — это PAGE. Если мы не создадим объект PAGE, TYPO3 не будет знать, что выводить, и покажет ошибку.

Создайте файл packages/my_sitepackage/Configuration/TypoScript/setup.typoscript:

Разберем ключевой момент: 10 = FLUIDTEMPLATE. Здесь мы говорим TYPO3: «Для рендеринга контента используй движок Fluid». Мы указываем пути к папкам, где лежат наши HTML-заготовки.

Подключение TypoScript к сайту

Просто создать файл недостаточно. Его нужно включить в шаблон сайта.

Зайдите в бэкенд, модуль Web -> Template.

Выберите корневую страницу (с иконкой глобуса).

Вы увидите сообщение «No template found!». Нажмите кнопку Create template for a new site.

В выпадающем списке вверху выберите Info/Modify.

Нажмите Edit the whole template record.

Перейдите на вкладку Includes.

В списке Include static (from extensions) найдите ваш пакет (если вы правильно настроили ext_tables.php или TCA, он появится здесь, но для начала можно просто вставить код вручную во вкладку General -> Setup).

Для автоматического подключения файлов из нашего Sitepackage, в основном поле Setup корневого шаблона добавьте строку:

Fluid: Современный шаблонизатор

Fluid — это сердце фронтенда в TYPO3. Это чистый, безопасный и расширяемый шаблонизатор, основанный на XML-синтаксисе.

Основные концепции Fluid

Variables (Переменные): Данные, которые приходят из TYPO3. Доступ к ним осуществляется через фигурные скобки.

Пример: {data.title} выведет заголовок текущей страницы.

ViewHelpers (Вьюхелперы): Специальные теги, начинающиеся с f:. Они выполняют логику: циклы, условия, форматирование.

Пример: <f:format.html>{data.bodytext}</f:format.html>.

Структура: Fluid делит шаблоны на три типа:

* Layouts (Макеты): Общая обертка (header, footer, открывающие теги <html> и <body>). * Templates (Шаблоны): Уникальная часть конкретной страницы, которая вставляется внутрь Layout. * Partials (Части): Повторяющиеся куски кода (кнопки, карточки товаров).

Создаем первый шаблон

В TypoScript мы указали templateName = Default. Значит, нам нужно создать файл Default.html.

Создайте файл packages/my_sitepackage/Resources/Private/Templates/Page/Default.html:

И создайте Layout packages/my_sitepackage/Resources/Private/Layouts/Page/Main.html:

Связь TypoScript и Fluid

Обратите внимание на строку <f:cObject typoscriptObjectPath="lib.dynamicContent" />. Это мост обратно в TypoScript. Fluid просит TypoScript: «Дай мне отрендеренный контент из колонок».

Для этого в наш файл setup.typoscript нужно добавить:

Эта конструкция выбирает все элементы контента (table = tt_content) из колонки 0 (colPos = 0) текущей страницы.

Итог

Мы проделали огромную работу и заложили фундамент для разработки:

Создали Sitepackage — контейнер для нашего дизайна.

Настроили TypoScript, создав объект PAGE и подключив FLUIDTEMPLATE.

Написали первый Fluid-шаблон, который выводит заголовок страницы и контент.

Теперь, если вы создадите страницу в бэкенде и добавите на неё текст, он появится на фронтенде, обернутый в ваш HTML. В следующей статье мы углубимся в верстку меню и работу с динамическими элементами, чтобы превратить наш простой шаблон в полноценный навигационный сайт.

Для более глубокого изучения документации рекомендуем посетить официальный ресурс TYPO3 Documentation.

Расширение функционала, установка экстеншенов и базовое обслуживание системы

Мы прошли долгий путь: установили TYPO3, разобрались с интерфейсом, научились создавать страницы и даже интегрировали свой собственный дизайн через Sitepackage. На этом этапе у вас есть красивый, но статичный сайт. Однако современные веб-проекты требуют динамики: новостных лент, форм обратной связи, карт сайта, SEO-инструментов и интеграций с социальными сетями.

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

Философия расширений в TYPO3

Архитектура TYPO3 модульная. Даже само «Ядро» (Core) состоит из набора системных расширений. Это означает, что для системы нет принципиальной разницы между встроенным модулем «Fluid Styled Content» и скачанным плагином новостей. Все они работают по единым стандартам API.

Существует два основных источника расширений:

TER (TYPO3 Extension Repository) — официальный каталог расширений. Раньше их скачивали оттуда вручную, но сейчас он служит скорее витриной для поиска.

Packagist — глобальный репозиторий пакетов PHP. Именно отсюда Composer скачивает библиотеки.

> В современной разработке на TYPO3 установка расширений производится исключительно через Composer. Ручная загрузка ZIP-архивов в папку typo3conf/ext/ считается устаревшей практикой (legacy), которая усложняет поддержку и обновления.

!Диаграмма процесса установки расширения через Composer

Поиск и выбор расширений

Прежде чем вводить команду в терминал, нужно найти подходящее решение. Как отличить качественное расширение от плохого?

Поддержка версий: Убедитесь, что расширение поддерживает вашу версию TYPO3 (например, v12 LTS).

Популярность: Количество скачиваний на Packagist говорит о доверии сообщества.

Дата обновления: Если последний коммит был 3 года назад, расширение, скорее всего, заброшено.

Документация: Наличие подробного мануала — признак хорошего тона разработчика.

Самые популярные расширения, которые ставят почти на каждый проект: * georgringer/news: Мощная система новостей и блога. * yoast-seo-for-typo3/yoast_seo: Инструменты для поисковой оптимизации. * bk2k/bootstrap-package: Готовый стартовый пакет на базе Bootstrap (если вы не делаете свой с нуля). * friendsoftypo3/tt_address: Управление контактами и адресами.

Практика: Установка расширения News

Давайте установим расширение news (автор Georg Ringer), так как это де-факто стандарт для создания блогов и новостных разделов в TYPO3.

Шаг 1: Установка через Composer

Откройте терминал в корне вашего проекта (там, где лежит файл composer.json) и выполните команду:

Composer автоматически найдет совместимую версию, скачает её и все необходимые зависимости в папку vendor. Также он обновит файлы composer.json и composer.lock.

Шаг 2: Обновление базы данных (Database Analyzer)

В отличие от WordPress, где плагины часто сами меняют базу данных при активации, TYPO3 требует явного действия администратора. Расширение news добавляет новые таблицы (например, tx_news_domain_model_news).

Зайдите в бэкенд TYPO3.

Перейдите в модуль Admin Tools -> Maintenance.

Найдите блок Analyze Database Structure и нажмите кнопку «Analyze Database».

Система сравнит требуемую структуру (описанную в файлах расширения) с реальной базой данных.

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

Шаг 3: Подключение TypoScript (Static Templates)

Это самый частый шаг, который забывают новички. Расширение установлено, но сайт не знает, как его отображать. Нам нужно подключить настройки TypoScript, которые идут в комплекте с расширением.

Перейдите в модуль Web -> Template.

Выберите корневую страницу сайта (с иконкой глобуса).

В выпадающем меню сверху выберите Info/Modify.

Нажмите Edit the whole template record.

Перейдите на вкладку Includes.

В списке Available Items найдите News (news) и перенесите его в список Selected Items.

Сохраните изменения.

Теперь вы можете создавать записи новостей в папках и выводить их на страницах с помощью плагина (элемент контента типа «Plugins» -> «News system»).

Настройка расширений (Extension Configuration)

Многие расширения имеют глобальные настройки. Например, в расширении новостей можно настроить формат URL или включить режим архива.

Чтобы попасть в эти настройки:

Перейдите в Admin Tools -> Settings.

Выберите пункт Extension Configuration.

Найдите в списке нужное расширение (например, news).

Кликните на название, измените параметры и нажмите Save.

Эти настройки сохраняются в файле config/system/settings.php (или LocalConfiguration.php в старых версиях), поэтому они не теряются при обновлении кода.

Базовое обслуживание системы

TYPO3 — надежная система, но она требует периодического внимания администратора. Все инструменты обслуживания находятся в разделе Admin Tools.

Управление кэшем (Flushing Caches)

Кэширование — это то, что делает TYPO3 быстрым. Система кэширует конфигурацию, структуру базы данных, скомпилированные шаблоны Fluid и готовые HTML-страницы.

В верхней панели бэкенда есть иконка молнии. При нажатии на неё доступны два действия:

Flush frontend caches (Желтая молния): Очищает кэш страниц и контента. Используйте это, когда вы изменили текст, картинку или настройки плагина, но не видите изменений на сайте.

Flush all caches (Красная молния): Очищает всё, включая системный кэш конфигурации, кэш классов и локализации. Используйте это, когда вы:

* Установили новое расширение. * Изменили файлы TypoScript или PHP. * Обновили HTML-шаблоны (иногда требуется).

> Важно: Очистка всех кэшей (красная молния) временно замедлит работу сайта для первого посетителя, так как системе придется пересобрать всё заново. Не нажимайте её без необходимости на высоконагруженном проекте.

Логирование и ошибки

Если на сайте возникла ошибка (знаменитый экран «Oops, an error occurred!»), детали не выводятся на экран в целях безопасности. Чтобы узнать причину, нужно смотреть логи.

В TYPO3 есть модуль System -> Log, но он показывает только записи, которые попали в базу данных. Системные ошибки PHP и исключения (Exceptions) пишутся в файлы.

Логи находятся в папке var/log/ вашего проекта. Файлы обычно имеют имена вида typo3_*.log. Если что-то сломалось, первым делом открывайте последний лог-файл и ищите слово CRITICAL или ERROR.

Проверка окружения (Environment Status)

В модуле Reports -> Status Report система сама подскажет, если что-то не так. Зеленый цвет — всё хорошо. Красный — критическая проблема.

Здесь проверяются: * Версия PHP и необходимые модули. * Настройки безопасности (например, закрыта ли папка конфигурации от внешнего доступа). * Статус обновлений безопасности TYPO3.

Upgrade Wizards (Мастера обновлений)

Когда вы обновляете ядро TYPO3 (например, с версии 12.4.0 до 12.4.10) через Composer, код обновляется, но база данных и некоторые конфигурации могут остаться старыми.

Для синхронизации используется инструмент Upgrade Wizards в модуле Maintenance.

Всегда заходите туда после обновления ядра. Если система видит, что нужно мигрировать данные (например, изменился формат хранения картинок), она предложит запустить соответствующий Wizard. Просто следуйте инструкциям на экране.

Резюме

Теперь ваш арсенал разработчика TYPO3 значительно расширился. Вы знаете, что:

Composer — главный инструмент для установки расширений.

После установки кода нужно обязательно обновить структуру БД и подключить TypoScript.

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

Логи ошибок живут в папке var/log/.

На этом мы завершаем блок базовой настройки и разработки. В следующих статьях мы перейдем к более продвинутым темам: настройке многоязычности, SEO-оптимизации и управлению правами пользователей бэкенда. Ваш сайт уже работает, теперь пора сделать его удобным для людей со всего мира.