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

AnQiCMS template system overview

AnQiCMS uses a syntax similar to the Django template engine, with.htmlAs a template file suffix, this allows developers familiar with this template language to get started quickly.Its design philosophy is to strictly separate the front-end template files from static resources (such as CSS, JavaScript, images, etc.).All template files are stored in the root directory./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.

The AnQiCMS template system also has high flexibility, supporting various website modes including adaptive, code adaptation, and independent PC and mobile site modes.It is particularly noteworthy that the system provides a special template storage mechanism to meet the special needs of mobile devices, ensuring 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 a separate 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 'ID card' of the template theme, containing 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.
  • versionTemplate version number, for easy management and updates.
  • descriptionBrief introduction of the template.
  • author,homepage,createdAuthor information, homepage, and creation time.
  • template_typeDefine the compatibility type of the template, for example0For adaptive,1For code adaptation,2For PC+mobile. This determines how the system renders the page.
  • status: Template enable status,1indicates in use,0indicates not enabled.

Under each template theme directory, AnQiCMS provides two main template organization modes to meet different project requirements and development habits.

1. Folder organization mode

This pattern emphasizes modularity and structurization, through the creation of subfolders to classify and manage template files for different functional modules.

  • Public code files: bash.htmlCommonly used to store the public header, footer, and other parts that are inherited on each page of the website.
  • Code snippet directory: partial/The directory is used to store reusable code snippets, such as sidebars, breadcrumb navigation, ad spaces, etc., for easy use across different pagesincludeTag reuse.
  • Core page template:
    • index/index.htmlThe home page template of the website.
    • {模型table}/index.htmlThe list page of specific content models (such as articles, products).
    • {模型table}/detail.htmlThe default template of the specific content model detail page.
    • {模型table}/list.html: The default template for the list page of specific content model categories.
    • comment/list.html: The template for the comment list page.
    • guestbook/index.html: The template for the online message page.
    • page/detail.html: The default template for the single page detail page.
    • search/index.htmlSearch Results Page Template.
    • tag/index.htmlTag Homepage Template.
    • tag/list.htmlDocument List Page Template under Tag.
  • Error Page: errors/404.html,errors/500.html,errors/close.htmlUsed to display 404 errors, 500 errors, and prompts when the website is closed.
  • Mobile template directory: mobile/The directory has a structure similar to the PC template directory, used to store independent mobile template files, and plays a role when the website is set to "code adaptation" or "PC + mobile end" mode.

In this mode, AnQiCMS also supports more detailed custom template naming, for example:

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

2. Flat file organization pattern

This pattern places all major template files directly in the root directory of the template theme, distinguishing page types through specific naming conventions. The file naming usually adopts{类型}_页面名.htmlin the form of.

  • index.html: Home page.
  • {模型table}_index.html: Model homepage.
  • {模型table}_detail.html: Model details page.
  • {模型table}_list.html: Model list page.
  • guestbook.html: Message page.
  • page.html,page-{单页ID}.html: Single page and its customized template.
  • errors_404.html,errors_500.html,errors_close.htmlError page.
  • Same as well.mobile/The catalog is used for mobile templates, its internal structure is consistent with the flattened PC mode.

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

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 regulations, but also taking full advantage of the features provided by AnQiCMS:

  1. Modularization and reusability come first:

    • Abstract the common elements of the website (such as navigation, footer, sidebar) asbash.htmlorpartial/the fragments under the catalog. Through{% include "partial/sidebar.html" %}Such tags can be reused on multiple pages, greatly reducing the amount of repetitive 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 ensures consistency in the website style while also maintaining the independence of local content.

  2. Customization and flexible application:

    • AnQiCMS allows for background customization ofdocument, category and single pageSpecify an independent template file. This means you can design a unique display page according to the specific content needs.For example, a special promotional page or a product landing page can be customized to have a layout and functionality by filling in a custom template name in the corresponding content editing interface in the background.
    • Make full use of the custom template naming rules mentioned earlier (such aspage/{单页面id}.html), you can directly set up customized templates for key pages at the file system level, without any additional backend configuration.

  3. Responsive and multi-end adaptation:

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

  4. Static resource optimization management:

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

AnQiCMS template engine and tag usage

The AnQiCMS template engine provides rich tags and filters for handling data and control 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 %}Etc., used to obtain global configurations such as website name, contact information, etc.
  • Content-related tags: {% archiveList %}/{% categoryDetail %}Used to get article list, category details, and other content data.
  • Filter: |safeUsed to output HTML without escaping.|stampToDateUsed to format timestamps.|truncatecharsUsed for truncating strings, etc., which greatly enhances the data processing ability of templates.

A clear template directory structure and a reasonable organization method 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 front-end developers can work more efficiently together to build high-quality websites.

Frequently Asked Questions (FAQ)

Q1: How to create a new template theme in AnQiCMS?A1: To create a brand new template theme, you need to create a new folder under AnQiCMS's/templatedirectory, for example namedmythemeThen, create a new folder hereconfig.jsonFile, and fill in the basic information of the template (such as name, version, author, etc.). Then, according to your design requirements, organize in the folder mode or flat mode, inmythemeCreate the corresponding template file inside the folder (such asindex/index.html/partial/header.htmlAfter completing it, you can select and enable your new template theme in the 'Template Design' or 'System Settings' of the AnQiCMS backend.

Q2: How should I organize the template if my website needs different designs for PC and mobile?A2: When you need to adopt a completely different design for the PC and mobile ends, you should in the template theme'sconfig.jsonfile willtemplate_typeis set to1Or (code adaptation)2(PC+phone). Based on this, you need to create a subdirectory namedmobile/in your template theme directory. All template files for mobile display should be placed in thismobile/Under the directory, and maintain the same structure and naming conventions as the PC template directory (or flattened files).AnQiCMS intelligently loads the corresponding template based on the type of 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, you can. AnQiCMS provides highly customizable features to meet such needs.You can create a specific template file for this article in the template theme directory, for example, if "About Us" is a single-page content, you can createpage/about-us.html. Then, when editing the single page "About Us" in the AnQiCMS backend, find the "Single Page Template" field, and enter the name of the template file you created (such asabout-us.html). After saving, when accessing the single page, the system will load the specified independent template file instead of the default one.page/detail.html. For article or product detail pages, similar settings can also be made through the 'document template' field on the corresponding content editing page.