Памятка   Всякая страница по умолчанию строится в два прохода: сначала вызванный модуль рендерит центральную часть на основе какого-то своего tpl-макета, потом выводящий модуль рендерит в шаблоне файл index.tpl - это общий макет страницы и вставляет туда полученный центр. Для лендинг-подобных страниц или ajax-ответов такое поведение можно отменить тегом {lastTemplate} в tpl-файле - здесь как бы заявляем "после этого файла рендеринг прекратить". В динамических ajax-вызовах аналогичный эффект даст request-параметр ajax или pseudoAjax или dynamic, то есть тут двупроходный рендеринг отключается и без тега.
Знаете ли вы...

Bootstrap - это набор CSS-примитивов для адаптивной разметки эскиза отдельной страницы или сайта унифицированной структуры.

Факт 1   Бутстрап стал популярен среди любителей, ведь позволяет в короткое время разметить макеты страниц так, что результат на любом современном устройстве и браузере выглядит будто сделан мастером.
Факт 2   Лёгкость создания разметки достигнута кратким именованием примитивов, их широким набором и простыми правилами использования в html-коде, что понравилось даже начинающим.

ShortCodes - это набор программных примитивов для описания в макете страницы её серверной логики: то есть как она собирается "на лету".

Факт 1   Схемы кодовой записи алгоритмов генерации страниц "на лету" придумывались и ранее. Однако попытки всякий раз оказывались или неудобными, или сложными в применении, или вообще непонятными любителям.
Факт 2   Только к 2017 году была выработана концепция кратких команд, которая обладала той же ясностью как система Бутстрапа. Теперь статичные html-макеты быстро связывают с меняющимся контентом сайта.

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

Памятка   Тег краткой команды состоит как правило из одного слова, а сами теги делятся на 2 группы. К первой отнесены блочные, то есть действующие на всё между их открывающим и закрывающим словом. Вторая содержит инлайновые, то есть действующие на место написания. Например, в строке копирайта внизу сайта иногда нужно вывести текущий год - тогда там пишут тег {year}. Если рядом с годом хотят напечатать допустим название компании, пишут тег {company}. Если же вместо компании надо показать название сайта, пишут тег {siteName}. И так далее, список тегов обширный и продолжает расти с каждой новой версией ShortCodes.
Как делали шаблон...

Технику short-кодов уже испытывали. Например в создании шаблона AutoDrive, в натяжке лендингов Synthetica, Vapour и так далее.

Каждый раз та техника оживляла html-статику, какой фактически являлись исходные макеты-болванки. Их сначала рисует дизайнер допустим в Photoshop, затем верстальщик развёрстывает дизайнерский набросок в простые html-странички с выдуманным наполнением. Затем вебмастер натягивает html-ки в движок сайта, то есть добавляет в предоставленную ему вёрстку особый код - программную логику, чтобы вместо выдуманного контента выводился настоящий, который менеджер введёт потом в админпанели.

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

Шаг 1   Первым делом мы взяли в бутстраповских примерах азбучный макет Cover и втянули его в этот шаблон на случай ситуации Ошибка 404. Скриншот исходного (иностранного) варианта показан.

Для просмотра натянутой версии нажмите кнопку Живой пример: там обратите внимание, что верхнее меню и подвал содержат уже реальные данные из админпанели. То есть всего несколько short-кодов (тегов) позволили убрать из макета статичность.

Живой пример »

Прикольно   Как и в случае с Bootstrap, нам вообще говоря пофигу, что можем не знать принципы CSS (таблиц стилей). Так и в случае с ShortCodes, нам пофигу как работает CMS (система управления сайтом).

Памятка   Большая часть блочных short-команд относится к типу условных, то есть эти теги выведут тело своего блока только при выполнении некоторого условия. Например:

{ifDemo}
      мы на демо
{/ifDemo}

{ifAccepted}
      форма принята
{/ifAccepted}

{ifError}
      ошиблись
{/ifError}

Такая запись выглядит чисто и легко читается.
Нарезаем формочки ввода...

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

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

Нам главное было убедиться, что Bootstrap + ShortCodes натяжка - это просто и быстро. Так вот на каждый выбранный и скачанный пример уходило от 5 до 15 минут натяжки, в основном на вычитывание html-кода, чтобы найти место, где будем ставить тот или иной тег short-команды.

Шаг 2   Итак, на этот раз мы взяли в Бутстрап заготовках макет формы ввода Sign-in и втянули его в наш шаблон на место странички Авторизация (плюс ещё страничка Забыли пароль?), а также странички Регистрация с другим набором полей, плюс странички Обратная связь с третим набором и странички Перезвоним с четвёртым набором. Скриншот исходного варианта показан.

