Manage the display layout of the website in the AnQi CMS, the core lies in understanding its flexible template file structure and powerful tag system.This not only allows your website to have a unique visual style, but also greatly improves the efficiency of content operation and user experience.

一、English CMS template basic overview: the foundation of building a website

Imagine, your website is like a house, and the template system of Anqi CMS is the design图纸 and construction tools for this house.It is based on the efficient backend of Go language, but adopts syntax similar to Django template engine on the frontend, which allows users familiar with web development to quickly get started.

Each English CMS website's “blueprint” is stored in/templateDirectory.Here, you can find all HTML files used to build web pages./public/static/In the catalog.

On the writing of template files, Safe CMS adheres to some basic conventions: all template files use.htmlAs a suffix, and uniformly use UTF-8 encoding to avoid garbled code. Variable content uses double curly braces{{变量}}wrapped, while logical tags such as conditional judgment, loop control, and so on use{% 标签 %}{% 结束标签 %}The form of this clear syntax structure makes the template code easy to read and maintain. Moreover, variable names are mostly in camelCase, which makes it easy for you to identify and call them quickly.

The Anqi CMS also takes into account the browsing experience on different devices, supporting various template types: responsive (one code to fit all devices), code adaptation (different templates for PC and mobile端 but sharing the same domain), and independent mode for PC and mobile (different templates for PC and mobile端 and bound to independent domains).This flexibility allows your website to present**effect** on both computers and mobile phones.

二、Deep Understanding of Template File Structure: Find Your Way, Control the Whole Picture

To effectively manage the website layout, it is necessary to have a clear understanding of the template file structure of the Anqi CMS.

1. Template directory and configuration file: the 'ID card' of the website

In/templateIn the root directory, each independent template theme will have its own folder. This folder contains a crucialconfig.jsonfile, which is like the 'ID card' of the template.config.jsonDefined the name, version, description, and the most criticaltemplate_type(Template type: 0 for adaptive, 1 for code adaptation, 2 for desktop + mobile).This configuration item directly determines the performance mode of the template on different devices, which is the first step in responsive design.Through the "Template Design" feature on the backend, you can easily view and manage these template themes, and edit them online.

2. File organization mode: Choose the 'blueprint' that suits you

The AutoCMS provides two main file organization modes to meet the needs of projects of different scales and complexities:

  • Folder organization mode:This pattern places template files for different functions or types (such as home page, detail page, list page) in their respective subfolders, for exampleindex/index.htmlused for the homepage,{模型table}/detail.htmlUsed for content detail pages. It also supports placing common parts such as page headers, footers, etc.bash.html, placing sidebars, breadcrumbs, and other mini-componentspartial/The directory structure makes it clearer, easier for managing large projects and team collaboration.
  • Flattened file organization mode:For websites with relatively simple structures, you can choose this mode, placing all major template files directly under the template root directory, such asindex.html/{模型table}_detail.htmlThis approach is more direct and suitable for quickly setting up personal blogs or small enterprise websites.

Regardless of the mode you choose, the naming of some key pages is universal, such as: Home Page (index/index.htmlorindex.html）、内容模型首页（English）{模型table}/index.htmlor{模型table}_index.html）、文档详情页（English）{模型table}/detail.htmlor{模型table}_detail.html）、Single Page（page/detail.htmlorpage.html）以及各种错误页（如English）errors/404.html).

3. 移动端模板：为小屏幕量身定制English

If yourconfig.jsonoftemplate_typeSet to code adaptation or PC+mobile end mode, then create amobile/The subdirectory is particularly important.This directory is specifically used to store mobile templates, and its internal structure is consistent with the main template directory.This means you can provide a completely independent page layout and interactive experience for mobile users, ensuring an optimal user experience across all screen sizes.

Chapter 3: Refine the website display layout: Use tools wisely, twice the work with half the effort

Understood the template structure, the next step is how to use the powerful functions provided by AnQi CMS to finely manage the display layout of the website.

1. Flexible template switching and customization: give exclusive appearance to different content

安企CMS allows you to switch the template theme of the entire website with one click through the background management interface, which is very convenient for website redesigns or trying different styles. Even more powerful is that you can specify independent template files for specific parts of the website:

  • Custom classification template:When creating or editing a category, you can specify a specific template file for the category and its content list, for example, setting a template file for a product category toproduct/list-tech.htmldisplay a unique layout.
  • Custom document template:For a single document, you can specify it to use a special detail page template, for example, a download page can usedownload.htmltemplates.
  • Custom single page template:For a single page like 'About Us' or 'Contact Us', you can specify a uniquepage/about.htmltemplate to present personalized design.

These custom templates are implemented through preset file naming rules, you just need to select the corresponding template name in the background, and the system will apply it automatically.

2. Powerful and easy-to-use template tags: the magician of content

The template tags of AnQi CMS are your 'magician' for controlling page content and layout. They present complex backend data in a simple and intuitive way on the frontend.

  • Variable and data acquisition: {{变量}}Is the most basic usage, used to directly display website names, article titles, and other data from the background.
  • Logical control and content looping: {% if 条件 %}Used to implement conditional judgment, such as displaying different content according to whether the user is logged in;{% for item in 列表 %}It is used for looping through article lists, category lists, etc., to dynamically generate page content.
  • Content block reuse and structure inheritance:
    • {% include "partial/header.html" %}Used to insert commonly used code snippets such as headers, footers, sidebars, etc. into any page, avoiding repetition and improving maintenance efficiency.
    • {% extends "base.html" %}：Implement template inheritance, you can create a basic layout (base.html) other pages simply inherit it and rewrite specific areas ({% block content %}) greatly simplifying template development and modification.
    • {% macro 宏名称(参数) %}：Define reusable code macros, similar to functions, which can be called multiple times in templates. It is particularly suitable for building complex and repetitive UI components.
  • Specific feature tag:The auto CMS is built-in with rich tags to simplify various common functions, such as:
    • {% system %}and{% contact %}Tags can help you easily obtain the global settings and contact information of the website.
    • {% navList %}Tags are used to build