Эту статью подготовил Андрей (aka andreyv), поэтому все лучи добра за нее — ему. Это подробная пошаговая инструкция, как адаптировать старый шаблон под версию 1.1 с учетом всех нюансов, чтоб полностью использовать весь функционал, заложенный в новой версии.
В качестве примера взят шаблон Start-kit для версии 1.0 и на каждом шаге в него вносятся изменения, связанные с тем или иным функционалом движка. И при этом Андрей не просто описывает, какие правки вносятся и почему, но еще и демонстрирует их, фиксируя каждый этап в отдельном гит-репозитории:
https://github.com/andrey-v/start-kit-old/commits
Таким образом, каждый шаг — это отдельный коммит. И по истории коммитов вы можете увидеть не только какие файлы изменяли, а что именно менялось в этих файлах.
В общем, на мой взгляд, отличная работа и прекрасное пособие для тех, кто занимается версткой под Альто.
Заголовки кликабельны и ведут на соответствующие этапы репоизитория
Шаг 1. Изменение версии
Это скорее косметический шаг, но сделать его нужно. Для этого в файле common/templates/skin/start-kit-old/skin.xml заменим версию на 2.0.0 и название на Start Kit – 2 и требуемую версию Альто на 1.1.Шаг 2. Добавление стилевого файла
Для удобства все стилевые добавления будут собраны в файле common/templates/skin/start-kit-old/assets/css/compatibility.cssШаг 3. Загрузка изображений для блога
Из-за нового механизма работы с изображениями в версии 1.1 поменялся способ работы с аватаром блога. Аватар вынесен из формы редактирования блога в отдельный виджет. Для адаптации этой страницы нужно:1. Добавить виджет загрузки изображений common/templates/skin/start-kit-old/tpls/widgets/widget.blogAvatar.tpl
2. Удалить старый блок загрузки изображения — common/templates/skin/start-kit-old/tpls/actions/blog/action.blog.add.tpl
3. Добавить «пустую картинку» — common/templates/skin/start-kit-old/themes/default/img/empty_blog_image.png
4. Добавить стилевое оформление для виджета
Шаг 4. Именованные размеры изображений
В новой версии для удобства манипуляции с изображениями их размеры заданы не числами, а символическими обозначениями. Для добавления этого механизма нужно:1. В файле конфигурации темы добавить нужные размеры.
2. Заменить все вхождения числовых обозначений размеров на соответствующие символические;
Шаг 5. Запрет комментирования пользователям блога
В админке блога был добавлен механизм запрета пользователям комментирования топиков в блоге. Для отображения этих изменений в шаблоне необходимо в шаблоне администрирования блога добавить соответствующие колонкиШаг 6. Перенос рейтинга в плагины
https://github.com/andrey-v/start-kit-old/commit/bc21e5389c3430e4f0e3be784d0860bee10c744ehttps://github.com/andrey-v/start-kit-old/commit/63c07f0a34ff1415f68253546c074bc8040f408d
Так как в версии 1.1. рейтинг перенесён в плагины, то необходимо убрать все вхождения элементов рейтинга в шаблоне. Вхождения рейтинга находятся в этих файлах:
1. start-kit-old/tpls/actions/blog/action.blog.blog.tpl – блог, заметьте, здесь добавлены два новых хука blog_header и blog_stat, они отмечают места вхождения элементов рейтинга на странице;
2. start-kit-old/tpls/topics/topic.type_default-list.tpl – топик списка, кроме удаления рейтинга к хуку topic_show_info добавлен параметр $oVote и добавлен хук «topic_list_end,topic_show_end»
3. start-kit-old/tpls/topics/topic.type_default-show.tpl – топик;
4. start-kit-old/tpls/_profile.tpl – шаблон профиля пользователя;
5. start-kit-old/tpls/comments/comment.single.tpl — комментарий, вхождения рейтинга заменены на хук comment_info.
6. start-kit-old/tpls/actions/people/action.people.new.tpl – список пользователей;
7. start-kit-old/tpls/commons/common.user_list.tpl – также список пользователей;
8. skin/start-kit-old/tpls/commons/common.blog_list.tpl – список блогов;
9. start-kit-old/tpls/widgets/widget.blogs_top.tpl – виджет списка блогов;
Шаг 7. Изменение порядка загрузки аватара и фото пользователя
Аналогично тому, как было сделано для блога заменим механизм загрузки фото и аватара в следующих файлах:1. start-kit-old/tpls/actions/profile/action.profile.sidebar.tpl – сайдбар профиля с фотографией пользователя;
2. start-kit-old/tpls/actions/settings/action.settings.profile.tpl – страница настроек профиля пользователя в его аватаром.
Шаг 8. Сниппеты
В Альто 1.1 добавлен новый механизм сниппетов – специальный тег, который в топике разворачивается в графическое представление. Сниппетов добавлено три – логин пользователя, спойлер и фотосет. Для того, что бы добавить сниппеты в редактор необходимо:1. Добавить кнопку сниппетов в редакторы (в взуальный и обычный). Поскольку настройки редактора одинаковы для всех шаблонов, то необходимо только стилизовать кнопку. Напомню, вся стилизация у нас находится в файле start-kit-old/assets/css/compatibility.css
2. Добавить шаблоны сниппетов и их стилевое оформление. Шаблоны сниппетов располагаются в папке start-kit-old/tpls/snippets.
3. Добавить в шаблон редакторов текстовки с надписями для сниппетов: panel_photoset,panel_spoiler
Шаг 9. Менеджер изображений
Также в текстовом редакторе был добавлен менеджер изображений. Все его настройки и скрипты подключаются автоматически, но для его отображения необходимо создать соответствующие шаблоны. В качестве примера для вашей темы оформления можно взять те, что в этом коммите. Для того, что бы вывести менеджер изображений в редактор необходимо:1. Добавить файлы шаблонов для менеджера изображений. Это файл модального окна common/templates/skin/start-kit/tpls/modals/modal.insert_img.tpl и элементы модального окна подгружаемые аяксом — common/templates/skin/start-kit/tpls/modals/insert_img
2. Добавить стилизацию для кнопки
3. Добавить стилизацию для модального окна
4. Подключить модальное окно к редактору — common/templates/skin/start-kit-old/tpls/commons/common.editor.tpl
5. Для каждого вызова редактора добавить указание типа объекта для которого используется менеджер изображений (топик, комментарий, письмо и т.д.) для правильного сохранения и отображения картинок в админке.
Шаг 10. Страница созданных пользователем изображений в профиле
В Альто 1.1 добавлена новая страница в профиле пользователя – страница со списком созданных пользователем изоражений. Её страница created/photos/ Для её добавления нужно:1. Cоздать шаблон соответствующего экшена start-kit/tpls/actions/profile/action.profile.created_photos.tpl
2. Добавить шаблоны частей страницы common/templates/skin/start-kit/tpls/actions/profile/created_photos (она работает аналогично менеджеру изображений и эти шаблоны практически одинаковы)
3. Добавить ссылку в меню «Созданные» профиля пользователя
Шаг 11. Фотосет
Фотосет в версии 1.1 переведён на универсальную загрузку изображений и доступен в сниппетах. Для внесения изменений в фотосет нужно только заменить файлы редактирования и отображения фотосета field.photoset-edit.tpl и field.photoset-show.tpl.Шаг 12. Новый механизм меню
Главные меню сайта теперь можно редактировать из админки, но для этого нужно:1. Указать специфические для шаблона настройки меню в файле start-kit-old/settings/config/menu.php
2. Внести изменения в шаблоны заменив статические меню старого шаблона на динамически создаваемые.
Меню, формируемые с помощью нового механизма следующие:
— common/templates/skin/start-kit-old/themes/default/layouts/default.tpl – меню подвала;
— common/templates/skin/start-kit-old/tpls/commons/common.header_top.tpl – меню пользователя;
— common/templates/skin/start-kit-old/tpls/menus/menu.main.tpl – главное меню;
— common/templates/skin/start-kit-old/tpls/menus/menu.topics.tpl – меню топиков;
Шаг 13. Шаблон капчи
Капча вынесена в новый шаблон, и его нужно добавить common/templates/skin/start-kit-old/tpls/commons/common.captcha.registration.tplШаг 14. Фиксация шапки редактора при прокрутке страницы
Для редактора была добавлена новая фича – «прилипание» тулбара редактора при прокрутке страницы. Использовать её можно через метод ls.editor.float так как показано в этом коммите. Включение и отключение этой возможности можно вынести в конфиг шаблонаМинимально требуемые изменения
Здесь необходимо решить, как будет происходить адаптация шаблона. Возможны два пути: первый – сделать минимальные доработки для того что бы шаблон «заработал», но в этом случае новые некоторые фичи версии 1.1 будут недоступны. И второй способ – полная адаптация шаблона. Выше приведён полный список доработок, которые нужно сделать для перевода шаблона, однако можно ограничится лишь некоторыми, нужными для вашего сайта. Из необходимых я бы выделил следующие:— Шаг 3. Загрузка изображений для блога
— Шаг 7. Изменение порядка загрузки аватара и фото пользователя
— Шаг 8. Сниппеты
— Шаг 9. Менеджер изображений
— Шаг 11. Фотосет
— Шаг 13. Шаблон капчи
0 комментариев