TYPO3 v14.1: создание веб-страницы с нуля для новичков

Введение в TYPO3 v14.1: роли, интерфейс, понятия

TYPO3 — это CMS (система управления контентом) корпоративного уровня: она помогает создавать и поддерживать сайты, где контент отделён от дизайна и кода, а права доступа и рабочие процессы можно гибко настроить.

В этом курсе мы будем идти от нуля: от знакомства с интерфейсом и базовыми терминами — к созданию структуры страниц, наполнению контентом и пониманию, как TYPO3 организует данные.

Официальные материалы, на которые можно опираться в процессе обучения:

TYPO3 Documentation

TYPO3 Explained (официальная документация)

Как устроен сайт в TYPO3: frontend и backend

У TYPO3 есть два основных “мира”, с которыми вы будете работать.

Frontend — это публичная часть сайта, которую видят посетители в браузере. Там отображаются страницы, тексты, изображения, меню и всё, что вы публикуете.

Backend — это административная часть (панель управления), где вы:

создаёте страницы и структуру сайта

добавляете и редактируете контент

загружаете файлы

управляете пользователями и правами

подключаете функциональность через расширения

Важно: большинство задач новичка выполняются именно в backend.

Роли в TYPO3: кто что делает

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

Администратор

Администратор отвечает за систему в целом:

создаёт пользователей и группы

настраивает права доступа

устанавливает и обновляет расширения

следит за безопасностью и обновлениями

Редактор

Редактор работает с контентом:

создаёт и редактирует страницы в рамках доступного раздела

добавляет контент-элементы (тексты, изображения, таблицы и другое)

публикует изменения (если процесс публикации это позволяет)

Интегратор

Интегратор “собирает” сайт в TYPO3 на основе дизайна и требований:

настраивает шаблоны и отображение контента

подготавливает структуру сайта под редакторов

помогает связать контент, меню и компоненты

Разработчик

Разработчик пишет код, когда стандартных возможностей недостаточно:

создаёт кастомные расширения

интегрирует внешние сервисы

расширяет модели данных и бизнес-логику

В рамках курса для новичков вы чаще всего будете действовать как редактор и частично как интегратор на базовом уровне.

Backend TYPO3: основные области интерфейса

Когда вы входите в TYPO3 backend, вы видите рабочее пространство, где большинство действий повторяются изо дня в день. Если понять “географию” интерфейса один раз, дальше будет намного проще.

!Схема помогает запомнить, где в backend находятся ключевые зоны управления сайтом

Меню модулей

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

Дерево страниц (page tree)

Слева отображается структура сайта: страницы и разделы. Это центральное место навигации для редактора.

Рабочая область

Справа вы видите содержимое выбранной страницы или список записей (в зависимости от модуля). Чаще всего здесь вы будете добавлять и редактировать контент.

Верхняя панель

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

Базовые понятия TYPO3, без которых дальше сложно

Ниже — набор терминов, с которыми вы будете встречаться постоянно. Мы будем возвращаться к ним в следующих статьях, но важно понять смысл уже сейчас.

Страница (page)

Страница в TYPO3 — это элемент структуры сайта. Страницы формируют дерево: у страниц могут быть дочерние страницы.

Страница — не то же самое, что “один блок текста”. Это скорее контейнер, внутри которого размещается контент.

Контент-элемент (content element)

Контент-элемент — это “кирпичик”, из которого состоит содержимое страницы: текст, изображение, список, таблица, медиа и другое (в зависимости от настроек и расширений).

Обычно на странице находится несколько контент-элементов.

Запись (record)

TYPO3 хранит данные как набор “записей” разных типов. Для новичка полезно запомнить простую идею:

страница — это тоже запись (элемент структуры)

контент-элемент — запись, которая отображается на странице

многие сущности в модулях TYPO3 (например, элементы контента, категории, ссылки) — тоже записи

Это важно, потому что права доступа, языки, версии и хранение в базе данных в TYPO3 часто завязаны именно на концепцию записи.

Модули

Модули — это разделы backend для разных задач. В типовом сценарии новичка часто используются:

модуль для работы со страницей и её контентом

модуль со списками записей

модуль для управления файлами

Точные названия могут отличаться в зависимости от сборки и прав, но логика остаётся одинаковой: каждый модуль решает свой класс задач.

Файлы и хранилища (File Abstraction Layer)

TYPO3 управляет файлами через слой абстракции файлов (часто называют FAL). На практике это означает:

изображения и документы загружаются в управляемые хранилища

контент-элементы обычно ссылаются на файлы, а не “вшивают” их

Это облегчает замену файлов и поддержку порядка в медиа.

Официальная точка входа в тему (можно читать позже, когда начнёте активно работать с файлами):

File Abstraction Layer (TYPO3 Explained)

Права доступа

В TYPO3 права обычно настраиваются так, чтобы пользователь видел только то, что ему нужно. Чаще всего права связаны с:

разделом дерева страниц

доступными действиями (просмотр, редактирование, создание, удаление)

доступом к модулям

Для новичка главное правило: если вы “не видите” какую-то кнопку или модуль — это часто означает не ошибку, а ограничение прав.

Кэш

TYPO3 использует кэширование, чтобы сайт работал быстрее. Иногда после изменений вы можете видеть “старую” версию страницы в frontend — это часто связано с кэшем.

На практике новичку достаточно запомнить:

изменения контента обычно появляются сразу

если что-то не обновилось, возможно, нужно очистить кэш (это действие часто доступно в backend)

Как выглядит типичный рабочий процесс

Чтобы связать роли, интерфейс и понятия в одну картину, полезно представлять общий сценарий работы:

администратор создаёт пользователей и выдаёт права

