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

As a senior website operation expert, I know that the flexibility of content presentation is crucial for user experience and operational efficiency.AnQiCMS (AnQiCMS) provides us with powerful tools to achieve this flexibility with its strong template engine and content model mechanism.categoryListIn the loop, display content according to differentmoduleIdsmartly, displaying distinctive content.

use cleverlymoduleIdAllowing the CMS classification list content to change constantly

In the template development of Anqi CMS,categoryListThe tag is undoubtedly the core of building navigation and classification blocks.It allows us to easily traverse the website's category structure.However, the content of the website is often diverse, including articles, products, services, and other types of information.moduleIdTo demonstrate different content layouts and information, it has become an advanced topic.

The template engine of AnQi CMS supports Django-style syntax, which means we can make use of powerful conditional judgment and loop structures to achieve highly customized content display.moduleIdIt is the key 'bridge' that connects the classification with the content model and realizes dynamic display.

UnderstandingcategoryListWithmoduleIdcollaboration

Firstly, we know{% categoryList categories %}Labels can retrieve a series of classification data. Within the loop body, each classification object is usually nameditem, it contains various attributes of the classification, such asitem.Id/item.Title/item.Linketc.

whileitem.ModuleIdThis attribute is the main focus 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,产品模型则对应 EnglishmoduleId=2。如果我们自定义了其他内容模型,它们也会有相应的 EnglishmoduleId.

Henceitem.ModuleId,我们就可以在 EnglishcategoryListIn the loop, different logic is executed based on different model IDs, thus displaying completely different content layouts.This is like customizing a "display mode" for each category content model.

核心技术: Englishif条件判断的妙用 English

The core of achieving this goal lies incategoryListuse in a loop.ifmaking conditional judgments by 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.ModuleIdYes1(Article model), we use it in this block.archiveListTag, and pass in the ID of the current category (categoryId=item.IdTo get the latest articles under this category, display them briefly with the title, publication date, and reading volume.
  • Ifitem.ModuleIdYes2(Product Model), we also usearchiveListGet the products under this category, but the display mode changes to product thumbnails, names, and prices, which is more in line with the product display requirements.
  • The last{% else %}Part of it can be used as a general or backup display method, which can be used to handle unknown situations.moduleIdOr as a default display.

The advantage of this method is that it encapsulates the display logic of different content models in their respective conditional branches, making the code structure clear and easy to maintain and expand. When new content models need to be added, only new ones need to be added.elifBranching is possible.

**Practical Tips and Considerations

  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 usedmoduleIdValue, so that it can be accurately referenced in the template.
  2. NestedarchiveList:通常,我们希望在分类列表中展示的是该分类下的具体文档内容,而不是仅仅分类本身的描述。因此,在categoryList的循环内部嵌套archiveListtags and usecategoryId=item.IdIt is a common and efficient practice to associate the current category.
  3. Use wiselylimitParameters:To ensure page loading speed and layout aesthetics,archiveListset it reasonably inlimitparameters, limiting the number of documents displayed under each category.
  4. Modular template:WhenifBranch content blocks become complex when, consider using{% include "partial/article_preview.html" with archives=archives %}Such as, split the display logic of each model type into separate template fragments to improve code readability and reusability.
  5. Performance considerations:Although AnQiCMS is developed based on Go language and performs excellently, excessive nested loops or complex queries may still affect page loading.Rationally design data structures, avoid loading too much unnecessary data in one request.

Through this method, we can access any page on the website (such as the homepage, sidebar