How to customize the display layout of the article detail page, including images, descriptions, and custom parameters

In AnQi CMS, the display layout of the article detail page has high flexibility, whether it's showing the core content of the article, beautiful pictures, or customized business parameters, the system provides an intuitive and powerful way to help you meet personalized needs.This is thanks to AnQiCMS's template engine similar to Django's syntax, which separates content from design, allowing users without a strong programming background to adjust layouts through simple tags.

Understanding the composition of the article detail page

In AnQiCMS, the detail page of articles (or products, or other content models) is usually controlled by a specific template file. By default, these template files are located in/templateContent models folder corresponding to the directory, for example, the detail page of the article model may correspond toarchive/detail.htmlThe system also allows you to set independent templates for specific categories or specific articles, which can be achieved by specifying the template filename in the background, for examplearchive/detail-123.htmlWill be specifically used for articles with ID 123, or when editing articles and selecting a custom template, such asdownload.html.

To customize the article detail page layout, the core is to understand how to call various article data in these template files. AnQiCMS provides rich template tags, among which the most commonly used and key ones arearchiveDetailandarchiveParams.

Custom core content display

The basic components of an article detail page are the title, content, and introduction. In the template, you can directly access and display this information through{{archive.字段名}}or usearchiveDetailtags to retrieve and display this information.

  1. Title and Description:Article Title (Title) and Description (Description) is the first information users encounter. You can easily present them on the page by:

    <h1>{{archive.Title}}</h1>
<p>{{archive.Description}}</p>

    or usingarchiveDetailTags:

    <h1>{% archiveDetail with name="Title" %}</h1>
<p>{% archiveDetail with name="Description" %}</p>

  2. Article content:Detailed content of the article (ContentIt is usually the focus of the user's attention. Since the content may contain HTML tags, in order to ensure that they are parsed correctly by the browser and not displayed as plain text, you need to use|safeFilter. If your content is edited using a Markdown editor and you want it to be rendered as HTML on the front end, you can use it withrender=trueParameter. Additionally, to optimize loading performance, you can utilize.lazyAdd lazy loading attributes to the image parameter.

    <div class="article-content">
    {% archiveDetail articleContent with name="Content" render=true lazy="data-src" %}
    {{articleContent|safe}}
</div>

    Here,articleContentIs the variable name you define for the content.render=trueRepresents converting Markdown to HTML,lazy="data-src"It will replace theimg srcattribute in the content withdata-src, making it convenient for front-end JS to implement lazy loading of images.

  3. Image display:The image on the article detail page usually includes cover images (thumbnails, large images) and images within the article content. AnQiCMS provides different tags and fields for these:

    • Cover Large Image (Logo) and Thumbnail (Thumb):If the article has set a cover image, it can be directly called:
      
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
    • Gallery (Images):If the article is associated with multiple images (such as a product detail page carousel),Imagesthe field will return an array of image URLs. You can usefora loop to iterate through and display them:
      
<div class="product-gallery">
    {% archiveDetail productImages with name="Images" %}
    {% for img_url in productImages %}
        <img src="{{img_url}}" alt="产品图" />
    {% endfor %}
</div>
      These images will be processed according to the rules in the background 'Content Settings' (such as WebP conversion, automatic compression, and thumbnail generation method), but you only need to call their address in the template.

  4. Other standard fields:In addition to the core content mentioned above, you can flexibly display other standard information related to the article, such as publication time, views, category, and tags, etc.

    • Publish time (CreatedTime):Need to be combined withstampToDateFormat with tags:
      
<span>发布于：{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>
    • Views (Views): 
      
<span>阅读量：{% archiveDetail with name="Views" %}</span>
    • Category (Category):Can be accessedarchive.Categoryto access category objects, or usecategoryDetailTags:
      
<span>分类：<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a></span>
    • tags (Tag):UsetagListto obtain and cycle through tags:
      
<div class="article-tags">
    {% tagList tags with itemId=archive.Id %}
    {% for tag_item in tags %}
        <a href="{{tag_item.Link}}">{{tag_item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

Make full use of custom parameters

The strength of Anqi CMS lies in its flexible content model feature, which allows you to add an unlimited number of custom fields for different types of content, and these fields can also be displayed on the article detail page.

  1. Background settings: Create custom fieldsIn AnQiCMS background, navigate to内容管理 -> 内容模型.Select the content model you want to add custom parameters (such as "Article Model" or "Product Model"), click "Edit".In the 'Content Model Custom Fields' area, you can add various types of fields based on business requirements, such as single-line text (for 'Author', 'Source'), numbers (for 'Price', 'Inventory'), multi-line text (for 'Product Features'), and single/multiple/select dropdown (for 'Color', 'Size' etc.).

    For example, add a single-line text field for 'Product Model' namedproduct_modelor a 'production date' date field.

  2. Template call:archiveParamstagsOnce custom parameters are defined in the background content model, you can use them in the article detail page template.archiveParamsTag to retrieve and display these data.

    • Traverse all custom parameters:If you want to display all custom parameters of the article, you can use aforin a loop to iterate overarchiveParamsList of returned parameters:

      <div class="custom-params">
    <h3>附加信息</h3>
    {% archiveParams params %}
    {% for item in params %}
    <p>
        <span>{{item.Name}}：</span> <!-- 参数的中文名称 -->
        <span>{{item.Value}}</span> <!-- 参数的值 -->
    </p>
    {% endfor %}
    {% endarchiveParams %}
</div>

      The advantage of this method is that it does not require pre-knowledge of all custom field names, and the template has a strong versatility.

    • Invoke specific custom parameters:The more common case is, you may only need to display one or several specific custom parameters. AnQiCMS supports direct access to them by field name, just like accessing built-in fields:

      <p>产品型号：{{archive.product_model}}</p>
<p>生产日期：{{archive.production_date}}</p>

      or usingarchiveDetailTags:

      <p>产品型号：{% archiveDetail with name="product_model" %}</p>
<p>生产日期：{% archiveDetail with name="production_date" %}</p>

      This method is more accurate and suitable for displaying specific information at specific locations on the page.For example, the product details page may need to place the 'Product Model' below the title, while 'Color', 'Size', and other attributes are displayed as a list of product properties.

Actual Operation: Modify the template file

  1. Confirm the location of the template file:Find the corresponding detail page template file based on your content model. For example, for the article model, it is usuallytemplate/您的模板名称/archive/detail.htmlIf you have specified a custom template for a specific article or category, please edit this file.
  2. Backup file:Make sure to backup the original template file before making any modifications, in case of any unexpected situations.
  3. Edit template:You can use the 'Template Design' feature in AnQiCMS backend to edit template code online, or download the template file to your local machine and modify it using your preferred code editor, then upload and overwrite it.
  4. **Save and Test