How to customize the layout and content display of the article detail page in AnQi CMS?

AnQiCMS (AnQiCMS) is a highly flexible content management system that provides great freedom for content operators, especially in customizing the layout and content display of article detail pages.Understanding the underlying mechanism and operational methods can help us better create personalized pages that meet user needs and optimize SEO performance.

Why do you need to customize the article detail page?

In website operation, the article detail page is not just a carrier of content, but also a key point of deep interaction between users and information, and the key point for achieving transformation goals.A standardized template is convenient and fast, but it often fails to meet all personalized needs.Customizing the article detail page allows us to flexibly adjust the page layout based on the article type, content features, or marketing objectives, highlighting key information, improving the user reading experience, and ultimately optimizing the page conversion rate and SEO performance.For example, an article reviewing a product may need a more prominent product parameter area and purchase link, while an industry analysis report may require clear table of contents and downloadable PDF links.

The core mechanism of AnQiCMS detail page customization

The powerful customization ability of AnQiCMS mainly benefits from its template system based on the Django template engine syntax, flexible content model, and refined backend configuration.

1. Flexible template engine and file structure:AnQiCMS is used.htmlAs the template file suffix, and all templates are stored in/templateUnder the directory. It supports Django style tag syntax, such as{{变量}}Used to output content,{% 标签 %}Used to control logic. This structure makes the template file clear and easy to understand, convenient for modification and expansion.
2. Content model and custom fields: AnQiCMS allows us to customize content models according to business needs and add unique custom fields to each model.For example, we can add an "author bio" field to the "article" model, and a "product parameters" field to the "product" model.These custom fields are the basis for personalized content display.
3. Organizing and naming conventions of template files:In/templateWithin the directory, AnQiCMS follows a set of naming conventions to identify and apply different templates. For article detail pages, we can create specific content models under the root directory of the template.detail.htmlfiles (such asarticle/detail.htmlorproduct/detail.html)，This will serve as the default detail page template for all articles under this model. Furthermore, AnQiCMS even supports creating exclusive templates for individual articles or products, such as{模型table}/detail-{文档ID}.htmlThis provides the possibility for extremely personalized page design.

Specific steps and methods for customization

There are mainly the following methods to customize article detail pages in AnQiCMS:

Method one: Cover through template file naming

This is the most direct and flexible way to customize. We just need to follow the template naming conventions of AnQiCMS, create or modify the corresponding files.

1. Modify the general detail template:If we want all the detail pages of the "Article" model (or the "Product" model) to adopt a new layout, we can find it or/template/{你的模板目录}/{模型table}/Create in the directorydetail.htmlfile. For example,default/article/detail.html. The system will automatically recognize and apply this file as the default detail page for the model article.
2. Create an independent template for a specific article:For some articles with special display requirements (such as promotional pages, special content), we can create in the template directory{模型table}/detail-{文档ID}.htmlA formatted file. For example, if an article with ID 123 needs a unique design, it can createarticle/detail-123.htmlThe AnQiCMS will load this specific ID template first.

Method two: specify the template through the backend settings

In addition to following the file naming conventions, AnQiCMS also provides an option in the backend management interface to specify custom templates for articles or categories.

1. Specify in the article editing page:When we edit a specific article, in the "Other Parameters" area, there will be a "Document Template" field. Here, we can enter the path and filename of a custom template, for examplecustom/article_special.html. The system will load the specified template file according to this setting to render the detail page of the article. This template file needs to be placed in advance./template/{你的模板目录}/directory.
2. specified in the category editing page:AnQiCMS also allows us to specify a unified detail page template for all articles under a certain category.When editing categories, fill in the template path in the "Other Parameters" area of the "Document Template" field.This, all articles in this category (if they have not specified a document template separately) will use this template.This is very useful for websites that need to be styled uniformly by category topics.

Method three: Deeply customize content display (using template tags)

No matter which way we specify the template file, once inside the template, the rich template tags of AnQiCMS become the key to our flexible control of content display.

1. Get article details data: {% archiveDetail %}Tags are the main tools to get the core information of the article. On the article detail page, we usually do not need to specifyidortokenThe parameter automatically retrieves the article data on the current page. We can getnameparameters to get various fields of the article, such as:

   • {% archiveDetail with name="Title" %}Get the article title.
   • {% archiveDetail with name="Content" %}get the main content of the article. It is worth noting that,ContentField supportslazy="data-src"Used for lazy loading of images, as well asrender=true/falseto control whether Markdown content is converted to HTML.
   • {% archiveDetail with name="Logo" %}To get the cover image of the article,{% archiveDetail with name="Thumb" %}Retrieve thumbnails,{% archiveDetail archiveImages with name="Images" %}then used to get multiple images.
   • {% archiveDetail with name="CreatedTime" format="2006-01-02" %}Format the display of the publishing time.
   • We can also use it directly.{{archive.Title}}/{{archive.Content|safe}}In this way, you can call the field content of the current article.

2. Display custom fields:For additional fields defined in the content model, there are multiple display options:

   • Call directly:If the custom field name isauthor_introCan be used directly in the template{% archiveDetail with name="author_intro" %}To output their values.
   • Loop traversal: {% archiveParams params %}The tag can iterate and display the names and values of all custom fields. This is very convenient when it is necessary to dynamically display all parameters, such as the parameter list on the product detail page.

3. Integrate related content and features:

   • Previous/Next:Use{% prevArchive %}and{% nextArchive %}Tags can easily realize the navigation of the previous and next articles, enhancing the user's browsing depth within the site.
   • Related articles: {% archiveList archives with type="related" limit="10" %}Tags can recommend related articles based on the keywords or relationships of the current article, which helps users discover more