A single page in a different language

I have a blog that is in Afrikaans. However, there is a single page that is in English and there is no Afrikaans alternate version for that page. Now there are a lot of info in creating multilingual sites, but this is not a multilingual site. The language (Afrikaans) is set in the site-wide config.toml. I attempted to set the language of the single English page in the header content at the top of the page content markdown file by trying different language settings for example lang = en_za but nothing I tried so far is changing the language for the rendered html for that page.

  • Can it be done to set a specific page to a different language without using a multilingual setup? I strongly suspect the answer is no.
  • And if it can be done, how?

TIA

It kind of depends what you mean by “a different language”. There is nothing preventing you from not using the built-in language features in Hugo, e.g. write content in English, Afrikaans and list them all. But if you want it to work with the language support in Hugo (i18n files, translation mapping etc.), you need to configure each language.

What are you trying to change? If it is the lang, you can just make a shortcode to add it as needed. What all are you trying to change?

When viewing the HTML source for the served/generated page for the alternate language page, the language in the html header is still indicated as:

<!DOCTYPE html> <html lang=“af-za”>

This happens regardless of what I set in the header portion of the individual page markdown file. I want the single English page to override the default site-wide lang=“af-za” with lang=“en-za”.

Hope this helps.

In your template, or via a shortcode, you could set the HTML lang attribute for that specific page

I forgot about single page templates, something that I skipped since I never used it. I’ll try a single page template for that page in order to override the site-wide language code.

Thanks

Is your entire page in English (header, footer, menu)? Or just the main text?

Always use a language attribute on the html tag to declare the default language of the text in the page. When the page contains content in another language, add a language attribute to an element surrounding that content.

You can put a div in your content file, and set the language code there.

3 Likes

Thanks, using a div to set the language code is an option that I did not think about. I will explore that further.

I will revisit the template option when I have more time. It is complete overkill t effectively create a multilingual site for the purpose of only the content of a single page being in a different language, but it will take far less time than I have already spent.

Through a shortcode and the Scratch function I have managed to set the .Site.Language variable to “en”, but that is not what I want either. Firstly, the shortcode is called in the body of the page by which time the default language is already set above that. Secondly, I have now changed the site wide language which will surely affect pages rendered subsequently.

This is what I have done - saved the source code for that page and changed the language in that HTML code. I then created a script I can call whenever I want to deploy the site via rsync and then also upload that specific page to the correct location, overwriting the page generated by Hugo. It’s a hack, but it will keep the Google indexing spider happy.

To me it is an issue that I cannot override a specific value that appears in the HTML header section of any specific page rendered by Hugo. Until I have studied the documentation, and especially the Hugo options for Hugo template variables in more detail, I cannot say with certainty whether such functionality exists in Hugo or not. What does appear to be the case is that all variables relating to language is set on a site-wide level in the format of .Site.language and that accessible variables that can override language elements outside of the scope of the page content, such as .Page.Language style variables, seemingly do not exist. However, since I have not viewed the Hugo source code in detail, I cannot categorically state this as a fact, this only appears to me to be the case.

Per @maiki’s tip, here’s a basic shortcode that may meet your needs

<div lang="{{ .Get 0 }}">
{{ .Inner }}
</div>

Then use it like

{{< lang "en-za" >}}
Some text in another language here. 
{{< /lang >}}

Written from phone so untested

Thanks a million, I applied this and it works perfectly.