In AnQiCMS, efficiently managing and displaying website navigation is one of the core tasks in website operation.We often need to dynamically load corresponding content based on the navigation menu items, such as displaying a list of articles under a certain category, or jumping to a specific category page.navListIn the loop, accurately obtain the classification ID corresponding to each navigation link. As an experienced AnQiCMS operator, I will elaborate in detailitem.PageIdin this scenario.
Understanding navigation list anditem.PageId
Firstly, let's review the navigation list tags in AnQiCMSnavListThis label's main function is to output the navigation menu items configured on the back-end. When we use them in the template,{% navList navs %}...{% endnavList %}with such a structure,navsThe variable will contain a series of navigation items, each of which can be accessed in the loop.itemThe variable can be used to access its properties.
One of the very critical properties isitem.PageId.This property is used to store the internal content ID associated with the current navigation item.item.PageIdIt will 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),item.PageIdThe value may be 0, indicating that it is not directly associated with a specific category or single page ID.
item.PageIdThe existence provides great convenience for us to implement dynamic navigation menus.It allows us to not only display navigation titles and links but also to retrieve and render more content based on this ID without needing complex logic judgments or hard-coded IDs in the template.
getitem.PageIdCombine with other tags for use
To benavListObtain and utilize within a loopitem.PageIdIts basic method is to access directly in the loop body{{ item.PageId }}However, a single ID value is usually not enough to meet our needs, and we are more inclined to use this ID to call other content tags to achieve richer content display.
Here is a typicalnavListLoop structure, which 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 access{% if item.PageId > 0 %}JudgmentPageIdWhether it is a valid value to avoid processing irrelevant links. Once confirmedPageIdValid, we can 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
Assuming our navigation menu has an item linking to a product category, we want to display its sub-navigation when hovering or clicking on the navigation item, and also dynamically load and display the latest products under the product category.item.PageIdIt is particularly important.
Please see the following example code for implementing the dropdown of the product navigation menu 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 make use ofsubItem.PageIdasarchiveListTagscategoryIdParameters, thus accurately obtaining the product list under the category. This makes navigation not only simple links but also a dynamic content entrance.
Concluding remarks
Passitem.PageId，AnQiCMS的模板系统在flexibility和content dynamics方面表现出色。As a website operator, proficiently utilizing this feature can help us build a more intelligent and user-friendly navigation system, thereby effectively attracting and retaining users.item.PageIdThe key to obtaining a valid ID.
Frequently Asked Questions
Q1: Why do I getnavListin the loopitem.PageIdalways 0?A1:item.PageIdOnly an effective category ID or single page ID will be available when the navigation item's 'Link Type' is set to 'Category Page Link' or 'Single Page Link' in the background 'Website Navigation Settings'. If your navigation item is an external link, an integrated home page link, or not associated with a specific category/single 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 it get the ID of a single page?A2: Yes,item.PageIdThe design is to uniformly represent the internal content ID associated with the 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.PageIdThe ID will be of this single page. In the template, you can decide how to use it by judging the type of navigation item or by context.PageId.
Q3: How to determine whether a navigation item links to a category or a single page?A3:navListThe tag itself does not directly provide a field to distinguish between category and single-page types.通常，You can usually follow the settings habits of the background, such as agreeing that certain parent navigation links only link to categories, while some special navigation links to single pages.URL别名Rule, then parse it in the templateitem.LinkThe URL structure helps in judgment. It is recommended to configure navigation in the background, if a certainPageIdis a category ID, then usecategoryListorarchiveListetc. tags, if it is a single page ID, then usepageDetailTags, let the template adapt itself according to the data type.