How to completely customize the content display layout of the article detail page?

It is not difficult to create a unique and rich content article detail page in AnQi CMS.This is not just a modification of the style, but also goes deep into every link of content structure, data retrieval, and front-end rendering, achieving true 'complete customization'.AnQi CMS provides us with great flexibility through its flexible content model and powerful template engine to achieve this goal.

Understanding the 'skeleton' of the article detail page: template mechanism

To customize the article detail page, you first need to understand the Anqi CMS template mechanism.In AnQi CMS, all frontend page displays are controlled by template files.These template files are usually stored in/templateUnder the directory, organized by different functions or models. For the article detail page, the core template files are usuallyarchive/detail.html.

The template syntax of Anqi CMS is similar to the Django template engine, using double curly braces{{变量}}to output data, through{% 标签 %}To control logic (such as conditional judgment, loops, etc.). This provides a solid foundation for customizing content.

An important point of customization is that Anqi CMS allows you tospecific articlesorspecific categoriesSpecify an independent template file. This means that if your website has different types of content, such as news articles, product introductions, or case studies, they can have completely different detail page layouts, rather than just sharing the same general template.In the background article or category editing interface, you can enter the custom template file name (for exampleproduct_detail.htmlornews_template.html)，Then put this file into/template/{你的模板目录}/archive/And the system will prioritize the use of these specified templates.

Core: Unlimited possibilities of custom content models and fields

The content of the article detail page is not just the title and text. The flexible content model of Anqi CMS is the key to deep customization.It allows you to create or modify content models based on business requirements and add exclusive custom fields for them.

You can enter the admin panel and find the 'Content Model' feature under 'Content Management'.Here, in addition to the default article model and product model of the system, you can also create new models as needed, or modify existing models.For example, if you want to display 'Source of the article', 'Author's introduction', or 'Download link of related materials' on the article detail page, you can add these custom fields to the article model.These fields can be:

• Single-line text: Suitable for short sentences, such as "source of the article".
• Number: Such as "reading time", "rating".
• Multi-line text: Suitable for longer text, such as "author's biography".
• Single choice, multiple choice, dropdown choiceUsed for preset options, such as "Article Level" (Beginner, Intermediate, Advanced).

These custom fields become part of the article data once defined, and can be accurately retrieved and displayed in the article detail page template.This is the cornerstone for breaking through the standard layout constraints and achieving personalized content display.

Accurate retrieval and display: the magic of template tags.

In the custom article detail page template, we need to use various template tags to retrieve and render data.

• archiveDetailTagThis is the core tag for retrieving article detail data.
  • You can directly use{{archive.Title}}/{{archive.Content}}/{{archive.Logo}}/{{archive.CreatedTime}}Wait to get the default field of the article.
  • Key point: retrieve the custom field. If you add a custom field in the content model, such as a field namedauthorfield, you can directly pass through.{{archive.author}}Get its value. If your custom field is an image group, for exampleimage_galleryYou can display it in a loop like this:

    
    {% archiveDetail imageList with name="image_gallery" %}
    <ul class="image-gallery">
      {% for img in imageList %}
      <li><img src="{{img}}" alt="图片描述" /></li>
      {% endfor %}
    </ul>
    

• archiveParamsTag: If you want to loop through all the custom parameters of the article (instead of specifying them individually),archiveParamsit will be very useful.

  
  {% archiveParams params %}
  <div class="article-meta">
      {% for item in params %}
      <p><strong>{{item.Name}}：</strong>{{item.Value}}</p>
      {% endfor %}
  </div>
  {% endarchiveParams %}
  

• categoryDetailTag: Used to get the details of the current article's category, such as the category name{{categoryDetail with name="Title"}}Or category links{{categoryDetail with name="Link"}}.
• tagListTagUsed to display tags related to the current article, you can loop through them