In website operation, the article detail page is not only a place to display core content, but also a key channel for conveying additional information, enhancing professionalism, and improving user experience.In addition to the title and content, we often need to display some custom fields on the article detail page, such as author, source, publishing institution, product model, etc.This information can not only enrich the content of the article, but also help to enhance the authority and credibility of the website, even have a positive impact on SEO optimization and user decision-making.

Flexiblely define your custom fields

In the Auto CMS, to display custom fields, you first need to define them in the backend.This is due to the "Flexible Content Model" feature provided by Anqi CMS.You can create or modify corresponding content models based on different content types (such as articles, products, events, etc.).

Enter the backend, find the "Content Management" under the "Content Model" option.Here, you can select an existing model to edit or create a new model.On the model editing page, you will see a "Content Model Custom Fields" area.This is where we add personalized fields.

When adding a custom field, you can set the "Parameter Name" (this is the Chinese name displayed to the backend editors, such as "Article Author"), and the "Field Name" (this is the English name used when calling it in the template, such asauthor

Prepare article detail page template

Once the custom fields are defined and filled in the backend, the next step is to display them on the article detail page of the website front end. The template files of Anqi CMS are usually stored in/templateUnder the directory, the template of the article detail page is usually named{模型table}/detail.html.

The template syntax of Anqi CMS borrows from Django's template engine, using double curly braces{{变量}}To output variable content, use single curly braces and the percentage sign{% 标签 %}Process logic and call data. Understanding these basic rules allows us to easily embed custom fields into the page.

How to display custom fields on the article detail page

In the article detail page template, we mainly use two powerful tags to retrieve related article data:archiveDetailandarchiveParams.

Directly call the known custom field names

If your custom field has already been set with a clear 'field name' at the time of creation (for exampleauthor/source)，then you can directly use thearchiveDetaillabel or through the current document objectarchiveThe most direct way is to call it.

Suppose you have added two custom fields for the "Article Model" in the background, and their "call fields" are,author(Author) andsource(Source), and you filled in the content when you published the article.detail.htmlIn the template, you can display them like this:

<article>
    <h1>{{archive.Title}}</h1> {# 这是文章的默认标题 #}
    <div class="article-meta">
        <span>发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
        <span>浏览量：{{archive.Views}}</span>
        {# 直接调用自定义字段：作者 #}
        {% if archive.author %}
        <span>作者：{% archiveDetail with name="author" %}</span>
        {% endif %}
        {# 直接调用自定义字段：来源 #}
        {% if archive.source %}
        <span>来源：{% archiveDetail with name="source" %}</span>
        {% endif %}
    </div>
    <div class="article-content">
        {%- archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}} {# 文章内容通常包含HTML，需要使用|safe过滤器 #}
    </div>
</article>

You can also express it more concisely byarchiveObject directly accesses custom fields, the effect is the same:

<article>
    <h1>{{archive.Title}}</h1>
    <div class="article-meta">
        <span>发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
        <span>浏览量：{{archive.Views}}</span>
        {% if archive.author %}
        <span>作者：{{archive.author}}</span>
        {% endif %}
        {% if archive.source %}
        <span>来源：{{archive.source}}</span>
        {% endif %}
    </div>
    <div class="article-content">
        {{archive.Content|safe}}
    </div>
</article>

Here we also added a{% if archive.author %}The judgment, it's a good habit, because not all articles will fill in all custom fields, which can avoid displaying unnecessary labels when the fields are empty.

If your custom field is of the 'Multi-line text' type, and you set it to support Markdown editing in the backend content model, then when displaying in the template, you need to use in order to ensure that the Markdown format can be correctly rendered into HTML.|render|safefilter. For example:{{archive.custom_markdown_field|render|safe}}If it is only simple HTML rich text content,|safeis sufficient.

Traverse all custom fields (for dynamic display or uncertain field names)

In certain scenarios, you may want to dynamically display all the custom parameters of the article in a list format, for example, a "Product Parameters" list on a product detail page, where you may not know in advance what parameters will be there.archiveParamsThe tag makes it very convenient.

archiveParamsThe tag can retrieve all custom fields and their values of the current article (or a specified ID article) and return them as a traversable array object.

<article>
    <h1>{{archive.Title}}</h1>
    {# ... 文章元信息 ... #}
    <div class="article-params">
        <h3>其他参数</h3>
        <ul>
            {% archiveParams params %} {# params将是一个包含所有自定义字段的数组 #}
            {% for item in params %}
            <li>
                <span>{{item.Name}}：</span> {# item.Name是自定义字段的中文参数名 #}
                <span>{{item.Value}}</span> {# item.Value是自定义字段的值 #}
            </li>
            {% endfor %}
            {% endarchiveParams %}
        </ul>
    </div>
    <div class="article-content">
        {{archive.Content|safe}}
    </div>
</article>

Pass{% for item in params %}Loop, you can display the name and value of each custom field one by one.This method is very flexible, even if the background content model adds new custom fields, the front end can automatically display them without modifying the template code.

If you only want to display some custom fields, or need to perform special processing on certain fields, you can add conditional judgments in the loop:

<div class="article-params">
    <h3>其他参数</h3>
    <ul>
        {% archiveParams params %}
        {% for item in params %}
            {# 假设我们不想显示“内部备注”这个字段 #}
            {% if item.Name != '内部备注' %}
            <li>
                <span>{{item.Name}}：</span>
                <span>{{item.Value}}</span>
            </li>
            {% endif %}
        {% endfor %}
        {% endarchiveParams %}
    </ul>
</div>

Summary

The Anqi CMS allows for easy display of custom fields on article detail pages with its flexible content model and intuitive template tags.Whether you are directly referencing specific fields or dynamically traversing all parameters, you can always find a suitable implementation method.Reasonably utilizing these features can not only greatly enrich your website content, but also provide visitors with a more comprehensive and professional reading experience.

Common Questions (FAQ)

1. I added a custom field and filled in the content in the background, why is it not displayed on the front-end article detail page?

Firstly, ensure that your custom fields are correctly defined in the "Content Model" and that the name of the "Called Field" does not contain any spelling errors. Secondly, confirm that you have set the template for the article detail page (usually{模型table}/detail.htmlUsed the correct template tag to call these fields, such as{% archiveDetail with name="你的调用字段名" %}or{{archive.你的调用字段名}}Remember to add if the field content may be empty{% if ... %}Determine, prevent from not displaying. Finally, check if the system cache has been cleared. Sometimes, after modifying the template or backend settings, you need to refresh the cache to see the changes on the front end.

2. What are the types of custom fields? What are the differences in how they are displayed in the template?

The AutoCMS supports a variety of custom field types, including single-line text, numbers, multi-line text, single-choice, multiple-choice, and drop-down selection.

  • Single-line text/number：Directly output its value.
  • Multi-line text：If it contains newline characters or HTML content, it is recommended to use|safeFilter rendered correctly. If the Markdown editor is enabled on the backend and Markdown format is used,|render|safeFilter.
  • Single choice/Multiple choice/Drop-down choiceThese fields' values are typically selected by the user and can be output directly. If it is a multi-select type, the output may be a string or an array containing multiple values, which needs to be processed according to the actual output format, for example using|joinThe filter concatenates array elements into a string.

How can I make the content of my custom field support rich text editor or Markdown format like the article body?

When adding or editing a custom field in the "Content ModelEnable this option, and the field will have the corresponding editing feature when editing on the backend.|safeFilter (for HTML rich text content) or|render|safeFilter (for Markdown content),