As an experienced website operation expert, I know that the flexible use of template tags is the key to building an efficient and multifunctional website. Many AnQiCMS users, especially those who are new to template development, may have a question: "categoryListwithpageListWill using these tags with different functions on the same page cause a conflict?

Today, let's delve deeply into this issue and reveal the design philosophy and **practice of AnQiCMS in handling such scenarios, helping everyone better master the template and achieve diverse content display.

Understand the modular design of AnQiCMS: Why do conflicts not exist?

Firstly, I want to make it clear to everyone, in the architecture design of AnQiCMS,categoryListwithpageListThese tags coexist on the same page without any conflict. This is due to the solid and flexible design philosophy of AnQiCMS at the bottom level.

AnQiCMS as an enterprise-level content management system developed based on the Go language, one of its core advantages is itsmodular and high-performance architecture. Each template tag, for examplecategoryListAnd used to get the classification list of content models such as articles or productspageList(Used to retrieve independent single-page lists, such as “About Us”, “Contact Us”, etc.), all representing independent queries and processing of different back-end data sources.

  • Data isolation: categoryListThe query is for the classification data associated with content models (such as articles, products), which have hierarchical structures and specific properties. AndpageListFocusing on independent, non-modeled single-page content. Their data storage logic and acquisition methods are completely separated on the backend, without interference.
  • Independent execution:When AnQiCMS's template engine (similar to Django template engine) renders a page, it parses each tag in order.Each tag will independently execute its data query task and fill the results into the specified template variables.This process is concurrent and independent; the data acquisition of one label will not affect another label.
  • Variable binding:The label is bound to the template context through the specified variable name (such as{% categoryList categories ... %}or{% pageList pages ... %}) to bind the query results. As long as these variable names are unique withintheir respective scopes, the data will not be confused.

In short, you cancategoryListandpageListImagine two chefs each responsible for their own tasks, one preparing the 'dishes category list' on the menu, and the other preparing the 'special page introduction'.They take different ingredients from different refrigerators (database tables), process them at their own workstations (backend logic), and finally put the finished dishes into different plates (template variables), presenting them on the same table (page), the whole process is orderly and without any conflicts.

Be vigilant of "false conflicts": common misconceptions and ways to avoid them

Although the label itself does not conflict, in actual development, users sometimes encounter some seemingly "conflictingUnderstand these misconceptions and avoid them to make your template development smoother.

  1. Variable naming confusion: This is the most common trap. If two tags use the same variable name without distinction, for example, you first use{% categoryList list %}obtained the category list, then again use{% pageList list %}Retrieve a single-page list, then the content of the latter will directly overwrite the variable of the former. When you try to iterate through the code on the subsequent pagelistat that time, you may have only obtained single-page data, and mistakenly think thatcategoryList“Disappeared” or “conflicted”.

    • The way to avoid:Always use different labels for different results:Unique and meaningful variable namesFor example,{% categoryList categories ... %}and{% pageList staticPages ... %}, like thiscategoriesandstaticPagesare two completely independent variables, mutually unaffected.

  2. HTML structure and CSS style overlap:When you display multiple lists on the same page, if their HTML structure is too general (such as all using the fact that they used the same HTML structure for all of them)<ul class="list">)，and the CSS styles also use general selectors, then the styles of one list may contaminate another list, causing visual confusion and thus being mistakenly considered as a data conflict.

    • The way to avoid:Provide a unique and clear ID or class name for each list parent containerUnique and clear ID or class nameAnd accurately locate the style through CSS selectors. For example,<div id="category-navigation">and<div id="footer-pages">Then write#category-navigation ul li { ... }and#footer-pages ul li { ... }Such CSS rules.

  3. Template logic confusion:Sometimes, developers may accidentally place the condition judgment or data field intended for another list in the wrong position when handling the loop logic of a list, resulting in rendering results that are not as expected.

    • The way to avoid:When writing template logic, maintain a clear mind,be clear about which variable you are processingdata. Use AnQiCMS template syntax, such as{% if categories %}to ensure that only whencategoriesWhen the variable exists and is not empty, the relevant logic is executed.

3. Practice makes perfect: Build a harmonious coexisting page layout.

To fully utilize the powerful functions of AnQiCMS and harmoniously display various information on the same page, it is crucial to follow the following practice principles:

  1. Use variable naming well:This is the most basic and most important principle.categoryListandpageListAssign completely different variable names, for example:

    {# 侧边栏的分类导航 #}
<div id="sidebar-category-nav">
    {% categoryList siteCategories with moduleId="1" parentId="0" %}
        <ul>
            {% for cat in siteCategories %}
                <li><a href="{{ cat.Link }}">{{ cat.Title }}</a></li>
            {% endfor %}
        </ul>
    {% endcategoryList %}
</div>


{# 底部公司信息单页链接 #}
<div id="footer-static-pages">
    {% pageList companyPages %}
        <ul>
            {% for page in companyPages %}
                <li><a href="{{ page.Link }}">{{ page.Title }}</a></li>
            {% endfor %}
        </ul>
    {% endpageList %}
</div>

    BysiteCategoriesandcompanyPagesWith such clear naming, you can immediately know which variable corresponds to which part of the data.

  2. Clarify the HTML structure and scope:Place content rendered from different data sources in independent HTML containers and assign unique IDs or classes.This not only helps to isolate styles, but also makes the code structure clear and easy to maintain.

    {# 顶部主导航可能包含分类列表 #}
<nav id="main-nav">
    {% categoryList mainNavCategories with moduleId="1" parentId="0" limit="5" %}
        <ul>
            {% for cat in mainNavCategories %}
                <li><a href="{{ cat.Link }}">{{ cat.Title }}</a></li>
            {% endfor %}
        </ul>
    {% endcategoryList %}
</nav>


    <section id="latest-news">
    <h2>最新文章</h2>
    {# 文章列表 #}
    {% archiveList latestArticles with type="list" moduleId="1" limit="10" %}
        <ul>
            {% for article in latestArticles %}
                <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
            {% endfor %}
        </ul>
    {% endarchiveList %}
</section>


<aside id="about-us-section">
    <h3>关于我们</h3>
    {# 特定单页内容 #}
    {% pageDetail aboutPageContent with token="about-us" %}
        <p>{{ aboutPageContent.Description|truncatechars:100 }}</p>
        <a href="{{ aboutPageContent.Link }}">了解更多</a>
    {% endpageDetail %}
</aside>