Адаптивный шаблон «Bonono»

Привет!


Наконец закончил работу над большим и интересным шаблоном. Упаковал и залил в каталог. Вот он «Суппер журнал» для всех, теперь это еще проще чем раньше. Так сказать продолжение темы «Сhaos to Block»

Шаблон по сути своей, является уже полноценным сайтом, достаточно установить LS + Bonono + Sitemap и можно спокойно работать над статьями.

(Кликобельно)



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


Начало


Продолжаю двигаться в направлении журнально/городской тематики c LiveStreet CMS. Получилось добиться неких успехов. То, что вышло самому нравится, но на этом не все, буду двигаться дальше. В качестве отправной точки, было выбрано направление знаменитых проектов birdinflight, lookatme (его дочек the village и компания), proexpedition и прочих журналов.

Описание


Прежде всего проект ориентирован на:

  1. Качественный контент
  2. Автора топика
  3. Удобство чтения пользователем
  4. Удобство использования
  5. Некую журнальность с нестандартным видом статей

Разных штук много, очень много. Все описать в топике не получится точно. И это замечательно.

Шапка


  1. Настраиваемый размер шапки пользователем
  2. Настраиваемый размер шапки администратором по умолчанию
  3. Разные варианты шапки. Меняется текст, фон, размер, кнопки управления.
  4. Настройка «Включить парралакс» или «Оставить фиксировано».
  5. Простая (маленькая) шапка. Если активирована, то все элементы управления из шапки (топик, блог, профиль, письма, настройки) переносятся в контентную часть. (см.скриншоты к версии 1.0.4). В профиле обложку можно увеличить.
  6. HTML баннер под шапкой на главной странице. В него можно выводить — html, новый топик, новый топик из блога, обсуждаемы или лучший топик

Меню в шапке


  1. Фиксится в начале при сролле, когда листаем вниз, его не видно. Таким образом не моячит перед глазами.
  2. В конфиге есть возможность выводить «быстрые» ссылки возле гамбургера. Например «О сайте», еще что-то.
  3. Если активированы «быстрые» ссылки, и их добавлено много, то меню уменьшается частично, ссылки которые не влазили, переносятся в выпадающий список «Еще».

Меню в сайдбаре


  1. Разделено на табы
  2. В конфиге можно выводить заголовки блоков

Меню LS под шапкой

  1. Отключается в конфиге

Грид на главной

  1. Имеет хаотичную структуру из разных типов блоков
  2. Ajax подгрузка топиков с рандомным перестроением грида (разные блоки). Всего 4 типа сетки.
  3. Встроенные рекламные блоки в ленту
  4. Сайдбар в начале ленты

Спасибо за логику для Ajax подгрузчика хочу сказать — eXtravert. Благодаря нему сэкономлено много времени.

Доп. блоки


  1. Новое из личных блогов
  2. Категории (коллективные блоги без табов)
  3. Ссылки в меню «Сайдбар»
  4. Топики в профиле пользователя на главной whois
  5. Похожие топики. Переделан плагин ls-plugin_simila и внедрен в плагин шаблона
  6. Блок прямой эфир, только комментарии.
  7. Топ пользователей. В конфиге можно настроить рандомное отображение. Рекламный блок.
  8. Разные текстовые блоки и доп.блоки, например в профиле или админке.
  9. Рекламный блок в активности

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

Тулбар


  1. Голосование за топик
  2. Вернуться к навигации по топику
  3. Шаринг в соц сети
  4. Нагрузка
  5. Мобильный/Сворачиваемый тулбар

Ленты


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

Топик


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

Настраиваемый топик:

  1. Тип топика «Лонгрид» или «Стандартный»
  2. Скрыть автора
  3. Показать навигацию по топику. Формируется автоматически на основе заголовков h3. Тег добавлен на панель. Вернуться обратно к навигации можно через тулбар.
  4. Теперь есть Абзацы P. Благодаря чему можно делать нормальную типографику/оформление. Тег добавлен на панель. Так же есть возможно делать автозамену br на p.
  5. Первый абзац p, имеет отличное от всех остальных оформление.
  6. Превью топика в шапке. Выбор на весь экран или нет.
  7. Показать сайдбар в лонгриде или нет. В дефолтном топике сайдбар показывается по умолчанию, стандартный от LS.
  8. Фотосет слайдером
  9. Настройка изображений в топике «Большое на весь экран» или «Маленькое».
  10. Тег code, обрамляется в блок на весь экран, тогда как сам code остается по центру. Неплохо смотрится на IT-шных статьях.
  11. Источник/Пруф топика
  12. Убрать теги в топике