интегратор готовит структуру страниц и базовые шаблоны

редактор выбирает страницу в дереве страниц

редактор добавляет на страницу контент-элементы и заполняет их

результат проверяется во frontend

Что будет дальше в курсе

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

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

В прошлой статье мы разобрали, что в TYPO3 есть frontend (что видит посетитель) и backend (где вы создаёте страницы и контент), а также познакомились с ключевыми понятиями: страницы, контент-элементы, записи, модули.

Теперь переходим к практике: подготовим окружение и установим TYPO3 так, чтобы у вас появился рабочий сайт, в который можно войти в backend и начать строить структуру страниц.

Что нужно для работы TYPO3

TYPO3 — это PHP-приложение, которому обычно нужны:

Web-сервер (например, Nginx или Apache)

PHP нужной версии и расширения PHP

База данных (часто MySQL/MariaDB)

Composer для установки и обновления TYPO3

Точные требования зависят от версии TYPO3 и вашей операционной системы.

Полезные официальные источники:

TYPO3 Installation and Upgrade Guide

TYPO3 System Requirements (раздел в руководстве по установке)

Composer

Два подхода к установке: локально и на хостинге

Для новичка важно различать:

Локальная установка (для обучения и разработки)

- вы ставите TYPO3 на свой компьютер - удобно экспериментировать, не страшно “сломать” - чаще всего используют Docker/DDEV, чтобы быстро получить готовое окружение

Установка на сервер/хостинг (для публикации сайта)

- требует аккуратных настроек PHP, прав, домена, SSL - чаще всего делается после того, как локально всё готово

В рамках курса рекомендуемый путь: локальная установка в контейнере, чтобы минимизировать проблемы с версиями PHP и настройками.

!Как компоненты окружения связаны между собой при локальной установке

Рекомендуемый вариант для новичков: DDEV (Docker)

DDEV — это инструмент, который поднимает локальное окружение через Docker: web-сервер, PHP и базу данных. Вам не нужно вручную настраивать Apache/Nginx и MySQL на своей системе.

Официальная документация DDEV:

DDEV Documentation

Что нужно установить перед началом

Набор зависит от ОС, но концептуально вам нужны:

Docker (движок контейнеров)

DDEV (управляет окружением)

Composer (ставит TYPO3)

Устанавливайте по официальным инструкциям под вашу ОС, потому что шаги для Windows/macOS/Linux отличаются:

Install Docker

Installing DDEV

Download Composer

Установка TYPO3 через Composer

TYPO3 корректнее устанавливать через Composer. Это стандартный способ в современном PHP-мире: зависимости фиксируются, обновления и расширения ставятся предсказуемо.

Создаём проект TYPO3

Создайте папку под проект, например my-typo3-site.

Внутри папки выполните установку TYPO3 (пакет-скелет).

Типовой подход — использовать официальный project template TYPO3. Конкретная команда может меняться от версии к версии, поэтому ориентируйтесь на актуальные команды в руководстве:

TYPO3 Installation (Composer-based)

Важно понять принцип:

Composer скачивает TYPO3 и зависимости

у проекта появляется публичная директория public/ — это document root (корень сайта для web-сервера)

Почему document root важен

TYPO3 (как и многие современные CMS) хранит часть служебных файлов вне публичного доступа. Поэтому web-сервер должен смотреть именно в public/, а не в корень проекта.

Если указать document root неправильно, возможны проблемы:

не открывается установка

открываются лишние файлы

потенциальные риски безопасности

Поднятие окружения в DDEV и привязка к проекту

Ниже — общий смысл действий. Точные команды и значения зависят от настроек (PHP-версия, тип базы, имя проекта) и могут отличаться, поэтому сверяйтесь с документацией DDEV и TYPO3.

Инициализируйте DDEV в папке проекта.

Укажите тип проекта (PHP) и document root public.

Запустите окружение.

Полезный раздел документации DDEV про создание проекта:

DDEV Quickstart

После запуска DDEV выдаёт URL, по которому открывается ваш локальный сайт в браузере.

Мастер установки TYPO3 (Install Tool)

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

Смысл шагов установки обычно такой:

Проверка системы

- TYPO3 проверяет расширения PHP и базовые параметры

Подключение базы данных

- вы вводите хост, имя базы, пользователя и пароль (в DDEV эти данные обычно предоставляются автоматически)

Создание админ-пользователя

- это пользователь backend с полными правами

Базовая настройка сайта

- название сайта, начальные параметры

Официальный раздел про установку через браузер:

Install TYPO3 via the Web Installer

Первый вход в backend

После успешной установки у вас есть:

frontend сайта (пока может быть почти пустым)

backend (админ-панель), где вы начнёте создавать страницы

Что сделать сразу после входа в backend:

убедиться, что вы видите дерево страниц (page tree) слева

найти модуль работы со страницами и контентом (название может отличаться)

открыть страницу в frontend, чтобы понимать связь “что делаю в backend → что вижу в браузере”

Частые проблемы новичков и как их распознать

Открывается не то, что ожидаете

Проверьте document root. Для Composer-установки TYPO3 он почти всегда должен быть public/.

После изменений во frontend ничего не меняется

Часто это кэш. В TYPO3 есть инструменты очистки кэша в backend. Если что-то “застряло”, попробуйте очистить кэш.

Не хватает прав или модулей

Если вы вошли не админом, некоторые модули и кнопки могут быть скрыты правами. Для обучения на первых шагах удобнее работать администратором, а роли и ограничения мы будем вводить позже.

Что должно получиться к концу статьи

К этому моменту у вас должно быть:

рабочее локальное окружение (например, через DDEV)

установленная TYPO3

доступ в backend под администратором

понимание, где находится frontend и как в него попасть

