Базовый скин (шаблон) для Alto CMS


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

Скин получил название Start-Kit.
Предыстория
О том, что старую систему шаблонов надо менять, говорилось еще в сообществе ЛС не один год. И при подготовке еще самого первого релиза Alto CMS были планы запустить свою систему шаблонов. Но тогда, во-первых, мы посчитали, что очень важно обеспечить совместимость. А, во-вторых, новая система шаблонов не была достаточно продумана. Поэтому тогда оставили все, как было.

Затем были эксперименты: шаблон mono и шаблон bootstrap, с некоторыми новшествами, но не очень удачно реализованные (поэтому они не получили развития). Была еще одна разработка, но она так и не вышла в публичный доступ.

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

Чего хотелось
Чего хотелось достичь при разработке новой структуры шаблонов:
1. Понятная и логичная структура файлов
2. Максимальное использование готовых сторонних разработок (Bootstrap, плагины jQuery) и, по возможности, минимизация доморощенных скриптов
3. Использование системы наследования Smarty (но без фанатизма)
4. Использование принципов БЭМ (но, опять же — без излишнего фанатизма)
5. Адаптивность верстки, возможность темизации и кастомизации

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

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

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

Как уже говорилось, в этом скине используется Bootstrap 3.0. И почему-то многие забывают, что Bootstrap — это не просто css-фреймворк, это еще и набор готовых js-скиптов для работы с интерфейсом. И я считаю, что нет необходимости придумывать какие-то свои «костыли» для интерактивного взаимодействия с пользователем там, где можно обойтись готовыми инструментами, ставшими стандартом де-факто. И именно этот подход реализовывается в Start-Kit.

Я давно и упорно твержу, то в шаблонах нужно задействовать механизм наследования Smarty (впервые это было сделано в шаблоне mono). Это, разумеется, не означает, что мы полностью отказываемся от директивы {include file="..."}. Должен быть сбалансированный подход — где-то наследование, а где-то инклуды. Не надо забывать, что ключевая цель — упрощение разработки шаблонов.

Start-Kit имеет адаптивную верстку, есть возможность кастомизации (сайдбар, фиксация навигационного бара, включение/выключение головного баннера) и темизации (темы вынесены в отдельную папку).

Приветствуются любые пожелания, предложения, любая конструктивная критика.

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

ВАЖНО: Новый подход, конечно же, ломает совместимость на уровне шаблонов, т.е. плагины, заточенные на старую структуру шаблонов на нем работать без адаптации не будут. НО! Вы, как и раньше, можете запускать старые шаблоны на новой версии Альто. В общем, будет поддержка шаблонов двух стилей — ЛС-стиль (старая система шаблонов) и Альто-стиль (новая система шаблонов).

UPD: Для того, чтобы попробовать Starter-Kit, необходима версия Alto CMS не ниже 1.0-RC3

Похожие статьи


54 комментария

0
Вот за это — НИЗКИЙ ПОКЛОН!
Спасибо :)
0
Да, я видел Ваше стремление к developer-kit, и это было одним из плюсов в сторону выбора основы :)

