Adding a language switch

[zane-ng]

If you would like to add a language switch to your website using this theme, copy and paste the following code to a location in the theme partials where you like the switch to be:

<!-- Add a toggle with Material Icon for translation. No toggle without translation.
Ref.: https://yonkov.github.io/post/how-to-make-a-mulilingual-website-with-hugo/ -->
        {{ if .IsTranslated }}
        {{ range .Translations }}
        <a class="material-icons pagination-action pagination-action-icon" href ="{{ .Permalink | relURL }}" >
                translate
        {{ if .IsPage }} {{ end }} 
        </a>
        {{ end }}
        {{ end }}

For example, if you'd like the language switch being next to the Dark Mode switch, open your custome extrabar.html (for desktop version of the website) and mobile-header.html (for mobile version of the website). Search DarkMode and you should find the relevant codes for the Dark Mode switch. Paste the above snippet before or after the Dark Mode Switch codes, according to your own preference. In the end, it should look similar to this:

The effect will be:

Real-time demo available at my personal blog.

However, as this switch is actually a hyperlink, you should also add the following CSS codes to your custom journal.scss, to make sure the style of the language switch is the same as the Dark Mode switch.

a.material-icons { /// Select all <a> elements with class .material-icons
  color: black;
  transition: all 0.3s linear !important;
  &:hover {
    text-decoration: none;
    color: $dark-accent !important;
  }
  &:visited {
    color: black; /// Make sure the language switch stay black even when visitors used it.
  }
}

In the above CSS style, you might want to select instead a.material-icons.pagination-action.pagination-action-icon if you want the style to affect the language switch only. This is because you may want to or have used Material Icons for other hyperlinks on your website.

Please do note that the above method has only be tested for bilingual website (i.e. my own blog). It's unknown what it will behave on website with three or more languages.

To understand the relevant Hugo basics, check out 'Multilingual Mode'.

It's also recommended that you copy the layout/partials from the theme/diary directory to the root directory of your website, and modify only those partials in your root directory. This way, you will have backups and references from the origianl theme, if you break something. You will also avoid losing your own customization if you update the theme via git submodule. Check out ['Hugo's Lookup Order'] (https://gohugo.io/templates/lookup-order/) to understand more.

[AmazingRise]

Hi, zane-ng 深色模式是我实现的。 这个功能挺好的，但是如果是我来做这个功能的话，我可能会把多语言切换放在左边的侧栏中。 我觉得可以把这个 Issue 翻译成英文，然后 pin 上去？ 有需要的朋友可以直接取走现成方案。

If anyone need this switch, he could use the solution above.

[zane-ng]

Hello

已将原帖改成英文。

我自己原先也是把语言切换功能放到了侧栏中。但这样会有一个问题：语言切换在移动端侧栏不容容易看到，所以访客可能并不知道页面存在其他语言。所以为了将语言切换功能移到移动端主题顶栏、并保持样式和使用体验一致，桌面端也将按钮放在暗黑模式开关旁边。

当然另外的解决办法可能就是自动根据用户系统语言自动读取相应翻译（如中文则读取中文页面，否则读取英文页面）。但这样代码可能就很复杂，我也不会实现...

[zane-ng]

For anyone interested in finding or getting their own solutions for a language switch, you may get inspirations from this discussion.

[AmazingRise]

Recognizing languages is not so hard. By using JavaScript: https://stackoverflow.com/questions/3894488/is-there-anyway-to-detect-os-language-using-javascript

Hello

已将原帖改成英文。

我自己原先也是把语言切换功能放到了侧栏中。但这样会有一个问题：语言切换在移动端侧栏不容容易看到，所以访客可能并不知道页面存在其他语言。所以为了将语言切换功能移到移动端主题顶栏、并保持样式和使用体验一致，桌面端也将按钮放在暗黑模式开关旁边。

当然另外的解决办法可能就是自动根据用户系统语言自动读取相应翻译（如中文则读取中文页面，否则读取英文页面）。但这样代码可能就很复杂，我也不会实现...

As for buttons in mobile view, I think you are right. Maybe someday I would merge it into main branch. Thanks for your support!