В следующей статье мы начнём создавать минимальную структуру сайта в дереве страниц и добавим первые контент-элементы — вы закрепите термины страница и контент-элемент на практике.

Создание сайта: Site Configuration, домен, языки

После установки TYPO3 у вас уже есть работающий backend и вы можете зайти под администратором. Но часто новичок сталкивается с вопросом: почему во frontend нет нормальных ссылок, переключения языка и понятного адреса страниц?

В TYPO3 за это отвечает Site Configuration (конфигурация сайта). В этой статье вы:

поймёте, что такое Site Configuration и зачем она нужна

создадите корневую страницу сайта (site root) в дереве страниц

настроите базовый домен/адрес сайта (base)

добавите языки и разберётесь, как работает переключение и fallback

Официальная документация, на которую можно опираться:

TYPO3 Site Handling (Core API)

TYPO3 Installation and Upgrade Guide

!Схема показывает, как домен и язык влияют на выбор сайта и построение ссылок

Что такое Site Configuration и почему без неё «сайт не собирается»

Site Configuration в TYPO3 — это набор настроек, который связывает:

корневую страницу сайта в дереве страниц

базовый адрес (base), от которого TYPO3 строит ссылки

языки (и правила переключения/резервные варианты)

Если Site Configuration не создана или настроена неверно, типичные симптомы такие:

ссылки во frontend выглядят странно или ведут не туда

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

TYPO3 не понимает, где начинается ваш сайт в дереве страниц

Важно: Site Configuration — это не “ещё одна страница”. Это настройка, которая привязывается к конкретной странице, отмеченной как корень сайта.

Подготовка структуры: корневая страница (site root)

В предыдущих статьях мы говорили, что структура сайта — это дерево страниц (page tree). Чтобы TYPO3 понимала, какая часть дерева является отдельным сайтом, обычно делают верхнюю страницу, например:

Home

Главная

My Website

Эту страницу отмечают как корень сайта.

Что такое «корневая страница» простыми словами

Корневая страница — это верхняя точка вашего сайта в дереве страниц. Всё, что находится внутри неё (дочерние страницы), считается частью этого сайта.

Если в одной TYPO3-инсталляции несколько сайтов, у каждого будет своя корневая страница и своя Site Configuration.

Что сделать в backend

Создайте страницу верхнего уровня (если она ещё не создана).

Откройте свойства страницы.

Найдите настройку, которая помечает страницу как корневую для сайта (часто формулировка выглядит как Use as Root Page или аналогично по смыслу).

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

Название поля может немного отличаться в зависимости от языка интерфейса и конкретной сборки, но смысл один: эта страница — корень сайта.

Где настраивается Site Configuration в TYPO3

В TYPO3 v14 управление сайтами находится в backend в разделе управления сайтом. Чаще всего путь выглядит так:

Site Management → Sites

Там вы создаёте конфигурацию сайта и привязываете её к корневой странице.

Если вы не видите этот раздел:

вы вошли не администратором

у пользователя нет прав на модуль

Для обучения на первых шагах удобнее работать администратором.

Настройка домена и base: самый частый источник ошибок

Что такое base

Base — это базовый адрес сайта, например:

https://example.com/

https://my-project.ddev.site/

http://localhost:8080/

TYPO3 использует base, чтобы:

генерировать абсолютные ссылки (когда это нужно)

правильно строить ссылки языков

корректно распознавать, к какому сайту относится запрос

Как base связана с локальной установкой (DDEV)

Если вы используете DDEV, он выдаёт вам URL проекта. Именно его обычно и нужно указывать как base.

Важно:

base должна заканчиваться слэшем /

base должна совпадать с тем, как вы реально открываете сайт в браузере (протокол, домен, порт)

Практический алгоритм настройки base

Откройте сайт в браузере и скопируйте адрес целиком.

В Site Configuration вставьте этот адрес в base.

Проверьте, что адрес заканчивается /.

Несколько доменов и разные окружения

На практике часто бывает так:

локально: https://my-project.ddev.site/

на продакшене: https://example.com/

TYPO3 позволяет задавать варианты base для разных сценариев, но для новичка достаточно правила:

настраивайте base под текущее окружение

Когда вы будете переносить проект на хостинг, base нужно будет поменять на домен реального сайта.

Добавление языков: как TYPO3 понимает, что страница «на другом языке»

Языки в TYPO3 — это часть Site Configuration. Это означает:

язык — не “просто перевод текста”

язык влияет на URL, меню, ссылки и переключатель языка

Минимальные понятия, которые нужно знать

Default language — язык по умолчанию (основной язык сайта)

Language identifier — внутренний идентификатор языка в конфигурации сайта (например, en, de, uk)

Locale — настройка локали, влияющая на форматы дат/чисел и некоторые языковые правила (например, de_DE.UTF-8)

Fallback — правило, что показывать, если перевода нет

TYPO3 может работать так:

если перевод страницы/элемента существует — показываем перевод

если перевода нет — показываем содержимое языка по умолчанию (это и есть типичный fallback)

Что обычно указывают при добавлении языка

Когда вы добавляете новый язык в Site Configuration, вам обычно нужно заполнить такие вещи:

название языка (для админки)

идентификатор (например, de)

locale (под ваш сервер и проект)

поведение fallback (например, fallback на default)

часть URL для языка (например, /de/), если вы хотите, чтобы язык был виден в адресе

Последний пункт важен для новичка: чаще всего язык кодируется в URL через префикс.

Пример логики URL:

язык по умолчанию: https://example.com/ (без префикса)

немецкий: https://example.com/de/

Конкретный формат зависит от настроек сайта, но идея такая: TYPO3 должна отличать языки по URL.

Как работает переключение языка

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

