JavaScript演習-［SSG］「Eleventy」でページ量産

概要解説

静的サイトジェネレーター「Eleventy（11ty）」を使って Web ページの量産を行います。
配列になっているデータから複数ページを生成する方法を解説します。

JavaScript クイズ

15 分以内に回答して、送信してください。

6 月 21 日（火）
- JavaScript クイズ ⑩

内容

新規プロジェクト「ssg02」作成
複数ページを作成する Pagenation
data の確認方法
URL の変更
- エイリアス機能による名前の割当
CSS の読み込みと build
- DartJS Sass Compiler and Sass Watcher
- 画像フォルダもコピー
VS Code SFTP

授業資料

ssg02

あたらしく「ssg02」のプロジェクトを作成します。
普通にデスクトップに「ssg02」フォルダを作っても大丈夫です。

cd Desktop
mkdir ssg02
cd ssg02
npm install --save-dev @11ty/eleventy

ディレクトリ（フォルダ）やファイルを下記のように制作し、構築していきます。

.
├── src/
│    ├── _data/
│    ├── index.njk
│    ├── _includes/
│    │     └── layout.njk
│    └──article.njk
├── .eleventy.js
└── package.json

それぞれのファイルに記述していきます。

index.njk

---
title: 記事タイトル
layout: layout.njk
---

<h1>{{ title }}</h1>
<ul>
	<li><a href="./article">article</a></li>
</ul>

.eleventy.js

ソース（素材元）フォルダを src に設定します。

module.exports = {
	dir: {
		input: 'src'
	}
};

article.njk

テンプレート内の frontmatter を使って生成します。

---
title: 記事タイトル
members:
  - name: oda
    title: Jamstackエンジニア
  - name: toyotomi
    title: フロントエンド・エンジニア
---

<h1>{{ title }}</h1>
<div>メイン著者： {{ members[0].name }}</div>
<ul>
	{% for member in members %}
	<li>{{ member.name }} : {{ member.title }}</li>
	{% endfor %}
</ul>

_includes/layout.njk

レイアウト用のベース layout.njk を準備します。

---
title: レイアウトに指定したタイトル
---

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{{ title }}</title>
	</head>
	<body>
		{{ content | safe }}
	</body>
</html>

eleventy 起動

package.json に npm script を記述します。
npm run して起動します。

{
	"scripts": {
		"build": "eleventy",
		"serve": "eleventy --serve"
	},
	"devDependencies": {
		"@11ty/eleventy": "^1.0.1"
	}
}

npm run serve

複数ページを作成する Pagenation

データをもとに複数ページを作成するには、eleventy の Pagenation（ページネーション）を使います。
ページネーションは配列になっているデータからページを生成する機能です。
データ 1 つずつ個別のページを生成するのにも使います。
https://www.11ty.dev/docs/pagination/

_data/authors.json

グローバルデータファイルとして_data 内に、authors.json として保存します。

[
	{
		"name": "takeda",
		"title": "プロデューサー"
	},
	{
		"name": "uesugi",
		"title": "ウェブ・ディレクター"
	}
]

authors.njk

authors フォルダの中に、ページを量産していきます。
njk テンプレートの front-matter に pagination というキーを追加して設定を書いていきます。
マッピングの中のキーは data と size の 2 つです。

---
pagination:
  data: authors
  size: 1
---

これだけで、authors.json 内配列の 2 つの要素分のページが作成されます。

data の確認

何が入っているのか、確認したい場合は、テンプレートファイル（.njk ファイル）に{{ 対象 | log }}でターミナルに表示されます。
データは、pagenation の items という配列に格納されます。

{{ pagination.items | log }}

authors.njk に追加

---
pagination:
  data: authors
  size: 1
---

<ul>
	<li>{{ pagination.items[0].name }}</li>
	<li>{{ pagination.items[0].title }}</li>
</ul>

すべてのページにpagenation.itemsが 1 つずつ配布されますので、添字は[0]のままです。

URL の変更

データを 1 つずつ割り当てる場合は別の URL にしたいです。
そういった場合、前回利用した permalink を使って URL を変更します。

---
pagination:
  data: authors
  size: 1
permalink: 'authors/{{ pagination.items[0].name | slugify }}/'
---

さらに、エイリアス機能による名前の割り当てを行います。

---
pagination:
  data: authors
  size: 1
  alias: author
permalink: 'authors/{{ author.name | slugify }}/'
---

<ul>
	<li>{{ author.name }}</li>
	<li>{{ author.title }}</li>
</ul>

article.njk 編集

article.njk に authors のリンクを記述していきます。
この時、yaml に pagenation は、必要ありません。

〜〜〜〜〜〜〜〜〜〜〜〜

<h1>authors</h1>
<ul>
	{% for author in authors %}
	<li><a href="../authors/{{ author.name }}"> {{ author.name }} </a></li>
	{% endfor %}
</ul>

CSS 読み込みと build

Eleventy はデフォルトの動作として、CSS ファイルはテンプレートファイルではありません。
単純に CSS ファイルをソースディレクトリに配置するだけではコピーされません。
コピーされるように設定ファイルの.eleventy.js で addPassthroughCopy()を設定を追記します。

module.exports = function (eleventyConfig) {
	eleventyConfig.addPassthroughCopy('./src/css');
	return {
		dir: {
			input: 'src'
		}
	};
};

src フォルダ内に css/style.css を作成し、_site 内にコピーされたのを確認したら、普通にで読み込みます。
_include/layout.njk に記述します。

<link rel="stylesheet" href="./css/style.css" />

さらに、Sass を利用している人で利用したい人は、「DartJS Sass Compiler and Sass Watcher」での設定を行います。

画像フォルダもコピーさせる

CSS と同様に設定ファイルの.eleventy.js に追記します。

module.exports = function (eleventyConfig) {
	eleventyConfig.addPassthroughCopy('./src/css');
	//↓この行を追記する。
	eleventyConfig.addPassthroughCopy('./src/images');
	return {
		dir: {
			input: 'src'
		}
	};
};

VS Code 機能拡張 SFTP でアップロード

VS Code の機能拡張「SFTP」で各自のサーバーにアップロードします。

sftp.json

各々の設定に置き換えてください。

{
	"name": "lolipop!",
	"host": "ftp.lolipop.jp",
	"protocol": "ftp",
	"port": 21,
	"password": "*********",
	"username": "your acount",
	"remotePath": "/11ty",
	"context": "_site",
	"uploadOnSave": false
}

参考：VSC から SFTP でサーバにアップロードする - Visual Studio Code - ［SMART］

以上で、静的サイトジェネレーターでのサイト制作の基本は終了です。
他にも全サイト一覧やタグ付け、日付など細かな機能はありますが、必要であれば調べてみてください。
11ty は、日本ではあまり普及していませんので、公式ドキュメントが最適です。

いよいよ、来週から簡単な EC サイトを制作してもらいたいと思います。
題材は「自分の身の回りにある小物 10 点」と考えています。

Webデザイン学科
授業資料