Navigation List Tag

Description: Used to get the page navigation list

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

The parameters supported by navList are:

• Navigation List IDtypeId typeIdFor the navigation category ID of the backend, defaulttypeId=1If multiple navigation categories are set in the backend, you cantypeIdto specify the call.
• Site IDsiteId siteIdGenerally, it is not necessary to fill in. If you have created multiple sites using the multi-site management on the backend and want to call data from other sites, you can do so by specifyingsiteIdTo implement the call to data from a specified site.

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

navs is an array object, so it needs to be usedforin a loop to output

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

• Navigation titleTitle
• Sub titleSubTitle
• Navigation descriptionDescription
• Navigation linkLink
• Category ID CorrespondingPageIdExists if this navigation menu is selected for a category
• Whether the current linkIsCurrent
• List of sub-navigationNavListSub-navigation items also have 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 drop-down categories on navigation and product documents under the categories. As shown in the figure:

Invoke code example, the invocation needs to be set up in the background with the second-level navigation already configured (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 dropdown categories on the navigation, and show its subcategories under the category, if any. As shown in the figure:

Invoke code example, the invocation needs to be set up in the background with the second-level navigation already configured (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>