Адаптивный шаблон «Bonono»
Привет!
Наконец закончил работу над большим и интересным шаблоном. Упаковал и залил в каталог. Вот он «Суппер журнал» для всех, теперь это еще проще чем раньше. Так сказать продолжение темы «Сhaos to Block»
Шаблон по сути своей, является уже полноценным сайтом, достаточно установить LS + Bonono + Sitemap и можно спокойно работать над статьями.
(Кликобельно)
Далее пойдет много букв и подробностей, кто не хочет скучное читать, может перейти сразу к обзору демо сайта. Контент на первой странице реальный, специально постарался, чтобы было видно, как это будет в живую выглядеть.
Начало
Продолжаю двигаться в направлении журнально/городской тематики c LiveStreet CMS. Получилось добиться неких успехов. То, что вышло самому нравится, но на этом не все, буду двигаться дальше. В качестве отправной точки, было выбрано направление знаменитых проектов birdinflight, lookatme (его дочек the village и компания), proexpedition и прочих журналов.
Описание
Прежде всего проект ориентирован на:
- Качественный контент
- Автора топика
- Удобство чтения пользователем
- Удобство использования
- Некую журнальность с нестандартным видом статей
Разных штук много, очень много. Все описать в топике не получится точно. И это замечательно.
Шапка
- Настраиваемый размер шапки пользователем
- Настраиваемый размер шапки администратором по умолчанию
- Разные варианты шапки. Меняется текст, фон, размер, кнопки управления.
- Настройка «Включить парралакс» или «Оставить фиксировано».
- Простая (маленькая) шапка. Если активирована, то все элементы управления из шапки (топик, блог, профиль, письма, настройки) переносятся в контентную часть. (см.скриншоты к версии 1.0.4). В профиле обложку можно увеличить.
- HTML баннер под шапкой на главной странице. В него можно выводить — html, новый топик, новый топик из блога, обсуждаемы или лучший топик
Меню в шапке
- Фиксится в начале при сролле, когда листаем вниз, его не видно. Таким образом не моячит перед глазами.
- В конфиге есть возможность выводить «быстрые» ссылки возле гамбургера. Например «О сайте», еще что-то.
- Если активированы «быстрые» ссылки, и их добавлено много, то меню уменьшается частично, ссылки которые не влазили, переносятся в выпадающий список «Еще».
Меню в сайдбаре
- Разделено на табы
- В конфиге можно выводить заголовки блоков
Меню LS под шапкой
- Отключается в конфиге
Грид на главной
- Имеет хаотичную структуру из разных типов блоков
- Ajax подгрузка топиков с рандомным перестроением грида (разные блоки). Всего 4 типа сетки.
- Встроенные рекламные блоки в ленту
- Сайдбар в начале ленты
Спасибо за логику для Ajax подгрузчика хочу сказать — eXtravert. Благодаря нему сэкономлено много времени.
Доп. блоки
- Новое из личных блогов
- Категории (коллективные блоги без табов)
- Ссылки в меню «Сайдбар»
- Топики в профиле пользователя на главной whois
- Похожие топики. Переделан плагин ls-plugin_simila и внедрен в плагин шаблона
- Блок прямой эфир, только комментарии.
- Топ пользователей. В конфиге можно настроить рандомное отображение. Рекламный блок.
- Разные текстовые блоки и доп.блоки, например в профиле или админке.
- Рекламный блок в активности
Спасибо за логику для похожих топиков хочу сказать — stfalcon. Благодаря нему сэкономлено много времени и вы можете пользоваться этой нужной функцией без дополнительных плясок с бубном.
Тулбар
- Голосование за топик
- Вернуться к навигации по топику
- Шаринг в соц сети
- Нагрузка
- Мобильный/Сворачиваемый тулбар
Ленты
Ленты топиков на внутренних страницах, можно делать совершенно разные. Например в личных блогах и коллективных, у каждого своя. Сейчас имеется 5 разных лент на выбор.
Топик
Пожалуй самое интересное на ряду с гридом на главной и шапкой. Каждый топик можно оформить по своему, комбинируя настройки. В итоге получим разное оформление.
Настраиваемый топик:
- Тип топика «Лонгрид» или «Стандартный»
- Скрыть автора
- Показать навигацию по топику. Формируется автоматически на основе заголовков h3. Тег добавлен на панель. Вернуться обратно к навигации можно через тулбар.
- Теперь есть Абзацы P. Благодаря чему можно делать нормальную типографику/оформление. Тег добавлен на панель. Так же есть возможно делать автозамену br на p.
- Первый абзац p, имеет отличное от всех остальных оформление.
- Превью топика в шапке. Выбор на весь экран или нет.
- Показать сайдбар в лонгриде или нет. В дефолтном топике сайдбар показывается по умолчанию, стандартный от LS.
- Фотосет слайдером
- Настройка изображений в топике «Большое на весь экран» или «Маленькое».
- Тег code, обрамляется в блок на весь экран, тогда как сам code остается по центру. Неплохо смотрится на IT-шных статьях.
- Источник/Пруф топика
- Убрать теги в топике
Изменено много страниц. Шаблон как впрочем и всегда, писался с нуля.
Сообщения
- HTML5 Notifications. Включается в конфиге.
Профиль
- Теперь вместо фото, у каждого пользователя есть «Обложка профиля». Как в этих самых соц.сетях.
- В целом профиль весь другой.
Изменений и новинок много. Всего не упомнишь к сожалению.
Коллективные блоги
- Переименованы в категории
- Шапка с обложкой категории
Конфиг
/* Шапка ===============================================*/ // Показать логотип по центру $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;
Разработчикам
- Сделан полноценный скин к Kube CSS Framework версии 3.
- JS плагины Kube отключены. Включить можно в конфиге плагина шаблона
- Иконочные шрифты fortawesome и ionicons
- Less
Языки
- Русский
- Английский
Демо
Сайт | bonono.makenskiy.com
Логин и пароль:
— 123 | 123123
— TaylahShoebr | TaylahShoebrTaylahShoebr
— JeniferAkins | JeniferAkinsJeniferAkins
Документация
Только на русском | bononodoc
Скриншоты по больше
На LS и в каталог нельзя загружать большие скриншоты, поэтому ссылкой. Не все страницы и вариации конечно, частично только.
Главная | Пример топика 1 | Пример топика 2 | Создание топика и настройка | Люди | Профиль | Категория | Личные блоги (ОСТОРОЖНО ТРАФИК)
33 комментария
В любом случае спасибо за проделанную работу!
Возможно, поставлю на новый проект, немного адаптирую стили функционал под себя. До этого брал упомянутый здесь «Сhaos to Block», понимал что стили буду однозначно править, не законченный он какой то, да и не нравится мне такой стиль, брал только за саму идею, функционал. Но в итоге утомило капаться в чужом коде, слишком много правок, сделал сам на базе дефолтного, а этот так и валяется без дела.
«Журнал — Bonono», конечно, более завершенный и качественный, ну и ценник соответственно выше. Буду тестировать демо, искать не доработки.
Сразу отмечу, что шаблон, сайт грузиться тяжело, это не есть хорошо, много графики, превьюшек. Наверное лучше их пускать через lazyload или что то подобное. Шрифт тоже не нравиться, font-weight: 700 смотрится жутковато. Лучше поставить что то типо 'Open Sans' и bold сделать «600», более читабельно. "$oTopic->getText()|truncate" под превьюшками вообще ни о чем, если заголовок длинный, одно, два слова, допустим «Поддерживать свою» что это дает пользователю, информация ни о чем, чисто заполнить див по вертикали.
Был первой ласточкой в этом стиле, пробным пером. Он сделан на коленке изначально был за неделю всего, потом уже дорабатывался всвязи с его некой популярностью, в итоге получилось что-то, даже сам на нем сделал себе сайт «Just for Fun».
Было бы замечательно. У самого глаз уже замылен.
Тут ничего не сделать, или красоты, или скорость. Кроме как вариант с превьюшками поколдовать (подумаю, не учел, с кеша картинки быстро отдаются), т.к. пользовательской графики много в самих топиках (если она добавлена конечно, а она будет добавлена, нужно оптимизировать изображения на уровне самого сервера или в момент загрузки, это выше уровня шаблона).
Выбора не много. Путем проб, был под такую сетку выбран именно этот вариант. Иначе блоки будут или пустыми, или кривыми.
Видел. Это может быть хаотично на любой странице. Какие-то ограничение на memcache у хостера, у меня сейчас не свой сервер. Не баг шаблона, но спасибо!
Если большинству #000 будет резать взгляд. Поменяю, не вопрос на посветлей.
Может как то вот так fishki.net/2018401-ten.html, в самом низу блок «Похожие новости», просто заголовок, ну и да пустой отступ ничего страшного, нормально смотрится, как по мне.
А почему вы не рассматриваете «Ленивую загрузку» на превью, хоть как то ускорить получение страницы а картинки уже по прокручиванию. Страница очень большая, зачем всю графику сразу отдавать.
Пока не думал над этим вообще, т.к. в практике не применяю, и самому не нравится эта штука, создается ощущение не приятное «Как бы грузит». Поэксперементирую, скорее всего добавлю настройку, фишка не плохая, за идею спасибо.
— Добавление страницы с поиском по тегам
— Оптимизированны превью токиков в ленте
— Добавлены разные варианты/цвета для заглушек, когда нет превьюшки
— Кнопки «Аякс подкрузки» в активности и фид, преведены к общему стилю
— Добавлена ленивая загрузка изображений в топике (lazyload)
P.S. На модерацию пока не отсылал. Есть еще пару идей по шаблону.
Удивительно, что CMS не обновляется уже 3 года, а сообщество еще что-то делает.
Какие сейчас есть аналоги Livestreet?
Спасибо. Надеюсь людям действительно пригодится. Сейчас в работе еще документация, сделал основу, потихоньку забиваю информацией. Значительно упростит жизнь при доработках.
Если в конфиге включено, то скрипт периодически проверяет наличие новых сообщений. И если они есть, то выдает сообщение в браузер, при этом не обязательно находиться на вкладке сайта, но она должна быть открыта. Вот скрин.
Никаких плагинов. Все сделано на уровне шаблона. Блоки для баннеров лежат в отдельном каталоге «banners».
Варианты шапки представлены на демо, кроме одного, есть в описании, скрины:
1) Большой, на весь экран, с выбором размера для пользователя. тыц.
2) Средний, не на весь экран, с выбором размера для пользователя. тыц.
3) Средний, не на весь экран, без выбора размера для пользователя (настройка в конфиге). тыц.
4) Маленький, не на весь экран, используется на всех незначительных подстраница, например добавление топика, админка, страницы каких то плагинов, поиска и т.д. тыц.
Типографика наоборот тут продума и вымерена, в отличии от прошлого шаблона, где ей внимания как такого не уделялось даже, там все как есть и базы шаблона. Однако соглашусь, на мобилках некоторые моменты не очень в топиках, буду думать, в следующей версии сделаю.
Адаптации любые не планирую, слишком затратно, если самому только не понадобится что-то. Об этом в лицензии написано. Делаю в платном порядке.
1.0.3
— Добавлена документация. Пока по шаблону для пользователя, и css/less/html для разработчика. Плагин bononodoc. Для работы шаблона, активировать его не обязательно. Чтение документации доступно только админу (на демо всем).
— Мелкие правки стилей в css фреймворке
— Изменения в функции Html5 Notification. Переделана ajax логика + если эта функция включена, то в меню динамически добавляется анимация, и иконка нового сообщения на вкладке в «Меню сайдбар».
— Добавлен блок «Пригласить» для приватных категорий/коллективных блогов.
— Мелкие фиксы адаптива
— Исправлена страница /comments/
— Исправлен стиль кнопки «Вступить/Выйти» в блоке «Информация о категории»
— Исправлен отступ в шапке под Mozilla Firefox
— Исправлено положение кнопки «Показать еще» при значении $config['view']['block']['personal']['sidebar'] = false;
— Добавлены стили для поиска АБС. В самом шаблоне он не подключен, однако используется в некоторых плагинах.
— Правки стилей в css фреймворке
— Добавлен актуальный конфиг для плагина mainpreview
— Исправлен баг на странице с подписчиками блога
— Добавлена ссылка «Написать» на табе «Профиль» в сайдбаре (аля-мобильное меню)
— Добавлена простая (маленькая) шапка, если активирована, то все элементы управления из шапки (топик, блог, профиль, письма, настройки) переносятся в контентную часть. (см.скриншоты). В профиле обложку можно увеличить.
— Улучшение адаптива под мобильной версией.
— Добавлен информер на топиках в ленте «Время публикации», «Рейтинг», «Количество комментариев».
— Добавлен 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;
Не понял как можно менять ленты? И можно ли менять гриды на главной, если да то как?
В самом верху есть строка:
Так вот меняем var на topicTm1, topicTm2, topicTm3, topicTm4, topicTm5. Таким образом у разных лент топиков, может быть разные представления.
На главной пока нельзя менять ленту, можно это сделать только кодом вручную, при этом не забыть про аякс подгрузку.
Задача по добавлению и изменению гридов на главной уже висит в трекере, но сделана будет не скоро, сейчас времени нет свободного к сожалению.
Все шаблонные темы лежат в: