How to customize the display layout and template file path for articles (or other content) in AnQiCMS?

In AnQiCMS, the display form of your website content has high flexibility.No matter whether it is an article, product details, or an independent page, you can tailor the display layout and template file path to them according to the brand image, content characteristics, or specific operational needs.This design concept of AnQiCMS aims to help users break free from the constraints of traditional CMS and have more freedom in controlling the visual presentation and user experience of the website.

Flexible template mechanism: the foundation of AnQiCMS

AnQiCMS uses a template engine syntax similar to Django, making the creation and management of template files intuitive and efficient. All template files are stored in the project's/templateIn the directory, while CSS, JavaScript, images, and other static resources have their own/public/static/directory for management. Understanding this basic structure is the first step in custom layout.

In the writing of template files, variables are defined using double curly braces{{变量}}and logical tags such as condition judgment, loop control, etc. use single curly braces and percent signs{% 标签 %}And these logical tags must have corresponding end tags. To ensure the normal display of the page, all template files should use UTF-8 encoding.

AnQiCMS also supports various website modes such as responsive, code adaptation, and independent PC and mobile site modes. If you choose code adaptation or PC + mobile mode, the system will allow you to/templateUnder the directorymobileIn the subdirectory, a separate template is designed for mobile devices.

Two modes of template file organization.

To adapt to different development habits, AnQiCMS provides two template file organization modes:

1. Folder organization mode:In this mode, different types of content will have their own independent folders to store template files, for example:

   • Home:index/index.html
   • Article (or other model) detail page:{模型table}/detail.html
   • Article (or other model) list page:{模型table}/list.html
   • Single page detail page:page/detail.html
   • Public code (such as header, footer):bash.html
   • Code snippet (such as sidebar, breadcrumbs):partial/

2. Flattened file organization mode:In this mode, all template files are directly stored in the template root directory, and the file naming is differentiated by underscores, for example:

   • Home:index.html
   • Article detail page:{模型table}_detail.html
   • Article list page:{模型table}_list.html
   • Single page detail page:page.html

No matter which mode you choose, the key is that the system will automatically match the template according to the preset naming rules.

Intelligent default template matching

The intelligence of AnQiCMS lies in its ability to automatically match some default-named template files based on the type and ID of the content. This means that if you follow specific naming conventions, even if you do not manually specify the template in the background, the system can automatically apply them:

• Document (article, product, etc.) detail page:The system will try to find and apply a path format of:{模型table}/{文档id}.htmlThe template file. For example, if an article with ID 10 is under the article model, the system may look forarticle/10.html.
• Document List Page:For a document list under a certain category, the system will try to find{模型table}/list-{分类id}.htmla template format. For example, the category list under the article model with ID 5, the system may search forarticle/list-5.html.
• Single page detail page:For the single page with ID 123, the system will try to findpage/123.htmlsuch a template file.

These default matching mechanisms greatly simplify the management of general content templates, allowing you to focus only on customizing the display of special content.

Custom template path: finely control the display of your content.

When the default template fails to meet your personalized needs, AnQiCMS allows you to specify a custom template file for specific content through the backend settings.This allows you to achieve highly customized page layouts, such as designing a unique visual style for the "About Us" page, or creating a dedicated display template for a marketing campaign page.

1. For a single article (or a single document under another content model):When you edit a specific article or product in the "Content Management" section of the background, you will find a collapsible area for "Other Parameters".After expanding, there is a field named "Document Template".In here, you can enter the path of a custom template file.For example, if you want a product article to have a layout specifically for displaying download links, you can create one in the template directoryproduct/download.htmlFile. Then enter the "document template" field of the product article:download.html(relative to the model folder path, orproduct/download.htmlThe path relative to the template root directory, depending on your organization mode and system configuration). When the user accesses this product article, AnQiCMS will use the one you specifyproduct/download.htmlto render the content

2. List pages for specific categories:In the 'Content Management' 'Document Category' settings, when editing a category, you will also find the 'Category Template' field under 'Other Parameters'. By default, the category list will use{分类模型}/list.htmlAs a template. But if you want to provide a completely different layout for a specific category list page, for example, a product category list containing a large slideshow, you can specify a custom template file here, such asproduct/fancy_list.html. Furthermore, there is also an option for 'whether to apply to subcategories'.Check this box, and this custom category template will be applied to the list page of the current category and all its subcategories, saving the trouble of repeating the settings for each subcategory.

3. For all articles (or documents under other content models) in a certain category:Next to the "category template" field mentioned above, there is also a "document template" field (in the category settings).The purpose of this field is to, you can specify a default detail template for all articles under a certain category.For example, you have a category named "Case Display" and you want to use the same one for all the case articles under it.article/case_detail.htmlThe template, even if these articles do not have a separate 'document template' set, they will inherit this custom template from the category settings.This is very useful for maintaining visual consistency of a specific content group.

4. For a single independent page:In the "Page Resources" under "Page Management", when editing a single page, you will also see a "Single Page Template" field. For example, if you want to create a unique layout for the "Contact Us" page that includes a map and a form, you can create it in the template directory.page/contact.htmlThen enter the 'Single Page Template' field on this page.contact.html.

How to specify and apply a custom template

The overall operation process is very intuitive:

1. Prepare the template file:First, in your AnQiCMS project/templateIn the directory, organize the HTML template files according to your template structure and design requirements. For example, if you want to create a custom template for the article model under the article with ID 10, you may