How to add footer navigation menu in AnQi CMS?

As an experienced CMS website operation person, I know that a perfect website is not only about the excellent content, but also about every detail of the user experience.The footer navigation menu, seemingly unremarkable, actually plays a crucial role in enhancing website usability, optimizing SEO structure, and guiding users to explore content in depth.It usually contains important links of the website, such as 'About Us', 'Contact Information', 'Privacy Policy', etc., allowing users to quickly find the information they need on any page.

Now, I will explain in detail how to add a feature-rich footer navigation menu in Anqi CMS.

Plan the footer navigation menu content

Before starting the operation, we first need to clarify which links the footer navigation menu should include.This usually depends on the type of your website and your user needs. For example, a corporate website may need "About Us", "Contact Us", "Privacy Policy", "Terms of Service";E-commerce websites may need 'shopping guide', 'after-sales service', 'payment methods';Personal blogs may tend to display "friend links", "archives", "message boards", and so on.A clear plan can help you efficiently complete the subsequent settings.

Enter the website navigation settings

To start setting up the footer navigation menu, you need to log in to the AnQi CMS admin interface.In the menu bar on the left, find and click on 'Background Settings', and then select the 'Navigation Settings' option.This is the center of all navigation menus of the management website.

The navigation setting function of Anqi CMS is very flexible, allowing you to create multiple navigation categories to meet the needs of different areas of the website (such as top main navigation, sidebar navigation, footer navigation).

Create a custom footer navigation category

On the 'Website Navigation Settings' page, you will see a 'Navigation Category Management' area.By default, the system may only exist one category named "default navigation".To better manage the footer navigation, we recommend creating a new navigation category.

Click the 'Add Navigation Category' button, enter the navigation category name in the pop-up window, for example 'Footer Navigation' or 'Footer Navigation'.After filling in, click Confirm Save. In this way, you have created an independent management area for the footer navigation.

Add a footer navigation link

After creating the "Footer Navigation" category, we need to add specific navigation links to it.

1. Select a navigation category:On the left or top of the navigation settings page, select the "Footer navigation" category you just created.
2. Click "Add navigation link": The page will display all links under the current navigation category (currently may be empty). Click the 'Add Navigation Link' button.
3. Configure link information:In the pop-up link configuration window, you need to fill in the following key information:
   • Parent navigation:Since this is the main navigation in the footer, the top-level navigation is usually chosen.If you have a secondary menu requirement in your footer navigation, you can select the corresponding top-level menu here.The AnQi CMS supports a two-level navigation structure.
   • Display name:This is the text displayed on the front page for the navigation link, for example, "About Us".
   • Link Type:AnQi CMS provides three flexible link types:
     • Built-in links:Pages commonly used within the website, such as the homepage, article model homepage, product model homepage, or other custom model homepages. After selection, the system will automatically generate links.
     • Category page links:If you want to link to an article category, product category, or single page (such as "Contact Us"), you can select this option and then choose the corresponding category or page from the list.
     • External links:When you need to link to a specific URL within the site or to other external websites, enter the complete URL here, for examplehttps://en.anqicms.com/aboutus.html.
   • Display order:By entering a number, you can control the display order of the links, the smaller the number, the earlier it appears.
   • Navigation description, subtitle name:These are optional fields, if your template design needs to provide additional information for navigation items, you can fill it here.
4. Repeat operation:Continue adding all the links you want to display in the footer navigation as per the above steps.

Integrate the footer navigation into the template.

After completing the backend navigation settings, the final step is to display this newly created "footer navigation" on the front end of your website. This requires modifying the website template files.

The template files of Anqi CMS are usually stored in/templatethe directory, each template has an independent folder. The footer content of the website is usually defined inbash.html(As a public code snippet, inherited by other templates) orpartial/footer.html(As an independent footer snippet) in other files.

1. Determine the footer template file:Find the folder of the template theme you are currently using, then find the file responsible for rendering the footer content..htmlThis is usuallybash.htmlOrpartial/footer.html.

2. UsenavListTag call:Anqi CMS provides powerful template tags, among whichnavListTags are used specifically to call the navigation list. You need to use this tag to get the "footer navigation" category you set up in the background.

   • First, find the corresponding "footer navigation" category you created.typeId. You can find the ID of each navigation category on the navigation settings page.
   • Insert a code snippet similar to the following in your footer template file.

   {% navList footerNavs with typeId=2 %}  {# 假设“页脚导航”的 typeId 是 2 #}
       {% if footerNavs %}
           <div class="footer-nav">
               <ul>
                   {% for item in footerNavs %}
                       <li {% if item.IsCurrent %}class="active"{% endif %}>
                           <a href="{{ item.Link }}">{{ item.Title }}</a>
                       </li>
                   {% endfor %}
               </ul>
           </div>
       {% endif %}
   {% endnavList %}
   

   Please replacetypeId=2Replace with the actual ID of the "Footer Navigation" category. This code will iterate over all links under the "Footer Navigation" category and display them in an unordered list.

3. Stylized Footer Navigation:You can use CSS to add styles to the footer navigation to keep it consistent with the overall design style of your website. The template's style file is usually located/public/static/您的模板名/css/In the directory. You canstyle.cssAdd style rules to or related CSS files.

4. Save and update the cache:After modifying the template file, be sure to save the changes. Then, go back to the AnQi CMS backend, click on the "Update Cache" at the bottom of the left menu, clear the system cache to ensure that your changes take effect immediately.

By following these steps, you have successfully added and displayed a footer navigation menu in Anqi CMS.This navigation can not only enhance the user experience of the website, but also provide structural help for your website's SEO.

Frequently Asked Questions (FAQ)

1. I set up the footer navigation in the background, but it didn't show up on the front page. What could be the reason?

There may be several reasons for this situation. First, make sure you have clicked the 'Update Cache' button on the Anqicms backend after modifying the template file.Secondly, check if you have used the template file correctlynavListthe tags, andtypeIdDoes the parameter match the actual ID of the "Footer Navigation" category you created in the backend. Finally, check your footer template file (such asbash.htmlorpartial/footer.htmlIs it correctly introduced into all page template that needs to display the footer.

2. I want to display multiple different navigation menus in the footer, such as two independent navigation areas for 'Product Categories' and 'Company Information', does Anqi CMS support this?

Yes, AnQi CMS fully supports your needs. You just need to create two independent navigation categories for 'Product Categories' and 'Company Information' in the background 'Navigation Settings' through the 'Add Navigation Category' feature.For example, you can create a "footer product navigation" and a "footer company information".Then, in the template file, use two separatenavListLabel, and specify them accordinglytypeIdCall to display it.

3. The link style in the footer navigation does not look very aesthetic. How can I modify its appearance?

The style of the footer navigation is controlled by the CSS file of your website. Usually, you can find it in the folder of the current template theme under/public/static/您的模板名/css/the directorystyle.cssOr other style files. You can adjust the font, color, size, spacing, and layout of links by adding or modifying CSS rules.For example, in the above template code, we added footer navigationfooter-navclasses, and you can target them in the CSS file..footer-nav ul li awrite styles for selectors.