0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

多言語環境におけるHugoテンプレートでのURL生成方法

Posted at

自分はHugoを使った個人ブログを運営しています。

テンプレートを選ぶ際、ポートフォリオ兼テックブログ、ついでに英語と中国語の練習としての場も兼ね備えたい、と思っていました。
この条件で探したところ、現在も使用しているhugo-profileにたどり着きました。

このhugo-profileなのですが、テンプレート部分で、{{ .Site.BaseURL }}を使用してリンク先としている個所が散見されました。
公式ドキュメントにも書いてある通り、これはHugoのコンフィグファイル(hugo.yaml)に記載してあるbaseURLの値が埋め込まれます。
このサイトを例に挙げると、{{ .Site.BaseURL }}#aboutは、https://techblog.luxunworks.com/#aboutを指すことになります。

前述した通り、このサイトは英語と中国語の練習の場も兼ねているので、多言語対応となっていて、Hugo.yamlでdefaultContentLanguageInSubdirをtrueにしています。
つまり、URLの形式は「ドメイン(baseURL)+ 言語名 + コンテンツへのパス」となっています。
一方で、{{ .Site.BaseURL }}はbaseURLのみを指します。

そのため、例えば中国語版のサイトを開いている時にhttps://techblog.luxunworks.com/#aboutへアクセスすると、hugo.yamlのdefaultContentLanguageに設定してあるenが自動的に設定されます。

しかし#aboutは無視されてしまうので、結果としてhttps://techblog.luxunworks.com/en/#aboutではなくhttps://techblog.luxunworks.com/en/にリダイレクトしてしまいます。

デザインは気に入っていただけに、このあたりの挙動をどうしようかと悩んでいたのですが、ドキュメントを見ると、以下の文言が書かれていました。

There is almost never a good reason to use this method in your templates. Its usage tends to be fragile due to misconfiguration.

Use the absURL, absLangURL, relURL, or relLangURL functions instead.

つまり、このメソッドはテンプレートで使わず、absURL, absLangURL, relURL, relLangURLを使え!ということですね。
実際にabsLangURLのドキュメントを見てみると、どうやら言語サブディレクトリ付きで絶対URLを生成してくれるとのことでした。

早速テンプレートをカスタマイズしたところ、想定した通りの挙動となり、リンク先がhttps://techblog.luxunworks.com/en/#aboutのように設定されました。

同じような事象に悩まされている方は、是非absURL, absLangURL, relURL, relLangURLを使ってみてください!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?