During the process of building a website with AnQiCMS, the template file suffix and directory structure play a vital role, directly determining how the website content is presented to visitors.Understanding these rules can help us customize the website appearance more efficiently and achieve personalized content display.

Firstly, AnQiCMS uses.htmlAs a uniform suffix for template files. This means that all templates we edit and create will be.htmlThe convention not only makes the file type clear at a glance, but also facilitates the use of various HTML editing tools, allowing users with web development basics to quickly get started.

All template files are stored in the AnQiCMS installation directory./templateIn the folder. Under this root directory, each independent template needs to have its own subdirectory, for example, a template named "default", all its files will be in/template/defaultChinese. Each template's subdirectory must contain aconfig.jsonFile, this file is like the 'ID card' of the template, recording the template's name, version, author, description, and an extremely important setting item:template_type.template_typeThe value (0 for adaptive, 1 for code adaptation, 2 for PC+mobile independent site mode) directly tells AnQiCMS which responsive design this template is prepared for, thereby affecting the system's selection of which version of the template to load on different devices.

Different from the template file, the images, CSS styles, JavaScript scripts, and other static resources used in the template have their dedicated storage locations:/public/static/Catalog. This separation design is helpful for effective management of website resources and convenient for accelerating static resources during deployment (such as using CDN), thus improving the loading speed and user experience of the website.

AnQiCMS provides two main patterns in the organization structure of templates to adapt to different development habits and project requirements:

One isFolder organization modeIn this mode, template files are categorized into different subfolders according to their purpose. For example:

  • Common code such as headers and footers is usually placedbash.html, or split intopartial/Under the directory, convenient for other pages to reference.
  • The homepage template file may be located in.index/index.html.
  • Detail pages and list pages for different "models" (such as articles, products) will have.{模型table}/detail.htmland{模型table}/list.htmlSuch a structure. Among them,{模型table}Will be replaced with the actual model table name, such asarticle/detail.html.
  • The detail page of a single page (such as "About Us") will bepage/detail.html.
  • Even there are special error pages, such aserrors/404.htmlanderrors/500.html.

Another one isFlat file organization mode. As the name implies, in this mode, the file hierarchy is less, most page templates are directly placed in the root directory of the template, and the file names are distinguished by page types through underscores, for example:

  • The homepage template might beindex.html.
  • The model detail page and list page might be named{模型table}_detail.htmland{模型table}_list.html.
  • The single-page detail page ispage.html.

These patterns have their own characteristics, but they are all aimed at providing a clear structure so that each part of the website can find a corresponding template to render.

How do these file extensions and directory structures specifically affect the display of front-end pages?

Firstly, AnQiCMS has an intelligenttemplate matching mechanism. When a visitor requests a page, the system will automatically find the most matching template file based on the requested URL, content type (such as article detail page, category list page, or single page) and content ID to render.For example, when accessing an ordinary article, the system will first look for{文章模型表名}/detail.htmlTo display the article details. If a specific article (such as an article with ID 10) requires a unique layout, you can create{文章模型表名}/detail-10.htmlThe system will load this more specific template first. This is also true for single pages and category pages, you can create a customized template for specific content bypage/{单页面ID}.htmlor{模型table}/list-{分类ID}.htmlnaming it in this way.

secondly,Customized capabilitiesGreatly enhanced the flexibility of the front-end display. AnQiCMS allows us to specify a "custom template" for specific documents, categories, or single pages in the background.This means we can make a name calleddownload.htmlThe template is set up in the background to be used for a specific article or single page, so that only this article or single page will be called when it is displayed on the front enddownload.htmlThe layout. This on-demand customization ability makes it easy for the website to easily implement various special page designs.

Moreover,Responsive DesignThe implementation is also closely related to the template directory structure. Whenconfig.jsonoftemplate_typeWhen set to support independent PC and mobile modes, AnQiCMS will look for the template directory undermobile/the subdirectory. If it exists, the system will automatically load it when accessed on the mobile endmobile/The corresponding template under the directory, thus achieving a front-end display optimized for mobile devices.

Finally, it is worth mentioning that all template files must be unified in using UTF-8 encoding, which is the key to ensuring that the page content is displayed normally and avoiding garbled characters. We will also use it in the template.{% include "partial/header.html" %}such a tag to introduce a common code snippet, or{% extends 'base.html' %}Inherit the basic layout, which helps to improve the reusability and maintenance efficiency of the template, and has a common impact on the final visual presentation and user experience of the website.

In summary, the template file suffix and directory structure of AnQiCMS is the basic framework of the website front-end display, which, through intelligent matching, flexible customization, and responsive support, together determine the display logic and visual effects of the website content.Understand and make good use of these conventions, which will enable us to better master AnQiCMS and build professional websites that meet various business needs.

Frequently Asked Questions (FAQ)

  1. If I created a template for a specific page (such as a single page with ID 5),page/5.htmlbut the file was deleted by mistake later, what will happen?AnQiCMS has a priority matching mechanism. Whenpage/5.htmllost, the system will revert to a more generalpage/detail.htmlto render the content of this single page. Ifpage/detail.htmlCannot find, in which case the system default error page may be displayed, or the corresponding error prompt may be given according to the server configuration.So, before deleting a specific template file, it is best to confirm whether there is an available general template as an alternative.

  2. I have both in my template directoryarticle/detail.htmland botharticle_detail.htmlWhat does AnQiCMS prioritize?In AnQiCMS, you need to select a template organization mode (folder organization mode or flattened file organization mode).Once a certain pattern is selected, the system will search for template files according to the naming rules of the pattern.If your template directory contains files with both of these naming conventions, the system will usually prioritize identifying and loading the template that matches its current configuration mode.Therefore, it is recommended that you maintain consistent naming conventions within a single template to avoid unexpected loading behaviors caused by mixing.

  3. How can I set up a special layout for all articles under a certain category instead of the general article detail template?You can edit this category in the AnQiCMS backend, find the 'Document Template' setting item under 'Other Parameters'. Here, you can enter a custom template filename (such asspecial_article_detail.htmlMake sure that this template file actually exists in your template directory), so that all articles in this category will automatically apply this specific template to display.