берёт текущую страницу

пытается найти её перевод на выбранный язык

если перевода нет, действует по правилам fallback

Поэтому корректная настройка fallback — это не “опция для красоты”, а часть пользовательского опыта.

Проверяем, что всё работает

После сохранения Site Configuration проверьте два сценария.

Проверка base

откройте главную страницу во frontend

убедитесь, что ссылки меню ведут на ваш домен/URL

если вас неожиданно редиректит на другой адрес, почти всегда это неправильно заданный base

Проверка языков

откройте URL языка (например, с префиксом /de/, если вы так настроили)

убедитесь, что TYPO3 открывает сайт, а не выдаёт 404

позже, когда вы начнёте переводить страницы и контент-элементы, вы увидите разницу между реальными переводами и fallback

Типовые ошибки новичков

Не отмечена корневая страница как site root

- результат: невозможно корректно привязать сайт или TYPO3 “не понимает”, где сайт начинается

Base не совпадает с реальным URL

- результат: неправильные ссылки, редиректы, проблемы с языками

Забыли слэш в конце base

- результат: неожиданные проблемы со склейкой путей и ссылками

Язык добавлен, но не задано понятное поведение fallback

- результат: пустые страницы или странное поведение, когда переводов ещё нет

Что должно получиться к концу статьи

К этому моменту у вас должно быть:

корневая страница (site root) в дереве страниц

созданная Site Configuration, привязанная к этой корневой странице

настроенный base под ваш текущий домен/локальный URL

добавлен как минимум один дополнительный язык (если вы делаете многоязычный сайт) и понятные правила fallback

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

Структура страниц и навигация: Page Tree и меню

В прошлых статьях вы установили TYPO3 и настроили Site Configuration: корневую страницу, base и (при необходимости) языки. Теперь логичный следующий шаг — построить структуру страниц, потому что именно из неё TYPO3 берёт основу для навигации (меню), URL и логики, где какой контент живёт.

В этой статье вы научитесь:

понимать, как Page Tree (дерево страниц) превращается в меню

создавать страницы и подпункты, менять их порядок

управлять видимостью страниц в меню, не ломая структуру

понимать базовую связь структуры страниц и URL

Официальная документация, полезная редакторам и новичкам:

TYPO3 Tutorial for Editors

!Как дерево страниц связано с будущим меню сайта

Как Page Tree превращается в меню

Page Tree — это иерархия страниц вашего сайта в backend. Почти во всех TYPO3-проектах меню строится по простому принципу:

пункты меню берутся из дочерних страниц выбранного раздела

порядок пунктов меню соответствует порядку страниц в дереве

некоторые страницы могут быть исключены из меню настройками страницы

Важно: редактор чаще всего не рисует меню вручную. Он управляет меню через структуру и свойства страниц.

Типы страниц и зачем они нужны

Страница в TYPO3 — это контейнер в структуре, у которого есть свойства и (часто) содержимое. У страниц бывают разные типы: они подсказывают системе, как страницу вести себя во frontend.

Ниже — самые понятные для новичка типы, которые чаще всего встречаются в реальных проектах.

| Тип страницы | Что это означает простыми словами | Типичное влияние на меню | |---|---|---| | Standard (обычная) | Обычная страница с контентом | Обычно отображается как обычный пункт | | Shortcut (ярлык) | Страница-переадресация на другую страницу | В меню выглядит как пункт, но ведёт на цель | | Link to External URL (внешняя ссылка) | Пункт меню, ведущий на другой сайт | В меню ведёт на внешний адрес | | Folder (папка) | Контейнер для страниц, часто без собственного контента | Может использоваться как раздел, но поведение зависит от проекта |

Если вы не уверены, какой тип выбирать, почти всегда начинайте с Standard.

Создаём структуру сайта в Page Tree

Перед созданием страниц убедитесь, что у вас есть корневая страница сайта (site root), которую вы настроили в Site Configuration. Внутри неё и создаётся реальная структура.

Практическая логика структуры для небольшого сайта обычно такая:

Главная (root)

Разделы первого уровня (пункты главного меню)

Подразделы (выпадающее меню или внутренние страницы)

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

В Page Tree нажмите на корневую страницу сайта.

Создайте дочернюю страницу (обычно это действие доступно через контекстное меню или кнопку создания).

Укажите название страницы.

Повторите для всех разделов верхнего уровня.

Для подпунктов создавайте страницы внутри нужного раздела, чтобы они стали дочерними.

Порядок страниц = порядок пунктов меню

TYPO3 хранит порядок страниц среди соседей (страниц одного уровня). Обычно вы меняете его так:

перетаскиванием страниц мышью в дереве

кнопками сортировки или перемещения (в зависимости от интерфейса и прав)

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

Настройки страницы, которые влияют на навигацию

Одна и та же страница может:

существовать в структуре

быть доступной по прямой ссылке

при этом не показываться в меню

Это делается настройками страницы.

Скрыть страницу из меню

Обычно в свойствах страницы есть опция вида Hide in menus (скрыть в меню). Тогда:

страница остаётся частью сайта

на неё можно попасть по прямой ссылке

но она не появляется в автоматическом меню

Это полезно для:

страниц типа Политика конфиденциальности

служебных страниц

лендингов, которые не должны быть в общей навигации

Скрыть страницу целиком

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

Практическая разница:

Hide in menus скрывает только пункт навигации

скрытие страницы отключает её отображение во frontend (часто приводит к 404 или к недоступности для гостей)

Ограничения по времени и доступу

В свойствах страницы могут быть настройки:

Start и Stop (когда страница становится видимой и когда перестаёт)

доступ только для определённых групп пользователей

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

Структура и URL: что такое slug и почему он важен

