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

15048
Приветствую.

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

+ добавлено видео #5
Smart Шаблон на Bootstrap 4, Первое знакомство


На этих видео можно посмотреть работу со схемой позиций.


Спойлер

Видео 5, экспорт и импорт шаблонов


Новые видео постепенно будут добавляться в этот пост - глобальные настройки, фронтенд и тд..

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

PS Telegram @smartcontroltoday

+ добавлено видео #3
+ добавлено видео #4
+ добавлено видео #5
Черная пятница (-30% на всё)
Комментарии (69)
Алексей Тимофеев 4 декабря 2018 в 11:49 +1
Молодец+ давно в голове была эта мысль реализовать. Даже уже были наработки конструктора с Александром. Осталось еще предустановленные виджеты сделать и будет отличный конструктор.
Kreator 4 декабря 2018 в 11:58 +2
Отличная идея и реализация.

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

А в качестве монетизации можно продавать "специфические" подключаемые блоки и предустановленные шаблоны страниц.
letsgo 4 декабря 2018 в 12:13 +2
Молодец Евгений. Отличная и умная реализация. Большой плюс +
Capitan 4 декабря 2018 в 13:16 0
Супер! Не увидел что будет при просмотре с мобильных. Как все меняться будет. И да очень хочется чтобы продавался хотя бы за символическую плату smile Можно ли сразу в строить в блоки для виджетов запрет на индексацию.
@SmartControl 4 декабря 2018 в 18:49 +2
запрет на индексацию - это другими словами нужна настройка прав по группам для каждого блока/позиции? - это возможно
Capitan 5 декабря 2018 в 11:08 0
Если посмотреть как видет сайт робот. То видно что например из виджета Регистрация он видет слова регистрация-пользователь - пароль и тд. Т.е робот индексирует абсолютно не нужные слова и ссылки. А должен индексировать только теги Н1 Н2-5 и информационный текст. Все остально зло :)
@SmartControl 6 декабря 2018 в 03:32 0
Я понял логику. Если вы про специальный тег для яндекса noindex, то это сейчас уже можно сделать, добавив его в настройки блока. Плюс я могу добавить это в виде флага, чтобы не прописывать код вручную. И можно добавить такую настройку в настройки "позиции".
Capitan 6 декабря 2018 в 11:52 0
Да. Как флагбулет отлично
Андрей 4 декабря 2018 в 13:18 +1
Готовый конструктор шаблонов.
Саня 4 декабря 2018 в 13:58 0
Класс. Приятно видеть такого специалиста в рядах Инстанта.
BoAnRo 4 декабря 2018 в 15:13 +1
Выглядит очень круто! И то, что шаблон работает на Bootstrap гарантирует что на разных устройствах все будет отображаться правильно. Ну, конечно, я не надеюсь, что эта разработка будет доступной бесплатно.
webtotma 4 декабря 2018 в 15:26 0
Вы молодец, плюсую.
Loadырь 4 декабря 2018 в 18:10 +4
Классно. Надо его вторым дефолтным шаблоном делать в коробке smile .
Kreator 4 декабря 2018 в 22:27 0
Решено. Так и сделаем.
Олег Васильевич я 4 декабря 2018 в 23:24 +2
Надо его вторым дефолтным шаблоном делать в коробке
Первым! zlo
WebMan 4 декабря 2018 в 18:14 +1
Классная идея! Однозначный плюс!
Почему бы не разрешить галку "Занимать всё свободное место" для любых блоков, а не только для контента?
@SmartControl 4 декабря 2018 в 18:31 +3
да, возможно. Каких-то особых ограничений, мешающих это сделать, нет.
@SmartControl 6 декабря 2018 в 03:28 +1
Подправил, сейчас это так и работает, для любых позиций.
Asket 4 декабря 2018 в 19:04 0
Супер круто! v
Говорил же, гений!

И по «обратной связи» добавить пока нечего, выглядит всё максимально продуманно.
vikont 4 декабря 2018 в 20:14 0
Такой шаблон для Инстанта - это новая ступень взросления CMS! Инстант становится все больше похожим на крутой конструктор любых сайтов с отличным функционалом!
BoAnRo 4 декабря 2018 в 20:24 0
В настройках шаблона нужно сделать поле (с подсветкой) где можно вносить свои стили или переписывать существующие.
Ну и конечно, было бы интересно услышать какие планы касательно стоимости шаблона.
BoAnRo 4 декабря 2018 в 20:26 0
Ой, случайно мой комментарий получился как ответ на предыдущий комментарий.
@SmartControl 4 декабря 2018 в 21:07 +3
Глобальные настройки шаблона:

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

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

