Multilingual Index

Enable multilingual in eleventy.config.js.

Reuse the same i18n data used in the multilingual tutorial:

import baseline. { config as baselineConfig } from "./_baseline/eleventy.config.js";
import i18n from "./src/_data/i18n.js";

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default function (eleventyConfig) {
  eleventyConfig.addPlugin(baseline({
    multilingual: true,
    defaultLanguage: i18n.defaultLanguage,
    languages: i18n.languages,
  }));
}

Ensure directory data files declare language for your content.

Example pages.11tydata.js:

export default { lang: "en" }

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>{{ i18n.languages[lang].languageName }}</strong></p>
<ul>
{% for item in items %}
  <li><a href="{{ item.page.url }}">{{ item.data.title }}</a></li>
{% endfor %}
</ul>
{% endfor %}

Adjust permalink/layout to fit your structure.

Verify.

• Dev: npx rimraf dist/ && npm run dev
• Build: npx rimraf dist/ && npm run build
• Open the index page and confirm pages are grouped under each language.