Создание модуля HTML в Joomla 3

Давайте создадим в Joomla модуль HTML, который позволяет отображать на сайте скрипты, виджеты, любой HTML и PHP код.

Добавление модуля

В админ панели перейдем в расширения, модули, нажмем кнопку создать. Из предлагаемого списка выберем HTML-код, в нижней панели редактора JСЕ есть кнопка «Код» , позволяющая делать вставку произвольного кода. Если у вас ее еще нет — тогда мы идем в JED, чтобы установить плагин Sourcerer.

Установка плагина Sourcerer

Для этого заходим в расширения, установка, установить из JED. В поле поиска набираем «source» и находим плагин Sourcerer.

Нажимаем Install, установить, затем возвращаемся в расширения, модули, создать HTML-код, нажмем на кнопку «Код». В появившемся окне редактора вставки кода, между специальными тегами

""//без кавычек ваш код "//без кавычек

удалим все комментарии, которые там введены для примера.

Вставка HTML кода — Поделиться в соцсетях

Для примера предлагаю вставить код виджета от Яндекс — Поделиться, в дальнейшем вы можете на самом деле его использовать для своего сайта. В любом поисковике введем фразу «яндекс виджет поделиться», находим сайт Блок «Поделиться» — Технологии Яндекса, впрочем если вам лень искать вот ссылка.

Настроим понравившейся вид блока, из окна кода скопируем текст и вставим в наш модуль между тегами source.

Напишем заголовок модуля — Поделиться в соцсетях, укажем позицию модуля в вашем шаблоне, в моем случае это [sidebar-2], сохранить и закрыть. Перейдем на сайт, и увидим наш модуль, он расположен справа, можно понажимать на иконки соцсетей, все работает.

Если вам мешает заголовок, вы можете его скрыть, для этого вернемся в редактирование модуля HTML, и переключатель отображения заголовка поставим на «Скрыть». Подобным образом можно вставить практически любой, поддерживаемый браузером код, можно оформить список, добавить слайдер, сделать ссылки в футере и многое другое.

Это видео о создание модуля HTML в Joomla 3:

Рекомендуем смотреть видео в полноэкранном режиме, в настойках качества выбирайте 1080 HD, не забывайте подписываться на канал в YouTube, там Вы найдете много интересного видео, которое выходит достаточно часто. Приятного просмотра!

Источник

Разработка расширяемых компонентов на HTML и CSS

Ушли те дни, когда мы делали страницы фиксированной ширины из макетов фотошопа по принципу pixel-perfect. Для того, чтобы делать раскладку, адаптирующуюся к любой ширине экрана, наши рабочие процессы изменились и стали более последовательными и гибкими. Мы пришли к пониманию важности модульности и того, как она способствует гибкости, необходимой нам, чтобы оставаться быстрыми в браузере. Для меня как дизайнера и фронтенд-разработчика, гибкость является неотъемлемой частью моего подхода к веб-проектам. Также я заметил, что занимаюсь вопросами дизайна в браузере намного чаще, чем с файлами и для поддержки этого рабочего процесса мне нужна возможность строить модули интерфейса, которые можно легко расширять.

Расширяемые модули

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

Шаг 1: определите тип модуля

Первый шаг это определение типа модуля, с которым мы работаем — вариантов здесь два: компонент или паттерн. Компонент это независимый модульный объект, у которого нет дочерних элементов, но есть модифицирующие состояния, изменяющие его внешний вид (пример: кнопка, сообщения, миниатюры изображений). С другой стороны, паттерн это объект, содержащий дочерние элементы (которые могут быть самостоятельными компонентами), влияя на каждый из них (например, хедер, логотип, навигация). И у паттернов, и у компонентов есть модифицирующие состояния, изменяющие их внешний вид или структуру.

Шаг 2: определите основу для модуля

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

Все примеры кода в статье используют систему именования БЭМ (блок, элемент, модификатор). БЭМ дает множество преимуществ, но главным из них для меня является то, что я могу узнать, что делает фрагмент разметки, просто взглянув на его название. Если вы хотите узнать больше об этой методологии, я советую в качестве введения эту статью.

Шаг 3: определите общие элементы

Если вы создаете компонент, то вы можете сразу перейти к следующему шагу, но если вы создаете паттерн с дочерними элементами, то следующим шагом вы должны определиться с ними. Эти элементы тематически связаны с родительским блоком (но могут существовать и вне паттерна как самостоятельные компоненты).

.block__element < padding: 1em; background: white; border: 1px solid black; >.block__another-element

Шаг 4: расширяйте при помощи модификаторов

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

Пример модификатора HTML

Пример модификатора CSS

.block-modifier < border-top: 3px solid red; >.block-modifier .block__element

Примеры

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

О компонентах

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

Образцы обычных компонентов

Компоненты по своей природе должны быть сравнительно простыми, так как не содержат дочерних элементов. Теперь перейдем к более сложному вопросу.

О паттернах

