How to pass specific variables to the navigation template of the AnQiCMS template using the `with` tag?

How to pass a specific variable throughwithlabeled asincludenavigation template in AnQiCMS

As an expert well-versed in website operations, I often encounter such needs: In order to maintain the cleanliness and maintainability of the website code, we usually divide the commonly used modules such as header, footer, sidebar, and navigation into independent template fragments.AnQiCMS (AnQiCMS) takes advantage of its efficient architecture based on the Go language and the Django template engine syntax, providing us with great convenience.However, when these general modules need to display personalized content on different pages, how to flexibly pass specific variables becomes a key point.Today, let's delve deeply into how to skillfully use in the AnQiCMS templatewithlabeled asincludepass exclusive variables through the navigation template.

Modular template:includeThe art of tags

Template files in AnQiCMS are usually named with.htmlsuffix and stored in/templateIn a specific subfolder under the catalog. To achieve code reuse, we often extract some common parts (such as the navigation menu) and put them in something likepartial/such a code snippet directory. In this way, any page that needs to display navigation can be simply used{% include "partial/nav.html" %}Such a label can bring in the navigation module, greatly improving development efficiency and code readability.

For example, we may have a universal navigation template.partial/nav.htmlIt is responsible for traversing the background configured navigation list and rendering it out.This is great because it ensures consistency across the entire site navigation. But imagine if a page needs to highlight a specific menu item in the navigation or temporarily change a navigation title, would we need to copy a whole page for that?nav.htmlShould we go and modify it? It is obviously not an ideal solution. At this time,withthe tag comes into play.

withThe magic of tags: forincludeinject vitality

withThe tag's main function in the AnQiCMS template is to define temporary variables, which are onlywithvalid within the scope of the tag wrapper. But even more powerful is that it can act asincludeThe tag's parameters allow us to inject some specific data or configuration when introducing a template snippet. This means that we can modify the common navigation template withoutpartial/nav.htmlUnder the premise, pass parameters from the outside to make it show different behaviors in different scenarios.

Specifically, when we use the main template{% include "partial/nav.html" ... %}, we can addwithA keyword followed by a series ofkey="value"parameters in the form, pass these variables tonav.html. These variables can be accessed and used like normal variables inincludethe template.

Let us understand this through a practical navigation case.

Navigation template (partial/nav.html)

Assuming our universal navigation templatepartial/nav.htmlLooks like this. It will try to obtainnav_titleThe variable serves as the navigation header title andactive_item_iddetermines which menu item needs to be highlighted.

{# partial/nav.html #}
<nav class="main-nav">
    <div class="nav-header">
        {# 如果外部传入了nav_title，则显示，否则显示默认标题 #}
        <h3>{{ nav_title|default:"网站主导航" }}</h3>
    </div>
    <ul>
        {%- navList mainNavs %}
        {%- for item in mainNavs %}
            {# 判断当前导航项是否是活跃状态，或者通过传入的active_item_id进行高亮 #}
            <li class="nav-item {% if item.IsCurrent or item.Id == active_item_id %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %}
                <ul class="sub-nav">
                    {%- for subItem in item.NavList %}
                        <li class="sub-nav-item {% if subItem.IsCurrent or subItem.Id == active_item_id %}active{% endif %}">
                            <a href="{{ subItem.Link }}">{{subItem.Title}}</a>
                        </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
        {% endfor %}
        {% endnavList %}
    </ul>
</nav>

in thisnav.htmlIn the template, we define two variables expected to be received from the outside:nav_titleandactive_item_id.nav_titleIf not provided, it will display "Default website navigation" (which is used here)defaultFilter, AnQi CMS supports multiple filters).active_item_idIt is used to determine which navigation item needs to be addedactiveclass to achieve highlighting effect.item.IsCurrentIt is built-in to AnQi CMS and is used to represent the current page's corresponding navigation item, whileitem.Id == active_item_idit allows us to manually highlight by passing an ID.

Invoke the navigation template (index.htmlorarticle_detail.html)

Now, let's assume we have two different pages: the homepage of a website and a specific article detail page, both of which need to include this navigation template but with different highlight effects and titles.

On the homepage (index.html) Call:

On the homepage, we only want to display the default title and highlight the 'homepage' menu item (assuming its ID is 1).

{# index.html #}
{% extends 'base.html' %} {# 继承基础布局 #}

{% block content %}
    <main>
        <h1>欢迎来到安企CMS官网</h1>
        {# 引入导航模板，并传递active_item_id为1，高亮首页 #}
        {% include "partial/nav.html" with active_item_id=1 %}
        
        <section>
            {# 首页内容 #}
        </section>
    </main>
{% endblock %}

On the article detail page (article_detail.html) Call:

The article detail page may belong to the "Article" category (assuming its ID is 2), and we hope that the navigation title displays "Latest Articles" and highlights the article category.

{# article_detail.html #}
{% extends 'base.html' %} {# 继承基础布局 #}

{% block content %}
    <main>
        <h1>{{ archive.Title }}</h1>
        {# 引入导航模板，传递自定义标题和高亮文章分类（假设ID为2） #}
        {% include "partial/nav.html" with nav_title="最新文章" active_item_id=2 %}

        <article>
            {# 文章详情内容 #}
        </article>
    </main>
{% endblock %}

In this way, we can flexibly controlpartial/nav.htmlwithout copying or modifying it itself.withtags have brought the componentization and customization of templates to a new height.

Advanced:onlyThe妙用of keywords

By default, useincludeAt this time, the included template inherits all the context variables of all parent templates. But in some specific scenarios, we may want the included template to only receive throughwithExplicitly pass the variable while ignoring other variables of the parent template. At this point, we canwithadd the keyword followed byonly.

{# 仅传递 active_item_id，不继承父模板的其他任何变量 #}
{% include "partial/nav.html" with active_item_id=1 only %}

UseonlyCan strictly control the scope of variables, avoid unexpected variable conflicts, and make template fragments more independent and predictable.

Summary

In AnQiCMS template development,includeThe modular capability brought by tags andwithThe variable passing mechanism provided by the tags complements each other, providing a powerful tool for us to build flexible and efficient websites. Whether it is simple navigation highlighting or complex modules