The template file and organization method in AnQiCMS: The secret to flexible control of page display

In the digital age, the visual presentation and layout of a website is the core of attracting users and conveying information.An excellent content management system should also provide highly flexible page display control capabilities, in addition to powerful content management functions.AnQiCMS is designed based on such an idea, it not only makes content publishing efficient, but also gives users the powerful ability to customize the appearance of the website freely through its unique template file type and organizational mode.

AnQiCMS template system overview

AnQiCMS adopts a Django template engine syntax that many people may be familiar with, which means that many developers will feel at ease when creating and modifying templates, as it is very similar to the popular Blade syntax. All template files are unified with.htmlas a suffix, and stored in the root directory of the website/templateIn the folder. To maintain the clarity and efficiency of the website structure, there are dedicated CSS styles, JavaScript scripts, images, and other static resources used in the template./public/static/The catalog is stored here.

When processing template files, be sure to use UTF-8 encoding consistently, which is the key to ensuring that the page content is displayed normally and to avoid garbled characters.

A diversified template adaptation mode

AnQiCMS understands the different needs of responsive design for various websites, therefore it supports three main website modes to adapt to different devices and user scenarios:

  1. Adaptive mode:Suitable for a template code that can display well on screens of different sizes (such as computers, tablets, mobile phones).This pattern usually depends on responsive CSS frameworks, with relatively low maintenance costs.
  2. Code adaptation mode:This pattern allows you to load or display different content and styles in the same set of template code, based on the user's device type (such as by determining the browser User-Agent).It provides more control than pure adaptation, but still shares most of the code.
  3. PC+Mobile independent site mode:If you need to provide a completely different user experience and content structure for desktop and mobile devices, you can choose this pattern. At this time, in addition to the main template directory, you also need to create amobileA folder specifically for storing mobile templates. This approach provides the highest flexibility, allowing you to deeply optimize for different devices.

In/templateCreate a separate folder for each template under the directory and place one in itconfig.jsonFile is the key to AnQiCMS identification and management of templates. This configuration file defines in detail the name, version, author, description, and the adoptedtemplate_type(0 for adaptive, 1 for code adaptation, 2 for computer + phone), even including the current template's enable status.

Template directory and file organization: two clear paths.

To help users better organize and manage template files, AnQiCMS provides two mainstream organization modes, you can choose according to the scale of the project and the habits of the team:

1. Folder organization mode

This mode emphasizes grouping template files related to the same functionality into their respective subfolders, making the project structure clear.

  • Public code:like the header of a website (header) and the footer (footer) these parts that may be inherited on every page, are usually placed in abash.htmlthe file.
  • code snippet: Sidebar, breadcrumb navigation, and other reusable UI elements will be stored inpartial/the directory for easy on-demand introduction.
  • Feature module:For different content types or functions, corresponding folders are created. For example:
    • The website homepage template is usuallyindex/index.html.
    • The list page and detail page of a specific content model (such as articles, products) will be stored separately{模型table}/list.htmland{模型table}/detail.html.
    • Comment list, online messages, single pages, search results page, tag page, and various error pages (such as 404, 500) also have their standard file paths, such ascomment/list.html,guestbook/index.html,page/detail.htmletc.
  • Mobile end template:If using the "code adaptation" or "PC + mobile independent site" mode, a folder will be created in the main template directory.mobile/The internal structure of the folder will be consistent with the PC template.

The advantage of this pattern lies in its clear hierarchical structure, which can effectively maintain the readability and maintainability of code for large or complex sites.

2. Flat file organization pattern

Different from the folder organization mode, the flat mode places all template files directly in the main template directory without creating additional subfolders (exceptpartial/andmobile/)

  • Home: index.html.
  • Content model page: {模型table}_index.html(Model homepage),{模型table}_detail.html(Document details page),{模型table}_list.html(Document list page).
  • Other feature pages: comment_list.html,guestbook.html,page.html,search.html,tag_index.html,tag_list.htmletc.
  • Error page: errors_404.html,errors_500.html,errors_close.html.

Flattened mode uses underscores to separate file names, ensuring the uniqueness and readability of file names.This pattern is more suitable for small projects or personal sites, making file search and management more direct and fast.

Precise control: The power of custom template files

AnQiCMS provides standard organizational models while also granting users extremely high levels of customization.For some special content, you can specify the use of an independent template file in the background to display it, without modifying the general template.

For example:

  • Specific document details:If you have a very important article (ID 10) and you want it to have a unique display layout, you can specify a custom template for it in the document editing page of the background, such asarticle/10.html. AnQiCMS will prioritize this specific template.
  • List of specific categories:For a specific category (such as a product category with ID 5), if you want its product list page to have a unique layout, you can specify a template file for the category in the background, for exampleproduct/list-5.html.
  • Custom single page:A single page like "About Us", which you can design specificallypage/about.htmla template and specify its use in the background single page management to meet specific design requirements.

These custom template files are named according to certain rules, combining model table names, IDs, or aliases, to ensure that the system can accurately match.This flexible mechanism greatly expands the possibilities of website design, allowing you to customize every detail.

Template tag: bridge of content and logic

In the AnQiCMS template file, you will use template tags similar to Django style to insert dynamic content and control page logic. Double braces{{变量}}Used to output variable values, while single curly braces and percent signs{% 标签 %}are used for control logic, such as conditional judgments ({% if %}), loops ({% for %}), and introducing other template fragments ({% include %}/{% extends %}) et al.These tags are the bridge for template interaction with AnQiCMS backend data, allowing you to easily integrate data defined in the content model, site configuration information, and various dynamic features into the display of the page.

By deeply understanding the comprehensive support of AnQiCMS for template file types, organizational patterns, and custom capabilities, you will be able to fully utilize its flexibility and scalability to build a truly business-demanding, distinctive website.Whether it is a small website pursuing simplicity and efficiency or an enterprise portal requiring fine management, AnQiCMS can provide solid technical support.

Frequently Asked Questions (FAQ)

1. How do I switch to different template themes in the AnQiCMS backend?

You can find the 'Website Template Management' in the 'Template Design' module of the AnQiCMS backend. Each template folder contains aconfig.jsonfile that includesstatusField (0 is disabled, 1 is in use). On the backend interface, you will usually see a straightforward list, just click the "Enable" button next to the template you want to enable, and the system will automatically enable that template'sstatusSet the value to 1 and simultaneously set other templates.statusSet to 0.

2. How should I choose between folder organization mode and flat file organization mode?

Which mode to choose mainly depends on the scale of your project and team preferences:

  • Folder organization modeProvided clear logical grouping and hierarchical structure, more suitable for large, complex website projects, or scenarios requiring collaboration and maintenance by multiple people.It helps keep the code tidy and easy to navigate, avoiding difficulties in searching when the number of files is too many.
  • Flat file organization modeIt is characterized by simplicity and directness, all files are at one level, and file names are distinguished by underscores.It is more suitable for small websites, personal blogs, or those who pursue quick development and simple maintenance scenarios.

3. Can I specify a template file separately for a specific content block on the page (for example, a news list area)?

Yes, you can. AnQiCMS template tags (especially{% include %}tags) allow you to in