Начните работу с шаблонами CMS Cotonti, используя Bootstrap!

Bootstrap - это мощный, полнофункциональный инструментарий для создания веб-интерфейсов*. Создавайте что угодно — от прототипа до модернизации уже рабочих проектов — за считанные минуты.

*Веб-интерфейс — это совокупность доступных пользователю инструментов и средств, при помощи которых он может взаимодействовать с сайтом или другим приложением через браузер своего устройства.

Официальная страница проекта Bootstrap по этой ссылке.

Исходный код CMS/CMF Cotonti по этой ссылке.

Инструкция для новичков, как подключить Bootstrap v.5 к шаблону на Cotonti.

Это руководство, подразумевает, что вы уже установили CMS Cotonti на свой веб-сервер(хостинг), и пока не имеете своего собственного, уже сверстанного шаблона для котонти.

1. Клонируем базовую тему сайта из установочного пакета.

В котонти, при первой установке, по умолчанию, устанавливается тема шаблона сайта "nemesis". Теперь ее нужно правильно скопировать для создания своего шаблона сайта. Это важно в первую очередь потомучто, при первом же обновлении вся ваша работа будет утрачена, если вы не сделаете клон этого шаблона со своим собственным именем. В этом деле, вам очень поможет инструкция, по установке нового шаблона в котонти.

1.1. Скачиваем базовый шаблон на свой копьютер.

Настоятельно рекомендую, как минимум использовать "FileZilla Client" и "Notepad++" для дальнейшей работы с файлами сайтов. Через "FileZilla Client" на свой компьютер, скачиваем шаблон сайта "nemesis" из папки с темами своего сайта. Если вы новичек, приучайте себя сразу обращать внимание на вкладку "неудавшиеся передачи", чтобы избежать потерь при обмене файлов с сервером. Смотрите скриншот.

из скриншота видно, "неудавшихся" - 0, "успешные", - 32, значит в базовом шаблоне всего 32 файла.

1.2. Переименование и подготовка собственного шаблона.

В левой части, кликаем правой по строке с именем папки "nemesis" и переименовываем её например в "myskinb5".

смотрите скришот.

После переименования папки, нужно переменовать 4 файла:

1. nemesis.php переименовываем в myskinb5.php
2. nemesis.rc.php переименовываем в myskinb5.rc.php
3. nemesis.ru.lang.php переименовываем в myskinb5.ru.lang.php
4. nemesis.en.lang.php переименовываем в myskinb5.en.lang.php

Теперь открываем служебный файл своей темы "myskinb5.php" и находим код

[BEGIN_COT_THEME]
Name=Nemesis
Version=1.0.2
Schemes=default:Default
[END_COT_THEME]

и строку
 

Name=Nemesis

меняем на
 

Name=MySkin on Bootstrap v.5.3

Смотрите "Скрин №3" и "Скрин №4".

1.3. Закачиваем клон шаблона на сервер в папку с шаблонами.

Смотрите скрин №5. Мы создали клон базового шаблона котонти со своим собственным именем, теперь его закачиваем в папку с шаблонами на удаленном сервере/хостинге, если это не локалка. Загрузку и подключение шаблона нужно делать по типовой инструкции установки новых шаблонов на CMS Cotonti.

Чисто для ознакомления, можете просмотреть в настройках профиля пользователя, что новая тема появилась в списке доступных, - смотрите скриншоты №7 и №8.

Через "FileZilla", в корне сайта, находим папку "datas", а в ней "config.php".
и плюс-минус в районе строки №48 прописываем свою новую дефолтную тему (шаблон по умолчанию).

$cfg['defaulttheme'] = 'myskinb5';	

смотрите скрин №6

1.4. Устанавливаем новый шаблон принудительно всем пользователям в панели управления сайтом.

Заходим в админку, - это наша панель управления, находим "Конфигурация", а ссылку на "Темы" - смотрите скриншот.

Устанавливаем настройки конфигурации радио-кнопкой, - выставляем "ДА", напротив "Принудительная установка темы по умолчанию для всех пользователей", спускаемся в низ страницы, и жмем кнопку "Обновить".

 

Всё, подготовительные работы сделаны, теперь подходим к теме основного вопроса:

Как в CMS Cotonti подключить Bootstrap 5 ?

2. Скачиваем дистрибутив библиотеки с официального сайта проекта.

Если подключаем Bootstrap v5.3, то постоянная ссылка на скачивание дистрибутива будет на этой странице.

2.1. Скачиваем бутстрап 5.

Находим параграф "Compiled CSS and JS" и в конце текста под ним кнопка "Download".

Смотрите скрин №9.

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

2.3. Переименовываем папку дистрибутива и закачиваем на сервер.

Папку "bootstrap-5.3.2-dist" переименовываем в "bootstrap" и закачиваем в папку, в которой находятся файлы нашего нового шаблона, - "myskinb5"

Смотрите скрин №10.

В нашей папке "myskinb5" появилась папка "bootstrap", а в ней еще две, - "css" (содержит файлы стилей) и "js" (содержит файлы скриптов компонентов самого "bootstrap 5").

Папку "bootstrap" удаляем с компьютера, она больше на нем нам точно не пригодится.

3. Файл ресурсов темы. Прописываем пути к файлам библиотеки Bootstrap 5.

3.1. Через ту же "Файлзилу" правым кликом по файлу "myskinb5.rc.php" зовём контекстное меню и жмем "просмотр/правка"

См. Скрин №11

В этом файле, прописуются пути, ко всем подобным ресурсам, которые подключаются к шаблону.

Теперь все по-порядку:

3.1.1.

в этом файле, сразу после строки, в которой прописан "reset.css"

добавляем строку с подключением стилей бутстрапа

Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/bootstrap/css/bootstrap.min.css');

3.1.2

строку

Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/js/js.js');

заменяем на строку

Resources::linkFileFooter(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/js/js.js');

Мы заменили "addFile" на "linkFileFooter", то есть скрипты, которые в файле "js.js" мы подключим не в "шапку сайта", - header.tpl, а в "подвал" страницы сайта, - footer.tpl.

3.1.3

Перед строкой

Resources::linkFileFooter(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/js/js.js');

прописываем строку, с адресом пути, как нашему файлу скриптов с компонентами бутстрапа, - добавляем

Resources::linkFileFooter(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/bootstrap/js/bootstrap.bundle.min.js');

3.1.4

В конечном итоге, весь код файла должен иметь такое содержание

<?php
/**
 * JavaScript and CSS loader for Nemesis theme
 *
 * @package Cotonti
 * @copyright (c) Cotonti Team
 * @license https://github.com/Cotonti/Cotonti/blob/master/License.txt
 */

defined('COT_CODE') or die('Wrong URL.');

Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/css/reset.css');
Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/bootstrap/css/bootstrap.min.css');
Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/css/extras.css');
Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/css/default.css');
Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/css/modalbox.css');
Resources::linkFileFooter(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/bootstrap/js/bootstrap.bundle.min.js');
Resources::linkFileFooter(Cot::$cfg['themes_dir'] . '/' . Cot::$usr['theme'] . '/js/js.js');

ну, единственное, дабы в будущем не путались, в тексте удалите или переименуйте "Nemesis" на что-то свое!.

Сохраняем эти изменения в файле myskinb5.rc.php и проверяем корректность подключения.

3.1.5

Перезагружаем любую страницу сайта, лучше конечно через "Firefox", кликаем правой кнопкой, в контекстном меню жмем "Исходный код страницы", в котором должна быть рабочая ссылка на "bootstrap.min.css" - смотрите скрин №13

и в низу страницы работающая ссылка на файл ссылка на bootstrap.bundle.min.js, см скрин №14

3.1.6 Контроль подключения "Bootstrap 5"

Обязательно, перейдите по ссылкам, который на скриншотах 13 и 14 обведены в красный прямоугольник, - вы должны увидеть именно содержимое этих файлов, но никак не html-код сайта, который может сообщить об ошибке или 404.

4. Завершение темы.

Если были соблюдены последовательность действий, которые указаны и описываются в этой инструкции по подключении файлов библиотеки Bootstrap v.5.3, к собственной теме основного шаблона сайта на CMS Cotonti, - уверен, всё у вас получится с первого раза.

Когда владеешь вопросом, - это всё делается за 2 минуты.

Ну, а если, всё же, да что-то пошло не так и не получилось, - всегда можно задать вопрос в этой теме и попросить помощи.

Всё. Работа сделана. Инструкция является типовой. Надеюсь помог.

 

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

Cot::$usr['theme']

это то же самое что и

Cot::$cfg['defaulttheme']

то есть имя папки темы основного шаблона сайта. В первом выражении, значение переменной берется из установок настроек пользователя. А во втором из файла конфигурации сайта. Если вы используете "принудительную" тему, то подключится тема, которая указана в Cot::$cfg['defaulttheme']

А Cot::$cfg['themes_dir'] - это папка с шаблонами, которая устанавливается в файле различных установок конфигурации сайта, - config.php.

Попробую упростить, чтобы проще было это понять, но понять это нужно:

a) $cfg['themes_dir'] это есть системная папка "themes" в которой хранятся папки с темами основных шаблонов сайта

b) $cfg['defaulttheme'] это папка темы "myskinb5", - нашего собственного основного шаблона.

 

 

Инструкция профессионалам:

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

<!-- HEADER_HEAD -->
Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$cfg['defaulttheme'] . '/bootstrap/css/bootstrap.min.css');
Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$cfg['defaulttheme'] . '/css/some-style.css');
Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$cfg['defaulttheme'] . '/css/my-style.css');
 
<!-- FOOTER_RC -->
Resources::linkFileFooter(Cot::$cfg['themes_dir'] . '/' . Cot::$cfg['defaulttheme'] . '/bootstrap/js/bootstrap.bundle.min.js');
Resources::linkFileFooter(Cot::$cfg['themes_dir'] . '/' . Cot::$cfg['defaulttheme'] . '/js/some-js.js');
Resources::linkFileFooter(Cot::$cfg['themes_dir'] . '/' . Cot::$cfg['defaulttheme'] . '/js/my-js.js');