Генерация множества html gulp + jade?

Question

[Владислав]

Привет. Нужно сделать много однотипных html страниц, с разными названиями/описаниями/ссылками.
Проблема в том, что на внутренних страницах есть некая пагинация (вперед/назад). Проблема в том что сейчас таких страниц 10 штук, они должны быть отсортированы по алфавиту и могут добавляться позже. Если нужно будет добавить такую страницу между уже существующими, то получим проблему, что ссылки на следующюю и предыдущую не совпадают. А по сему нужно это как-то генерировать. Использую Gulp, Jade(Pug) но возможно это как-то сделать с их помощью ну или альтернативные решения? (нужно получить страницы вида: partner_name.html, patner_newname.html ...)
Например создать json со списком этих страниц и параметрами и создать jade шаблон и передавать параметры в этот шаблон и компилировать его. Но что то не пойму как это сделать.

Предвидя вопросы:
- нет, нельзя использовать js шаблонизаторы на клиенте
- нет, нельзя использовать php

Нужна именно генерация страниц (обычный html).

Answer 1

[Андрей Хохлов]

Ставим Node.js, npm, pug
https://www.npmjs.com/package/pug

Читаем документацию: https://pugjs.org/api/reference.html

По примерам из документации пишем скрипт, который возьмёт ваш шаблон и json и нарендерит сколько нужно страничек.

Answer 2

[Владислав]

Может кому поможет, написал пример:

Node.js

var jade = require('jade'),
    fs = require('fs'),
    path = require('path'),
    IterateObject = require("iterate-object");

fs.readFile('template.jade', 'utf8', function (err, data) {
    if (err) throw err;
	var page = JSON.parse(fs.readFileSync('test.json', 'utf8'));

	var fn = jade.compile(data, {
        pretty:   true
	});

var next,prev;
	IterateObject(page, function (value, i, arr) {
		if(arr[i + 1]) {
			next = arr[i + 1].url;
		} else{
			next = '';
		}

		if(arr[i - 1]) {
			prev = arr[i - 1].url;
		} else{
			prev = '';
		}

		arr[i].next = next;
		arr[i].prev = prev;

		var html = fn(arr[i]);
		fs.writeFile("my_"+arr[i].url+".html", html, 'utf8');
	});
});

JSON

[
  {
    "name": "",
    "url": "",
    "text": "<div>bla bla</div>",
    "logo": "",
    "facebook": "",
    "linkedin": "",
    "twitter": "",
    "www": ""
  }]

В Jade доступны все свойства объектов. #{name}, !{text}... а так же #{next}, #{prev}.