-
Notifications
You must be signed in to change notification settings - Fork 207
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adding a language switch #98
Comments
Hi, zane-ng If anyone need this switch, he could use the solution above. |
Hello 已将原帖改成英文。 我自己原先也是把语言切换功能放到了侧栏中。但这样会有一个问题:语言切换在移动端侧栏不容容易看到,所以访客可能并不知道页面存在其他语言。所以为了将语言切换功能移到移动端主题顶栏、并保持样式和使用体验一致,桌面端也将按钮放在暗黑模式开关旁边。 当然另外的解决办法可能就是自动根据用户系统语言自动读取相应翻译(如中文则读取中文页面,否则读取英文页面)。但这样代码可能就很复杂,我也不会实现... |
For anyone interested in finding or getting their own solutions for a language switch, you may get inspirations from this discussion. |
Recognizing languages is not so hard.
As for buttons in mobile view, I think you are right. Maybe someday I would merge it into main branch. |
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:
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) andmobile-header.html
(for mobile version of the website). SearchDarkMode
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.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 thetheme/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.The text was updated successfully, but these errors were encountered: