In the process of building a website with AnQiCMS, the template file suffix and directory structure play a crucial role, as they directly determine how your 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 the unified suffix of template files. This means that all the template files we edit and create will have the suffix of.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 a basic understanding of web development 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/defaultEnglish. Each subdirectory of each template must contain aconfig.jsonFiles, this file is like the 'ID card' of the template, recording the template's name, version, author, description, as well as a very important setting item: template_type.template_typeThe value (0 represents auto, 1 represents code adaptation, 2 represents PC + mobile independent site mode) directly tells AnQiCMS which responsive design template this set of templates is prepared for, thereby affecting the system's choice of loading which version of the template on different devices.

The static resources such as images, CSS styles, JavaScript scripts used in the template, have their dedicated storage locations:/public/static/Table of Contents.This separation design helps in effective management of website resources, and it also facilitates static resource acceleration during deployment (such as using CDN), thereby improving the website loading speed and user experience.

AnQiCMS provides two main modes in the organization structure of templates to meet different development habits and project requirements: English

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/The directory is convenient for referencing by other pages.
  • The homepage template file may be located inindex/index.html.
  • The 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}The actual model table name will be replaced, such asarticle/detail.html.
  • The detail page of a single page (such as "About Us") will bepage/detail.html.
  • There are even dedicated 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 file names are distinguished by page types through underscores, for example:

  • Home page template may beindex.html.
  • Model detail page and list page may be named as{模型table}_detail.htmland{模型table}_list.html.
  • Single page detail page may bepage.html.

These two modes have their own characteristics, but both are 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 automatically searches for the most matching template file for rendering based on the requested URL, content type (such as article detail page, category list page, or single page), and content ID.{文章模型表名}/detail.htmlShow the article details. If a specific article (such as the 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, and specific content customized templates can be created throughpage/{单页面ID}.htmlor{模型table}/list-{分类ID}.htmlsuch naming.

Secondly,Customization capabilitiesGreatly enhances the flexibility of front-end display.AnQiCMS allows us to specify a "custom template" for specific documents, categories, or single pages in the background.download.htmlThe template is set up, and then an article or a single page is set to use this template in the background. In this way, only this article or single page will call when displayed on the front end.download.htmlThe layout. This on-demand customization capability allows the site to easily implement various special page designs.

Moreover,Responsive DesignThe implementation is also closely related to the template directory structure. Whenconfig.jsonoftemplate_typeSet to support independent PC and mobile mode, AnQiCMS will look for the template directory undermobile/The subdirectory. If it exists, the system will automatically load it when accessed from 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 uniformly encoded in UTF-8, which is the key to ensuring the normal display of page content and avoiding garbled text. In the template, we will also use{% include "partial/header.html" %}such label to introduce a public code snippet, or{% extends 'base.html' %}Inherit the basic layout, all of which contribute to improving the reusability and maintenance efficiency of the template, and have 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 are the fundamental framework for the front-end display of the website. They, together with intelligent matching, flexible customization, and responsive support, determine the display logic and visual effects of the website content in English.Understand and make good use of these conventions, which can help us better master AnQiCMS and build professional websites that meet various business needs.

Common Questions and Answers (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 accidentally deleted later, what will happen?AnQiCMS has a priority matching mechanism. Whenpage/5.htmllost, the system will fallback to a more generalpage/detail.htmlto render the content of this single page. Ifpage/detail.htmlIt may also not be found, in which case the system default error page may be displayed, or the corresponding error prompt may be given according to the server configuration.Therefore, it is best to confirm the existence of a general template as an alternative before deleting a specific template file.

  2. my template directory has botharticle/detail.htmlin my template directory.article_detail.htmlWhat will AnQiCMS prioritize?In AnQiCMS, you need to select a template organization mode (folder organization mode or flattened file organization mode).Once a 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 typically prioritize and load the template that matches its current configuration mode.Therefore, it is recommended that you maintain consistent naming styles within the same template to avoid unexpected loading behaviors caused by mixed usage.

  3. I want all articles under a certain category to use a special layout instead of the generic article detail template. How should I set it up?You can edit this category in the AnQiCMS background, find the 'Document Template' setting option under 'Other Parameters'. Here, you can fill in a custom template filename (for examplespecial_article_detail.htmland ensure that this template file actually exists in your template directory), so that all articles under this category will automatically apply this specific template to display.