How to customize AnQiCMS template and implement personalized content display layout?

AnQiCMS provides highly flexible template customization capabilities, helping us not only to build functionally complete websites but also to 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. Understanding template customization is the key to unleashing its full potential.

The first step: Understand the basic of AnQiCMS template system

AnQiCMS adopts a syntax similar to the Django template engine, making it very easy for users familiar with web development to get started. Its template files are written in.htmlWith the suffix, they are stored uniformly in the system's/templateIn the root directory. Static resources such as styles, JavaScript scripts, images, and so on related to the template will be placed separately in/public/static/In the catalog.

Each template has an 'ID card' -config.jsonThe file includes the name, version, author, description, and an important setting itemtemplate_typeThis defines 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. Whichever one is chosen, there are conventional file naming rules, such as the home page is usuallyindex.htmlorindex/index.htmlThe document detail page can be{模型table}/detail.htmlThe category list page is{模型table}/list.htmlEtc. Understanding these conventions allows us to quickly locate and modify the target page.

Step two: Master the template file type and custom path for fine-grained control

AnQiCMS in the customization of content display layout 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 articles, product categories, or independent single pages.

For example, if our website has a single page named "About Us", we want it to have a layout and design that is completely 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 the template asabout.htmlThus, when the user visits the "About Us" page, the system will load this exclusive template to achieve a completely personalized display.

Similarly, for a specific document category or a specific document detail, we can also present them with a unique layout by specifying a custom template in the background.This means that we can design a concise and clear list style for news information, and design a card layout with pictures and texts for product display, and all of this can be done without changing the universal template of the entire website.

AnQiCMS has specially considered the needs of mobile terminals. If our template is code adaptation or PC+mobile terminal independent mode, a can be created in the root directory of the templatemobile/Directory. In this directory, we can replicate the same template structure for mobile as that for desktop, and optimize and modify it for targeted optimization, ensuring that the user experience is **on different devices.

Step 3: Use template tags to dynamically display content and give the layout vitality

The template file is just the "skeleton" of the layout, what truly brings the content to life and makes it vibrant is the rich template tags and filters of AnQiCMS.They play the role of 'data connectors' and 'content processing tools', dynamically presenting the data managed by the back-end on the front-end.

The core syntax rules are very intuitive: use double braces{{ 变量 }}To output data, use single braces and percent signs{% 标签 %}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 %}It is used to obtain contact information, such as phone, address, email, etc., even including the contact information fields customized in the background. These are frequent guests in the common areas of the website header and footer.

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 conforms to SEO standards, improving user experience.

3. Core content display:

   • List display:{% archiveList %}and{% categoryList %}It is the most commonly used tag, used to display article lists, product lists, or category lists.They support filtering content by category ID, model ID, recommendation attributes (such as headlines, recommendations), and sorting methods (latest, hottest) and more. CombinedforLoop tags, we can flexibly control the display style of each item, such as article summary, thumbnail, publish time, and so on.
   • Details display:{% archiveDetail %}/{% categoryDetail %}and{% pageDetail %}Used to obtain the detailed information of documents, categories, and single pages. Throughnameparameters, we can accurately call any fields such as title, content, images, descriptions, and usesafeThe filter safely outputs content containing HTML.
   • Pagination feature:{% pagination %}with the tag andarchiveListUsed together, it can automatically generate a beautiful pagination navigation, making a large amount of content well-organized.

4. Enhance interaction and content organization: {% guestbook %}The tag can automatically generate the background configuration of the message form, convenient for users to submit information.{% linkList %}It is used to manage 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 %}Tags are used for conditional judgment, such as determining if there are images, subcategories, etc., to adjust the layout.{% for %}Tags 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, building a unified page skeleton;{% macro %}Then you can define reusable code blocks, reducing repetitive writing.

The fourth step: expand the data dimension through the content model, tapping into personalized potential

AnQiCMS one of its biggest highlights is its 'flexible content model' and 'custom field' feature. This gives us unlimited 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: *