As an experienced security CMS website operator, I am well aware of the importance of a clear and efficient template system for website content management.AnQiCMS provides a highly flexible and customizable template system, allowing us to easily create personalized page layouts based on different business needs.Mastering the creation method of its default template is the foundation for efficient operation and content optimization.
This article will detail how to create default templates for the model homepage, document detail page, and list page of AnQiCMS, and provide instructions on the use of key tags to ensure that the content is presented accurately and correctly to the user.
AnQiCMS Template System Overview
AnQiCMS's template system is designed to provide a simple yet powerful content display capability. It uses a syntax similar to the Django template engine, using.htmlFile as a template, and uniformly stored in the root directory of the website,/templatethe folder. All styles, JavaScript scripts, and images, etc., static resources are stored independently./public/static/Directory. Understanding this separation is the first step in template creation.
Template files are stored in AnQiCMS with UTF-8 encoding, which ensures the correct display of multilingual content.The system supports adaptive, code adaptation, and PC+mobile terminal three template types to meet the needs of different device access.To improve development efficiency, AnQiCMS defines some default template naming conventions. By following these conventions when creating files, the system can automatically recognize and apply them, eliminating the need for manual configuration in the backend.
Create the default template for the model homepage
The model homepage is a page that displays an overview of specific content models, such as 'Article Center' or 'Product Showcase'. Its default template file name convention is{模型table}/index.htmlor in flat mode for{模型table}_index.htmlHere,{模型table}It is the model table name specified when you define the content model in the background, for examplearticleorproduct.
In the model homepage template, we usually display the category list under the model, the latest released documents, or some recommended content.To achieve this, we can make use of the powerful template tags provided by AnQiCMS.
You can use{% moduleDetail %}Tags to obtain information about the current model, such as the title and description, which helps to display the model name at the top of the page. Next,{% categoryList %}Labels can be used to list all top-level categories or child categories of specified parent categories under the model, allowing users to easily navigate to the category pages of interest. For displaying the latest or recommended documents,{% archiveList %}Labels are a good choice, they can flexibly pull and display document lists according to model ID, recommendation attributes (flag), or sorting method.For example, you can configure it to display the latest ten articles released, or products with the "Recommended" tag.
{# 示例：模型首页模板 - article/index.html #}
{% extends 'base.html' %} {# 继承基础布局，如包含头部和底部 #}
{% block title %}
<title>{% moduleDetail with name="Title" siteName=true %}</title>
{% endblock %}
{% block content %}
<div class="model-header">
<h1>{% moduleDetail with name="Title" %}</h1>
<p>{% moduleDetail with name="Description" %}</p>
</div>
<div class="category-navigation">
<h2>内容分类</h2>
<ul>
{% categoryList categories with moduleId=archive.ModuleId parentId="0" %}
{% for item in categories %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
<li>当前模型下没有分类。</li>
{% endfor %}
{% endcategoryList %}
</ul>
</div>
<div class="latest-documents">
<h2>最新文档</h2>
<ul>
{% archiveList archives with moduleId=archive.ModuleId type="list" order="id desc" limit="10" %}
{% for item in archives %}
<li>
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description }}</p>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</a>
</li>
{% empty %}
<li>暂无最新文档。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
{% endblock %}
Create document detail page default template
The document detail page is a page to display the complete content of a single document. Its default template file name is{模型table}/detail.htmlor in flat mode for{模型table}_detail.htmlThis template is the core content display area of the website, which needs to present the document information comprehensively and richly.
In the document details page,{% archiveDetail %}Tags are indispensable, as they can obtain all the detailed information of the current document, includingTitle(Title),Content(Content) ofDescription(description),Logo(cover first image),Thumb[Thumbnail],CreatedTime(Creation Time) and all custom fields. You need to use|safeFilter to ensure that the HTML code in the document content can be rendered correctly, rather than being displayed as escaped.
In addition to the core content, we will also use{% categoryDetail %}Labels to display the information of the current document's category.{% prevArchive %}and{% nextArchive %}Labels for providing navigation links between documents, enhancing the user's browsing experience. If you need to display related documents,{% archiveList archives with type="related" %}Tags can automatically find and list other content related to the current document. In addition,{% commentList %}Tags are used to display and manage users' comments on the current document.
{# 示例：文档详情页模板 - article/detail.html #}
{% extends 'base.html' %} {# 继承基础布局 #}
{% block title %}
<title>{% tdk with name="Title" siteName=true %}</title>
{% endblock %}
{% block content %}
<article class="document-detail">
<h1>{% archiveDetail with name="Title" %}</h1>
<div class="meta-info">
<span>分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
<span>发布日期：{% archiveDetail with name="CreatedTime" format="2006-01-02 15:04" %}</span>
<span>浏览量：{% archiveDetail with name="Views" %}</span>
</div>
<div class="document-content">
{%- archiveDetail documentContent with name="Content" %}
{{ documentContent|safe }}
</div>
{# 自定义字段展示示例，假设有一个名为“author”的自定义字段 #}
{% archiveDetail articleAuthor with name="author" %}
{% if articleAuthor %}
<div class="document-author">作者：{{ articleAuthor }}</div>
{% endif %}
<div class="navigation-links">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">上一篇：{{ prev.Title }}</a>
{% else %}
<span>没有上一篇了</span>
{% endif %}
{% endprevArchive %}
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">下一篇：{{ next.Title }}</a>
{% else %}
<span>没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
<div class="related-documents">
<h2>相关文档</h2>
<ul>
{% archiveList relatedDocs with type="related" limit="5" %}
{% for item in relatedDocs %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
<li>暂无相关文档。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
<div class="document-comments">
<h2>评论</h2>
{% commentList comments with archiveId=archive.Id type="list" limit="10" %}
{% for item in comments %}
<div class="comment-item">
<strong>{{ item.UserName }}</strong> @ {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}
<p>{{ item.Content }}</p>
</div>
{% empty %}
<p>暂无评论。</p>
{% endfor %}
{% endcommentList %}
{# 这里可以加入评论表单 #}
</div>
</article>
{% endblock %}
Create document list page default template
The document list page is used to display a series of documents, which are usually filtered by category and paginated. The default template file name is{模型table}/list.htmlor in flat mode for{模型table}_list.html.
The core of the document list page template is{% archiveList %}Label, but different from the model homepage, here we need totypeparameter settingspageAnd setlimitto control the number of documents displayed per page, thereby enabling pagination. With{% pagination %}Label, you can generate a complete page number navigation.
{% categoryDetail %}Tags can be used to retrieve detailed information about the category to which the current list belongs, such as category title, description, or Banner image, so that featured content of the category can be displayed at the top of the page.{% categoryList %}Labels can be used to display subcategories or sibling categories of the current category, making it convenient for users to switch between category levels. If your content model supports complex filtering conditions,{% archiveFilters %}The label can automatically generate filter options based on document custom parameters, greatly enhancing the user experience.
{% block title %}
<title>{% tdk with name="Title" siteName=true %}</title>
{% endblock %}
{% block content %}
<div class="list-header">
<h1>{% categoryDetail with name="Title" %}</h1>
<p>{% categoryDetail with name="Description" %}</p>