テンプレート活用例：Eleventy

Eleventyテンプレートを使ってWebサイトを制作する

Eleventyは、Node.jsベースの静的サイトジェネレーターです。テンプレートエンジンをベースとしているため、HTML、Markdown、Pug、Jinja、Nunjucksなど、さまざまなテンプレート言語を使用できます。

はじめに

Eleventyテンプレートを使ってWebサイトを制作するには、まずEleventyをインストールする必要があります。

npm install -g eleventy

テンプレートファイルの作成 Eleventyテンプレートファイルは、HTML、Markdown、Pug、Jinja、Nunjucksなどのテンプレート言語で記述できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webサイト</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

テンプレートファイルの生成

テンプレートファイルを作成したら、EleventyでWebサイトを生成します。

eleventy

すると、カレントディレクトリに「index.html」というファイルが生成されます。このファイルが、Webサイトのトップページになります。

データファイルからのデータ取得 Eleventyテンプレートでは、データファイルからデータを取得して、テンプレートに埋め込むことができます。データファイルは、JSON、YAML、CSVなど、さまざまな形式で作成できます。

json
{
"title": "Webサイト",
"content": "Hello, World!"
}

データファイルを作成したら、テンプレートでデータを取得します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ content }}</h1>
</body>
</html>

プログラミング機能の使用

Eleventyテンプレートでは、ループ処理や条件分岐などのプログラミング機能を使用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Webサイト</title>
</head>
<body>
  <ul>
    {% for item in items %}
      <li>{{ item }}</li>
    {% endfor %}
  </ul>

  {% if isActive %}
    <p>アクティブです</p>
  {% else %}
    <p>非アクティブです</p>
  {% endif %}
</body>
</html>

Eleventyテンプレートの活用例

Eleventyテンプレートは、以下ののようなWebサイトの制作に活用できます。

ブログ
ポートフォリオ
企業サイト
個人サイト
サービスサイト

Eleventyテンプレートは、HTML、Markdown、Pug、Jinja、Nunjucksなど、さまざまなテンプレート言語を使用できるため、自分の好みに合わせてWebサイトを制作できます。また、データファイルからデータを取得して、テンプレートに埋め込むことができるため、柔軟なWebサイトを制作できます。