Калі ў вас ужо ўстаноўлена і настроена сістэма кіравання, то самы час знайсці сімпатычны шаблончик і "нацягнуць" яго на MODx. Аб пошуку шаблонаў для модэкс хутка будзе асобны артыкул, а пакуль можаце запампаваць любы цікавы CSS шаблон. Яго можна знайсці ў пошукавых сістэмах па запытам "бясплатныя css шаблоны" ці як-небудзь так.
Як мы дамовіліся ў адным з першых урокаў, пачынаць вывучэнне MODx мы будзем на вырабе сайта-візітоўкі. Для гэтых мэтаў я ўжо абраў цікавы шаблон ў еўрапейскім стылі (тое, што цяпер у інтэрнэце прынята называць "стандартам"). Спампаваць шаблон для MODx . У гэтым архіве знаходзіцца 3 тэчкі і 3 файла:
- галоўная старонка з jQuery галерэяй
- ўнутраная старонка з двух калонак з дадатковай навігацыяй
- старонка з адной калонкі на ўсю шырыню шаблону
Логіка захоўвання службовых файлаў шаблону простая:
у тэчцы scripts знаходзяцца скрыпты, images захоўвае карцінкі шаблону, а дырэкторыя styles - CSS-файлы.
HTML-файлы, якія таксама знаходзяцца ў архіве, гэта наша разметка HTML, неабходная для карэктнага адлюстравання кожнай з трох відаў старонак:
- index.html (па-змаўчанню) - галоўная старонка,
- style-demo.html - унутраная старонка з двух калонак з дадатковай навігацыяй,
- full-width.html - старонка з адной калонкай на ўсю шырыню шаблону.
Цяпер можна пачаць інтэграцыю дызайну.
Усе шаблоны, неабходныя для працы з модэкс, лепш за ўсё захоўваць па адрасе сайт.ру / assets / templates
Тэчку manager не чапайце, а то не будзе адлюстроўвацца адмінка. Таму лепш за ўсё стварыць новую тэчку, назваць яе як-небудзь, і распакаваць архіў туды.
Пасля распакавання ідзем у адмінку сайта, аўтарызоўваць і рухаемся: Элементы → Упраўленне элементамі → Шаблоны
Тут мы і будзем кіраваць нашымі шаблонамі і пры неабходнасці ствараць новыя. Для выдаліць яго, ці рэдагавання неабходна націснуць на спасылку з назвай шаблону.
Для пачатку давайце рэалізуем галоўную старонку сайта. Ціснем "новы шаблон" і запаўняем:
- імя шаблону (можна на рускай мове)
- апісанне (каб не заблытацца, калі шаблонаў будзе шмат)
- код шаблону - html-код патрэбнага шаблону.
Так як мы зараз робім шаблон для галоўнай старонкі, то адкрыйце файл index.html, які быў у дызайне і скапіруйце ўвесь код у гэтае поле. Не забывайце захоўвацца
Вось прыклад запоўненай кода
І калі мы зараз адкрыем сайт, то ўбачым вось такі вось жах
Нічога страшнага не адбылося, бо ў нас у шаблоне прапісаны іншыя шляхі да стыляў. Таму зноў адкрываем шаблон на рэдагаванне і выконваем наступныя дзеянні:
- Прапісваем базавы URL для сайта (каб ня збіваліся адносныя шляху). У тэгу <head> </ head> прапісваем канструкцыю <base href = "[(site_url)]" />
- Прапісваем шляху да шаблону (напрыклад, assets / templates / default-design). Прапісваў менавіта так, як называюцца тэчкі на вашым хасце
- Трэба выправіць усе шляху ў якіх сустракаюцца styles, scripts і images
Пасля гэтага захоўваем шаблон і зноў ідзем глядзець на сайт. Калі ўсе шляхі былі карэктна зменены, то вы ўбачыце вельмі симпатичненькую галоўную старонку сайта.
У прынцыпе, гэта ўсё, з інтэграцыяй дызайну ў MODx мы справіліся. Я даўжэй гэта апісваў, чым вы рабілі.
Як - усё ?, спытаеце вы. А ўнутраныя старонкі таксама перапісваць, ці што?
З укараненнем іншых старонак сайта пакуль не спяшайцеся - бо мноства разоў перапісваць ўчасткі кода не цікава. Трохі пазней (у наступным ўроку) я раскажу пра такую штуцы як "Чанк" - з імі інтэграцыя шаблону пойдзе яшчэ хутчэй.
Папярэднія ўрокі:
Як - усё ?А ўнутраныя старонкі таксама перапісваць, ці што?