How to display dynamic data in the AnQiCMS navigation menu, such as the number of unread messages?

As an experienced website operations expert, I am well aware of the core position of the navigation menu in user experience and website architecture.It is not only the index of the content, but also the key to users quickly obtaining the information they need and improving conversion efficiency.Today, we will delve into how to cleverly integrate dynamic data into the navigation menu of AnQiCMS (AnQi CMS), such as the number of unread messages that are of great concern, which will undoubtedly greatly enhance user interaction and the vitality of the site.

Insight requirements: The challenge of integrating static navigation with dynamic data

The traditional website navigation menu is often static and rarely changes once set.However, in today's era where users increasingly pursue personalization and real-time feedback, if the navigation menu can come alive, for example, after the user logs in, the 'Messages' entry can display unread counts like '(3)' in real time, it will undoubtedly greatly enhance the user experience and guide users to check important information in a timely manner.In AnQiCMS, a content management system known for its efficiency and customizability, achieving this goal is not out of reach. It benefits from its flexible template mechanism and the high-performance backend of Go language.

One of AnQiCMS's core advantages is that it adopts a syntax similar to Django's template engine, allowing operators and developers to deeply customize the front-end display. We through{{变量}}to output data, through{% 标签 %}To implement logic control and data calls. This provides a solid foundation for displaying dynamic data.However, data such as the number of unread messages usually requires combining the user's login status and backend business logic to be calculated in real-time, which goes beyond the scope of direct invocation of traditional template tags.

The core idea of AnQiCMS for dynamic data display

To display dynamic data in the AnQiCMS navigation menu, especially data like the number of unread messages that requires user context and real-time calculation, we usually need to combineBackend data interface expansionwithPartial dynamic loading of front-end templateTwo strategies. The modular design of AnQiCMS and the powerful features of Go language provide convenience for this customization.

Step 1: Build the backend dynamic data interface (API)

For example, the template tags of the current AnQiCMScommentListorguestbookIt is mainly used to display comment or message list and does not directly provide a refined statistical function such as the number of unread messages. Therefore, the most effective way to obtain the total number of unread messages for a specific user or under specific conditions isExtend the AnQiCMS backend service, create a dedicated data interface.

AnQiCMS is developed based on the Go language, its modular architecture allows developers to add custom business logic without affecting the core system. We need to build a lightweight API endpoint (such as/api/user/unread_messagesIt is responsible for:

1. Identify the current user: Determine which logged-in user the current request is from, through session or token, etc.
2. Query the databaseAccess the data table storing messages, comments, or messages (for example, if we consider comments as messages, a query might becommentstable; if messages require user handling, a query might beguestbooktable).
3. Filter "Unread" status: According to the message status field defined in the business logic (for examplestatus=0represents unread,is_read=false), filter out the records that meet the conditions.
4. Count the numberCount the filtered records.
5. Return dataReturn the statistical results in JSON format, for example,{"count": 3}.

This backend extension process requires a certain level of Go language development skills, but the AnQiCMS documentation emphasizes its high adaptability to secondary development and personalized adjustments, therefore, it is a feasible path for those with a development team or who are familiar with Go language.

Step two: Modify the navigation menu template and reserve a dynamic data display position

We need to reserve space for dynamic data in the front-end template. The template files of AnQiCMS are usually located in/templatethe directory, and the common part of the navigation menu is likely to be located inpartial/header.htmlorbash.htmlThis file is mentioned inincludeTag references. We can usetag-/anqiapi-other/165.htmlThe tags mentioned in thenavListTo render navigation structure.

Assuming our navigation menu has an entry named "Message", its HTML structure may be similar to:

{% navList navs %}
    {%- for item in navs %}
        {%- if item.Title == "消息" %} {# 假设我们找到“消息”这个导航项 #}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}} <span id="unread-message-count" class="badge"></span></a>
            </li>
        {%- else %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
            </li>
        {%- endif %}
    {% endfor %}
{% endnavList %}

In the above code, we added a label with a unique ID after the link text of the “Message” navigation item.<span id="unread-message-count" class="badge"></span>. ThisspanThe tag has a unique ID (unread-message-countIt will be the target element for our front-end JavaScript to update data.In its initial state, it can be empty or display a default value (such as 0), and will be updated after the dynamic data is loaded.

Step 3: Get and render dynamic data on the front-end JavaScript

The final step is to write frontend JavaScript code, which sends a request to our backend API after the page is loaded to get the number of unread messages and display them in the navigation menu. To optimize the user experience, this JavaScript code can be placed at the bottom of the page. ...</body>Before the tag) or execute after the page is fully loaded.

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 假设用户已登录，并且您有办法获取到用户ID或其他认证信息
    // 实际项目中，您可能需要将这个API请求绑定到用户登录状态
    // 或者后端直接在页面渲染时提供一个临时的token供前端使用

    fetch('/api/user/unread_messages') // 替换为您的实际API地址
        .then(response => {
            if (!response.ok) {
                throw new Error('网络请求失败');
            }
            return response.json();
        })
        .then(data => {
            const unreadCountElement = document.getElementById('unread-message-count');
            if (unreadCountElement) {
                if (data.count > 0) {
                    unreadCountElement.textContent = `(${data.count})`; // 显示如 (3)
                    unreadCountElement.style.display = 'inline-block'; // 确保可见
                } else {
                    unreadCountElement.style.display = 'none'; // 没有未读消息则隐藏
                }
            }
        })
        .catch(error => {
            console.error('获取未读消息数量失败:', error);
            // 可以在此处添加错误提示或保持默认值
        });
});
</script>

This JavaScript code takes advantage of the features provided by modern browsers.fetchAn API that asynchronously requests the backend interface after the page is loaded. Once the data is obtained, it will find the ID ofunread-message-countThe element is updated and its content is updated. In this way, users do not need to refresh the entire page and can see the real-time updated number of unread messages, greatly improving the fluidity of interaction.

Advanced consideration and optimization

In the actual deployment, in addition to the above steps, we also need to consider some