Utilize the CMS navigation list wiselyincludeTags, to create efficient and maintainable public navigation

In website operation, the navigation bar serves as the first point of contact between users and the website content, and its importance is self-evident.A clear, easy-to-maintain, and efficient navigation system that not only significantly improves user experience but also lays a solid foundation for the long-term development of the website.As an experienced website operations expert, I am well aware that how to elegantly handle the public navigation module in a content management system is a key link in template development.navListNavigation list tags andincludeThe exquisite cooperation 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, both powerful and easy to use.navListandincludeTwo are indispensable partners.

navList: The foundation for dynamically constructing navigation content

Firstly, let's get to knownavListTag.It is like the 'central processing unit' of the website navigation content, responsible for dynamically retrieving and organizing navigation menu data from the AnQi CMS backend.In the "Navigation Settings

navListThe core value of a tag lies in its dynamics.Once you use it in the template, it will automatically render the corresponding navigation structure based on the backend configuration.

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

Here are thetypeId=1corresponds to a certain navigation category configured on the back-endnavListEach one generated in the loopitemContains rich navigation information, such asTitle(Display Name),Link[Link address],IsCurrent(Whether the current page link, used for adding activity styles) as well asNavList(Submenu list, used to build secondary navigation).This design ensures the flexibility of website navigation, allowing operation personnel to easily adjust menu content through the backend without modifying the code.

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

Next isincludeTags, it is the 'glue' of template modular design.In large website or multi-page template development, common elements such as headers, footers, and sidebars often need to appear repeatedly across multiple pages.If you copy and paste this code directly into each page, once you need to modify it, you have to search and replace it one by one, which is inefficient and prone to errors.

includeThe appearance of tags completely solves this problem. It allows you to extract repeated template code snippets and save them as independent.htmlfiles (usually placed inpartial/Under a directory), then reference it at the required location using{% include "partial/header.html" %}this method.

For example, you can create apartial/header.htmlFiles are used to store common elements such as the top navigation and Logo of the website. So in yourindex.html/detail.htmlpages, just one line of code is needed to include:

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

The benefits of doing this are obvious:

  1. High reusabilityPublic code needs to be written only once and can be referenced anywhere.
  2. Easy to maintainWhen modifying public elements, only one file needs to be updated, and all pages that reference it will be synchronized.
  3. Clear structureMain template file should be concise, focusing only on page-specific content to improve code readability.
  4. Team CollaborationDifferent developers can develop different template fragments in parallel without interfering with each other.

Strong partnership:navListWithincludePractical application of:

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, which may have different structures, but both need to dynamically retrieve menu data from the backend.

First Step: Create Navigation Data SourceCreate two navigation categories in the 'Navigation Settings' of the AnQi CMS backend, for example:

  • Category Name:Top Main Navigation (corresponding to)typeId=1)
  • Category Name:Footer navigation (corresponding)typeId=2) Configure each of their respective menu items, including primary and secondary menus.

Second step: Design navigation template fragments

  1. partial/main_nav.html(Top main navigation)This file is dedicated to rendering 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 level of 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>

Step 3: Introduce in the main template

Now, whether it's in yourbase.html/index.htmlor any other page, you can introduce these navigation fragments throughincludetags.

{# 在页头部分引入主导航 #}
<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 is clearly separated and effectively managed. Data-driven backend.navList,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 a "Mega Menu" to pop up containing a list of the latest articles or articles from specific categories when the mouse hovers 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:

【en】partial/main_nav.html fragment