Navigationモジュールを使ったのでまとめてみた🎓

さいしょに

現在、a-blog cmsを使って静的なHTMLを動的にする作業を行なっているのですが、Navigationもジュールを学んだのでその復習をしていこうと思います。

Navigationモジュール

画像のようなナビゲーションがWebサイトにある場合、Navigationモジュールを使います。

<!-- BEGIN_MODULE Navigation -->
<nav class="mt-10 mx-auto max-w-7xl w-5xl">
    @include("/admin/module/setting.html")

    <!-- BEGIN navigation:loop -->
        <!-- BEGIN ul#front --> <ul class="flex justify-between items-center"> <!-- END ul#front -->
            <!-- BEGIN li#front --> <li {attr} class="c_{level}"> <!-- END li#front -->
                <!-- BEGIN link#front --> <a href="{url}" {attr} target="{target}"> <!-- END link#front -->
                <!-- BEGIN label#veil --> {label}[raw] <!-- END label#veil -->
                <!-- BEGIN link#rear --> </a> <!-- END link#rear -->
            <!-- BEGIN li#rear --> </li> <!-- END li#rear -->
        <!-- BEGIN ul#rear --> </ul> <!-- END ul#rear -->
    <!-- END navigation:loop -->

</nav>
<!-- END_MODULE Navigation -->

次に管理画面で設定をしていきます。

番外編

番外編としてよくフッターの部分で見られるサイトマップバージョンもまとめていこうと思います。

<!-- BEGIN_MODULE Navigation -->
<div class="mt-10 mx-auto max-w-7xl w-5xl">
    @include("/admin/module/setting.html")
    <div class="flex justify-between items-center">
    
        <!-- BEGIN navigation:loop -->
        <nav>
            <!-- BEGIN ul#front --> <ul> <!-- END ul#front -->
                <!-- BEGIN li#front --> <li {attr} class="c_{level}"> <!-- END li#front -->
                    <!-- BEGIN link#front --> <a href="{url}" {attr} target="{target}"> <!-- END link#front -->
                    <!-- BEGIN label#veil --> {label}[raw] <!-- END label#veil -->
                    <!-- BEGIN link#rear --> </a> <!--END link#rear -->
                <!-- BEGIN li#rear --> </li> <!-- END li#rear -->
            <!-- BEGIN ul#rear --> </ul> <!-- END ul#rear -->
        </nav>
        <!-- END navigation:loop -->

    </div>
</div>
<!-- END_MODULE Navigation -->

次に管理画面で設定をしていきます。

さいごに

今回はNavigationモジュールの使い方と番外編としてフッターによくあるサイトマップをどのようにモジュールでどのように囲んだりするのか、管理画面でどのような設定をすればいいかをまとめました。
これからも初めて使うモジュールがまだまだたくさんあると思うので勉強していこうと思います。