10. ナビゲーションを変更できるようにする
次はナビゲーションを変更できるようにしてみます。ナビゲーションには専用のナビゲーションモジュール ( Navigation ) が用意されています。
<nav class="navbar">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="list.html">一覧</a></li>
<li class="stay"><a href="entry.html">詳細</a></li>
</ul>
</nav>
管理ページ > モジュールID から「モジュールIDを作成」から作成します。
モジュールを Navigation を選択し、id を global-nav とし、名前は「グローバルナビゲーション」のように人が認識できるように名前をつけてください。また、テンプレートのモジュールにも id="global-nav" をつけてください。
<!-- BEGIN_MODULE Navigation id="global-nav" -->
略
<!-- END_MODULE Navigation -->
ナビゲーションには、現在位置が分かるように class="stay" をつけて赤い線がつくようにスタイルが設定されています。ここを動的に処理しようとするとテンプレートの HTML だけでは書くことができません。 a-blog cms が標準で用意している JavaScript 現在位置によって異なるクラスを付与する ( link match location ) を活用します。
| リンク名 | URL | 属性 |
|---|---|---|
| ホーム | %{HOME_URL} | class="js-link_match_location-full" |
| 会社概要 | %{HOME_URL}company/ | class="js-link_match_location" |
| お知らせ | %{HOME_URL}news/ | class="js-link_match_location" |
| 物件情報 | %{HOME_URL} realestate/ | class="js-link_match_location" |
| 採用情報 | %{HOME_URL}recruit/ | class="js-link_match_location" |
属性のところにクラスを設定する事で link_match_location の JavaScript が動作するようになります。
モジュールID の復習
ここでモジュールIDについては終わりになりますので、少し振り返ってみましょう。これまでに以下の5つの設定を行ってきています。
| モジュールID | モジュール |
|---|---|
| top-headline | Entry_Headline |
| entry-list | Entry_List |
| index-summary | Entry_Summary |
| global-nav | Navigation |
| topicpath | Topicpath |
基本、モジュールをテンプレートに貼る際には、モジュールID を設定するのが基本です。しかし、今回 Entry_Body についてはモジュールIDを設定していません。
Entry_Body と Entry_Headline は、少し特殊でモジュールID化していない時に全ての引数が有効(チェックボックスにチェックがある状態)がデフォルト値になっています。また、モジュールID化した際には他のモジュールと同様の動きになります。
残る作業として、サブカラムのバナーと、トップページのスライダーもモジュール化して更新可能にしてもいいかと思います。お時間がある方はチャレンジしてみてください。バナーは Banner モジュールを利用するかと思いますが、トップのスライダーも一般的には Banner モジュールを利用することが多いです。もちろんモジュールIDの設定も必要になります。