Build and manage website templates in AnQiCMS, first you need to understand its unique directory structure and file organization.This not only concerns the visual presentation of the website, but also is an important foundation affecting the website's performance, maintainability, and future scalability.A clear and reasonable template organization strategy can make content operation and front-end development twice as effective.

Overview of AnQiCMS template system

AnQiCMS uses a syntax similar to Django's template engine,.htmlAs a template file suffix, this allows developers familiar with this template language to quickly get started.Its design philosophy is to strictly separate the front-end template files and static resources (such as CSS, JavaScript, images, etc.)./templateIn the folder, while the static resources that the template depends on are placed uniformly in/public/static/the directory, this separation helps to optimize resource loading, facilitates browser caching, and is also beneficial for integrating CDN services.

AnQiCMS's template system also has high flexibility, supporting various website modes, including adaptive, code adaptation, and independent PC and mobile site modes.Especially noteworthy is that for the special needs of mobile devices, the system provides a dedicated template storage mechanism to ensure a good user experience across multiple devices.

Core directory structure analysis:/template

/templateis the root directory of AnQiCMS template, all template themes must be created in an independent folder under this directory. Each template theme folder should contain aconfig.jsonConfiguration file, used to describe the basic information and characteristics of the template.

config.jsonThe file is the 'identity card' of the template theme, which contains the following key information:

  • name: The display name of the template, convenient for identification in the background.
  • package: The name of the template folder, usually consistent with the directory name, and only supports letters and numbers.
  • version: The version number of the template, for easy management and updates.
  • description: Brief introduction of the template.
  • author,homepage,created: Author information, homepage, and creation time.
  • template_type: Defines the compatibility type of the template, for example0For adaptive,1For code adaptation,2This is for PC and mobile. It determines how the system renders pages.
  • status: The enable status of the template,1indicates it is being used,0indicates it is not enabled.

In each template theme directory, AnQiCMS provides two main template organization modes to adapt to different project needs and development habits.

1. Folder organization mode

This pattern emphasizes modularity and structuring, by creating subfolders to categorize and manage template files for different functions.

  • Public code files: bash.htmlIt is usually used to store the public header, footer, and other parts that each page inherits from the website.
  • Code snippet directory: partial/The catalog is used to store reusable code snippets, such as sidebars, breadcrumb navigation, advertisement blocks, etc., which facilitates access across different pages.includeTag reuse.
  • Core page template:
    • index/index.html: 网站的首页模板。
    • {模型table}/index.html: 特定内容模型（如文章、产品）的列表首页。
    • {模型table}/detail.html: 特定内容模型详情页的默认模板。
    • {模型table}/list.html: English content model category list page default template.
    • comment/list.html: Comment list page template.
    • guestbook/index.html: Online message page template.
    • page/detail.html: Single page detail page default template.
    • search/index.html: Search results page template.
    • tag/index.html: Tag home page template.
    • tag/list.html: Document list page template under tag.
  • Error page: errors/404.html,errors/500.html,errors/close.htmlUsed to display prompt information for 404 errors, 500 errors, and website shutdown.
  • Mobile template directory: mobile/The directory, which has a structure similar to the PC template directory, is used to store independent template files for the mobile end. It takes effect when the website is set to "code adaptation" or "PC+mobile end" mode.

In this mode, AnQiCMS also supports more detailed custom template naming, such as:

  • Document default custom template：{模型table}/{文档id}.htmlAllow custom templates for specific document IDs.
  • The default custom template for the document list:{模型table}/list-{分类id}.htmlAllow customization of list templates for specific category IDs.
  • Single page default custom template:page/{单页面id}.htmlAllow customization of templates for specific single-page IDs. For example, if you need to customize a template for the 'about-us' page with the ID 'about-us', you can createpage/about-us.html.

2. English flattened file organization mode

This pattern places all major template files directly under the root directory of the theme, distinguishing page types through specific naming conventions. File naming usually uses{类型}_页面名.htmlformat.

  • index.html: Home page.
  • {模型table}_index.html: English model homepage.
  • {模型table}_detail.html: English model detail page.
  • {模型table}_list.html: English model list page.
  • guestbook.html: English message page.
  • page.html,page-{单页ID}.html: English single page and its custom template.
  • errors_404.html,errors_500.html,errors_close.html: Error page.
  • Also hasmobile/The catalog is used for mobile templates, and its internal structure is consistent with the flat PC end mode.

Flattened mode is suitable for projects with a simple structure or when developers prefer to directly view all template files.

Key strategies for efficient display: template organization and utilization

