As an experienced CMS website operation personnel of security, I know that every aspect of content creation and management cannot be separated from a flexible and efficient template system.English CMS offers us great convenience with its simple design and powerful features.In template design, mastering various built-in tags is the key to building high-quality, user-friendly websites.systemandarchiveListEnglish translation: ,as well as how they help us achieve rich and diverse content display.
Mastering Content Display: In-depth Analysis of Common Tags in AnqiCMS Templates
AnqiCMS uses syntax similar to Django template engine, making the template creation process intuitive and easy to learn. Variables are passed through double curly braces{{变量}}Definition, while conditional judgment and loop control tags use single curly braces and percent signs{% 标签 %}and must be terminated with a closing tag{% end标签 %}Pairs appear. Understanding these basic rules is the premise of efficiently using AnqiCMS template tags.
Get the global system configuration:systemThe Use of Tags
systemLabels are the tools we use to obtain global configuration information in the AnqiCMS template.It allows us to easily retrieve the core data such as website name, Logo, record number, copyright information, etc. configured in the "Global Function Settings" background, as well as our custom global parameters.This allows us to dynamically display this information on any page of the website, especially in the common header and footer sections, avoiding the maintenance inconvenience brought by hard coding.
systemThe basic format of the label is{% system 变量名称 with name="字段名称" %}Where the 'variable name' is optional, we can use the variable to refer to the data obtained; if not set, the tag will directly output the value of the field.
This tag supports a key parametersiteIdIn the environment where AnqiCMS supports multi-site management, if we need to get the system configuration of a specific site, we can throughsiteIdParameters are specified, but in most cases, it will automatically obtain the configuration of the current site without additional settings.
The available field names cover all aspects of the website:
SiteName: Site nameSiteLogo:Website Logo Image AddressSiteIcp:Website Record NumberSiteCopyright:Copyright ContentBaseUrl:Website Home Page AddressMobileUrl:Website Mobile Page AddressTemplateUrl:Template static file address (CSS, JS, images, etc.)TemplateName:Current template directory nameSiteCloseTips:Website shutdown prompt contentLanguage:Site 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 part, and to show the record number and copyright information in the footer at the same time, 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>
© {% 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, all can be dynamically obtained and displayed from the background, greatly improving the reusability and maintainability of the template.
Dynamic content aggregator:archiveListDeep analysis of tags
archiveListThe label is the most core and powerful content display label in 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 documents under various models (such as articles, products, etc.) according to rich parameters.archiveListCan handle it with ease.
archiveListThe basic format of the label is{% archiveList 变量名称 with 参数="值" %}{% for item in 变量名称 %}...{% endfor %}{% endarchiveList %}. Usually, we assign the document list obtained to a variable (for example,archives), then throughforLoop through this variable to render each document one by one.
This tag supports an extremely rich set of parameters, providing high flexibility:
moduleId指定要获取哪个内容模型下的文档列表,如moduleId="1"获取文章模型,moduleId="2"获取产品模型。categoryId:Get the document list under the specified category ID. You can enter a single ID or multiple IDs separated by commas (such ascategoryId="1,2,3")。If set to0Then, the current page category ID is not automatically read.excludeCategoryIdExclude documents with specified category ID.userIdGet documents published by specified user.parentId:Get the child documents under the specified parent document ID (for example, display related accessories on the product detail page).flag:According to the recommended properties set in the background (such as headlines [h], recommendations [c] etc.) to filter documents.excludeFlag:Exclude documents with specified recommended properties.showFlag:Is the Flag attribute of the document displayed in the document list, default asfalse.child:Whether to include documents under subcategories, default astrue。Set tofalsethen only display documents in the current category.order:Specify the sorting rule, 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 separated by a comma to specify the offset and number (such as2,10to start from the 2nd item and get 10 items).type:Define list type.list:Common list, sorted bylimitspecified quantity display.page:Page list, needs to be used in conjunction withpaginationUse the label.related:Document list, usually used on the document detail page, and can be searched according to keywords or related recommendations set in the background.
q:Search keywords, only available intype="page"Effective immediately, it can be used to implement in-site search.- Custom filter parameters: After the backend content model defines the fields that can be filtered, these fields can be appended to the query parameters in the URL.
archiveListThe selection will be performed automatically. siteId:Same.systemTags used to retrieve document data from specific sites.combineId/combineFromIdEnglish for implementing special parameters for document composition display, often used to generate titles like 'Travel route from A to B', providing new possibilities for content creation.
Inforin the loop,itemThe variable represents the current document object being traversed, and the available fields include:Id(Document ID)Title(Document title),Link(Document link),Description(Document description),Logo(Cover first image),Thumb[Thumbnail],CreatedTime(Added time, must use)}]stampToDateFormat),Views(Views) 等,as well as other custom fields defined in the content model.
Let's look at some actual application scenarios:
1. Show the latest article list (Regular 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 fetch the latest 5 articles under the article model and display their thumbnails, titles, descriptions, and publishing time.onerror属性是一个小技巧,用于在图片加载失败时显示默认图片。truncatechars:100则用于截断描述,防止过长。
2. In the article detail page, display related recommendations (related document types):
<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"It will automatically recommend relevant documents based on the current document's classification, keywords, and other information, greatly enhancing the user experience.
3. Display a paginated list of articles (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 paginated data, thenpaginationThe label is responsible for rendering the complete page navigation. This is very practical in scenarios such as blogs, news lists, etc.
By processingsystemandarchiveListA deep understanding and flexible application of these core tags can greatly enhance the content display capability and operational efficiency of the AnqiCMS website.They are the foundation for building dynamic, rich, and easy-to-maintain AnqiCMS sites.
Common Questions and Answers (FAQ)
How can I obtain the background custom global configuration information in the template, such as the company phone number or social media link?
Anqi CMS'ssystemTags can not only obtain preset system information, but also obtain the custom parameters you set in the "Global Function Settings" or "Contact Information Settings" on the background. For example, if you customize a name in the backgroundWhatsAppThe contact information field, you can access and display it in the template like this:.<div>联系WhatsApp:{% contact with name="WhatsApp" %}</div>Similarly, if you have added custom parameters in the global settings, for example.helpPageUrlYou can call it like this:<div>帮助页面:{% system with name="helpPageUrl" %}</div>This template provides great flexibility, allowing the display content to be dynamically expanded according to actual operational needs.
2. When I usearchiveListHow should I display a friendly prompt to the user when there is no content while retrieving the document list?
archiveListTags andforWhen using in combination with loops, it can be utilized{% empty %}Tags can be used to handle an empty list