Using a dictionary library for i18n, also shows how to use i18n with navigation plugin.

This commit is contained in:
Zach Leatherman 2022-07-27 17:00:44 -05:00
parent a4dade2537
commit bd40861468
8 changed files with 52 additions and 12 deletions

View File

@ -1,9 +1,11 @@
const { DateTime } = require("luxon"); const { DateTime } = require("luxon");
const rosetta = require("rosetta");
const markdownItAnchor = require("markdown-it-anchor"); const markdownItAnchor = require("markdown-it-anchor");
const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginRss = require("@11ty/eleventy-plugin-rss");
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const pluginNavigation = require("@11ty/eleventy-navigation"); const pluginNavigation = require("@11ty/eleventy-navigation");
const { EleventyI18nPlugin } = require("@11ty/eleventy"); const { EleventyI18nPlugin } = require("@11ty/eleventy");
const languageStrings = require("./i18n.js");
module.exports = function(eleventyConfig) { module.exports = function(eleventyConfig) {
eleventyConfig.ignores.add("README.md"); eleventyConfig.ignores.add("README.md");
@ -78,6 +80,19 @@ module.exports = function(eleventyConfig) {
showVersion: true, showVersion: true,
}); });
// i18n filter using Rosetta
const rosettaLib = rosetta(languageStrings);
eleventyConfig.addFilter("i18n", function (key, lang) {
const I18N_PREFIX = "i18n.";
if(key.startsWith(I18N_PREFIX)) {
key = key.slice(I18N_PREFIX.length);
}
// depends on page.lang in 2.0.0-canary.14+
let page = this.page || this.ctx?.page || this.context?.environments?.page || {};
return rosettaLib.t(key, {}, lang || page.lang);
});
return { return {
// Control which files Eleventy will process // Control which files Eleventy will process
// e.g.: *.md, *.njk, *.html, *.liquid // e.g.: *.md, *.njk, *.html, *.liquid

View File

@ -30,7 +30,7 @@
{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #} {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
<ul class="nav"> <ul class="nav">
{%- for entry in collections.all | eleventyNavigation %} {%- for entry in collections.all | eleventyNavigation %}
<li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title }}</a></li> <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title | i18n }}</a></li>
{%- endfor %} {%- endfor %}
</ul> </ul>
</header> </header>

View File

@ -18,7 +18,7 @@ templateClass: tmpl-post
{% if i18nLinks.length %} {% if i18nLinks.length %}
<ul> <ul>
<li> <li>
This page is also available in: {{ "i18n.also" | i18n }}
{%- for link in i18nLinks %} {%- for link in i18nLinks %}
<a href="{{ link.url }}" lang="{{ link.lang }}" hreflang="{{ link.lang }}">{{ link.label }}</a> <a href="{{ link.url }}" lang="{{ link.lang }}" hreflang="{{ link.lang }}">{{ link.label }}</a>
{%- if not loop.last %},{% endif %} {%- if not loop.last %},{% endif %}
@ -28,12 +28,13 @@ templateClass: tmpl-post
{% endif %} {% endif %}
{%- if collections.posts %} {%- if collections.posts %}
{%- set previousPost = collections.posts | getPreviousCollectionItem() %} {# these filters are locale-aware in 2.0.0-canary.14 #}
{%- set nextPost = collections.posts | getNextCollectionItem() %} {%- set previousPost = collections.posts | getPreviousCollectionItem %}
{%- set nextPost = collections.posts | getNextCollectionItem %}
{%- if nextPost or previousPost %} {%- if nextPost or previousPost %}
<ul> <ul>
{%- if previousPost %}<li>Previous: <a href="{{ previousPost.url | locale_url | url }}">{{ previousPost.data.title }}</a></li>{% endif %} {%- if previousPost %}<li>{{ "i18n.previous" | i18n }}: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
{%- if nextPost %}<li>Next: <a href="{{ nextPost.url | locale_url | url }}">{{ nextPost.data.title }}</a></li>{% endif %} {%- if nextPost %}<li>{{ "i18n.next" | i18n }}: <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
</ul> </ul>
{%- endif %} {%- endif %}
{%- endif %} {%- endif %}

View File

@ -1,10 +1,11 @@
--- ---
layout: layouts/post.njk layout: layouts/base.njk
title: About Me title: About Me
templateClass: tmpl-post templateClass: tmpl-post
eleventyNavigation: eleventyNavigation:
key: About Me key: nav.about
order: 3 order: 3
--- ---
# {{ title }}
I am a person that writes stuff. I am a person that writes stuff.

View File

@ -1,7 +1,7 @@
--- ---
layout: layouts/home.njk layout: layouts/home.njk
eleventyNavigation: eleventyNavigation:
key: Archive key: nav.archive
order: 2 order: 2
--- ---

View File

@ -1,7 +1,7 @@
--- ---
layout: layouts/home.njk layout: layouts/home.njk
eleventyNavigation: eleventyNavigation:
key: Home key: i18n.nav.home
order: 1 order: 1
--- ---
{% set maxPosts = collections.posts.length | min(3) %} {% set maxPosts = collections.posts.length | min(3) %}

22
i18n.js Normal file
View File

@ -0,0 +1,22 @@
module.exports = {
en: {
also: "This page is also available in:",
previous: "Previous",
next: "Next",
nav: {
home: "Home",
archive: "Archive",
about: "About Me",
}
},
es: {
also: "Esta página también está disponible en:",
previous: "Anterior",
next: "Siguiente",
nav: {
home: "Página de inicio",
archive: "Archivo",
about: "Acerca de mí",
}
}
};

View File

@ -25,11 +25,12 @@
}, },
"homepage": "https://github.com/11ty/eleventy-base-blog#readme", "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
"dependencies": { "dependencies": {
"@11ty/eleventy": "^2.0.0-canary.13", "@11ty/eleventy": "^2.0.0-canary.14",
"@11ty/eleventy-navigation": "^0.3.3", "@11ty/eleventy-navigation": "^0.3.3",
"@11ty/eleventy-plugin-rss": "^1.2.0", "@11ty/eleventy-plugin-rss": "^1.2.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0", "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
"luxon": "^3.0.1", "luxon": "^3.0.1",
"markdown-it-anchor": "^8.6.4" "markdown-it-anchor": "^8.6.4",
"rosetta": "^1.1.0"
} }
} }