И т.к. у Вас уже наработан какой-то опыт с «родительским» шаблоном, то буду рад услышать какие-то соображения и пожелания
0
… буду рад услышать какие-то соображения и пожелания
Непременно!
0
Я бы очень хотел обратить внимание на встроенные в коробку скрипты. Там везде встречаются предопределенные классы и идентификаторы — и это очень большая головная боль, уж поверьте. Практически в каждом файле шаблона приходится писать что то типа «ls.pool.addAnswer(....» а там JS-скриптом и html-код формируется и css классов-идентификаторов столько, что больше времени тратится на изучение кода JS, чем на верстку.

Я к чему все это, если уж переходить на бутстрап, то полностью и документрованно. В Alto 20+ js-скриптов ядра, перевести все в нотацию bootstrap (плагинов jQuery), задокументировать, привести к требованиям JSLint — не сложная, а скорее рутинная операция.

Я думаю, на это тоже стоит обратить внимание.
+1
Согласен однозначно! Есть ощущение какого-то хаоса, когда погружаешься в детали, слишком уж бессистемно все именовалось — файлы, классы, идентификаторы… Я уж не говорю о попытке создать некий альтернативный фреймворк а-ля Бутстрап, где реализуется точно такой же функционал, но как-то по-своему.

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

Что касается именований, то пока сформулировано только одно четкое правило: id модальных окон четко увязаны с названием файлов-шаблонов этих окон.

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

Остальные правила еще предстоит выработать
0
Вот и я про то же.
Плюс ко всему в одном скрипте используются хуки вместе с маркерами и триггерами (в ls так исторически сложилось). Здесь, на мой взгляд, нужна однозначная позиция, иначе никакой единой концепции построения темы не получится (.
0
Что касается маркеров, то я глубоко убежден, что маркеры — это самое злейшее из зол, что были придуманы в ЛС. Всегда был против их использования, как только внимательно посмотрел, как они работают. Поэтому их выпиливание — это вопрос решенный (я редко бываю столь категоричен, но тут особый случай).

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

Поэтому в отношении скриптов планы такие:
1) Оставить набор старых js-скриптов для работы с шаблонами LS-style (сейчас они в папке /templates/frontend/ls/js/)
2) Скрипты для работы с шаблонами Alto-style (/templates/frontend/libs/) очищаются от маркеров и хуков и переводятся на триггеры.
0
Спасибо.
+1
aVadim , можете ли тут или где-то в другом месте описать, какая планируется структура кода при работе с триггерами? Раз такое решение (на счет использования сугубо триггеров) принято — то логично мне сейчас в своих проектах именно в этом направлении и развиваться. Но, что бы после вносить как можно меньше правок, хотелось бы увидеть примеры оформления (если есть уже что-то сформировавшееся) кода при использовании триггеров.
0
Принципиальное решение принято, но детали еще обдумываются. Описал здесь, как примерно это планируется делать: altocms.ru/blog/dev/530.html

Любые замечания и предложения приветствуются
0
Благодарю
0
Отличная новость!
0
У меня не работает диалог входа (кнопка «войти»), и при открытии формы регистрации, сначала висит окно, через пару секунд открывается на весь экран:

+1
Да, есть такое (пользователь создается?).
Кстати, чтобы капча выводилась нужно обратить внимание на следующий код (привожу основной фрагмент, файл: /skin/start-kit/tpls/actions/ActionRegistration/index.tpl, строка 76):
{Config::Get('path.root.engine_lib')}/external/kcaptcha/index.php

— нужно поменять на:
{Config::Get('path.root.engine_lib')}kcaptcha/index.php
0
Спасибо, onclick кстати тоже надо поменять

<code>onclick="this.src='{Config::Get('path.root.engine_lib')}/kcaptcha/index.php?{$_sPhpSessionName}={$_sPhpSessionId}&n='+Math.random();"</code>
Странно, что не стоит подсказки что по клику стоит обновление картинки, я это обнаружил только сейчас. А лучше сделать кнопку.

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

Кнопка «Зарегистировать» тоже не работает.
Отредактирован:
0
А где настраивается скин не в курсе? А то кнопка не работает и в админку не войти… пробежался по config.php, и по таблицам, ничего похожего не нашел…
0
common/templates/skin/start-kit/settings/config/
0
А что конкретно Вы хотите настроить?
0
Хочу аернуть скин synio, т.к. с новым кнопка «войти» не работает, и ничего сделать нельзя))) Нашел конфиг в таблице storage, но изменение названия скина не на что не повлияло.

Так сейчас выглядит

Отредактирован:
0
Сначала удивился — не может быть, чтоб авторизация не работала. А потом сообразил — наверняка свежую версию Альто с гитхаба не скачивали. В общем, добавил примечание в топик — для того, чтоб попробовать Start-Kit, нужна свежая версия Альто
0
Спасибо, а все-таки как вернуть настройку, если админка не доступна? Я в правильное место вообще лезу? Хочется разобраться, на будущее…
+1
1) Запись с ключом custom.config.view.skin удалить
2) Очистить папки /_tmp/cache/ и /_run/
3) В файле /app/config/config.local.php задать нужный скин:
$config['view']['skin'] = 'synio';
0
Спасибо, сработало, кстати обнаружил, что в /common/config/config.local.php такая строчка есть, так что править /app/config/config.local.php не потребовалось.
+1
Первый полет:
Ставим всё самое последнее с гитхаба (и дижок, и скин соответственно).
1. Авторизация — ура, работает!
2. Регистрация — не-а..., после нажатия на «Зарегистрироваться» — висим. Но — запись в БД о новом пользователе вносится. Т.е. сама регистрация прошла, а вот перезагрузки и прочих привычных радостей не произошло… Перезагружаем страницу с помощью браузера. Всё — мы дома.
3. Пробуем иначе. Выходим. Клацаем правой кнопкой мышки на «Зарегистрироваться» и далее «Открыть ссылку в новой вкладке» (задача: попробовать зарегистрироваться НЕ с модального окна). Устанавливаем курсор в первый же input (логин) — всё, висим. Форма мертвая…
4. Пробуем дальше. Активируем плагин совместимости. Кнопки в модальном окне умирают. Теперь не зарегистрироваться..., не даже авторизироваться. Пробуем зайти со страницы /login — ура, получилось! А ну-ка «Регистрация» (со страницы /registration) — страница перезагрузилась, вылетела «Ошибка. Системная ошибка, попробуйте позже» (на англицком). Но — пользователь создался. Теперь нужно вернуться на главную, открыть с помощью правой кнопки мыши страницу /login (так как в модальном окне кнопки не работают) и авторизироваться. Уря!))

