Тема оформления — различия между версиями
(→Шаблон темы) |
|||
| Строка 58: | Строка 58: | ||
http://spcms.ru/theme-template.zip | http://spcms.ru/theme-template.zip | ||
| − | + | предназначен для создания темы оформления с нуля. Вёрстка там либо отсутствет полностью, либо представлена в минимальном объёме. В каждом HTML-файле есть комментарии о назначении блока и каждой возможной переменной. Присутствует пример настройки иерархического меню и чуток CSS. | |
== Редактирование темы прямо на сервере == | == Редактирование темы прямо на сервере == | ||
Версия 13:44, 30 апреля 2012
Школьный портал поставляется с несколькими предустановленными темами оформления, которые можно использовать для изменения внешнего вида сайта школы, личного сайта учителя или ученика.
Темы устроены очень просто: это набор html-файлов, на основе которых CMS отображает страницы сайта.
Чтобы наглядно представить себе, как устроены темы оформления, рассматривайте тему sp-default. Эта тема содержит в html-тексте комментарии и весь набор необходимых html-файлов. В других темах некоторые html-файлы могут отсутствовать. В этом случае портал использует шаблоны из темы sp-default.
Также можно посмотреть, как сделана тема sp-blog (предназначенная только для блогов). Там и кода поменьше, и сама она на вид простенькая.
Содержание
Из чего сделаны темы
Есть 4 типа файлов:
- HTML-шаблоны: *.html
- (опционально) Стили: style.css
- (опционально) Настройки иерархического меню: menu-settings.js
- (опционально) Картинки
Для изменения темы достаточно просто отредактировать файлы, из которых она состоят.
HTML-шаблоны
- index.html — единственный жизненно необходимый для работоспособности темы глобальный шаблон для каждой страницы. Он должен содержать хотябы одну переменную из списка:
$top, $left, $center, $right. При выводе страницы сайта компоненты выводятся последовательно согласно порядку сортировки в одноимённые блоки. Именно их представляют вышеназванные переменные. Их можно разместить в макетной таблице или в DIV-ах с разными id для DIV-ной вёрстки. Переменная$HEADдолжна располагаться в теге<head>, она нужна для вывода служебных строк (например, вставка JavaScript-кода для иерархического меню, ключевые слова конкретной страницы и т. п.) Другие переменные:$sitedate— текущая дата,$ou_name— название образовательного учреждения,$ou_num— номер образовательного учреждения. - остальные файлы *.html Каждый шаблон представляет собой блок HTML-кода с переменными. Начало имени файла совпадает с именем компонента CMS. О назначении каждого блока и допустимых переменных в нём смотрите в архиве с шаблоном темы.
CSS
Файл style.css — обыкновенный файл с CSS-стилями. Всё то, что вы наверстали в HTML-шаблонах, оформляется в этом файле.
Имя файла должно быть строго таким. В разработке функциональность, которая потребует от тем оформления именно этого имени файла со стилями.
Изображения можно располагать произвольно либо рядом, как в теме xp, либо в подпапке. В этом нет никаких правил, делайте как вам удобно.
Внешний вид меню
Файл menu-settings.js хранит настройки внешнего вида иерархического меню. Откройте его текстовым редактором. Он прокомментирован. Если ваше меню плоское (ссылки не собраны в папки), этот файл не используется. Его наличие не требуется даже в том случае, если меню у вас иерархическое; в этом случае меню будет выглядеть «ненастроенным», нейтральным, но работать будет. Сравните содержимое таких файлов в других предустановленных темах оформления. Отличия там буквально в цветах, шрифтах, размерах и т. п.
Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала.
Как создать свою тему
Перед тем, как начать делать свою тему с нуля, попробуйте начать с изменения существующей. Большинство пользователей поступают именно так.
Скачайте одну из предустановленных тем, которая ближе всего к задуманному. Делается это в списке тем, в который попадают через меню «Сайт → Темы оформления» Нажмите на дискетку напротив темы интересующей темы оформления. Распакуйте, переименуйте папку с темой, откройте нужные файлы в текстовом редакторе, картинки в графическом редакторе, и редактируйте, сохраняя переменные (они начинаются со знака доллара). затем запакуйте в архив (запаковывать надо саму папку) и установите (меню «Сайт → Темы оформления → Установить…», затем в списке тем нажмите на ссылку «Применить» напротив своей темы).
Экономьте время: не оформляйте те модули, которыми вы не собираетесь пользоваться. HTML-файлы блоков неиспользуемых модулей могут даже отсутствовать в вашей теме. Сравните, например, наборы файлов тем sp-default и sp-blog.
Если вы решили адаптировать созданный не для портала шаблон к порталу, в любом случае рекомендуем сначала изучить какой-нибудь портальный шаблон в качестве образца.
Портал не позволяет загрузить тему оформления, имя которой совпадает с именем темы из комплекта поставки. Для вашей собственной темы требуется отличающееся от наших имя, чтобы при обновлении портала ваши темы оформления остались нетронутыми.
По этой же причине мы рекомендуем не ссылаться на картинки из комплектных тем, а брать их копии в свою тему. Мы иногда изменяем комплектных темы, чтобы, например, поддержать новый функционал, лаконичнее переверстать, оптимизировать или освежить, сделать современнее. Таким образом картинки могут измениться как незначительно, так и вовсе исчезнуть или приобрести новые имена.
Домашнее задание: создать тему на основе нашей со своей собственной картинкой в «шапке».
Шаблон темы
Архив:
http://spcms.ru/theme-template.zip
предназначен для создания темы оформления с нуля. Вёрстка там либо отсутствет полностью, либо представлена в минимальном объёме. В каждом HTML-файле есть комментарии о назначении блока и каждой возможной переменной. Присутствует пример настройки иерархического меню и чуток CSS.
Редактирование темы прямо на сервере
Внимание: если вы редактируете файлы у себя, а затем заливаете архив с темой через веб-интерфейс, делать это не нужно.
Если вы хотите редактировать html-файлы темы (других файлов это не касается!) прямо на сервере, например по FTP, SSH или через SAMBA-ресурс, механизм кеширования блоков и html-файлов темы будет препятствовать немедленному отобажению новой html-вёрстки.
Для того, чтобы иметь возможность редактировать файлы на сервере и при этом отсматривать изменения на сайте немедленно, кеширование нужно выключить. Делается это так: в начало файла /var/www/cgi-bin/sp/cms/cms.pl допишите строчку #!/usr/bin/perl -X. Кеширование выключится.
Внимание! По окончанию прямой работы с файлами темы верните всё как было, то есть добавленную строку в начале файла cms.pl следует удалить, потому что скорость работы CMS с кешем значительно выше.
Примеры тем, сделанные нашими пользователями
Школа № 8 города Радужный тоже сделала свою тему оформления. Примечательно то, что это первый кириллический домен среди наших пользователей: http://мбоусош8.рф/
