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 extremely high flexibility, whether it is to display the core content of the article, beautiful pictures, or customized business parameters, the system provides an intuitive and powerful way to help you meet your personalized needs.This is due to AnQiCMS's template engine similar to Django syntax, which separates content from design, allowing even 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 an article (or product, or other content model) is usually controlled by a specific template file. By default, these template files are located in/templateIn the corresponding content model folder under the directory, for example, the detail page of the article model may correspondarchive/detail.html. The system also allows you to set independent templates for specific categories or specific articles, by specifying the template filename in the background, for examplearchive/detail-123.htmlIt will be specifically used for articles with ID 123, or when choosing a custom template during article editing, such asdownload.html.

To customize the layout of the article detail page, the core is to understand how to call the various data of the article in these template files. AnQiCMS provides a wealth of template tags, the most commonly used and critical of which isarchiveDetailandarchiveParams.

Display of core content customization

The basic components of the article detail page are title, content, and summary. In the template, you can directly{{archive.字段名}}or usearchiveDetailuse tags to retrieve and display this information.

1. Title and description:The title of the article (Title) and description (Description) is the first piece of information that users encounter. You can easily present them on the page in the following way:

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

   Or use:archiveDetailTags:

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

2. Article content:The detailed content of the article (Content) is usually the focus of the user. Since the content may contain HTML tags, to ensure they are parsed correctly by the browser and not displayed as plain text, you need to use|safeFilter. If your content uses a Markdown editor and you want it to be rendered as HTML on the front end, you can use it withrender=trueparameter. At the same time, to optimize loading performance, you can utilizelazyto add 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 contain the content ofimg srcattribute is replaced withdata-src, making it convenient for front-end JS to implement image lazy loading.

3. Picture display:The images on the article detail page usually include cover images (thumbnails, large images) as well as images in the article content. AnQiCMS provides different tags and fields for these:

   • Cover Image (Logo) and thumbnail (Thumb):If the article is set with 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" %}" />
     

   • Group Image (Images):If the article is associated with multiple images (such as the carousel on the product detail page),ImagesThe field will return an array of image URLs. You can useforloop 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, thumbnail generation method), but you only need to call its 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 publishing time, views, category, and tags.

   • Publish time (CreatedTime):CombinestampToDatetags to format:

     
     <span>发布于：{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>
     

   • Views (Views):

     
     <span>阅读量：{% archiveDetail with name="Views" %}</span>
     

   • Category (Category):Can pass througharchive.CategoryAccess category objects, or usecategoryDetailTags:

     
     <span>分类：<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a></span>
     

   • Label (Tag):UsetagListtag:

     
     <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 functionality, which allows you to add an arbitrary number of custom fields for different types of content, and these fields can also be displayed on the article detail page.

1. Backend settings: Create a custom fieldNavigate to AnQiCMS backend内容管理 -> 内容模型. Select the content model you want to add custom parameters to (for example, 'Article Model' or 'Product Model'), click 'Edit'.In the "Content Model Custom Field" area, you can add various types of fields according to business needs, such as single-line text (for "author", "source"), numbers (for "price", "inventory"), multi-line text (for "product features"), and single/multi/select dropdowns (for "color", "size" etc.).

   For example, add a single-line text field named "Product Model" with the parameter nameproduct_modelor a 'production date' date field.

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

   • Traverse all custom parameters:If you want to display all custom parameters of the article, you can use aforto loop througharchiveParamsReturn the parameter list:

     <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 prior knowledge of all custom field names, and the template has a strong universality.

   • Call specific custom parameters:It is more common to only display one or a few 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 use:archiveDetailTags:

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

     This method is more accurate, suitable for displaying specific information at specific positions on the page.For example, the product details page may need to place the 'model number' below the title, while 'color', 'size', and other attributes are displayed as a list of product properties.

Actual operation: modify the template file

1. Determine the location of the template file:Find the corresponding detail page template file based on your content model. For example, for article models, it is usuallytemplate/您的模板名称/archive/detail.htmlIf you have specified a custom template for a specific article or category, please edit the file.
2. Backup file:Before making any changes, be sure to back up the original template file to prevent any unexpected situations.
3. Edit template:You can use the "Template Design" feature in AnQiCMS backend to edit template code online, and you can also download the template file to your local computer, modify it with your preferred code editor, and then upload it to overwrite.
4. **Save and Test