README.md

応用編

Templateをつくる

Nunjucksの機能を使ってテンプレートを簡単に作れます。
これを利用して、レイアウト別のテンプレートを用意しておくと便利です。

ファイルの準備

templates/
├── _layout.njk
└── column-layout.njk

コード

extend, block の二つを使う。

_layout.njk

<div class="wrapper">
  <div class="column-layout">
    <div class="main-column">
    {% block main %}
      main
    {% endblock %}
    </div>
    <div class="sub-column">
    {% block sub %}
      sub
    {% endblock %}
    </div>
  </div>
</div>

column-layout.njk

{% extends "@layout" %}

{% block main %}
Mainを上書き
{% endblock %}

{% block sub %}
subを上書き
{% endblock %}

config.ymlで読みこむコンポーネントを指定

ファイルの準備

render/
├── render.config.yml
└── render.njk

コード

render.config.yml

title: rendertest
context:
  contents:
    - component: button
      config:
        - text: buttttttton
    - component: form

render.njk

<section>
  {% for content in contents %}
    {% render "@" + content.component, content.config%}
  {% endfor %}
</section>