ナビゲーションに英語表記を表示する覚書き
以下のサンプルのような 上段:日本語メニューと英語メニューを両方表示させるグローバルメニューを作ります。
まずは、Navigationモジュールでグローバルナビゲーション用のモジュールを作成します。
ラベルの値に日本語メニュー名と英語メニュー名を記入し区切りに _ を入力します。
(区切りの印になれば _ にこだわる必要はない!)
次にヘッダーテンプレートのグローバルメニュー設定でラベルの値を _ を校正オプション {hoge}[split('_', 順番号)]で_の前(日本語メニュー名)と後(英語メニュー名)切り分けて、日本語メニュー名と英語メニュー名をレイアウトに従って配置して表示を整えます。
<!-- BEGIN navigation:loop --> <!-- BEGIN ul#front --><ul><!-- END ul#front --> <!-- BEGIN li#front --><li {attr}><!-- END li#front --> <!-- BEGIN link#front --><a href="{url}" {attr} target="{target}"><!-- END link#front --> {label}[split('_',0)|raw]<!-- BEGIN_IF [{label}/lk/_] --><br><span style="font-size: 12px; font-weight:500;">{label}[split('_',1)|raw]</span><!-- END_IF --> <!-- BEGIN link#rear --></a><!-- END link#rear --> <!-- BEGIN li#rear --></li><!-- END li#rear --> <!-- BEGIN ul#rear --></ul><!-- END ul#rear --> <!-- END navigation:loop -->
- サンプルでは {hoge}[split('_', 順番号)]を利用しましたが、{hoge}[substring(文字列,切り抜く文字数)] を利用することも可能。このサイトのグローバルナビゲーションもこの応用で作成しました。
- スマホ用のテンプレートメニューの表示を整えるのも忘れずに。