Когда вы настроили Site Configuration, TYPO3 умеет строить понятные URL. Для этого каждой странице нужен читаемый путь.

В TYPO3 он обычно хранится как slug — это часть URL страницы, например:

для страницы О компании slug может быть o-kompanii

тогда URL будет похож на https://example.com/o-kompanii

Как slug связан с деревом

Частая логика такая:

у страниц одного уровня slug должен быть уникальным

slug часто генерируется из названия страницы автоматически

если вы переименовали страницу, slug может измениться (зависит от настроек проекта)

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

Мини-пример: дерево страниц и ожидаемое меню

Представим, что структура внутри корневой страницы такая:

Home

- О компании - Услуги - Консалтинг - Внедрение - Контакты - Политика конфиденциальности (скрыта в меню)

Тогда типичное поведение меню будет таким:

в главном меню: О компании, Услуги, Контакты

у пункта Услуги могут быть подпункты: Консалтинг и Внедрение

Политика конфиденциальности не показывается в меню, но доступна по ссылке (например, из футера)

Частые ошибки новичков

Страницы создаются рядом с корнем сайта, а не внутри корневой страницы — в итоге они не относятся к сайту, и меню ведёт себя странно.

Путают скрыть страницу и скрыть из меню — страница пропадает для посетителей, хотя нужно было убрать только пункт.

Пытаются «сделать меню» контент-элементами, хотя в большинстве проектов меню строится автоматически из Page Tree.

Ставят непонятные названия страниц, а потом получают неудобные URL и путаницу в навигации.

Что должно получиться к концу статьи

К этому моменту у вас должно быть:

понятная структура страниц внутри корневой страницы сайта

корректный порядок страниц на каждом уровне

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

базовое понимание, что URL страниц опирается на slug и структуру

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

Контент на страницах: блоки, изображения, формы, SEO

После настройки Site Configuration и построения структуры страниц в дереве (Page Tree) вы переходите к главному: наполняете страницы контентом так, чтобы он был удобен посетителю, понятен редактору и корректно индексировался поисковиками.

В TYPO3 это обычно делается через:

контент-элементы (блоки: текст, изображения, списки, медиа)

файлы через FAL (централизованное управление изображениями и документами)

формы (обратная связь, заявки)

SEO-поля страницы (заголовки, описание, индексация)

Полезная официальная база для новичков:

TYPO3 Tutorial for Editors

TYPO3 Form Framework Manual

TYPO3 SEO Extension Manual

!Схема показывает, где создаются и как располагаются контент-элементы на странице

Контент-элементы: «кирпичики» страницы

Контент-элемент в TYPO3 — это отдельный блок на странице, который можно:

добавлять

перемещать выше/ниже

скрывать и показывать

копировать на другую страницу

Типичные контент-элементы, которые встречаются почти в любом проекте:

Text (только текст)

Text & Media (текст + картинка/видео рядом)

Image (галерея или одиночное изображение)

Bullets / List (маркированные списки)

Table (таблица)

Название и набор элементов зависят от проекта и установленных расширений, но логика у всех одинаковая: вы собираете страницу из блоков.

Колонки и порядок блоков

Во многих проектах страница визуально делится на области, например:

Основная колонка (Main)

Сайдбар (Sidebar)

Футерная зона

С точки зрения редактора это означает:

контент-элементы добавляются в конкретную колонку

порядок в колонке обычно равен порядку отображения во frontend

Практическое правило: если блок «не там», проверьте:

в какой колонке он создан

где он стоит по порядку относительно соседних блоков

Видимость, публикация и кэш

Часто у контент-элемента есть настройки видимости:

скрыт/показан

старт/стоп по времени

доступ только для определённых групп пользователей

Если во frontend вы не видите изменения, проверьте:

не скрыт ли элемент

на той ли странице вы редактируете контент

не мешает ли кэш (иногда помогает очистка кэша в backend)

Изображения в TYPO3: как делать правильно

TYPO3 управляет файлами через FAL (File Abstraction Layer). Это значит, что изображения не «лежат внутри блока как попало», а добавляются как управляемые файлы.

!Иллюстрация объясняет, что контент-элемент хранит ссылку на файл, а не копию

Где хранить файлы

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

создайте понятные папки: images/, documents/, news/ (или по разделам сайта)

не загружайте всё в одну папку

используйте понятные имена файлов

Как вставлять изображение в контент

Самый частый сценарий:

Создать контент-элемент Text & Media или Image.

Добавить изображение через выбор файла (из хранилища) или загрузку.

Настроить отображение (позиция, размер, подпись), если это предусмотрено.

Alt-текст, подписи и доступность

Alt-текст — это текстовое описание изображения. Он важен для:

доступности (скринридеры)

SEO (поисковики лучше понимают смысл)

Практическое правило:

если изображение содержательное (поясняет текст) — пишите alt по смыслу

если изображение декоративное — в некоторых проектах его помечают как декоративное (поведение зависит от настроек)

Примеры хорошего alt:

Команда компании на мероприятии 2026 года

Схема доставки по регионам

Примеры плохого alt:

image1

картинка

Кадрирование (crop) и разные устройства

TYPO3 часто позволяет задавать crop (кадрирование) для изображения. Это полезно, потому что один и тот же файл может отображаться:

широко на десктопе

узко на мобильном

в карточке списка

Если на сайте «режет лицо» или важный объект уходит из кадра — проверьте настройки кадрирования у изображения в контент-элементе.

Формы: обратная связь без программирования

Во многих проектах TYPO3 формы создают через встроенный Form Framework (обычно это системное расширение). Редакторский смысл такой:

вы создаёте форму (поля, обязательность, сообщения)

размещаете форму на странице специальным контент-элементом

