How to customize the display layout of content on the frontend page in Anqi CMS?

AnQiCMS (AnQiCMS) as an efficient and flexible content management system, its powerful template functions and content model provide us with great freedom. We can finely control the layout of content displayed on the front-end page according to the actual needs of the website.To achieve this goal, we need to deeply understand the template engine, content model, and built-in tags of Anqi CMS.

Core elements of layout customization in AnQi CMS

Customize content layout in Anqi CMS, mainly focusing on the following core elements:

1. Powerful template engine:The AnQi CMS uses a template engine syntax similar to Django, making template creation intuitive and easy to learn. It uses double curly braces{{变量}}Call variables, use single curly braces and percent signs{% 标签 %}Control logic (such as conditional judgment, loop), we can flexibly display background data on the front end.
2. Flexible content model with custom fields:The content model function of Anqi CMS is particularly powerful, allowing us to flexibly define various content types according to business needs, such as articles, products, news, etc.Each content model can be configured with exclusive custom fields (such as the 'author', 'source' of articles, the 'price', 'inventory' of products, etc.), which are the key to realizing personalized content display.
3. Diverse template files and naming conventions:All template files are stored in/templatethe directory, and.htmlWith suffix. Anqi CMS has preset a series of template file naming conventions, for example:article/detail.htmlfor the article detail page,product/list.htmlFor product list pages,page/detail.htmlUsed for single page details. In addition, it supports creating custom template files for specific document ID, category ID, or single page ID, for examplearticle/detail-10.htmlThis is specifically used for the article detail page of ID 10. These naming rules and custom features provide us with great flexibility.
4. Rich built-in tags and filters:The AnQi CMS is built-in with dozens of template tags and filters for dynamically retrieving and processing various data. For example,archiveListtags are used to retrieve articles or product lists,archiveDetailTags for getting detailed information of a single article,categoryListandcategoryDetailUsed to get the category information,pageDetailFor getting information of a single page, as well as,systemTags for getting system configuration,navListGetting navigation data, etc. With the cooperation of,forloop tags andifConditional tags, as well as,safe/truncatecharsWith filters, we can precisely control the output format and style of content.

Practical Guide: Customizing Your Website Layout in Layers

After understanding the core elements, we can customize the website layout layer by layer according to the 'from macro to micro' approach:

The first layer: Global skeleton - building and inheriting the general template

Websites usually have some common structures, such as headers (Header), footers (Footer), and sidebars (Sidebar). In AnQi CMS, we can use template inheritance (extends) and include (includeBuild these global skeletons.

• Create a basic template (base.html):In/template/你的模板目录/Create one belowbase.htmlFile, as the master template for all pages of the website. In this file, define the HTML structure, include public CSS/JS, and use{% block 区域名称 %}{% endblock %}tags to define replaceable content areas, such asblock title(Page Title),block header(Header),block content(Main Content) andblock footer(Footer).
• Contains common fragments:For page header navigation, sidebar, and other independent modules that appear repeatedly on multiple pages, they can be divided into independent template fragments (for example,partial/header.html/partial/footer.html)，thenbase.htmlpass through{% include "partial/header.html" %}This is the way to introduce. This helps with code reuse and maintenance.

Second level: Model and classification level - definition of batch content layout

For content of a specific type (such as all articles) or content under a specific category, we need to define unified layout rules.

• Content model level template:AnQi CMS will prioritize searching for template files under specific content models. For example, all article list pages will use the default template.article/list.htmlSimilarly, all product detail pages will use the default template.product/detail.html. You can create or modify these template files according to these conventions to achieve unified layout at the model level.
• Category-level customized template:If the content under a category (such as the "Company News" category) needs to be different from other categories (such as "Industry Dynamics"), you can specify a "category template" or "document template" in the "other parameters" when editing the category in the background.
  • Category template:When you specify a "category template" (such asnews_list.html), then the list page of this category and its subcategories will use this custom template instead of the default onearticle/list.html.
  • Document template:When you specify a "document template" (for examplenews_detail.html), then all document detail pages under this category and its subcategories will use this custom template instead of the default onearticle/detail.htmlIn this way, you can easily achieve differentiated display for different content groups.

You will use these templates extensively.archiveList/archiveDetail/categoryDetailUse tags to dynamically retrieve content data. For example, on an article list page (article/list.html) you can use{% archiveList archives with type="page" limit="10" %}to retrieve the article list, and useforLoop through the display.

The third level: content item level - meticulously crafted for personalized display

For content items with special display requirements, Anqi CMS also provides flexible customization options.