Подход 3. Использование переопределения шаблона



Необходимые шаги:

  1. Создайте переопределение шаблона mod_custom.
  2. Добавьте модуль mod_custom, содержащий разметку компонентов и классы триггеров.
  3. Включите модуль в статью.

Переопределение шаблона модуля mod_custom.

  • В админке Joomla 4 перейдите в раздел СистемаШаблоны сайтовСведения и файлы Cassiopeia (SystemSite TemplatesCassiopeia Details and Files).
  • Выберите Создать переопределенияmod_customdefault.php (Create Overridesmod_customdefault.php).
  • В строке, следующей за defined('_JEXEC') or die; добавьте следующий код:
$module_class = $params->get('moduleclass_sfx');
if (!empty($module_class))
{
    $classes = explode(' ', $module_class);
    foreach ($classes as $class)
    {
        switch ($class)
        {
          case 'bs-alert':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.alert', '.alert');
            break;
          case 'bs-button':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.button', '.btn');
            break;
          case 'bs-carousel':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);
            break;
          case 'bs-collapse':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.collapse', '.selector', []);
            break;
          case 'bs-dropdown':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.dropdown', '.selector', []);
            break;
          case 'bs-modal':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);
            break;
          case 'bs-offcanvas':
            // Not Found
            //\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.offcanvas', '.btn', []);
            break;
          case 'bs-popover':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.popover', '.btn', []);
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.popover', 'a', []);
            break;
          case 'bs-scrollspy':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.scrollspy', '.selector', []);
            break;
          case 'bs-tab':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tab', '.selector', []);
            break;
          case 'bs-tooltip':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tooltip', '.btn', []);
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tooltip', 'a', []);
            break;
          case 'bs-toast':
            \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.toast', '.selector', []);
            break;
          default:
            // ничего не делать
        }
    }
}

Этот код выполняет поиск имен классов, заданных в mod_custom, и выполняет вызов HtmlHelper для настройки поддержки Javascript. Обратите внимание, что последним элементом в каждом вызове является селектор, который может использоваться или не использоваться для запуска действия. Многие компоненты запускаются атрибутами данных в разметке, и они не используют селекторы. Для некоторых необходим селектор. Например, имеет смысл использовать класс .btn и тег a для запуска всплывающих подсказок.

Модуль mod_custom для Modal Component.

  • Перейдите в раздел СодержимоеМодули сайтаСоздать (ContentSite ModulesNew).
  • Выберите Пользовательский модуль (Custom module).
  • Заполните форму:
    • Название: Demo Modal
    • В поле Позиция введите тип demomodal для использования в статье;
    • Содержимое модуля: Переключите редактор для ввода обычного текста.
    • Вставьте следующий код из документации Bootstrap:
      <h2>Modal</h2>
      <!-- Button trigger modal -->
      <p><button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> Запуск демонстрационного режима </button></p>
      <!-- Modal -->
      <div id="exampleModal" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      	<div class="modal-dialog">
      		<div class="modal-content">
      			<div class="modal-header">
      				<h5 id="exampleModalLabel" class="modal-title">Modal title</h5>
      				<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      			</div>
      			<div class="modal-body">
      				...
      			</div>
      			<div class="modal-footer">
      				<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button> 
      				<button class="btn btn-primary" type="button">Сохранить изменения</button>
      			</div>
      		</div>
      	</div>
      </div>
    • Выберите вкладку Дополнительно и в поле Класс модуля введите bs-modal
    • Необязательно: установите значение Ttitle to Hide, чтобы использовать H2 в вставленном коде.
    • Сохраните и закройте (не волнуйтесь, что модальный вид в редакторе выглядит неправильно).

Создание статьи и пункта меню.

  • Создайте новую статью, Demo Modal, и в режиме ввода обычного текста задайте для содержимого значение
    <div>{loadposition demomodal}</div>
  • Создайте один пункт меню "Статья".
  • Проверьте это:

Создание статьи и пункта меню c модальным окном Bootstrap в Joomla 4

Modal Component содержащий карусель.

  • Создайте новый Пользовательский модуль (Custom module) с новым названием: Demo Modal Carousel
  • Позиция: demomodalcarousel
  • Advance tabModule Class: bs-modal bs-carousel
  • Module Custom контент в виде обычного текста:
    <h2>Modal with Carousel</h2>
    <div class="mod-custom custom">
    	<!-- Button trigger modal --> 
    	<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button>
    </div>
    <div id="exampleModal" class="modal fade" style="display: none;" tabindex="-1" aria-hidden="true">
    	<div class="modal-dialog" role="document">
    		<div class="modal-content">
    			<div class="modal-header">
    				<button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"> 
    					<span aria-hidden="true">×</span> 
    				</button>
    			</div>
    			<div class="modal-body">
    				<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    					<div class="carousel-indicators">
    						<button class="active" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button> 
    						<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> 
    						<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    					</div>
    					<div class="carousel-inner">
    						<div class="carousel-item active">
    							<img class="d-block w-100" src="/images/sampledata/cassiopeia/nasa1-1200.jpg" alt="..." />
    							<div class="carousel-caption d-none d-md-block">
    								<h5>First slide label</h5>
    								<p>Some representative placeholder content for the first slide.</p>
    							</div>
    						</div>
    						<div class="carousel-item">
    							<img class="d-block w-100" src="/images/sampledata/cassiopeia/nasa2-1200.jpg" alt="..." />
    							<div class="carousel-caption d-none d-md-block">
    								<h5>Second slide label</h5>
    								<p>Some representative placeholder content for the second slide.</p>
    							</div>
    						</div>
    						<div class="carousel-item">
    							<img class="d-block w-100" src="/images/sampledata/cassiopeia/nasa3-1200.jpg" alt="..." />
    							<div class="carousel-caption d-none d-md-block">
    								<h5>Third slide label</h5>
    								<p>Some representative placeholder content for the third slide.</p>
    							</div>
    						</div>
    					</div>
    					<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> 
    						<span class="visually-hidden">Previous</span> 
    					</button> 
    					<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> 
    						<span class="visually-hidden">Next</span> 
    					</button>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
  • Создайте новую статью с <div>{loadposition demomodalcarousel}</div> в качестве содержимого.
  • Создайте новый пункт меню для одной статьи: Demo Modal Carousel
  • Проверьте это:

Modal Component содержащий карусель с использованием Bootstrap в Joomla 4.



Перевод с английского официальной документации Joomla 4:
https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Старт! Горячий старт на просторы интернета
Старт! Горячий старт на просторы интернета
Старт! Меню