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

When using AnQiCMS to build a website, 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 an independent article.

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

Flexible content model: the foundation for custom data structures

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

Through the "Content ModelThese custom fields not only enrich the article content, but also provide more elements for subsequent layout design.For example, if your product detail page needs to display the fields "Inventory" and "Price", you can define them in the product model and then call them to display in the detail page template.

Selection and priority of template files

AnQiCMS When displaying the article detail page, it will select the template file to use according to a certain priority rule. Understanding these rules can help us accurately control the layout:

  1. Model Default Details Page: This is the most basic template, usually named{模型table}/detail.html. For example, the default details page of the article model might 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 named format of{模型table}/detail-{文档ID}.htmlThe template file. For example, if an article with ID 10 belongs toarticlemodel, it can createarticle/detail-10.html. Once it exists, the template will be used preferentially over the model's default detail page.

  3. Article independent template setting：Except for the naming method by ID mentioned above, AnQiCMS also allows specifying 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 it overrides all default rules at both model and ID levels. This means that even if you havearticle/detail.htmlorarticle/detail-10.htmlIf an article with ID 10 is set to 'Document Template' in the background,my-custom-layout.htmlthe system will use,my-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 specific categories (such as "News Information" or "Product Display").Further, you can also choose to “Apply to Subcategories”, so that the template is automatically inherited by all subcategories below.When the article detail page is accessed via 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 as follows:Article independent template setting>Article ID exclusive detail page>category template settings>Model Default Details Page. This hierarchical structure allows you to flexibly control the display layout of the article from general to specific according to your needs.

Deeply edit templates: Build personalized layouts

Once the template file to be modified or created (they are usually located in/templatethe current theme directory under the folder, with.htmlThe suffix), followed by the actual layout construction work.AnQiCMS's template engine is similar to Django, using concise syntax to display data and control logic.

  1. Obtain the core information of the article： In the detail page template, the most core is to obtain the data of the current article. You can usearchiveDetailTag to get the title, content, publication time, and view count of articles. 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, for rich text content, in order to correctly parse HTML tags, it usually needs to be added|safefilters. Date and time can be formatted usingstampToDatefilters, such as{{stampToDate(archive.CreatedTime, "2006-01-02")}}.

  2. Display custom fieldsIf you define custom fields in the content model, you can flexibly call them on the detail page. If you know the name of the custom field (for exampleauthor), you can directly access{% archiveDetail with name="author" %}Show. If you want to cyclically display all custom fields, you can usearchiveParamsTags:

    {% 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 display its value by cyclically iterating through it:

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

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

    • Previous/next article: UseprevArchiveandnextArchiveTags can conveniently add navigation links.
    • Related Articles:archiveListlabel combined withtype="related"Parameters can automatically retrieve recommended content related to the current article.
    • Article tags: ThroughtagListTags, which can list the tags associated with the current article and link to the tag page.
    • Comment list: If the comment feature is enabled,commentListtags can display users' comments on the article.

  4. Modular design and auxiliary tags： To maintain the neatness and maintainability of template code, it is recommended to adopt modular design. Useincludetags to introduce common template fragments, such as headers (partial/header.htmlEnglish、页脚 (partial/footer.html) or in the sidebar (partial/sidebar.htmlEnglish。这避免了重复编写代码，也让修改公共部分变得更加便捷。

Through the above steps, combining your understanding of AnQiCMS backend management functions and template tags, you can freely design and adjust the layout of the article detail page, ensuring it meets the display needs of the content while maintaining consistency with the overall website style, providing an excellent user experience.

Common Questions and Answers (FAQ)

  1. How to apply a unique display layout to a single article?You can find the "Document Template" field when editing specific articles in the background. In this field, enter the custom template filename you want (for examplemy-unique-article-layout.html)，and ensure that the file exists in your template design package. AnQiCMS will prioritize the template you specify for this article.

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