Изменено много страниц. Шаблон как впрочем и всегда, писался с нуля.

Сообщения


  1. HTML5 Notifications. Включается в конфиге.

Профиль


  1. Теперь вместо фото, у каждого пользователя есть «Обложка профиля». Как в этих самых соц.сетях.
  2. В целом профиль весь другой.

Изменений и новинок много. Всего не упомнишь к сожалению.

Коллективные блоги

  1. Переименованы в категории
  2. Шапка с обложкой категории

Конфиг

/* Шапка
===============================================*/

// Показать логотип по центру
$config['view']['logo']['center'] = true;

// Показать дефолтное меню LS на главной
$config['view']['menu']['ls'] = true;

// Показать меню в шапке
$config['view']['menu']['header'] = false;

// Показать параллакс в шапке
$config['view']['header']['parallax'] = false;

// Показать маленьку шапку без возможности выбора размера пользователем
$config['view']['header']['small'] = false;

// Показать маленьку шапку c возможности выбора размера пользователем. view.header.small должен быть выключен
$config['view']['header']['small_use'] = false;

// Показать простую шапку (маленькая)
// Show simple header (small)
$config['view']['header']['simple'] = false;

/* Сайдбар навигация
===============================================*/
// Показать заголовки блоков в меню/сайдбаре
$config['view']['sidebar']['navigation']['title'] = false;

/* Talk | Сообщения
===============================================*/
// Показать HTML5 уведомление о новых письмах. Внимание! Увеличится количество HTTP запросов к веб серверу https://www.w3.org/TR/notifications.
$config['view']['talk']['notification'] = false;


/*Топик
===============================================*/
// Удалять переносы строк br
$config['view']['topic']['tag']['br'] = true; 

// Показать ленивую загрузку изображений (lazyload)
$config['view']['topic']['img']['lazyload'] = true; 

/* ===============================================
*  Блоки
*  =============================================== */

/* Блоки в сайдбаре, таб 1
===============================================*/
// Блок категории и блок страницы
$config['view']['sidebar']['navigation']['category']['all'] = true; // Показать сслыку на все категории
$config['view']['sidebar']['navigation']['category']['row'] = 5; // Сколько категорий показывать

/* Main page | Главная
===============================================*/
// Персональные блоги
$config['view']['block']['personal']['row'] = 6; // Сколько топиков показывать
$config['view']['block']['personal']['type'] = 'good'; // Фильтр [good, bad, new, newall, top] 
$config['view']['block']['personal']['period'] = NULL; // Фильтр период [exemple 70*24*60*60 or NULL] 
$config['view']['block']['personal']['sidebar'] = true; // Показать прямой эфир 

// Users
// Пользователи
$config['view']['block']['users']['row'] = 9; // Сколько пользователей показывать
$config['view']['block']['users']['rand'] = true; // Показать рандомом (Внимание, должно быть не меньше 3 страниц с пользователями)

/* Профиль
===============================================*/

// Information
$config['view']['block']['profile']['topic']['row'] = 8; // Сколько топиков показывать

/**
 * Блок похожие материалы
 */
$config['view']['block']['similar_topics'] = true; // Показывать блок с похожими топиками на странице топика
$config['view']['block']['similar_topics_max_topics_count'] = 5; // Максимальное количество топиков, которое выводится
$config['view']['block']['similar_topics_topics_order_by'] = 'rating'; // По какому параметру сортировать записи. Возможные значения: rating, date
$config['view']['block']['similar_topics_topics_order_by_direction'] = 1; // Как сортировать топики в выдаче. 0 - по возрастанию, 1 - по убыванию


/* Дефолтный конфиг
===============================================*/

// Количество топиков на главной
$config['module']['topic']['index']['per_page']   = 39;          // Число топиков на одну страницу

// Количество топиков на страницу
$config['module']['topic']['per_page']   = 16;          // Число топиков на одну страницу

// Аватары
$config['module']['user']['avatar_size'] = array(250,100,64,48,24,0); // Список размеров аватаров у пользователя. 0 - исходный размер

// сколько записей выводить в блоке "Прямой эфир"
$config['block']['stream']['row'] = 10;

// ширина квадрата фотографии в профиле, px
$config['module']['user']['profile_photo_width'] = 2000;


Разработчикам


  1. Сделан полноценный скин к Kube CSS Framework версии 3.
  2. JS плагины Kube отключены. Включить можно в конфиге плагина шаблона
  3. Иконочные шрифты fortawesome и ionicons
  4. Less

