In AnQiCMS, efficiently managing and displaying website navigation is one of the core tasks of website operation.We often need to dynamically load the corresponding content based on the navigation menu items, such as displaying the list of articles under a specific category, or jumping to a specific category page.This involves how tonavListIn the loop, accurately obtain the classification ID corresponding to each navigation link. As an experienced AnQiCMS operator, I will elaborate in detail.item.PageIdIn this scenario.
Understand the navigation list withitem.PageId
First, let's review the navigation list tags in AnQiCMSnavList. This tag is mainly used to output the website navigation menu items configured in the background. When we use it in the template,{% navList navs %}...{% endnavList %}this structure,navsA variable will contain a series of navigation items, each of which can be traversed in a loopitemto access its properties.
One very critical property isitem.PageId. This property is used to store the internal content ID associated with the current navigation item.According to the configuration of AnQiCMS backend "Website Navigation Settings", if a navigation menu item is set to "Category Page Link" or "Single Page Link", thenitem.PageIdwill be assigned the corresponding category or single page ID. It should be noted that if the navigation item is an external link or an AnQiCMS built-in link without a specific ID (such as the home page link), thenitem.PageIdThe value may be 0, indicating that it is not directly associated with a specific category or single page ID.
item.PageIdThe presence provides great convenience for us to implement dynamic navigation menus.It allows us to not only display navigation titles and links but also to fetch and render more content based on this ID without needing complex logical judgments or hard-coded IDs in the template.
Obtainitem.PageIdCombined with other tags for use
To benavListRetrieve and utilize within the loopitem.PageIdThe basic method is to access it directly within the loop{{ item.PageId }}However, a single ID value is usually not enough to meet our needs. We are more inclined to use this ID to call other content tags to achieve richer content display.
This is a typicalnavListA loop structure that demonstrates how to accessitem.PageId:
<ul>
{% navList navs %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{# 如果当前导航项关联了分类或单页面，item.PageId会有一个有效的值 #}
{% if item.PageId > 0 %}
<p>对应的ID是: {{ item.PageId }}</p>
{# 在这里可以根据item.PageId来调用其他内容 #}
{% endif %}
{% if item.NavList %} {# 如果有子导航菜单 #}
<dl>
{% for inner in item.NavList %}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %}
<p>子导航对应的ID是: {{ inner.PageId }}</p>
{# 同样，可以在这里根据inner.PageId调用其他内容 #}
{% endif %}
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
In the above example, we first go through{% if item.PageId > 0 %}the judgment.PageIdIs a valid value to avoid processing unrelated links. Once confirmedPageIdValid, we can then pass it as a parameter to other content tags, such asarchiveList(Document list tag) orcategoryList(Category list tag).
Combineitem.PageIdDisplay the content under the category.
Suppose our navigation menu has an item linking to a product category, and we want to display its sub-navigation when hovering or clicking on the navigation item, as well as dynamically load and display the latest products under the product category. At this time,item.PageIdit becomes particularly important.
Please see the following code example for implementing the product navigation menu dropdown and displaying the latest products:
<nav>
<ul>
{% navList mainNavs with typeId=1 %} {# 假设typeId=1是主导航 #}
{% for item in mainNavs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 如果有二级导航 #}
<ul class="sub-nav">
{% for subItem in item.NavList %}
<li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{# 如果子导航项链接到分类，我们可以使用其PageId来获取该分类下的产品 #}
{% if subItem.PageId > 0 %}
{% archiveList products with type="list" categoryId=subItem.PageId moduleId="2" limit="5" %} {# moduleId="2" 假设是产品模型ID #}
{% if products %}
<ul class="product-list">
{% for product in products %}
<li>
<a href="{{ product.Link }}">
<img src="{{ product.Thumb }}" alt="{{ product.Title }}">
<span>{{ product.Title }}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% elif item.PageId > 0 %} {# 如果一级导航项直接链接到分类，也可以显示内容 #}
{% archiveList topProducts with type="list" categoryId=item.PageId moduleId="2" limit="3" %}
{% if topProducts %}
<ul class="top-product-list">
{% for product in topProducts %}
<li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In the above code, we usesubItem.PageIdasarchiveListlabel'scategoryIdParameters, thus accurately obtaining the product list under the category. This makes navigation not only a simple link but also a dynamic content entry.
Conclusion
Byitem.PageId，AnQiCMS template system excels in flexibility and content dynamics.As a website operator, proficiently utilizing this feature can help us build a more intelligent, user-friendly navigation system, thereby effectively attracting and retaining users.Remember to select "Category Page Link" or "Single Page Link" in the background settings to ensureitem.PageIdThe key to obtaining a valid ID.
Frequently Asked Questions
Q1: Why am I gettingnavListretrieved in the loopitem.PageIdalways 0?A1:item.PageIdOnly when the navigation item's link type is set to 'Category Page Link' or 'Single Page Link' in the background 'Website Navigation Settings', there will be a valid category ID or single page ID. If your navigation item is an external link, an embedded home page link, or not associated with a specific category/page, PageIdIt will be 0. Please check your navigation backend configuration to ensure the link type is correct.
Q2:item.PageIdCan it only be used for category ID? Can you get the ID of a single page?A2: Yes,item.PageIdIt is designed to uniformly represent the internal content ID associated with a navigation item, which can represent both category ID and single page ID. When you link a navigation item to a single page in the background,item.PageIdIt will be the ID of this single page. In the template, you can decide how to use this by judging the type of navigation item or by the context.PageId.
Q3: How to determine if a navigation item links to a category or a single page?A3:navListThe tag itself does not provide a field for distinguishing between categories and single-page types.Generally, you can follow the habits of background settings, such as agreeing that certain parent navigation links only to categories, while some special navigation links to single pages.In practical applications, if you need to distinguish strictly, you can consider adding marks in the navigation 'display name' or 'navigation description', or setting different settings for categories and single-page pagesURL别名Rule, then parse in the template.item.LinkThe URL structure to assist in judgment. It is more recommended to configure navigation in the background if certainPageIdis a category ID, then usecategoryListorarchiveListsuch tags, if it is a single page ID, then usepageDetailLabel, let the template adapt itself according to the data type.