As a website operator who is well-versed in the operation of AnQiCMS, I know that content is the cornerstone of the website, and flexible and efficient content calls are the key to improving user experience and optimizing operational efficiency.AnQiCMS's powerful template tag system is the core tool we use to achieve this goal.It allows us to accurately control the display of document lists, category lists, and single-page details, thereby building a website page that is both aesthetically pleasing and functional.
Overview of AnQiCMS template tag basics and content calls
AnQiCMS uses a syntax similar to the Django template engine, defining template tags and variables in an intuitive and easy-to-understand way. Variables are usually enclosed in double curly braces{{变量}}Appear in form, while control structures such as conditional judgments and loops use single curly braces and percentage signs{% 标签 %}Define it, and close it with the corresponding end tag.All template files should use UTF-8 encoding to ensure correct display.articleandproductTags have been unified into more general onesarchiveA series of tags, which makes the call to the content model more consistent and flexible.
In AnQiCMS, content calls are not limited to global configuration, we can also achieve high customization by specifying independent template files for specific documents, categories, or single pages in the background. For example, to create a document with ID 10,{模型table}/10.htmltemplate, or create for a specific category{模型table}/list-5.htmllist template, as well as for the 'About Us' pagepage/about.htmlThe template. This fine-grained template definition capability provides great convenience for us to uniquely display for different content or page needs.
Flexible Access to Document List (Archive List)
To implement the list display of various documents on the website (such as articles, products, news, etc.),archiveListTags are the most commonly used tools.This tag feature is rich, it can filter, sort and limit the display quantity of documents according to various conditions, whether it is to build a simple list of the latest articles or a complex list with pagination and related content, it can cope with it easily.
While usingarchiveListwe can usemoduleIdThe parameter specifies the content model to be called, for examplemoduleId="1"Indicates the article model.categoryIdParameters allow us to retrieve documents under specific categories, even by passing multiple category IDs separated by commas. To achieve more fine-grained control,orderParameters can define sorting rules (such as descending by IDid descor by view countviews desc)limitParameters control the number of items displayed and supportoffsetpatterns (such aslimit="2,10"Indicates starting from the 2nd item and taking 10 items).
archiveListoftypeThe parameter is an important embodiment of its flexibility, which determines the display form of the list.type="list"Suitable for simple fixed quantity lists;type="page"It is used for scenarios that require pagination,配合paginationThe tag can build a complete pagination feature；andtype="related"Can intelligently obtain documents related to the current document, whether based on keywords or manually set associations in the background. In addition, we can also utilizeflagFilter documents with specific recommendation attributes (such as headline, recommendation, slideshow, etc.) or useqParameters to implement keyword search. For filtering combined with custom fields,archiveFiltersTags provide the convenience of building complex filtering conditions, allowing users to filter content based on article parameters across multiple dimensions.
{# 示例：获取文章模型下ID为1的分类中的最新10篇文档 #}
{% archiveList archives with moduleId="1" categoryId="1" order="id desc" limit="10" %}
{% for item in archives %}
<a href="{{item.Link}}">{{item.Title}} - {{stampToDate(item.CreatedTime, "2006-01-02")}}</a>
{% endfor %}
{% endarchiveList %}
{# 示例：带有分页功能的文章列表 #}
{% archiveList articles with type="page" moduleId="1" limit="10" %}
{% for item in articles %}
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description}}</p>
{% endfor %}
{% pagination pages with show="5" %}
{# 分页链接的渲染 #}
{% endpagination %}
{% endarchiveList %}
Flexible invocation of category list (Category List)
The site's category navigation is an important entry point for users to browse content.categoryListTags provide us with an extremely flexible way to build and display classification structures. We can use them tomoduleIdaccess the classification of a specific content model (such as articles or products), byparentIdThe parameter specifies to get the top-level category (parentId="0"），or get the child categories of a parent category. Even when we need to display the sibling categories of the current document category on the document detail page, we can setparentId="parent".
categoryListthe tags returned byitemThe object contains various information such as category ID, title, link, description, thumbnail, and oneHasChildrenBoolean values make it convenient for us to determine whether the current category has subcategories, thereby achieving nested display of multi-level categories.This is crucial for constructing complex website navigation, sidebar category trees, or product category navigation.categoryListwitharchiveListCombine usage, while displaying categories in a loop, list part of the documents under each category to form a rich content aggregation page.
{# 示例：显示文章模型的顶级分类 #}
{% categoryList topCategories with moduleId="1" parentId="0" %}
{% for category in topCategories %}
<a href="{{category.Link}}">{{category.Title}}</a>
{# 如果有子分类，可以嵌套调用 #}
{% if category.HasChildren %}
{% categoryList subCategories with parentId=category.Id %}
{% for subCategory in subCategories %}
<a href="{{subCategory.Link}}">{{subCategory.Title}}</a>
{% endfor %}
{% endcategoryList %}
{% endif %}
{% endfor %}
{% endcategoryList %}
{# 示例：同时显示分类和其下的文档 #}
{% categoryList categories with moduleId="2" parentId="0" %}
{% for cat in categories %}
<h2>{{cat.Title}}</h2>
{% archiveList products with categoryId=cat.Id limit="4" %}
{% for product in products %}
<p><a href="{{product.Link}}">{{product.Title}}</a></p>
{% endfor %}
{% endarchiveList %}
{% endfor %}
{% endcategoryList %}
Flexibly invoke the single-page detail (Page Detail)
For pages with fixed content such as "About UspageDetailTags are used to retrieve the specific content of these single pages. By specifying the single page'sidortoken(URL alias), we can accurately call the detail data of any single page.
pageDetailThe single-page object includes the page title, link, description, content, thumbnail, and carousel imageImagesWait field.This allows us to not only display plain text content, but also flexibly embed images, sliders, and other media elements.For pages requiring a special layout, we can achieve a completely customized page design by specifying an independent template file for that page in the background, for example, designing a unique layout with a map and form for the "Contact Us" page.
{# 示例：获取ID为1的单页内容，通常用于“关于我们”页面 #}
{% pageDetail aboutPage with id="1" %}
<h1>{{aboutPage.Title}}</h1>
<div>{{aboutPage.Content|safe}}</div>
{% if aboutPage.Images %}
{% for img in aboutPage.Images %}
<img src="{{img}}" alt="{{aboutPage.Title}} Banner">
{% endfor %}
{% endif %}
{% endpageDetail %}
Flexible call document details (Archive Detail)
When the user clicks to enter a specific article or product page,archiveDetailThe tag is responsible for displaying all the details of the document. This tag usually automatically retrieves the document data of the current page on the document detail page, but it can also be done throughidortokenThe parameter specifies to get the details of other documents.
archiveDetailThe tag can obtain the document ID, title, SEO information, link, keywords, description, content (supports Markdown to HTML and lazy loading of images), views, category information, cover image, creation/update time, and all custom model fields. For the content field, it can even return the title structure of the contentContentTitlesarchiveDetail with name="字段名"Get individually or loop through.
{# 示例：在文档详情页显示文章标题、内容、分类和发布时间 #}
<h1>{% archiveDetail with name="Title" %}</h1>
<p>分类：<a href="{% categoryDetail with name="Link" id=archive.CategoryId %}">{% categoryDetail with name="Title" id=archive.CategoryId %}</a></p>
<p>发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</p>
<div>
{% archiveDetail articleContent with name="Content" render=true lazy="data-src" %}
{{articleContent|safe}}
</div>
{# 示例：获取自定义字段，如产品价格 #}
<p>产品价格：{% archiveDetail with name="price" %}元</p>
Overview of template creation conventions and advanced usage
AnQiCMS not only provides powerful tags, but also through a set of clear template creation conventions, such as/templateDirectory structure,config.jsonConfiguration file and,bash.htmlCommon code files are used to standardize and simplify template development.These agreements support adaptive, code adaptation, and PC+mobile independent site modes, ensuring high compatibility of the template.ifConditional judgment,forLoop traversal,includeTemplate reference,extendstemplate inheritance and general tags, as well asstampToDatetime formatting,paginationPage navigation and auxiliary labels together constitute a flexible and powerful template system.Mastering these will help us build a website that meets business requirements and has good user experience and SEO performance.
The template tag system of AnQiCMS gives website operators a high degree of freedom and creativity.By flexibly calling document lists, category lists, and single-page details, we can easily achieve diverse content display needs, whether it is to create a rich information portal or build a product display platform with complete functions, AnQiCMS provides solid technical support.
Frequently Asked Questions (FAQ)
**1. How to specify a specific document or category,