前回に続き、11ty(Eleventy)＋Gulp＋Sassスターターがどういった構成になってるかをご紹介です。
スターターのデータ一式はGitHubに有ります。
hirasawa/latele-11ty-gulp-starter
これからこのスターターに関して色々ご説明していくのですが、11ty(Eleventy)とNunjucksは多少なり使ったことが有る前提で書いてるので説明不足な点も有るかもしれません。
その辺は予めご了承頂ければと！
11ty(Eleventy)の使い方に関しては、CodeGridの記事が一番詳しく書いてあります。
月額880円ですが、30日間無料で読めるので気になったら読んでみるのも良いかと思います。
ディレクトリ構成
今回作ったスターターのディレクトリ構成は次のような感じになっています。
シンプルに作ってたつもりだけど、Sassファイルが有るとたくさん有るように見えますね。
latele-11ty-gulp-starter
├ src
│ ├ _data
│ │ ├ news.json // News取得用サンプルJSON
│ │ └ site.js // サイトの基本設定
│ ├ _includes
│ │ ├ layouts
│ │ │ ├ base.njk // ベースとなるレイアウト
│ │ │ ├ default.njk
│ │ │ └ page.njk
│ │ ├ breadcrumb.njk // パンくずリスト
│ │ ├ footer.njk // 共通フッター
│ │ ├ footer_script.njk
│ │ ├ header.njk // 共通ヘッダー
│ │ └ meta.njk // meta関係いろいろ
│ ├ about // aboutページ
│ │ └ index.njk
│ ├ assets
│ │ ├ img
│ │ ├ js
│ │ │ └ main.js
│ │ └ sass // FLOCSSな感じのSassファイル
│ │ ├ foundation
│ │ │ ├ _base.scss
│ │ │ └ _normalize.scss
│ │ ├ global
│ │ │ ├ _index.scss
│ │ │ ├ _mixin.scss
│ │ │ └ _variables.scss
│ │ ├ layout
│ │ │ ├ _contents.scss
│ │ │ ├ _footer.scss
│ │ │ ├ _header.scss
│ │ │ ├ _nav.scss
│ │ │ └ _page.scss
│ │ ├ object
│ │ │ ├ component
│ │ │ │ ├ _skipLink.scss
│ │ │ │ └ _title.scss
│ │ │ ├ project
│ │ │ └ utility
│ │ │ ├ _display.scss
│ │ │ └ _margin.scss
│ │ └ s.scss
│ ├ info // Infoページ
│ │ └ index.njk
│ ├ 404.njk // 404ページ
│ ├ index.njk // トップページ
│ └ sitemap.xml.njk // sitemap.xml
├ .browserslistrc // オートプレフィクサーの設定
├ .editorconfig // エディタの設定
├ .eleventy.js // 11tyの設定
├ .gitignore
├ README.md
├ gulpfile.js // Gulp Sass関係の処理はここ
├ package-lock.json
└ package.jsonトップページを表示する
コマンドラインで npm i してインストールした後に npm start でサーバーが起動します。
すると、ブラウザシンクの設定で open: 'external', にしているので標準設定のブラウザに以下の画面が表示されると思います。
無事に表示されれば、問題なく動いていると思います。
初回の起動時はSassファイルがコンパイルされませんが、適当な .scss を保存すると次のような見た目になると思います。
後は src フォルダ内のファイルを好きにいじってください。
各ページやファイルに関して
サイト全体の設定をする site.js
まずはサイト全体の設定をするために、src/_data/site.js を開いてください。
これJSONでも良かったんですが、ちゃんとコメント付けるならJSの方が良いかなって事でJSにしてます。
この site.js の中身はこんな感じ。
module.exports = {
// サイト名
title: "新規でサイトを作るやつ",
// トップページのみ付与される簡易的な説明文
catch: " - サイトの簡易的な説明文",
// meta description
description: "11tyとGulp（Sass）で始めるスターターセット",
// URL（最後の / は含めない）
url: "https://example.com",
// 文字コード
charset: "utf-8",
// 言語
lang: "ja",
locale: "ja_JP",
// ビューポートの指定
viewport: "width=device-width, initial-scale=1",
// パンくずリストのトップページの文言
breadcrumbHomeText: "トップページ",
// faviconのパス
faviconPath: "/assets/img/favicon.ico",
// Google AnalyticsのUA設定（gtag.jsは _includes/footer_script.njk）
gtagUA: "UA-xxxxxxxx-x",
// トップページ用 og:type
ogType_top: "website",
// トップページ以外の og:type
ogType: "article",
// og:image
ogImage: "/assets/img/blog/share/ogp.jpg",
// Twitter Card
twitterCard: "summary",
// Twitter Site（空の場合出力しない） 例：@ユーザー名
twitterSite: ""
};
コメントがっつり入れてるのでだいたい何が設定できるか分かるかと思いますが、これを適所書き換えて頂ければと。
主に src/_includes/meta.njk に入る値を設定できる感じです。
トップページ
src/index.njk がトップページです。
トップページでは、 collections.all を使った全ページ一覧と日付をいい感じにするやつのテストと、 src/_data/news.json の内容を表示するサンプルが有ります。
日付に関しては、何も処理をしないと「Mon Sep 06 2021 10:22:27 GMT+0900 (GMT+09:00)」みたいに出ちゃうので、Day.js を予め入れてあります。
| formatDate('YYYY/MM/DD') みたいに指定するだけなので楽ちん。
アバウトページ
src/about/index.njk がアバウトページです。
ここは複数ページ作る際の参考的な意味合いと、パンくずリストを include してます。
親の階層に関しては、ベタでも良さそうですし、ボクの場合はfront-matterに parent とかってのを作ってその値を入れるようにしてます。
お知らせページ
src/info/index.njk がお知らせページです。
このページは src/_data/news.json の内容を取得して、それをページ分割してるサンプルが有ります。
front-matterの size を変更することで表示件数を調整できます。
実際にお知らせっぽいコンテンツ作るのに使えるかなーと思います。
404ページ
src/404.njk にて404もご用意しております。
ブラウザシンクの設定で404も表示されるようにしていますのでご利用いただけますと幸いです。
現在、トップページに一覧で表示するために、eleventyExcludeFromCollections: false の指定をしてますが、実際に使う際は一覧に出てくると困ると思いますので、値を true に変えてください。
sitemap.xml
src/sitemap.xml.njk にて sitemap.xml も後から作るの面倒だなーって思ったので予め用意しました。
src/_data/site.js の設定をちゃんとやってればいい感じに sitemap.xml が作られると思います。
先程の404と同じように、sitemap.xml に出てほしくないページが有る場合、front-matterに eleventyExcludeFromCollections: true を書けば出なくなります。
インクルードファイル
src/_includes にインクルードファイルが入ってます。
ここに入ってれば、{%- include 'breadcrumb.njk' -%} みたいな感じでサクッと呼び出せるので使い勝手が良いですね。
この src/_includes 内にある layouts/base.njk が大枠の部分です。
default.njk と page.njk は、大枠の base.njk をインクルードしています。
こうしておくと、ページによって大枠は同じだけどメインコンテンツ部分だけマークアップを変えるのに良い感じです。
例えば、 page.njk はMarkdownで書いた内容を表示させる場合に、
---
layout: layouts/base.njk
---
<div class="markdown">
{{ content | safe }}
</div>みたいにしておけば、スタイルの切り替えやら、.md ファイルが扱いやすいと思います。
header.njk や footer.njk はそのまんま全ページ共通のヘッダーやらフッターです。
footer_script.njk は /body 直前にscript書いたりするのに使える感じです。
assetsフォルダ
assetsフォルダには img や sass 、 js 等が入ってます。
sass に関してはCSS設計でFLOCSSを採用することが多いので、そんな感じのフォルダ構成になっています。
採用するCSS設計にも寄ると思いますが、scssファイルを細かく分割する場合に都度読み込ませるのが面倒なので、gulp-sass-glob-use-forward - npmを使い、@forward を使っててもGlobが使えるようにしています。
おわりに
駆け足気味な紹介でしたが、11ty(Eleventy)＋Gulp＋Sassスターターがどんな感じになっているかのご説明でした。
色々ご説明してきましたが、結局こういうのって自分が使いやすい感じで作ってるので、これをベースに自分なりのスターターを作って頂ければと思います。
なので、src 内はあまり気にせず使いやすい感じにカスタマイズして頂ければ幸いです。