Multilingual support

support
1

Hello,

I am trying to setup a bilingual (es/en) minimal weblog with Hugo v.0.140.0 using the Archie theme. I am a total Hugo noob and I’m not a dev.

The hugo.toml file looks like this:

baseURL = 'https://sinteti.co/'
theme="archie"
copyright = "Sintéti.co - CC BY-NC-SA 4.0"
defaultContentLanguage = 'es'
defaultContentLanguageInSubdir = true
contentDir = "content"
[languages]
  [languages.es]
    contentDir = 'content/es'
    disabled = false
    languageCode = 'es'
    languageDirection = 'ltr'
    languageName = 'Español'
    title = 'Sintéti.co'
    weight = 1
    [languages.es.params]
      subtitle = 'RUIDOS RAROS, PROYECTOS PARSIMONIOSOS.'
      mode="toggle" # color-mode → light,dark,toggle or auto
      katex = true # enable KaTeX support
  [languages.en]
    contentDir = 'content/en'
    disabled = false
    languageCode = 'en'
    languageDirection = 'ltr'
    languageName = 'English'
    title = 'Sintéti.co'
    weight = 2
    [languages.en.params]
      subtitle = 'STRANGE SOUNDS, PARSIMONIOUS PROJECTS.'
      mode="toggle" # color-mode → light,dark,toggle or auto
      katex = true # enable KaTeX support

I want ES to be default, but Archie seems to be EN only. So I tried to setup a table to translate some strings, for example the “All articles” title in the /post/ page and the “Read more” in the main page. I was assuming these would translate when I ran hugo on the cli but they remain unchanged. I am guessing these are determined by the theme via the list.html and index.html files.

