短歌とバレットジャーナル、手帳についてと、コード関係の備忘録。

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

2020/07/03

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

11tyの前回の記事

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

冥煌製作所(Meycough Works)

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

開発日記

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

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

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

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

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

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などのリストが作られて重複してしまうなんてことが発生します。

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

{%- 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の前の丸は凝りました。
グラデが最近流行っている気がします。

次回につづく

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

Ads