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

In AnQiCMS template, how to pass a specific variable through thewithtagged asincludenavigation template?

As an expert well-versed in website operation, I often encounter such needs: In order to maintain the neatness and maintainability of website code, we usually split common modules such as headers, footers, sidebars, and navigation into independent template fragments.AnQiCMS (AnQiCMS) provides us with great convenience with its efficient architecture based on the Go language and Django template engine syntax.However, when these general modules need to display personalized content on different pages, how to flexibly pass specific variables becomes a key point.withtagged asincludenavigation template? Exclusive variables.

Modular template:includeThe art of tags

In AnQiCMS, template files are usually named with.html为后缀，并存放在 English/templateIn the specific subfolder of the directory. To achieve code reuse, we often extract some common parts (such as the navigation menu) and place them in likepartial/such code snippet directory. In this way, any page that needs to display navigation can simply use{% include "partial/nav.html" %}Such a label can bring the navigation module into the picture, greatly enhancing the development efficiency and readability of the code.

For example, we may have a universal navigation templatepartial/nav.htmlIt is responsible for traversing the navigation list configured in the background and rendering it.This is great because it ensures consistency across the entire site navigation.nav.htmlIs it worth modifying it? Clearly, this is not an ideal solution. At this point,withTags come into play.

withThe magic of tags: toincludeinfuse vitality

withThe main function of the tag in the AnQiCMS template is to define temporary variables, which are only valid in thewithscope of the tag wrapper. But it is even more powerful as it can be used asincludeThe parameters of the label, allowing us to "inject" some specific data or configuration when introducing a template fragment. This means that we can modify the common navigation template without changing it.partial/nav.htmlOn the premise, pass parameters from the outside so that it can show different behaviors in different scenarios.

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

Let us understand this through a practical navigation case.

Navigation template (partial/nav.html)

Suppose our general navigation templatepartial/nav.htmllooks like. It will try to getnav_titleVariable as navigation header title, and throughactive_item_idVariable to determine 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_titleWhen not provided, it displays "Website Main Navigation" as the default value (this usesdefaultFilters, Anqi CMS supports multiple filters).active_item_idto determine which navigation item needs to be addedactiveClass, to implement highlighting effect.item.IsCurrentIt is built-in to AnQin CMS, used to represent the navigation item corresponding to the current page.item.Id == active_item_idIt allows us to manually highlight by passing an ID.

Call the navigation template (index.htmlorarticle_detail.html)

Now, suppose we have two different pages: the home page of the website and some 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

{# 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 %}

Through this method, we flexibly controlled it.partial/nav.htmlWithout copying or modifying it itself.withThe tag has brought the componentization and customization of templates to a new height.

Advanced:onlyThe clever use of keywords

Using by defaultincludeWhen, 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 passed variables, ignoring other variables from the parent template. At this point, we can add thewithkeywords afteronly.

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

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

Summary

In the template development of AnQiCMS,includeThe modularization capability brought by tags withwithLabel-provided variable passing mechanism works in harmony, providing powerful tools for us to build flexible and efficient websites. Whether it is simple navigation highlighting or complex modules