Языки


  1. Русский
  2. Английский

Демо


Сайт | bonono.makenskiy.com

Логин и пароль:

— 123 | 123123
— TaylahShoebr | TaylahShoebrTaylahShoebr
— JeniferAkins | JeniferAkinsJeniferAkins

Документация


Только на русском | bononodoc

Скриншоты по больше


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

Главная | Пример топика 1 | Пример топика 2 | Создание топика и настройка | Люди | Профиль | Категория | Личные блоги (ОСТОРОЖНО ТРАФИК)

Скачать

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

avatar
Один Виктор, походу сейчас только и делает интересные и оригинальные шаблоны на LS :).
В любом случае спасибо за проделанную работу!
Возможно, поставлю на новый проект, немного адаптирую стили функционал под себя. До этого брал упомянутый здесь «Сhaos to Block», понимал что стили буду однозначно править, не законченный он какой то, да и не нравится мне такой стиль, брал только за саму идею, функционал. Но в итоге утомило капаться в чужом коде, слишком много правок, сделал сам на базе дефолтного, а этот так и валяется без дела.

«Журнал — Bonono», конечно, более завершенный и качественный, ну и ценник соответственно выше. Буду тестировать демо, искать не доработки.

Сразу отмечу, что шаблон, сайт грузиться тяжело, это не есть хорошо, много графики, превьюшек. Наверное лучше их пускать через lazyload или что то подобное. Шрифт тоже не нравиться, font-weight: 700 смотрится жутковато. Лучше поставить что то типо 'Open Sans' и bold сделать «600», более читабельно. "$oTopic->getText()|truncate" под превьюшками вообще ни о чем, если заголовок длинный, одно, два слова, допустим «Поддерживать свою» что это дает пользователю, информация ни о чем, чисто заполнить див по вертикали.
avatar
Спасибо за отзыв!

Сhaos to Block

Был первой ласточкой в этом стиле, пробным пером. Он сделан на коленке изначально был за неделю всего, потом уже дорабатывался всвязи с его некой популярностью, в итоге получилось что-то, даже сам на нем сделал себе сайт «Just for Fun».

Буду тестировать демо, искать не доработки.

Было бы замечательно. У самого глаз уже замылен.

Сразу отмечу, что шаблон, сайт грузиться тяжело

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

если заголовок длинный

Выбора не много. Путем проб, был под такую сетку выбран именно этот вариант. Иначе блоки будут или пустыми, или кривыми.

Warning: include() [function.include]: Unable to allocate memory for pool. in /home/m/makenskiy/bonono.makenskiy.com/public_html/engine/lib/external/Smarty/libs/sysplugins/smarty_internal_templatebase.php on line 161


Видел. Это может быть хаотично на любой странице. Какие-то ограничение на memcache у хостера, у меня сейчас не свой сервер. Не баг шаблона, но спасибо!
avatar
А по шрифтам, что думаете, цвет можно сделать так же не #000, а по светлее, в текущем сочетание «режет» глаз. Не знаю, может это мой личный взгляд и кому то норм.
avatar
Думаю по шрифту и его цвету, это личный взгляд. В любом случае правится под вкус за 10секунд. Кстати, если с less знакомы, еще быстрее, там общии переменные для заголовков.



Если большинству #000 будет резать взгляд. Поменяю, не вопрос на посветлей.
avatar
Выбора не много. Путем проб, был под такую сетку выбран именно этот вариант. Иначе блоки будут или пустыми, или кривыми.

Может как то вот так fishki.net/2018401-ten.html, в самом низу блок «Похожие новости», просто заголовок, ну и да пустой отступ ничего страшного, нормально смотрится, как по мне.

А почему вы не рассматриваете «Ленивую загрузку» на превью, хоть как то ускорить получение страницы а картинки уже по прокручиванию. Страница очень большая, зачем всю графику сразу отдавать.
avatar
Думал над таким подходом (кстати точу фишки регулярно xD), но не понравились пустые места. Когда на одном топике пусто, терпимо, смотрится, а когда так часто, то не смотрися на общем фоне. Оптять же, чтобы блоки не двигались, заголовки нужно обрезать за блок.

Ленивую загрузку

