As an experienced CMS website operation personnel, I know that a perfect website is not only about the excellent content, but also every detail of the user experience.The footer navigation menu, seemingly unremarkable, actually plays a crucial role in improving website usability, optimizing SEO structure, and guiding users to delve deeper into the content.It typically includes 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 to you in detail how to add a feature-rich footer navigation menu in the Anqi CMS.

Plan the footer navigation menu content

Before starting the operation, we first need to specify which links the footer navigation menu should include.This usually depends on the type of your website and user needs.For example, a corporate website may need "About UsClear planning can help you efficiently complete the subsequent settings.

Enter the website navigation settings

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

The navigation setting feature 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 SettingsBy default, the system may only contain one category named 'Default Navigation'.To better manage the footer navigation, we recommend that you create 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 "Page Footer Navigation".Completed after filling, click confirm to save.Thus, 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 (may be empty at present). 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 of the footer, it is usually chosen as 'Top Navigation'.If you need a secondary menu for your footer navigation, you can select the corresponding primary menu here.Auto CMS supports 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:Auto CMS provides three flexible link types:
      • Built-in Links:Suitable for commonly used pages 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 link:If you wish to link to a category of articles, products, or a 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, use this field to enter the full URL directly, for examplehttps://en.anqicms.com/aboutus.html.
    • Display Order:Control the display order of links by entering numbers; the smaller the number, the closer to the front it is displayed.
    • Navigation description, subheading name:These are optional fields, if your template design needs to provide additional information for navigation items, you can fill it here.
  4. Duplicate 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 background navigation settings, the final step is to display this newly created "footer navigation" on your website's front end. This requires modifying the website's template files.

The template files of Anqi CMS are usually stored in/templateThe 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) etc. files.

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

  2. UsenavListTag invocation:AnQi CMS provides powerful template tags, whereinnavListThe label is specifically used to call the navigation list. You need to use this label to get the "Footer Navigation" category you set in the background.

    • First, find the "Footer Navigation" category corresponding to the one you created.typeIdIn the navigation settings page, you can find the ID of each navigation category.
    • 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 it with the ID of the "Footer Navigation" category you actually created. This code will iterate over all the links under the "Footer Navigation" category and display them in an unordered list.

  3. Styled 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 files are usually located in/public/static/您的模板名/css/The directory. You can add style rulesstyle.cssor other 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 bottom of the left-hand menu item 'Update Cache', 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 the AnQi CMS.This navigation can not only enhance the user experience of the website, but also provide structural help for your website's SEO.

Common Questions and Answers (FAQ)

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

There are several possible reasons for this situation.First, make sure you have clicked the 'Update Cache' button on the AnQi CMS backend after modifying the template file.navListlabels, 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.html) Has it been correctly introduced to all page templates that need to display the footer.

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

Yes, Aiqi CMS fully supports your needs.You only need to create two independent navigation categories for 'Product Category' and 'Company Information' by using the 'Add Navigation Category' feature in the 'Navigation Settings' on the backend.For example, you can create the "Footer Product Navigation" and "Footer Company Information".navListLabel, and specify them separately.typeIdTo call and display.

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

The style of the footer navigation is controlled by your website's CSS file. Usually, you can find it in the current template theme folder 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.footer-navclass, and you can target it in the CSS file..footer-nav ul li aSelectors to write styles.