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

In Anqi CMS, the customized display layout and content of the document detail page is the key to realizing website personalization and meeting specific business needs.The final form of website content, detail pages not only carry core information but also directly affect user experience and search engine optimization effects.AnQi CMS provides a highly flexible template mechanism and rich data tags, allowing users to easily create unique document detail pages according to their own creativity.

Understanding the basic structure of the document detail page of AnQiCMS

The Anqi CMS template system uses a syntax similar to the Django template engine, files are located in.htmlsuffix and stored in/templatethe directory. For document detail pages, the system defaults to finding{模型table}/detail.htmlfiles to render the content. Among them{模型table}Represents the table name of the content model to which the document belongs, for example, the article model may bearticle, the product model could beproduct.

This default mechanism provides basic versatility, but the strength of AnQi CMS lies in its support for more refined customization:

• Customization at the document ID level:If you want a specific document to have a completely different layout, you can create a template file named{模型table}/detail-{文档ID}.htmlFor example, the detail page template for an article with ID 100 can bearticle/detail-100.html. The system will prioritize using this more specific template.
• Content model customization: You can set custom fields for a content model (such as articles, products) in the background management interface. These fields will directly affect the data types displayed on the detail page.
• Template language:You will mainly use double curly braces{{变量}}to output data, as well as single curly braces and percent signs{% 标签 %}to control the logical flow (such as conditional judgment, loops).

Core data call: how to display document content

The core of the document detail page is to display the data of the document itself. Anqi CMS providesarchiveDetailtags, which are the universal keys to obtain detailed data of a single document.

• Basic information display:ByarchiveDetailLabel, you can easily get the title, description, publication time, and views of the document. For example, to display the document title, you can use{% archiveDetail with name="Title" %}. For time information, combinestampToDateFilter (such as{{stampToDate(archive.CreatedTime, "2006-01-02")}}）can be formatted into a readable date.
• Document content presentation:The document text is the most important part of the detail page. Use{% archiveDetail archiveContent with name="Content" %}You can obtain the document content. It is noteworthy that if the document content is generated by a rich text editor HTML, it is necessary to add|safeFilter, that is{{archiveContent|safe}}To avoid HTML code from being escaped and displayed directly. If the Markdown editor is enabled, you can also userender=trueThe parameter allows the system to automatically convert Markdown format to HTML, for example{% archiveDetail archiveContent with name="Content" render=true %}.
• Images and media:
  • Cover image and thumbnail: LogoandThumbThe fields correspond to the cover image and thumbnail of the document, the calling method is similar{% archiveDetail with name="Logo" %}.
  • Group image display:If the document contains multiple images (such as product albums),ImagesThe field will return an array of image URLs. You need to combineforloop tags to iterate over and display these images, for example:

    
    {% archiveDetail archiveImages with name="Images" %}
    <ul>
    {% for img in archiveImages %}
        <li><img src="{{img}}" alt="文档图片"></li>
    {% endfor %}
    </ul>
    

  • Image lazy loading:To optimize the page loading speed, the images in the document content can be processed byarchiveDetailthe tag withlazy="data-src"parameter, so that the system can automatically process the imagessrcattribute is replaced withdata-srcand implement image lazy loading in need with the help of front-end lazy loading libraries.

Deep customization: Use content models to customize fields

The content model feature of AnQi CMS is an important embodiment of its high flexibility.You can define unique fields for different content models (such as articles, products) to store more rich and targeted data.

• Define custom fields:In the background "Content Management" "Content Model", you can add custom fields such as "author", "product parameters", "download link", and so on for article models or product models.These fields can be single-line text, numbers, multi-line text, single selection, multiple selection, or dropdown choices.
• Display all custom fields:If you want to display all custom fields of the document in a list, you can usearchiveParamsTags:

  
  {% archiveParams params %}
  <div>
      {% for item in params %}
      <div>
          <span>{{item.Name}}：</span>
          <span>{{item.Value}}</span>
      </div>
      {% endfor %}
  </div>
  {% endarchiveParams %}
  

• Directly call a specific custom field:Know the name of the custom field (for example, the call field defined in the background is namedauthor) You can directly get its value like calling a built-in field:{% archiveDetail with name="author" %}This is very useful for situations where it is necessary to place specific custom fields at fixed positions.

Rich display: associated information and dynamic logic

A great detail page is not just about displaying the main content, but also providing rich associated information and dynamic interaction.

• Associated category information:UsecategoryDetailTags can retrieve the name, link, and description of the current document category, etc. For example, display the category name and link:

  
  <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a>
  

• Show related tags:BytagListTags, you can list all tags related to the current document and generate links for each tag to facilitate users in exploring more related content:

  
  {% tagList tags %}
  {% for item in tags %}
      <a href="{{item.Link}}">{{item.Title}}</a>
  {% endfor %}
  {% endtagList %}
  

• Navigation and recommendations: prevArchiveandnextArchiveTags can conveniently add links to the previous and next documents at the bottom of the document, guiding users to continue browsing.archiveListLabel combinationtype="related"Parameters, can display other documents related to the current document content, further enriching the recommended content.
• Dynamic logic control:
  • Conditional judgment: {% if 条件 %}The label is used to display or hide content based on specific conditions, such as checking if a field has a value before displaying the corresponding module.
  • Loop traversal: {% for item in 列表 %}Tags are indispensable when dealing with multi-image, multi-label list data.
  • Variable assignment: {% set 变量 = 值 %}or{% with 变量 = 值 %}You can create temporary variables to make template code cleaner and more readable.
• Advanced SEO elements:To improve search engine friendliness, you should set the page title in the detail page's<head>area.tdktags(Title) and keywords(Keywords) and description(Description) as well. If there is a need for a standard link,tdkTags can also provideCanonicalUrlEnsure that the search engine correctly identifies the authority of the page.

Optimize user experience: image processing and interaction

In addition to the accurate presentation of content, the user experience of the document detail page is also crucial.

• Background content settings:In the AnQi CMS backend under 'System Settings' and 'Content Settings', you can configure the image processing strategy