Гиркало Вадим - программист фрилансер и разработчик (freelancer, developer) сайтов на TYPO3

и для TYPO3:

Думаю, что само-собой понятно, что домены phpmyadmin.example.com и typo3_7.com я добавил в hosts:

127.0.0.1 phpmyadmin.example.com
127.0.0.1 typo3_7.com

После перезапуска apache мои локальные сайты заработали под именами phpmyadmin.example.com и typo3_7.com.

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

Я сделал всё по аналогии. В директории app создал еще одну папку - typo3test, залил в неё содержимое папки apps/typo3, удалил всё содержимое htdocs и typo3_src, исправил все пути в конфигурационных файлах директории typo3test/conf и проделал установку TYPO3 с нуля по всем правилам. Т.е. в typo3_src распаковал ядро от 6.3.14, а в htdocs сделал симлинки на typo3_src. Windows 8 позволяет делать симлинки специальной командой - mklink. Вот эти команды:

Про создание БД я не пишу, там всё понятно. Паролем root-а от mysql, будет тот пароль который вы вводили на этапе установки Bitnami.

В целом установка проходит гладко. Но...

Настройка ImageMagick

Когда я пошел в InstallTool/Test setup, чтобы проверить работу ImageMagick, который исправно работает для директории apps/typo3, я с удивлением обнаружил что тут, в папке apps/typo3test он уже не работает, хотя пути к IM я прописал точно такие же как и для первого экземпляра TYPO3. И тут началось...

Для начала я поставил IM как отдельное приложение. Скачал ImageMagick-6.9.1-9-Q16-x86-dll.exe с родного сайта и установил его. Это проблему не решило, хотя convert.exe запускался из командной строки на раз.

После нескольких часов изысканий я обнаружил интересный факт. Когда выполняешь команду: convert.exe -verbose pic-1.jpg pic-1.png от лица администратора компьютера - утилита работает, а если от обычного пользователя, то выдает ошибку: convert.exe: no decode delegate for this image format...

Но, что интересно, так было с convert.exe от Bitnami (C:\Bitnami\typo3\imagemagick\convert.exe), но не с convert.exe от IM, который в любой ситуации отрабатывал без проблем.

Поскольку я не являюсь знаком Windows, то я не стал искать причину такого странного поведения, а поступил очень просто - прописал в TYPO3 пути к другой версии IM. А именно, в файле typo3conf\LocalConfiguration.php сделал такие настройки:

'GFX' => array(
'colorspace' => 'RGB',
'im' => 1,
'im_mask_temp_ext_gif' => 1,
//'im_path' => 'C:/Bitnami/typo3/imagemagick/',
//'im_path_lzw' => 'C:/Bitnami/typo3/imagemagick/',
'im_path' => 'C:/Program Files (x86)/ImageMagick-6.9.1-Q16/',
  'im_path_lzw' => 'C:/Program Files (x86)/ImageMagick-6.9.1-Q16/',
'im_v5effects' => 1,
'im_version_5' => 'im6',
'image_processing' => 1,
'jpg_quality' => '80',
),

До конца не поверив, что решение так быстро найдено, я почитал мануал по IM и наткнулся на такой текст:

# Enable URL rewriting
RewriteEngine On
# Change this path, if your TYPO3 installation is located in a subdirectory of the website root.
RewriteBase /

# Прошу прощения если я не так поставил слэш. Уже не помню как правильно :).
# Попробуйте разные варианты и напишите!
RewriteBase /new

4. Базовая настрока RealURL

После того как плагин установлен, о чем говорит зеленая пиктограммка, нужно его сконфигурировать.





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

Итак, для ручной настройки RealURL направляемся в папку typo3conf. Удаляем или переименовываем файл автоматической конфигурации - realurl_autoconf.php. Создаем новый файл конфигурации - realurl_conf.php. Скопируем в этот файл базовые настройки:

<?php
$TYPO3_CONF_VARS['EXTCONF']['realurl']['_DEFAULT'] = array(
        'init' => array(
            'enableCHashCache' => 1,
            'appendMissingSlash' => 'ifNotFile',
            'enableUrlDecodeCache' => 1,
            'enableUrlEncodeCache' => 1,
            'respectSimulateStaticURLs' => 0,
            'postVarSet_failureMode'=>'', // необходимо для работы error 404        ),
    'redirects_regex' => array (
 
    ),
    'preVars' => array(
                        array(
                                'GETvar' => 'no_cache',
                                'valueMap' => array(
                                    'no_cache' => 0,
                                ),
                                'noMatch' => 'bypass',
                        ),
                         array(
                             'GETvar' => 'L',
                             'valueMap' => array(// необходимо для мультиязычных сайтов
                                                'ua' => '0', 'ru' => '1',  /*'en' => '2', 'de' => '3',*/                                        ),
                                'noMatch' => 'bypass',
                        ),
                ),
     'pagePath' => array(
            'type' => 'user',
            'userFunc' => 'EXT:realurl/class.tx_realurl_advanced.php:&tx_realurl_advanced->main',
            'spaceCharacter' => '-',
            'languageGetVar' => 'L', // необходимо для мультиязычных сайтов            'expireDays' => 7,
    //'segTitleFieldList'    => 'name,username,tx_realurl_pathsegment,alias,nav_title,title',
            'rootpage_id' => 1, // необходимо установить значение uid рутовой страницы сайта!        ),

      'postVarSets' => array(
            '_DEFAULT' => array(
                // tt_news archive parameters
                'archive' => array(
                    array(
                        'GETvar' => 'tx_ttnews[year]' ,
                        ),
                    array(
                        'GETvar' => 'tx_ttnews[month]' ,
                            'valueMap' => array(
                            'january' => '01',
                            'february' => '02',
                            'march' => '03',
                            'april' => '04',
                            'may' => '05',
                            'june' => '06',
                            'july' => '07',
                            'august' => '08',
                            'september' => '09',
                            'october' => '10',
                            'november' => '11',
                            'december' => '12',
                            )
                        ),
                ),                 // tt_news categories
                'category_name' => array (
                    array(
'GETvar' => 'tx_ttnews[cat]',
'lookUpTable' => array(
'table' => 'tt_news_cat',
'id_field' => 'uid',
'alias_field' => 'title',
'addWhereClause' => ' AND NOT deleted',
'useUniqueCache' => 1,
'useUniqueCache_conf' => array(
'strtolower' => 1,
'spaceCharacter' => '-',
),
), ),                 ),
                // tt_news articles and searchwords
                'article' => array(
                    array(
                        'GETvar' => 'tx_ttnews[tt_news]',
                        'lookUpTable' => array(
                            'table' => 'tt_news',
                            'id_field' => 'uid',
                            'alias_field' => 'title',
                            'addWhereClause' => ' AND NOT deleted',
                            'useUniqueCache' => 1,
                            'useUniqueCache_conf' => array(
                                'strtolower' => 1,
                                'spaceCharacter' => '-',
                                ),
                            ),
                        ),
                    array(
                        'GETvar' => 'tx_ttnews[swords]',
                        ),
                    ),
                ),          
            ),
      'fileName' => array(
            'defaultToHTMLsuffixOnPrev'=>0, // сделайте 1, чтобы все страницы заканчивались суффиксом .html            'index' => array(
                'rss.xml' => array(
                    'keyValues' => array(
                        'type' => 100,
                    ),
                ),
                'rss091.xml' => array(
                    'keyValues' => array(
                        'type' => 101,
                    ),
                ),
                'rdf.xml' => array(
                    'keyValues' => array(
                        'type' => 102,
                    ),
                ),
                'atom.xml' => array(
                    'keyValues' => array(
                        'type' => 103,
                    ),
                ),
            ),
        ),
 );
?>

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

Хочу обратить внимание на параметр 'rootpage_id'. Не всегда корневая страница сайта имеет id равный 1! Поэтому обязательно проверяйте этот момент и устанавливайте верное значение. Для тех, кто еще не знает как узнать id страницы TYPO3 скажу, что есть несколько способов. Один из них - просто навести курсор мышки на иконку страницы или её название. Другой - заглянуть в свойства страницы:

5. Дополнительные настройки RealURL

Остановлюсь более подробно на 3-х моментах, требующих более "тонкой" настройки RealURL

• Настройки для нескольких доменов
  TYPO3 позволяет содержать несколько сайтов, а соответственно и несколько доменов, в рамках одной админки. Например, организация имеет свои филиалы, которые находятся в разных странах, каждый из которых имеет свой отдельный сайт. Скажем, украинский филиал имеет сайт - www.domain.ua, а немецкий  - www.domain.de.
  В таком случае realurl_conf.php будет иметь 2 ветки настроек.
  Для начала, обратите внимание, что первая строка конфигурационного файла сейчас выглядит так:
  
  $TYPO3_CONF_VARS['EXTCONF']['realurl']['_DEFAULT'] = array(...
  
  Но мы можем заменить её на эквивалентную строку:
  
  $TYPO3_CONF_VARS['EXTCONF']['realurl']['domain.ua'] = array(...
  
  Аналогично, для другого домена просто создаем дополнительный блок настроек, который будет начинаться со строки:
  
  $TYPO3_CONF_VARS['EXTCONF']['realurl']['domain.de'] = array(...
  
  Таким образом, результирующий файл будет выглядеть примерно так:
  
  $TYPO3_CONF_VARS['EXTCONF']['realurl']['domain.ua'] = array(... параметры ...);
  $TYPO3_CONF_VARS['EXTCONF']['realurl']['domain.de'] = array(... параметры ...);
  
  или так:
  
  $TYPO3_CONF_VARS['EXTCONF']['realurl'] = array (
  'domain.ua' => array (
                    ........
          )
  'domain.de' => array (
                    ........
          )
  );
• Настройки для sitemap.xml
  Для sitemap.xml в TYPO3, как правило, создают отдельный тип страниц, например type=200. Т.е. содержимое sitemap.xml можно увидеть по адресу - http://www.domain.com?type=200. Для того, чтобы карту сайта можно было получить по традиционному урлу - http://www.domain.com/sitemap.xml необходимо внести небольшие изменения в секцию 'fileName' файла realurl_conf.php (после секции "atom.xml", например):

'sitemap.xml' => array(
                    'keyValues' => array(
                        'type' => 200,
                    ),
                ),

• Настройки под конкретный плагин
  
  Теперь самое интересное. Все видели какие урлы генерируют плагины. Ну, например:
  http://www.domain.com/downloads?tx_myplugin_pi1[feusersUsername]=2
  Сегмент урла - tx_myplugin_pi1[feusersUsername]=2 выглядит ужасно. Допустим, что его задача указать плагину на какого-то зарегистрированного на сайте пользователя, имеющего в таблице fe_users uid=2. Приведем url к "нормальному" формату:
  http://www.domain.com/downloads/username/stepan/
  Для этого в realurl_conf.php в секции 'postVarSets', внутри '_DEFAULT', добавим следующие строки:

'username' => array (
array (
'GETvar' => 'tx_myplugin_pi1[feusersUsername]' ,
'lookUpTable' => array (
'table' => 'fe_users',
'id_field' => 'uid',
'alias_field' => 'name',
'addWhereClause' => ' AND NOT deleted AND NOT hidden',
'useUniqueCache' => 1,
'useUniqueCache_conf' => array (
'strtolower' => 1,
'spaceCharacter' => '-',
),
),
),
),

• 
  Если вдумчиво поглядеть в эти "магические" строки, то можно понять как RealURL выполняет замену и подстановку параметров. Правильно! Он делает запрос к таблице fe_users, ищет строку с uid=2, и берет значение поля name. После выборки имени пользователя его имя переводится в нижний регистр, а все пробелы заменяются знаком '-'. Вот и всё!
  Если вы посмотрите на мои базовые настройки RealURL, то увидите аналогичный блок, который я выделил курсивом -  'article' => array(... Эти директивы делают абсолютно тоже самое, что и вышеприведенный пример. Только запрос делается к таблице базы данных - tt_news, а для алиаса используется значение поля - title.
  
  Один из вариантов готового конфигурационного файла можно скачать с моего сайта - realurl_conf.

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

<?php
     if (!defined('_SAPE_USER')){
        define('_SAPE_USER', '8asdfsg78675sdfg567huyt565v654654a');
     }
     require_once(realpath($_SERVER['DOCUMENT_ROOT'].'/'._SAPE_USER.'/sape.php'));
     $sape = new SAPE_client();
     echo $sape->return_links()
?>

Казалось бы все просто, но на самом деле не так. TYPO3 из соображений безопасности запрещает нам внедрять такой код на свои страницы, даже если мы выбираем тип контента - Plain HTML (HTML код). Поэтому, возникает вопрос - что же делать? 

Рассказываю:

1. Необходимо зарегистрировать на SAPE новую площадку

2. В процессе регистрации новой площадки нужно скачать саповский архив, в котором лежит PHP-файл - sape.php...

... а также внимательно читаем инструкцию по установке данного php-файла на нашем веб-сервере.

3. После установки sape.php, наша TYPO3 директория выглядит примерно так:

4. Теперь нужно позаботиться о том как подключить саповскую библиотеку - sape.php, и вывести ссылки с помощью функции return_links().

Чтобы подключить сапу на каждую страницу сайта можно использовать конфигурационный файл - typo3conf/localconf.php. Добавляем в этот файл следующие строки:

global $sape;
if (!defined('_SAPE_USER')){
    define('_SAPE_USER', '8asdfsg78675sdfg567huyt565v654654a');
}
require_once(realpath($_SERVER['DOCUMENT_ROOT'].'/'._SAPE_USER.'/sape.php'));
$sape = new SAPE_client();

Обратите внимание, мы создали глобальную переменную $sape и присвоили ей экземпляр класса.

Далее создаем в директории fileadmin новый php-файл - sape-links.inc  (где вам удобно, например fileadmin/sape/sape-links.inc, расширение файла именно INC!), который  будет содержать следующие строки для вывода списка или блока ссылок:

<?php
global $sape;
echo "<div class='sape'>";
//$output = $sape->return_links();
$output = $sape->return_block_links();
$output = iconv('windows-1251','utf-8',$output); // перекодировку в utf8 можно сделать и саповскими параметрами, см. документацию
echo $output;
echo "</div>";
?>

Файл который будет выводить саповские ссылки - готов. Осталось последнее - вставка этого файла в контент. Для этого используем плагин - lumophpinclude.

Этот экст легко устанавливается, однако в связи с тем, что lumophpinclude уже давно не обновлялся, он не устанавливается на последние версии TYPO3, ругаясь на несоответствие версии системы. Причина в следующем. Если заглянуть в файл ext_emconf.php плагина (путь - typo3conf/ext/lumophpinclude/ext_emconf.php), то мы там сможем увидеть такие строки:

Как видим, когда экст последний раз обновлялся, то автор предполагал, что он будет работать на всех версиях TYPO3 вплоть до версии - 4.2.99. Расширим этот интервал и заменим 4.2.99 на 6.2.99, например. Теперь в менеджере расширений (Extension Manager) можно нормально активировать данный плагин (нажать плюсик). К фатальным последствиям этот "хак" меня еще никогда не приводил, но на всякий случай поглядывайте в deprication.log.

Теперь можно подключить этот плагин и к TYPO3 шаблону:

Чтобы разместить lumophpinclude на странице сайта - выбирайте вставку плагина и настраивайте его. Вот так, можно подключить наш sape-links.inc на отдельной странице:

Хочу обратить внимание, что если вы внесете какие-либо изменения в исходный код файла sape-links.inc, то эти изменения не вступят в силу. И если не разобраться, то это может поставить в тупик. Дело в том, что после выбора php-файла, как это показано на рисунке выше, плагин копирует его в свою служебную директорию - uploads/tx_lumophpinclude/sape-links.inc, после чего работает именно с данной копией файла. Лично я переименовывал тот файл который находился в папке fileadmin и заново выбирал его в настройках плагина.

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

• В любой из системых папок создать запись контента с типом - Plugin->Lumophpinclude
• Создать новый тайповский lib объект в TYPO3 шаблоне, например:

# SAPE
lib.sape = RECORDS
lib.sape.tables = tt_content
lib.sape.source = 902 # где 902 - номер контентной записи

• Закрепить (подмапить) lib объект к какому-то html фрагменту страницы. Как это выполнить - это уже на ваше усмотрение. Тут все зависит от вашего шаблонизатора.

Так что же такое Fluid? 100%, что многие, наверняка, слышали это словечко, но до конца не понимали, о чем идет речь. Не знаю почему, но чаще всего люди думают, что fluid это нечто необходимое для написания современных экстеншенов (плагинов) для Typo3. Но это не так. Это нечто вовсе не флюид, а - extbase. А fluid это, всего-навсего, новый механизм шаблонирования или шаблонизатор, как я часто выражаюсь, такой же как automaketemplate и templavoila. Расширения написанные с помощью extbase используют fluid для шаблонизации вывода.

Чем же хорош флюид и почему перейдя на него я не хочу ничего другого? Отвечаю, флюид лишен всех тех недостатков, которыми обладают automaketemplate и templavoila. Я бы сказал, что fluid это симбиоз этих двух шаблонизаторов, который, к тому же, наделён и множеством дополнительных возможностей о которых я как-нибудь расскажу.

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

Итак, превратим сверстанные html файлы в шаблоны Typo3 при помощи fluid.

Считаем, что мы только что установили Typo3 и папка fileadmin - пуста. Переходим в fileadmin и создаем в ней следующие директории:

templates, а внутри templates поддиректории - css, js, images - это стандартное хранилище тех файлов, которые создал верстальщик. Если есть желание или необходимость то сами html файлы можно скопировать в корень fileadmin\templates\. Но я этого не делаю, чтобы они не мозолили глаза. 

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

layouts, pages и partials. 

Объясню назначение каждой из них. 

Каким бы ни был дизайн наших страниц (двух-, трех-колоночный или еще что-то) у всех страниц есть общие блоки - header, content, footer и т.д. После того как общие блоки выявлены, на базе наших сверстанных файлов в папке layouts создаем 1 файл - default.html, который может выглядеть примерно так:

<header>
<div id="header" class="header-bg">
<div class="wrap">
<!-- Здесь будет лого --><f:cObject typoscriptObjectPath="lib.logo" />
<!-- Место для меню сайта --><f:cObject typoscriptObjectPath="lib.sitemenu" />
</div>
</div>
</header>
<!--end header-->
    <div id="main">
<div class="wrap">
<!-- Бредкрамб будет тут --><f:cObject typoscriptObjectPath="lib.breadcrumb" />
<div class="clear"></div>
<!-- Область контента --><f:render section="Body" />
</div>
</div>
<!-- end content -->
<footer>
<!-- Копирайт --><f:render partial="site_footer" />
</footer>  
<!--end footer-->

Как видим, содержимое данного файла представляет собой кастрированную версию исходного html-файла. Идея такой кастрации такова, что вместо динамического контента мы подставляем либо имена  объектов Typo3 (например, lib.sitemenu или lib.copyright), либо имена html-секций (например, section="Body"), которые описываются файлами из директории pages, либо имена html-партиалсов (например, partial="site_footer"),  которые описываются файлами из директории partials. Я думаю, что истинные любители Typo3 глядя на этот маленький кусочек html-шаблона уже поняли всю прелесть fluid.

Т.к. наш layout содержит секцию Body - <f:render section="Body" />, то мы должны описать её.

Однако тут не все так просто. По-сути, данная секция отвечает за отображение основного контента сайта, а контент как известно бывает разный. Рассмотрим случай когда контент размещается на странице в одной или двух колонках. Для этого в данной директории создаем 2 файла: 1Columns.html и 2Columns.html.

Содержимое 1Columns.html:

<f:layout name="default" />
<f:section name="Body">
<div class="col">
{content -> f:format.raw()}
</div>
<!--end col-->
</f:section> 

Содержимое 2Columns.html:

<f:layout name="default" />
<f:section name="Body">
<div class="left-col">
{content -> f:format.raw()}
</div>
<!--end left-col-->
<div class="right-col">
{content_right -> f:format.raw()}
</div>
<!--end right-col-->
</f:section>

Что означает {content -> f:format.raw()} я опишу ниже. А сейчас хочу обратить внимание на некоторые очень важные вещи. Все настройки fluid чувствительны к регистру! Если в файле layouts\default.html написано section="Body", то в файлах 1Columns.html и 2Columns.html имя этой секции тоже должно начинаться с большой буквы. Следующий важный момент. Обратите внимание на первую строку для 1Columns.html и 2Columns.html. Она одинаковая для обоих файлов и может даже показаться магической - почему именно layout name="default"? Да потому, что слово "default" не что иное как своеобразная ссылка на файл layouts\default.html.

Папка partials

Напомню, что наш файл шаблона - layouts\default.html вместо футера содержит ссылку на html-фрагмент (partials) при помощи тега - <f:render partial="site_footer" />. Как вы уже догадались - партиалы описываются здесь, в этой директории. Но происходит это несколько иначе чем с секциями (см. выше). Достаточно создать файл partials\site_footer.html и его содержимое сразу же попадет в основной шаблон. Вот пример партиала:

<div class="copyright">
        <div class="f-left">
          <address>
          <f:cObject typoscriptObjectPath="lib.copyright" />
          </address>
        </div>
        <div class="f-right">
          <address>
          <f:cObject typoscriptObjectPath="lib.company" />
          </address>
        </div>
</div>

Как видим, партиалы это тоже не статический фрагмент html-кода, и он также может содержать ссылки на объекты Typo3, которые создаются с помощью typoscript.

Ну вот и все, наша страница разбита на элементарные составляющие или иными словами она - размэплена. Первая часть марлизонского балета закончена - html-шаблон готов.

2. Настройка backend_layout  

Для того, чтобы администратору или редактору в админке (BE) было проще и удобнее редактировать контент, в Typo3 придумали backend_layout-ы. Т.к. мы имеем дело с двумя вариантами дизайна (в 1 или в 2 колонки), то подготовим соответственно две записи backend_layout в системной папке - SF Global layout, которую я создал ранее.

Режим редактирования backend_layout имеет 2 режима работы - графический и текстовый:

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

Так или иначе, но в итоге, для одно-колоночного дизайна поле Config должно содержать:

backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Main content
colPos = 0
}
}
}
}
}