получаете заявки на email (или сохраняете по правилам проекта)

Важно: если у вас в backend нет инструментов для форм, значит:

функциональность форм не включена в проекте

у пользователя нет прав

Ориентир по возможностям и терминам: TYPO3 Form Framework Manual

Из чего состоит форма

Минимальный набор, который почти всегда нужен:

поля ввода (имя, телефон, email)

многострочное сообщение

чекбокс согласия (если требуется)

кнопка отправки

Ключевые настройки, которые важно не забыть:

какие поля обязательные

какая проверка используется (например, что email похож на email)

что видит пользователь после отправки (сообщение об успехе)

Размещение формы на странице

Обычно логика такая:

Форма создаётся и сохраняется в системе (в отдельном месте управления формами).

На нужной странице добавляется контент-элемент Form.

В элементе выбирается нужная форма.

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

SEO на уровне страницы: что редактор может сделать сам

Даже без сложной настройки шаблонов редактор может сильно повлиять на SEO, заполняя поля страницы.

В TYPO3 это часто делается через системное расширение seo и поля в свойствах страницы. Подробности: TYPO3 SEO Extension Manual

!Подсказка, какие SEO-поля обычно заполняют в свойствах страницы

Title, SEO title и заголовок на странице

В типовом проекте встречаются три разных «заголовка», и новичкам важно их не путать:

Название страницы в дереве — удобно для редактора, не всегда равно тому, что видит посетитель.

Заголовок на странице — то, что отображается в контенте как видимый заголовок.

SEO title — то, что чаще всего попадает в заголовок вкладки браузера и в сниппет поисковика.

Практический совет: делайте SEO title коротким и понятным, а видимый заголовок — более «человеческим», если нужно.

Meta description

Meta description — краткое описание страницы для поисковиков. Оно не гарантированно попадёт в сниппет, но часто используется.

Рекомендации для новичка:

пишите по смыслу страницы, а не набор ключевых слов

описывайте пользу: что человек найдёт на странице

Slug и стабильность ссылок

В прошлой статье вы уже встречали slug — часть URL страницы. Для SEO важно:

не менять slug без причины

если slug меняется, на реальном сайте часто настраивают перенаправления (обычно это делает администратор или интегратор)

Robots и индексация

У страниц часто есть настройки, влияющие на индексацию:

разрешать индексировать страницу

запрещать индексировать (например, служебные страницы)

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

Open Graph и превью в соцсетях

Во многих проектах можно указать данные для соцсетей:

заголовок для превью

описание

изображение

Это не «прямое SEO», но влияет на то, как ссылки выглядят при отправке в мессенджерах и соцсетях.

Мини-чеклист: готовность страницы перед публикацией

Структура: блоки идут в логичном порядке, нет «потерянных» элементов в другой колонке.

Изображения: файл подходящего качества, настроено кадрирование, есть alt-тексты.

Форма (если есть): обязательные поля отмечены, понятное сообщение об успехе.

SEO: заполнены SEO title и meta description, slug корректный и стабильный.

Что должно получиться к концу статьи

К этому моменту у вас должно быть:

умение собирать страницу из контент-элементов и управлять порядком/видимостью

понимание, как правильно добавлять изображения через FAL, настраивать alt и crop

базовое понимание, как подключить и разместить форму (если включено в проекте)

привычка заполнять ключевые SEO-поля страницы

Шаблоны и внешний вид: темы, Fluid, базовая кастомизация

После того как вы установили TYPO3, настроили Site Configuration, построили структуру страниц и научились добавлять контент-элементы, возникает логичный вопрос: почему сайт выглядит «пусто» или «не как на макете», и где вообще задаётся дизайн?

В TYPO3 внешний вид сайта формируется не в контент-элементах, а в шаблонах и настройках вывода. В этой статье вы разберётесь:

что в TYPO3 называют темой и почему это обычно не «переключатель темы как в WordPress»

что такое Fluid и как он связывает контент TYPO3 с HTML-разметкой

где живут шаблоны: sitepackage, layout, partial

как подключаются CSS и JavaScript

какие безопасные шаги кастомизации доступны новичку, чтобы не сломать обновления

Полезные официальные материалы:

TYPO3 Fluid Templating

TYPO3 TypoScript Reference

TYPO3 Sitepackage Tutorial

!Общая картинка: от контента в backend к итоговой странице во frontend

Как в TYPO3 устроен внешний вид

TYPO3 разделяет:

контент (то, что вы вводите в backend: тексты, изображения, элементы)

шаблон (как этот контент превращается в HTML)

стили и скрипты (CSS и JavaScript, которые делают внешний вид и интерактивность)

Это даёт главный плюс: редактор меняет контент, но не «ломает» дизайн.

Что такое «тема» в TYPO3

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

sitepackage (расширение сайта) — расширение TYPO3, которое содержит шаблоны, стили, скрипты и настройки вывода

Fluid-шаблоны — файлы, задающие HTML-разметку и места, куда подставляется контент

TypoScript — конфигурация, которая говорит TYPO3, какой шаблон использовать и как собирать страницу

Практический вывод для новичка:

если вы хотите менять внешний вид правильно, обычно делают или правят sitepackage

правки «внутри системных файлов TYPO3» делать нельзя: обновления их перезапишут

Fluid: шаблонизатор TYPO3 простыми словами

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

В Fluid вы обычно видите:

обычный HTML

специальные Fluid-теги и выражения, которые подставляют данные

Главная идея:

контент-элементы создаются редактором в backend

Fluid решает, как эти элементы вывести во frontend

Три уровня шаблонов: Template, Layout, Partial

Чтобы не копировать один и тот же HTML много раз, Fluid обычно делит шаблоны на части:

