Динамическое название и описание в шаблонном движке Nunjucks - PullRequest
Новая
       22

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

0 голосов
/ 06 января 2019

Я пытаюсь понять язык 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. Пожалуйста, посоветуйте решение.

Ответы [ 3 ]

0 голосов
/ 02 мая 2019

I YuriFedorov, поскольку вы 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 .

0 голосов
/ 13 мая 2019

Если вы хотите передать данные из 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 на любой странице, макете или частичке нуньюкса, чтобы получить конкретные данные для конкретной страницы.

Например: 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>

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

0 голосов
/ 08 января 2019

Когда вы используете 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);
...