Пока не думал над этим вообще, т.к. в практике не применяю, и самому не нравится эта штука, создается ощущение не приятное «Как бы грузит». Поэксперементирую, скорее всего добавлю настройку, фишка не плохая, за идею спасибо.
комментарий был удален
avatar
http://bonono.makenskiy.com/personal_blog/
Warning: include() [function.include]: Unable to allocate memory for pool. in /home/m/makenskiy/bonono.makenskiy.com/public_html/engine/lib/external/Smarty/libs/sysplugins/smarty_internal_templatebase.php on line 161

Warning: include() [function.include]: Unable to allocate memory for pool. in /home/m/makenskiy/bonono.makenskiy.com/public_html/engine/lib/external/Smarty/libs/sysplugins/smarty_internal_templatebase.php on line 161
avatar
Добавил:

— Добавление страницы с поиском по тегам
— Оптимизированны превью токиков в ленте
— Добавлены разные варианты/цвета для заглушек, когда нет превьюшки
— Кнопки «Аякс подкрузки» в активности и фид, преведены к общему стилю
— Добавлена ленивая загрузка изображений в топике (lazyload)

P.S. На модерацию пока не отсылал. Есть еще пару идей по шаблону.
avatar
Отправил на модерацию. Добавил к списку перевод на английский.
avatar
Отличная работа!
avatar
Спасибо!
avatar
Очень и очень крутой шаблон, как раз то, что нужно нам!
avatar
Спасибо, старался. Кстати вы поспособствовали появлению такой сетки в жизнь, идеей, как то обсуждали на LS, но с неправильными подходами к реализации.
avatar
Главное что бы контент был удобен для чтения, в этой сетке все очень удобно. Шаблон мы купим сегодня и реализуем ан своем проекте. Спасибо Вам, за крайне качественную работу!
avatar
Не за что!
avatar
Хороший шаблон.
Удивительно, что CMS не обновляется уже 3 года, а сообщество еще что-то делает.

Какие сейчас есть аналоги Livestreet?
avatar
Спасибо. Аналогов живых не встречал.
avatar
Очень крутой шаблон, такого как раз и не хватает в сообществе. Особенно интересно посмотреть на HTML5 Notifications, как они работают и еще вопрос, про блоки с рекламой ADV, что-то в описании не нашел информации какие плагины используются.
avatar
Очень крутой шаблон

Спасибо. Надеюсь людям действительно пригодится. Сейчас в работе еще документация, сделал основу, потихоньку забиваю информацией. Значительно упростит жизнь при доработках.
avatar
HTML5 Notification

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



про блоки с рекламой ADV

Никаких плагинов. Все сделано на уровне шаблона. Блоки для баннеров лежат в отдельном каталоге «banners».
avatar
Выложите побольше скринов какие виды шапки существуют у шаблона. Смотрел шаблон со смартфоне (note 4), типографика, на мой взгляд, проигрывает вашему прошлому шаблону, он читабельнее на смартфоне и как то дружелюбнее к читателю. У Bonono огромные межстрочные интервалы, блоки с цитатами циклопических размеров, что то надо делать с типографикой мод мобильные устройства, а в целом шаблон отличный, покупал ваш первый, пожалуй, куплю и этот шаблон. Не планируете адаптацию плагинов DAO под него?
avatar
Спасибо!

Выложите побольше скринов

Варианты шапки представлены на демо, кроме одного, есть в описании, скрины:

1) Большой, на весь экран, с выбором размера для пользователя. тыц.
2) Средний, не на весь экран, с выбором размера для пользователя. тыц.
3) Средний, не на весь экран, без выбора размера для пользователя (настройка в конфиге). тыц.
4) Маленький, не на весь экран, используется на всех незначительных подстраница, например добавление топика, админка, страницы каких то плагинов, поиска и т.д. тыц.

типографика

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

Не планируете адаптацию плагинов DAO под него?

Адаптации любые не планирую, слишком затратно, если самому только не понадобится что-то. Об этом в лицензии написано. Делаю в платном порядке.
avatar
Отправлена на модерацию новая версия.

1.0.3

— Добавлена документация. Пока по шаблону для пользователя, и css/less/html для разработчика. Плагин bononodoc. Для работы шаблона, активировать его не обязательно. Чтение документации доступно только админу (на демо всем).
— Мелкие правки стилей в css фреймворке
— Изменения в функции Html5 Notification. Переделана ajax логика + если эта функция включена, то в меню динамически добавляется анимация, и иконка нового сообщения на вкладке в «Меню сайдбар».
— Добавлен блок «Пригласить» для приватных категорий/коллективных блогов.
— Мелкие фиксы адаптива
комментарий был удален
avatar
На модерацию отправлена новая версия.