Template — шаблон конкретной страницы или типа страницы

Layout — общий каркас, например «шапка + контент + подвал»

Partial — маленький фрагмент, который переиспользуется: кусок шапки, карточка, элемент меню

Если объяснять как конструктор:

layout задаёт рамку

template кладёт в рамку содержимое

partial — это детали, которые удобно повторять

Где живут шаблоны в проекте

Есть два типичных сценария.

Сценарий для обучения и простых проектов

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

поменять логотип

поправить тексты в футере

подключить свои стили

настроить меню

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

Сценарий для реального проекта

Создают sitepackage и хранят в нём всё, что относится к сайту:

Fluid-шаблоны

CSS/JS

изображения темы (логотипы, иконки)

TypoScript-конфигурацию

Официальный учебный путь по sitepackage:

TYPO3 Sitepackage Tutorial

Как TYPO3 выбирает «какой шаблон рендерить»

Упрощённо, процесс выглядит так:

Пользователь открывает страницу во frontend.

TYPO3 определяет, какая это страница (по дереву страниц и её свойствам).

Конфигурация вывода (обычно через TypoScript) выбирает Fluid-шаблон.

Fluid-шаблон собирает HTML:

- вставляет меню - выводит контент-элементы текущей страницы - подключает стили и скрипты

Для новичка достаточно запомнить связь:

страница в дереве → набор шаблонов → итоговый HTML

Базовая кастомизация без «глубокого программирования»

Ниже — наиболее частые и безопасные правки, которые обычно доступны новичку или начинающему интегратору.

Подключение CSS и JavaScript

Чтобы изменить внешний вид, вам обычно нужно подключить свои стили.

Практические варианты (в зависимости от проекта):

CSS/JS подключаются в sitepackage через TypoScript

иногда подключение сделано прямо в layout-шаблоне

Важно понимать правило:

если вы правите CSS, это не меняет контент в TYPO3, а только внешний вид

Типовые задачи новичка:

подключить файл site.css

изменить базовые цвета, отступы, шрифты

добавить простой JavaScript для мелких эффектов, если это предусмотрено проектом

Если вы видите, что CSS «не применяется», проверьте:

очищен ли кэш TYPO3

не подключается ли другой CSS позже и не перетирает ли ваши правила

Меню: почему оно «само появляется»

В статье про Page Tree вы уже видели, что меню обычно строится из дерева страниц. На уровне шаблонов это означает:

в layout или partial есть место, где выводится навигация

TYPO3 генерирует список ссылок на основе Page Tree и свойств страниц (скрыто в меню, доступ, язык)

Новичку полезно уметь находить в шаблонах два места:

где выводится главное меню

где выводится меню футера (часто отдельное)

Как связать «колонки страницы» и шаблон

Во многих проектах редактор видит в backend разные области контента, например:

Main

Sidebar

Footer

Это не магия: шаблон ожидает контент из разных областей, а редактор добавляет элементы именно туда.

Если на странице есть блоки, но во frontend «не видно», частые причины такие:

блок добавлен не в ту область

шаблон не выводит эту область

блок скрыт

Переопределение шаблонов: как менять чужую «тему» аккуратно

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

не менять файлы расширения-поставщика

настроить TYPO3 так, чтобы она брала ваши шаблоны с приоритетом

Типичная идея (без углубления в конкретные команды и файлы):

у TYPO3 есть пути к templates, layouts, partials

если вы добавляете свой путь выше по приоритету, TYPO3 берёт ваши версии файлов

Это позволяет:

обновлять исходное расширение

не терять свои правки

Что такое sitepackage и почему это правильное место для кастомизации

Sitepackage — это расширение, которое принадлежит именно вашему сайту. Оно помогает держать всё «сайт-специфичное» в одном месте.

Что обычно входит в sitepackage:

папки Templates, Layouts, Partials

TypoScript-настройки

папка с Resources/Public для CSS/JS/картинок

Если вы работаете в команде, sitepackage почти всегда кладут в систему контроля версий (например, Git), чтобы изменения были прозрачными.

Мини-чеклист: «могу ли я менять внешний вид безопасно»

вы не правите файлы ядра TYPO3

вы не правите файлы стороннего расширения напрямую, если можно переопределить

ваши изменения лежат в sitepackage или в отдельном месте, предусмотренном проектом

после правок вы очищаете кэш и проверяете результат во frontend

Что должно получиться к концу статьи

К этому моменту у вас должно быть понимание:

что внешний вид в TYPO3 задаётся шаблонами и конфигурацией, а не контентом

что Fluid отвечает за HTML-разметку и переиспользование частей через layout и partial

почему sitepackage — типовое и безопасное место для кастомизаций

как мыслить при отладке: где лежит шаблон, где выводится область контента, как подключены стили

Публикация и поддержка: пользователи, права, обновления, бэкапы

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

В TYPO3 это обычно сводится к четырём практическим направлениям:

пользователи и роли

права доступа

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

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

Полезные официальные материалы:

TYPO3 Tutorial for Editors

TYPO3 Installation and Upgrade Guide

TYPO3 Security

!Общая карта поддержки сайта после создания

Публикация сайта: что значит выложить TYPO3

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

доступен по реальному домену

работает под боевыми настройками PHP и базы данных

должен быть защищён и обслуживаться регулярно

Для новичка важно понимать границу ответственности:

редактор отвечает за контент

администратор отвечает за пользователей, права, расширения, обновления и безопасность

интегратор/разработчик отвечает за шаблоны, кастомный код и сложные настройки

Если вы делаете небольшой проект в одиночку, вы временно совмещаете роли, но правила безопасности всё равно нужны.

Пользователи TYPO3: кто входит в backend

