In the AnQi CMS, managing and displaying content is a core function. The article detail page, as an important interface for users to obtain information and interact with the website, directly affects user experience and the efficiency of information transmission.AutoCMS 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 template system of Anqi CMS. It uses syntax similar to the Django template engine, and template files are usually named with.htmlEnglish suffix, and统一存放在系统根目录下的/templatefolder. The static resources such as styles, JavaScript scripts, and images related to the template are located in/public/static/Index. This separation design makes the content and presentation layer independent, convenient for developers to carry out secondary development and personalized adjustment.

Confirm and create your article detail page template file

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

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

  • Name 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 uniform 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.htmlFile starts, then save it as the above agreed name for customization.

[en]Specify a custom template in the background

Create a custom template file and then associate it in the Safe CMS backend to let the system know which template to use for rendering specific articles:

  1. Publish/Edit document: In the "Content Managementmy_custom_article.html）。The system will prioritize the template specified here.
  2. Specify when setting the category:Under the "Content Management" module, when editing a category in "Document Category", there are also two options, "Category Template" and "Document Template", under "Other Parameters".“Category Template”is used to control the layout of the category list page, while “Document Template”is used to control the layout of the detail page for all articles under the category.If you want all articles under a certain category to use the same custom layout, you can specify it here.

Invoke core data and control display elements

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

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

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

  • Display custom additional fields:If you have added custom fields (such as "author{% 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 directly by field name:<div>作者：{% archiveDetail with name="author" %}</div>.

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

    • 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.

    • By using 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 be conveniently added as 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 the list of related articles:同样使用{% archiveList %}Tags, by settingtype="related"It can retrieve a list of other articles related to 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 %}The tag is 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 %}Tags used to display the comment list of the article, you can also combine{% pagination %}tags for pagination display.

    • Don't forget to add it to the comment formcaptcha_idandcaptchaField and corresponding JavaScript code to support captcha functionality, to prevent spam comments.

  • Structure and logical control:

    • {% include "partial/header.html" %}English for auto is English: 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.

Manage layout and style files.

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

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

Through these tags and flexible file management methods, you can completely create an article detail page that meets specific content display requirements, whether it's a simple blog post, a product introduction with illustrations, or a complex case display page, all of which can be easily realized through Anqi CMS.

Common Questions (FAQ)

1. 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.article/detail.htmlThe default detail page for the article model,product/detail.htmlAs the default detail page of the product model.So, the content of different models will be automatically applied to their 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 to display custom fields on the article detail page?If you add a custom field to a model (such as an article model) in the "Content Model" section in the background,author(Author) andsourceFrom source, so in the article detail page template, these fields can be displayed in two ways: a.Direct call: <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 especially suitable for scenarios where the number of fields is not fixed or a uniform display format is required.

3. I uploaded a custom template file, but it didn't take effect on the website front-end, why is that?There are several common reasons that can cause a custom template not to take effect: a.Template file path or name error:Please carefully check if your template file is stored in/template/你的模板主题目录/, and whether the naming conforms to the conventions of Anqi CMS (for example{模型table}/detail.htmlormy_custom_article.html). b.The background did not specify a template:Make sure you have correctly selected or filled in the name of your custom template file on the article publication/editing page, or the settings page of the corresponding category. c.System cache not updated:Click on 'Clear Cache' in the background 'Update Cache' feature. Browser cache:Try clearing your browser cache or access in incognito mode, as the browser may cache old page resources.