Tag：Eleventy | Teruhiro Komaki's Diary (Archive)

Eleventy(11ty)のCanaryバージョンのインストール

Eleventy(11ty)公式のImageプラグインを確認したところ、非常に便利そうなので、この日記サイトに導入をしようと思い、早速インストールしました。

npm i -D @11ty/eleventy-img

.eleventy.jsを編集し、buildしたら、エラーが表示されました。

ドキュメントをみると、Canaryバージョンのインストールが必要とのことで、v3.0.0-alpha.5をインストールしました。

npm i @11ty/eleventy@canary --save-exact -D

Calling all courageous canary testers for Eleventy v3.0 — Eleventy

公式のImageプラグインについて

Low level utility to perform build-time image transformations for both vector and raster images.
Output multiple sizes, save multiple formats, cache remote images locally.
Uses the sharp image processor.

Google翻訳
ベクター画像とラスター画像の両方に対してビルド時の画像変換を実行する低レベルのユーティリティ。
複数のサイズを出力し、複数の形式で保存し、リモート画像をローカルにキャッシュします。
シャープ製画像処理エンジンを採用。

Image — Eleventy

どのように便利になったのか？

導入前

<figure>
  <img src="{{ page.url }}2024-04-05_03-51-38.png" alt="Snagit 2024 の新機能" width="2400" height="3138">
  <figcaption>Snagit 2024 の新機能</figcaption>
</figure>

導入後

<figure>
  {% image page , "2024-04-05_03-51-38.png", "Snagit 2024 の新機能" %}
  <figcaption>Snagit 2024 の新機能</figcaption>
</figure>

build後のHTML

<figure>
  <picture>
    <source type="image/webp" srcset="/2024/04/04/1500/2024-04-05_03-51-38-400w.webp 400w, /2024/04/04/1500/2024-04-05_03-51-38-800w.webp 800w, /2024/04/04/1500/2024-04-05_03-51-38-1280w.webp 1280w, /2024/04/04/1500/2024-04-05_03-51-38-1500w.webp 1500w, /2024/04/04/1500/2024-04-05_03-51-38-2000w.webp 2000w, /2024/04/04/1500/2024-04-05_03-51-38-2400w.webp 2400w" sizes="100vw">
    <img alt="Snagit 2024 の新機能" loading="lazy" decoding="async" src="/2024/04/04/1500/2024-04-05_03-51-38-400w.png" width="2400" height="3138" srcset="/2024/04/04/1500/2024-04-05_03-51-38-400w.png 400w, /2024/04/04/1500/2024-04-05_03-51-38-800w.png 800w, /2024/04/04/1500/2024-04-05_03-51-38-1280w.png 1280w, /2024/04/04/1500/2024-04-05_03-51-38-1500w.png 1500w, /2024/04/04/1500/2024-04-05_03-51-38-2000w.png 2000w, /2024/04/04/1500/2024-04-05_03-51-38-2400w.png 2400w" sizes="100vw">
  </picture>
  <figcaption>Snagit 2024 の新機能</figcaption>
</figure>

Shortcodeについては、別で投稿したいと思います。

EleventyのPaginationについて

このサイトは、#Eleventyを使って、HTMLを生成しています。

#EleventyのPaginationという機能を使い、、以下のスクショのように、年、月、日、タグのページを動的に生成しています。

タグのページを動的に生成する書き方は、以下のページに丁寧に書かれています。

Quick Tip #004—Zero Maintenance Tag Pages for your Blog — Eleventy

以下のようなFront Matterを書けば、動的にタグのページが生成されます。

すばらしく簡単です！

---
pagination:
  data: collections
  size: 1
  alias: tag
permalink: /tags/{{ tag }}/
---
<h1>Tagged “{{ tag }}”</h1>

<ol>
{% set taglist = collections[ tag ] %}
  {% for post in taglist | reverse %}
    <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
  {% endfor %}
</ol>

実装するなかで、ひとつ課題がありました。

以下のようにcollectionApi.getAll()をしても、Paginationの結果がNページある場合においても、1ページしか取得できない問題に遭遇しました。

eleventyConfig.addCollection('allPost', (collectionApi) => {
    const posts = collectionApi.getAll()
    for (const post of posts) {
      console.log(post.data.title)
    }
    return posts
  });

調べてみると、以下のIssueに答えがありました。

Collections.all only lists first page created with pagination, not others · Issue #253 · 11ty/eleventy

以下のように、Paginationを設定しているファイルのFront MatterにaddAllPagesToCollections: trueを追加することで、すべてのPaginationのページが取得できました。

---
pagination:
  addAllPagesToCollections: true
---