Hugo displays different content according to language

This site has enabled multi-language support, mainly providing Simplified Chinese, Traditional Chinese and English. Different languages serve users in different regions. Since we have recently opened a WeChat public account and have done simple development work on the public account, we can provide some text question and answer services, and we will gradually add functions in the future.

So I wanted to put the official account infographic at the end of the article, and only inform Simplified Chinese readers (after all, not many people in other regions use WeChat) for further communication.

So the question arises, how to provide different content to users of different languages under hugo?

Here's my simple solution:

1. Determine where to place content

I looked at the layout of the article page, and it is more appropriate to place it between "Signature" and "Copyright Statement", that is, at the end of the content.

The related files of hugo theme layouts/_default/single.html are changed as shown below

Different skins, readers need to modify them according to their own conditions.

2. Display specific content based on different languages

This step is the core. If it is determined that the current language is Simplified Chinese zh-cn, the WeChat official account picture will be displayed.

layouts/partials/wechat.html The code is as follows:

1{{ if eq .Site.LanguageCode "zh-cn" }}
2     <img src="/logos/qr_wechat.webp" class="" />
3     <small> Simplified Chinese readers are welcome to follow the WeChat official account and leave messages for communication. </small>
4{{ end }}

If the current page is Chinese, the string returned by the variable .Site.LanguageCode is equal to zh-cn. For detailed information, please see Hugo Official Document.

If you write .Site.Language, it returns an object. The object and the string are not equal. If the logic is wrong, the correct branch will not be reached.

.Site.Language

Returns the language object for the given site.

{{ .Site.Language }} can be directly rendered into zh-cn on the template, but it cannot be used in if judgments😮‍💨. It will be confusing if you don’t pay attention to these details. I stepped on the pit and debugged it. It took a while to figure it out.

Readers can try switching the language at the end of the article on this site. Only when switching to Simplified Chinese will the corresponding pictures be displayed. The function is simple, but it is really effective.

After understanding the principle, you can display different content for users of different languages according to the situation.

Special note: Under normal circumstances, this site provides the same content to users of all languages and is equally open to the public. But this does not conflict with adapting to local conditions and doing as the locals do. After all, the world is colorful.