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

Paul Osmachko — Wed, 08 Nov 2017 12:08:14 +0000

Для того чтобы верстать повторяющиеся блоки с помощью 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 варианте мы увидим следующее:


    The title 1
    The content 1


    The title 2
    The content 2

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

Сообщение Pug (Jade) — Database, Loop повторяющихся блоков появились сначала на Wiki | PWODEV.

each | Wiki | PWODEV

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