Navigation List Tag

Description: Used to get the page navigation list

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

The supported parameters of navList are

  • Navigation list IDtypeId typeIdFor 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 content is output using a for loop in between.

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

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

  • Navigation titleTitle
  • SubtitleSubTitle
  • Navigation descriptionDescription
  • Navigation linkLink
  • Corresponding category 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:

detail-6 detail-7

Call code example, the call needs to be set up in the background with the second-level navigation already in place (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. Show drop-down categories on the navigation and show its lower-level categories under the category, if not, not. As shown in the picture:

detail-8

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