How should AnQiCMS template files be named and organized to achieve **display effects??

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

The cornerstone of the template file:/templateDirectory andconfig.json

All visual presentations of the AnQi CMS website begin with/templateDirectory. This is the home of all template files. Each independent set of templates needs to have its own subdirectory under this directory and place oneconfig.jsonfile. Thisconfig.jsonThe file is the 'ID card' of the template, defining the name, version, author, description, and most importantly,Template Type(such as adaptive, code adaptation, PC + mobile independent). Properly configuring this file is the first step for the system to recognize and enable your template.

Be sure to pay attention when editing the template file.Use UTF-8 encoding consistentlyThis is the key to ensure that the page content is displayed normally and to avoid garbled characters.In addition, the style files (CSS), script files (JS), images, and other static resources used in the template are conventionally stored in the root directory of the website./public/static/In the directory, separated from the template file itself, for easy management and deployment.

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

Anqi CMS template files are unified in use.htmlas a suffix. In terms of organizational structure, the system provides two flexible modes, 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 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:like the header (header), footer (footer) and other parts that repeat on all pages, it is recommended to unify and name it asbash.htmlAnd then{% extends %}Tags allow other templates to inherit. Small, reusable code snippets, such as sidebars, breadcrumb navigation, ad spaces, etc., can be stored in one place.partial/Under the directory, it is convenient to go through.{% include %}Tag calling.
   • Home:It is usually stored in.index/index.html.
   • Content Model Page:For different content models such as articles, products, etc., you can create independent folders for them, such asarticle/storing templates related to articles,product/Store product-related templates. Each model folder is further subdivided:
     • Model Home:{模型table}/index.html
     • List page:{模型table}/list.html
     • Details page:{模型table}/detail.html
   • Single page:Such as independent pages like "About Us", "Contact Us", etc., usually placed in:page/detail.html.
   • Special feature page:Message boardguestbook/index.htmlSearch Results Pagesearch/index.htmlTags List Pagetag/index.htmlAnd Various Error Tips 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 to differentiate different pages. For example:

   • Home: 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.

Always keep the file namingsemanticizedclear, indicating the function of the file name, for exampleproduct_detail.htmlThanp_d.htmlmore readable.

Intelligent recognition and customization: refined control display

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

• Details page for specific content:If you want a specific article (such as an article with ID 10) to have a unique page layout, 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 forpage/about.htmlThen in the single-page settings backstage, specify this custom template for the page.

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

Adapt for mobile:mobile/The magic of the catalog.

To ensure that the website has a** browsing experience on different devices, AnQiCMS supports multiple website modes. When you are inconfig.jsonthe middle oftemplate_typeis set to1Or (code adaptation)2(PC+mobile independent) mode, you need to usemobile/Directory.

You just need to create a namedmobile/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 PC end homepage isindex.htmlThen the mobile homepage should bemobile/index.htmlThe system will automatically identify and switch tomobile/The template under the directory, thus providing a specially optimized interface for mobile users.

Conclusion

The naming and organization of template files, which seems to be 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, reasonably utilizing folder mode or flat mode, and making good use of 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.

Frequently Asked Questions (FAQ)

Q1: Why does the page still display blank or scrambled content even though I created the template file as instructed? 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 are correctly referenced by the template? A2: In Anqi CMS, all static resources (CSS, JavaScript, images, fonts, etc.) should be stored in the root directory of the website under `/public/static