In the daily operation of AnQiCMS (AnQiCMS), the design of the navigation menu and user experience are often one of the key factors for the success of the website.Many operators want to add intuitive icons to the navigation menu, such as popular Font Awesome icons, to enhance aesthetics and information transmission efficiency.So does AnQiCMS support this custom icon font feature?As an experienced website operations expert, I will give you a detailed interpretation.

AnQiCMS navigation function in-depth analysis

First, let's examine the navigation management function of the AnQiCMS backend.The document describes that AnQiCMS provides the "website navigation settings" feature, allowing users to flexibly configure the navigation links in the background.You can set the 'Display Name', 'Subtitle Name', 'Navigation Description', and select the 'Link Type' (Built-in Link, Category Page Link, External Link) and 'Display Order'.In addition, AnQiCMS supports navigation links up to two levels, namely the first-level navigation and the second-level dropdown navigation under it.

However, we did not find any fields specifically used to set 'icons' or 'CSS classes' among these core configuration items.This means that, from the very beginning of the design of AnQiCMS, its background navigation management module did not have a direct input box or dropdown option for users to select or enter the icon font class name.navListAvailable fields of template tags (such asTitle,SubTitle,Description,Linketc.) also indeed do not have a field namedIconorClassfield exposed directly for front-end template calls.

This does not mean that AnQiCMS cannot implement the customization of navigation icons!On the contrary, thanks to the open and flexible template system of AnQiCMS, we can achieve this requirement through the customization of the front-end template, and the method is very flexible.

Customize navigation icons through template mechanism

One of AnQiCMS's core strengths is its highly customizable and modular design.It uses a syntax similar to the Django template engine, allowing operators and developers to fully control the HTML, CSS, and JavaScript of the website's frontend.This means that even if there is no direct icon field in the background, we can integrate icon fonts into the navigation menu by writing a small amount of code in the template.

To implement custom icon fonts, such as Font Awesome, usually requires the following two key steps:

Step 1: Introduce the Font Awesome icon font library

This is the premise of all using Font Awesome.You need to include the Font Awesome CSS file in your website template.The most common way is to use CDN services or download the file to the local server.

For example, when introducing via CDN, you can in your template<head>area (usuallytemplate/您的模板目录/bash.htmlortemplate/您的模板目录/index.htmlAdd similar code to the common header files

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Step two: Modify the navigation list template

In AnQiCMS, the navigation list is usually accessed throughnavListThe label is rendered in the template. You need to find the template file responsible for rendering the navigation menu (for example, it may be inpartial/header.htmlorindex/index.htmlwhich contains the navigation loop code).

Here are two common implementation approaches:

  • Option one: judge by navigation title or ID conditionsYou cannavListIn the loop, according to the navigation item'sTitle(Display name) orIdPerform a conditional judgment and then insert the corresponding Font Awesome icon.

    For example, your template code might look like this:

    {% navList navs %}
<ul>
    {%- for item in navs %}
    <li>
        {% if item.Title == "首页" %}
            <i class="fa fa-home"></i> <!-- Font Awesome 图标 -->
        {% elif item.Title == "产品" %}
            <i class="fa fa-box"></i>
        {% elif item.Title == "联系我们" %}
            <i class="fa fa-phone"></i>
        {% endif %}
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <dl>
            {%- for inner in item.NavList %}
                <dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd>
            {% endfor %}
        </dl>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endnavList %}

    The advantages of this method are intuitive and easy to understand, but the disadvantages are that it can be cumbersome to maintain if the navigation title changes or if icons need to be set for a large number of navigation items.

  • Plan two: skillfully utilize the 'navigation description' field (recommended)AnQiCMS navigation settings contain a 'navigation description' field.Although it is intended for textual description, we can cleverly use it to store Font Awesome's class names.

    1. Operate in the background navigation settings:Enter the AnQiCMS admin panel -> admin settings -> navigation settings. Edit your navigation items, enter the Font Awesome class name you want to use in the 'navigation description' field, for examplefa-solid fa-house(Font Awesome 6 syntax).

    2. Call in the template:Modify in your navigation list template,navListLoop through, by{{item.Description}}Get these class names and apply them to a<i>tag:

      {% navList navs %}
<ul>
    {%- for item in navs %}
    <li>
        {% if item.Description %}
            <i class="{{item.Description}}"></i> <!-- 动态插入 Font Awesome 图标 -->
        {% endif %}
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <dl>
            {%- for inner in item.NavList %}
                <dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd>
            {% endfor %}
        </dl>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endnavList %}

      This solution's advantage lies in the fact that icon class names are stored in the background, making it convenient for operation personnel to directly manage and modify them, without needing to edit template codes each time, greatly improving maintainability and flexibility.

Summary

Although AnQiCMS's backend navigation menu management does not provide a ready-made 'icon' selector or input box, but with its efficient architecture based on the Go language and flexible design based on the Django template engine, you can completely customize the front-end template to integrate Font Awesome or any other icon font library. By introducing the icon library CSS in the public header file, and cleverly utilizing the 'navigation description' field innavListInserting icon class names dynamically in the loop can easily achieve personalized customization of the navigation menu.This method not only effectively solves the icon display problem, but also fully demonstrates the strong flexibility of AnQiCMS in secondary development and content operation.

Frequently Asked Questions (FAQ)

  1. Ask: If I am not familiar with HTML and CSS, does AnQiCMS have a simpler method to add navigation icons?Answer: The default functions provided by AnQiCMS indeed require you to have a certain level of HTML and CSS knowledge to modify the template. If you are not familiar with these technologies, you can consider the following methods: first, try using