AnQiCMS provides highly flexible template customization capabilities, helping us not only build a functional website but also achieve unique personalized content display layouts.This flexibility is one of the core advantages of AnQiCMS, especially for small and medium-sized enterprises or content operation teams that pursue brand uniqueness and user experience. A deep understanding of template customization is the key to unleashing its full potential.

第一步：理解 AnQiCMS 模板体系的基础

AnQiCMS has adopted syntax similar to Django template engine, which makes it very easy for users familiar with web development to get started. Its template files are in.htmlFor suffix, unified storage in the system/templateThe root directory. Static resources such as styles, JavaScript scripts, images, etc. related to the template will be placed separately in/public/static/In the catalog.

Each template has an 'ID card' —config.json文件，它包含了模板的名称、版本、作者、描述等基本信息，以及一个重要的设置项template_typeThis is used to define the template adaptation type, such as adaptive, code adaptation, or PC+mobile independent mode. This allows us to have a clear direction when choosing and developing templates.

On file organization, AnQiCMS supports two modes: folder organization mode and flattened file organization mode. Regardless of which one you choose, there are conventions for file naming, such as the homepage is usuallyindex.htmlorindex/index.htmlEnglish document details page can be{模型table}/detail.htmlEnglish category list page is{模型table}/list.htmletc. Understanding these conventions allows us to quickly locate and modify the target page.

第二步：Master the template file types and custom paths, achieve fine-grained control

AnQiCMS on the personalized display layout of content largely benefits from its ability to specify independent templates for different content types.This goes beyond simple global styles, allowing us to design unique visual presentations for each 'element' on the website—whether it's an article, product category, or an independent single-page.

For example, if our website has a single-page "About Us", and we want it to have a layout and design that is distinctly different from other pages, we can create a page namedpage/about.htmlThe template file. Then, when editing the single page "About Us" in the background, specify its template asabout.htmlThus, when the user accesses the "About Us" page, the system will load this exclusive template to achieve a fully personalized display.

Similarly, for a specific document classification or specific document details, we can also allow them to display unique layouts by specifying custom templates in the background.This means that we can design a concise and clear list style for news and information, and a richly illustrated card layout for product display, all without changing the universal template of the entire website.

AnQiCMS also takes the needs of mobile devices into special consideration. If our template is code-compatible or PC+mobile independent mode, you can create a directory under the template root.mobile/Table of contents.In this directory, we can copy the same template structure for mobile as for desktop, and perform targeted optimization and modification to ensure a ** user experience on different devices.

Third step: Use template tags to dynamically display content, give layout vitality

模板文件只是布局的“骨架”，真正让内容动起来、活起来的，是 AnQiCMS 丰富的模板标签和过滤器。They play the role of "data connector" and "content processing tool", dynamically presenting the data from the backend on the frontend.

The core syntax rules are very intuitive: use double curly braces{{ 变量 }}To output data, use single curly braces and the percent sign{% 标签 %}Call a function or control logic.

  1. Get basic information of the website: {% system %}Tags can help us easily get the website name, LOGO, filing number, copyright information, and other global settings;{% contact %}These are common elements in the public areas such as the header and footer of the website, used to obtain contact information such as phone number, address, email, and even customized contact fields by the backend. These are frequently used.

  2. Build navigation and page structure: {% navList %}Tags are very powerful, able to generate multi-level navigation menus, combinedifTags, we can easily implement complex dropdown menus or sidebar navigation layouts.{% breadcrumb %}It can automatically generate breadcrumb navigation that complies with SEO standards, enhancing user experience.

  3. Core content display:

    • List Display:{% archiveList %}and{% categoryList %}forLoop tags, we can flexibly control the display style of each item, such as article abstract, thumbnail, publishing time, etc.
    • Detail display:{% archiveDetail %}/{% categoryDetail %}and{% pageDetail %}Used to retrieve the detailed information of documents, categories, and single pages. Bynameparameters, we can accurately call any field such as title, content, images, description, and usesafeThe filter safely outputs content that includes HTML.
    • Pagination feature:{% pagination %}Tags andarchiveListUsed together, it can automatically generate beautiful pagination navigation, making a large amount of content organized.

  4. Enhance interaction and content organization: {% guestbook %}Labels can automatically generate the background configuration of the message form, making it convenient for users to submit information.{% linkList %}It is used for managing friend links.{% tagList %}and{% tagDataList %}Tags help display and utilize the website's tag system, linking related content together, enhancing content depth and SEO effectiveness.

  5. Logical control and code reuse: {% if %}Labels are used for conditional judgments, such as determining if there are images, subcategories, etc., to adjust the layout.{% for %}Labels are used for looping through data lists, which is the foundation for dynamic content display.{% include %}Used to introduce common code snippets, such as headers and footers;{% extends %}Used for template inheritance to build a unified page skeleton;{% macro %}can define reusable code blocks to reduce repetition.

Fourth step: Expand data dimensions through content models, tapping into personalized potential

AnQiCMS one of the biggest highlights is its 'flexible content model' and 'custom field' feature. This gives us endless imagination space to define and display content.

In the background, we can create or modify content models (such as the "article" model or the "product" model), and add various custom fields, such as: *