Медиа-паттерн это объект состоящий из медиа-элемента (это может быть изображение или видео) и связанного с ним контента (обычно в форме текста). Вы должно быть знакомы с вариацией медиа-паттерна, известной как медиа-объект или флаг-объект, которую мы слегка затронем. Этот паттерн — отличный пример того, как разработка с учетом расширяемости дает вам бесконечную гибкость.

Дефолтный медиа-паттерн

Мы начнем с нашего дефолтного паттерна, то есть паттерна без каких-либо модификаторов. Я добавил семантический тег , но вы можете заменить на более подходящий вам тег. Базовые стили нашего медиа-паттерна включают следующее:

Эти стили унаследуют все медиа-паттерны. В дополнение каждый медиа-паттерн будет содержать медиа-элемент (в нашем случае изображение) и тело медиа-паттерна, включающее в себя название и список-описание.

 
 
 
Default
 
Aperture
 
4.970854
 
ISO
 
200
 
Exposure Time
 
0.05
 
 
 
 

 /** * Media */ .media < display: flex; flex-wrap: wrap; margin: 0 0 $base-spacing; @media # < margin: 0 0 $base-spacing*2; >> .media__item < margin: 0 0 $base-spacing; img < display: block; >> .media__body < width: 100%; >.media__body-title < margin: 0 0 $base-spacing/2; font-size: $base-font-size; color: $base-accent-color; >.media__body-list < font-size: 0.825em; >.media__body-list-title < margin: 0 $base-spacing/2 0 0; font-weight: bold; >.media__body-list-data

Паттерн медиа-карточка (Media Card)

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

/** * Media */ .media < /* Modifers */ &--card < margin: 0; background: white; box-shadow: $base-box-shadow; >> .media__body < /* Block Modifers */ .media--card & < padding: 0 $base-spacing; >> 

Паттерн медиа-объект (Media Object)

Предположим, что далее нам понадобился паттерн, в котором изображение и текст выводятся рядом при наличии достаточного пространства. Это паттерн обычно известен как “медиа-объект”. Для его создания мы просто расширим медиа-паттерн, который у нас уже есть, чтобы минимизировать избыточный код.

/** * Media */ .media < /* Modifers */ &--object < @media # < flex-wrap: nowrap; >> > .media__item < /* Block Modifers */ .media--object & < @media # < margin: 0 $base-spacing $base-spacing 0; >> /* Element Modifers */ &--reversed < @media # < order: 1; margin: 0 0 $base-spacing $base-spacing; >> > .media__body < /* Element Modifers */ &--centered < @media # < align-self: center; >> > 

Паттерн медиа-планка (Media Slat)

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

/** * Media */ .media < /* Modifers */ &--slat < position: relative; width: 100%; overflow: hidden; background-color: white; @media # < flex-wrap: nowrap; height: 200px; >@media #  < height: 250px; >@media #  < height: 300px; >@media #  < height: 400px; >> > .media__item < /* Block Modifers */ .media--slat & < @media # < margin: 0; position: absolute; z-index: 1; top: 0; right: 0; width: 60%; height: 100%; overflow: hidden; >> > .media__body < /* Block Modifers */ .media--slat & < padding: $base-spacing $base-spacing 0; @media # < position: absolute; z-index: 2; top: 50%; transform: translate( 0, -50% ); max-width: (map-get($breakpoints, medium) - $base-spacing )/2; align-self: center; >@media #  < left: 50%; transform: translate( -(map-get($breakpoints, medium) - $base-spacing )/2, -50%); padding-left: $base-spacing/2; >> > 

Теперь у нас есть несколько вариантов медиа-паттерна: дефолтный вариант, медиа-карточка, медиа-объект и полноэкранная планка. Эти варианты будут полезны в разных обстоятельствах и они все используют в качестве основы одинаковый код. Также хорошо, что любое изменение базового паттерна повлияет на все паттерны, делая все экземпляры синхронизированными и единообразными.

Заключение

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

Источник

Joomla 3.x. Как создать модуль «HTML-код»

Команда технической поддержки представляет вашему вниманию новый туториал, с помощью которого вы узнаете, как создать модуль « HTML -код» (Custom HTML ) в Joomla 3.x.

1. Пожалуйста, перейдите в раздел Расширения (Extensions) > Менеджер модулей ( Module manager) в панели управления Joomla.
2. Нажмите кнопку Создать (New) для создания модуля:
3. Выберите тип модуля « HTML -код» (Custom HTML ):
4. Укажите заголовок модуля, выберите позицию и добавьте желаемое содержимое:
5. Вы можете использовать Визуальный режим или выберите Инструменты (Tools) > Исходный код (Source code) для просмотра html -версии.
6. Откройте вкладку Привязка к пунктам меню (Menu assignment) и выберите страницы, где модуль будет отображаться:
7. Нажмите кнопку Сохранить (Save) после внесения изменений.
8. Обновите сайт после внесения изменений и проверьте результат:

Вы также можете воспользоваться детальным видео-туториалом:

Эта запись была размещена в Joomla! Туториалы и помечена как custom, HTML, joomla, module. Добавьте в закладки постоянную ссылку.

Источник