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

In AnQi CMS, managing and displaying content is a core function, and the article detail page, as an important interface for users to obtain information and interact with the website, is directly affected by the layout and design of elements, which has a direct impact on user experience and information communication efficiency.AnQi CMS provides high flexibility, allowing users to deeply customize the display of article detail pages according to their own needs.

To customize the article detail page, you first need to understand the Anqi CMS template system. It uses syntax similar to the Django template engine, and template files are usually named with.htmlwith the suffix and uniformly stored in the root directory of the system/templatefolder. Static resources such as styles, JavaScript scripts, and images related to the template are located/public/static/Directory. This separation design makes it possible for content and presentation layer to be managed independently, which is convenient for developers to carry out secondary development and personalized adjustment.

Confirm and create your article detail page template file.

The AnqiCMS template follows certain naming conventions. The default template path for article detail pages is{模型table}/detail.html. Here,{模型table}It is usually the table name defined when the content model is set up in the background, for example, if the table name of your article model isarticle, then the default article detail page template isarticle/detail.html.

A more flexible way is to specify a dedicated template for specific articles or articles in a specific category. The system supports naming custom templates by document ID or category ID:

• Named by document ID: {模型table}/detail-{文档ID}.htmlFor example, if you want to create a unique detail page for an article with ID 10, you can name itarticle/detail-10.html.
• Specify through categories:You can specify a unified document template for all articles under this category in the category settings, for examplemycategory_detail.html.

This means you can first copy and modify the default one{模型table}/detail.htmlThe file starts and then save it as the file with the above agreed name for customization.

Specify a custom template in the background.

After creating a custom template file, you still need to associate it in the Anq CMS backend so that the system knows which template to use to render specific articles:

1. Specify when publishing/editing a document:In the 'Content Management' module, when you 'publish documents' or 'edit documents', in the 'Other Parameters' section, you will find an option named 'Document Template'. Here you can enter your custom template filename (for examplemy_custom_article.html)。The system will prioritize the use of the template specified here.
2. Specified when setting categories:In the "Content Management" module under "Document Category", when editing a category, there are also two options, "Category Template" and "Document Template", in the "Other Parameters".The "Category Template" controls the layout of the category list page, while the "Document Template" controls the layout of the detail pages for all articles in the category.If you want all articles under a category to use the same custom layout, you can specify it here.

Invoke core data and control display elements

In the article detail page template file, you can use the rich tags provided by AnQi CMS to call and display data, as well as control the layout:

• Get the article's own data:Use{% archiveDetail %}Tag. This is the most core tag on the detail page, which allows you to obtain all fields of the article such as title, content, link, description, cover image, and so on.

  • For example, to display the article title:<h1>{% archiveDetail with name="Title" %}</h1>.
  • Show article content:<div>{% archiveDetail with name="Content" render=true lazy="data-src" %}{{archiveContent|safe}}</div>. Here,render=trueEspecially useful when turning on the Markdown editor, it will render Markdown content into HTML;lazy="data-src"Then it is convenient to integrate lazy loading of images;|safeThe filter is used to prevent HTML tags in the content from being escaped.
  • You can accessname="字段名称"To get a single field, for examplename="Logo"Get the cover main image,name="Images"Get the group image.

• Display custom additional fields:If you add custom fields (such as "author", "source") in the background of the content model, you can use{% archiveParams %}tags to call.

  • For example, loop to display all custom fields:

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

  • Or call it directly by field name:<div>作者：{% archiveDetail with name="author" %}</div>.

• Call category information:Use{% categoryDetail %}Tags, which can obtain the name, link, description, etc. of the article category.

  • For example:所属分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a>.

• Display related tags: {% tagList tags %}Tags can retrieve all tags associated with the current article.

  • Through a loop, you can display the links and names of these tags, for example:

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

• Navigate to the previous/next article: {% prevArchive %}and{% nextArchive %}Tags can conveniently add navigation links at the bottom of the article detail page.

  • For example:

    
    {% prevArchive prev %}
        {% if prev %}<a href="{{prev.Link}}">上一篇：{{prev.Title}}</a>{% else %}没有了{% endif %}
    {% endprevArchive %}
    

