Smart Шаблон на Bootstrap 4, Первое знакомство

Молодец+ давно в голове была эта мысль реализовать. Даже уже были наработки конструктора с Александром. Осталось еще предустановленные виджеты сделать и будет отличный конструктор.

Отличная идея и реализация.

Я даже откажусь от "свой затеи", которая несколько похожая на эту, но несколько с другой логикой, если это дополнение:
- Будет полностью бесплатным
- С открытым исходным кодом

А в качестве монетизации можно продавать "специфические" подключаемые блоки и предустановленные шаблоны страниц.

Молодец Евгений. Отличная и умная реализация. Большой плюс +

Супер! Не увидел что будет при просмотре с мобильных. Как все меняться будет. И да очень хочется чтобы продавался хотя бы за символическую плату Можно ли сразу в строить в блоки для виджетов запрет на индексацию.

запрет на индексацию - это другими словами нужна настройка прав по группам для каждого блока/позиции? - это возможно

Если посмотреть как видет сайт робот. То видно что например из виджета Регистрация он видет слова регистрация-пользователь - пароль и тд. Т.е робот индексирует абсолютно не нужные слова и ссылки. А должен индексировать только теги Н1 Н2-5 и информационный текст. Все остально зло :)

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

Да. Как флагбулет отлично

Готовый конструктор шаблонов.

Класс. Приятно видеть такого специалиста в рядах Инстанта.

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

Вы молодец, плюсую.

Классно. Надо его вторым дефолтным шаблоном делать в коробке .

Решено. Так и сделаем.

Классная идея! Однозначный плюс!
Почему бы не разрешить галку "Занимать всё свободное место" для любых блоков, а не только для контента?

да, возможно. Каких-то особых ограничений, мешающих это сделать, нет.

Подправил, сейчас это так и работает, для любых позиций.

Супер круто!
Говорил же, гений!

И по «обратной связи» добавить пока нечего, выглядит всё максимально продуманно.

Такой шаблон для Инстанта - это новая ступень взросления CMS! Инстант становится все больше похожим на крутой конструктор любых сайтов с отличным функционалом!

В настройках шаблона нужно сделать поле (с подсветкой) где можно вносить свои стили или переписывать существующие.
Ну и конечно, было бы интересно услышать какие планы касательно стоимости шаблона.

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

Глобальные настройки шаблона:

1. Поле для вывода скриптов в хедере
2. Поле для вывода скриптов в футере
3. Стили для каждого размера экрана

Дополнительно можно добавить настройку в позиции "Позиция для стилей и скриптов", для вывода стилей/скриптов с помощью HTML виджета на любой странице. Флаг нужен будет для того, чтобы выводить такие позиции без лишней верстки вокруг. Это позволит добавлять кастомные стили и скрипты на любой странице.

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

У меня дежавю)

Очень крутой шаблон!!!

Заверните два пожалуйста!))

Ну вот и готовый конструктор! Плюсую, идея отличная!

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

Добавил в пост третье видео про клонирование схем. Следующий этап - загрузка схемы из внешнего файла (экспорт-импорт схем с настройками виджетов).

Отличная работа.
Из хотелок: иконку для копирования виджетов (да и вообще в админке для копирования) лучше использовать например такую https://github.com/instantsoft/icms2/blob/master/templates/default/images/icons/copy.png из коробки со следующего релиза. Так как + немного "сбивает с толку".
По схеме шаблона вопросы исчерпаны, осталось посмотреть, что будет в исходном коде страницы и в принципе, можно запускать в массы на тестирование

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

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

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

п.с. А если и прибегать к конструкторам, то это нужен хорошо настраиваемый конструктор, который нужно будет изучать, ровно так же как если бы ты изучал основы вёрстки. И второй вариант в выигрыше. Нет ограничений конструктора\настроек и нет зависимости от инструмента.

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

Разработчик по новый год просто ошеломил новостью о шаблоне! Интересно, а когда можно будет увидеть демку шаблона?

По задумке я думаю будет стили дефолтного шаблона, а кому надо будет свои, сделают или закажут

Как раз хотел задать вопрос, а что будет на выходе конструктора? Готовый скрипт шаблона? С каким дизайном и можно ли его моделировать из конструктора?

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

В схему можно добавить уникальные стили для каждой страницы (то есть сам css код). Или глобальные стили для всех страниц сайта. Подробнее про дизайн будет чуть позже, но влиять на него из админки точно можно будет.

И вытаскиваются оттуда все сразу за один раз одним запросом?

Да, ровно одним. Он называется "получить колонки для вывода".

Отлично, но хотелось чтобы был вариант не просто складывания сайдбаров на смартфонах, а скрытия под кнопку "меню".
Для Bootstrap есть скрипты такие. Что то типа этого или этого , но это не совсем то.

А кто какие скрипты для такого использует?

допускаю что это не связанные вещи, но вполне интегрируемые.

