页眉中的页面<style>为11ty _includes / default.njk _includes / simple.njk index.njk

编程问答 2022-08-13

问题描述

我是11ty和Nunjucks的新手，但是我找不到任何答案。我想在页面的模板head标签中添加特定于页面的样式块。我来自Vue / Nuxt背景，我非常喜欢如何将CSS块作用于组件/页面，它们会自动将其放置在head标签中。

这是我的总体布局：

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>

它可以工作到一定程度，但是style标签位于身体中，而不是头部，按照我的理解，该块不起作用。我想念什么？

解决方法

问题是您不能在内容文件中使用{% block %} ...它们只能在_includes中的文件中使用。这是可以正常工作的exmaple版本...

_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.
eleventyjamstacknunjucks