В TYPO3 есть разные типы пользователей. В контексте поддержки сайта вам важны именно backend users: те, кто входит в админку и управляет сайтом.

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

Зачем разделять администратора и редактора

Если все работают под админом, появляются типичные риски:

случайное удаление страниц или файлов

изменение системных настроек вместо редактирования контента

невозможность понять, кто сделал правку

Минимально здоровая схема даже для небольшого сайта:

один администраторский аккаунт только для технических задач

отдельные редакторские аккаунты для контента

Где создаются пользователи

Обычно пользователей и группы создают в административных модулях backend, где доступны операции:

создать пользователя

задать пароль

добавить в группы

ограничить доступ к модулям

настроить доступ к дереву страниц

Если вы не видите модуль управления пользователями, почти всегда причина в том, что:

вы не администратор

у вашего пользователя нет прав на этот модуль

Права доступа: как TYPO3 решает, что можно делать

Права в TYPO3 устроены так, чтобы пользователь видел и мог менять только то, что ему разрешено. Новичку удобнее воспринимать права как комбинацию четырёх слоёв.

| Слой | Что ограничивает | Типичный вопрос, который решает | |---|---|---| | Доступ к модулям | Какие разделы backend видны | Вижу ли я модуль “Файлы” или “Формы”? | | Доступ к дереву страниц | Какие страницы можно видеть и редактировать | Могу ли я править раздел “Услуги”? | | Права действий | Что именно можно делать | Могу ли я создавать страницы, удалять, публиковать? | | Доступ к файлам | Какие папки в хранилище видны | Могу ли я загрузить картинки в нужную папку? |

!Упрощённое представление, из чего складываются права

Группы пользователей: самый удобный способ управлять правами

В реальных проектах права почти всегда задают через группы, потому что так проще:

вы настраиваете правила один раз для группы

добавляете пользователей в нужную группу

при смене сотрудника вы просто отключаете старого пользователя

Пример понятной групповой модели:

Editors — редактируют контент в своём разделе

SEO editors — дополнительно имеют доступ к SEO-полям и нужным модулям

Administrators — полный доступ

Стартовый набор прав для редактора

Если вы настраиваете права новичку-редактору, обычно нужно:

доступ к модулю редактирования страниц и контента

доступ к ограниченной части дерева страниц

доступ к файлам только в свои папки

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

Типовые симптомы неправильных прав

нет кнопки Создать на странице

не видно нужной папки для загрузки изображений

не отображается модуль, по которому вы ожидаете работать

Почти всегда это не ошибка TYPO3, а следствие настроенных прав.

Публикация изменений: что должен знать редактор

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

Кэш: почему вы сохранили, но “не поменялось”

TYPO3 использует кэширование, чтобы сайт работал быстрее. Типичный практический алгоритм:

сохранили контент

проверили страницу во frontend

если не обновилось, очистили кэш

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

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

Для страниц и контент-элементов часто можно задать:

время начала показа

время окончания показа

Это удобно для акций и новостей, но создаёт типовую путаницу: контент “есть в админке”, но он ещё не должен отображаться.

Workspaces: когда нужен процесс согласования

В TYPO3 есть механизм workspaces: это режим, где можно готовить изменения и публиковать их позже после проверки. Для новичкового курса достаточно идеи:

в некоторых проектах редактор не публикует изменения напрямую

изменения сначала попадают в черновик, а потом утверждаются

Если на вашем сайте внедрён такой процесс, администратор обычно объясняет правила работы редакторам отдельно.

Обновления TYPO3: ядро, расширения, PHP

Поддержка TYPO3 почти всегда включает обновления. Важно различать, что именно вы обновляете.

ядро TYPO3

расширения

окружение: PHP, база данных, веб-сервер

Главный официальный ориентир: TYPO3 Installation and Upgrade Guide.

Почему обновления важны

безопасность: закрываются уязвимости

совместимость: новые версии PHP и браузеров

стабильность: исправляются ошибки

Базовый безопасный подход к обновлениям

Сделать резервную копию перед любым обновлением.

Обновлять сначала на тестовой среде, а не сразу на боевом сайте.

Проверять сайт после обновления: главная, меню, формы, поиск, языки.

Обновлять расширения только совместимых версий.

Где смотреть информацию по безопасности

Для понимания уровня серьёзности обновлений и рекомендаций полезны официальные источники:

TYPO3 Security

Практическое правило: если выходит критическое обновление безопасности, его не откладывают.

Бэкапы: что именно нужно копировать

Резервная копия для TYPO3 почти всегда состоит из двух частей:

база данных: страницы, контент, пользователи, настройки

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

Если у вас есть только одно из двух, восстановление может быть неполным.

!Памятка: бэкап — это БД плюс файлы

Какие файлы особенно важны

С точки зрения новичка, чаще всего критичны:

загруженные медиафайлы, с которыми работает редактор

конфигурация проекта и шаблоны, которые формируют внешний вид

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

Стратегия бэкапов на понятном уровне

Для небольшого сайта разумный минимум:

ежедневный автоматический бэкап базы данных

ежедневный или регулярный бэкап файлов

хранение копий не только на сервере, но и отдельно

Полезная практика: периодически проверять, что бэкап реально можно восстановить, а не просто “он где-то создаётся”.

Мини-чеклист поддержки для новичка

у редактора есть свой backend-пользователь

редактор состоит в группе, которая ограничивает права

у редактора есть доступ только к нужным страницам и папкам

известно, где очищать кэш и когда это делать

перед обновлениями делается резервная копия

бэкап включает базу данных и файлы

Что должно получиться к концу статьи

К этому моменту вы должны:

понимать, зачем разделять администратора и редакторов

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

иметь базовую стратегию обновлений: тест, бэкап, проверка

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