Ну вот, а то уже думал что никому такое не надо ))
А по хорошему, такое надо делать самому Fuze, для родного шаблона.
п.с.
От бустрапа лучше брать только сетку и вспомогательные классы. В остальном, по личному опыту, с ним больше возни, нежели подмога.

Спасибо за новое видео и за копирование виджетов, очень не хватало!

Кстати, копирование виджетов на гите уже есть. Не будет ли "задвоение" иконок и функционала после обновления движка?

Да, я посмотрел. Я делал независимо от версии на гите. Задвоения точно не будет, потому что у меня подключается свой шаблон админки (а на гите это копирование прописано в шаблоне - добавляется ссылка и функция в js).

С одной стороны, лучше было бы сразу делать шаблон на версии с гита. С другой - у шаблона тогда не будет совместимости с версиями ниже.. По этой причине я (может быть) оставлю свой вариант копирования, который будет работать на 2.10.1 и ниже. То есть в шаблоне копирование будет свое, а если поменять на дефолт - там будет копирование из коробки.

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

Какая прелесть, хотел мобильный шаблон себе делать, но думаю лучше подожду

Автор как всегда радует, спасибо! Ждем релиз! Плюсую!

А это решение по созданию своей сетки виджетов будет работать только на этом шаблоне или можно будет перенести на любой другой?

Это решение - само шаблон.

Это большой шаг!
дальше - мультилендинг!

Уважаемый ТС, а приложение, оно заброшено или ещё ведётся какая-либо работа?

А когда будет доступно для скачивания? Какая минимальная версия Инстанта должна быть?

У меня на демо стоит 2.10.1 - последний релиз. Версия не принципиальна, но на более ранних я не проверял. А есть смысл проверить на 2,9 или еще более ранней?

Хороший вопрос, но мне надо сначала показать как выглядит фронтенд.

Не знаю, стоит или не стоит проверять... У меня, например, 2.8.2 установлена.

Закинул видео #4 (в описании)

+ загрузка виджетов через AJAX
+ обертка в noindex
+ выбор оберточного контейнера (фиксированного, резинового или без контейнера)
+ порядок вывода колонок. Вывод контента вверху страницы, а визуально после сайдбара
+ специальная позиция для фиксированного сайдбара (слева или справа)

Следующее уже по фронтенду будет. А в админке из запланированного осталось добавить экспорт и импорт шаблонов вместе с предустановленными виджетам.

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

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

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

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

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

Добавил видео #5

+ Экспорт шаблона в файл (с виджетами или без)
+ Импорт шаблона из файла
+ Проверка на установленные виджеты при загрузке

Я так понимаю, переносятся только шаблоны страниц. А весь шаблон (все страницы) сразу перенести можно?

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

Но похоже откажусь от этой идеи (есть минусы по производительности без правок системных файлов не решить). И сделаю просто загрузку, перед которой будут очищаться страницы при совпадении. Потому что в загрузке может быть, скажем, 10 шаблонов для разных страниц ( основной + 9 дополнительных) и виджеты для 50 страниц.

Создавать новый шаблон при импорте не надо, мы же при импорте сами выбираем в какой шаблон грузить. А создавать новый шаблон можно и отдельно от этого компонента. Просто как пожелание, сделать именование файлов экспорта/импорта не одинаково (template.json), а скажем генерировать из названия выгрузки и/или названия шаблона. Можно даже с приставками (full, all_pages, main_page и т. п.). Этого считаю будет достаточно.
В общем считаю достаточным иметь возможность перенести сод6ержимое всего шаблона на другой сайт, в выбранный шаблон с полным затиранием ранее имеющегося и перенести отдельные отредактированные страницы шаблона. Всё остальное ни к чему хорошему не приведёт.

Это в случае одной страницы выбираем, а если грузить целиком шаблон - тогда ничего выбирать не нужно. Получается, что нужно будет очистить все страницы, которые грузятся. А если например есть страницы компонента Форум (к примеру), а в загружаемом шаблоне их нет, то они останутся как были. Не обнулится ни схема, ни виджеты на ней.

Да, не проблема. Можно автоматом переводить в латиницу название или вводить вручную имя файла.

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

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

Ну вот как-то так и будет.

При правильном подходе много интересных шаблонов можно сделать.
Жду 6 видео, тема в закладках.
Спасибо.

Видео #6 добавил, конструктор лендингов.

Это дополнение к шаблону, я думаю оно будет отдельно от основной части. На видео можно посмотреть создание лендинга:
1. создание новой страницы для размещения лендинга "Продам слона" - используется компонент Мастер виджетов
2. конструирование страницы лендинга из готовых пресетов с ручным редактированием, используется встроенный конструктор
3. добавление виджета "Лендинг" на специальную позицию в шаблоне.

Если в шаблоне на позиции для лендинга размещен какой-то виджет, то выводится только тот html, который возвращает этот виджет. Без дополнительной верстки. То есть можно добавлять туда лендинги, созданные в любом другом сервисе.

Аплодирую стоя! Успеха Вам в реализации задуманного!

