Pug (Jade) – Database, Loop повторяющихся блоков

Для того чтобы верстать повторяющиеся блоки с помощью Pug, раньше называвшийся Jade, не обязательно постоянно копировать повторяющийся блок, достаточно вывести этот блок в цикле “each val in array”, а данные выводившиеся в этом блоке сохранить в условную базу данных Pug. В таком случае нам не прийдется добавлять наши изменения в верстке к каждому блоку, а всего лишь изменить один раз в цыкле, после чего наши изменения в коде добавятся ко всем блокам сразу. Так как же это сделать?

1. Для начала создадим файлик базы данных. Назовем его db.pug.

2. Поместим в этот файлик небольшой массив данных (Синтаксис такой же как у JSON)

- var db_array = [
        {
            id: '1',
            title: 'The title 1',
            content: 'The content 1'
        },
        {
            id: '2',
            title: 'The title 2',
            content: 'The content 2'
        },
    ]

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

each val in db_array
    .array_item_block(id=val.id)
        .item_title!= val.title
        .item_content!= val.content

4. Теперь в html варианте мы увидим следующее:

<div class="array_item_block" id="1">
    <div class="item_title">The title 1</div>
    <div class="item_content">The content 1</div>
</div>
<div class="array_item_block" id="2">
    <div class="item_title">The title 2</div>
    <div class="item_content">The content 2</div>
</div>

Теперь возьми себя в руки и протестируй все у себя локально, и если что-то пойдет не так – напиши это в комментариях. 🙂