Центр обучения Joomla
    Astroid Framework

    Astroid Framework: возможности и настройки

    Astroid — шаблонный фреймворк последнего поколения от разработчика JOOMDEV, который явно пытается унаследовать лучшее от других современных фреймворков. Шаблонов на Astroid не много, что может объясняться его недавним появлением, однако его функциональные возможности заслуживают внимания, о чем и поговорим в данном материале.

    Содержание

    1. Возможности фреймворка
    2. Интерфейс настроек шаблонов
    3. Настройки стилей шаблонов
    4. Конструктор макета
    5. Дополнительные настройки пунктов меню
    6. Дополнительные настройки для материалов
    7. Где скачать шаблоны на Astroid?
    8. Выводы и заключение

    Возможности Astroid

    Разработчики фреймворка не поленились и подробно расписали все возможности своего творения на официальной странице. Опустим банальные неконкретные восхваления типа «наш фреймворк супер-адаптивный, супер-быстрый, супер-безопасный, использует Font Awesome, Google Fonts и т. д.» — так о своих продуктах не говорит только ленивый.

    Лучше обратим внимание на заявленные особенности, отличные от других фреймворков:

    Кросс-браузерная совместимость

    Фреймворк тестируется во всех современных браузерах и на всех типах устройств.

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

    Встроенный медиа-менеджер

    Astroid позволяет легко управлять медиа-файлами и хранить их в хорошо структурированном виде.

    Менеджер работает только в настройках шаблона.

    Макеты для шапки сайта

    Возможность переопределения элементов макета в шапке сайта.

    Функция напоминает аналогичную в YOOtheme Pro, но с большими ограничениями.

    Мега-меню и мобильное меню

    Astroid оснащен отличным конструктором мега-меню и offcanvas-меню для мобильных устройств.

    Функция скопирована с Helix.

    Настраиваемые страницы Error 404 и Coming Soon

    Данные страницы кастомизируются в настройках шаблона.

    Возможностей для кастомизации, увы, не много.

    Социальные иконки

    Возможность добавления иконок со ссылками на социальные профили.

    Хорошо, но этим уже никого не удивишь.

    Широкий и коробочный макет

    Есть возможность выбора макета в полную ширину или ограниченную ширину экрана.

    Аналогичная функция есть во многих современных шаблонах.

    Пользовательский код

    Возможность вставки пользовательского HTML-, CSS- и JS-кода в различных частях страницы.

    Этим никого не удивишь.

    Интеграция комментариев

    Astroid позволяет интегрировать материалы Joomla с сервисами комментариев Facebook, Disqus, HyperComments, IntenseDebate.

    Аналогичная функция есть во фреймворках Helix 3 и Ultimate, но там немного меньше список сервисов для интеграции.

    Блок автора

    Вывод информации об авторе в материалах Joomla.

    Это оригинальная функция.

    Метки для материалов

    Возможность добавления к материалам специальных меток для выделения.

    Это оригинальная функция.

    Типы материалов

    Возможность присвоения материалам определённого типа: Regular, Video, Gallery, Audio, Review, Quote.

    Функция скопирована с Helix 3.

    Разметка Open Graph

    Создание мета-тегов Open Graph для материалов Joomla.

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

    AJAX-рейтинг

    Возможность оценивать материалы Joomla без перезагрузки страницы.

    Аналогичная функция есть во фреймворках Helix 3 и Ultimate.

    Связанные материалы

    Возможность добавления связанных материалов в материалы Joomla.

    Это еще одна полезная опция, которой не могут похвастаться другие фреймворки.

    Время прочтения

    Возможность указать приблизительное время прочтения материала.

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

    Интерфейс настроек шаблонов

    Важно знать:
    Все настройки шаблонов, предоставляемые фреймворками, находятся на странице Расширения → Шаблоны → Стили → [Нужный шаблон]
    • Переход в панель настроек шаблона осуществляется по кнопке Template Options со страницы редактирования стиля шаблона, как в Helix Ultimate и YOOtheme Pro:
      Кнопка «Template Options»
    • Интерфейс панели выглядит как гибрид интерфейса Helix 3 и Helix Ultimate: навигация по разделам настроек размещена в левом сайдбаре (как в Helix Ultimate), но в основной части отображается не внешний интерфейс, а сами настройки.
      Панель настроек шаблона

    Т. е. в отличие от классического для Joomla интерфейса, когда разделы настроек распределены по вкладкам в верхней части окна (как в T3, Gantry 5), в панели настроек шаблона на Astroid данные вкладки размещены в сайдбаре в виде аккордеонов со ссылками на разделы для быстрой навигации по области с настройками. Несколько непривычно относительно традиционного интерфейса, но куда более удобно, чем в Helix Ultimate и даже YOOtheme Pro, т. к. все настройки находятся в основной части страницы, а не в сайдбаре.

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

    Кроме этого в основной части экрана с настройками предусмотрен режим предпросмотра для некоторых элементов: все варианты предзагрузчика страниц можно рассмотреть в модальном окне, а для типографии предусмотрена текстовая область:

    Предпросмотр предзагрузчиков в Astroid
    Предпросмотр предзагрузчиков
    Предпросмотр типографии в Astroid
    Предпросмотр типографии

    Настройки стилей шаблонов

    Рассмотрим возможности фреймворка на примере бесплатного шаблона Astroid Template Zero, квикстарт которого можно скачать здесь.

    В левом сайдбаре располагается меню со следующими пунктами:

    • Basic

      Настройки предзагрузчика (предоставляется большой выбор), кнопки «Наверх», выбор типа макета.

    • Header

      Настройки шапки и её элементов: логотипа и меню.

    • Colors

      Установка цвета текста и ссылок для тегов body и header, а также для меню (основного, мобильного и для выпадающих элементов).

    • Layout

      Конструктор макета.

    • Typography

      Настройки шрифтов (семейство шрифтов, насыщенность, размер, преобразование) для тега body, меню и заголовков (теги h1-h6).

    • Article/Blog

      Активация и настойки дополнительных возможностей для материалов Joomla.

    • Social

      Добавление иконок социальных сетей со ссылками.

    • Custom Code

      Текстовый области для вставки пользовательского кода.

    • Miscellaneous

      Прочие настройки: копирайт, контактная информация, страницы Coming Soon и 404 Error, фавиконка.

    • Export

      Экспорт настроек.

    • Import

      Импорт настроек.

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

    Конструктор макета

    Отметим, что набор настроек явно напоминает Helix 3, но в ином интерфейсе, сайдбар которого в свою очередь напоминает Helix Ultimate: ассоциации с Helix возникают постоянно, это касается и конструктора макета.

    Конструктор макета в Astroid
    Конструктор макета в Astroid

    Функционал конструктора макета (Layout) куда больше напоминает полноценный SP Page Builder, чем ограниченный конструктор макетов Helix'ов.

    Основные возможности конструктора:

    • функция перетаскивания (Drag & Drop),
    • создание строк и колонок,
    • настройки стилей и адаптивности для строк и колонок,
    • макеты для секций (коробочный, во всю ширину, коробочный без отступов и др.),
    • назначение модульных позиций.

    В отличие от ограниченного конструктора Helix, здесь мы можем назначать модульные позиции не колонкам строк, а отдельным элементам, которых может быть несколько в колонке:

    Несколько модульных позиций в колонке
    Несколько модульных позиций в колонке

    Кроме этого мы можем создавать строки в секциях (New Row) и дублировать элементы сетки (Duplicate). Панель с данными функциями отображается при наведении на элемент:

    Выбор макета строки осуществляется во всплывающем окне, которое открывается при добавлении строки:

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

    В целом конструктор макета, демонстрируемый Astroid'ом, сильно опережает всех основных конкурентов, разве что за исключением навороченного конструктора Gantry 5, который является главной фишкой данного фреймворка.

    Дополнительные настройки пунктов меню

    Astroid очень нагло копирует функционал Helix'а даже за пределами настроек шаблонов, аналогичным образом добавляя дополнительные вкладки на страницы редактирования пунктов меню:

    • Astroid Menu Options
    • Banner Options

    Astroid Menu Options

    Данная вкладка идентична вкладкам Helix Megamenu Options (в Helix 3) и Mega Menu (в Helix Ultimate) с несущественными отличиями: здесь можно определить иконку и CSS-класс для пункта меню, ширину и выравнивание выпадающего элемента, а также назначить модули. Конструктор сетки выпадающего меню куда проще в освоении, чем то, что предлагает Helix 3 и Ultimate:

    Astroid Menu Options
    Astroid Menu Options

    Banner Options

    Эта вкладка идентична «хеликсовской» Helix Page Title: при активации опции Enable Banner на страницах, закрепленных за данным пунктом меню, в специальной позиции над областью контента будет выводится баннер с заданными настройками (заголовок, подзаголовок и стили).

    Вкладка «Banner Options»
    Вкладка «Banner Options»
    Отображение баннера
    Отображение баннера

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

    Дополнительные настройки для материалов

    Фреймворк Astroid добавляет 3 новые вкладки на страницу редактирования материалов:

    • Article Type Options
    • Blog Options
    • Open Graph

    Article Type Options

    Здесь определяется тип материала (Article Type, аналог Post Format в Helix 3) и метка (Article Badge).

    Article Type Options
    Article Type Options

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

    Существуют следующие типы материалов:

    • Regular

      Стандартный материал с картинкой «во главе».

    • Video

      Видео из YouTube или Vimeo.

    • Gallery

      Слайдер изображений с заданными элементами.

    • Audio

      Аудио-запись с Soundcloud или Spotify.

    • Review

      Оригинальный тип материала, отлично подходящий для оформления рецензий.

    • Quote

      Заглавным элементом будет цитата.

    Также в этой вкладке материалу можно присвоить одну из следующих меток (Badge Options):

    • Editor's Choise,
    • Best Seller,
    • Best Price,
    • Hot,
    • Trending,
    • Custom.

    Метки отображаются на картинках материалов в списке:

    Метки материалов
    Метки материалов

    Blog Options

    Эта вкладка отличается рядом полезных опций, значения по умолчанию для которых определяются в настройках шаблона (вкладка Article/Blog).

    Blog Options
    Blog Options
    • Related Articles

      Вывод рекомендуемых материалов в табличном виде, количество которых определяется в Настройки шаблона → вкладка Article/BlogArticle Count

    • Social Share

      Вывод кнопок «Поделиться» для различных соцссетей. Можно подключать кнопки AddThis и ShareThis (Настройки шаблонаArticle/BlogSocial Buttons Type).

    • Comments

      Активация комментариев (интеграция устанавливается в Настройки шаблонаArticle/BlogComments).

    • Article type Icons

      Отображение иконки, определяющей тип материала.

    • Read Time

      Отображение приблизительного времени прочтения материала.

    • Author Info

      Отображение блока с информацией об авторе.

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

    Open Graph

    В данной вкладке можно переопределять значения для мета-тегов протокола Open Graph (по умолчанию они формируются из заголовка и мета-описания), который используют соцсети и другие сервисы для формирования постов из внешних URL-адресов.

    Вкладка «Open Graph»
    Вкладка «Open Graph»
    Важно знать:
    Для генерации мета-тегов должна быть активирована опция Open Graph в настройках шаблона (вкладка Article/Blog).

    Отметим, что хоть шаблоны Helix и генерируют OG-теги, но для этого не предусмотрено никаких опций, и в этом отношении Astroid также выглядит предпочтительнее.

    Где скачать шаблоны на Astroid?

    К сожалению, на момент написания материала шаблоны на Astroid предоставляются только разработчиком JOOMDEV: на сайте имеется ряд шаблонов, 10 из которых можно скачать бесплатно.

    С учетом того, что Astroid Framework обходит Helix 3 и Helix Ultimate практически по всем параметрам, вопрос с количеством шаблонов упирается в его популярность.

    Выводы и заключение

    По ходу обзора рассматриваемый Astroid неспроста постоянно напрашивался на сравнение с Helix 3: фактически он копирует и улучшает возможности хеликса (например, типы материалов и OG-разметка), а также добавляет свои, пусть небольшие, но приятные фишки типа времени прочтения и связанных материалов.

    Обзоры других фреймворков:

    Какие шаблоны для Joomla самые лучшие?
    Helix 3 Framework: возможности и настройки
    Warp 7 Framework: возможности и настройки
    Какие шаблоны для Joomla самые быстрые?
    Шаблоны для создания Landing Page на Joomla
    YOOtheme Pro: возможности и настройки
    Helix Ultimate: возможности и настройки
    T3 Framework: возможности и настройки
    previous arrow
    next arrow
    Slider
    Как быстро разобраться в Joomla?

      Как быстро разобраться в Joomla