The Anqi CMS excels in the flexibility of content display, especially for article detail pages, where it provides multi-level customization options, allowing us to finely control the layout of content display according to specific needs, whether it is for the entire model, a specific category, or an independent article.This is not limited to aesthetic adjustments, but also includes deep customization of the page content structure and information presentation.

Template core: The cornerstone of free arrangement

The template system of AnQi CMS adopts syntax similar to Django template engine, using.htmlAs a template file suffix, and uniformly stored in the root directory of the website/templateIn the folder. All the front-end styles, JavaScript scripts, and images, etc., static resources are stored separately./public/static/Table of contents. This means we can directly edit these HTML files, through tag markers ({% tag %}) and variable output ({{变量}}) to define the structure and data flow of the page.

On the layout customization of the article detail page, AnQi CMS provides a refined template file selection mechanism, layer by layer, giving us the greatest control over the presentation of content.

Flexible template file selection mechanism

The template selection of AnQi CMS follows a priority rule: The template specified for a single document > The document template specified for the category > The default document detail template of the content model.

First, let's understand how these different level template files work:

  1. Global general detail page:Each content model (such as "article model" or "product model") has a default detail page template. Usually, its naming format is{模型table}/detail.html. For example, if the table name of your article model isarticle, then all articles will use by default/template/{当前主题目录}/article/detail.htmlThis file is used to render the detail page. This is a basic general template, applicable to all content under the model.

  2. Category-specific detail page:If some of your articles need a special layout but you don't want to set it up separately for each article, you canDocument CategoryCome to specify the template uniformly.In the background "Content Management" -> "Document Category" when editing a category, there will be a "Document Template" field.special_article.htmlThen this category and all subcategories' documents under it (unless overridden by a higher-level setting) will use thisspecial_article.htmltemplate to display details. This template file is usually placed{模型table}/For example, under the directoryarticle/special_article.html.

  3. Customization of a single document:For an article with unique content or that requires special emphasis, you can specify the finest template when editing the document.In the background "Content Management" -> "Publish Document" or "Edit Documentexclusive_report.html），AnQi CMS will use it first to render the details page of this document. This template can be placed{模型table}/in the directory, for examplearticle/exclusive_report.htmlThis method provides the highest priority and can achieve highly targeted personalized layouts.

  4. Single page detail page:For pages such as "About Us" and "Contact Us", the customization logic of the template is similar to that of articles. They usually usepage/detail.htmlAs a general template. When editing a single page in the background "Page Resources" -> "Page Management", you can also specify a "single page template", for example,page/about_us.htmlto achieve its unique layout.

By using this hierarchical management, we can first design a universal detail page template, and then make local adjustments according to business needs at the level of categories or single documents, achieving both efficient and flexible content layout control.

Build content structure: Magic of custom fields

In addition to choosing different template files, Anqi CMS also throughContent modelProvide deep customization capabilities in content structure.Each content model can have its own unique fields, which will directly affect what information you can fill in when publishing content in the background, as well as the data that the frontend template can call to display.

In the "Content Management" -u003e "Content Model

  • Single-line text:Applicable for brief information such as 'article source', 'author name', etc.
  • Number:Applicable for 'product inventory', 'reading volume (system automatically processed, but can be manually defined if needed).'
  • Multi-line text:Suitable for 'Product Highlights', 'Detailed Description', etc.
  • Single choice/Multiple choice/Dropdown choice:Suitable for defining preset options such as 'Product Color', 'Size Specifications', etc., for easy selection and unified management.

After adding custom fields such as 'product model', 'product model', 'material', and 'warranty period', you can fill in these information when publishing a product.In the front-end template, you can call these custom fields to enrich the content display of the product detail page.This mechanism ensures the flexibility of content structure, which can adapt to various business scenarios.

Display content: Master template tags and filters

After determining which template file to use and defining the content structure, the next step is to use the anqi CMS provided in the template file.Template tags and filtersPresent the backend data accurately and elegantly on the page.

  1. Basic information display:The most core thing on the article detail page is the various data of the article itself. We mainly usearchiveDetailLabel to get this information. For example, to display the article title, you can directly use{{archive.Title}}, or more formally:

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

    The article content is the core, in order to ensure that the HTML content can be parsed correctly without being escaped, it needs to be added|safeFilter:

    <div>
    {%- archiveDetail articleContent with name="Content" %}
    {{articleContent|safe}}
</div>

    Other commonly used fields such as article abstractDescription, Publication timeCreatedTime, ViewsViews、ThumbnailThumb, Cover imageLogoThey can all be called in a similar way.CreatedTimeIt is usually accompanied bystampToDateFiltered for formatting, for example.{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}.

  2. Custom field display:There are two main ways to call custom fields you add to the content model:

    • Call directly by name:If you know the call field name of the custom field (for example,author），can be used directlyarchiveDetailTag retrieval:
      
<div>作者：{% archiveDetail with name="author" %}</div>
    • Loop through all parameters:If you want to dynamically display all custom fields and their values, you can usearchiveParamsTags:
      
{% archiveParams params %}
    {% for item in params %}
        <div>
            <span>{{item.Name}}：</span>
            <span>{{item.Value}}</span>
        </div>
    {% endfor %}
{% endarchiveParams %}
      This is very practical when displaying product specifications on the product detail page.

  3. Associate content with global information:The detail page often needs to display some related information or global website information, AnQi CMS also provides convenient tags:

    • Category information:UsecategoryDetailTags can retrieve the name, link, and other information of the current article category:
      
<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a>
    • Related articles:UsearchiveListLabel collaborationtype="related"Parameters, which can easily list other articles related to the current article:
      
{% archiveList relatedArchives with type="related" limit="5" %}
    {% for item in relatedArchives %}
        <a href="{{item.Link}}">{{item.Title}}</a>
    {% endfor %}
{% endarchiveList %}
    • Previous/Next: prevArchive