The following will detail how to customize navigation categories in the Anqi CMS to achieve footer or sidebar navigation.
Understanding the navigation system of Anqi CMS
Create custom navigation categories
To implement footer or sidebar navigation, you first need to create a separate navigation category for these areas.
You need to log in to the background management interface of AnQi CMS, then find and click on the "Background SettingsIn the navigation settings page, you will see a 'Navigation Category Management' area.Here, the system lists the existing navigation categories.To add, please click the "Add Navigation Category" button.
The system will pop up a form, asking you to fill in the name of the new navigation category.For example, if you plan to create a footer navigation, you can name it 'Footer Navigation'; if it's a sidebar navigation, name it 'Sidebar Navigation'.Clear naming helps you manage and identify it in the future.After submitting the form, a new navigation category is created successfully and will be assigned a unique internal ID.This ID will be used when custom navigation is integrated into the website template.
Configure navigation links
Custom navigation category creation is complete. The next step is to add specific navigation links.
On the "Navigation Settings
- Parent NavigationThis field is used to build multi-level navigation.If you want the current link to be a top-level navigation item, please select 'Top-Level Navigation'; if you want to create a second-level navigation, please select its corresponding top-level navigation item as the parent.The Auto CMS currently supports up to two levels of dropdown navigation.
- Display Name: This is the navigation link text displayed on the front page.You can set it flexibly as needed; it does not have to be identical to the link content.For example, a navigation item linking to the "Contact Us
- Subtitle nameIf your design requires navigation items to display dual titles, such as Chinese main title and English subtitle, you can enter the subtitle content in this field.
- Navigation descriptionThis field allows you to provide a brief description for navigation items, which can be called to display in the front-end template, providing more context information to users.
- Link Type: Secure CMS provides three flexible link types to meet different content requirements: English
- Built-in link: 包含“首页链接”以及您网站中自定义模型的首页（如“文章模型首页”、“产品模型首页”）。这适用于指向网站核心功能入口。
- Category page link: Allows you to select an existing document category or a single page as a navigation link. This makes it very convenient to integrate a specific content collection or a standalone page into the navigation.
- External Link: Provides the maximum flexibility, you can enter any internal or external URL.Whether it is a link to a specific article within the site or a link to an external partner's website, it can be added in this manner.
- Display Order: Through setting numbers to control the arrangement of navigation links. The smaller the number, the closer the link is displayed in the list. Currently, sorting is achieved through numbers, and drag-and-drop is not supported.
Complete the entry of all fields and save, and your navigation link will be successfully added to the custom category. You can repeat this process to add all the necessary navigation items.
Integrate custom navigation in the template
Configure the navigation categories and links on the back-end, and then the critical step is to present these navigation data on the website's frontend page. This is mainly done through the template tags of the Anqi CMS.navListto achieve.
Firstly, you need to determine which template file your navigation will be deployed in. For footer navigation, it is usually integrated intobash.htmlThe footer part of the template for storing public headers, footers, etc. For sidebar navigation, it may be placed inpartial/a code snippet file under the directory (such aspartial/sidebar.html), and then throughincludeLabel it to introduce it into the page template that needs to display the sidebar.
In the template file, you can usenavListLabel to call your custom navigation category.navListThis tag requires atypeIdParameter to specify the navigation category to be called. ThistypeIdThis is the internal ID assigned by the system when you 'Create a custom navigation category'. You can view it by accessing the URL in the browser address bar when editing navigation categories in the background.idParameter, or obtained through other background entry.
The following is an example of calling custom navigation and performing a loop output:
{# 假设您的页脚导航类别ID为 2 #}
{% navList footerNavs with typeId=2 %}
{% if footerNavs %}
<div class="footer-navigation">
<ul>
{%- for item in footerNavs %}
<li class="footer-nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}" {% if item.Nofollow == 1 %} rel="nofollow" {% endif %} {% if item.Target == 1 %} target="_blank" {% endif %}>
{{item.Title}}
{%- if item.SubTitle %}<small>{{item.SubTitle}}</small>{% endif %}
</a>
{%- if item.NavList %} {# 如果有二级导航 #}
<dl class="footer-sub-nav">
{%- for inner in item.NavList %}
<dd class="footer-sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}" {% if inner.Nofollow == 1 %} rel="nofollow" {% endif %} {% if inner.Target == 1 %} target="_blank" {% endif %}>
{{inner.Title}}
</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endnavList %}
{# 假设您的侧边栏导航类别ID为 3 #}
{% navList sidebarNavs with typeId=3 %}
{% if sidebarNavs %}
<aside class="sidebar-block">
<h3>侧边栏导航</h3>
<ul class="sidebar-menu">
{%- for item in sidebarNavs %}
<li class="sidebar-menu-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">
{{item.Title}}
{%- if item.Description %}<span>{{item.Description}}</span>{% endif %}
</a>
{%- if item.NavList %} {# 侧边栏的二级导航 #}
<ul class="sidebar-submenu">
{%- for inner in item.NavList %}
<li class="sidebar-submenu-item {% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</aside>
{% endif %}
{% endnavList %}
Please note,item.Nofollowanditem.TargetIn the documentnavListofitemNot explicitly listed in the available fields, buthelp-setting-nav.mdIt mentioned that 'External links can be flexibly added to various web pages'tag-linkList.mdIt mentionedNofollowThe field, so these properties may exist in the actual navigation link, you can try using them. If they do not exist, please delete the related judgments to avoid template errors.
Through the above code, the CMS will dynamically generate the corresponding navigation structure according to your backend configuration.You can customize your template and add CSS styles to beautify these navigation to maintain consistency with the overall style of the website.
Optimization and maintenance
Successful navigation not only lies in its functional implementation, but also in its positive impact on user experience and SEO.
- SEO considerations: Make sure your navigation link structure is clear, URL semantic, and free of dead links.The pseudo-static function of AnQi CMS (configured under "Function Management" -> "Pseudo-static Rules") helps generate URLs that are more friendly to search engines.
nofollow. - Responsive Design: With the increase in the number of mobile device users, it is essential to ensure that your footer and sidebar navigation display and interact well on different screen sizes.This requires you to apply appropriate responsive CSS in the template.
- [en]Regular updates
By following these detailed steps and considerations, you will be able to fully utilize the navigation customization capabilities of the Anqi CMS, creating a multi-region navigation that is both aesthetically pleasing and practical for your website, thereby effectively enhancing user satisfaction and the website