Navigation List Tag

Description: Used to get the page navigation list

Usage:{% navList 变量名称 %}If the variable is defined as navs{% navList navs %}...{% endnavList %}It can also be defined as other variable names, defined after, it needs to be consistent with the variable name used in the following for loop.

The parameters supported by navList are

• Navigation list IDtypeId typeIdNavigation category ID for the backend, defaulttypeId=1If multiple navigation categories are set in the backend, you can specify the call bytypeId.
• Site IDsiteId siteIdGenerally, it is not necessary to fill in, if you use the multi-site management on the backend to create multiple sites and want to call data from other sites, you can specifysiteIdTo call the data of the specified site.

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

navs is an array object, therefore it needs to be usedforloop to output

item is the variable within the for loop, the available fields are:

• Navigation titleTitle
• Sub titleSubTitle
• Navigation descriptionDescription
• Navigation linkLink
• Corresponding category IDPageIdIf this navigation menu is selected for a category, it exists
• Is the current linkIsCurrent
• The sub-navigation listNavListThe sub-navigation also has the same field as item.

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. Display dropdown categories in navigation and product documents under the categories. As shown in the figure:

Invoke code example, this call needs to be set up with secondary navigation already in place in the background (the code does not include 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. Display the dropdown category on the navigation and show its subcategories under the category, if any. As shown in the figure:

Invoke code example, this call needs to be set up with secondary navigation already in place in the background (the code does not include 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>