Про отсутствующие файлы (info.tpl, header_light.tpl...) и другие мелочи не пишу. Об этом и так сказано:
… это еще НЕ готовый результат, работа на скином в полном разгаре, поэтому баги и всяческие недоработки, конечно же, пока присутствуют в большом количестве.

В общем — есть что поковырять… :)
Прошу прощения за стиль изложения… Это наспех составленный конспект.
+1
Активируем плагин совместимости...
А вот это не нужно. Ведь скин разрабатывается, как полностью родной, и вставать должен как влитой без всяких костылей. И старые плагины без доработки с ним работать не смогут. Так что плагин совместимости не нужен
0
Хорошо — отметаем.
Вроди бы, похожая проблема (пункт «2» из моего конспекта) была у нас из-за отправки уведомлений на почту об успешной регистрации…

Кстати, при отправке письма с сайта, вылетает ошибка, что файла «email/emailtalk_new.tpl» в скине нет. Впрочем, его и вправду — нет. Есть «email/emai.ltalk_new.tpl» (куда-то девается точка)…

[LOG:1393966339.767-53163D03BB668][2014-03-05 00:52:19][PID:17240][ERROR][[Exception: Can not find the template 

"/common/templates/skin/start-kit/emails/ru/emailtalk_new.tpl" in skin "start-kit"

Template Dirs: /common/templates/skin/start-kit/; /common/templates/skin/start-kit/themes/; /common/templates/skin/start-kit/tpls/
]][END:1393966339.767-53163D03BB668]
0
Ставим всё самое последнее с гитхаба (и дижок, и скин соответственно).
1. Авторизация — ура, работает!
Скачал поледнюю альто, последний скин с гитхаба.

Ни кнопка «войти», ни кнопка «зарегистрироваться» у меня так и не заработала. Думал сначала из-за того что включил склейку js, переставил все по новой — не работает. Тогда я еще раз снес базу, выполнил скрипт install, все с нуля, предварительно еще раз скачав все заново, и скин и альто (на всякий случай) — ничего… как такое может быть? У меня Firefox 27.0.1

Отредактирован:
0
Забавно — ничего не делал, ждал вдруг кто ответит на мой комментарий, сейчас попробовал зайти — кнопка «войти», внезапно заработала… Кнопка «Зарегистироваться» не работает. И еще теперь справа постоянно всплывает окно «нет комментариев»…
+1
Это просто фантастика!
0
Для желающих поддержать автора лучшего адаптивного шаблона для разработчиков developer-kit, достаточно купить voffka.the-hut.by/blog/developer-kit/7.html в каталоге ls, его стоимость составляет всего 100 рублей ;)
комментарий был удален
0
профиль не работает
Exception: Can not find the template «actions/ActionProfile/info.tpl» in skin «alto-skin-start-kit-master»
если из этого окна нажать в браузере кнопку «назад» — выдает сообщение «нет комментариев».
+1
Вроди бы «нет комментариев» вылетает при каждой перезагрузке.
Exception: Can not find the template «actions/ActionProfile/info.tpl» in skin «alto-skin-start-kit-master»
Можно переименовать whois.tpl в info.tpl…
Отредактирован:
0
Вроди бы «нет комментариев» вылетает при каждой перезагрузке.
да, при каждой загрузке страницы где есть комментарии в сайдбаре

