Eleventy Plugin Baseline

A magic carpet ride

Table of Contents

Multilingual Index

List your site pages grouped by language using Baseline’s multilingual setup.

Prerequisites

  • Baseline configured with multilingual: true, defaultLanguage, and languages set.
  • Pages include lang and translationKey in front matter.
  • site.url set; use pathPrefix if you deploy under a subpath.

Steps

  1. 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 async function (eleventyConfig) {
	eleventyConfig.addPlugin(
		baseline({
			multilingual: true,
			defaultLanguage: i18n.defaultLanguage,
			languages: i18n.languages
		})
	);
}

export const config = baselineConfig;

  2. Ensure directory data files declare language for your content.

    Example pages.11tydata.js:

    export default { lang: 'en' };

  3. 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.

  4. 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.

Notes

  • Content layout typically uses per-language folders (e.g., src/content/en/, src/content/nl/) with per-folder .11tydata.js setting lang.
  • collections.translationsMap is available when multilingual is enabled; grouping by data.lang keeps the example simple.
  • If you need to filter out drafts or noindex, add a check inside the loop (e.g., {% if not page.data.draft and not page.data.noindex %}).
  • If you want sibling links per page, use translationKey to find other languages for the same key.
  • Honor pathPrefix in permalinks when deploying under a subpath.