Siven's Corner

Hugo 添加中英双语页面

1.修改现有的 Hugo.toml 文件,我需要的是中英文对照,所以就添加以下内容:

# 默认初始语言
defaultLanguage = "en-US"         # 设置默认语言为英文

# 多语言配置
[languages]
  [languages.zh]
    languageName = "zh-CN"
    contentDir = "content"
    weight = 2
    title = "赛文的角落"
    languageCode = "zh-CN"
    [languages.zh-cn.permalinks]
      blog = "/cn/p/:slug"
      tags = "/cn/blog/:slug"
      
  [languages.en]
    languageName = "English"
    contentDir = "content"
    weight = 1
    title = "Siven's Corner"
    languageCode = "en-US"
    [languages.en.permalinks]
      blog = "/en/p/:slug"
      tags = "/en/blog/:slug"

# 全局参数配置
[params]
  # 语言切换菜单配置
  languageMenu = [
    { name = "cn", url = "/zh-cn/", weight = 1 },
    { name = "en", url = "/en/", weight = 2 }
  ]

2.语言切换菜单配置,把语言切换集成到导航栏中,通过点击导航栏来切换语言,当对应页面没有对应的翻译时,就显示默认语言的页面。

{{ range .Site.Menus.main }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
<!-- 添加语言切换链接 -->
{{ if .IsTranslated }}
  {{ range .Translations }}
    <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
  {{ end }}
{{ else }}
  {{ range .Site.Home.AllTranslations }}
    {{ if ne .Language.Lang $.Site.Language.Lang }}
      <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
    {{ end }}
  {{ end }}
{{ end }}

3.修改现有的博文的后缀,这个根据第一步的配置来,比如第一步我的配置是:

[languages.zh]
[languages.en]

所以我的中英文博文对应的后缀分别是 aaa.zh.md 和 aaa.en.md,通过后缀来区分对应的语言文件。

上面的配置只是做到了简单双语功能,还有很多细节需要完善,比如标签的展示、分类的展示、搜索功能等,这些页面都要做到适配,才能达到较好的效果。

#Hugo