.
├── archetypes
│   └── default.md
├── assets
├── config
│   └── _default
│       ├── hugo.toml
│       ├── menus
│       │   ├── menu.en.toml
│       │   └── menu.es.toml
│       └── params.toml
├── content
│   ├── en
│   │   └── post
│   │       └── posttest00000.md
│   └── es
│       └── post
│           └── posttest00000.md
├── data
├── i18n
│   ├── en.toml
│   └── es.toml
├── layouts
├── mods
│   └── archie_footer_mod.html
├── public
│   ├── css
│   │   ├── dark.d22e2a2879d933a4b781535fc4c4c716e9f9d35ea4986dd0cbabda82effc4bdd.css
│   │   ├── fonts.2c2227b81b1970a03e760aa2e6121cd01f87c88586803cbb282aa224720a765f.css
│   │   └── main.5cebd7d4fb2b97856af8d32a6def16164fcf7d844e98e236fcb3559655020373.css
│   ├── en
│   │   ├── categories
│   │   │   ├── index.html
│   │   │   └── index.xml
│   │   ├── index.html
│   │   ├── index.xml
│   │   ├── page
│   │   │   └── 1
│   │   │       └── index.html
│   │   ├── post
│   │   │   ├── index.html
│   │   │   ├── index.xml
│   │   │   └── posttest00000
│   │   │       └── index.html
│   │   ├── sitemap.xml
│   │   └── tags
│   │       ├── index.html
│   │       └── index.xml
│   ├── es
│   │   ├── categories
│   │   │   ├── index.html
│   │   │   └── index.xml
│   │   ├── index.html
│   │   ├── index.xml
│   │   ├── page
│   │   │   └── 1
│   │   │       └── index.html
│   │   ├── post
│   │   │   ├── index.html
│   │   │   ├── index.xml
│   │   │   └── posttest00000
│   │   │       └── index.html
│   │   ├── sitemap.xml
│   │   └── tags
│   │       ├── index.html
│   │       └── index.xml
│   ├── fonts
│   │   ├── fira-sans-v10-latin-regular.eot
│   │   ├── fira-sans-v10-latin-regular.svg
│   │   ├── fira-sans-v10-latin-regular.ttf
│   │   ├── fira-sans-v10-latin-regular.woff
│   │   ├── fira-sans-v10-latin-regular.woff2
│   │   ├── ibm-plex-mono-v6-latin-500italic.eot
│   │   ├── ibm-plex-mono-v6-latin-500italic.svg
│   │   ├── ibm-plex-mono-v6-latin-500italic.ttf
│   │   ├── ibm-plex-mono-v6-latin-500italic.woff
│   │   ├── ibm-plex-mono-v6-latin-500italic.woff2
│   │   ├── roboto-mono-v12-latin-regular.eot
│   │   ├── roboto-mono-v12-latin-regular.svg
│   │   ├── roboto-mono-v12-latin-regular.ttf
│   │   ├── roboto-mono-v12-latin-regular.woff
│   │   └── roboto-mono-v12-latin-regular.woff2
│   ├── index.html
│   ├── js
│   │   ├── feather.min.js
│   │   ├── main.js
│   │   └── themetoggle.js
│   └── sitemap.xml
├── static
└── themes
    └── archie
        ├── archetypes
        │   └── default.md
        ├── assets
        │   └── css
        │       ├── dark.css
        │       ├── fonts.css
        │       └── main.css
        ├── exampleSite
        │   ├── archetypes
        │   │   └── default.md
        │   ├── config.toml
        │   └── content
        │       ├── about.md
        │       ├── archives.md
        │       ├── homepage
        │       │   ├── about.md
        │       │   ├── index.md
        │       │   └── work.md
        │       ├── _index.md
        │       └── posts
        │           ├── post-1.md
        │           ├── post-2.md
        │           ├── post-3.md
        │           ├── post-4.md
        │           ├── post-5.md
        │           ├── post-6.md
        │           ├── post-7.md
        │           └── tg-gh.md
        ├── images
        │   ├── archie-dark.png
        │   ├── screenshot.png
        │   ├── theme.png
        │   └── tn.png
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   ├── single.html
        │   │   ├── term.html
        │   │   └── terms.html
        │   ├── index.html
        │   ├── partials
        │   │   ├── disqus.html
        │   │   ├── footer.html
        │   │   ├── header.html
        │   │   ├── head.html
        │   │   ├── pagedescription.html
        │   │   └── paginator.html
        │   └── shortcodes
        │       └── callout.html
        ├── LICENSE
        ├── README.md
        ├── static
        │   ├── fonts
        │   │   ├── fira-sans-v10-latin-regular.eot
        │   │   ├── fira-sans-v10-latin-regular.svg
        │   │   ├── fira-sans-v10-latin-regular.ttf
        │   │   ├── fira-sans-v10-latin-regular.woff
        │   │   ├── fira-sans-v10-latin-regular.woff2
        │   │   ├── ibm-plex-mono-v6-latin-500italic.eot
        │   │   ├── ibm-plex-mono-v6-latin-500italic.svg
        │   │   ├── ibm-plex-mono-v6-latin-500italic.ttf
        │   │   ├── ibm-plex-mono-v6-latin-500italic.woff
        │   │   ├── ibm-plex-mono-v6-latin-500italic.woff2
        │   │   ├── roboto-mono-v12-latin-regular.eot
        │   │   ├── roboto-mono-v12-latin-regular.svg
        │   │   ├── roboto-mono-v12-latin-regular.ttf
        │   │   ├── roboto-mono-v12-latin-regular.woff
        │   │   └── roboto-mono-v12-latin-regular.woff2
        │   └── js
        │       ├── feather.min.js
        │       ├── main.js
        │       └── themetoggle.js
        └── theme.toml

My question is, if I define a list.es.html / list.en.html and change the strings in the html, will it work or am I heading in the wrong direction?

Thanks in advance.

Edit 1:

FWIW, site is live at https://sinteti.co

2

Props for getting that far with your initial statement.

the approach with i18n is correct, but you also need to add the translation functionality to the templates.

the key feature for translation of static text is Localization with i18n and its (lang.Translate](
lang.Translate | Hugo) method

Archie has no i18n support. You will have to add the functionality to all places where it generates english text

copy the templates from the theme folder to your sites layout folder and implement the changes there.

in your template instead of

<h1> All translations </h1>

use

<h1>{{ T "alltrans" }} </h1>

if your translation key in i18n files is “alltrans”

or consider to switch to atheme that supports it. Customizing has a maintenence overhead.

1 Like
3

Thanks, yes, I don’t think I have the chops to code an i18n compliant version of the theme :stuck_out_tongue:
I had not noticed the themes section has a multilingual tag, so I’ll have to give this some thought.

I’ll take the props for achieving a good start, nonetheless I think they should go to the documentation maintainers. I have like 10 tabs open but reading and implementing is pretty straight forward.

1 Like
4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.