When setting up a website with AnQiCMS, the organization and naming of template files are crucial for flexible content display, improving website maintenance efficiency, and scalability.A well-structured, clearly-named template system that not only allows you to easily handle various content types but also lays a solid foundation for future feature expansion.

Storage and basic conventions of template files

AnQiCMS's template system adopts a template engine syntax similar to Django, which will make you feel very familiar if you are familiar with front-end development. All template files are uniformly used.htmlAs a file extension, and stored in the root directory of the website./templateIn the folder, while the images, JavaScript scripts, and CSS styles involved in the template are dedicated./public/static/Manage the catalog. This separation management helps maintain the purity of the template code and facilitates the deployment and optimization of static resources.

In the writing of template content, AnQiCMS follows a set of intuitive syntax rules. Variable output uses double curly braces, for example{{变量名}}And the conditional judgment, loop control, and other logical tags are enclosed by a single curly brace and the percent sign, like{% if 条件 %}And these tags must appear in pairs,{% endif %}or{% endfor %}The end. To avoid garbled characters, it is recommended that all template files adopt UTF-8 encoding format.

Two organizational modes of the template directory

AnQiCMS provides two main template file organization modes, you can choose according to the project scale and personal preference:

  1. Folder organization mode:In this mode, template files are categorized into different folders based on their functions or content types. For example, the home page template might beindex/index.html, and the article detail page might bearticle/detail.htmlComma, product list page onproduct/list.html. The advantage of this method is that the structure is clear and easy to manage large projects.

    • Public code:Parts such as headers and footers that are almost used on every page can be extracted and placed in a public file likebash.html, or even more specifically,partial/header.html.
    • Code snippet:Reusable UI components such as sidebars, breadcrumbs, etc. can be stored inpartial/catalogs, making it convenient to{% include "partial/sidebar.html" %}introduce in this way.
    • Content page:
      • Home Page：index/index.html
      • Model Home Page (e.g., the home page of all articles):{模型table}/index.html(such asarticle/index.html)
      • Document Details Page：{模型table}/detail.html(such asarticle/detail.html)
      • Document List Page：{模型table}/list.html(such asarticle/list.html)
      • Single Page Details Page：page/detail.html(such as the "About Us" page)
    • Special Feature Page:Comment List Page (comment/list.html) Online Message Page (guestbook/index.html) Search Page (search/index.html）、Tag-related pages（tag/index.html,tag/list.html）、Error pages（errors/404.html,errors/500.html）etc.
    • Mobile template：If you choose 'Code Adaptation' or 'PC+Mobile' mode, you can create a directory next to the main template.mobile/Subdirectory, which maintains the same structure as the main template directory, used to store exclusive template files for mobile devices.

  2. Flattened file organization mode:This pattern places most template files directly at the root level of the main template directory, distinguishing functions by file name.It is more suitable for small and medium-sized websites with relatively simple content structure and a small number of pages.

    • Common code and code snippets:The same as the folder organization mode, it is still recommended to usebash.htmlandpartial/directory.
    • Content page:
      • Home Page：index.html
      • Model home page:{模型table}_index.html(such asarticle_index.html)
      • Document Details Page：{模型table}_detail.html(such asarticle_detail.html)
      • Document List Page：{模型table}_list.html(such asarticle_list.html)
      • Single Page Details Page：page.html
    • Special Feature Page: comment_list.html,guestbook.html,search.html,tag_index.html,tag_list.html,errors_404.htmletc.
    • Mobile template：Similarly inmobile/Stored in a flattened manner in the subdirectories.

Achieve more refined custom content display

The strength of AnQiCMS lies in its support for highly customized template applications.In addition to the above general naming rules, it also allows you to use completely independent templates for specific content items (such as an article, a category, or a single page).

  • Customization of the document detail page:You can create a dedicated detail template for a specific article or product. The naming format is{模型table}/{文档id}.html. For example, if you have an article modelarticle), with an ID of10The article needs a unique layout, you can createarticle/10.html. The system will automatically use this template when accessing the article with ID 10.
  • Customization of category list pages:Similarly, a list page of a specific category can also have its own template. The naming format is{模型table}/list-{分类id}.htmlFor example,product/list-5.htmlIt will be applied to the list page of product category with ID 5.
  • Customization of single-page detail pages:For pages such as 'About Us' and 'Contact Information', you can createpage/{单页面id}.htmlmore semantically meaningfulpage/about.html. When editing a single page in the background, select the 'Document Template' field to fill inabout.html.

This flexible naming mechanism means that you can provide a customized user experience for any sub-content unit of the website according to your business needs, without modifying the core logic, which greatly enhances the freedom of content display.

Associate the template file with backend content

After you have created these custom templates in the file system, the next step is to associate them with specific content in the AnQiCMS backend. When editing articles, categories, or single pages in the backend, you will see an option for 'Document Template' or 'Category Template'. What you enter here is the name of your custom template file (without the path, just enter likeabout.htmlSuch a filename). The system will intelligently search and apply the corresponding template from your template design package based on the name you fill in.

Summary

The template organization and naming strategy of AnQiCMS aims to provide high flexibility and convenience.By understanding the folder organization pattern and flat pattern, and making good use of the custom naming rules for specific content items, you can build an efficient and creative website content display system according to the complexity and personalized needs of the website.Properly planning the template structure not only allows you to quickly realize your design intentions, but also brings great convenience to the long-term development and later maintenance of the website.

Common Questions (FAQ)

Q1: I want to design a completely independent layout for the 'About Us' single page, how should I operate? A1:You can create a folder named under the template directory you are currently using,page/about.html[en]Prepare the unique layout for your "About Us" page. Then, in the AnQiCMS backend, go to "Page Resources" under "Page Management", edit the "About Us" page, and fill in the field "Single Page Template". [zh]的文件，设计好您“关于我们”页面的独特布局。然后在AnQiCMS后台，找到“页面资源”下的“页面管理”，编辑“关于我们”页面，在“单页面模板”字段中填写about.htmlSave and it will automatically apply the template you have customized.

Q2: What are the advantages and disadvantages of folder organization mode and flat file organization mode, and how should I choose? A2:The advantages of the folder organization mode are clear structure and levels, suitable for websites with a large amount of content and complex functions, which facilitates team collaboration and modular management, but the paths may be slightly longer.The advantages of the flat mode are simple structure, intuitive file search, and are suitable for small websites or personal blogs, but it may become cluttered as the number of files increases.The choice of mode mainly depends on the scale of your project, the complexity of the content, and your preference for file management.Generally, it is recommended to start with the folder mode, as it has more advantages when the project expands.

Q3: I created a new article detail templatearticle/special-detail.htmland selected it on the backend article editing page, but the default template is still displayed when accessed from the front end. What's going on? A3:Please check the following points:

  1. Is the file path correct:Ensurespecial-detail.htmlThe file is indeed located in the directory you are currently using the template in:article/subdirectory.
  2. Is the filename accurate:Does the template name filled in the background match the filename completely (including case, if the system distinguishes case).
  3. Is the template cached:Try to clear the system cache of AnQiCMS, or refresh the browser cache. Sometimes, old template information may be cached. 4