前回の記事では、投稿部分を多言語化する実装をしました。

今回は、フロントエンドで言語の切り替えを実装する処理を書きます。


手順

各ファイルへの追記

settings.pyに次のように書きます。


urls.pyに次のように書きます。
このurls.pyは、アプリケーションの下でなく、プロジェクト直下にいるやつです（path('admin/', admin.site.urls)などが書いてあるはず）。


base.htmlに次のように書きます。

ちょっと悪戦苦闘しましたが、日本語表示の時に「English」と出て、英語表示の時に「日本語」と出るように実装しました。

私はどこのページからでも見られるよう、headerをbase.htmlに書いているので、ここに置きましたが、もちろんどこのページにおいても大丈夫です。 


CSS設定

あとはCSSでいい感じに見た目を整えましょう。
私はlanguageのマークをGoogle Iconから取ってきてみました。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
の一行を読み込むだけで、素敵なアイコンをすぐ使えるのでおすすめ。


ということで、できました。
開発用ページのモックデータなので、英訳が適当なのはご容赦ください笑




まとめ

思ったよりサクッと言語切り替えが実装できて良かったです。

次回は、静的なページの多言語化をやっていきましょう。