How to use common tags in AnqiCMS templates (such as `system`, `archiveList`)?

As a senior Anqi CMS website operation personnel, I know that every link of content creation and management cannot be separated from a flexible and efficient template system.AnQi CMS with its simple design and powerful functions provides us with great convenience.In template design, proficiently using various built-in tags is the key to building high-quality, user-friendly websites.Today, I will give you a detailed explanation of the two most commonly used and powerful tags in the AnqiCMS template:systemandarchiveListAnd how they help us achieve rich and diverse content display.

Mastering content display: In-depth analysis of common tags in AnqiCMS templates.

AnqiCMS uses a syntax similar to the Django template engine, making the template creation process intuitive and easy to learn. Variables are passed through double curly braces{{变量}}Define, while conditional judgment and loop control tags use single curly braces and percent signs{% 标签 %}And it must be terminated with the end tag{% end标签 %}Pair up. Understanding these basic rules is the premise of efficiently using AnqiCMS template tags.

Get the system global configuration:systemThe use of tags

systemThe tag is a powerful tool for obtaining the global configuration information of the AnqiCMS template.It allows us to easily retrieve the core data such as website name, Logo, filing number, copyright information, etc. configured in the background "Global Function Settings", including even our custom global parameters.This allows us to dynamically display this information on any page of the website, especially on the common header and footer sections, avoiding the maintenance inconvenience brought by hardcoding.

systemThe basic format of tags is{% system 变量名称 with name="字段名称" %}where the variable name is optional, if set, we can refer to the data obtained through the variable; if not set, the label will directly output the field value.

This tag supports a key parametersiteId. In the multi-site management environment supported by AnqiCMS, if we need to obtain the system configuration of a specific site, we can access it throughsiteIdThe parameter is specified, but usually, it will automatically obtain the configuration of the current site without any additional settings.

The available field names cover all aspects of the website:

  • SiteName: Website name
  • SiteLogo：Website Logo Image Address
  • SiteIcp：Website Registration Number
  • SiteCopyright：Copyright Content
  • BaseUrl：Website Home Page Address
  • MobileUrl：Website Mobile Page Address
  • TemplateUrlTemplate static file address (CSS, JS, images, etc.)
  • TemplateNameCurrent template directory name
  • SiteCloseTipsWebsite shutdown prompt content
  • LanguageSite language
  • And all parameter names customized in the background "Global Feature Settings".

For example, to display the website logo and link to the homepage in the header, and to display the filing number and copyright information in the footer, we can write the template code as follows:

