Как добавить класс изменения в тело для разных страниц в Нунджаке?

Я использую систему шаблонов Mozilla Nunjucks для статического веб-сайта с несколькими страницами. По какой-то причине я хочу добавить класс в тег body для каждой отдельной страницы.

Страница о нас > <body class="about">

Главная > <body class="home">

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

Я хочу изменить классы условно.


javascript nunjucks
person Jitendra Vyas    schedule 19.10.2015    source источник
comment
Как вы рендерите шаблоны? Можете ли вы передать рендереру переменные, специфичные для страницы?   -  person xmojmr    schedule 20.10.2015
comment
@xmojmr - я использую плагин gulp-nunjucks-html   -  person Jitendra Vyas    schedule 20.10.2015
comment
Можете ли вы передать переменную для страницы (body class) в npmjs.com/package /gulp-nunjucks-html#options-locals ?   -  person xmojmr    schedule 20.10.2015
comment
@xmojmr Я хотел бы добиться этого, не редактируя файл gulp   -  person Jitendra Vyas    schedule 20.10.2015
comment
@xmojmr хорошо, если даже я согласен с добавлением переменной, я не знаю, как это сделать. это моя задача gulp gist.github.com/jitendravyas/31a22db17f9868506126   -  person Jitendra Vyas    schedule 20.10.2015
comment
Сценарий, который я имел в виду, предполагал что-то вроде <body class="{{ body_class }}"> в главном шаблоне и переменных body_class для конкретной страницы. Главный шаблон может выполнять любую if логику, необходимую   -  person xmojmr    schedule 20.10.2015

Ответы (3)


arrow_upward
6
arrow_downward

  1. Установите переменную на своей странице. На вашей странице.njk: {% set bodyClass = "pageClass" %}
  2. Вызовите bodyClass в макете. <body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
person Nizamil Putra    schedule 20.06.2017

arrow_upward
3
arrow_downward

Он не полностью динамичен, но вы можете установить переменные внутри шаблонов страниц и использовать их в условном выражении для установки класса тела.

layout.nunjucks

{% if pgHome %}
  <body class="home">
{% elif pgAbout %}
  <body class="about">
{% else %}
  <body class="page">
{% endif %}

home.nunjucks

{% extends "layout.nunjucks" %}
{% set pgHome = true %}


  Homepage Markup
  ...
person mattisahuman    schedule 12.02.2016

arrow_upward
2
arrow_downward

Попробуй это:

Макет:

<body class="{%block bodyClass %}{% endblock %}">

Страница:

{% block bodyClass %} about {% endblock %}
person Zell Liew    schedule 19.10.2015
comment
Это не работает, потому что оно также отображает имя страницы на странице - person Jitendra Vyas; 26.10.2015
comment
Что вы подразумеваете под этим отображает имя страницы на странице - person Zell Liew; 27.10.2015
comment
Я полагаю, что он хотел бы сделать, если компилируемая страница имеет значение about.html, вы можете каким-то образом получить доступ к имени файла about и использовать это имя в шаблоне, поэтому вам не нужно явно устанавливать класс страницы. Это позволило бы кому-то делать произвольные имена страниц и рассчитывать на класс, установленный из имени файла, и не повторяться. - person joeyfb; 11.12.2015