How to customize the article display form in AnQi CMS based on the content model?

In Anqi CMS, utilizing the content model to flexibly define the display format of articles is one of its core strengths.It can make your website content not limited to traditional 'articles' or 'products' formats, but able to present various content structures according to actual business needs.

Understanding the core value of the content model

In the digital world, the content carried by websites is much richer than we imagine.In addition to common blog posts or product details, you may also need to display company activities, job openings, successful cases, course lists, and even real estate information or car configurations.These different content types have unique data structures and display requirements.For example, a 'job posting' should have a position name, salary range, location, and posting date fields;An event may include the event topic, start time, end time, location, number of registrants, and so on.

Traditional CMS systems often have strict restrictions on content structures, forcing you to adapt through makeshift or compromising solutions.But the flexible content model feature of Butanqi CMS is specifically designed to solve this pain point.It allows you to freely create and customize content models according to your business logic, building the most matching data structure for each type of content, thereby greatly enhancing the adaptability and management efficiency of the system.Built-in "article model" and "product model" are the foundation, while custom models open up infinite possibilities.

Custom content model: Build data structure from scratch

To start customizing the display form of content, you first need to start with the content model itself.

1. Enter the content model management interface:Log in to the Anqi CMS backend, where you will find the 'Content Management' menu, which includes the 'Content Model' item.Click to enter, you will see the built-in "Article" and "Product" models, as well as the custom models you create in the future.
2. Create or edit a model:You can choose to edit an existing model, or click 'Add New Model' to create a new content type. During the creation process, several key properties of the model need to be defined:
   • Model name:This is the Chinese name identified for this model in the background management interface, for example, "Recruitment Position", "Successful Case", or "Online Course".
   • Model table name:This is an English lowercase letter name used internally to store the data of this model in the database.For example, 'job', 'case', or 'course'.
   • URL alias:It is the English lowercase letter, which will be used to construct the URL address of the model content, for exampleyourdomain.com/job/xxx.
   • Title Name:This is the prompt text for the title field when publishing content under this model, for example, "Position Name" instead of the generic "Document Title".
3. Core: Custom field settings:This is the most flexible place for the content model. You can add exclusive fields for each model to store unique information for that type of content. Click "Add field" to configure:
   • Parameter name:This is the Chinese display name of the field when managing in the background, for example, 'Salary Range', 'Event Location'.
   • Call field:This is the English name used when referencing this field in the template, it is recommended to use camel case, for examplesalaryRange/activityLocationThis name is the key to connecting backend data with front-end display.
   • Field type:The Anqi CMS provides various field types to adapt to different data formats:
     • Single-line text:Suitable for brief text information, such as "product model", "event theme".
     • Number:Ensure the input is numeric, such as 'inventory quantity', 'price'.
     • Multi-line text:Suitable for long descriptive content, such as 'event details', 'job description'.
     • Single choice/Multiple choice/Dropdown choice:These types allow you to preset a series of options that the user can select from (single-choice/dropdown) or select multiple (multiple-choice).They are very suitable for defining fixed options such as "product color", "size", "activity status", etc.
   • Mandatory?:Control whether this field must be filled in when publishing content.
   • Default:Provide default values for the field for convenient content publishing.

By following these steps, you have built a dedicated data skeleton for specific types of content.For example, in the "Product Model", in addition to the system's title, content, etc., you can add custom fields such as "Brand (Single-line Text)", "Price (Number)", "Inventory (Number)", "Product Features (Multi-line Text)", "Color (Multiple Choices)" and so on.

Display custom data on the front end: flexible application at the template level.

After the content model and custom field definitions are completed, the next step is how to elegantly present it on the website's frontend.The AnQi CMS template engine provides powerful tags and flexible mechanisms, allowing you to finely control the display of each part of the content.

1. The correspondence between model and template:AnQi CMS follows a set of intuitive template naming conventions. For example, if you create a content model namedjobthen:

   • The list page template of the model is usually{模型table}/list.html, that isjob/list.html.
   • The detail page template of the model is usually{模型table}/detail.html, that isjob/detail.html. You can place these template files in the corresponding directory of your current theme.Moreover, AnQi CMS also supports specifying custom templates for specific individual articles or categories, which provides finer control. You can specify a custom HTML file path in the "Document Template" or "Category Template" field when editing articles or categories in the background.

2. Core: How to call custom fields in the template:Once the data structure is defined in the background, you can use the template tags of Anqi CMS in the frontend template to call this data.

   • Display a custom field for a single content on the detail page:For words likejob/detail.htmlSuch a detail page, you will need to display specific information about the current job posting. At this point,archiveDetailandarchiveParamsLabels come in handy:
     • Call directly:Many custom fields can be accessed directly{{archive.调用字段名}}in the form. For example, if you have customized a field calledsalaryRange