読者です 読者をやめる 読者になる 読者になる

黙々とC#

"In a mad world of VBA, only the mad are sane" 『VBAという名の狂った世界で狂っているというのなら私の気は確かだ』


Nanoc4で多言語対応(表示言語切替)を自前のコードで実現してみた

f:id:d_ymkw:20170316234838j:plain

多言語対応した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に依存していないので、使いまわせる。