Копипаст Детектед   Ну, не было в бутстраповских заготовках иной демонстрации формы ввода, вот мы и накопировали 5 модификаций из одной...

Памятка   Ещё одна часть блочных тегов относится к перечисляющим некие записи. Например:

{enumCart}
      тут разметка
      товара корзины
{/enumCart}

{enumCategories}
      тут разметка
      категории
{/enumCategories}

{enum}
      тут разметка
      чего-то там
{/enum}

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

Вот это да...

Испытаем произвольные модули - ещё одну фишку ShortCodes.

Из прошлого примера выкусываем формы ввода в отдельные файлы - получились feedback.htm, формочка callme.htm и формочка login.htm. Тогда можем применять их на любой странице как независимые модули.

Мы просто пишем здесь тег {modFeedback}, во второй ячейке тег {modCallme} и в третьей тег {modLogin}. Смотрите что получилось.

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

А пока вернёмся к базовым примерам.

Карусельки слайдеры...

Следующая часть придаёт обычному текстовому сайту как солидность так особое очарование.

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

Чтобы не быть голословными, предлагаем заглянуть в Живой пример. За те несколько минут кодинга болванки слайдера мы ещё успели втянуть меню категорий, вывод неких товаров под слайдером. А в подвале вдобавок показали меню, которое в админпанели было названо "Верхнее меню".

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

Памятка   Ещё одна удивительная возможность фреймворка ShortCodes состоит в мгновенном создании так называемых абстрактных страниц, то есть вообще никак не зарегистрированных в базе данных сайта. Если в папке абстракций шаблона разместить некий макет, скажем файл с именем demo-carousel.htm, такая страница тут же станет доступна по адресу, как имя файла без расширения, то есть http://demo.imperacms.ru/demo-carousel. Именно эту возможность мы испытали в примере выше "Карусельки слайдеры" - обратите внимание на URL ссылки живого примера. Причём при размещении файла в глубине папок, например folder/subfolder/example.htm, такая же структура сохранится в URL абстрактной страницы.
Для ленты новостей...

Этот пример, хоть размечен в блоговой манере, всё же посчитаем эквивалентным макету "список новостей" в шаблоне интернет-магазина.

Шаг 4   В общем, из примеров Бутстрап на этот раз мы натянули их образец Blog на место списка новостей, который в онлайн магазинах часто используют именно как примитивное подобие блога.

Натяжка такого макета заняла 5 минут времени, в основе лежит следующий код:

{enumNews}
        <div class="blog-post">
                <a href="{url}">{name}</a>
                <p>{date}</p>
                {annotation}
        </div>
{/enumNews}

Обычное перечисление списка новостей, где каждый перечисленный элемент выводится в форме "название-ссылка / дата / краткой текст".

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

<select>
        {enumFunctions}
        <option>{idx} = {item}</option>
        {/enumFunctions}
</select>

Таким образом мы вывели на страницу следующий список тегов текущего релиза:

Если потребуется вывести номер версии, используем тег {shortCodesVersion}.

Извиняемся, этот блок документа находится в стадии подготовки.
Ожидайте, не успеваем оформить,
Слишком много полезной информации :)
...
...
...
...
...

И даже админка...

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

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

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

Шаг 5   Поэтому мы решили проверить, упростит ли технология ShortCodes задачу разметки нестандартной админки. В примерах Бутстрап есть такой образец Dashboard. И мы в течении нескольких минут сделали набросок примитивной админпанели.

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

Главное помните   Современные веб-технологии и фреймворки - типа jQuery, Bootstrap, ShortCodes и тому подобные - создавались чтобы упростить построение сайта собственными силами. А если у вас всё равно возникли вопросы или нет времени на натяжку, задайте в обратную связь сайта Имперы. Вам подскажут или найдут тех фрилансеров, кто за некоторую денежку поможет с ShortCodes-натяжкой понравившегося вам html-шаблона.

Задать вопрос

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

Подробности

Построен на чистом Bootstrap v.3.3.7 из примеров с официального сайта.

Собран по технологии ShortCodes v.2017.01.18.

Верстальщику   Этот блок "Другие дизайны" был вызван командой {modDemoThemes}, и в результате сгенерирован файлом demo-themes.htm, который находится в папке модулей шаблона.

Impera CMS - лёгкий и быстрый скрипт сайта с потрясающими возможностями. Мы создаём мощные решения с минимальным кодом и высокой скоростью загрузки.