а для двух-колоночного дизайна:

backend_layout {
colCount = 3
rowCount = 1
rows {
1 {
columns {
1 {
name = Main content
colspan = 2
colPos = 0
}
2 {
name = Right content
colPos = 1
}
}
}
}
} 

Если вы внимательно посмотрите на последнее определение бэкенд-лайаута, то можете удивиться и задать себе вопрос - зачем же нужно ставить colCount = 3, если колонок то всего две? Но посмотрите ниже и вы увидите, что для первой (левой) колонки имеется параметр - colspan = 2 (прям как в html-таблицах). Таким образом, мы получаем 2 колонки как и планировали, но ширина левой будет в 2 раза шире, чем ширина правой колонки. Я это сделал для того, чтобы бэкенд мне сильнее напоминал внешний вид FE-страниц.


После создания каждого backend_layout записывайте сразу id каждой новой записи, т.к. это нам скоро пригодится.

Чтобы присвоить странице любой из этих лайаутов необходимо перейти в свойства страницы и на закладке Appearence найти параметр Backend Layout (this page only) и выбрать из выпадающего списка нужную строку.

Я думаю, что вы согласитесь с тем, что данный вид более приятен и реалистичен чем те 4 колонки, которые нам даются по-умолчанию:

3. Создаем Typo3-шаблон