Search code examples
translationhugo

How to translate a config file in Hugo?

I'm using Hugo for the first time and I'm having troubles with translations.

More specifically, I'm using the hugo-theme-bootstrap theme. In config\_default, I have a file named author.toml that contains information like the author's name, bio, city, etc. It looks like this:

name = "Pascal Bergeron"
avatar = "images/profile.jpg"
bio = "Description française."
location = "Montréal"

The issue is that this file is used for both the English and French versions of my website. However, I need the bio and location fields to change according to the language. I've tried creating a file named author.fr.toml, but its settings end up being ignored. In fact, if I even rename author.toml to author.en.toml, the settings will be ignored for the English language. It's as if I can only have a author.toml file. This is strange because I can translate all other files in my config folder that way (I have a params.en.toml and a params.fr.toml file for instance).

I've done some digging in the layouts folder of my theme and I've found the file where the author.toml is used to create the HTML code. It looks like this:

{{- with .Site.Author -}}
<section class="profile surface row">
  <div class="col-xl-6 d-flex align-items-center justify-content-center">
    <img class="profile-avatar img-fluid" src="{{ absURL (default "images/profile.webp" .avatar) }}" alt="{{ .name }}" loading="lazy">
  </div>
  <div class="col-xl-6">
    <h5 class="profile-name my-2">{{ .name }}</h5>
    {{- with .bio -}}
    <div class="profile-bio mb-2">{{ . }}</div>
    {{- end -}}
    {{- with .company -}}
    <div class="profile-company mb-2"><i class="fas fa-fw fa-building"></i>{{ . }}</div>
    {{- end -}}
    {{- with .location -}}
    <div class="profile-location mb-2"><i class="fas fa-fw fa-map-marker-alt"></i>{{ . }}</div>
    {{- end -}}
    {{- if .about -}}
      <div class="profile-about mb-2"><i class="fas fa-fw fa-info-circle"></i><a target="_blank" href="{{ .about }}">{{ i18n "about_me" }}</a></div>
    {{- else -}}
      {{- with $.GetPage "about" -}}
      <div class="profile-about mb-2"><i class="fas fa-fw fa-info-circle"></i><a href="{{ .Permalink }}">{{ .Title }}</a></div>
      {{- end -}}
    {{- end -}}
  </div>
</section>
{{- end -}}

How can I have a author.toml file for each language?

Solution

  • (TLDR - The site author set-up the author data as 1 config file - i.e. Theme is built for 1 author for the entire site).

    Hello Pascal, so, really appreciated you took the time to answer me. To clarify:

    1. This isn't a "hugo" thing, but the way this chap built this theme.

    2. You are going to have to modify his theme (or reach out to him). The specific file in question, as you point out, I believe is profile.html in sidebar:

      {{- if .Site.Author -}}
      {{- $layout := default "" .Site.Author.params.layout -}}
      {{- if eq $layout "compact" -}}
      {{- partial "sidebar/profile/compact" . -}}
      {{- else -}}
      {{- partial "sidebar/profile/default" . -}}
      {{- end -}}
      {{- end -}}

    If you follow the various partials this calls, i.e. down the rabbit whole you will find an example (this is one of many), like you describe and quote in your question, it has the specific comment {{ - with .Site.Author - }} meaning, it's looking for exactly 1 file, with a specific name.
    [https://gohugo.io/content-management/multilingual/][1]
    covers how to set-up a hugo multilingual - and there is SUPPOSED to be 1 Config file per site (which has it's own meaning in Hugo - see above page) Point being, this is a theme issue, and I would suggest asking the theme creator to adapt edit. My suggestion would be if the theme creator isn't helpful - would be to remove the dependency for the TOML file, and simply reference a headless bundle which has the author data, and as the theme has i18n, integrate the two (see above link) so that their is a headless bundle per language.