To achieve efficient display and management of templates, it is not only about placing files according to the regulations, but also making good use of the features provided by AnQiCMS:

  1. Modularization and reuse first:

    • Abstract common elements of the website (such as navigation, footer, sidebar) tobash.htmlorpartial/fragments under the catalog. Through{% include "partial/sidebar.html" %}Such tags can be reused on multiple pages, greatly reducing the amount of redundant development and improving maintenance efficiency.
    • Utilize{% extends 'base.html' %}and{% block content %}Implement template inheritance to build the overall layout 'skeleton' of the website, and then fill in or rewrite specific areas for different pages.This method ensures consistency in the website style while also maintaining the independence of local content.

  2. Customization and flexible application:

    • AnQiCMS allows for customization in the backgroundDocument, category, and single pageSpecify an independent template file.This means that you can design a unique display page based on the specific content requirements.For example, a special promotional activity page or a product landing page can be fully customized in terms of layout and functionality by filling in a custom template name in the corresponding content editing interface on the backend.
    • Fully utilize the custom template naming rules mentioned earlier (such aspage/{单页面id}.html），可以直接在文件系统层面为关键页面预设定制模板，无需额外的后台配置。

  3. Responsive and multi-end adaptation：

    • When selecting the "Code Adaptation" or "PC+Mobile End" template type, be sure to create under the template theme directorymobile/Folder, and place the mobile-specific templates in it according to the same organization mode as the PC end.AnQiCMS will automatically select the corresponding template based on the access device, achieving elegant multi-end adaptation.

  4. Static resource optimization management:

    • Static resources and separation from template files allow front-end developers to focus on optimizing CSS, JS, and images, such as compression, merging, and sprite processing, etc.By deploying static resources to CDN, it can significantly improve the loading speed and user experience of the website.{% system with name="TemplateUrl" %}Dynamically obtain the static resource path of the current template theme, ensure the path is correct.

Application of AnQiCMS template engine and tags

The AnQiCMS template engine provides rich tags and filters for processing data and controlling logic. For example:

  • Variable output:Use{{ 变量名 }}to display data, such as:{{archive.Title}}Display the article title.
  • Conditional judgment: {% if 条件 %}...{% endif %}Used to display different content based on conditions.
  • Loop traversal: {% for item in 列表 %}...{% endfor %}Used to iterate over list data, such as article lists, navigation menus, etc.
  • System-level tags: {% system %}/{% contact %}Used to obtain global configurations such as the website name, contact information, etc.
  • Content related tags： {% archiveList %}/{% categoryDetail %}Used to obtain content data such as article lists, category details, etc.
  • Filter: |safeUsed to output HTML without being escaped,|stampToDateUsed to format the timestamp,|truncatecharsUsed for truncating strings and more, which greatly enhances the data processing capabilities of the template.

A clear template directory structure and reasonable organization are the foundation for the efficient operation, easy maintenance, and flexible expansion of the AnQiCMS website.By fully understanding and utilizing the template mechanism provided by AnQiCMS, content operators and frontend developers can work more efficiently together, jointly creating high-quality websites.

Common Questions (FAQ)

Q1: How to create a new template theme in AnQiCMS?A1: To create a completely new template theme, you need to create a new folder under AnQiCMS/templatein the directory, for example namedmytheme. Then, create aconfig.json文件，and fill in the basic information of the template (such as name, version, author, etc.). Next, according to your design requirements, organize in the folder mode or flat mode, inmythemeCreate corresponding template files (such asindex/index.html/partial/header.htmlauto）。Completed，you can select and enable your new template theme in the "Template Design" or "System Settings" section of the AnQiCMS backend.

Q2: How should I organize the templates if my website needs completely different designs for PC and mobile?A2: When you need to adopt a completely different design for PC and mobile ends, you should in the template theme'sconfig.jsonthe file containstemplate_typeset1(Code adaptation) or2(PC+Mobile) On this basis, you need to create a subdirectory namedmobile/All template files used for mobile display should be placed in thismobile/The content under the directory, and maintain the same structure and naming conventions as the PC end template directory (or flattened files).AnQiCMS will intelligently load the corresponding template based on the type of the user's device, ensuring that users of different devices can experience the interface.

Q3: Can I set a completely independent template file for a specific article (such as "About Us"), rather than using the default detail page template?A3: Of course.AnQiCMS provides highly customizable features to meet such needs.page/about-us.html。Then, when editing the single page "About Usabout-us.html）。Save after, when accessing the single page, the system will load the independent template file you specified instead of the defaultpage/detail.html. For article or product detail pages, you can also make similar settings through the 'Document Template' field on the corresponding content editing page.