多言語対応したWebサイトの表示言語を切り替える方法を、Nanoc4で用意されている方法を使わずに実装した話。
Nanocに用意されている方法
詳しくは、公式マニュアルを。
なんか、とにかくめんどくさそうなので自前で実装した。
実装した方法
サイト構成を工夫
content直下に、言語ごとのフォルダを作成。
各フォルダ内には、同一名のファイル・フォルダが生成されるように。
content/ jp/ index.html hogehoge/ index.html en/ index.html hogehoge/ index.html
URLとしては
//****.com/jp/index.html //****.com/jp/hogehoge/ //****.com/en/index.html //****.com/en/hogehoge/
みたいな感じに。(表示言語によって、最初のサブディレクトリが変わるように。)
javascriptで表示言語切替機能を実装
javascript(jquery)を用いて、表示言語を選択する要素をクリックした際に、URLが切り替わるように。(コード自体は、もっとスマートに書けよって感はある。ま、とりあえず現状2言語なのでこれで。)
表示言語を切り替えるための要素には、英語に切り替える要素には idにenを。日本語に切り替える要素にはidにjpを指定する仕様。
$(function() { $(document).on('click', '#en', function() { var x = location.href; location.href = x.replace(/\/jp\//, "/en/"); }); $(document).on('click', '#jp', function() { var x = location.href; location.href = x.replace(/\/en\//, "/jp/"); }); });
表示言語切替部分は、テンプレートに切り出して再利用可能に。特定のURLに依存していないので、使いまわせる。