Давайте уявимо, що у нас є готовий шаблон HTML, який потрібно використовувати в CMS Made Simple. Шаблон для майстер-класу я взяла безкоштовний. Можете завантажити його. якщо хочете потренуватися або подивитися, як він виглядає. Якщо Ви володієте основами HTML і CSS, то наступні кроки не повинні представляти для Вас ніяких проблем. Заходимо в адміністративну панель CMS Made Simple.
У списку шаблонів бачимо новий шаблон. Давайте зробимо його 1) шаблоном за замовчуванням і 2) встановимо його для всіх сторінок. Шаблон за замовчуванням буде автоматично застосовуватися до всіх нових сторінок. Натисканням на посилання Встановити для всіх сторінок. ми присвоюються всім вже існуючим сторінок цей шаблон.
Якщо Ви зараз подивіться на свою сторінку в браузері, то побачите, що сторінка вже використовує код HTML нашого шаблону, але природно нам поки що не вистачає стилів і динаміки. Тому спочатку займемося стилями.
В адміністративній панелі в основному меню натисніть на Оформлення »Стилі і потім на посилання Додати стиль. Задаємо будь Ім'я для стилю, а в поле Контент копіюємо вміст файлів style.css і menu.css. т. е. все стилі, які використовуються в шаблоні без будь-яких змін. Натискаємо на кнопку Відправити. Стиль доданий в список стилів.
Тепер потрібно приєднати цей стиль до нашого шаблоном. Для цього в списку стилів натискаємо на синию кнопочку з написом CSS в кінці строчки з назвою стилю. У наступному вікні вибираємо наш шаблон HTML в випадаючому меню і натискаємо на Приєднати до цього шаблону.
У фронтенді поки ще нічого не змінилося, так як там до сих пір використовується наш статичний шаблон. Настав час його динамізувати. В основному меню вибираємо Оформлення »Шаблони і натискаємо на наш шаблон, щоб відкрити його для редагування.
Починаємо роботу з Smarty. Smarty - це спеціальна мова для шаблонів, який дозволяє вставляти в місця, де повинен знаходитися динамічний контент, теги в фігурних дужках. У момент виклику сторінки у фронтенді теги Smarty будуть перетворюватися і змінюватися в залежності від нашого контенту. Для початку замінимо статичний виклик стилів тегом. Шукаємо в шаблоні рядки:
І замінюємо їх на Smarty тег. натискаємо на Застосувати і дивимося результат у фронтенді. Ви бачите, що стиль, який ми створили в адміністративній панелі і приєднали до шаблону тепер автоматично завантажується на сторінці. Якщо Ви подивіться исходник сторінки, то переконаєтеся, що на тому місці, де Ви використовували тег з'явився звичайний тег link, автоматично сформований CMS Made Simple.
Тепер давайте замінимо заголовок сторінки і її вміст. Для заголовка сторінки використовуємо тег. а для вмісту тег.
У шаблоні шукаємо ті місця, де повинен підставлятися заголовок сторінки. Їх там два. Знаходимо рядки в шаблоні, де потрібно підставити заголовок:
і замінюємо статичні заголовки на теги Smarty:
Натискаємо на Застосувати і дивимося результат у фронтенді. Тема в браузері і на сторінці змінилися. Тепер шукаємо місце в шаблоні, де має виводитися вміст сторінки і замінюємо весь статичний контент шаблону на тег:
Додавання меню
Залишилося динамізувати меню. Для цього знаходимо в шаблоні статичне меню:
Це все нужнозаменіть на динамічне меню, яке буде формуватися зі сторінок першого рівня. Для меню ми використовуємо тег. Давайте спочатку замінимо весь висновок статичного меню, наведеного вище, на цей тег. Меню додалося, але воно видає сторінки всіх рівнів, тому збивається дизайн. Для того, щоб більш тонко налаштувати тег використовуємо параметри цього тега. Параметри Smarty дуже схожі на атрибути в HTML. Вони додаються прямо в фігурні дужки тега Smarty, можуть мати будь-яку послідовність і складаються з параметра і його значення, розділених знаком одно. На прикладі, якщо нам потрібен висновок сторінок тільки першого рівня, то налаштовуємо тег наступним чином:
Готово. Якщо десь в іншому місці шаблону потрібно буде використовувати меню другого рівня, то додайте в цьому місце
Так, Ви можете використовувати тег c різними параметрами в будь-якому місці шаблона, а також у вмісті сторінці стільки раз, скільки Вам захочеться.
Доводимо до розуму
Залишилося кілька деталей. У CMS Made Simple можна (і потрібно) використовувати індивідуальні мета теги для кожної сторінки, тому статичні потрібно з шаблону прибрати. Шукаємо усі мета теги:
І замінюємо на Smarty тег. У цьому місці будуть виводитися глобальні теги, які Ви знайдете під Адміністрування сайта »Загальні настройки в поле Глобальні метадані. а також індивідуальні мета дані сторінки, які можна задавати при редагуванні сторінки. Контент »Сторінки. відкрити сторінку для редагування, перейти на вкладку Опції і задати мета теги в поле Мета (meta) для даної сторінки.
Ви помітили, чтоу нас зникла картинка? Ця картинка довантажувати стилями, і тепер стиль не може її знайти. Найпростішою варіант. В адміністративній панелі перейдіть на Контент »Управління зображеннями і завантажте зображення containerright-image.jpg в CMS Made Simple. Тепер додамо шлях до зображення в стиль. Оформлення »Стилі. натискаємо на наш стиль і шукаємо рядок
замінюємо цей рядок на
У цьому рядку використовується також тег Smarty, але з огляду на те, що в стилях вже прісуствующімі фігурні дужки, в стилях Ви використовуєте подвійні квадратні дужки. [[Root_url]] автоматично заміниться на урл Вашої сторінки.
Це був найпростіший приклад впровадження шаблону HTML в CMS Made Simple. Оскільки тут Ви працюєте з HTML, CSS і Smarty, обмежень по дизайну бути не може. Я можу Вас запевнити, що в CMS Made Simple можна впровадити будь-який шаблон, написаний на HTML і CSS.
У наступному майстер-класі буде детально описано, як реалізувати меню будь-якої складності в CMS Made Simple. Підписуємося. якщо цікавить.