Ну и конечно, было бы интересно услышать какие планы касательно стоимости шаблона.
Пока могу написать только, что код будет открыт и использование без ограничений на количество сайтов.
Kreator 6 декабря 2018 в 00:07 0
У меня дежавю)
skewes 5 декабря 2018 в 05:47 0
Очень крутой шаблон!!!
Remi 5 декабря 2018 в 09:23 0
Заверните два пожалуйста!))
Remi 5 декабря 2018 в 09:24 +1
Заралик 5 декабря 2018 в 09:27 +2
Ну вот и готовый конструктор! Плюсую, идея отличная!
Loadырь 5 декабря 2018 в 10:10 +6
По поводу создания своего шаблона для страницы. Сейчас там я так понимаю, предлагается создать шаблон страницы с нуля, даже если мне надо всего лишь поменять местами пару блоков. Может есть смысл давать редактировать уже созданный шаблон для всех страниц? Или опционально предлагать "Создать шаблона из копии" и ниже список готовых шаблонов страниц, включая общий шаблон.
@SmartControl 6 декабря 2018 в 03:21 +1
Добавил в пост третье видео про клонирование схем. Следующий этап - загрузка схемы из внешнего файла (экспорт-импорт схем с настройками виджетов).
Loadырь 6 декабря 2018 в 08:04 0
Отличная работа.
Из хотелок: иконку для копирования виджетов (да и вообще в админке для копирования) лучше использовать например такую https://github.com/instantsoft/icms2/blob/master/templates/default/images/icons/copy.png из коробки со следующего релиза. Так как + немного "сбивает с толку".
По схеме шаблона вопросы исчерпаны, осталось посмотреть, что будет в исходном коде страницы и в принципе, можно запускать в массы на тестирование smile
Алексей Тимофеев 5 декабря 2018 в 10:25 0
Обязательно заложить в функционал готовые пресеты для вставки в позиции
как в мобирайзе
Можно будет делать такие блоки и дополнять конструктор, делая даже тематические подборки. Тем самым можно неплохо монетизировать основу как от производителя так и с сообщества.
@SmartControl 5 декабря 2018 в 21:45 0
Это же надо делать на фронтенде с возможностью сразу править пресеты.. Иначе как? - не просто же виджетами с несколькими полями для настройки.. То есть это надо свой конструктор для фронтенда писать, что-то вроде "Конструктора тем", только попроще и с базой готовых пресетов.
GoodMade.ru 6 декабря 2018 в 12:32 +1
Алексей, никакой конструктор тебе не сделает то, что нужно оптимизировать ручками с учётом разного рода зависимостей.
Да что конструктор, глянь любой шаблон на инстант в мобильном варианте, даже там люди понимающие не могут сделать как нужно.

п.с. А если и прибегать к конструкторам, то это нужен хорошо настраиваемый конструктор, который нужно будет изучать, ровно так же как если бы ты изучал основы вёрстки. И второй вариант в выигрыше. Нет ограничений конструктора\настроек и нет зависимости от инструмента.
GoodMade.ru 6 декабря 2018 в 12:38 +1
Да, "криворукие программисты" могут попытаться сделать что-то лучше чем они могут в плане вёрстке, но опять-таки будут ограничены возможностями инструмента, неумением и непониманием стези дизайна. Я делаю вывод, очередная игрушка для людей, которые наигравшись будут винить конструктор за своё "неумение" ))
@kami 5 декабря 2018 в 13:04 0
Разработчик по новый год просто ошеломил новостью о шаблоне! Интересно, а когда можно будет увидеть демку шаблона?
Алексей Тимофеев 5 декабря 2018 в 13:25 0
По задумке я думаю будет стили дефолтного шаблона, а кому надо будет свои, сделают или закажут smile
vikont 5 декабря 2018 в 14:02 +1
Как раз хотел задать вопрос, а что будет на выходе конструктора? Готовый скрипт шаблона? С каким дизайном и можно ли его моделировать из конструктора?
@SmartControl 6 декабря 2018 в 03:27 +1
На выходе будет настроенная схема, которая будет работать на сайте. Схему можно будет выгрузить в файл и загрузить на другом сайте.
Готовый скрипт шаблона?
Скрипт шаблона то не меняется (если речь про файлы). Все настройки хранятся в базе данных - все позиции, блоки, их настройки и тд..

