Hello, all the operation experts and website administrators of AnQi CMS!I am very happy to discuss with everyone a common but confusing problem that may be encountered during the use of AnQiCMS: Why does the front-end page not update in time even though I have modified the navigation settings on the back-end?As an experienced website operations expert, I know how frustrating this 'what you see is not what you get' experience can be.Don't worry, this is not a Bug of AnQiCMS, but some mechanisms behind the content management system pursuing high performance and flexibility.Today, let's delve into this issue and provide a set of effective solutions.

核心困惑：导航更新了，前端为何“纹丝不动”？

After carefully adjusting the navigation in the AnQiCMS backend, we look forward to the front-end page being able to present these changes immediately, whether it is adding a menu item, modifying the link, or adjusting the sorting.However, things do not always go as planned, the navigation on the front-end remains unchanged, as if the backend operations had never happened.Behind this, there are often several main reasons at play.

首先，最常见也最容易被忽视的，是网站的缓存机制.To improve the website access speed, AnQiCMS, as a high-performance Go language CMS, naturally uses caching technology extensively.Cache is like a 'memory copy' of website data, storing frequently used data to return faster on subsequent requests, avoiding the need to query the database or regenerate the page each time.When you modify the navigation settings, if the front-end page still displays old content, it is very likely that it is reading outdated data from some cache.

  • Browser cache:Your browser may store the content of the pages you have visited (including navigation) locally to speed up loading.
  • AnQiCMS System Cache:
  • Server-side reverse proxy caching:If your website is deployed after Nginx or Apache web servers and configured with reverse proxy (as shown in documents such as 'Using 1Panel Docker Installation Tutorial for AnQiCMS' or 'Using Baota Docker Installation Tutorial for AnQiCMS'), these proxy servers may also be configured with caching, intercepting and retaining the old content returned by AnQiCMS.
  • CDN Cache:If your website uses a content delivery network (CDN), the CDN nodes will cache your website content worldwide.This means that even if your source site has been updated, users may still access old cached data from the nearest CDN node.

Secondly, the issue may be inMismatch between the navigation category and the template call.The 'Navigation Category Management' feature is detailed in the 'Website Navigation Settings Help' document of AnQiCMS.This means you can create multiple independent navigation categories in the background, such as "Default Navigation", "Footer Navigation", "Sidebar Navigation", and add navigation links to them separately.tag-/anqiapi-other/165.htmlas describednavListThe tag calls istypeId=1the "default navigation", but you modified it in the backgroundtypeId=2The footer navigation, so the front-end page will naturally not change. This is a common configuration mistake that operators make when using the multi-navigation function.

Finally, sometimes it isTemplate file issue itselfAlthough AnQiCMS encourages the use of dynamic tagsnavListCall navigation data, but in some custom templates or early versions, developers may choose to hard-code navigation links (write directly in HTML) or onnavListThe usage of labels is misunderstood, leading to incorrect reading or rendering of the data updated on the backend.For example, "The Label and Usage Method" of the template emphasizes that labels are strictly case-sensitive, and incorrect spelling will also result in the data being unable to be called correctly.

Solution: Steps for frontend synchronization update

Understood the reason, and we have a direction to solve the problem. The following is a step-by-step process to troubleshoot and solve the problem of the AnQiCMS backend navigation update not being synchronized in the front-end, sorted by priority and impact range from small to large:

第一步：From the nearest source start - Force refresh the browser

This is the simplest and fastest attempt. Your browser may have a 'good memory', still displaying the old cached page.

  • [en]Operation method:On the front-end page, try pressingCtrl + F5(Windows/Linux) orCmd + Shift + R(macOS) Force refresh. This will bypass the browser's local cache and directly request the latest content from the server.

If the problem still exists after the browser is forced to refresh, it means that the cache problem is not on your local device, and we need to delve deeper.

第二步：清理 AnQiCMS 系统缓存

The system cache built into AnQiCMS is one of the key factors affecting the update of front-end content.The background data update attempts to clear related caches theoretically, but to ensure safety, manual clearing is a very effective operation.

  • [en]Operation method:登录AnQiCMS后台，找到左侧菜单最下方的“Update the cache

Third step: Check if the navigation category matches the template call

This is a troubleshooting point unique to the navigation feature. Make sure you are modifying the navigation category actually referenced by the front-end template.

  • [en]Operation method:
    1. Enter the AnQiCMS backend's “Backend settings" -> "Navigation settings.
    2. Here, you will see a "Navigation Category Management" area, which lists all the created navigation categories.Please carefully check which category the navigation items you have modified belong to (for example, "Default Navigation").
    3. Then, recall or view your frontend template (usuallytemplatethe directory.header.htmlorbase.htmlsuch as common templates), which may have usednavListLabel to render navigation. For example, the label code might look like this:
      
{% navList navs with typeId=1 %}
    <ul>
        {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %}
                <dl>
                    {%- for inner in item.NavList %}
                        <dd class="{% if inner.IsCurrent %}active{% endif %}">
                            <a href="{{ inner.Link }}">{{inner.Title}}</a>
                        </dd>
                    {% endfor %}
                </dl>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}
      Please pay close attention.typeIdThe parameter, which determines the navigation category from which the template retrieves data. Make sure the navigation category ID you modify in the background matches the one in the template.navListTagstypeIdIf there is no template.typeIdThe default will load the navigation category with ID 1.

Step 4: Clear the server reverse proxy cache or restart the service.

If your website is in front of Nginx, Apache, or other HTTP proxy servers, they may also cache the page content.

  • [en]Operation method:
    • Nginx:If you are familiar with Nginx configuration, you can find the Nginx cache directory, manually delete the cache files within it, or send a specific signal to restart the Nginx service (for example,sudo systemctl restart nginx).
    • Apache:类似地，检查Apache的缓存模块配置并清除缓存，或者重启Apache服务（例如sudo systemctl restart apache2).
    • 宝塔面板/1Panel:If you manage through these panels, there is usually something like 'in the website settings'