Найпростіше робити шаблони на основі вже зверстаних в HTML статичних сторінок. Розглянемо створення і підключення шаблону на прикладі. Припустимо, вже є HTML-файл такого змісту:
Для того, щоб додати шаблон в CMS, потрібно створити файл в директорії tpls / content. наприклад, test.tpl. і вставити туди ваш HTML-код. CSS-файл слід покласти в папку css / cms і назвати style.css. Зображення бажано покласти в папку images. Не забудьте поміняти шляху до всіх зображень і CSS-файлів.
У назві файлу шаблону можна використовувати українські літери!
Щоб підключити новий файл шаблону, заповніть в самій нижній вільному рядку поля «Назва шаблону» (дайте йому якесь осмислене назва, наприклад «Мій тестовий шаблон») і «Файл» (в нашому випадку, test.tpl) і натисніть кнопку «Зберегти».
Якщо ви хочете, щоб цей шаблон використовувався як шаблон за замовчуванням, поставте навпроти нього позначку «Основний». Тепер цей шаблон буде обраний за замовчуванням в випадаючому списку вибору шаблонів. Так само він буде використовуватися для виведення системних сторінок, які використовують шаблон за замовчуванням (Реєстрація, Відновлення пароля, Карта сайту).
Шаблони будуть видні в випадаючому списку при редагуванні кожної сторінки:
Таким чином, на одному сайті можна одночасно використовувати багато шаблонів, вибираючи відповідний шаблон як для окремої сторінки, так і для групи сторінок.
Спробуйте створити нову сторінку (переконайтеся, що в опції «Шаблон дизайну» обрано нового шаблон) і подивіться, що вийшло на сайті.
На сайті повинен з'явитися ваш HTML-шаблон. Але зараз він статичний. Тепер вам треба зробити його динамічним.
Для початку треба визначити, які частини HTML-коду будуть змінюватися. У нашому випадку змінюватися будуть:
заголовок вікна
;</p>
<p>мета-теги keywords і description;</p>
<p>заголовок тексту <h1>;</p>
<p>Значить, доведеться трохи попрацювати з HTML-шаблоном і замість змінюються ділянок поставити відповідні макроси.</p>
<p>Наприклад, на початку HTML-файлу задані мета-теги і тайтл:</p>
<p>Замінюємо їх на відповідні макроси (список макросів дано при застосуванні):</p>
<p>Тепер система при формуванні сторінок буде брати мета-теги і тайтл, прописані для кожної сторінки індивідуально, і підставляти їх замість відповідних макросів. Назви макросів запам'ятати дуже просто.</p><p>Аналогічно поступимо з заголовком тексту. Було так:</p>
<p>А стане так. Тема тексту виводиться макросом% header%:</p>
<p>Основний текст сторінки теж змінюється:</p>
<p>Для виведення основного тексту сторінки є макрос% content%:</p>
<p>На початок файлу між тегами <head> і </head> вставляємо макрос:</p>
<p>Цей рядок підключає функцію швидкого редагування і інші корисні можливості. За допомогою неї ви зможете, натиснувши Shift + D. швидко перейти до виправлення поточної сторінки сайту або будь-яких її фрагментів.</p>
<p>У результаті повинно вийти наступне:</p>
<p>Отже, ми зберігаємо файл шаблону і дивимося на результат. Тепер сторінка практично повністю динамічна, за винятком меню. Має бути «оживити» меню сайту. Подивимося як прив'язано меню:</p>
<p>Меню складається з пунктів. Саме меню якось оформлено, і у пунктів теж є оформлення. Наприклад, у всього меню може бути якась рамка або фон, поточний пункт меню може бути виділено жирним і т.п. Також в одному меню можуть бути різні рівні.</p>
<p>Виділимо обрамлення меню:</p>
<p>Пункт меню оформлений так:</p>
<p>Поточний пункт меню оформлений по-іншому:</p>
<p>Вихідний шаблон меню знаходиться в файлі /tpls/content/menu/default.tpl і виглядає так:</p>
<p>Спочатку трохи незрозуміло. Насправді, все дуже просто. Подивимося на першу частину коду:</p>
<p>Це блок, який називається menu_block_level1. Є всього 3 типу таких блоків.</p>
<p>menu_block_level1 - містить HTML-обрамлення меню;</p>
<p>menu_line_level1 - містить HTML-код пункту меню;</p>
<p>menu_line_level1_a - те ж саме, що і menu_line_level1, тільки використовується для активного пункту меню.</p>
<p>Все, що розташоване між <<<END и END; воспринимается, как html-шаблон (для всего меню или для отдельного пункта).</p>
<p>При генерації меню, система бере шаблони пунктів (наприклад, menu_line_level1), і ставить їх один за одним. Виходить HTML-код, в якому містяться всі пункти меню. Цей код вставляється замість макросу% lines%.</p>
<p>Отже, необхідно проставити код, який ми виділили вище (обрамлення, пункти меню) до відповідних блоки. Має вийти приблизно так:</p>
<p>Ми вже знаємо, що замість% lines% система підставляє пункти меню з їх HTML-обрамленням. Нам зустрілися нові макроси. Замість% link% вставляється URL пункту меню, а замість% text% - текст (визначається в поле «назва сторінки»).</p>
<p>Тепер меню можна вставити в шаблон сторінки макросом% menu%.</p>
<p>Якщо ви хочете на якихось сторінках сайту виводити меню по іншому шаблоном, потрібно створити ще один файл із шаблоном меню в тій же папці. Наприклад, menu2.tpl. Відповідно, при підключенні меню до шаблону сторінки замість% menu% треба написати трохи по-іншому:% content menu ( 'menu2')%.</p>
<p>Робота цього та інших макросів докладно описана в поточній документації. Робота з ними будується точно за таким же принципом: ви розбиваєте необхідний шматок HTML-шаблону на окремі частини, підставляєте в відповідні блоки потрібних шаблонів, вставляєте на місце цього шматка відповідний макрос і він починає працювати.</p>
<p>Важливо враховувати: не варто розміщувати кілька макросів на одному рядку. Вкладені макроси можуть не спрацювати в якості аргументу у інших макросів.</p>
<h4>Схожі статті</h4>
<ul>
<li>
<p><a href="/articles/dvd-avtoring-stvorennja-dvd-diska-v-nero-vision-v.html">Dvd-авторінг створення dvd-диска в nero vision, в-і-д-е-о</a></p>
</li>
<li>
<p><a href="/articles/sibirski-merezhi-pidkljuchennja-internetu-i.html">Сибірські мережі - підключення інтернету і телебачення в Нікополі</a></p>
</li>
<li>
<p><a href="/articles/skajlink-potribna-dopomoga-v-pidkljuchenni-arhiv.html">Скайлінк - потрібна допомога в підключенні архів - форум про інтернет-маркетингу</a></p>
</li>
</ul>
</div>
<div class="extra">
<div class="info"><a href="/articles/makeup-vidguki-pro-dezodorant-sprej-collistar.html">Попередня</a> ◈ <a href="/articles/diski-stalevi-abo-legkosplavni.html">Наступна</a></div>
<div class="clear"></div>
</div>
</article>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-1-3">
<div class="wrap-col">
<div class="box">
<div class="content">
</div>
</div> </div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap-footer pominodiko">
<div class="row">
<div class="col-1-1">
<div class="wrap-col">
<div class="box">
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>© Copyright 2016 - 2024 | Всі права захищені</p>
<script>
new Image().src = "https://counter.yadro.ru/hit?r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";h"+escape(document.title.substring(0,150))+
";"+Math.random();</script>
</div>
</footer></div>
</body>
</html>