Eleventy Baseline
English Nederlands Français
|
Table of Contents

Multilingual index

A small index page that groups every page on the site by language. Useful when you have a multilingual site and want a single landing point that fans out to each language's content.

Prerequisites

  • Multilingual switched on, with per-language directory data declaring lang for your content. The multilingual site tutorial walks through both.
  • Pages include translationKey in their front matter if you want sibling links.
  • package.json with "type": "module" and scripts (start, build).
  • settings.url set; use pathPrefix if you deploy under a subpath.

Create the index page

src/content/pages/languages-index.md:

---
title: 'Languages Index'
permalink: '/languages-index/'
layout: 'layouts/base.njk'
---

{% set t = collections.all | groupby("data.lang") %}
{% for lang, items in t %}

<p><strong>{{ settings.languages[lang].languageName }}</strong></p>
<ul>
{% for item in items %}
  <li><a href="{{ item.page.url }}">{{ item.data.title }}</a></li>
{% endfor %}
</ul>
{% endfor %}

Verify

  • Dev: npm start
  • Build: npm run build
  • Open the index page and confirm pages are grouped under each language.

Two things to get right

Neither of these is optional, and both are easy to leave out because the page still renders without them.

Guard item.url inside the loop. collections.all also carries records with permalink: false, which arrive with url: false and would otherwise render as href="false". The same check is where you filter drafts or noindex out:

{% if item.url and not item.data.draft and not item.data.noindex %}

Honour pathPrefix in permalinks when deploying under a subpath, or every link in the index is one segment short. Deploy under a subpath has the shape.

Notes

  • Content layout typically uses per-language folders (e.g. src/content/en/, src/content/nl/) with a per-folder .11tydata.js setting lang.
  • Grouping by data.lang keeps this example simple, and collections.all gives you the pages themselves rather than records, which is what an index page wants.
  • For sibling links rather than a full index, page.translations lists the current page's other-language versions directly. collections.translationsMap is the site-wide view of the same relationships, keyed by translationKey.

See also