С каким дизайном и можно ли его моделировать из конструктора?
В схему можно добавить уникальные стили для каждой страницы (то есть сам css код). Или глобальные стили для всех страниц сайта. Подробнее про дизайн будет чуть позже, но влиять на него из админки точно можно будет.
WebMan 6 декабря 2018 в 13:03 0
Все настройки хранятся в базе данных
И вытаскиваются оттуда все сразу за один раз одним запросом?
@SmartControl 6 декабря 2018 в 13:20 +1
Да, ровно одним. Он называется "получить колонки для вывода".
Александр 5 декабря 2018 в 19:58 0
Отлично, но хотелось чтобы был вариант не просто складывания сайдбаров на смартфонах, а скрытия под кнопку "меню".
Для Bootstrap есть скрипты такие. Что то типа этого или этого , но это не совсем то.

А кто какие скрипты для такого использует?
Александр 6 декабря 2018 в 07:02 0
допускаю что это не связанные вещи, но вполне интегрируемые.
GoodMade.ru 5 декабря 2018 в 21:50 0
Ну вот, а то уже думал что никому такое не надо ))
А по хорошему, такое надо делать самому Fuze, для родного шаблона.
п.с.
От бустрапа лучше брать только сетку и вспомогательные классы. В остальном, по личному опыту, с ним больше возни, нежели подмога.
Алексей Тимофеев 6 декабря 2018 в 08:54 +2
Спасибо за новое видео и за копирование виджетов, очень не хватало!
Loadырь 6 декабря 2018 в 09:11 +1
Кстати, копирование виджетов на гите уже есть. Не будет ли "задвоение" иконок и функционала после обновления движка?
@SmartControl 6 декабря 2018 в 13:27 0
Да, я посмотрел. Я делал независимо от версии на гите. Задвоения точно не будет, потому что у меня подключается свой шаблон админки (а на гите это копирование прописано в шаблоне - добавляется ссылка и функция в js).

С одной стороны, лучше было бы сразу делать шаблон на версии с гита. С другой - у шаблона тогда не будет совместимости с версиями ниже.. По этой причине я (может быть) оставлю свой вариант копирования, который будет работать на 2.10.1 и ниже. То есть в шаблоне копирование будет свое, а если поменять на дефолт - там будет копирование из коробки.
Loadырь 6 декабря 2018 в 14:58 +1
Можно проверять версию движка и если не выше текущей, то предлагать копирование виджетов вашим методом, а остальные будут коробочным методом. В коробочной версии есть подтверждение (confirm) от случайного нажатия на кнопку копирования. Но это так, чисто для поднятия юзабилити ))).
Win_wiruzz 6 декабря 2018 в 13:41 0
Какая прелесть, хотел мобильный шаблон себе делать, но думаю лучше подожду laugh
Александр Витальевич 6 декабря 2018 в 18:32 +1
Автор как всегда радует, спасибо! Ждем релиз! Плюсую!
@Milyana 7 декабря 2018 в 00:45 0
А это решение по созданию своей сетки виджетов будет работать только на этом шаблоне или можно будет перенести на любой другой?
Kreator 7 декабря 2018 в 01:00 +1
Это решение - само шаблон.
@IRIPUS 7 декабря 2018 в 01:25 0
Это большой шаг!
дальше - мультилендинг!
Василич 7 декабря 2018 в 04:11 0
Уважаемый ТС, а приложение, оно заброшено или ещё ведётся какая-либо работа?
@SmartControl 7 декабря 2018 в 04:32 +2
Отвечу под спойлером, потому что не теме поста
Dorimen 8 декабря 2018 в 16:54 +1
А когда будет доступно для скачивания? Какая минимальная версия Инстанта должна быть?
@SmartControl 10 декабря 2018 в 12:24 0
Какая минимальная версия Инстанта должна быть?
У меня на демо стоит 2.10.1 - последний релиз. Версия не принципиальна, но на более ранних я не проверял. А есть смысл проверить на 2,9 или еще более ранней?

