Manage the display layout of a website in Anqi CMS, the core is to understand its flexible template file structure and powerful tag system.This can not only give your website a unique visual style, but also greatly improve the efficiency of content operation and user experience.
I. Overview of AnQiCMS template basics: the cornerstone of building a website
Imagine that your website is a house, and the template system of Anqi CMS is the design drawings and construction tools for this house.It is based on the efficient backend of Go language, but it adopts syntax similar to the Django template engine for the frontend template, which allows users familiar with web development to get started quickly.
Each AnQi CMS website's 'blueprint' is stored in/templateUnder the directory. Here you can find all the HTML files used to build web pages.And the styles (CSS), scripts (JavaScript), and images, etc., which these pages require, are uniformly stored in/public/static/In the catalog.
In terms of template file writing, AnQi CMS follows some basic conventions: all template files use.htmlUsing as a suffix, and uniformly adopting UTF-8 encoding to avoid garbled characters. Content variables are enclosed in double curly braces{{变量}}Enclosed, while conditional judgment, loop control, and other logical tags are used{% 标签 %}{% 结束标签 %}The clear syntax structure makes the template code easy to read and maintain. In addition, variable names mostly use camel case, which is convenient for you to quickly identify and call.
The AnQi CMS also considers the browsing experience on different devices, supporting various template types: adaptive (a single code fits all devices), code adaptation (different templates for PC and mobile end but sharing the same domain), as well as independent mode for PC and mobile end (different templates for PC and mobile end and bound with independent domain).This flexibility allows your website to present**effect**on both computers and mobile phones.
Understand the structure of template files in depth: follow the map to control the overall situation
To effectively manage the website layout, it is first necessary to have a clear understanding of the template file structure of Anqi CMS.
1. Template directory and configuration file: the 'ID card' of the website
In/templateUnder 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 computer + mobile end).This configuration item directly determines the display mode of the template on different devices, and it is the first step in your 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 pattern: Choose the "blueprint" that suits you.
The Anqi CMS provides two main file organization modes to adapt to 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 example
index/index.htmlUsed for the homepage,{模型table}/detail.htmlUsed for content detail page. It also supports placing the header, footer, and other common partsbash.html, placing the sidebar, breadcrumbs, and other small componentspartial/Under the directory, making the structure clearer, easier for large project management and team collaboration. - Flattened file organization mode:For websites with a relatively simple structure, you can choose this pattern, placing all major template files directly in the template root directory, such as
index.html/{模型table}_detail.htmlThis approach is more direct, suitable for quickly setting up personal blogs or small enterprise websites.
No matter which mode you choose, some key page names are universal, such as: Home page (index/index.htmlorindex.html）、Content Model Homepage（{模型table}/index.htmlor{模型table}_index.html）、Document Details Page（{模型table}/detail.htmlor{模型table}_detail.html）、Single page（page/detail.htmlorpage.html）and various error pages（such aserrors/404.html)
3. Mobile Template: Customized for Small Screens
If yourconfig.jsonoftemplate_typeSet to code adaptation or PC+mobile mode, then create one under the template directorymobile/The subdirectory is particularly important. This directory is专门存放存放mobile end 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 on various screen sizes.
3. Refine the website display layout management: make full use of tools, twice the result with half the effort
After understanding the template structure, the next step is to fine-tune the display layout of the website using the powerful features provided by Anqi CMS.
1. Flexible template switching and customization: Assign exclusive appearance to different content
The Anqi CMS allows you to switch the theme of the entire website with one click through the admin 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 category template: When creating or editing a category, you can specify a specific template file for the category and its content list, for example, to set a template for a product category
product/list-tech.htmlto display a unique layout. - Custom document template:For a single document, you can specify a special detail page template to use, for example, a download page can use
download.htmlTemplate. - Custom single page template:For a single-page such as “About Us” or “Contact Us”, you can specify a unique
page/about.htmltemplate to present a personalized design.
These custom template features are implemented through preset file naming rules, you just need to select the corresponding template name in the background, and the system will automatically apply it.
2. Powerful and easy-to-use template tags: the magician of content
The AnQi CMS template tags 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:
{{变量}}This is the basic usage, used to directly display data such as website names, article titles, etc. from the background. - Logical control and content looping:
{% if 条件 %}Used to implement conditional judgments, such as displaying different content based on whether the user is logged in;{% for item in 列表 %}It is used to loop through article lists, category lists, etc., to dynamically generate page content. - Content block reuse and structural inheritance:
{% include "partial/header.html" %}Used to insert commonly used code snippets such as headers, footers, sidebars, etc. into any page, avoiding repeated writing and improving maintenance efficiency.{% extends "base.html" %}: Implement template inheritance, you can create a basic layout (base.html) and other pages can inherit it and rewrite specific areas ({% block content %}) which greatly simplifies template development and modification.{% macro 宏名称(参数) %}: Defines a reusable code macro, similar to a function, that can be called multiple times in a template, especially suitable for building complex and repetitive UI components.
- : Specific feature tag:The AnQi CMS is built-in with rich tags to simplify various common functions, such as:
{% system %}and{% contact %}Tags can help you easily get the global settings and contact information of the website.{% navList %}Tags are used to build