{# 页面头部示例 #}
<header>
    <a href="{% system with name="BaseUrl" %}">
        <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
    </a>
    <nav>
        {# 导航列表通常会使用 navList 标签，此处省略 #}
    </nav>
</header>

{# 页面底部示例 #}
<footer>
    <p>
        <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a>
        &copy; {% now "2006" %} {% system with name="SiteCopyright" %}
    </p>
    <p>Powered by <a href="https://en.anqicms.com" target="_blank">AnQiCMS</a></p>
</footer>

Through the above code, whether it is the website name, Logo image path, or filing information, it can all be dynamically obtained and displayed from the background, greatly improving the reusability and maintainability of the template.

Dynamic content aggregator:archiveListIn-depth analysis of tags

archiveListThe tag is the most core and powerful content display tag in the AnqiCMS template.It is not only used to obtain a list of articles, but also a multifunctional 'content aggregator' that can filter, sort, and display various models of documents (such as articles, products, etc.) based on rich parameters.Whether it is a common article list, related document recommendations, or pagination content display,archiveListCan do it effortlessly.

archiveListThe basic format of tags is{% archiveList 变量名称 with 参数="值" %}{% for item in 变量名称 %}...{% endfor %}{% endarchiveList %} Typically, we would assign the list of documents obtained to a variable (for examplearchivesThen proceedforLoop through this variable to render each document one by one.

This tag supports an extremely rich set of parameters, providing high flexibility:

  • moduleId: Specify which content model's document list to retrieve, such asmoduleId="1"Retrieve the article model,moduleId="2"Retrieve the product model.
  • categoryId: Get the document list under the specified category ID. You can pass a single ID or multiple IDs separated by commas (such ascategoryId="1,2,3")。If set to0It does not automatically read the current page category ID.
  • excludeCategoryId: Exclude documents with specified category ID.
  • userId: Get documents published by specified user.
  • parentId: Retrieve the child documents under the specified parent document ID (for example, to display related accessories on the product detail page).
  • flag：According to the recommended attributes set in the background (such as headlines[h], recommendations[c] etc.), filter documents.
  • excludeFlag：Exclude documents with specified recommended attributes.
  • showFlag: Whether to display the document's Flag attribute in the document list, the default isfalse.
  • child: Whether to include documents under subcategories, the default istrue. Set tofalseThen only show documents in the current category.
  • order: Specify the sorting rules, such asid desc(Latest release),views desc(Most viewed),sort desc(Custom sorting by backend).
  • limit: Control the number of displayed items. You can specify a number (such as10），or by separating the offset and quantity with a comma (e.g.,2,10to retrieve 10 items starting from the second one).
  • type: Defines list type.
    • list: Common list, sorted bylimitto display a specified number of items.
    • page: Pagination list, needs to be配合paginationlabel usage
    • related: Related document list, usually used on the document detail page, can be recommended based on keywords or association settings in the background.
  • q: Search keywords, only intype="page"It takes effect at the same time and can be used to implement in-site search.
  • Custom filter parameters: After the background content model defines filterable fields, these fields can be attached to the query parameters in the URL.archiveListIt will automatically perform filtering.
  • siteId: SamesystemTag, used to retrieve document data from specific sites.
  • combineId/combineFromIdA special parameter used to achieve the display of document composition, often used to generate titles like 'Travel route from A to B', providing new possibilities for content creation.

Inforthe loop,itemThe variable represents the current document object being traversed, its available fields include:Id(document ID),Title(Document title),Link(Document link),Description(Document Description),Logo(Cover main image),Thumb(Thumbnail),CreatedTime(Add time, need to usestampToDateformatting,)Views(Page views) et al., as well as other custom fields defined in the content model.

Let's look at a few practical application scenarios:

1. Display the latest article list (standard list type):

<section class="latest-articles">
    <h2>最新文章</h2>
    <ul>
        {% archiveList articles with moduleId="1" order="id desc" limit="5" %}
            {% for item in articles %}
                <li>
                    <a href="{{ item.Link }}">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" onerror="this.onerror=null;this.src='{% system with name='TemplateUrl' %}/images/default-thumb.jpg';" />
                        <h3>{{ item.Title }}</h3>
                        <p>{{ item.Description|truncatechars:100 }}</p>
                        <span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    </a>
                </li>
            {% empty %}
                <li>暂无最新文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

Here we retrieve the latest 5 articles under the article model and display their thumbnails, titles, descriptions, and publication times.onerrorProperty is a trick used to display the default image when the image fails to load.truncatechars:100It is used to truncate the description to prevent it from being too long.

2. Show related recommendations (related document types) on the article detail page:

<aside class="related-articles">
    <h3>相关推荐</h3>
    <ul>
        {% archiveList relatedDocs with type="related" limit="3" %}
            {% for item in relatedDocs %}
                <li>
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                </li>
            {% empty %}
                <li>暂无相关推荐。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</aside>

type="related"Automatically recommends relevant documents based on the current document's categories, keywords, and other information, greatly enhancing the user experience.

3. Show article list with pagination (pagination list type):

<section class="blog-list">
    {% archiveList articles with moduleId="1" type="page" limit="10" %}
        {% for item in articles %}
            <article>
                <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
                <p>{{ item.Description }}</p>
                <span>阅读量：{{ item.Views }}</span>
            </article>
        {% empty %}
            <p>没有找到任何文章。</p>
        {% endfor %}

        {# 配合 pagination 标签实现分页 #}
        {% pagination pages with show="5" %}
            <div class="pagination-nav">
                {% if pages.FirstPage %}<a href="{{ pages.FirstPage.Link }}">首页</a>{% endif %}
                {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
                {% for pageItem in pages.Pages %}
                    <a href="{{ pageItem.Link }}" class="{% if pageItem.IsCurrent %}active{% endif %}">{{ pageItem.Name }}</a>
                {% endfor %}
                {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
                {% if pages.LastPage %}<a href="{{ pages.LastPage.Link }}">尾页</a>{% endif %}
            </div>
        {% endpagination %}
    {% endarchiveList %}
</section>

Here, type="page"Tell AnqiCMS that we need pagination data, thenpaginationThe tag is responsible for rendering the complete page navigation. This is very practical in scenarios such as blogs, news lists.

By processingsystemandarchiveListA deep understanding and flexible application of these core tags can greatly enhance the content display and operational efficiency of the AnqiCMS website.They are the foundation for building dynamic, rich, and easy-to-maintain AnqiCMS websites.

Frequently Asked Questions (FAQ)

1. How can I get the background custom global configuration information in the template, such as the company phone number or social media links?

Of Security CMSsystemLabels can not only obtain preset system information, but also obtain customized parameters in the background "Global Function Settings" or "Contact Information Settings". For example, if you customize a name in the backgroundWhatsAppThe contact information field, you can retrieve and display it in the template like this:<div>联系WhatsApp：{% contact with name="WhatsApp" %}</div>Similarly, if you add custom parameters in the global settings, for examplehelpPageUrlYou can call it like this:<div>帮助页面：{% system with name="helpPageUrl" %}</div>This template provides great flexibility, and the display content can be dynamically expanded according to actual operating needs.

2. When I usearchiveListHow should I display a friendly prompt to the user when there is no content in the document list?

archiveListwith the tag andforWhen used in combination with loops, you can take advantage of{% empty %}tags to handle an empty list