11tyで個人サイトを作りました

梅雨の晴れ間はきちんと活用したいものです。
明日オンラインで手帳会議に出席するので楽しみです。

11tyの前回の記事

前回、本当に簡単にしか紹介しなかった11tyで、個人サイトを作りました。
個人サイトがどんどんなくなる時代に完全に逆行してますが、わたしにはこういう場がないと困るなと考えまして。

冥煌製作所(Meycough Works)

更新はきちんとしていきたいと思います(自戒)。

開発日記

今回スターターにあたるものは使っていません。
ちなみに現時点で入れてるプラグインは公式のNavigation Pluginと非公式のSassだけです。

まずはフォルダを新規に作った後、そのフォルダにインストール。

1
2
$ npm init -y
$ npm install --save-dev @11ty/eleventy

ほか、万が一のことがあった時のためにGithubにリポジトリを作って(非公開)、管理しています。
GitとGithubに関してはググってみてください。

この後「Nunjucks書けないんだけど」と少々Nunjucksの勉強をし、ベースはnjk、特にHTMLやらを書かなくて良さげなページはmdでページを作成します。
また、設定ファイルである「.eleventy.js」に該当フォルダをコピーしてコンパイルするよう設定します。
それから独自にリストを作ります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("img");
// 中略
eleventyConfig.addCollection("novelList", collection => {
const tagsSet = new Set();
collection.getFilteredByTags("novel").forEach(item => {
if (!item.data.tags) return;
item.data.tags
.filter(tag => !['all','novel'].includes(tag))
.forEach(tag => tagsSet.add(tag));
});
return Array.from(tagsSet).sort();
});
// 略
};

実はこのnovelListさんは活用されてないのですが、流用されて別な形のものが実用されています。
これは苦労しました。
何がしたくてこのリストを作ったかというと、ひとえに「小説などのコンテンツ一覧」をループで表示させるためです。
11tyはタグで絞り込みができるのですが(タグはもちろん複数つけられます)、allなどのリストが作られて重複してしまうなんてことが発生します。

ちなみに実際のページ自体にはこう書いてあります。

1
2
3
4
5
6
7
8
9
{%- for tag in collections.novelList -%}
<div class="p-novel">
<ul class="c-novelList">
{%- for tag in collections[tag] -%}
<li><a href="{{ tag.url }}">{{ tag.data.title }}</a></li>
{%- endfor -%}
</ul>
</div>
{%- endfor -%}

日本語のページがあまり数なく、この情報も英語のページから着想を得ました……。
ディスティンクトできないのがすべての元凶な気がします。

CSSはどうしたのか

TailwindCSSを使用しようか迷い、結局自分で書きました。
ここのところCSSきちんと書いてなかったのと(SCSSですけど)、BEMの命名規則などを思い出したかったので……。

地味にh2の前の丸は凝りました。
グラデが最近流行っている気がします。

次回につづく

まだパンくずリストが実装できてないので、次回につづきます。