Russian TYPO3 community - как я делал сайт с Imgmenu

И так, после того, как я не смог получить ответ на заданный мной вопрос, прошло достаточно много времени. Я решил сделать небольшой FAQ по тому как я создавал сайт.

Задача: Сайт, с двумя типами меню и простым контентом. Одно меню относится к классу TMENU, а другое к IMGMENU.

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

И так, я помещаю ссылку на сайт, который уже функционирует и немного дорабатывается.
http://www.quadratis.ru

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

И так, пошагово начинаем делать настройки
- Charset базы данных должен быть utf-8
- Заходим в InstallTool -> All Configuration, там сыставляем следующие значения:

image_processing = 1 (то есть включить)
gdlib = 1
gdlib_2 = 1
jpg_quality = (1-100) здесь соответственно вашим графическим файлам
forceCharset = utf-8

после сего нажимаем кнопку сохранить и переходим дальше. Отмечу, что в Image Processing должны работать все тесты GD library functions, если не работают, проверьте настнойки и активность GDLib или узнайте, стоит ли на сервере это расширение php. То же относится и к ImageMagick.

Предположим что html шаблон уже готов и загружен на сервер.
Начинаем заполнять TS код шаблона:

Constants:
Тут у меня настройки специфических экстеншенов, я не буду здесь их указывать, дабы не путать.

Setup:

Код:

config {

spamProtectEmailAddresses = 2

spamProtectEmailAddresses_atSubst = (at)

language = ru

locale_all = ru_RU

renderCharset = utf-8

}

Здесь мы сделали следующее Защищаем наши e-mail адреса от спамеров и выставляем язык по умолчанию, а так же чарсет с которым будет рендерится контент.

Дальше:

Код:

page.meta.KEYWORDS.field = keywords

page.meta.DESCRIPTION.field = description

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

Дальше:

Код:

page = PAGE

page.typeNum = 0

page.stylesheet = fileadmin/путь_к_шаблону/main.css

Здесь создаем объект page и указываем, что он дочерний от объекта PAGE
Так же указываем тип страницы и путь к файлу стилей

Дальше:

Код:

page.10 = TEMPLATE

page.10 {

template = FILE

template.file = fileadmin/путь_к_шаблону/template.htm

workOnSubpart = DOCUMENT

subparts.CONTENT <styles.content.get

subparts.HEADER = TEXT

subparts.HEADER.field = nav_title





<!--код основного меню IMGMENU -->



<!--код верхнего меню TMENU -->



}

Пояснения:
Назначаем объекту page параметр TEMPLATE, указываем что это будет файл и прописываем путь к нему.
Затем "говорим" что начинаем считать шаблон для использования код между метками . То есть:

Код:

<!--###DOCUMENT###-->



...тут html код шаблона





<!--###DOCUMENT###-->

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

subparts.CONTENT <styles.content.get этот параметр указывает на создание метки CONTENT и присвоение ему контента из колонки по умолчанию (NORMAL) для того чтобы это работало нужно открыть полнуя запись шаблона, кликнув по ссылке Click here to edit whole template record и в разделе Include static (from extensions) перенести из Items в Selected SCC Styled Content.

Возвращаемся к полю Setup.
subparts.HEADER = TEXT - указывает на создание метки HEADER и показывает что метка будет иметь текстовое значение

subparts.HEADER.field = nav_title здесь указываем откуда будем брать значение для метки HEADER, в данном случае поле Navigation title

И так, перешли непоредственно к меню. В коде мои комментарии заменяете на ниже преведенный код.


После каждой строки оставляю комментарии:

Код:

subparts.menu = HMENU

// Создаем метку menu

subparts.menu.maxItems = 8

// Указываем максимальное калочество пунктов

subparts.menu.entryLevel = 0

// Указываем уровень вхождения в меню

subparts.menu.1 = IMGMENU

// Указываем тим меню, в данном случае IMGMENU

subparts.menu.1.imgMapExtras = <AREA SHAPE="rect">

// указываем тип области для ссылки

subparts.menu.1 {

  main.format = jpg

// пормат вывода изображения

  main.XY = [10.w],[10.h]

// назначаем размер изображения по реальной величине элемента 10

  main.10 = IMAGE  

// Указываем что элемент 10 это картинка

  main.10.file = fileadmin/путь_к_шаблону/template_07.jpg 

// ..а это путь к ней

  dWorkArea = 1,195

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

  fontFile = fileadmin/fonts/tahoma.ttf  

// Если применяем шрифт, то указываем какой и откуда, по умолчанию аналог Arial

  NO.distrib = 4,26  

//Самое интересное, 4 - отступ каждого нового пункта отначала предыдущего (пикселы), 26 - расстояние между пунктами по оси Y

  NO.10 = TEXT

//Указываем тип данных для пунктов меню, в данном случае текст

  NO.10 {

    text.field = nav_title

// Берем текст из поля Navigation title

    fontSize = 13

// Задаем размер шрифта

    fontColor = #B8DBEF

// Его цвет

    offset = 0,0

// Смещение от начала рабочей области

    imgMap.explode = 3,2

//увеличиваем карту ссылки по осям X,Y

    angle = 7

// поворачиваем на 7 градусов

    iterations = 2

// накладываем текст сам на себя для придания эффекта жирного шрифта

    }

 

// тут тоже что и в элементе 10, за исключением поророта и цвета шрифта 

  NO.20 = TEXT

  NO.20 {

    text.field = nav_title

    fontSize = 13

    fontColor = #5b504f

    niceText = 0

    offset = 0,0

    imgMap.explode = 3,2

    

    }



}

Поясню, элемент 10 создавался для организации тени от элементов меню, в то время как элемент 20 как сами элементы меню, делалось так для того, чтобы не было наложения тени на элементы меню.

Код:

subparts.topmenu = HMENU 

// создаем  метку topmenu

subparts.topmenu.special = directory 

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

subparts.topmenu.special.value = 2

// указываем что корнем меню будет страница с id 2

subparts.topmenu.1 = TMENU

// указываем тип меню - текстовое

subparts.topmenu.1 {

   NO.allWrap = <span class="topmenu-no"> |&nbsp;&#x7C;&nbsp; |*||*| | </span>

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

   ACT = 1

   ACT.allWrap = <span class="topmenu-act"> |&nbsp;&#x7C;&nbsp; |*||*| | </span>    

// то же самое, только для активного пункта меню

   }

Ну вот в общем то и все, если будут вопросы пишите. Если я где то ошибся прошу профи подправить если что :)