Добавление новых блоков.

Форум /

Здравствуйте. Начал знакомство с БЭМ-инструментами, до этого использовал только методологию наименования классов. На данный момент хочу использовать бэм-инструменты для верстки однотипных шаблонов. Но у меня возникли проблемы с добавлением новых своих сущностей (а не блоков яндекса из bem-core и bem-components) в common.blocks, внятной документации не нашел. Использую enb-bem + bwmsjon + bemhtml. Также хотелось бы узнать, как отключить минификацию файлов html при сборке. Сейчас весь html склеивается в одну строку, а хотелось бы получать файл, пригодный для дальнейшей интеграции на cms.

9 years ago

Guria

HTML не минифицируется, он сразу такой собирается из bemjson. Для ваших целей его надо прогонять через html beutifier. А на счёт вашей проблемой с блоками не ясно в чём именно у вас загвоздка. По возможности опишите что вы делали подробнее.

9 years ago

Mr-Robby

Мне не совсем понятна логика добавления своих сущностей. Например, я создал папку test-block в common.blocks, в нее положил test-block.bemjson.js, в котором указано: ({ block: 'test-block', content: [ 'test-block test' ] });

В desktop.bundles в index.bemjson.js я указываю:

({ block: 'page', title: 'Hello, World!', content: [ block: 'test-block' ] });

При этом, содержимое блока test-block не выводится. Возможно я что-то не так понял.

9 years ago

Guria

bemjson не предназначен для описания блоков. Блоки описываются шаблонизаторами bemhtml или bh. Начните с изучения соответствующего раздела:

9 years ago

tavriaforever

У тебя есть папка desktop.bundles - в ней создаешь папку для страницы, например desktop.bundles/about и внутри папки создаешь файл about.bemjson.js - в этом файле описываешь структуру БЭМ дерева в формате bemjson, например https://github.com/tavriaforever/project-stub/blob/bem-core/desktop.bundles/index/index.bemjson.js, которая на выходе превратится в html.
Если тебе нужно изменить тег у блока или элемента лучше это сделать создав для блока bemhtml/bh шаблон. Создаешь папку в desktop.blocks/header внутри создаешь файл header.bemhtml и пишешь туда например:

block('header')( tag()('header') );

На выходе получаешь в html тег header

Если тебе надо нужно собирать страницы с подобными блоками, но разным контентом ты можешь задекларировать блок в bemjson страницы

{
    block: 'header',
    logo: 'super company tm',
    slogan: 'We are the best, give us your money'
}

и все, а всю внутрянку блока спрятать в реиспользуемый bemhtml шаблон, например

block('header')( 
    tag()('header'),
    content()(function() {
        return [
          {
            elem: 'logo',
            content: this.ctx.logo // поля, которые ты указал в bemjson блока, доступны в шаблоне в this.ctx 
          },
          {
            elem: 'slogan',
            content: this.ctx.slogan // поля, которые ты указал в bemjson
          }
        ];   
    }) 
);

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

Чтобы оставлять комментарии, необходимо авторизоваться.