Navigation List Tag

Description: Used to get the page navigation list

How to use:{% navList 变量名称 %}If you define a variable as navs{% navList navs %}...{% endnavList %}, it can also be defined as other variable names. After definition, it needs to be consistent with the variable names used in the for loop below.

The supported parameters of navList are

• Navigation List IDtypeId
typeIdIt is the navigation category ID of the background, defaulttypeId=1, if multiple navigation categories are set in the background, you can usetypeIdto specify the call.
• Site IDsiteId
siteIdGenerally, there is no need to fill in it. If you use the background multi-site management to create multiple sites and want to call data from other sites, you can specify itsiteIdTo implement the data calling the specified site.

navList needs to use the endnavList tag to indicate the end, and use the for loop to output the content in the middle.

navs is an array object, so it needs to be usedforLoop to output

item is a variable in the for loop body. The available fields are:

• Navigation titleTitle
• SubtitleSubTitle
• Navigation descriptionDescription
• Navigation linkLink
• Corresponding Class IDPageIdIf the navigation menu is selected, then
• Is the current linkIsCurrent
• Next-level navigation listNavListThe same field as item is included in the lower navigation.

Code Example

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %}
            <dl>
                {%- for inner in item.NavList %}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

Common usage examples

1. Show drop-down categories on the navigation and display product documents under the categories. As shown in the picture:

Call code example, this call needs to be based on the background that the secondary navigation has been set (the code does not contain css style control)

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                {% if products %}
                <ul class="nav-menu-child-child">
                    {% for item in products %}
                    <li><a href="{{item.Link}}">{{item.Title}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endarchiveList %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

1. Show drop-down categories on the navigation and show its lower-level categories under the category, if not, not. As shown in the picture:

Call code example, this call needs to be based on the background that the secondary navigation has been set (the code does not contain css style control)

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId > 0 %}
                    {% categoryList categories with parentId=inner.PageId %}
                    {% if categories %}
                    <ul>
                        {% for item in categories %}
                        <li>
                            <a href="{{ item.Link }}">{{item.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>