How can you customize the display layout of different types of content using a flexible content model?

In website operation, we often encounter such a need: different content types require different display methods.The layout of a news article may be very different from that of a product detail page, and a team member introduction page may have its own unique style.The flexible content model of AnQiCMS is designed to solve this pain point, allowing us to deeply customize the structure of the content and the final display layout, thus providing a** browsing experience for visitors.

Understanding the core value of the content model

One of the core advantages of Anqi CMS is its 'flexible content model' feature.In simple terms, a content model is like the 'skeleton' and 'identity proof' of the content.It defines what fields a certain type of content should include (for example, an article has a title, author, and publication date;The product has a name, price, stock, and a set of product images, as well as the types of these fields.

The flexibility brings great value to users. We can customize various content structures according to business needs, such as:

• Article model:Including title, content, keywords, abstract, cover image.
• Product model: Contains product name, detailed description, price, stock, product parameters (such as color, size), multi-angle images.
• Case model: Contains case title, customer name, completion date, case details, related images.
• Team member model:Contains name, position, personal introduction, avatar, social media links.

By creating dedicated models for each content type, not only can we manage and enter content more efficiently, but more importantly, it lays a foundation for customizing the display layout of these contents on the front end.

Build your exclusive content model

To start creating or adjusting the content model, we can go to the 'Content Management' section of the Anqi CMS backend and find the 'Content Model' option.The system usually comes with common models such as articles and products, and we can choose to modify them or add custom models as needed.

When creating a new model, you need to pay attention to the following key points:

1. Model name and table name:The model name is the Chinese name displayed on the back end, which is convenient for identification.The model table name is the identifier for data stored in the database, it is usually recommended to use lowercase English letters, and once set, it cannot be changed, so it needs to be handled with care.
2. URL alias:This name will be used in the frontend URL, which is very important for SEO, and it is also recommended to use lowercase letters in English.
3. Custom field:This is the core flexibility of the content model. We can add various custom fields to precisely define the content structure.
   • Single-line text:Applicable for brief information, such as product model, author name.
   • Number:Applicable for prices, inventory, quantities, etc.
   • Multi-line text:Applicable for longer descriptions, such as product introductions, article summaries.
   • Single choice/Multiple choice/Dropdown choice:Applicable to preset options, such as product colors, service types.
   • Image set:Very suitable for product display, can upload multiple images.
   • Mandatory?:Ensure that important information is not missed.

For example, when creating a “product” model, we can add fields such as “price” (numeric), “product features” (multi-line text), “color” (multiple choices), and “product gallery” (image set).These custom fields will be directly associated with the content entry interface and will be called in the subsequent template design.

精细化管理的内容与分类

After the content model is set up, when publishing content, we can select the corresponding category, and each category will be bound to a content model.This means that when we select a category bound to a 'product model', the content entry interface will automatically display all the fields defined in the product model, making content entry structured and efficient.

Moreover, AnQi CMS also supports specifying custom templates for specific categories or independent documents. This is a crucial feature, meaning that we can:

• Use a unified article list and detail page template for all 'News' categories.
• Use a standard detail template for all products under the 'Company Products' category, but customize a more attractive detail page template for the 'Star Products' subcategory.
• Even for an article specially recommended or a single page about us, design a completely exclusive layout.

By setting the category or document in the background, enter the custom template file name (for exampleproduct-special.html), and this purpose can be achieved.

Flexiblely define the display layout of the content

After we have defined the content model and customized the application method of the template, the next step is to implement the display layout of these contents in the template file.The AnQi CMS template system is based on syntax similar to Django, which is powerful and easy to learn.

1. Template file organization:The template files of Anqi CMS are located in/templatethe directory, which is usually organized according to content type and page function. For example,article/detail.htmlit may be the default template for the article detail page,product/list.htmlIt could be the default template for the product list page. When we want to customize the layout, we can create a new template file, such asproduct/detail-custom.htmlThen, in the background, it is assigned to a specific product category or the product itself.

2. Application of core tags:In the template file, we mainly use various tags provided by Anq CMS to obtain and display content.

   • archiveListandarchiveDetailTag: This is the core tag for obtaining the list and details of content (documents).moduleId/categoryIdWith parameters, we can accurately obtain the required content.
     • Standard fields for displaying content (such as)Title/Description), you can use it directly{{item.Title}}or{{archive.Description}}.
     • For fields customized in the content model, we can directly access them by{{item.自定义字段名}}or{{archive.自定义字段名}}Visit. For example, if the product model has onepricefield, it can be used in the detail page template{{archive.price}}to display.
     • If there are many custom fields, or if you want to handle it in a more flexible way,archiveParamsThe tag can get all the custom parameters of the current document and thenforloop through and display, such as: