How to display different content in the `categoryList` loop based on the different `moduleId`?

As an experienced website operation expert, I am well aware that the flexibility of content presentation is crucial for user experience and operational efficiency.AnQiCMS (AnQiCMS) provides a powerful tool for implementing this flexibility with its strong template engine and content model mechanism.Today, let's delve into a very practical scenario: how tocategoryListIn a loop, displaying content with differentmoduleIdsmartly, each with its own characteristics.

Use cleverlymoduleIdEnabling the Anqi CMS category list to be varied in content.

In the template development of AnQi CMS,categoryListThe tag is undoubtedly the core of building navigation and classification blocks. It allows us to easily navigate the website's classification structure.However, the content of the website is often diverse, we may have articles, products, services and other types of information.When these different types of content are categorized under different "content models", how can they be listed in the same category according to the content model they belong to (i.e.,moduleIdThis is a topic of advanced level to display different content layouts and information.

The Anqi CMS template engine supports Django-style syntax, which means we can take advantage of powerful conditional judgment and loop structures to achieve highly customized content display. Among them,moduleIdIt is the key 'bridge' that connects the classification and content model and enables dynamic display.

UnderstandingcategoryListwithmoduleIdcollaboration

First, we know{% categoryList categories %}The label can obtain a series of classification data. Within the loop, each classification object is usually nameditemIt contains various attributes of the classification, such asitem.Id/item.Title/item.Linketc.

Anditem.ModuleIdThis attribute is the main character of today. It records the ID of the content model associated with the current category. According to the default settings of Anqi CMS, the article model is usually correspondingmoduleId=1，The product model corresponds tomoduleId=2. If we customize other content models, they will also have correspondingmoduleId.

Nowitem.ModuleId，we cancategoryListInside the loop, different logic is executed according to different model IDs, thus displaying completely different content layouts.This is like tailoring a 'display mode' for each category content model.

Core technology:ifThe wonderful use of conditional judgment

The core of achieving this goal lies incategoryListUsing a loopifmaking conditional judgments with tags. The basic structure will be like this:

{% categoryList categories with parentId="0" %}
    {% for item in categories %}
        <div class="category-block">
            <h3><a href="{{ item.Link }}">{{item.Title}}</a></h3>
            {% if item.ModuleId == 1 %}
                {# 文章模型的分类，展示文章列表 #}
                <div class="articles-list">
                    <h4>最新文章</h4>
                    <ul>
                    {% archiveList archives with type="list" categoryId=item.Id limit="5" %}
                        {% for archive in archives %}
                            <li>
                                <a href="{{archive.Link}}">{{archive.Title}}</a>
                                <span>({{stampToDate(archive.CreatedTime, "2006-01-02")}} - {{archive.Views}}阅读)</span>
                            </li>
                        {% empty %}
                            <li>暂无文章内容</li>
                        {% endfor %}
                    {% endarchiveList %}
                    </ul>
                </div>
            {% elif item.ModuleId == 2 %}
                {# 产品模型的分类，展示产品图片和名称 #}
                <div class="products-grid">
                    <h4>热门产品</h4>
                    <ul class="product-items">
                    {% archiveList products with type="list" categoryId=item.Id limit="4" %}
                        {% for product in products %}
                            <li>
                                <a href="{{product.Link}}">
                                    <img src="{{product.Thumb}}" alt="{{product.Title}}" loading="lazy">
                                    <p>{{product.Title}}</p>
                                    <span class="price">${{product.Price}}</span>
                                </a>
                            </li>
                        {% empty %}
                            <li>暂无产品内容</li>
                        {% endfor %}
                    {% endarchiveList %}
                    </ul>
                </div>
            {% else %}
                {# 其他模型的分类，或者默认展示方式 #}
                <div class="default-content">
                    <p>这是一个特殊的分类：{{item.Title}}，其所属模型ID为：{{item.ModuleId}}。</p>
                    <a href="{{ item.Link }}">查看更多</a>
                </div>
            {% endif %}
        </div>
    {% endfor %}
{% endcategoryList %}

In this code, we first usecategoryListGet the top-level categories. Then, in each categoryitemloop, we go through{% if item.ModuleId == 1 %}and{% elif item.ModuleId == 2 %}To determine which content model the current category belongs to.

  • Ifitem.ModuleIdIs1(Article model), we use this block.archiveListTag, and pass in the current category ID (categoryId=item.IdTo get the latest articles in this category, display them briefly with the title, publication date, and reading volume.
  • Ifitem.ModuleIdIs2(Product model), we use the same one as well.archiveListGet the products under this category, but change the display mode to product thumbnails, names, and prices, which is more in line with the product display requirements.
  • The last{% else %}Part can be used as a general or alternative display method, which can be used to handle unknownsmoduleIdOr as a default display.

The advantage of this approach is that it encapsulates the display logic of different content models in their respective conditional branches, making the code structure clear, easy to maintain and expand. When a new content model needs to be added, simply add a newelifBranch it.

**Practice and Precautions

  1. clearmoduleIdCorresponding relationship:In the background "Content Management"->"Content Model", you can view the detailed information of each content model, including its ID. Be sure to remember or record the commonly usedmoduleIdValues, so that they can be accurately referenced in the template.
  2. nestedarchiveList:Generally, we hope to display the specific document content under the category in the category list, rather than just the description of the category itself. Therefore,categoryListnested in the looparchiveListtags and usecategoryId=item.Idis a common and efficient way to associate the current category
  3. Make good use oflimitparameters:to ensure page loading speed and layout aesthetics, inarchiveLista reasonable setting inlimitParameters, limit the number of documents displayed under each category.
  4. Modular template:WhenifWhen the content block within a branch becomes complex, consider using{% include "partial/article_preview.html" with archives=archives %}In this way, split the display logic of each model type into separate template fragments to improve code readability and reusability.
  5. Performance consideration: Although AnQiCMS is developed based on Go language, it performs well, but too many nested loops or complex queries may still affect page loading.Reasonably design data structures, avoid loading too much unnecessary data in a single request.

In this way, we can be on any page of the website (such as the homepage, sidebar