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.

---

1) 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 %}

2) Verify

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

Notes

• Content layout typically uses per-language folders (e.g. src/content/en/, src/content/nl/) with a per-folder .11tydata.js setting lang.
• collections.translationsMap is available when multilingual is on. Keys are translationKey; each entry holds the per-language metadata. Grouping by data.lang keeps this example simple. Reach for translationsMap when you want sibling links.
• To filter out drafts or noindex, add a check inside the loop (e.g. {% if not item.data.draft and not item.data.noindex %}).
• Honour pathPrefix in permalinks when deploying under a subpath.

---

See also

• Multilang module
• Plugin entrypoint reference
• Multilingual site tutorial