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 ID
typeId
typeId
For the navigation category ID of the background, defaulttypeId=1
, if multiple navigation categories are set in the background, you can usetypeId
to specify the call. - Site ID
siteId
siteId
Generally, 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 itsiteId
To 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 usedfor
Loop to output
item is the variable within the for loop, the available fields are:)
- Navigation title
Title
- Subtitle
SubTitle
- Navigation description
Description
- Navigation link
Link
- Corresponding category ID
PageId
If the navigation menu is selected, then - Is the current link
IsCurrent
- Next-level navigation list
NavList
The 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
- Show drop-down categories on the navigation and display product documents under the categories. As shown in the picture:
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>
- 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, 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>