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

In AnQi CMS, creating a unique and richly-content article detail page is not a difficult task.This is not just a style modification, but also a deep dive into every aspect of content structure, data retrieval, and frontend rendering, achieving true 'complete customization'.The AnQi CMS provides us with great flexibility in content models and powerful template engines 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 template mechanism of Anqi CMS.In the Auto CMS, all frontend page displays are controlled by template files./templateThe directory, and organized according to 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 Django template engine, using double braces{{变量}}Output data, through{% 标签 %}Control the logic (such as conditional judgments, loops, etc.). This provides a solid foundation for us to customize content.

An important customization point is that, the CMS allows you tospecific articlesorSpecific categorySpecify 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.product_detail.htmlornews_template.html），Then place this file there. The system will prioritize the use of these specified templates./template/{你的模板目录}/archive/下即可。系统会优先使用这些指定的模板。

核心：Custom content models and fields with endless possibilities

You can enter the "Content Management" section to find the "Content Model" feature.Here, in addition to the system default article model and product model, you can also create new models as needed, or modify existing models.For example, if you want to display "Source of Article

• Single Line Text：适用于短句，如“文章来源”。
• Number：如“阅读时长”、“评分”。
• Multi-line text：适用于较长的文本，如“作者简介”。
• 单项选择、多项选择、下拉选择：Used for preset options, such as 'Article Level' (Novice, 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 restrictions and achieving personalized content display.

Precise 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.

• archiveDetailtagsThis is the core tag for retrieving article detail data.
  • You can use it directly{{archive.Title}}/{{archive.Content}}/{{archive.Logo}}/{{archive.CreatedTime}}Wait to get the default fields of the article.
  • Key points: Retrieve custom fields. If you add custom fields in the content model, such as a field namedauthorfield, you can directly access it 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>
    

• archiveParamstagsIf 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 %}
  

• categoryDetailtags: Used to get the detailed information of the current article category, such as the category name{{categoryDetail with name="Title"}}Or category link{{categoryDetail with name="Link"}}.
• tagListtagsUsed to display the tags related to the current article, you can loop