— Исправлена страница /comments/
— Исправлен стиль кнопки «Вступить/Выйти» в блоке «Информация о категории»
— Исправлен отступ в шапке под Mozilla Firefox
— Исправлено положение кнопки «Показать еще» при значении $config['view']['block']['personal']['sidebar'] = false;
— Добавлены стили для поиска АБС. В самом шаблоне он не подключен, однако используется в некоторых плагинах.
— Правки стилей в css фреймворке
— Добавлен актуальный конфиг для плагина mainpreview
— Исправлен баг на странице с подписчиками блога
— Добавлена ссылка «Написать» на табе «Профиль» в сайдбаре (аля-мобильное меню)
— Добавлена простая (маленькая) шапка, если активирована, то все элементы управления из шапки (топик, блог, профиль, письма, настройки) переносятся в контентную часть. (см.скриншоты). В профиле обложку можно увеличить.









avatar
На модерацию отправлена новая версия.

— Улучшение адаптива под мобильной версией.

— Добавлен информер на топиках в ленте «Время публикации», «Рейтинг», «Количество комментариев».



— Добавлен HTML баннер под шапку на главной странице. Представления настраиваются в конфиге, секция $config['view']['header']['*']. В данный момент есть возможность:

* $config['view']['header']['banner'] = *; — показывать или нет баннер
* $config['view']['header']['banner_cookie'] = *; Не показывать после закрытия баннера (запомнить)
* $config['view']['header']['banner_type'] = '*'; Вывод просто HTML блока, или с новым топиком, blog — топик из блога по ID, discussed — обсуждаемый топик, если его нет, то показывается из топа.
* $config['view']['header']['banner_blog_id'] = *; // ID блога, если указан тип топика «blog»
* Если при настройках с выводом топика по типу, не оказалось топика (удален, не существует), выводится HTML верcия.

Редактируется баннер в шаблоне плагина /plugins/bononotpl/templates/skin/default/banners/Action/ActionIndex/inject.banner.wellcome.tpl. Выводится шаблонным хуком content_begin.



— Меню в шапке. Сделан скрипт, который уменьшает меню, если много ссылок, помещая их в выпадающее меню.





— Кнопка «написать» в сайдбаре на табе «Профиль», теперь если пользователь не залогинен, при клике показывается модалка с входом.

— Админка, страница с плагинами немного доработана, добавлен эффект при наведении на строку и отступы у кнопок/чекбоксов.

— Добавлена модалка для удаления блога

— В документацию добавлен раздел «Пользователю» -> «Плагины»

— Блок с авторами (список пользователей). К краткому описанию «О пользователе», добавлена обрезка тегов и текста до 120 символов.

— В тело топика, добавлена дата публикации, возле источника. Теперь в списоке ul. Добавлен хук {hook run='topic_information'} для вывода туда каких то штук из ваших плагинов.



— Добавлена функция автоматической расстановки тегов [P] за места [BR] в топиках. По умолчанию выключено, настройка в конфиге $config['view']['topic']['tag']['auto_br'] = false;
avatar
Кстати, забыл упомянуть, блоки прямого эфира на главной, стали аяксовыми. Полезно в том случае, если листаем топики, например уже подгрузили 10-15 страниц, всегда можно посмотреть последнии комментарии обновив список, не обновляя страницу, или не переходя в активность.
avatar
Ленты

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

Не понял как можно менять ленты? И можно ли менять гриды на главной, если да то как?
avatar
Через конфиг делать не стал, т.к. страниц с лентами много в LS, может быть путаница. Меняется в файлах шаблона. Например, нужно сменить ленту в персональных блогах, открываем его экшен:

/templates/skin/bonono/actions/ActionPersonalBlog/index.tpl


В самом верху есть строка:

{assign var="topicTm5" value=true}


Так вот меняем var на topicTm1, topicTm2, topicTm3, topicTm4, topicTm5. Таким образом у разных лент топиков, может быть разные представления.

На главной пока нельзя менять ленту, можно это сделать только кодом вручную, при этом не забыть про аякс подгрузку.
avatar
СПласидо, с топиками разобрался. А с грибами какие файлы редактируются? Или там не так все просто?
avatar
;) С гридами какие файлы редактировать?
avatar
С главной не все просто, она завязана на js,css шаблона и ajax подгрузчике, на пальцах не объяснить.

Задача по добавлению и изменению гридов на главной уже висит в трекере, но сделана будет не скоро, сейчас времени нет свободного к сожалению.

Все шаблонные темы лежат в:

templates/skin/bonono/topic-themes/*
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.