In the Auto CMS, the display effect of the website is closely related to the naming and organization of the template files.An well-planned template structure not only makes the website look tidy and beautiful, but also greatly improves the development efficiency, facilitates later maintenance, and ensures that content can be presented in various scenarios.

The foundation of template files:/templateDirectories andconfig.json

All visual presentations of the AnQi CMS website start with/templateCatalog. This is the home of all template files. Each independent template needs to have its own subdirectory under this directory and place aconfig.jsonfile. Thisconfig.json文件是模板的“身份证”，它定义了模板的名称、版本、作者、描述以及最重要的——Englishtemplate type（such as auto-adaptation, code adaptation, PC+mobile independent）。Correctly configuring this file is the first step for the system to recognize and enable your template.

Be sure to pay attention to when editing the template file.Unified use of UTF-8 encoding.This is the key to ensure that the page content is displayed normally and to avoid garbled characters./public/static/In the directory, separated from the template file itself, convenient for management and deployment.

Core naming and organization principles: goodbye chaos, embrace order.

The template files of Anqi CMS are used uniformly.htmlAs a suffix. In terms of organizational structure, the system provides two flexible modes, and you can choose the most suitable one according to the scale of the project and your personal preference:

  1. Folder organization mode:This pattern puts the template files of different functional modules into their respective subfolders, clearly dividing the different areas of the website through the directory structure. For example:

    • Public elements:parts that repeat on all pages, such as the website header (header), footer (footer), etc., are recommended to be extracted and namedbash.html, and proceed through{% extends %}Labels allow other templates to inherit. Small, reusable code snippets, such as sidebars, breadcrumb navigation, ad spaces, etc., can be stored collectively.partial/in the directory, making it convenient to call through.{% include %}labels.
    • Home Page：Generally stored inindex/index.html.
    • Content model page:For different content models such as articles, products, etc., independent folders can be created for them, for examplearticle/Store templates related to articles,product/Store product-related templates. Each model folder is further subdivided:
      • Model home page:{模型table}/index.html
      • List page:{模型table}/list.html
      • Detail page:{模型table}/detail.html
    • Single page:Such as "About Uspage/detail.html.
    • Special Feature Page:Message boardguestbook/index.html、Search Results Pagesearch/index.html、Tag List Pagetag/index.html、and various error prompt pageserrors/404.html/errors/500.htmletc.

  2. Flattened file organization mode:For users with relatively simple structures or who prefer to manage files centrally, all major template files can be placed directly in the template root directory, distinguished by filenames for different pages. For example:

    • Home Page： index.html
    • Content model page: {模型table}_index.html/{模型table}_list.html/{模型table}_detail.html
    • Single page: page.html
    • Special Feature Page: guestbook.html/search.htmletc.

Keep the file naming consistent regardless of the mode you choose,semanticsi.e., the filename should clearly indicate its function, for example,product_detail.htmlvs.p_d.htmlfor better readability.

English recognition and customization: Fine-grained control of display

One of the convenient features of Anqi CMS is its intelligent recognition of preset template filenames. For example, when you visit a detail page of an article, the system will default to searching forarticle/detail.html. Furthermore, you can also create highly personalized template files for specific content, categories, or single pages:

  • Details page for specific content:If you want a unique detail page layout for a specific article (such as an article with ID 10), you can name itarticle/detail-10.html.
  • List page of a specific category:If a category (such as a product category with ID 5) requires a special list display style, it can be namedproduct/list-5.html.
  • Custom single page:You can create a page for “About Us”page/about.html, and then specify this custom template for the page in the single page settings on the backend.

This flexible naming method allows you to achieve personalized display of specific content without modifying the core template structure, which is an important tool for refined operation.

Responsive design: mobile/The clever use of the catalog

To ensure that the website has a **great** browsing experience on different devices, AnQiCMS supports various website modes. When you are inconfig.jsonIn the middle.template_typeset1(Code adaptation) or2(PC + independent mobile) mode, you need to utilizemobile/directory.

You only need to create a file named in the root directory of the templatemobile/The subdirectory, and place the template files for mobile devices in it according to the structure consistent with the main template (PC end). For example, if the home page on the PC end isindex.htmlThen the mobile home page should bemobile/index.html. The system will automatically recognize the type of device being accessed and switch tomobile/The template under the directory, thus providing a specially optimized interface for mobile users.

Concluding remarks

The naming and organization of template files, seemingly basic work, is actually a key link in building an efficient, beautiful, and easy-to-maintain website.By following the naming conventions of AnQi CMS, making rational use of folder mode or flat mode, and skillfully utilizing custom templates and mobile adaptation directories, you will be able to more freely control the display effect of the website, provide an excellent user experience, and significantly improve your operational efficiency.

Common Questions (FAQ)

Q1: Why is the page still blank or disordered even though I created the template file according to the instructions? A1:This usually has several reasons:

*   **编码问题：** 请确保您的模板文件已保存为 UTF-8 编码。在 Windows 环境下编辑时尤其需要注意，避免使用系统默认编码。
*   **文件名或路径错误：** 请仔细核对模板文件的命名是否与安企CMS的约定（如 `{模型table}/detail.html`）或您在后台指定的自定义模板名称完全一致，包括大小写。
*   **`config.json` 配置不正确：** 检查您的模板目录下的 `config.json` 文件是否配置正确，特别是 `template_type` 是否与您期望的网站模式匹配。

Q2：Where should I place my CSS, JavaScript files and images so that they can be correctly referenced by the template? A2：In the auto CMS, all static resources (CSS, JavaScript, images, fonts, etc.) should be stored in the `/public/static` directory under the website root.