1.3.3. Редактирование файлов шаблона | Online Team Курск
Параграф1.3.3. Редактирование файлов шаблона
Вернутся к параграфам


Из предыдущего параграфа Вы уже знаете как Настроить шаблон и знаете про панель навигации по шаблону в меню справа. Все описанные в данном параграфе относится к разделу Редактирование шаблона. После перехода в настройки шаблона перед Вами область редактирования (Рис.1).

Над областью редактирования Вы увидите иконки. Каждая из них отвечает за свой файл. Начнем по порядку с лева на право. Но сперва небольшое описание работы самого редактора. При переключении между файлами не забывайте про сохранение, кнопка также находится над областью редактирования., можно использовать комбинацию Ctrl + S если поле редактирования находится в фокусе. Также при переключении между файлами, как Вы быстро заметите, последняя позиция скролла внутри файла сохраняется. Таким образом Вам не придется каждый раз пролистывать к нужному мету "киллометры" кода. А теперь по иконкам.




Структура HTML документа сайта OWE (Online Web Engine)
Структура HTML документа

Первая иконка, как Вы уже поняли, это файл структуры HTML документа всего сайта. В силу специфики движка, что является отличительной чертой Online Web Engine, загрузка страницы идет не от файла страницы к ядру движка, а наоборот. Сперва загружается ядро движка, потом шаблон, потом определяется запрашиваемая страница и ее содержимое подставляется внутрь шаблона, в данном случае наша иконка с символом здания внутри. Самое главное в данном файле сохранить все элементы внутри тэга BODY и все переменные. Можно их переставлять относительно друг друга, но при этом не нарушая иерархии.




Скрипты шаблона сайта OWE (Online Web Engine)
Скрипты шаблона

Следующая иконка отвечает за файл PHP скиптов шаблона. Код из этого файла подключается в ядро перед подключением страниц сайта. Этот файл поможет Вам провести какие-то собственные настройки шаблона и сайта. Все что Вы захотите отобразить на экране в данном файле не будет показываться на экране. Весь вывод в этом файле записывается в переменную $_SESSION['system']['currTemplateScriptEcho'].




Скрипты шаблона сайта OWE (Online Web Engine)
Строковые переменные CSS

Данная иконка отвечает за редактирование файла с CSS переменными. В данном файле CSS переменные перечисляются в формате JSON. Для корректной работы значения должны быть строками (Значения пишутся внутри двойных кавычек). Также значение может ссылаться на другое значение в этом файле. Для этого внутри двойных кавычек пишем "@this/название_ключа_переменной". Чтобы использовать строки в CSS файле, необходимо вместо значения CSS свойства прописать ссылку на переменную, например, width: @string/название_переменной.




Скрипты шаблона сайта OWE (Online Web Engine)
Переменные цветов CSS

Данный файл аналогичен предыдущему, с одним отличием, в этом файле вы перечислеяте только цвета. Если указать не цветовое значение, то результатом будет черный цвет. Цвета можно указывать в формате HEX от 1 до 8 символов: RRGGBBAA, RRGGBBA, RRGGBB, RRGGB, RRGG, RGB, RG, R. Или же в формате массива, например: [34, 101, 255, 255] или [34, 101, 255]. В первом случае вы перечислили значения для красного, зеленого, синего и альфа канала, во втором тоже самое, но без альфа канала. В CSS файле переменные данного цвета указываются следующим образом, background: @color/название_переменной.




Шапка шаблона сайта OWE (Online Web Engine)
Шапка сайта

Этот файл отвечает за содержимое шапки сайта. Контент из этого блока загружается в тэг HEADER. В файле Структуры HTML документа можете посмотреть где именно этот блок находится. Вы можете писать тут HTML и PHP кодом, можно даже смешанным способом. Весь вывод в этом файле записывается в переменную $_SESSION['system']['html']['parts']['head']. Так же можно писать вывод непосредственно в переменную $_SESSION['system']['html']['parts']['head']. У переменных в шаблоне, кстати, больший приоритет, чем у прямого вывода.




Левая колона сайта OWE (Online Web Engine) Левая колона сайта OWE (Online Web Engine)
Левая и правая колоны сайта

Эти два файла аналогичны и схожи между собой. Относительно содержимого файлов, все аналогично Шапке сайта. Выводятся они в тэги LEFT_CONTENT и RIGHT_CONTENT. Вывод записывается в переменные $_SESSION['system']['html']['parts']['left_content'] и $_SESSION['system']['html']['parts']['right_content'].




Подвал (Футер) сайта OWE (Online Web Engine)
Подвал сайта

Все также как и у Шапки сайта. Вывод в тэг FOOT. Переменная для вывода $_SESSION['system']['html']['parts']['foot'].




CSS файлы шаблона OWE (Online Web Engine)
CSS файлы шаблона

Таких иконок может быть несколько и их можно сортировать между собой перетаскиванием. Загружаются на сайт они именно в том порядке, которым выводятся иконки этих файлов.




JS (JavaScript) файлы шаблона OWE (Online Web Engine)
JavaScript файлы шаблона

Таких иконок может быть несколько и их можно сортировать между собой перетаскиванием. Загружаются на сайт они именно в том порядке, которым выводятся иконки этих файлов.




Создать новый файл шаблона OWE (Online Web Engine) Обновить файлы шаблона OWE (Online Web Engine)
Управление CSS и JS файлами шаблона

Первая иконка открывает окно создания нового файла. После создания появляется новая иконка с новым файлом. Вторая иконка обновляет список файлов CSS и JS и их порядок.




Каталог изображений шаблона OWE (Online Web Engine) Каталог шаблонов модулей шаблона OWE (Online Web Engine) Каталог AJAX скриптов шаблона OWE (Online Web Engine)
Каталоги шаблона

Каждая из этих иконок открывает каталог на сервере. Первая с картинками, вторая с модулями и третья с AJAX скриптами. Первая и третья особой смысловой нагрузки не несут ни на сайт, ни на сам шаблон, сделаны лишь для удобства использования. Каждой из них соответсвуют следующие каталоги: images, modules и ajax. Второй каталог несет в себе уже влияние на сайт и движок. Из этого каталога подключаются шаблоны модулей в редактировании страниц. При навидении на иконку выплывает список уже имеющихся шаблонов модулей. В этом же списке находится кнопка создания нового шаблона модуля (Рис.2). При нажатии на название шаблона модулей открывается файловый менеджер с файлами шаблона модуля. Эти файлы уже редактируются через редактор файлового менеджера.




Рис. 1. Область редактирования файлов шаблона
Область редактирования файлов шаблона OWE (Online Web Engine)



Рис. 2. Список шаблонов модулей текущего шаблона
Шаблон модулей OWE (Online Web Engine)


1.3. Работа с шаблонами

С помощью этой главы Вы поймете как легко и проще управлять дизайном сайта, CSS и JS сайтами

Перейти
1. Работа с админ панелью

Информация необходимая для работы с админ панелью Online Web Engine

Перейти
385 просмотров
Опубликованно: 31 Августа 2018
Андрей Кобелев
Автор публикации
Андрей Кобелев
Online Team логотип

"Новаторство требует готовности быть непонятым в течение длительного периода времени."

Джеффри Престон "Джефф" Безос
© 2015 - 2022 Online Team
Ваш браузер не поддерживается