• Display related article list:Use in the same way{% archiveList %}Tags, set throughtype="related"to retrieve other related articles for the current article.

  • For example:

    
    {% archiveList relatedArchives with type="related" limit="5" %}
        {% for item in relatedArchives %}
            <li><a href="{{item.Link}}">{{item.Title}}</a></li>
        {% endfor %}
    {% endarchiveList %}
    

• Breadcrumbs navigation: {% breadcrumb %}Used to generate the navigation path of the website, helping users understand their current location.

  • For example:

    
    {% breadcrumb crumbs %}
        {% for item in crumbs %}
            <span><a href="{{item.Link}}">{{item.Name}}</a></span>{% if not forloop.Last %} > {% endif %}
        {% endfor %}
    {% endbreadcrumb %}
    

• Integrated comment function: {% commentList %}Used to display the comment list of the article, you can also combine{% pagination %}tags to implement pagination display.

  • Don't forget to add in the comment formcaptcha_idandcaptchathe corresponding JavaScript code to support captcha functionality to prevent spam comments.

• Structure and logical control:

  • {% include "partial/header.html" %}: Used to introduce reusable template fragments, such as headers and footers.
  • {% extends "base.html" %}: Implement template inheritance, you can define a basic skeleton template and then overwrite specific content blocks in the detail page template ({% block content %})
  • {% if 条件 %}/{% for 循环 %}Perform conditional judgment and loop traversal to control the display logic of content.

Management of layout and style files.

In addition to calling data from template files, the final layout and visual effects of the article detail page are achieved through the combination of HTML structure and CSS styles. You can place custom CSS and JS files in/public/static/你的模板目录/css/and/public/static/你的模板目录/js/In the directory, then use it in the template{% system with name="TemplateUrl" %}Use the tag to get the static file address of the template and refer to them. For example:

<link href="{% system with name="TemplateUrl" %}/css/custom.css" rel="stylesheet">

By these tags and flexible file management methods, you can completely create a detailed page of articles that meet specific content display requirements, whether it is a simple blog article, a product introduction with pictures and texts, or a complex case display page, all of which can be easily realized through AnQi CMS.

Frequently Asked Questions (FAQ)

How to set different layouts for article detail pages of different content models (such as articles, products)?You can define multiple content models in the Anqi CMS backend, such as the "Article" model and the "Product" model.Then, create an independent detail page template file for each content model.According to the AnQi CMS template naming convention, you can createarticle/detail.htmlAs the default detail page for the article model, as well asproduct/detail.htmlAs the default detail page of the product model. In this way, the content of different models will automatically apply the corresponding template layout.You can also specify a more specific template file for a single content item when publishing or editing a single article/product in the 'Document Template' option.

2. How do I display custom fields on the article detail page?If you add a custom field, such asauthor(author), andsource(Source), then in the article detail page template, these fields can be displayed in two ways: a.Call directly: <div>作者：{% archiveDetail with name="author" %}</div>. b.Loop traversal:If you want to display all custom fields, you can use{% archiveParams params %}{% for item in params %}<p>{{item.Name}}：{{item.Value}}</p>{% endfor %}{% endarchiveParams %}This method is particularly suitable for scenarios where the number of fields is not fixed or a uniform display format is required.

3. Why didn't my custom template file work on the website front-end?There are several common reasons that may cause a custom template not to work: a.Template file path or naming error:Please check if your template file is located in/template/你的模板主题目录/and the naming conforms to the Anqi CMS conventions (for example{模型table}/detail.htmlormy_custom_article.html). b.The backend did not specify a template:Make sure you have correctly selected or filled in the name of your custom template file on the article publishing/editing page, or the settings page for the corresponding category. c.The system cache has not been updated:Click on 'Clear Cache' in the background 'Update Cache' feature. d.Browser Caching:Try clearing the browser cache or accessing in incognito mode, as the browser may cache old page resources.