Use the Anqi CMS navigation list withincludetags to create an efficient and maintainable public navigation

In website operation, the navigation bar, as the first point of contact between users and website content, is of great importance.A clear, maintainable, and efficient navigation system that not only significantly improves the user experience but also lays a solid foundation for the long-term development of the website.As an experienced website operation expert, I know that how to elegantly deal with the public navigation module in the content management system is a key link in template development.Today, let's delve deeply into AnQiCMS (AnQiCMS)navListnavigation list tags withincludethe exquisite coordination of auxiliary tags, how to optimize the public navigation part of the website together.

AnQi CMS provides great convenience for small and medium-sized enterprises and content operation teams with its concise and efficient architecture.The template engine syntax is similar to Django, powerful and easy to learn.In this case,navListandincludeThese two are indispensable 'partners.'

navList: The foundation for dynamically constructing navigation content

First, let's get to knownavListThe label. It is like the 'central processor' of the website navigation content, responsible for dynamically obtaining and organizing the navigation menu data from the Anqi CMS background.In the "Navigation Settings" on the backend, we can flexibly create different navigation categories (such as "Top Navigation", "Footer Navigation", "Sidebar Navigation"), and add up to two levels of navigation links for each category, including built-in links, category/page links, and external links.

navListThe core value of the label lies in its dynamism. Once you use it in the template, it will automatically render the corresponding navigation structure according to the backend configuration.For example, you might use it to get the top navigation:

{% navList navs with typeId=1 %}
    {# 导航内容将在这里渲染 #}
{% endnavList %}

HeretypeId=1Corresponding to a certain navigation category configured in the backgroundnavListEvery one looped outitemContains rich navigation information, such asTitle(Display name),Link(link address),IsCurrent(Whether the current page link, used to add activity style) as well asNavList(Submenu list for building secondary navigation). This design ensures the flexibility of website navigation, allowing operators to easily adjust the menu content through the backend without modifying the code.

include: A tool to improve the modularization and maintenance efficiency of templates

Next isincludeA label, it is the 'glue' of modularized design. In large websites or multi-page template development, common elements such as headers, footers, and sidebars often need to appear repeatedly on multiple pages.If you copy and paste these codes directly onto each page, once you need to modify them, you have to find and replace them one by one, which is inefficient and prone to errors.

includeThe appearance of the tag completely solved this problem. It allows you to extract repeated template code snippets and save them as independent.htmlfiles (usually placedpartial/Under the directory, then pass through it where needed{% include "partial/header.html" %}Refer to it in this way.

For example, you can create one.partial/header.htmlFiles to store the common elements of the website's top navigation, Logo, etc. Then in yourindex.html/detail.htmlpages, you can simply include a line of code:

{% include "partial/header.html" %}

The benefits of doing this are obvious:

  1. High reusability: Public code needs to be written only once and can be referenced anywhere.
  2. Easy to maintain: When modifying public elements, you only need to modify one file, and all the pages that reference it will be updated synchronously.
  3. Structure is clearThe main template file should be concise, focusing only on the unique content of the page to improve code readability.
  4. Team collaborationDifferent developers can develop different template fragments in parallel without interfering with each other.

Strong cooperation:navListwithincludeactual application

Now, let's combine these two tags and see how they optimize public navigation.

Imagine that your website has a top navigation bar and a footer navigation bar, their structures may be different, but both need to dynamically obtain menu data from the backend.

First step: Create navigation data sourceCreate two navigation categories, for example, in the 'Navigation Settings' of AnQi CMS backend

  • Category name:Top main navigation (corresponding to}typeId=1)
  • Category name:Footer navigation (corresponding)typeId=2) And configure each of their respective menu items, including first and second level menus.

Step two: Design navigation template snippet

  1. partial/main_nav.html(Top main navigation)This file will be used specifically to render the main navigation menu at the top.

    <nav class="main-navigation">
    <ul class="nav-menu">
        {% navList main_navs with typeId=1 %}
            {% for item in main_navs %}
                <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %} {# 如果有子菜单 #}
                        <ul class="sub-menu">
                            {% for sub_item in item.NavList %}
                                <li class="sub-item {% if sub_item.IsCurrent %}active{% endif %}">
                                    <a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

  2. partial/footer_nav.html(Footer navigation)This file is used to render the footer links, which may only need a first-level menu, with a simpler structure.

    <div class="footer-links">
    <h3>快速链接</h3>
    <ul>
        {% navList footer_navs with typeId=2 %}
            {% for item in footer_navs %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
        {% endnavList %}
    </ul>
</div>

The third step: Introduce in the main template

Now, whether it is in yourbase.html/index.htmlor any other page, you can introduce these navigation fragments throughincludethe tag.

{# 在页头部分引入主导航 #}
<header>
    <div class="logo">
        <a href="/">{% system with name="SiteName" %}</a>
    </div>
    {% include "partial/main_nav.html" %}
</header>

{# 在页脚部分引入页脚导航 #}
<footer>
    {% include "partial/footer_nav.html" %}
    <p>&copy; {% now "2006" %} {% system with name="SiteName" %}. All Rights Reserved.</p>
</footer>

In this way, the navigation structure of the website has been clearly separated and effectively managed. Background data-drivennavList,includeTags then insert dynamic content into a fixed template framework.

Advanced Application: Content Expansion within Navigation

navListThe power of tags is not limited to links. CombinedincludeYou can even embed more rich content in the navigation menu.For example, you may want to display a "Mega Menu" containing a list of the latest articles or specific category articles when hovering over a main menu item.

Inpartial/main_nav.htmlIn, for a specific main menu item (assuming its ID issome_category_id), you can expand it like this:

`twig {# partial/main_nav.html fragment #}