How to customize the display layout of the article detail page in AnQi CMS?

When building a website with AnQiCMS, we often need to make different types of articles or specific articles have unique appearances and layouts to better display content and enhance user experience.AnQiCMS provides a flexible mechanism that allows users to customize the display layout of article detail pages according to their needs, whether it is for the entire content model, a specific category, or a single independent article.

Understanding and utilizing these customization capabilities is the key to leveraging the advantages of AnQiCMS content management. Below, we will introduce step by step how to implement the personalized layout of the article detail page.

Flexible content model: the foundation of custom data structures

To customize the display layout of the article detail page, you first need to start with the content itself.AnQiCMS's flexible content model is the foundation for achieving this goal.The content model is like a blueprint for website content, defining the fields contained in different types of content (such as "articles" and "products").

By adding a "custom field" in the "content model" management backend, you can add unique data points such as "author bio", "product parameters", and "additional image sets" to your articles.These custom fields not only enrich the content of the article but also provide more elements for subsequent layout design.For example, if you need to display the 'inventory' and 'price' fields on your product detail page, you can define them in the product model and then call them to display in the detail page template.

Choosing and prioritizing template files

AnQiCMS shows article detail pages according to certain priority rules and selects the template file to be used. Understanding these rules can help us accurately control the layout:

1. Default model detail pageThis is the most basic template, usually named{模型table}/detail.htmlFor example, the default detail page of an article model may bearticle/detail.htmlWhen no more specific template is specified, the system will use this template by default.

2. Article ID exclusive detail pageIf you need to specify a completely unique layout for a specific article, you can create a naming format of{模型table}/detail-{文档ID}.htmlThe template file. For example, if an article with ID 10 belongs toarticlemodel, it can be createdarticle/detail-10.html. Once it exists, the template will take precedence over the model's default detail page.

3. Set independent article template：Except for the naming method by ID mentioned above, AnQiCMS also allows you to specify a custom template file directly through the "Document Template" field when editing a single article (for example,download.htmlThis setting has the highest priority and will override all default rules at the model and ID levels. This means that even if you havearticle/detail.htmlorarticle/detail-10.htmlIf an article with ID 10 has set the "document template" tomy-custom-layout.htmlthen the system will usemy-custom-layout.htmlto render.

4. category template settingsIn editing article categories, there is a "category template" field.You can specify a unified detail page template for a specific category (such as "News Information" or "Product Display").Further, you can also choose whether to apply it to subcategories, so that the template can be automatically inherited to all subcategories below it.When accessing the article detail page through a category link, if the category or its parent category has set a "document template" and the article itself does not specify a more specific template, this category template will be used.

In summary, the priority of template selection is from high to low:Set independent article template>Article ID exclusive detail page>category template settings>Default model detail page. This hierarchical structure allows you to flexibly control the display layout of the article according to your needs.

Deep into template editing: Building a personalized layout

Once you have determined the template file to modify or create (they are usually located in/templatethe current theme directory under the folder, with.htmlwith the suffix), the actual layout construction work follows.AnQiCMS's template engine is similar to Django, using concise syntax to display data and control logic.

1. Gathering the core information of the articleIn the detail page template, the most critical thing is to obtain the data of the current article. You can usearchiveDetailTag to get the title, content, publication time, and view count of the article. For example, to display the article title:<h1>{% archiveDetail with name="Title" %}</h1>. To display the article content:<div>{% archiveDetail archiveContent with name="Content" %}{{archiveContent|safe}}</div>. Note that for rich text content, in order to correctly parse HTML tags, it is usually necessary to add|safea filter. Dates and times can be formatted usingstampToDatea filter, such as{{stampToDate(archive.CreatedTime, "2006-01-02")}}.

2. Display custom field: If you define a custom field in the content model, you can flexibly call it on the detail page. If you know the name of the custom field (for exampleauthorIt can be directly passed through{% archiveDetail with name="author" %}It can be displayed.archiveParamsTags:

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

   For custom fields of image type (such asarcimages），You can also iterate through its values to display them:

   {% archiveDetail arcimages with name="arcimages" %}
       {% for img in arcimages %}
           <img src="{{img}}" alt="" />
       {% endfor %}
   

3. Enrich the page contentA complete article detail page usually does not only contain the article itself. AnQiCMS provides various tags to enrich the page content:

   • Previous/Next article: Use.prevArchiveandnextArchiveTags can conveniently add navigation links.
   • Related articles:archiveListLabel collaborationtype="related"The parameter can automatically retrieve recommendations related to the current article.
   • Article tags: PasstagListTags can list the tags associated with the current article and link to the tag page.
   • Comment ListIf the comment feature is enabled,commentListthe tag can display users' comments on the article.

4. Modular design and auxiliary tags： In order to maintain the neatness and maintainability of template code, it is recommended to adopt a modular design. Useincludetags to include common template fragments, such as header (partial/header.html) and the footer (partial/footer.html) or sidebar (partial/sidebar.htmlThis avoids repetition of code, making it easier to modify common parts.

By following these steps, combining your understanding of AnQiCMS backend management features and template tags, you can freely design and adjust the layout of the article detail page to meet the display needs of the content while maintaining consistency with the overall style of the website, providing an excellent user experience.

Frequently Asked Questions (FAQ)

1. How to apply a unique display layout for a single article?You can find the 'Document Template' field when editing specific articles in the background. In this field, enter the name of your custom template file (for examplemy-unique-article-layout.htmlMake sure the file is in your template design package. AnQiCMS will prioritize the template you specify for the article.

2. How can I display custom fields of an article in a template?If the custom field name ismyCustomField, you can use it in the template.{% archiveDetail with name="myCustomField" %}Directly display its value. If the field stores rich text HTML content, please be sure to add|safea filter such as{{archiveDetailWithCustomField|safe}}