При попытке создать блог
Exception: Unable to load template file 'menu.create.content.tpl' in 'nav_content.tpl'
0
Тоже самое. Скажите, у вас кнопка «Зарегистрироваться» работает, или это только у меня глюки?
0
ответила ниже в 4 пункте
0
1. При выключенном баннере по адресу /talk/ на его месте текст
$noShowSystemMessage=false

2. В сообщениях «поиск сообщений» раскрыт.
3. При отправке письма
Exception: Can not find the template "actions/ActionTalk/message.tpl" in skin "alto-skin-start-kit-master"

4. При регистрации, регистрация проходит, но продолжает висеть окно.
0
Я правильно понимаю, что это шаблон Maxone для Альто?
+1
Я так понял, что за основу взят именно «developer-kit 1.4»
0
Maxone сделан на основе developer-kit, так же как StartKit.
0
Это понятно. Жалко конечно, что не своя разработка.
+5
Свое/не свое — это все гордыня, или, говоря по-пацански, — понты. Более важно, насколько это способствует развитию движка. Тем более, что developer-kit ведь не целиком берется, как он есть, оттуда используется разметка и классы стилей, которые, в свою очередь, базируются на бутстраповских классах. А вот структура шаблона, принципы работы с ним и т.д. — это свое. Но не потому свое, что просто так захотелось, а потому, что это долго обдумывалось и продумывалось, и, в итоге, было решено, что так — лучше.

В итоге, получаем шаблон полностью свободный для дальнейшего развития, где используются лучшие (на сегодняшний день) практики шаблонизации для нашего движка
0
Дело не в понтах, а в изюминке. С другой стороны я как понимаю это шаблон для разработчиков?
Жалко демо нету. Есть у кого поднятое демо?
0
Прежде чем писать на гите спрошу у сообщества (может это только у меня так) — никто не заметил, что блок «Прямой эфир» по умочанию закрыт (т.е. содержание вкладок «Комментарии» и «Публикации» всегда скрыто, по клику появляется как обычно, но после перезагрузки страницы содержание блока снова скрыто).
0
[LOG:1394801034.189-5322F98A2E580][2014-03-14 16:43:54][PID:24014][ERROR][[
E_WARNING [2] filemtime() [<a href='function.filemtime'>function.filemtime</a>]: stat failed for /home/users1/o/orthograf/domains/site.ru/_tmp/templates/start-kit-default/compiled/default^5665e6e762043572b9904ebc0ec21d0a1a48b81f.file.widget.stream_topic.tpl.php (/home/users1/o/orthograf/domains/site.ru/engine/libs/Smarty/libs/sysplugins/smarty_resource.php on line 744)
]][END:1394801034.189-5322F98A2E580]
0
Все ушли на фронт? ©
0
Такого рода ошибки чаще всего исправляются сбросом кеша
0
Раньше «Прямой эфир» заполнялся, когда сама страница формируется, а сейчас так: сначала выводится страница, а потом уже аяксом подгружается прямой эфир. Т.е. юзер страницу видит чуть-чуть быстрее. У Вас, видимо, по какой-то причине подгрузка автоматом не выполняется
0
по какой-то причине подгрузка автоматом не выполняется
Именно. Буду разбираться. Спасибо.
0
После последнего обновления, при добавлении статьи вместо кнопки «Опубликовать»:
/home/users1/o/orthograf/domains/site.ru/_tmp/templates/start-kit-default/compiled/default^6a02d743af9add71f34fac8e40e8edb51807053a.file.add.tpl.php

Соответственно в логе:
[LOG:1395812500.707-53326894B2E5F][2014-03-26 09:41:40][PID:25372][ERROR][[
E_ERROR [1] Call to a member function getPublish() on a non-object (/home/users1/o/orthograf/domains/site.ru/_tmp/templates/start-kit-default/compiled/default^6a02d743af9add71f34fac8e40e8edb51807053a.file.add.tpl.php on line 454)
]][END:1395812500.707-53326894B2E5F]

Строка 454 в указанном месте:
<?php if ($_smarty_tpl->tpl_vars['oTopic']->value->getPublish()) {?>
Отредактирован:
+1
Недоглядел. Пофиксил
0
Вадим, куда лучше писать о своих замечаниях в отношении шаблона?
Сюда, или на «Github» лучше?
+2
Если не трудно, то лучше на гитхаб. Более структурировано получается, легче отслеживать, что пофиксено, а что нет
0
Угу.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.