Страница <style> в заголовке за 11ти

Я новичок в 11ty и Nunjucks, но нигде не могу найти этот ответ. Я хотел бы добавить блок стиля для конкретной страницы в тег заголовка шаблона со страницы. Я пришел из фона Vue/Nuxt, и мне очень нравится, как вы можете привязать блок CSS к компоненту / странице, и они автоматически помещают его в тег заголовка для вас.

Вот мой общий макет:

index.njk

---
layout: default.njk
title: Home
---

<img src="http://lorempixel.com/1200/300/sports/5" style="width: 100%;" />
<div class="container">
  <h1>11ty Test</h1>
</div>

{% block customstyles %}
  <style>
    .container{
      background: red;
    }
  </style>
{% endblock %}

_includes / default.njk

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}
      | 11ty Sandbox</title>
    {% block customstyles %}
      This is the default content
    {% endblock %}
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>

Это работает до определенной степени, но тег стиля находится в теле, а не в голове, и блок не работает, как я понимаю. Что мне не хватает?

Источник

3 ответа

Решение

Проблема в том, что вы не можете использовать {% block %} в файле содержимого... их можно использовать только в файле, расположенном в _includes. Вот версия вашего примера, которая действительно работает...

_includes / default.njk

Это ваш базовый макет, от которого "расширяются" все остальные макеты.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}
      | 11ty Sandbox</title>
    {% block customstyles %}
      This is the default content
    {% endblock %}
  </head>
  <body>
    {% block body %}
    {{ content | safe }}
    {% endblock %}
  </body>
</html>

_includes / simple.njk

Это макет только для "простых" страниц. Обратите внимание, что он использует{% extends "default.njk" %} и он использует {% block customstyles %} чтобы предоставить индивидуальный стиль.

{% extends "default.njk" %}
{% block customstyles %}
  <style>
    .container{
      background: red;
    }
  </style>
{% endblock %}
{% block body %}
<img src="{{ image }}" style="width: 100%;" />
<div class="container">
  <h1>{{ title }}</h1>
  {{ content | safe }}
</div>
{% endblock %}

index.njk

Эта страница - это просто контент, изображение и заголовок, и она отображается с использованием "простого" макета.

---
layout: simple.njk
title: Home
image: http://lorempixel.com/1200/300/sports/5
---
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Sed finibus, velit a tristique hendrerit, nisl nisi aliquet diam, a vulputate tortor quam et odio. 

Vivamus vitae magna a eros suscipit luctus a quis lorem.
Источник

Для вывода данных в шапку сайта следует использовать следующий блок

Источник

Вы можете попробовать поместить свои конкретные стили в данные вступительного документа, а затем отобразить их в основном шаблоне.

      layout: default.njk
title: Home
style: ".container{background: red;}"

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

Источник
Другие вопросы по тегам