How to create default templates for the model home page, document detail page, and list page of AnQiCMS?

As an experienced CMS website operation person, I know the importance of a clear and efficient template system for website content management.AnQiCMS provides a highly flexible and customizable template mechanism, allowing us to easily create personalized page layouts based on different business needs.Mastering the creation method of its default template is the foundation of efficient operation and content optimization.

This article will elaborate on how to create default templates for the model homepage, document detail page, and list page of AnQiCMS, along with the usage instructions for key tags to ensure that the content is presented accurately and without error to the user.

AnQiCMS Template System Overview

AnQiCMS template system aims to provide a simple and powerful content display capability. It uses a syntax similar to the Django template engine, and it uses.htmlThe file is used as a template and is placed uniformly in the root directory of the website./templateAll styles, JavaScript scripts, images, and other static resources are stored independently in the folder./public/static/Catalog. Understanding this separation is the first step in template creation.

The template file is stored in AnQiCMS using UTF-8 encoding, which ensures the correct display of multilingual content.The system also supports adaptive, code adaptation, and three types of PC+mobile template types to meet the needs of different device access.To enhance development efficiency, AnQiCMS defines some default template naming conventions. As long as files are created according to these conventions, the system can automatically recognize and apply them, saving the step of manual configuration in the background.

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 Display'. Its default template file name convention is{模型table}/index.htmlor in flat mode, for{模型table}_index.html. Here,{模型table}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 %}Label to retrieve information about the current model, such as the title and description. This helps display the model name at the top of the page. Next,{% categoryList %}The label can be used to list all top-level categories or child categories of a specified parent category, allowing users to easily navigate to the category page of interest. For displaying the latest or recommended documents,{% archiveList %}Tags are an ideal choice, they can flexibly retrieve and display document lists based on model ID, recommended attributes (flag), or sorting method.For example, you can configure it to display the ten latest published articles 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 the default template for the document detail page

The document detail page is a page to display the complete content of a single document. The default template file name is{模型table}/detail.htmlor in flat mode, for{模型table}_detail.html. This template is the core content display area of the website, which needs to fully and richly present document information.

In the document detail page,{% archiveDetail %}Tags are indispensable, as they can obtain all the detailed information of the current document, includingTitle(Title),Content(Content),Description(Description),Logo(Cover main image),Thumb(thumbnail),CreatedTime(Creation time) as well as all custom fields. You need to use|safea filter to ensure that the HTML code in the document content is rendered correctly, rather than being escaped and displayed.

In addition to the core content, we will also use{% categoryDetail %}tags to display the information of the current document category,{% prevArchive %}and{% nextArchive %}Tags are used to provide 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 search and list other content related to the current document. In addition,{% commentList %}Tags are used to display and manage comments by users 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 the default template for the document list page

The document list page is used to display a series of documents, which is 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 totypethe parameter topage, and setlimitcontrol the number of documents displayed per page, thus enabling pagination. Together{% pagination %}Label, can generate a complete page navigation.

{% categoryDetail %}The tag can be used to get detailed information about the category to which the current list belongs, such as the category title, description, or Banner image, so that the featured content of the category can be displayed at the top of the page.{% categoryList %}Labels can be used to display the 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 criteria,{% archiveFilters %}The tag can automatically generate filter options based on custom document parameters, greatly enhancing the user experience.

”`twig {# Example: Document list page template - article/list.html #} {% extends ‘base.html’ %} {# Inherit base layout #}

{% 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>