Тема оформления — различия между версиями
(щ/ш) |
(→Примеры тем, сделанные нашими пользователями) |
||
| Строка 69: | Строка 69: | ||
[[Файл:SP_CMS_Custom_School_Themes_2.jpg]] | [[Файл:SP_CMS_Custom_School_Themes_2.jpg]] | ||
| + | |||
| + | Школа № 8 города Радужный тоже сделала свою тему оформления. | ||
| + | Примечательно то, что это первый кириллический домен среди наших пользователей: http://мбоусош8.рф/ | ||
Версия 12:07, 19 апреля 2012
Школьный портал поставляется с несколькими предустановленными темами оформления, которые можно использовать для изменения внешнего вида сайта школы, личного сайта учителя или ученика.
Темы устроены очень просто: это набор html-файлов, на основе которых CMS отображает страницы сайта.
Чтобы наглядно представить себе, как устроены темы оформления, рассматривайте тему sp-default. Эта тема содержит в html-тексте комментарии и весь набор необходимых html-файлов. В других темах некоторые html-файлы могут отсутствовать. В этом случае портал использует шаблоны из темы sp-default.
Есть 3 типа файлов:
- HTML-шаблоны: *.html
- (опционально) CSS: 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 хранит настройки внешнего вида иерархического меню. Откройте его текстовым редактором. Он прокомментирован. Если ваше меню плоское (ссылки не собраны в папки), этот файл не используется. Его наличие не требуется даже в том случае, если меню у вас иерархическое; в этом случае меню будет выглядеть «ненастроенным», нейтральным, но работать будет. Сравните содержимое таких файлов в других предустановленных темах оформления. Отличия там буквально в цветах, шрифтах, размерах и т. п.
Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала.
Как создать свою тему
Перед тем, как начать делать свою тему с нуля, попробуйте начать с изменения существующей. Большинство пользователей поступают именно так.
Скачайте одну из предустановленных тем, которая ближе всего к задуманному. Распакуйте, переименуйте папку с темой, откройте нужные файлы в текстовом редакторе, картинки в графическом редакторе, и редактируйте, сохраняя переменные (они начинаются со знака доллара). затем запакуйте в архив (запаковывать надо саму папку) и установите (меню «Сайт → Темы оформления → Установить…», затем в списке тем нажмите на ссылку «Применить» напротив своей темы).
Экономьте время: не оформляйте те модули, которыми вы не собираетесь пользоваться.
Если вы решились адаптировать существующий (непортальный) шаблон для портала, в любом случае рекомендуем сначала изучить какой-нибудь портальный шаблон в качестве образца.
Портал не позволяет изменять коробочные темы оформления (для вашей темы оформления требуется имя, отличающееся от имён коробочных тем), чтобы при обновлении портала ваши темы оформления остались нетронутыми.
По этой же причине мы рекомендуем не ссылаться на картинки из коробочных тем, а брать их копии в свою тему. Мы иногда изменяем старые коробочные темы, чтобы, например, поддержать новый функционал, лаконичнее переверстать, оптимизировать или освежить, сделать современнее. Таким образом картинки могут измениться как незначительно, так и вовсе исчезнуть или приобрести новые имена.
Домашнее задание: создать тему на основе sp-default со своей собственной картинкой в «шапке».
Шаблон темы
Архив:
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.рф/
