Динамическое название и описание в шаблонном движке Nunjucks

Я пытаюсь понять язык шаблонов Nunjucks.

Для генерации HTML я использую плагин Gulp + gulp-nunjucks-render.

Столкнулся с проблемой: не могу понять, как реализовать генерацию мета-тегов title и description.

Структура файла проекта:

project
 |
 | -> dist > index.html (compiled)
 |           page1.html (compiled)
 |           page2.html (compiled)
 |
 |
 | -> src 
        |-> pages -> index.njk (home page)        
        |            page1.njk (page 1)      
        |            page2.njk (page 2)            
        |
        |-> templates
        |            |-> layout.njk
        |            |
        |            |-> parts -> header.njk
        |                         footer.njk
        |
        |-> styles -> style.css
        |             style.min.css
        |
        |-> data.json

layout.njk

<!-- layout.njk -->

<html lang="en">
  <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" href="styles/style.css">
  </head>
  <body class="page">
      {% block header %}{% endblock %}
      {% block main %}{% endblock %}
      {% block footer %}{% endblock %}
  </body>
</html>

Который я подключаю к каждой странице следующим образом:

{% extends "layout.njk" %}

index.njk

{% extends "layout.njk" %}

{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
    <main class="main">
    <!-- content -->
    </main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}

page1.njk

{% extends "layout.njk" %}

{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
    <main class="main">
    <!-- content page1 -->
    </main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}

page2.njk

{% extends "layout.njk" %}

{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
    <main class="main">
    <!-- content page1 -->
    </main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}

Я не смог найти никаких примеров вывода заголовков в документации, поэтому наиболее интересный способ я видел здесь.

Например, получить заголовок и описание из файла.JSON

data.json

"pages": [
    {
        title: "Hompage"
        description: "This is the home page"
    },
    {
        title: "Page1"
        description: "This is page 1"
    }
    {
        title: "Page2"
        description: "This is page 2"
    }
]

gulpfile.js

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

gulp.task('nunjucks', function() {
  return gulp.src('src/pages/**/*.njk')
  .pipe(data(function() {
    return require('./src/data.json')
  }))
  .pipe(nunjucksRender({
    path: ['src/templates']
    }))
    .pipe(gulp.dest('docs'))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('watch', function(cb) {
    gulp.parallel(
        'nunjucks',
    )(cb);
    gulp.watch('src/**/*.njk', gulp.series('nunjucks'));
});

gulp.task('default', gulp.series('watch'));

Я не знаю, как извлечь данные из JSON. Пожалуйста, посоветуйте решение.

Источник

1 ответ

Я Юрий Федоров, так как ты extends макет, njk на ваших страницах, вы можете установить title и description переменные в верхней части документа, например, так:

{% set title = myTitle %}
{% set description = myDescriptionHere %}

Затем вы делаете это для каждой страницы (index.njk, page1.njk, page2.njk и т. Д.). Или вы можете определить свои переменные в nunjucksRender в gulpfile.js как так:

.pipe(nunjucksRender({
    path: ["yourPath"],
    title: "yourTitle",
    description: "yourDescriptionHere"
}))
Rest of the code...

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

Источник

Если вы надеетесь передать данные из data.json файл

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

Например: data.json

{
    "pages": {
        "home": {
            "title": "Hompage",
            "description": "This is the home page"
        },
        "page1": {
            "title": "Page1",
            "description": "This is page 1"
        },
        "page2": {
            "title": "Page2",
            "description": "This is page 2"
        }
    }
}

Шаг 2: Вы должны установить имя страницы в качестве переменной на странице nunjucks.

Например: index.njk

{% set pageName = 'home' %}
{% extends "layout.njk" %}

{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
    <main class="main">
    <!-- content -->
    </main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}

Шаг 3: Используйте pageName переменная на любой странице nunjucks, макет или частичное, чтобы получить конкретные данные для конкретной страницы.

Например: layout.njk

<html lang="en">
  <head>
    <title>{{ pages[pageName].title }}</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <body class="page">
    {% block header %}{% endblock %}
    {% block main %}{% endblock %}
    {% block footer %}{% endblock %}
  </body>
</html>

Я не компилировал и не тестировал этот код. Поэтому убедитесь, что все переменные и синтаксис кода верны, если вы непосредственно копируете этот код. Логика должна работать на основе документации

Источник

Когда вы используете extends, вы должны переопределить блок, чтобы переопределить его

var nunjucks  = require('nunjucks');
var env = nunjucks.configure();

var html = `
{% extends "layout.njk" %}

{% block header %}
    {{pages[1].title}}
{% endblock %}

{% block main %}
    {{pages[1].description}}
{% endblock %}
`

var data = {
    pages: [
    {
        title: "Hompage",
        description: "This is the home page"
    },
    {
        title: "Page1",
        description: "This is page 1"
    },
    {
        title: "Page2",
        description: "This is page 2"
    }]
}

res = nunjucks.renderString(html, data);
console.log(res);
Источник
Другие вопросы по тегам