А когда будет доступно для скачивания?
Хороший вопрос, но мне надо сначала показать как выглядит фронтенд.
Dorimen 11 декабря 2018 в 12:34 0
У меня на демо стоит 2.10.1 - последний релиз. Версия не принципиальна, но на более ранних я не проверял. А есть смысл проверить на 2,9 или еще более ранней?

Не знаю, стоит или не стоит проверять... У меня, например, 2.8.2 установлена.
@SmartControl 10 декабря 2018 в 13:36 +2
Закинул видео #4 (в описании)

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

Следующее уже по фронтенду будет. А в админке из запланированного осталось добавить экспорт и импорт шаблонов вместе с предустановленными виджетам.
Loadырь 10 декабря 2018 в 13:58 0
@SmartControl:
экспорт и импорт шаблонов вместе с предустановленными виджетам
TO DO: надо не забыть учесть, что некоторые типы виджетов, могут отсутствовать на сайте приемнике и их надо, как-то исключить из выгрузки и сообщить об этом куда следует.
@SmartControl 10 декабря 2018 в 14:06 +3
да, этот момент я держу в голове. Не получится привязать к позиции отсутствующий виджет. Поэтому и выгрузка должна быть с полной информацией по виджету - название, автор, может быть даже id дополнения в каталоге.

В выгрузке то может быть все, а вот при загрузке уже возможны варианты - вывод сообщений со списком отсутствующих виджетов.
Kreator 10 декабря 2018 в 14:08 +1
Может лучше на сайте приемнике перед импортом проверять, установлены или нет, и сообщить если какие то виджеты не установлены так как их нет. Можно доустановить виджеты а потом повторить импорт.
@SmartControl 10 декабря 2018 в 14:11 +2
да, все верно. Я так и планировал. Потому что тот, кто выгружает, может не знать кто воспользуется его шаблоном, на каком сайте и с какими виджетами. Его же можно и в дополнения выложить. А там уже кто скачал, тот и главный.
@SmartControl 13 декабря 2018 в 14:27 +3

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

+ Экспорт шаблона в файл (с виджетами или без)
+ Импорт шаблона из файла
+ Проверка на установленные виджеты при загрузке
Loadырь 13 декабря 2018 в 17:17 0
Я так понимаю, переносятся только шаблоны страниц. А весь шаблон (все страницы) сразу перенести можно?
@SmartControl 13 декабря 2018 в 19:40 +3
Да, все верно - я пока скрыл первый пункт спичка «выгружать все страницы». Думал над тем, стоит ли делать псевдонимы шаблонов, чтобы хранить базе несколько - то есть чтобы после загрузки нового он не удалял текущий, а вставал рядом.

Но похоже откажусь от этой идеи (есть минусы по производительности без правок системных файлов не решить). И сделаю просто загрузку, перед которой будут очищаться страницы при совпадении. Потому что в загрузке может быть, скажем, 10 шаблонов для разных страниц ( основной + 9 дополнительных) и виджеты для 50 страниц.
Loadырь Вчера в 06:47 +1
Создавать новый шаблон при импорте не надо, мы же при импорте сами выбираем в какой шаблон грузить. А создавать новый шаблон можно и отдельно от этого компонента. Просто как пожелание, сделать именование файлов экспорта/импорта не одинаково (template.json), а скажем генерировать из названия выгрузки и/или названия шаблона. Можно даже с приставками (full, all_pages, main_page и т. п.). Этого считаю будет достаточно.
В общем считаю достаточным иметь возможность перенести сод6ержимое всего шаблона на другой сайт, в выбранный шаблон с полным затиранием ранее имеющегося и перенести отдельные отредактированные страницы шаблона. Всё остальное ни к чему хорошему не приведёт.
@SmartControl Вчера в 17:04 +1
Создавать новый шаблон при импорте не надо, мы же при импорте сами выбираем в какой шаблон грузить.
Это в случае одной страницы выбираем, а если грузить целиком шаблон - тогда ничего выбирать не нужно. Получается, что нужно будет очистить все страницы, которые грузятся. А если например есть страницы компонента Форум (к примеру), а в загружаемом шаблоне их нет, то они останутся как были. Не обнулится ни схема, ни виджеты на ней.

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

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

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

Ну вот как-то так и будет.
Алексей Тимофеев Сегодня в 11:45 +2
При правильном подходе много интересных шаблонов можно сделать.
Жду 6 видео, тема в закладках.
Спасибо.