Как получать данные из разных JSON для разных страниц и языковых версий (Nunjucks)?

Question

[HelpSophie]

Мучаю Nunjucks.
Есть задача сверстать страниц 20-30 и на двух языках (ru, eng).

Хочу получать данные из json с такой структурой:

source
---data
--- ---pages
--- --- ---ru
--- --- --- ---index.json
--- --- --- ---catalog.json
--- --- --- ---contact.json (ит.д.)
--- --- ---en
--- --- --- ---index.json
--- --- --- ---catalog.json
--- --- --- ---contact.json (ит.д.)
--- --- global-ru.json
--- --- global-en.json

Пока у меня получается получать данные только из одного файла json

Появилось несколько вопросов:
1. Как сделать так, чтобы нужная страница узнавала о своем json?

2. Пока имею представление как это решить в 2 отдельных gulp-таска. Их как-то можно хитро объединить в одну задачу? И имеет ли это смысл

Вот мой таск:

my gulp task

const gulp = require("gulp");
const data = require("gulp-data");
const nunjucksRender = require("gulp-nunjucks-render");

// HTML (Nunjacks)
const njkHTML = () => {
  let versionNumber = Number(new Date().toISOString().replace(/\D+/g, ""));

  return gulp.src("source/*.njk")
    .pipe(plumber())

   .pipe(data(function () {
      return [require("./source/data/global-ru.json"),
       require("./source/data/pages/ru/index.json")];
    }))
/*  с таким return вообще не получает данные  */
/*  работает только когда 1 файл  */

    .pipe(nunjucksRender({

      manageEnv: (env) => {
        env.opts.autoescape = false;
        env.addGlobal(`template`, `source/layouts/default.njk`);
        env.addGlobal(`versionNumber`, versionNumber);
      }
    }))
    .pipe(gulp.dest("build"));
};
exports.njkHTML = njkHTML;

Если нужно что-то еще уточнить, скажите.

Answer 1

[Сергей delphinpro]

Вот здесь https://www.npmjs.com/package/gulp-data
Первый же пример "Get data via JSON file, keyed on filename."

Comments

[HelpSophie]

Ага, а как потом каждая страница будет понимать какой json её?

[Сергей delphinpro]

HelpSophie,

.pipe(data(function(file) {

Здесь file — это страница, которая сейчас обрабатывается. На основе этого объекта пишите логику загрузки нужного json файла.

[Сергей delphinpro]

Если у вас помимо отдельных файлов, есть еще общий дата-файл для всех страниц, то его следует прочитать заранее и мерджить с данными для конкретной страницы.

[Сергей delphinpro]

return JSON.parse(fs.readFileSync('./examples/' + path.basename(file.path) + '.json'));

path.basename(file.path) - имя обрабатываемого файла

Значит вы можете написать

return JSON.parse(fs.readFileSync('./data/pages/' + path.basename(file.path) + '.json'));

Это примерно. Логику по языкам сами смотрите. Тоже нужно как-то выдергивать из имени файла или из пути файла.

[Сергей delphinpro]

Мерджить с общим файлом примерно так:

const commonData = JSON.parse(fs.readFileSync('./path/to/common.json'));
const pageData = JSON.parse(fs.readFileSync('./data/pages/' + path.basename(file.path) + '.json'));
return {
  ...commonData,
  ...pageData,
}

[HelpSophie]

Сергей delphinpro, Супер, спасибо! С виду вроде понятно, пошла разбираться.

[HelpSophie]

Сергей delphinpro,
Написала так

gulp

// HTML (Nunjacks)

let getJsonData = function (page) {

  const commonData = JSON.parse(fs.readFileSync("./source/data/global-ru.json"));

  let filename = path.basename(page.path);
  let filenameWithoutExt = filename.slice(0, filename.lastIndexOf(`.`));
  let fileJSON = "./source/data/pages/ru/" + filenameWithoutExt + '.json';
  let pageData;
  //Проверим существует ли такой файл (могут быть страницы без json или страницы только на одном языке)
  fs.stat(fileJSON, function (err, stats) {
    if (err) {
      console.log("Файл не найден: " + fileJSON);
    } else {
      pageData = JSON.parse(fs.readFileSync(fileJSON));
    }
  });

  return {
    ...commonData,
    ...pageData,
  }

};


const njkHTML = () => {

  let versionNumber = Number(new Date().toISOString().replace(/\D+/g, ""));

  return gulp.src("source/*.njk")
    .pipe(plumber())
    .pipe(data(getJsonData))
    //.pipe(swig())
    .pipe(nunjucksRender({

      manageEnv: (env) => {
        env.opts.autoescape = false;
        env.addGlobal(`template`, `source/layouts/default.njk`);
        env.addGlobal(`versionNumber`, versionNumber);
      }
    }))
    .pipe(gulp.dest("build"));
};
exports.njkHTML = njkHTML;

index (страница)

{% extends template %}
  <h1>{{ h1 | safe}}</h1>
  <h2 style="background: #eee">0{{ page.testtext | safe}}</h2>
  <h2 style="background: #eee">1{{ testtext | safe}}</h2>

h1 написан в global-ru.json и выводится.
А testtext написан в json'е страницы и не выводится ни первым ни вторым способом.

Для реализации второго способа в файле шаблона дописано {% set page = page | getJsonData %}
и тогда еще и получаю ошибку сборки
Error: filter not found: getJsonData в source\index.njk (страница)

И не понимаю почему он на нее ругается, если эта функция есть и даже получает данные из общего файла :(

[Сергей delphinpro]

HelpSophie, Метод fs.stat - асинхронный.
Используйте fs.statSync, так же, как используете readFileSync вместо readFile.
А лучше existsSync

//Проверим существует ли такой файл (могут быть страницы без json или страницы только на одном языке)
if (fs.existsSync(fileJSON))
  pageData = JSON.parse(fs.readFileSync(fileJSON));
}

[HelpSophie]

Сергей delphinpro, ух ты, работает!

Когда-нибудь я полюблю js.

Спасибо большое!