Если не секрет у кого взяли базу темплате готовых? В целом талантливо получается.

Источников верстки на бутстрап 4 очень много разных - у меня сейчас собраны пресеты с нескольких. И еще на примете порядка 10-15 интересных источников с пресетами на бутстрапе, так что это несущественно (очень много публичных примеров на бутстрапе). Все шаблоны на Bootstrap 4 - так что можно самостоятельно пополнять библиотеку из всевозможных мест (ну или верстать самостоятельно пресеты).

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

Я сейчас ломаю мозг, как этот механизм распространить на виджеты - вот это будет реально "талантливо" (мечты, мечты..). Но видимо это уже планы на будущее, после запуска базовой части.

Просто я сколько видел именно готовые варианты темплате: графика и прочее это уже не Gpl. Знакомые темплате просто, вспомнить не могу чьи)

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

Сейчас важнее закончить с компонентами и виджетами, функционал с лендингами я пока оставляю как есть.

Вот, вот. Вам сейчас нужно сосредоточится на конструкторе сетки страниц. А то таким макаром вы всё больше сливаетесь со стезёй сущности представленной на вашем аватаре ))

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

А если таким же макаром открывать онлайн конструктор и "парсить" сохранённый результат с онлайн конструкторов? Или в сути оно так и происходит, только основа конструктора хранится на вашем сайте? Хотя, наверное в этом нет смысла если этот конструктор лендинга это ваша собственная разработка. Если нет, то лучше сделать свой, пускай проще.

ДА! Вы правы на все 150%. Я же об этом сам написал и сказал на видео. Конструктор на видео - это далеко не самое главное. Я показал как можно встроить любой лендинг в шаблон. Главное, что шаблон поддерживает работу с лендингами из коробки. А каким сервисом пользоваться для этого - дело десятое.

Главное на видео:
1. Как создать новую страницу для лендинга
2. Как добавить виджет который выведет сформированный лендинг (в виджете есть еще поле для ввода кода, если страница сформирована на стороне - я это не показал, оно добавлено после видео).

Но если страница сформирована в другом месте, то надо как-то решать проблему со скриптами и иллюстрациями - где их хранить? - на своем сервере или все ссылки должны быть глобальными? - значит логично сделать еще загрузчик сформированного лендинга из zip архива со всеми потрохами (css, js, images, fonts)

-------------

А теперь то, что еще будет добавлено именно в этот конструктор - добавление контактных форм, созданных в админке InstantCMS (вот это вы в стороннем сервисе замучаетесь делать). Есть еще некоторые идеи по добавлению виджетов, но я пока не готов их озвучивать.

Смысл такого конструктора может быть только в тесной работе с админкой InstantCMS - использование форм из админки, виджетов и тд.

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

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

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

Что такое лендинг? - это html файл + набор css, js, картинок и других файлов, которые используются в html.

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

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

Про редактирование всего-всего-всего это пока только мысли.

Посмотрю, почему бы и нет

Я думаю надо смотреть в сторону Elementor и его логике работы с шаблоном.
Видео уроков много на Ютубе, кому интересно можете глянуть. С с ним работаю на ВП очень удобно все там сделано.

Отличная разработка. Очень интересует тема с лендингами.
Когда планируется релиз?

Релиз планирую до НГ.

Если у вас есть опыт создания лендингов - можете написать, что там требуется. Ну вот, например, нужно иметь возможность добавить форму, созданную в админке (например в iForms). Интересует именно тот функционал, которого нельзя получить в каком-нибудь облачном Landing Builder'е - привязка к InstantCMS. Может быть вывод виджетов каких-то..

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

Может как нибудь так

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

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

может раскрасить можно будет просто стилями через родные стили инстанта?) в целом для человека знающего html и css это не будет проблемой, взять стили от лендоса из пресетов и переписать под виджет инстанта

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

Как можно добавить форму в конструктор. Видео еще может обрабатываться на стороне ютуба, только-только закинул.

Интеграция с iForms это вообще супер, к новому году будет релиз, я правильно понимаю?

Это желание, получится ли его реализовать - посмотрим.. Еще есть над чем работать.

Спасибо за ваши труды и вклад в развитие системы, ждемс с нетерпением!

Новый год уже вот вот. Релиз задержится?

Я каждый день захожу- не пугайте!

Такая же фигня, жду с нетерпением.

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

Всех с наступающим!

Отвечу по поводу релиза. В самом ближайшем будущем ожидается обновление InstantCMS до версии 2.10.2 (или до 2.11). Было бы правильным выложить шаблон после проверки на последней версии. В обновлении движка довольно много изменений.

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

верно. такого виджета для вывода связей нет) вот как раз в связях и выбирать настройки отображения)

Может, хотя бы примерную дату релиза скажите. А то наверное я, как и многие захожу в тему и смотрю, когда же, когда же наконец-то.

Эх как жаль, что данное чудо так и появилось на свет.

Был бы явный спрос, тогда и исполнитель найдётся ))