Как получить данные из json файла в pug шаблон?

Question

[aslanov_shm]

Есть структура файлов

|--blocks
   |--block.pug
   |--block.json

blocks.pug

ul.blocks
  each link, title in blocksData
    li.blocks__item
      a(href="link")= title

blocks.json

{
  "blocksData": {
    "Ссылка 1" : "/link1",
    "Ссылка 2" : "/link2",
    "Ссылка 3" : "/link3"
  }
}

Как мне без помощи Gulp получить данные из json в pug шаблон? Инклюдом, или как?

Answer 1

[monochromer]

json сначала нужно преобразовать в данные вне шаблонизатора

var pug = require('pug');
var fn = pug.compileFile('path to pug file', options);
var locals = require('./block.json');
var html = fn(locals);

Шаблонизатор не должен реализовывать логику получения данных, его задача - отображать данные.

Comments

[aslanov_shm]

monochromer У меня до этого в таске галпа было написано так:

.pipe(pug({
      locals : {
        blocks: JSON.parse(fs.readFileSync('src/modules/blocks/blocks.json', 'utf8')),
      }
     }))

А затем в pug файле я выводил

ul
  each href, title in blocks.blocksData
    li
      a(href= '' +href)= title

В таком случае все работает. Но если мне нужно создать ещё 50 файлов json, не буду же в locals добавлять ещё 50 строк с указанием пути. Можно ли в таком случае как то сократить запись?

[monochromer]

Варианты:
1. Под каждую страницу создать каталог с файлом шаблона и файлом данных. Node-скрипт идет по каталогам, считывает файл данных, считывает файл шаблона, передает данные в шаблон.
2. Создать отдельную директорию data c 50-ю json-файлами и одним js-файлом который считывает их все и объединяет в один объект, который затем и передается в pug-шаблон.

[aslanov_shm]

monochromer, Как я понял первый вариант это то, что вы описали в ответе. Про второй вариант знаю, но мне не очень нравится.

[monochromer]

aslanov_shm, В gulp, логика передачи данных - gulp, верстка - pug. Для упрощения работы можно использовать gulp-data - https://www.npmjs.com/package/gulp-data

[aslanov_shm]

monochromer,
https://stackoverflow.com/questions/37697032/itera...
Скажите пожалуйста это решит мою проблему? Я просто пока не достаточно знаю о node.

[monochromer]

Да

[aslanov_shm]

monochromer, Спасибо. Очень помогли

Answer 2

[leskovoleg]

var pug = require('pug');
var fn = pug.compileFile('path to pug file', options);
var html = fn({'req': require});

=====
//pug file

- var menu = req('./block.json')

ul.blocks
        each link, title in menu.blocksData
               li.blocks__item
                        a(href="link")= title