Наверх

Как подключить DIAFAN.CMS к дизайну сайта

Внедрение дизайна (HTML-верстки) в DIAFAN.CMS

Все очень просто. Подключить дизайн к DIAFAN.CMS – легче легкого!

После установки DIAFAN.CMS на вашем сайте будет дизайн со стандартным дизайном системы, как в демо-версии.

За этот дизайн отвечет базовый шаблон, themes/site.php. По сути, это простой, обычный HTML-файл, но с шаблонными тегами DIAFAN.CMS. Шаблонные теги «подтягивают» в шаблон сайта многочисленные шаблоны модулей. Смотрите подробнее, как устроен стандартный шаблон.

Шаблонные теги DIAFAN.CMS имеют тот же синтаксис, что и обычные HTML-теги, поэтому корректно выглядят в визуальных редакторах веб-страниц, например, DreamViewer.

Совет: при внедрении своего дизайна лучше не удалять, а переименовать исходный шаблон themes/site.php, и затем оттуда копировать теги. А также добавьте в избранное справочник шаблонных тегов.

Перейдем к делу. Начинать лучше от простого к сложному. Допустим, Ваш дизайн сайта выглядит так:

Дизайн сайта

HTML-код этого дизайна после верстки примерно такой:

Пример:

<html>
<head>
   <title>Заголовок сайта</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="description" content="Описание">
   <meta name="keywords" content="Ключевики">
   <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
   <div class="body">
    <div class="top">
       <div class="logo">
           <a href="#"><img src="img/logo.png" alt="Логотип"></a>
       </div>
       <div class="menu">
           <a href="#">Меню 1</a>
           <a href="#">Меню 2</a>
           <a href="#">Меню 3</a>
           <a href="#">Меню 4</a>
       </div>
    </div>
    <div class="content">
       <div class="news">
           <h3>Хиты</h3>
           <a href="#">Товар</a>
           <p>Цена</p>
           <p>Описание</p>
       </div>
       <div class="center">
           <div class="nav">
               <a>Главная</a>
           </div>
           <div class="text">
           <h1>Заголовок</h1>
           <p>Текст сайта</p>
           </div>
       </div>
       <div class="right">
           <h3>Новости</h3>
           <a href="#">Название</a>
           <p>Дата</p>
           <p>Анонс</p>
       </div>
    </div>
   </div>
</body>
</html>

Первым делом переименуйте этот HTML файл и сохраните в DIAFAN.CMS как themes/site.php. Вы сразу увидите, что он отобразится на сайте, один в один. Ссылки выведутся как «#», тег title как «Заголовок сайта» и т.д. Чтобы в этом дизайне DIAFAN.CMS выводила информацию из административной части, нужно расставить шаблонные теги так:

Пример:

<html>
<head>
   <!-- шаблонный тег генерирует все необходимые теги для шапки сайта, в том числе мета-теги. Код шаблонной функции в файле themes/functions/show_head.php -->
   <insert name="show_head">

   <!-- шаблонный тег подключает CSS-файлы из папки css, с учетом кастомизации, сжимает файлы. Код шаблонной функции в файле themes/functions/show_css.php -->
   <insert name="show_css" files="style.css">
</head>
<body>
   <div class="body">
    <div class="top">
       <div class="logo">
           <!-- шаблонный тег path выводит корректный путь до корня сайта (включая мобильную и мультиязычную версии сайта) -->
           <a href="<insert name="path">"><img src="<insert name="path">img/logo.png" alt="Логотип"></a>
       </div>
       <div class="menu">
           <!-- шаблонный тег вывода пунктов меню. Код шаблонной функции в файле modules/menu/views/menu.view.show_block.php -->
           <insert name="show_block" module="menu" id="1">
       </div>
    </div>
    <div class="content">
       <div class="news">
           <!-- шаблонный тег вывода блока товаров, одного случайного. Код шаблонной функции в файле modules/shop/views/shop.view.show_block.php -->
           <insert name="show_block" module="shop" count="1" sort="rand">
       </div>
       <div class="center">
           <div class="nav">
               <!-- шаблонный тег вывода навигации "Хлебные крошки". Код шаблонной функции в файле themes/functions/show_breadcrumb.php -->
               <insert name="show_breadcrumb">
           </div>
           <div class="text">
               <!-- шаблонный тег вывода основного контента сайта. Код шаблонной функции в файле themes/functions/show_body.php -->
               <insert name="show_body">
           </div>
       </div>
       <div class="right">
           <!-- шаблонный тег вывода блока анонсов новостей, одной последней. Код шаблонной функции в файле modules/news/views/news.view.show_block.php -->
           <insert name="show_block" module="news" count="1">
       </div>
    </div>
   </div>
   <!-- шаблонный тег подключает JS-скрипты для корректной работы DIAFAN.CMS, добавляется перед закрывающим </body>. Код шаблонной функции в файле themes/functions/show_js.php -->
   <insert name="show_js">    
</body>
</html>

Всё.

Чтобы затем провести полировку дизайна, например, подправить блок вывода новостей, выводимых тегом <insert name="show_block" module="news" count="1"> в шаблоне модуля /modules/news/view/news.view.show_block.php

Надеемся, что принцип понятен. Далее можно только расширять количество используемых шаблонных тегов и параметров в них. Выводить 3 новости, а не одну, выводить блок новостей с картинками или без, выводить случайные товары или лидеры продаж и т.д.

Внимание!
Важно знать, что после получения обновлений DIAFAN.CMS или генерации темы, адреса файлов Вашего внедренного дизайна могут измениться!

Полное описание всех шаблонных тегов и их параметров смотрите здесь.

Мультидизайн в DIAFAN.CMS

Можно заметить, что в папке themes не один шаблон сайта, а несколько. Есть themes/site.php, themes/site_start.php или themes/site_catalog.php.

Несмотря на то, что большинство задач по внедрению различий в дизайне на разных страницах сайта можно решить с помощью динамических блоков, используя всего один шаблон, можно использовать несколько шаблонов и назначать их разным страницам по своему усмотрению.

Если для какой-то отдельной страницы на сайте необходимо иметь совершенно иной от общего дизайн, сохраните шаблон в папке themes (или в папке активной темы ) с расширением php. Затем откройте нужную страницу на редактирование в административной части сайта, и раскрыв вкладку «Дополнительные параметры», укажите загруженный шаблон в выпадающем списке «Шаблон дизайна».

Мультидизайн

Этот шаблон будет применяться ко всем вновьсоздаваемым дочерним страницам.

Ваши комментарии и дополнения

Можно ли на Диафан поставить любой другой шаблон? Или только от Диафана?
Загрузить на пятом шаге установки или в интерфейсе "Темы и дизайн" можно только шаблона от DIAFAN.CMS.
а самим что на bootatrape уже не сверстать что ли?
Не получится?
Интегрировать верстку можно любую, конечно. Об этом идет речь в статье.
Полагаю, что Павел спрашивал именно про установку готового шаблона. Того, что можно скачать или купить на addons.diafan.ru. Готовый шаблон - специфичен для DIAFAN.CMS.
Зарегистрируйтесь или авторизируйтесь для того, чтобы оставить комментарий.